Merge pull request #7032 from gmq/extra-network-styles

Extra network view style

4 files changed, 73 insertions, 4 deletions

diff --git a/html/image-update.svg b/html/image-update.svg
new file mode 100644
index 00000000..3abf12df
--- /dev/null
+++ b/html/image-update.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <filter id='shadow' color-interpolation-filters="sRGB">
+    <feDropShadow flood-color="black" dx="0" dy="0" flood-opacity="0.9" stdDeviation="0.5"/>
+    <feDropShadow flood-color="black" dx="0" dy="0" flood-opacity="0.9" stdDeviation="0.5"/>
+  </filter>
+  <path style="filter:url(#shadow);" fill="#FFFFFF" d="M13.18 19C13.35 19.72 13.64 20.39 14.03 21H5C3.9 21 3 20.11 3 19V5C3 3.9 3.9 3 5 3H19C20.11 3 21 3.9 21 5V11.18C20.5 11.07 20 11 19.5 11C19.33 11 19.17 11 19 11.03V5H5V19H13.18M11.21 15.83L9.25 13.47L6.5 17H13.03C13.14 15.54 13.73 14.22 14.64 13.19L13.96 12.29L11.21 15.83M19 13.5V12L16.75 14.25L19 16.5V15C20.38 15 21.5 16.12 21.5 17.5C21.5 17.9 21.41 18.28 21.24 18.62L22.33 19.71C22.75 19.08 23 18.32 23 17.5C23 15.29 21.21 13.5 19 13.5M19 20C17.62 20 16.5 18.88 16.5 17.5C16.5 17.1 16.59 16.72 16.76 16.38L15.67 15.29C15.25 15.92 15 16.68 15 17.5C15 19.71 16.79 21.5 19 21.5V23L21.25 20.75L19 18.5V20Z" />
+</svg>
diff --git a/modules/shared.py b/modules/shared.py
index a644c0be..e17b4561 100644
--- a/modules/shared.py
+++ b/modules/shared.py
@@ -431,6 +431,10 @@ options_templates.update(options_section(('interrogate', "Interrogate Options"),
     "deepbooru_filter_tags": OptionInfo("", "filter out those tags from deepbooru output (separated by comma)"),

 }))

 

+options_templates.update(options_section(('extra_networks', "Extra Networks"), {

+    "extra_networks_default_view": OptionInfo("cards", "Default view for Extra Networks", gr.Dropdown, { "choices": ["cards", "thumbs"] }),

+}))

+

 options_templates.update(options_section(('ui', "User interface"), {

     "return_grid": OptionInfo(True, "Show grid in results for web"),

     "do_not_show_images": OptionInfo(False, "Do not show any images in results for web"),

diff --git a/modules/ui_extra_networks.py b/modules/ui_extra_networks.py
index af2b8071..2ddac3d8 100644
--- a/modules/ui_extra_networks.py
+++ b/modules/ui_extra_networks.py
@@ -26,6 +26,7 @@ class ExtraNetworksPage:
         pass

 

     def create_html(self, tabname):

+        view = shared.opts.extra_networks_default_view

         items_html = ''

 

         for item in self.list_items():

@@ -36,7 +37,7 @@ class ExtraNetworksPage:
             items_html = shared.html("extra-networks-no-cards.html").format(dirs=dirs)

 

         res = f"""

-<div id='{tabname}_{self.name}_cards' class='extra-network-cards'>

+<div id='{tabname}_{self.name}_cards' class='extra-network-{view}'>

 {items_html}

 </div>

 """

diff --git a/style.css b/style.css
index bf8260d7..b2677fa1 100644
--- a/style.css
+++ b/style.css
@@ -792,21 +792,78 @@ footer {
     display: inline-block;

     max-width: 16em;

     margin: 0.3em;

+    align-self: center;

 }

 

-.extra-network-cards .nocards{

+#txt2img_extra_view, #img2img_extra_view {

+    width: auto;

+}

+

+.extra-network-cards .nocards, .extra-network-thumbs .nocards{

     margin: 1.25em 0.5em 0.5em 0.5em;

 }

 

-.extra-network-cards .nocards h1{

+.extra-network-cards .nocards h1, .extra-network-thumbs .nocards h1{

     font-size: 1.5em;

     margin-bottom: 1em;

 }

 

-.extra-network-cards .nocards li{

+.extra-network-cards .nocards li, .extra-network-thumbs .nocards li{

     margin-left: 0.5em;

 }

 

+.extra-network-thumbs {

+    display: flex;

+    flex-flow: row wrap;

+    gap: 10px;

+}

+

+.extra-network-thumbs .card {

+    height: 6em;

+    width: 6em;

+    cursor: pointer;

+    background-image: url('./file=html/card-no-preview.png');

+    background-size: cover;

+    background-position: center center;

+    position: relative;

+}

+

+.extra-network-thumbs .card:hover .additional a {

+    display: block;

+}

+

+.extra-network-thumbs .actions .additional a {

+    background-image: url('./file=html/image-update.svg');

+    background-repeat: no-repeat;

+    background-size: cover;

+    background-position: center center;

+    position: absolute;

+    top: 0;

+    left: 0;

+    width: 24px;

+    height: 24px;

+    display: none;

+    font-size: 0;

+    text-align: -9999;

+}

+

+.extra-network-thumbs .actions .name {

+    position: absolute;

+    bottom: 0;

+    font-size: 10px;

+    padding: 3px;

+    width: 100%;

+    overflow: hidden;

+    white-space: nowrap;

+    text-overflow: ellipsis;

+    background: rgba(0,0,0,.5);

+}

+

+.extra-network-thumbs .card:hover .actions .name {

+    white-space: normal;

+    word-break: break-all;

+}

+

 .extra-network-cards .card{

     display: inline-block;

     margin: 0.5em;