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

simplify css/html in popup (#1408)

Browse Source 
+ reuse global checkbox-wrapper more
This commit is contained in:
tophf 2022-02-19 11:18:14 +03:00 committed by GitHub
parent 9d64e9ba54
commit ad969fca6a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 73 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
global.css
View File

@ -203,6 +203,10 @@ input[type="checkbox"]:not(.slider):disabled + .svg-icon.checked + span {
label {
transition: color .1s;
}
.checkbox-wrapper {
padding-left: 16px;
position: relative;
}
select {
-moz-appearance: none;

2
install-usercss/install-usercss.css
View File

@ -91,8 +91,6 @@ h1 {
content: "v";
}
.checkbox-wrapper {
padding-left: 16px;
position: relative;
box-sizing: border-box;
display: block;
}

3
manage/updater-ui.js
View File

@ -242,9 +242,8 @@ async function showUpdateHistory(event) {
scrollToBottom();
$('#message-box-buttons button').insertAdjacentElement('afterend',
// TODO: add a global class for our labels
// TODO: add a <template> or a common function to create such controls
$create('label', {style: 'position: relative; padding-left: 16px;'}, [
$create('label.checkbox-wrapper', [
toggler =
$create('input', {type: 'checkbox', checked: true, onchange: toggleSkipped}),
$create('SVG:svg.svg-icon.checked',

59
popup.html
View File

@ -192,44 +192,35 @@
</div>
<div class="actions" id="main-actions">
<div id="disable-all-wrapper">
<div class="main-controls">
<label id="disableAll-label" i18n="disableAllStyles">
<input id="disableAll" type="checkbox">
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
</label>
</div>
<label id="disableAll-label" i18n="disableAllStyles">
<input id="disableAll" type="checkbox">
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
</label>
<div id="find-styles">
<a id="find-styles-link" i18n="findStyles, title:findStylesForSite"
href="https://to.be.replaced.on.click/" target="_blank"></a>
<label id="find-styles-inline-group" class="checkbox-wrapper" i18n="title:findStylesInlineTooltip">
<input id="popup.findStylesInline" class="checker" type="checkbox">
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
<span i18n="findStylesInline"></span>
</label>
</div>
<div class="main-controls">
<div id="find-styles">
<a id="find-styles-link" i18n="findStyles, title:findStylesForSite"
href="https://to.be.replaced.on.click/" target="_blank"></a>
<span id="find-styles-inline-group">
<label i18n="title:findStylesInlineTooltip">
<input id="popup.findStylesInline" class="checker" type="checkbox">
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
<span i18n="findStylesInline"></span>
</label>
</span>
</div>
<div id="write-style">
<a id="write-for-frames" title="&lsaquo;iframe&rsaquo;..." tabindex="0" hidden></a>
<span id="write-style-for" i18n="writeStyleFor"></span>
</div>
<div id="write-style">
<a id="write-for-frames" title="&lsaquo;iframe&rsaquo;..." tabindex="0" hidden></a>
<span id="write-style-for" i18n="writeStyleFor"></span>
</div>
</div>
<!-- Actions -->
<div id="popup-options">
<div class="split-btn">
<button id="popup-manage-button" i18n="openManage, title:popupManageTooltip"
data-href="manage.html"></button
><button class="split-btn-pedal" i18n="menu-site:popupManageSiteStyles"></button>
</div>
<button id="popup-options-button" i18n="openOptions"></button>
<button id="popup-wiki-button"
i18n="linkStylusWiki, title:linkGetHelp"
data-href="https://github.com/openstyles/stylus/wiki"></button>
<div id="popup-options">
<div class="split-btn">
<button id="popup-manage-button" i18n="openManage, title:popupManageTooltip"
data-href="manage.html"></button
><button class="split-btn-pedal" i18n="menu-site:popupManageSiteStyles"></button>
</div>
<button id="popup-options-button" i18n="openOptions"></button>
<button id="popup-wiki-button"
i18n="linkStylusWiki, title:linkGetHelp"
data-href="https://github.com/openstyles/stylus/wiki"></button>
</div>
<div id="search-results-error" class="hidden"></div>

128
popup/popup.css
View File

@ -2,6 +2,10 @@
--inner-padding: 18px; /* checkbox + gap */
--outer-padding: 9px;
--hotkey-margin: 16px;
--red1: hsl(0, 70%, 45%);
}
[data-ui-theme="dark"] {
--red1: hsl(0, 85%, 65%);
}
html, body {
@ -26,69 +30,33 @@ body > div:not(#installed):not(#message-box):not(.colorpicker-popup) {
.firefox .chromium-only {
display: none;
}
/************ checkbox ************/
.style-name:hover .checker:checked,
.style-name:hover .checker {
border-color: var(--c30);
background-color: var(--c80);
}
#disable-all-wrapper input[type="checkbox"]:not(.slider):checked + .svg-icon.checked {
position: absolute;
top: 0;
left: 0;
pointer-events: none;
}
#installed.disabled + .actions #disableAll:checked + .svg-icon.checked {
fill: hsl(0, 68%, 42%);
}
#installed.disabled + .actions #disableAll:checked {
border-color: hsl(0, 68%, 50%);
}
#installed.disabled + .actions #disableAll:checked:hover + .svg-icon.checked {
fill: var(--bg);
}
#disableAll:hover {
border-color: hsl(0, 68%, 50%);
background-color: hsl(20, 70%, 75%);
}
#disableAll-label:hover {
color: hsl(0, 68%, 42%);
}
#installed.disabled + .actions #disableAll:checked:hover {
border-color: hsl(0, 50%, 56%);
background-color: hsl(0, 50%, 56%);
}
#installed .style-name .checker,
#installed .style-name .svg-icon.checked {
position: absolute;
top: 7px;
left: var(--outer-padding);
pointer-events: none;
}
#disable-all-wrapper {
padding: 0.3em 0 0.6em;
}
#disable-all-wrapper .main-controls {
display: flex;
#main-actions {
/* raise the actions above the hotkey-info */
position: relative;
z-index: 4;
}
#disable-all-wrapper .main-controls label {
#main-actions > * {
margin-top: .75em;
padding-left: var(--inner-padding);
display: block;
}
#disableAll {
/*left: calc(-1 * var(--inner-padding));*/
}
#disableAll-label {
position: relative;
transition: color .25s;
font-size: 12px;
}
.all-disabled #disableAll {
border-color: var(--red1);
}
.all-disabled #disableAll-label {
font-weight: bold;
color: var(--red1);
}
.all-disabled #disableAll-label .svg-icon {
fill: var(--red1);
}
#no-styles {
@ -100,9 +68,19 @@ body > div:not(#installed):not(#message-box):not(.colorpicker-popup) {
cursor: pointer;
margin-right: .5em;
}
#find-styles-inline-group label {
position: relative;
padding-left: 16px;
.style-name:hover .checker:checked,
.style-name:hover .checker {
border-color: var(--c30);
background-color: var(--c80);
}
#installed .style-name .checker,
#installed .style-name .svg-icon.checked {
position: absolute;
top: 7px;
left: var(--outer-padding);
pointer-events: none;
}
.checker {
@ -139,15 +117,10 @@ body.blocked > DIV {
position: relative;
}
#installed.disabled .style-name {
.all-disabled .style-name {
text-decoration: line-through;
}
#installed.disabled + .actions #disableAll-label {
font-weight: bold;
color: firebrick;
}
#installed .actions {
cursor: default;
}
@ -312,7 +285,7 @@ a.configure[target="_blank"] .svg-icon.config {
}
.not-applied:hover .style-name {
color: darkred;
color: var(--red1);
}
.frame-url::before {
@ -479,23 +452,6 @@ a:hover .svg-icon {
fill: var(--fg);
}
body > .actions {
margin-top: 0.5em;
/* raise the actions above the hotkey-info */
position: relative;
z-index: 4;
}
.actions > div:not(:last-child):not(#disable-all-wrapper),
.actions > .main-controls > div:not(:last-child) {
margin-bottom: 0.75em;
}
.actions input,
.actions label {
vertical-align: middle;
}
body.blocked #popup-manage-button + .split-btn-pedal,
body.blocked #installed > :not(.frame),
body.blocked .actions > .main-controls {
@ -911,7 +867,7 @@ html:not(.styles-last) .split-btn-pedal::after {
#hotkey-info div:first-child {
flex-grow: 1;
padding: 0 1em;
padding: 0 1em 1em;
font-size: 11px;
overflow-y: auto;
}

2
popup/popup.js
View File

@ -86,7 +86,7 @@ async function initPopup(frames) {
// action buttons
$('#disableAll').onchange = function () {
installed.classList.toggle('disabled', this.checked);
$.rootCL.toggle('all-disabled', this.checked);
};
setupLivePrefs();