From 2831dc70a7fb772f077776d7e92208af2ff62c7b Mon Sep 17 00:00:00 2001
From: hswlab <hswlab@googlemail.com>
Date: Mon, 11 Mar 2024 16:35:03 +0100
Subject: [PATCH] feat: use scrollable 2 column layout for styles (#1883)

* Styles Grouping/Sorting #1770

* Update css/style.css

Co-authored-by: Manuel Schmid <9307310+mashb1t@users.noreply.github.com>

* Update javascript/script.js

Co-authored-by: Manuel Schmid <9307310+mashb1t@users.noreply.github.com>

* feat: use standard padding again

---------

Co-authored-by: Manuel Schmid <9307310+mashb1t@users.noreply.github.com>
Co-authored-by: Manuel Schmid <manuel.schmid@odt.net>
---
 css/style.css        | 45 ++++++++++++++++++++++++++++++++++++++++++++
 javascript/script.js | 16 +++++++++++-----
 webui.py             |  2 +-
 3 files changed, 57 insertions(+), 6 deletions(-)

diff --git a/css/style.css b/css/style.css
index 010c8e7..3cc1e5e 100644
--- a/css/style.css
+++ b/css/style.css
@@ -218,3 +218,48 @@
 #stylePreviewOverlay.lower-half {
     transform: translate(-140px, -140px);
 }
+
+/* scrollable box for style selections */
+.contain .tabs {
+  height: 100%;
+}
+
+.contain .tabs .tabitem.style_selections_tab {
+  height: 100%;
+}
+
+.contain .tabs .tabitem.style_selections_tab > div:first-child {
+  height: 100%;
+}
+
+.contain .tabs .tabitem.style_selections_tab .style_selections {
+  min-height: 200px;
+  height: 100%;
+}
+
+.contain .tabs .tabitem.style_selections_tab .style_selections .wrap[data-testid="checkbox-group"] {
+  position: absolute; /* remove this to disable scrolling within the checkbox-group */
+  overflow: auto;
+  padding-right: 2px;
+  max-height: 100%;
+}
+
+.contain .tabs .tabitem.style_selections_tab .style_selections .wrap[data-testid="checkbox-group"] label {
+  /* max-width: calc(35% - 15px) !important; */ /* add this to enable 3 columns layout */
+  flex: calc(50% - 5px) !important;
+}
+
+.contain .tabs .tabitem.style_selections_tab .style_selections .wrap[data-testid="checkbox-group"] label span {
+  /* white-space:nowrap; */ /* add this to disable text wrapping (better choice for 3 columns layout) */
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* styles preview tooltip */
+.preview-tooltip {
+  background-color: #fff8;
+  font-family: monospace;
+  text-align: center;
+  border-radius-top: 5px;
+  display: none; /* remove this to enable tooltip in preview image */
+}
\ No newline at end of file
diff --git a/javascript/script.js b/javascript/script.js
index 8f4cac5..9aa0b5c 100644
--- a/javascript/script.js
+++ b/javascript/script.js
@@ -150,9 +150,12 @@ function initStylePreviewOverlay() {
     let overlayVisible = false;
     const samplesPath = document.querySelector("meta[name='samples-path']").getAttribute("content")
     const overlay = document.createElement('div');
+    const tooltip = document.createElement('div');
+    tooltip.className = 'preview-tooltip';
+    overlay.appendChild(tooltip);
     overlay.id = 'stylePreviewOverlay';
     document.body.appendChild(overlay);
-    document.addEventListener('mouseover', function(e) {
+    document.addEventListener('mouseover', function (e) {
         const label = e.target.closest('.style_selections label');
         if (!label) return;
         label.removeEventListener("mouseout", onMouseLeave);
@@ -162,9 +165,12 @@ function initStylePreviewOverlay() {
         const originalText = label.querySelector("span").getAttribute("data-original-text");
         const name = originalText || label.querySelector("span").textContent;
         overlay.style.backgroundImage = `url("${samplesPath.replace(
-          "fooocus_v2",
-          name.toLowerCase().replaceAll(" ", "_")
+            "fooocus_v2",
+            name.toLowerCase().replaceAll(" ", "_")
         ).replaceAll("\\", "\\\\")}")`;
+
+        tooltip.textContent = name;
+
         function onMouseLeave() {
             overlayVisible = false;
             overlay.style.opacity = "0";
@@ -172,8 +178,8 @@ function initStylePreviewOverlay() {
             label.removeEventListener("mouseout", onMouseLeave);
         }
     });
-    document.addEventListener('mousemove', function(e) {
-        if(!overlayVisible) return;
+    document.addEventListener('mousemove', function (e) {
+        if (!overlayVisible) return;
         overlay.style.left = `${e.clientX}px`;
         overlay.style.top = `${e.clientY}px`;
         overlay.className = e.clientY > window.innerHeight / 2 ? "lower-half" : "upper-half";
diff --git a/webui.py b/webui.py
index ee7edc2..832cc19 100644
--- a/webui.py
+++ b/webui.py
@@ -300,7 +300,7 @@ with shared.gradio_root:
                 history_link = gr.HTML()
                 shared.gradio_root.load(update_history_link, outputs=history_link, queue=False, show_progress=False)
 
-            with gr.Tab(label='Style'):
+            with gr.Tab(label='Style', elem_classes=['style_selections_tab']):
                 style_sorter.try_load_sorted_styles(
                     style_names=legal_style_names,
                     default_selected=modules.config.default_styles)