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 { label {
transition: color .1s; transition: color .1s;
} }
.checkbox-wrapper {
padding-left: 16px;
position: relative;
}
select { select {
-moz-appearance: none; -moz-appearance: none;

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

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

3
manage/updater-ui.js
View File

@ -242,9 +242,8 @@ async function showUpdateHistory(event) {
scrollToBottom(); scrollToBottom();
$('#message-box-buttons button').insertAdjacentElement('afterend', $('#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 // 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 = toggler =
$create('input', {type: 'checkbox', checked: true, onchange: toggleSkipped}), $create('input', {type: 'checkbox', checked: true, onchange: toggleSkipped}),
$create('SVG:svg.svg-icon.checked', $create('SVG:svg.svg-icon.checked',

59
popup.html
View File

@ -192,44 +192,35 @@
</div> </div>
<div class="actions" id="main-actions"> <div class="actions" id="main-actions">
<div id="disable-all-wrapper"> <label id="disableAll-label" i18n="disableAllStyles">
<div class="main-controls"> <input id="disableAll" type="checkbox">
<label id="disableAll-label" i18n="disableAllStyles"> <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
<input id="disableAll" type="checkbox"> </label>
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg> <div id="find-styles">
</label> <a id="find-styles-link" i18n="findStyles, title:findStylesForSite"
</div> 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>
<div class="main-controls"> <div id="write-style">
<div id="find-styles"> <a id="write-for-frames" title="&lsaquo;iframe&rsaquo;..." tabindex="0" hidden></a>
<a id="find-styles-link" i18n="findStyles, title:findStylesForSite" <span id="write-style-for" i18n="writeStyleFor"></span>
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> </div>
</div>
<!-- Actions --> <div id="popup-options">
<div id="popup-options"> <div class="split-btn">
<div class="split-btn"> <button id="popup-manage-button" i18n="openManage, title:popupManageTooltip"
<button id="popup-manage-button" i18n="openManage, title:popupManageTooltip" data-href="manage.html"></button
data-href="manage.html"></button ><button class="split-btn-pedal" i18n="menu-site:popupManageSiteStyles"></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>
<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>
<div id="search-results-error" class="hidden"></div> <div id="search-results-error" class="hidden"></div>

128
popup/popup.css
View File

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

2
popup/popup.js
View File

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