diff --git a/popup/hotkeys.js b/popup/hotkeys.js index b04fda72..d96091e4 100644 --- a/popup/hotkeys.js +++ b/popup/hotkeys.js @@ -120,7 +120,7 @@ var hotkeys = (() => { const container = $('#hotkey-info'); let title; container.onclick = ({target}) => { - if (target.localName === 'button') { + if (target.localName === 'button' || target.id === 'popup-confirm-icon') { close(); } else if (!container.dataset.active) { open(); @@ -174,10 +174,11 @@ var hotkeys = (() => { })); [ linesToElements(t('popupHotkeysInfo')), - $create('button', t('confirmOK')), + $create('button', {className: 'classicUI-el', id: 'confirm-button'}, t('confirmOK')), ].forEach(child => { container.appendChild($create('div', child)); }); + $('#confirm-button').insertAdjacentElement('afterend', template.confirmHotkey); } } diff --git a/popup/popup.css b/popup/popup.css index 631997cb..f6ab931a 100644 --- a/popup/popup.css +++ b/popup/popup.css @@ -25,6 +25,7 @@ html, body { } body { + background-color: var(--truegray-alpha-15); width: 252px; font-size: 12px; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; @@ -154,10 +155,6 @@ body:not(.disabled) .toggle-all-on { display: none; } -svg.svg-icon.toggle-all-on { - margin-top: 4px; -} - #popup-write-style-icon { display: inline-flex; } @@ -172,6 +169,31 @@ svg.svg-icon.toggle-all-on { align-items: center; } +.iconUI body > .action-wrapper button, +#disable-all-icon, +#popup-confirm-icon { + display: inline-flex; + height: 30px; + width: 30px; + justify-content: center; + align-items: center; +} + +#disable-all-icon > div { + display: inline-flex; +} + +body:not(.disabled) #disable-all-icon > div:nth-child(2), +body.disabled #disable-all-icon > div:first-child { + display: none; +} + +body > .action-wrapper, +#write-style-wrapper, +#search-results { + background-color: var(--truegray-alpha-1); +} + #popup-manage-wrapper { padding-left: 4px; } @@ -200,10 +222,6 @@ svg.svg-icon.toggle-all-on { opacity: 1 !important; } -.iconUI button { - cursor: pointer; -} - .iconUI button .svg-icon { display: inline-flex; height: 20px; @@ -212,14 +230,6 @@ svg.svg-icon.toggle-all-on { justify-content: center; } -.iconUI button:hover .svg-icon { - fill: var(--black); -} - -.iconUI #popup-manage-button:hover .svg-icon { - stroke: var(--black); -} - #popup-confirm-icon { cursor: pointer; margin: -5px 0; @@ -230,11 +240,22 @@ svg.svg-icon.toggle-all-on { width: 20px; } +.iconUI #popup-options-button .svg-icon, +#popup-confirm-icon .svg-icon { + height: 18px; + width: 18px; +} + #write-style-for .svg-icon { height: 16px; width: 16px; } +#find-styles-icon .svg-icon { + height: 22px; + width: 22px; +} + #find-external-icon, #find-external-icon-noclick, #find-inline-icon { @@ -244,7 +265,6 @@ svg.svg-icon.toggle-all-on { box-sizing: border-box; } -#popup-manage-icon .svg-icon, #find-external-icon .svg-icon, #find-external-icon-noclick .svg-icon, #find-inline-icon .svg-icon, @@ -253,13 +273,12 @@ a[target="_blank"] .svg-icon.config { width: 20px; } -#popup-manage-icon .svg-icon { +#popup-manage-button .svg-icon { stroke: var(--gray-lightness-40); - fill: transparent; - transition: stroke .5s; + fill: transparent !important; } -#popup-manage-icon:hover .svg-icon { +#popup-manage-button:hover .svg-icon { stroke: var(--black); } @@ -294,8 +313,7 @@ a[target="_blank"] .svg-icon.config { .search-results-shown #find-external-icon, .search-results-shown #find-inline-icon, -.error-shown #find-external-icon, -.error-shown #find-inline-icon { +.error-shown #find-styles-wrapper { display: none !important; } @@ -331,8 +349,6 @@ a[target="_blank"] .svg-icon.config { .svg-icon.toggled-on path, .svg-icon.toggled-off path { transition: fill .5s, stroke .5s; - height: 22px; - width: 22px; } .svg-icon.toggled-on path:first-child, @@ -415,13 +431,16 @@ a:hover .svg-icon.toggled-off path:nth-child(3) { padding: 0 5px 0 0; } -.iconUI button { +.iconUI .action-wrapper button { + display: inline-flex; border: 0; background: none; + padding: 0; + cursor: pointer; } -.iconUI button:hover { - background: none; +.iconUI .action-wrapper button:hover { + background: none; } body.disabled .style-name { @@ -685,7 +704,7 @@ html[style*="border"] .entry:nth-child(11):before { .svg-icon { pointer-events: none; - transition: fill .5s; + transition: fill .5s, stroke .5s; width: 16px; height: 16px; fill: var(--gray-lightness-40); @@ -693,28 +712,31 @@ html[style*="border"] .entry:nth-child(11):before { a:hover .svg-icon, .actions a:hover .svg-icon, -#find-styles:hover a:hover .svg-icon.external:not(.noclick), -#find-styles:hover a:hover .svg-icon.inline, -a:hover .svg-icon.search { +.iconUI button:hover .svg-icon, +.iconUI #popup-options-button:hover .svg-icon, +#find-inline-icon:hover .svg-icon, +#find-external-icon:hover .svg-icon, +#find-styles-icon:hover .svg-icon, +#popup-wiki-button:hover .svg-icon { fill: var(--black); } -.svg-icon.external, -.svg-icon.inline { - fill: var(--gray-lightness-65); -} - .actions .svg-icon, -.svg-icon.options { +.iconUI #popup-options-button .svg-icon, +#find-inline-icon .svg-icon, +#find-external-icon .svg-icon { fill: var(--truegray); } -.svg-icon.search, -#find-styles:hover .svg-icon.external:not(.noclick), -#find-styles:hover .svg-icon.inline { +#find-styles-icon .svg-icon, +#popup-wiki-button .svg-icon { fill: var(--gray-lightness-45); } +.svg-icon.external.noclick { + fill: var(--gray-lightness-65); +} + .svg-icon.remove { height: 16px; width: 14px; @@ -747,18 +769,19 @@ body.blocked #write-style-wrapper { display: none; } -.iconUI body.blocked #popup-options-wrapper { +.iconUI body.blocked #popup-options-wrapper, +.iconUI body.error-shown #popup-options-wrapper { flex-grow: 1; justify-content: flex-start; } -.iconUI body.blocked #popup-wiki-wrapper { +.iconUI body.blocked #popup-wiki-wrapper, +.iconUI body.error-shown #popup-wiki-wrapper { flex-grow: 1; justify-content: flex-end; } /* 'New style' links */ - #write-style { display: flex; flex-direction: row; @@ -846,9 +869,9 @@ body.blocked #write-style-wrapper { /* action buttons */ -#popup-manage-wrapper button, -#popup-options-wrapper button, -#popup-wiki-wrapper button { +.classicUI #popup-manage-wrapper button, +.classicUI #popup-options-wrapper button, +.classicUI #popup-wiki-wrapper button { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -950,6 +973,7 @@ body.blocked #write-style-wrapper { } .blocked-info { + background-color: var(--truegray-alpha-1); hyphens: auto; } diff --git a/popup/popup.js b/popup/popup.js index 22fe6d9f..4c8dd6be 100644 --- a/popup/popup.js +++ b/popup/popup.js @@ -93,6 +93,10 @@ function initPopup() { document.body.classList.toggle('disabled', this.checked); }; + $('#find-styles-icon').onclick = () => { + $('#find-styles-link').click(); + }; + $('#disable-all-icon').onclick = () => { $('#disableAll').click(); }; @@ -383,7 +387,7 @@ Object.assign(handleEvent, { $('button[data-cmd="ok"]', box).focus(); $('button[data-cmd="ok"]', box).onclick = () => confirm(true); $('button[data-cmd="cancel"]', box).onclick = () => confirm(false); - $('.iconUI a[data-cmd="ok"]', box).focus(); + $('a[data-cmd="ok"]', box).focus(); $('a[data-cmd="ok"]', box).onclick = () => confirm(true); $('a[data-cmd="cancel"]', box).onclick = () => confirm(false); window.onkeydown = event => { diff --git a/popup/search-results.js b/popup/search-results.js index 320dcd86..d97ae45d 100755 --- a/popup/search-results.js +++ b/popup/search-results.js @@ -81,8 +81,8 @@ window.addEventListener('showStyles:done', function _() { } event.preventDefault(); - // hide search link/icons - this.parentNode.classList.add('hidden'); + this.textContent = this.title; + this.title = ''; init(); load(); @@ -209,6 +209,7 @@ window.addEventListener('showStyles:done', function _() { dom.error.classList.remove('hidden'); dom.container.classList.toggle('hidden', !processedResults.length); document.body.classList.toggle('search-results-shown', processedResults.length > 0); + document.body.classList.add('error-shown'); if (dom.error.getBoundingClientRect().bottom < 0) { dom.error.scrollIntoView({behavior: 'smooth', block: 'start'}); }