From 64eb0d10d63215ebec6218089610bf8a56829eed Mon Sep 17 00:00:00 2001 From: Veloman Yunkan Date: Mon, 27 Jan 2025 17:20:39 +0400 Subject: [PATCH 1/2] Autocompleter box size matches the content width Note however that no upper limit is set on the width of the autocompleter box - it is possible, but I don't see how we could come up with a good value for it. --- static/skin/autoComplete/css/autoComplete.css | 1 + test/server.cpp | 4 ++-- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/static/skin/autoComplete/css/autoComplete.css b/static/skin/autoComplete/css/autoComplete.css index 2434d6164..69d24b259 100644 --- a/static/skin/autoComplete/css/autoComplete.css +++ b/static/skin/autoComplete/css/autoComplete.css @@ -23,6 +23,7 @@ .autoComplete_wrapper > ul { position: absolute; + width: fit-content; max-height: 226px; overflow-y: scroll; top: 100%; diff --git a/test/server.cpp b/test/server.cpp index 98483f0d6..01a3c2889 100644 --- a/test/server.cpp +++ b/test/server.cpp @@ -57,7 +57,7 @@ const ResourceCollection resources200Compressible{ { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/autoComplete/autoComplete.min.js" }, { STATIC_CONTENT, "/ROOT%23%3F/skin/autoComplete/autoComplete.min.js?cacheid=1191aaaf" }, { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/autoComplete/css/autoComplete.css" }, - { STATIC_CONTENT, "/ROOT%23%3F/skin/autoComplete/css/autoComplete.css?cacheid=ef30cd42" }, + { STATIC_CONTENT, "/ROOT%23%3F/skin/autoComplete/css/autoComplete.css?cacheid=85f07174" }, { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/i18n.js" }, { STATIC_CONTENT, "/ROOT%23%3F/skin/i18n.js?cacheid=071abc9a" }, { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/index.css" }, @@ -323,7 +323,7 @@ R"EXPECTEDRESULT( - + From 2eea6136d6191339ebe33523e2af4707c14417cf Mon Sep 17 00:00:00 2001 From: Veloman Yunkan Date: Tue, 28 Jan 2025 19:08:42 +0400 Subject: [PATCH 2/2] Full suggestion text is shown on hover The width of the suggestion box is capped at 600 pixels. The full text of a suggestion is shown on hover (doesn't work on mobile). --- static/skin/autoComplete/css/autoComplete.css | 7 +++++++ static/skin/viewer.js | 5 ++++- test/server.cpp | 8 ++++---- 3 files changed, 15 insertions(+), 5 deletions(-) diff --git a/static/skin/autoComplete/css/autoComplete.css b/static/skin/autoComplete/css/autoComplete.css index 69d24b259..c4a9cc938 100644 --- a/static/skin/autoComplete/css/autoComplete.css +++ b/static/skin/autoComplete/css/autoComplete.css @@ -23,7 +23,9 @@ .autoComplete_wrapper > ul { position: absolute; + min-width: 100%; width: fit-content; + max-width: 600px; max-height: 226px; overflow-y: scroll; top: 100%; @@ -61,6 +63,11 @@ transition: all 0.2s ease; } +.autoComplete_wrapper > ul > li > a { + overflow: hidden; + text-overflow: ellipsis; +} + .autoComplete_wrapper > ul > li::selection { color: rgba(#ffffff, 0); background-color: rgba(#ffffff, 0); diff --git a/static/skin/viewer.js b/static/skin/viewer.js index baa620ef4..59242e591 100644 --- a/static/skin/viewer.js +++ b/static/skin/viewer.js @@ -92,7 +92,10 @@ function makeJSLink(jsCodeString, linkText, linkAttr="") { // in the JS code we have to URI-encode a second time. // (see https://stackoverflow.com/questions/33721510) const uriEncodedJSCode = encodeURIComponent(jsCodeString); - return `${linkText}`; + const linkPlainText = htmlDecode(linkText, "text/html"); + linkAttr += ` href="javascript:${uriEncodedJSCode}"`; + linkAttr += ` title="${linkPlainText}"`; + return `${linkText}`; } function suggestionsApiURL() diff --git a/test/server.cpp b/test/server.cpp index 01a3c2889..066f9d463 100644 --- a/test/server.cpp +++ b/test/server.cpp @@ -57,7 +57,7 @@ const ResourceCollection resources200Compressible{ { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/autoComplete/autoComplete.min.js" }, { STATIC_CONTENT, "/ROOT%23%3F/skin/autoComplete/autoComplete.min.js?cacheid=1191aaaf" }, { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/autoComplete/css/autoComplete.css" }, - { STATIC_CONTENT, "/ROOT%23%3F/skin/autoComplete/css/autoComplete.css?cacheid=85f07174" }, + { STATIC_CONTENT, "/ROOT%23%3F/skin/autoComplete/css/autoComplete.css?cacheid=f2d376c4" }, { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/i18n.js" }, { STATIC_CONTENT, "/ROOT%23%3F/skin/i18n.js?cacheid=071abc9a" }, { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/index.css" }, @@ -75,7 +75,7 @@ const ResourceCollection resources200Compressible{ { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/taskbar.css" }, { STATIC_CONTENT, "/ROOT%23%3F/skin/taskbar.css?cacheid=80d56607" }, { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/viewer.js" }, - { STATIC_CONTENT, "/ROOT%23%3F/skin/viewer.js?cacheid=aca897b0" }, + { STATIC_CONTENT, "/ROOT%23%3F/skin/viewer.js?cacheid=8ca16f13" }, { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/fonts/Poppins.ttf" }, { STATIC_CONTENT, "/ROOT%23%3F/skin/fonts/Poppins.ttf?cacheid=af705837" }, { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/fonts/Roboto.ttf" }, @@ -323,11 +323,11 @@ R"EXPECTEDRESULT( - + - + const blankPageUrl = root + "/skin/blank.html?cacheid=6b1fa032";