Popup fixup
This commit is contained in:
narcolepticinsomniac
GitHub
parent
7a8ef95a30
commit
fff1d8d057
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
118
popup/popup.css
118
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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 => {
|
||||
|
|
|
|||
|
|
@ -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'});
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user