change to viewer tab on hover button to sp-action-button
Abdullah Alfaraj
parent
d58aac89a6
commit
732ff1ad6a
|
|
@ -0,0 +1,153 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
<svg
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:cc="http://web.resource.org/cc/"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns:ns1="http://sozi.baierouge.fr"
|
||||
id="svg1"
|
||||
sodipodi:docname="copy_stencil.svg"
|
||||
viewBox="0 0 60 60"
|
||||
sodipodi:version="0.32"
|
||||
version="1.0"
|
||||
y="0"
|
||||
x="0"
|
||||
inkscape:version="0.38.1"
|
||||
sodipodi:docbase="/home/danny/flat/scalable/actions"
|
||||
>
|
||||
<sodipodi:namedview
|
||||
id="base"
|
||||
bordercolor="#666666"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:window-width="1016"
|
||||
pagecolor="#ffffff"
|
||||
inkscape:zoom="13.893068"
|
||||
inkscape:window-x="0"
|
||||
borderopacity="1.0"
|
||||
inkscape:cx="34.811042"
|
||||
inkscape:cy="16.968635"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-height="685"
|
||||
inkscape:pageopacity="0.0"
|
||||
/>
|
||||
<rect
|
||||
id="rect1101"
|
||||
style="stroke-linejoin:round;fill-rule:evenodd;stroke:#4c4c4c;stroke-width:3.125;fill:#cccccc"
|
||||
rx="2.4745"
|
||||
height="36.513"
|
||||
width="34.732"
|
||||
sodipodi:stroke-cmyk="(0.0000000 0.0000000 0.0000000 0.69999999)"
|
||||
y="4.5767"
|
||||
x="5.0385"
|
||||
/>
|
||||
<rect
|
||||
id="rect1111"
|
||||
style="stroke-linejoin:round;fill-rule:evenodd;stroke:#4c4c4c;stroke-width:3.125;fill:#b3b3b3"
|
||||
rx="2.4745"
|
||||
height="36.513"
|
||||
width="34.732"
|
||||
sodipodi:stroke-cmyk="(0.0000000 0.0000000 0.0000000 0.69999999)"
|
||||
y="20.161"
|
||||
x="20.178"
|
||||
/>
|
||||
<path
|
||||
id="path968"
|
||||
sodipodi:nodetypes="ccccccc"
|
||||
style="stroke-linejoin:round;fill-rule:evenodd;stroke:#333333;stroke-linecap:round;stroke-width:3.125;fill:#7f7f7f"
|
||||
d="m10.971 22.475c8.474 18.589 22.826 14.215 22.963 14.215v-6.15l8.269 9.459-8.338 8.788v-6.219s-19.887 4.647-22.894-20.093z"
|
||||
sodipodi:stroke-cmyk="(0 0 0 0.8)"
|
||||
/>
|
||||
<metadata
|
||||
>
|
||||
<rdf:RDF
|
||||
>
|
||||
<cc:Work
|
||||
>
|
||||
<dc:format
|
||||
>image/svg+xml</dc:format
|
||||
>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage"
|
||||
/>
|
||||
<cc:license
|
||||
rdf:resource="http://creativecommons.org/licenses/publicdomain/"
|
||||
/>
|
||||
<dc:publisher
|
||||
>
|
||||
<cc:Agent
|
||||
rdf:about="http://openclipart.org/"
|
||||
>
|
||||
<dc:title
|
||||
>Openclipart</dc:title
|
||||
>
|
||||
</cc:Agent
|
||||
>
|
||||
</dc:publisher
|
||||
>
|
||||
<dc:title
|
||||
>ftcopy</dc:title
|
||||
>
|
||||
<dc:date
|
||||
>2011-01-31T02:01:26</dc:date
|
||||
>
|
||||
<dc:description
|
||||
>Originally uploaded by Danny Allen for OCAL 0.18 this icon is part of the flat theme</dc:description
|
||||
>
|
||||
<dc:source
|
||||
>https://openclipart.org/detail/112297/ftcopy-by-anonymous</dc:source
|
||||
>
|
||||
<dc:creator
|
||||
>
|
||||
<cc:Agent
|
||||
>
|
||||
<dc:title
|
||||
>Anonymous</dc:title
|
||||
>
|
||||
</cc:Agent
|
||||
>
|
||||
</dc:creator
|
||||
>
|
||||
<dc:subject
|
||||
>
|
||||
<rdf:Bag
|
||||
>
|
||||
<rdf:li
|
||||
>flat</rdf:li
|
||||
>
|
||||
<rdf:li
|
||||
>icon</rdf:li
|
||||
>
|
||||
<rdf:li
|
||||
>theme</rdf:li
|
||||
>
|
||||
</rdf:Bag
|
||||
>
|
||||
</dc:subject
|
||||
>
|
||||
</cc:Work
|
||||
>
|
||||
<cc:License
|
||||
rdf:about="http://creativecommons.org/licenses/publicdomain/"
|
||||
>
|
||||
<cc:permits
|
||||
rdf:resource="http://creativecommons.org/ns#Reproduction"
|
||||
/>
|
||||
<cc:permits
|
||||
rdf:resource="http://creativecommons.org/ns#Distribution"
|
||||
/>
|
||||
<cc:permits
|
||||
rdf:resource="http://creativecommons.org/ns#DerivativeWorks"
|
||||
/>
|
||||
</cc:License
|
||||
>
|
||||
</rdf:RDF
|
||||
>
|
||||
</metadata
|
||||
>
|
||||
</svg
|
||||
>
|
||||
|
After Width: | Height: | Size: 4.1 KiB |
30
index.html
30
index.html
|
|
@ -89,7 +89,7 @@
|
|||
}
|
||||
.viewer-image-button {
|
||||
display: none;
|
||||
background-color: #6db579;
|
||||
background-color: #495b79;
|
||||
color: white;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
|
|
@ -97,13 +97,13 @@
|
|||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
/* height: 20px; */
|
||||
margin: 0;
|
||||
max-height:100%;
|
||||
max-width:100%;
|
||||
}
|
||||
.viewer-image-button:hover {
|
||||
background-color: #407c5e;
|
||||
background-color: #333f52;
|
||||
}
|
||||
.viewer-image-container {
|
||||
position: relative;
|
||||
|
|
@ -112,7 +112,7 @@
|
|||
margin: 0;
|
||||
}
|
||||
.viewer-image-container:hover .viewer-image-button {
|
||||
display: block;
|
||||
display: flex;
|
||||
}
|
||||
.viewer-container {
|
||||
display: flex;
|
||||
|
|
@ -430,6 +430,10 @@ background: #f0f0f0 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCA
|
|||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
|
||||
#btnGenerate{
|
||||
opacity: 50%
|
||||
}
|
||||
</style>
|
||||
|
||||
<body>
|
||||
|
|
@ -668,6 +672,19 @@ background: #f0f0f0 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCA
|
|||
<sp-label slot="label">Progress...</sp-label>
|
||||
</sp-progressbar>
|
||||
<sp-checkbox id="chUsePromptShortcut" checked>prompt shortcut</sp-checkbox>
|
||||
</div>
|
||||
<div>
|
||||
<sp-action-button id ="svg_sp_btn" style="display:none;">
|
||||
<div slot="icon" style="fill: currentColor">
|
||||
<svg viewBox="0 0 36 36" style="width: 18px; height: 18px;">
|
||||
<path d="M33.567 8.2L27.8 2.432a1.215 1.215 0 0 0-.866-.353H26.9a1.371 1.371 0 0 0-.927.406L5.084 23.372a.99.99 0 0 0-.251.422L2.055 33.1c-.114.377.459.851.783.851a.251.251 0 0 0 .062-.007c.276-.063 7.866-2.344 9.311-2.778a.972.972 0 0 0 .414-.249l20.888-20.889a1.372 1.372 0 0 0 .4-.883 1.221 1.221 0 0 0-.346-.945zM11.4 29.316c-2.161.649-4.862 1.465-6.729 2.022l2.009-6.73z"/>
|
||||
</svg>
|
||||
</div>
|
||||
Edit Text
|
||||
</sp-action-button>
|
||||
|
||||
<!-- <img width="15px" height="15px" src="./icon/ftcopy.svg"> -->
|
||||
|
||||
</div>
|
||||
<div class="prompts">
|
||||
<!-- <sp-label slot="label">Prompt</sp-label> -->
|
||||
|
|
@ -726,9 +743,12 @@ background: #f0f0f0 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCA
|
|||
|
||||
<img id="init_image" class="column-item-image" src='https://source.unsplash.com/random'
|
||||
width="300px" height="100px" />
|
||||
<button class="column-item button-style disabled-btn" disabled id="">Image</button>
|
||||
|
||||
</div>
|
||||
<div class="imgButton">
|
||||
<div class="imgButton" id="set-init-image-container">
|
||||
<button class="column-item button-style disabled-btn" disabled id="bSetInitImage">Image</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
|
|
|
|||
18
viewer.js
18
viewer.js
|
|
@ -152,19 +152,33 @@ class ViewerImage {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
addButtonHtml(){
|
||||
// Create new container element
|
||||
const container = document.createElement('div');
|
||||
|
||||
|
||||
container.className = "viewer-image-container";
|
||||
|
||||
|
||||
const elem = document.getElementById('svg_sp_btn');
|
||||
|
||||
// Create a copy of it
|
||||
const clone = elem.cloneNode(true);
|
||||
const button = clone
|
||||
button.style.display = null
|
||||
|
||||
|
||||
// Create button element
|
||||
const button = document.createElement('button');
|
||||
// const button = document.createElement('sp-button');
|
||||
button.className = "viewer-image-button";
|
||||
button.innerHTML = "Button";
|
||||
// button.innerHTML = "Button";
|
||||
|
||||
// Append elements to container
|
||||
container.appendChild(this.img_html);
|
||||
container.appendChild(button);
|
||||
|
||||
|
||||
|
||||
this.img_html = container;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue