From 732ff1ad6ab16d00fa4ba32e1d0052be9ca9ffb4 Mon Sep 17 00:00:00 2001
From: Abdullah Alfaraj <abdullah.a.f2014@gmail.com>
Date: Thu, 26 Jan 2023 06:08:00 +0300
Subject: [PATCH] change to viewer tab on hover button to sp-action-button

---
 icon/ftcopy.svg | 153 ++++++++++++++++++++++++++++++++++++++++++++++++
 index.html      |  30 ++++++++--
 viewer.js       |  18 +++++-
 3 files changed, 194 insertions(+), 7 deletions(-)
 create mode 100644 icon/ftcopy.svg

diff --git a/icon/ftcopy.svg b/icon/ftcopy.svg
new file mode 100644
index 0000000..c6da22d
--- /dev/null
+++ b/icon/ftcopy.svg
@@ -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
+>
diff --git a/index.html b/index.html
index 192dea7..42a904e 100644
--- a/index.html
+++ b/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>
diff --git a/viewer.js b/viewer.js
index c063147..63edcf7 100644
--- a/viewer.js
+++ b/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;
   }