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

actions as icons in manager

Browse Source
This commit is contained in:
tophf 2022-02-19 06:33:20 +03:00
parent 9ed550c882
commit 606b0e1769
9 changed files with 123 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
edit.html
View File

@ -491,5 +491,5 @@
<body id="stylus-edit">
<script src="edit/edit.js"></script>
</body>
</body>
</html>

5
edit/base.js
View File

@ -90,7 +90,10 @@ const baseInit = (() => {
],
};
// switching the mode here to show the correct page ASAP, usually before DOMContentLoaded
const isUC = Boolean(style.usercssData || !id && prefs.get('newStyleAsUsercss'));
const isUC = Boolean(style.usercssData) || !id && (
params.get('uc') === '1' ||
!params.has('uc') && prefs.get('newStyleAsUsercss')
);
Object.assign(editor, /** @namespace Editor */ {
style,
isUsercss: isUC,

2
edit/edit.css
View File

@ -39,7 +39,7 @@ html.is-new-style #publish,
.hidden {
display: none !important;
}
html.is-new-style #heading::after {
html.is-new-style #heading::before {
content: attr(data-add);
}
html:not(.is-new-style) #heading::before {

3
edit/settings.css
View File

@ -42,6 +42,3 @@
display: inline-flex;
padding: 0 .8em 0 0;
}
a[data-cmd=note] {
vertical-align: text-bottom;
}

4
global-dark.css
View File

@ -20,8 +20,8 @@
/* min/max are exposed in case we want to use an overdrive color for emphasis */
--cmin: hsl(0, 0%, 100%);
--cmax: hsl(0, 0%, 0%);
--accent-1: hsl(180, 100%, 95%);
--accent-3: hsl(180, 30%, 18%);
--accent-1: hsl(180, 100%, 90%);
--accent-3: hsl(180, 30%, 25%);
--input-bg: var(--c95);
}
textarea,

103
manage.html
View File

@ -75,9 +75,7 @@
</template>
<template data-id="homepageIconSmall">
<svg class="svg-icon" viewBox="0 0 20 20">
<path d="M4,4h5v2H6v8h8v-3h2v5H4V4z M11,3h6v6l-2-2l-4,4L9,9l4-4L11,3z"/>
</svg>
<svg class="svg-icon"><use xlink:href="#svg-icon-external"/></svg>
</template>
<template data-id="configureIcon">
@ -89,12 +87,7 @@
<template data-id="updaterIcons">
<span class="updater-icons">
<a class="check-update" i18n="title:checkForUpdate" tabindex="0">
<svg class="svg-icon" viewBox="0 0 20 20">
<path d="M18,16.6l-3.1-3.1c0.5-0.7,0.9-1.5,1-2.5h-2.1c-0.4,1.7-2,3-3.9,3c-0.8,0-1.6-0.3-2.3-0.7
L10,11H6.1H4.1H4v6l2.3-2.3c1,0.8,2.3,1.3,3.7,1.3c1.3,0,2.5-0.4,3.5-1.1l3.1,3.1L18,16.6z"/>
<path d="M10,6c0.8,0,1.6,0.3,2.3,0.7L10,9h3.9h2.1H16V3l-2.3,2.3C12.7,4.5,11.4,4,10,4
C7,4,4.6,6.2,4.1,9h2.1C6.6,7.3,8.1,6,10,6z"/>
</svg>
<svg class="svg-icon"><use xlink:href="#svg-icon-check-update"/></svg>
</a>
<a class="update" i18n="title:installUpdate" tabindex="0">
<svg class="svg-icon" viewBox="0 0 20 20">
@ -155,6 +148,37 @@
<h1 id="manage-heading" i18n="manageHeading"></h1>
<div id="manage-settings">
<div id="actions">
<a id="check-all-updates" i18n="title:checkAllUpdates" tabindex="0">
<svg class="svg-icon"><use xlink:href="#svg-icon-check-update"/></svg>
<span id="update-progress"></span>
</a>
<a id="update-history-button" i18n="title:genericHistoryLabel" tabindex="0">
<svg class="svg-icon" viewBox="0 0 20 20">
<path d="M13,7H7V6h6Zm6,6.5A5.5,5.5,0,0,1,8.61,16H4V3H16V8.61A5.5,5.5,0,0,1,19,13.5ZM8,14c0-.16,0-.84,0-1H7V12H8.21a5.46,5.46,0,0,1,.39-1H7V10H9.26a5.55,5.55,0,0,1,1.09-1H7V8h7V5H6v9Zm10-.5A4.5,4.5,0,1,0,13.5,18,4.5,4.5,0,0,0,18,13.5ZM14,13V10H13v4h4V13Z"/>
</svg>
</a>
<a id="manage-options-button" i18n="title:openOptions" tabindex="0">
<svg class="svg-icon"><use xlink:href="#svg-icon-config"/></svg>
</a>
<a id="injection-order-button" i18n="title:styleInjectionOrder" tabindex="0">
<svg class="svg-icon" viewBox="0 0 20 20">
<path d="M2,18h8v-6H2V18z M4,14h4v2H4V14z M2,7h8V1H2V7z M4,3h4v2H4V3z M15,13v3l-4-3.5L15,9v3h2V5h-6V4h7v9H15z M10,11H2v-1h8V11zM10,9H2V8h8V9z"/>
</svg>
</a>
<a href="edit.html?uc=0" i18n="title:addStyleLabel" tabindex="0">
<svg class="svg-icon"><use xlink:href="#svg-icon-add"/></svg>
</a>
<a href="edit.html?uc=1" id="write-usercss" i18n="title:optionsAdvancedNewStyleAsUsercss" tabindex="0">
<svg class="svg-icon"><use xlink:href="#svg-icon-add"/></svg>
</a>
<p id="update-all">
<button id="apply-all-updates" class="hidden" i18n="applyAllUpdates"></button>
<span id="update-all-no-updates" class="hidden" i18n="updateAllCheckSucceededNoUpdate"></span>
<button id="check-all-updates-force" class="hidden" i18n="checkAllUpdatesForce"></button>
</p>
</div>
<div class="settings-column">
<details id="filters" data-pref="manage.filters.expanded">
<summary>
@ -268,51 +292,6 @@
</div>
</div>
<div class="settings-column">
<details id="actions" data-pref="manage.actions.expanded">
<summary><h2 i18n="optionsActions"></h2></summary>
<div id="update-check">
<button id="check-all-updates" i18n="checkAllUpdates">
<span id="update-progress"></span>
</button>
<a id="update-history-button" i18n="title:genericHistoryLabel" tabindex="0">
<svg class="svg-icon" viewBox="0 0 20 20" i18n="alt:helpAlt">
<path d="M13,7H7V6h6Zm6,6.5A5.5,5.5,0,0,1,8.61,16H4V3H16V8.61A5.5,5.5,0,0,1,19,13.5ZM8,14c0-.16,0-.84,0-1H7V12H8.21a5.46,5.46,0,0,1,.39-1H7V10H9.26a5.55,5.55,0,0,1,1.09-1H7V8h7V5H6v9Zm10-.5A4.5,4.5,0,1,0,13.5,18,4.5,4.5,0,0,0,18,13.5ZM14,13V10H13v4h4V13Z"/>
</svg>
</a>
</div>
<div id="update-all">
<button id="apply-all-updates" class="hidden" i18n="applyAllUpdates"></button>
<span id="update-all-no-updates" class="hidden" i18n="updateAllCheckSucceededNoUpdate"></span>
<button id="check-all-updates-force" class="hidden" i18n="checkAllUpdatesForce"></button>
</div>
<div id="add-style-wrapper">
<a href="edit.html">
<button id="add-style-label" i18n="addStyleLabel" tabindex="-1"></button>
</a>
<label id="add-style-as-usercss-wrapper">
<input type="checkbox" id="newStyleAsUsercss">
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
<span i18n="manageNewStyleAsUsercss, title:optionsAdvancedNewStyleAsUsercss"></span>
<a id="usercss-wiki"
href="https://github.com/openstyles/stylus/wiki/Usercss"
i18n="title:externalUsercssDocument">
<svg class="svg-icon" viewBox="0 0 20 20">
<path d="M4,4h5v2H6v8h8v-3h2v5H4V4z M11,3h6v6l-2-2l-4,4L9,9l4-4L11,3z"/>
</svg>
</a>
</label>
</div>
<button id="manage-options-button" i18n="openOptions"></button>
<button id="injection-order-button" i18n="title:styleInjectionOrder">
<svg class="svg-icon"><use xlink:href="#svg-icon-reorder"/></svg>
&nbsp;
</button>
</details>
</div>
<div class="settings-column">
<details id="backup" data-pref="manage.backup.expanded">
<summary>
@ -376,8 +355,20 @@
<path d="M13.3,12.8l1.5-2.6l-2.2-1.5c0-0.2,0.1-0.5,0.1-0.7c0-0.2,0-0.5-0.1-0.7l2.2-1.5l-1.5-2.6l-2.4,1.2 c-0.4-0.3-0.8-0.5-1.2-0.7L9.5,1h-3L6.3,3.7C5.9,3.8,5.5,4.1,5.1,4.4L2.7,3.2L1.2,5.8l2.2,1.5c0,0.2-0.1,0.5-0.1,0.7 c0,0.2,0,0.5,0.1,0.7l-2.2,1.5l1.5,2.6l2.4-1.2c0.4,0.3,0.8,0.5,1.2,0.7L6.5,15h3l0.2-2.7c0.4-0.2,0.8-0.4,1.2-0.7L13.3,12.8z M8,10.3c-1.3,0-2.3-1-2.3-2.3c0-1.3,1-2.3,2.3-2.3c1.3,0,2.3,1,2.3,2.3C10.3,9.3,9.3,10.3,8,10.3z"/>
</symbol>
<symbol id="svg-icon-reorder" viewBox="0 0 16 16">
<path d="M0,16h7v-6H0V16z M1,11h5v4H1V11z M0,5h7V0H0V5z M1,1h5v3H1V1z M13,11v3l-4-3.5L13,7v3h2V3H8V2h8v9H13z M7,9H0V8h7V9z M7,7H0V6h7V7z"/>
<symbol id="svg-icon-check-update" viewBox="0 0 20 20">
<path d="M18,16.6l-3.1-3.1c0.5-0.7,0.9-1.5,1-2.5h-2.1c-0.4,1.7-2,3-3.9,3c-0.8,0-1.6-0.3-2.3-0.7
L10,11H6.1H4.1H4v6l2.3-2.3c1,0.8,2.3,1.3,3.7,1.3c1.3,0,2.5-0.4,3.5-1.1l3.1,3.1L18,16.6z"/>
<path d="M10,6c0.8,0,1.6,0.3,2.3,0.7L10,9h3.9h2.1H16V3l-2.3,2.3C12.7,4.5,11.4,4,10,4
C7,4,4.6,6.2,4.1,9h2.1C6.6,7.3,8.1,6,10,6z"/>
</symbol>
<symbol id="svg-icon-add" viewBox="0 0 20 20">
<rect x="9" y="2" width="2" height="16"/>
<rect x="2" y="9" width="16" height="2"/>
</symbol>
<symbol id="svg-icon-external" viewBox="0 0 20 20">
<path d="M4,4h5v2H6v8h8v-3h2v5H4V4z M11,3h6v6l-2-2l-4,4L9,9l4-4L11,3z"/>
</symbol>
</svg>
</template>

84
manage/manage.css
View File

@ -55,7 +55,6 @@ a:hover {
z-index: 9;
}
#update-check,
#update-all {
margin-bottom: .5rem;
}
@ -74,53 +73,50 @@ a:hover {
margin-bottom: .3em;
}
#header a[href^="edit"] {
#actions {
--num: 6;
--max-w: 32px;
display: flex;
justify-content: space-between;
max-width: calc(var(--num) * (var(--max-w) + 8px));
}
#actions a {
max-width: var(--max-w);
flex: 1 1;
text-align: center;
text-decoration: none;
margin-right: 8px;
padding: 4px 0 5px;
color: var(--c20);
border: 1px solid var(--c85);
border-radius: 4px;
transition: background-color .15s;
cursor: auto;
}
#add-style-wrapper {
display: flex;
align-items: center;
flex-wrap: wrap;
#actions a:hover {
color: var(--cmin);
border-color: var(--accent-3);
background-color: hsla(180, 100%, 30%, .2);
}
#add-style-wrapper > * {
/* in case the children are wrapped */
margin-bottom: .5rem;
#actions svg {
cursor: auto;
fill: var(--c20);
}
#add-style-as-usercss-wrapper {
display: flex;
align-items: center;
#actions a:hover svg,
#actions svg:hover {
fill: var(--cmin);
}
#add-style-as-usercss-wrapper:not(:hover) input:not(:checked) ~ a svg {
fill: var(--c65);
}
#add-style-as-usercss-wrapper input {
bottom: 0;
margin: auto;
}
#add-style-as-usercss-wrapper input + svg {
bottom: 0;
margin: auto;
left: 2px;
}
#injection-order-button {
--w: 16px;
width: var(--w);
box-sizing: content-box;
display: inline-flex;
align-items: center;
}
#injection-order-button > svg {
#actions #write-usercss::before {
margin: 11px 0 0 12px;
position: absolute;
width: var(--w);
height: var(--w);
font-size: 10px;
font-weight: bold;
background: none;
content: 'UC';
letter-spacing: -1px;
}
#actions #manage-options-button svg {
fill: transparent;
stroke: var(--fg);
}
#installed {
@ -733,7 +729,9 @@ button .svg-icon,
#apply-all-updates:after {
content: " (" attr(data-value) ")";
}
#apply-all-updates:not(.hidden) + #update-all-no-updates {
display: none !important;
}
.update-in-progress #check-all-updates {
position: relative;
}

5
popup.html
View File

@ -197,6 +197,11 @@
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
</label>
<div id="write-style" class="if-not-blocked">
<label id="write-as" i18n="title:optionsAdvancedNewStyleAsUsercss">
<input id="newStyleAsUsercss" type="checkbox">
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
<div>U</div>
</label>
<a id="write-for-frames" title="&lsaquo;iframe&rsaquo;..." tabindex="0" hidden></a>
<span id="write-style-for" i18n="writeStyleFor"></span>
</div>

36
popup/popup.css
View File

@ -65,8 +65,8 @@ body:not(.blocked) .if-blocked,
font-weight: bold;
}
.style-name:hover .checker:checked,
.style-name:hover .checker {
label:hover .checker:checked,
label:hover .checker {
border-color: var(--c30);
background-color: var(--c80);
}
@ -448,15 +448,23 @@ a:hover .svg-icon {
}
/* 'New style' links */
#write-style {
display: flex;
flex-direction: row;
flex-wrap: wrap;
#write-as {
position: absolute;
left: var(--outer-padding);
}
#write-style-for {
margin-right: .6ex
#newStyleAsUsercss {
position: static;
}
#newStyleAsUsercss ~ div {
font-weight: bold;
margin: -2px -1px 0;
padding-top: 1px;
text-align: center;
border-radius: 3px;
}
#newStyleAsUsercss:checked ~ div {
color: var(--bg);
background-color: var(--accent-2);
}
.write-style-link {
@ -512,12 +520,12 @@ a:hover .svg-icon {
display: none;
}
#write-for-frames {
position: absolute;
#write-for-frames:not([hidden]) {
position: relative;
width: 5px;
height: 5px;
margin-left: -12px;
margin-top: 4px;
display: inline-block;
margin: 0 2px 2px;
--dash: transparent 2px, currentColor 2px, currentColor 3px, transparent 3px;
background: linear-gradient(var(--dash)), linear-gradient(90deg, var(--dash));
}