open.source/stylus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix split-btn with popup.stylesFirst (#1394)

Browse Source
This commit is contained in:
tophf 2022-01-30 05:50:13 +03:00 committed by GitHub
parent 513ced6d57
commit f282623ef7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 33 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
global.css
View File

@ -326,17 +326,9 @@ body.resizing-v > * {
content: '';
border: var(--side) solid transparent;
display: inline-block;
}
.split-btn-pedal:not(.up)::after {
border-top: calc(var(--side) * 1.3) solid currentColor;
vertical-align: bottom;
}
.split-btn-pedal.up::after {
border-bottom: calc(var(--side) * 1.3) solid currentColor;
vertical-align: top;
position: relative;
top: 1px;
}
.split-btn-pedal.active {
box-shadow: inset 0 0 100px rgba(0, 0, 0, .2);
}

4
popup.html
View File

@ -190,7 +190,7 @@
<aside id="hotkey-info" i18n-title="popupHotkeysTooltip"></aside>
</div>
<div class="actions">
<div class="actions" id="main-actions">
<div id="disable-all-wrapper">
<div class="main-controls">
<label id="disableAll-label" i18n-text="disableAllStyles">
@ -222,7 +222,7 @@
<div class="split-btn">
<button id="popup-manage-button" i18n-text="openManage"
data-href="manage.html" i18n-title="popupManageTooltip"></button
><button class="split-btn-pedal up" i18n-menu-site="popupManageSiteStyles"></button>
><button class="split-btn-pedal" i18n-menu-site="popupManageSiteStyles"></button>
</div>
<button id="popup-options-button" i18n-text="openOptions"></button>
<button id="popup-wiki-button"

32
popup/popup.css
View File

@ -668,8 +668,8 @@ body.blocked .actions > .main-controls {
flex-direction: row;
padding: var(--outer-padding) 1px;
}
#popup-options .split-btn {
display: flex;
#popup-options .split-btn > :first-child {
width: calc(100% - 16px);
}
#popup-options button {
white-space: nowrap;
@ -686,10 +686,36 @@ body.blocked .actions > .main-controls {
flex: 1 1 auto;
min-width: 2em;
}
#popup-manage-button ~ .split-btn-menu {
html:not(.styles-last) #popup-manage-button ~ .split-btn-menu {
bottom: 0;
transform: translateY(-20px); /* global button style: 13(font) * 1.2(line) + 4(pad) + 2(border) */
}
html:not(.styles-last) .split-btn-pedal::after {
border-top: var(--side) solid transparent;
border-bottom: calc(var(--side) * 1.3) solid currentColor;
vertical-align: top;
position: relative;
top: 1px;
}
.styles-last body,
.styles-last #main-actions {
display: flex;
flex-direction: column;
}
.styles-last #installed,
.styles-last #main-actions > :not(#popup-options) {
order: 1;
flex: 1 0;
}
.styles-last #main-actions {
margin-top: 0;
}
.styles-last #search-results {
order: 2;
}
.styles-last #installed {
border-top: 1px solid black;
}
/* confirm */

12
popup/popup.js
View File

@ -38,10 +38,8 @@ preinit.then(({frames, styles, url}) => {
msg.onExtension(onRuntimeMessage);
prefs.subscribe('popup.stylesFirst', (key, stylesFirst) => {
const actions = $('body > .actions');
const before = stylesFirst ? actions : actions.nextSibling;
document.body.insertBefore(installed, before);
});
document.documentElement.classList.toggle('styles-last', !stylesFirst);
}, {runNow: true});
if (CHROME_POPUP_BORDER_BUG) {
prefs.subscribe('popup.borders', toggleSideBorders, {runNow: true});
}
@ -126,12 +124,6 @@ async function initPopup(frames) {
}
};
if (!prefs.get('popup.stylesFirst')) {
document.body.insertBefore(
$('body > .actions'),
installed);
}
for (const el of $$('link[media=print]')) {
el.removeAttribute('media');
}