From 4986fa0925606f917d3f3073d835443eb522fa84 Mon Sep 17 00:00:00 2001 From: silverwind Date: Fri, 9 May 2025 02:22:00 +0200 Subject: [PATCH 1/7] Merge and tweak markup editor expander CSS --- web_src/css/editor/combomarkdowneditor.css | 64 ------------- web_src/css/features/expander.css | 105 +++++++++++++++++++++ web_src/css/features/tribute.css | 32 ------- web_src/css/index.css | 2 +- web_src/js/features/comp/TextExpander.ts | 1 + 5 files changed, 107 insertions(+), 97 deletions(-) create mode 100644 web_src/css/features/expander.css delete mode 100644 web_src/css/features/tribute.css diff --git a/web_src/css/editor/combomarkdowneditor.css b/web_src/css/editor/combomarkdowneditor.css index 835286b79548e..046010c6c8d7b 100644 --- a/web_src/css/editor/combomarkdowneditor.css +++ b/web_src/css/editor/combomarkdowneditor.css @@ -100,67 +100,3 @@ border-bottom: 1px solid var(--color-secondary); padding-bottom: 1rem; } - -text-expander { - display: block; - position: relative; -} - -text-expander .suggestions { - position: absolute; - min-width: 180px; - padding: 0; - margin-top: 24px; - list-style: none; - background: var(--color-box-body); - border-radius: var(--border-radius); - border: 1px solid var(--color-secondary); - box-shadow: 0 .5rem 1rem var(--color-shadow); - z-index: 100; /* needs to be > 20 to be on top of dropzone's .dz-details */ -} - -text-expander .suggestions li { - display: flex; - align-items: center; - cursor: pointer; - padding: 4px 8px; - font-weight: var(--font-weight-medium); -} - -text-expander .suggestions li + li { - border-top: 1px solid var(--color-secondary-alpha-40); -} - -text-expander .suggestions li:first-child { - border-radius: var(--border-radius) var(--border-radius) 0 0; -} - -text-expander .suggestions li:last-child { - border-radius: 0 0 var(--border-radius) var(--border-radius); -} - -text-expander .suggestions li:only-child { - border-radius: var(--border-radius); -} - -text-expander .suggestions li:hover { - background: var(--color-hover); -} - -text-expander .suggestions .fullname { - font-weight: var(--font-weight-normal); - margin-left: 4px; - color: var(--color-text-light-1); -} - -text-expander .suggestions li[aria-selected="true"], -text-expander .suggestions li[aria-selected="true"] span { - background: var(--color-primary); - color: var(--color-primary-contrast); -} - -text-expander .suggestions img { - width: 24px; - height: 24px; - margin-right: 8px; -} diff --git a/web_src/css/features/expander.css b/web_src/css/features/expander.css new file mode 100644 index 0000000000000..4f9faec6fe72f --- /dev/null +++ b/web_src/css/features/expander.css @@ -0,0 +1,105 @@ +text-expander .suggestions, +.tribute-container { + position: absolute; + max-height: min(300px, 95vh); + max-width: min(500px, 95vw); + overflow-x: hidden; + overflow-y: auto; + overflow-wrap: anywhere; + background: var(--color-menu); + box-shadow: 0 6px 18px var(--color-shadow); + border-radius: var(--border-radius); + border: 1px solid var(--color-secondary); + z-index: 100; /* needs to be > 20 to be on top of dropzone's .dz-details */ +} + +text-expander { + display: block; + position: relative; +} + +text-expander .suggestions { + padding: 0; + margin-top: 24px; + list-style: none; +} + +text-expander .suggestions li, +.tribute-item { + display: flex; + align-items: center; + cursor: pointer; + gap: 4px; + font-weight: var(--font-weight-medium); +} + +text-expander .suggestions li, +.tribute-container li { + padding: 3px 6px; +} + +text-expander .suggestions li + li { + border-top: 1px solid var(--color-secondary); +} + +text-expander .suggestions li:first-child { + border-radius: var(--border-radius) var(--border-radius) 0 0; +} + +text-expander .suggestions li:last-child { + border-radius: 0 0 var(--border-radius) var(--border-radius); +} + +text-expander .suggestions li:only-child { + border-radius: var(--border-radius); +} + +text-expander .suggestions .name, +.tribute-container li .name { + white-space: nowrap; +} + +text-expander .suggestions .fullname, +.tribute-container li .fullname { + font-weight: var(--font-weight-normal); + color: var(--color-text-light-1); +} + +text-expander .suggestions li:hover, +text-expander .suggestions li[aria-selected="true"], +text-expander .suggestions li[aria-selected="true"] *, +.tribute-container li.highlight, +.tribute-container li.highlight * { + background: var(--color-primary); + color: var(--color-primary-contrast); +} + +text-expander .suggestions img, +.tribute-item img { + width: 24px; + height: 24px; +} + +.tribute-container { + display: block; + z-index: 100; /* needs to be > 20 to be on top of dropzone's .dz-details */ +} + +.tribute-container ul { + margin: 0; + padding: 0; + list-style: none; +} + +.tribute-container li + li { + border-top: 1px solid var(--color-secondary); +} + +.tribute-container li span, +.tribute-container .menu-highlighted { + font-weight: var(--font-weight-semibold); +} + +.tribute-container li.no-match { + cursor: default; +} diff --git a/web_src/css/features/tribute.css b/web_src/css/features/tribute.css deleted file mode 100644 index 99a026b9bcb20..0000000000000 --- a/web_src/css/features/tribute.css +++ /dev/null @@ -1,32 +0,0 @@ -@import "tributejs/dist/tribute.css"; - -.tribute-container { - box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.25); - border-radius: var(--border-radius); -} - -.tribute-container ul { - margin-top: 0 !important; - background: var(--color-body) !important; -} - -.tribute-container li { - padding: 3px 0.5rem !important; -} - -.tribute-container li span.fullname { - font-weight: var(--font-weight-normal); - font-size: 0.8rem; -} - -.tribute-container li.highlight, -.tribute-container li:hover { - background: var(--color-primary) !important; - color: var(--color-primary-contrast) !important; -} - -.tribute-item { - display: flex; - align-items: center; - gap: 6px; -} diff --git a/web_src/css/index.css b/web_src/css/index.css index 84795d6d2799e..c20aa028e42dd 100644 --- a/web_src/css/index.css +++ b/web_src/css/index.css @@ -39,7 +39,7 @@ @import "./features/imagediff.css"; @import "./features/codeeditor.css"; @import "./features/projects.css"; -@import "./features/tribute.css"; +@import "./features/expander.css"; @import "./features/cropper.css"; @import "./features/console.css"; diff --git a/web_src/js/features/comp/TextExpander.ts b/web_src/js/features/comp/TextExpander.ts index 5be234629d95b..2d79fe5029925 100644 --- a/web_src/js/features/comp/TextExpander.ts +++ b/web_src/js/features/comp/TextExpander.ts @@ -97,6 +97,7 @@ export function initTextExpander(expander: TextExpanderElement) { li.append(img); const nameSpan = document.createElement('span'); + nameSpan.classList.add('name'); nameSpan.textContent = name; li.append(nameSpan); From b36b4ee5394cbfef4e7b369593cec1156ff9fe04 Mon Sep 17 00:00:00 2001 From: silverwind Date: Fri, 9 May 2025 02:26:52 +0200 Subject: [PATCH 2/7] remove duplicate rule --- web_src/css/features/expander.css | 1 - 1 file changed, 1 deletion(-) diff --git a/web_src/css/features/expander.css b/web_src/css/features/expander.css index 4f9faec6fe72f..32a1c66c5716b 100644 --- a/web_src/css/features/expander.css +++ b/web_src/css/features/expander.css @@ -82,7 +82,6 @@ text-expander .suggestions img, .tribute-container { display: block; - z-index: 100; /* needs to be > 20 to be on top of dropzone's .dz-details */ } .tribute-container ul { From 8f693b911b711dca59c08e4159d9080326e96610 Mon Sep 17 00:00:00 2001 From: silverwind Date: Fri, 9 May 2025 02:30:21 +0200 Subject: [PATCH 3/7] increase gap slightly --- web_src/css/features/expander.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web_src/css/features/expander.css b/web_src/css/features/expander.css index 32a1c66c5716b..ae434bfe893fb 100644 --- a/web_src/css/features/expander.css +++ b/web_src/css/features/expander.css @@ -29,7 +29,7 @@ text-expander .suggestions li, display: flex; align-items: center; cursor: pointer; - gap: 4px; + gap: 6px; font-weight: var(--font-weight-medium); } From 071144b2715e8c7dbf74a170fcf8f738cb4dba42 Mon Sep 17 00:00:00 2001 From: silverwind Date: Fri, 9 May 2025 02:32:03 +0200 Subject: [PATCH 4/7] merge one more rule --- web_src/css/features/expander.css | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/web_src/css/features/expander.css b/web_src/css/features/expander.css index ae434bfe893fb..c91839486c996 100644 --- a/web_src/css/features/expander.css +++ b/web_src/css/features/expander.css @@ -38,7 +38,8 @@ text-expander .suggestions li, padding: 3px 6px; } -text-expander .suggestions li + li { +text-expander .suggestions li + li, +.tribute-container li + li { border-top: 1px solid var(--color-secondary); } @@ -90,10 +91,6 @@ text-expander .suggestions img, list-style: none; } -.tribute-container li + li { - border-top: 1px solid var(--color-secondary); -} - .tribute-container li span, .tribute-container .menu-highlighted { font-weight: var(--font-weight-semibold); From 60cd8a172e21ceee7b0d32e3d4313d366439f628 Mon Sep 17 00:00:00 2001 From: silverwind Date: Fri, 9 May 2025 02:36:11 +0200 Subject: [PATCH 5/7] more tweaks --- web_src/css/features/expander.css | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/web_src/css/features/expander.css b/web_src/css/features/expander.css index c91839486c996..5580efd4dccd4 100644 --- a/web_src/css/features/expander.css +++ b/web_src/css/features/expander.css @@ -67,6 +67,7 @@ text-expander .suggestions .fullname, } text-expander .suggestions li:hover, +text-expander .suggestions li:hover *, text-expander .suggestions li[aria-selected="true"], text-expander .suggestions li[aria-selected="true"] *, .tribute-container li.highlight, @@ -91,11 +92,6 @@ text-expander .suggestions img, list-style: none; } -.tribute-container li span, -.tribute-container .menu-highlighted { - font-weight: var(--font-weight-semibold); -} - .tribute-container li.no-match { cursor: default; } From c0a2336c79dbc9c4ba32aac6c3cf88e236009ff1 Mon Sep 17 00:00:00 2001 From: silverwind Date: Fri, 9 May 2025 02:39:35 +0200 Subject: [PATCH 6/7] change image size to provided backend dimensions --- web_src/css/features/expander.css | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/web_src/css/features/expander.css b/web_src/css/features/expander.css index 5580efd4dccd4..68f1cf35261ff 100644 --- a/web_src/css/features/expander.css +++ b/web_src/css/features/expander.css @@ -78,8 +78,10 @@ text-expander .suggestions li[aria-selected="true"] *, text-expander .suggestions img, .tribute-item img { - width: 24px; - height: 24px; + width: 21px; + height: 21px; + object-fit: contain; + aspect-ratio: 1; } .tribute-container { From bdb9ee7e96759a01984e7ce2ce1fec09c29268c3 Mon Sep 17 00:00:00 2001 From: silverwind Date: Fri, 9 May 2025 16:17:30 +0200 Subject: [PATCH 7/7] add ellipsis overflow --- web_src/css/features/expander.css | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/web_src/css/features/expander.css b/web_src/css/features/expander.css index 68f1cf35261ff..f560b2a9fdaa7 100644 --- a/web_src/css/features/expander.css +++ b/web_src/css/features/expander.css @@ -5,7 +5,7 @@ text-expander .suggestions, max-width: min(500px, 95vw); overflow-x: hidden; overflow-y: auto; - overflow-wrap: anywhere; + white-space: nowrap; background: var(--color-menu); box-shadow: 0 6px 18px var(--color-shadow); border-radius: var(--border-radius); @@ -55,15 +55,12 @@ text-expander .suggestions li:only-child { border-radius: var(--border-radius); } -text-expander .suggestions .name, -.tribute-container li .name { - white-space: nowrap; -} - text-expander .suggestions .fullname, .tribute-container li .fullname { font-weight: var(--font-weight-normal); color: var(--color-text-light-1); + overflow: hidden; + text-overflow: ellipsis; } text-expander .suggestions li:hover,