From fdc2a1bc4112493fabd094ce833b6f025a56ede1 Mon Sep 17 00:00:00 2001 From: tophf Date: Thu, 6 May 2021 09:24:28 +0300 Subject: [PATCH] rework/simplify external links --- _locales/en/messages.json | 16 ++++++++++++---- js/dom.js | 31 +++++++++++++++++++++++++++++++ manage.html | 16 ++++++++++++---- manage/manage.css | 24 ++++-------------------- options/options.js | 26 -------------------------- 5 files changed, 59 insertions(+), 54 deletions(-) diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 2552b60b..5cab08ba 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -625,6 +625,18 @@ "message": "Get styles", "description": "Help link text on the manage page e.g. https://userstyles.org" }, + "linkGetStylesInfo": { + "message": "This archive site was created by a userstyle community member to back up the slow and unresponsive userstyles.org. The archive updates its contents approximately once a day.", + "description": "Info shown when clicking the (i) icon of the uso-archive link in the manager" + }, + "linkGetShareStyles": { + "message": "Get and share styles", + "description": "Link text for https://userstyles.world/ on the manage page" + }, + "linkGetShareStylesInfo": { + "message": "The new community-driven userstyles.world site is created by userstyle authors in order to replace userstyles.org, which has been so slow and unresponsive for the past year that many authors stopped updating their styles.", + "description": "Info shown when clicking the (i) icon of the userstyles.world link in the manager" + }, "linkStylusWiki": { "message": "Wiki", "description": "Wiki link text on the manage page e.g. https://github.com/openstyles/stylus/wiki" @@ -633,10 +645,6 @@ "message": "Translate", "description": "Transifex link text on the manage page" }, - "linkUSW": { - "message": "Upload and discover styles on userstyles.world", - "description": "Link text for https://userstyles.world/ on the manage page" - }, "linterCSSLintIncompatible": { "message": "CSSLint doesn't support $preprocessorname$ preprocessor", "placeholders": { diff --git a/js/dom.js b/js/dom.js index a2893146..b10272f5 100644 --- a/js/dom.js +++ b/js/dom.js @@ -1,5 +1,6 @@ /* global FIREFOX debounce */// toolbox.js /* global prefs */ +/* global t */// localization.js 'use strict'; /* exported @@ -443,6 +444,7 @@ async function waitForSheet({ document.documentElement.setAttribute('lang', chrome.i18n.getUILanguage()); document.on('keypress', clickDummyLinkOnEnter); document.on('wheel', changeFocusedInputOnWheel, {capture: true, passive: false}); + document.on('click', showTooltipNote); Promise.resolve().then(async () => { if (!chrome.app) addFaviconFF(); @@ -451,6 +453,7 @@ async function waitForSheet({ }); onDOMready().then(() => { + splitLongTooltips(); debounce(addTooltipsToEllipsized, 500); window.on('resize', () => debounce(addTooltipsToEllipsized, 100)); }); @@ -546,6 +549,34 @@ async function waitForSheet({ } } } + + function showTooltipNote(event) { + const el = event.target.closest('[data-cmd=note]'); + if (el) { + event.preventDefault(); + window.messageBoxProxy.show({ + className: 'note', + contents: el.dataset.title || el.title, + buttons: [t('confirmClose')], + }); + } + } + + function splitLongTooltips() { + for (const el of $$('[title]')) { + el.dataset.title = el.title; + el.title = el.title.replace(/<\/?\w+>/g, ''); // strip html tags + if (el.title.length < 50) { + continue; + } + const newTitle = el.title + .split('\n') + .map(s => s.replace(/([^.][.。?!]|.{50,60},)\s+/g, '$1\n')) + .map(s => s.replace(/(.{50,80}(?=.{40,}))\s+/g, '$1\n')) + .join('\n'); + if (newTitle !== el.title) el.title = newTitle; + } + } })(); //#endregion diff --git a/manage.html b/manage.html index f6f9ea5c..c8130823 100644 --- a/manage.html +++ b/manage.html @@ -329,13 +329,21 @@
- + + + + + + + + + + + + - - -
diff --git a/manage/manage.css b/manage/manage.css index 6f1042a3..98f28d71 100644 --- a/manage/manage.css +++ b/manage/manage.css @@ -432,33 +432,17 @@ a:hover { #manage-text { display: flex; flex-wrap: wrap; - align-items: baseline; padding-top: .35rem; } - +#manage-text > * { + display: flex; + align-items: center; +} #manage-text > :not(:last-child):after { content: "|"; margin: 0 .5em; } -#link-usw { - display: flex; - align-items: center; - margin-top: .5em; -} - -#link-usw img { - max-width: 2.5em; - max-height: 2.5em; - margin-right: .75em; - filter: grayscale(1); - transition: filter .5s; -} - -#link-usw:hover img { - filter: none; -} - .newUI .entry .svg-icon.checked, .newUI .entry:hover .svg-icon.checked { fill: #000; diff --git a/options/options.js b/options/options.js index 107c02fc..3c15538f 100644 --- a/options/options.js +++ b/options/options.js @@ -25,7 +25,6 @@ setupLivePrefs(); setupRadioButtons(); $$('input[min], input[max]').forEach(enforceInputRange); -setTimeout(splitLongTooltips); if (CHROME_POPUP_BORDER_BUG) { const borderOption = $('.chrome-no-popup-border'); @@ -87,15 +86,6 @@ document.onclick = e => { .filter(input => prefs.knownKeys.includes(input.id)) .forEach(input => prefs.reset(input.id)); break; - - case 'note': { - e.preventDefault(); - messageBoxProxy.show({ - className: 'note', - contents: target.dataset.title, - buttons: [t('confirmClose')], - }); - } } }; @@ -229,22 +219,6 @@ function setupRadioButtons() { }); } -function splitLongTooltips() { - for (const el of $$('[title]')) { - el.dataset.title = el.title; - el.title = el.title.replace(/<\/?\w+>/g, ''); // strip html tags - if (el.title.length < 50) { - continue; - } - const newTitle = el.title - .split('\n') - .map(s => s.replace(/([^.][.。?!]|.{50,60},)\s+/g, '$1\n')) - .map(s => s.replace(/(.{50,80}(?=.{40,}))\s+/g, '$1\n')) - .join('\n'); - if (newTitle !== el.title) el.title = newTitle; - } -} - function customizeHotkeys() { // command name -> i18n id const hotkeys = new Map([