From 88a3c168f17d05b60eb1542b21df76b615c1c96d Mon Sep 17 00:00:00 2001 From: hswlab Date: Thu, 11 Jan 2024 19:44:48 +0100 Subject: [PATCH 1/4] Styles Grouping/Sorting #1770 --- css/style.css | 46 ++++++++++++++++++++++++++++++++++++++++++++ javascript/script.js | 17 +++++++++++----- webui.py | 2 +- 3 files changed, 59 insertions(+), 6 deletions(-) diff --git a/css/style.css b/css/style.css index 010c8e7f6..d474d8040 100644 --- a/css/style.css +++ b/css/style.css @@ -218,3 +218,49 @@ #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; + padding: 2px 5px; + } + + .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 8f4cac58f..0bf4a36c8 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,14 +178,15 @@ 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"; }); } + /** * checks that a UI element is not in another hidden element or tab content */ diff --git a/webui.py b/webui.py index 581e3101b..82d93a361 100644 --- a/webui.py +++ b/webui.py @@ -258,7 +258,7 @@ def refresh_seed(r, seed_string): if not args_manager.args.disable_image_log: gr.HTML(f'\U0001F4DA History Log') - 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) From 375c2645d63a37271f21638bff7ebe9e76f0f956 Mon Sep 17 00:00:00 2001 From: hswlab Date: Sat, 13 Jan 2024 10:35:26 +0100 Subject: [PATCH 2/4] Update css/style.css Co-authored-by: Manuel Schmid <9307310+mashb1t@users.noreply.github.com> --- css/style.css | 62 +++++++++++++++++++++++++-------------------------- 1 file changed, 31 insertions(+), 31 deletions(-) diff --git a/css/style.css b/css/style.css index d474d8040..f45754cc5 100644 --- a/css/style.css +++ b/css/style.css @@ -224,37 +224,37 @@ 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; - padding: 2px 5px; - } - - .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; - } +.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; + padding: 2px 5px; +} + +.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 { From 3a45c301f983402cba24ca41c5e14689aee5f167 Mon Sep 17 00:00:00 2001 From: hswlab Date: Sat, 13 Jan 2024 10:36:25 +0100 Subject: [PATCH 3/4] Update javascript/script.js Co-authored-by: Manuel Schmid <9307310+mashb1t@users.noreply.github.com> --- javascript/script.js | 1 - 1 file changed, 1 deletion(-) diff --git a/javascript/script.js b/javascript/script.js index 0bf4a36c8..9aa0b5c16 100644 --- a/javascript/script.js +++ b/javascript/script.js @@ -186,7 +186,6 @@ function initStylePreviewOverlay() { }); } - /** * checks that a UI element is not in another hidden element or tab content */ From 9687c659dcae4d29de81de39fc8ae60b48160651 Mon Sep 17 00:00:00 2001 From: Manuel Schmid Date: Mon, 11 Mar 2024 16:00:01 +0100 Subject: [PATCH 4/4] feat: use standard padding again --- css/style.css | 1 - 1 file changed, 1 deletion(-) diff --git a/css/style.css b/css/style.css index f45754cc5..3cc1e5e52 100644 --- a/css/style.css +++ b/css/style.css @@ -247,7 +247,6 @@ .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; - padding: 2px 5px; } .contain .tabs .tabitem.style_selections_tab .style_selections .wrap[data-testid="checkbox-group"] label span {