Add applies to config modal
This commit is contained in:
Rob Garrison
parent
42a75780d5
commit
218b6b41ec
|
|
@ -27,8 +27,7 @@ self.prefs = self.INJECTED === 1 ? self.prefs : (() => {
|
|||
'manage.onlyEnabled.invert': false, // display only disabled styles
|
||||
'manage.onlyLocal.invert': false, // display only externally installed styles
|
||||
'manage.onlyUsercss.invert': false, // display only non-usercss (standard) styles
|
||||
// the new compact layout doesn't look good on Android yet
|
||||
'manage.newUI': !navigator.appVersion.includes('Android'),
|
||||
|
||||
'manage.newUI.favicons': false, // show favicons for the sites in applies-to
|
||||
'manage.newUI.faviconsGray': true, // gray out favicons
|
||||
'manage.newUI.targets': 3, // max number of applies-to targets visible: 0 = none
|
||||
|
|
|
|||
208
manage.html
208
manage.html
|
|
@ -67,7 +67,7 @@
|
|||
</svg>
|
||||
</a>
|
||||
<a href="#" class="entry-configure-usercss tt-e" i18n-data-title="configureStyle">
|
||||
<svg class="svg-icon config" viewBox="0 0 24 24">
|
||||
<svg class="svg-icon entry-config" viewBox="0 0 24 24">
|
||||
<path d="M19.43 12.98a7.8 7.8 0 0 0 0-1.96l2.11-1.65a.5.5 0 0 0 .12-.64l-2-3.46a.5.5
|
||||
0 0 0-.61-.22l-2.49 1a7.3 7.3 0 0 0-1.69-.98l-.38-2.65A.49.49 0 0 0 14 2h-4a.49.49
|
||||
0 0 0-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1a.57.57 0 0 0-.18-.03.5.5 0 0
|
||||
|
|
@ -142,6 +142,7 @@
|
|||
|
||||
<template data-id="appliesToTarget">
|
||||
<span class="target tt-w">
|
||||
<img async="true">
|
||||
<svg class="svg-icon" viewBox="0 0 24 24">
|
||||
<path fill="#666" d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm7 6h-3l-1-4 4 4zm-7-4l2 4h-4l2-4zM4 14a8 8 0 0 1 0-4h4a17 17 0 0 0 0 4H4zm1 2h3l1 4-4-4zm3-8H5l4-4-1 4zm4 12l-2-4h4l-2 4zm2-6h-4a15 15 0 0 1 0-4h4a15 15 0 0 1 0 4zm1 6l1-4h3l-4 4zm1-6a17 17 0 0 0 0-4h4a8 8 0 0 1 0 4h-4z"/>
|
||||
</svg>
|
||||
|
|
@ -159,7 +160,7 @@
|
|||
</template>
|
||||
|
||||
<template data-id="extraAppliesTo">
|
||||
<details class="applies-to-extra">
|
||||
<details class="applies-to-extra hidden">
|
||||
<summary class="applies-to-extra-expander"> </summary>
|
||||
</details>
|
||||
</template>
|
||||
|
|
@ -227,34 +228,62 @@
|
|||
<div id="main-actions">
|
||||
<a href="edit.html" i18n-data-title="addStyleLabel" class="new-style tt-w">
|
||||
<svg class="svg-icon" viewBox="0 0 24 24">
|
||||
<path d="M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2zm0 16H5V5h14v14zm-8-2h2v-4h4v-2h-4V7h-2v4H7v2h4z"/>
|
||||
<path d="M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2zm0
|
||||
16H5V5h14v14zm-8-2h2v-4h4v-2h-4V7h-2v4H7v2h4z"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a href="#" id="manage-options-button" i18n-data-title="openOptionsManage" class="tt-w">
|
||||
<svg class="svg-icon ui-config" viewBox="0 0 24 24"><use xlink:href="#svg-icon-config"/></svg>
|
||||
</a>
|
||||
|
||||
<a href="#" id="manage-shortcuts-button" class="chromium-only tt-w" i18n-data-title="shortcutsNote">
|
||||
<svg class="svg-icon" viewBox="0 0 24 24">
|
||||
<path d="M20 7v10H4V7h16m0-2H4a2 2 0 0 0-1.99 2L2 17c0 1.1.9 2 2 2h16a2 2 0 0 0 2-2V7a2 2 0
|
||||
0 0-2-2zm-9 3h2v2h-2zm0 3h2v2h-2zM8 8h2v2H8zm0 3h2v2H8zm-3 0h2v2H5zm0-3h2v2H5zm3
|
||||
6h8v2H8zm6-3h2v2h-2zm0-3h2v2h-2zm3 3h2v2h-2zm0-3h2v2h-2z"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<span class="spacer"></span>
|
||||
<a href="https://add0n.com/stylus.html#features" target="_blank" i18n-data-title="linkGetHelp" class="tt-w">
|
||||
<svg class="svg-icon" viewBox="0 0 24 24">
|
||||
<path d="M15 4v7H5.17L4 12.17V4h11m1-2H3a1 1 0 0 0-1 1v14l4-4h10a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1zm5 4h-2v9H6v2a1 1 0 0 0 1 1h11l4 4V7a1 1 0 0 0-1-1z"/>
|
||||
<path d="M15 4v7H5.17L4 12.17V4h11m1-2H3a1 1 0 0 0-1 1v14l4-4h10a1 1 0 0 0 1-1V3a1 1 0 0
|
||||
0-1-1zm5 4h-2v9H6v2a1 1 0 0 0 1 1h11l4 4V7a1 1 0 0 0-1-1z"/>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="https://discordapp.com/widget?id=379521691774353408" target="_blank" i18n-data-title="linkChat" class="tt-w">
|
||||
<svg class="svg-icon" viewBox="0 0 24 24">
|
||||
<path d="M11 23.59v-3.6c-5.01-.26-9-4.42-9-9.49C2 5.26 6.26 1 11.5 1S21 5.26 21 10.5c0 4.95-3.44 9.93-8.57 12.4l-1.43.69zM11.5 3C7.36 3 4 6.36 4 10.5S7.36 18 11.5 18H13v2.3c3.64-2.3 6-6.08 6-9.8C19 6.36 15.64 3 11.5 3zm-1 11.5h2v2h-2zm2-1.5h-2c0-3.25 3-3 3-5 0-1.1-.9-2-2-2s-2 .9-2 2h-2c0-2.21 1.79-4 4-4s4 1.79 4 4c0 2.5-3 2.75-3 5z"/>
|
||||
<path d="M11 23.59v-3.6c-5.01-.26-9-4.42-9-9.49C2 5.26 6.26 1 11.5 1S21 5.26 21 10.5c0
|
||||
4.95-3.44 9.93-8.57 12.4l-1.43.69zM11.5 3C7.36 3 4 6.36 4 10.5S7.36 18 11.5
|
||||
18H13v2.3c3.64-2.3 6-6.08 6-9.8C19 6.36 15.64 3 11.5 3zm-1 11.5h2v2h-2zm2-1.5h-2c0-3.25
|
||||
3-3 3-5 0-1.1-.9-2-2-2s-2 .9-2 2h-2c0-2.21 1.79-4 4-4s4 1.79 4 4c0 2.5-3 2.75-3 5z"/>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="https://github.com/openstyles/stylus/wiki" target="_blank" i18n-data-title="linkStylusWiki" class="tt-w">
|
||||
<svg class="svg-icon" viewBox="0 0 24 24">
|
||||
<path d="M6 2c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6H6zm0 2h7v5h5v11H6V4zm2 8v2h8v-2H8zm0 4v2h8v-2H8z"/>
|
||||
<path d="M6 2c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6H6zm0
|
||||
2h7v5h5v11H6V4zm2 8v2h8v-2H8zm0 4v2h8v-2H8z"/>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="https://www.transifex.com/github-7/Stylus" target="_blank" i18n-data-title="linkTranslate" class="tt-w">
|
||||
<svg class="svg-icon" viewBox="0 0 24 24">
|
||||
<path d="M4 2a2 2 0 0 0-2 2v9c0 1.1.9 2 2 2h1v2l2 2h2v1c0 1.1.9 2 2 2h9a2 2 0 0 0 2-2v-9a2 2 0 0 0-2-2h-5V4a2 2 0 0 0-2-2zm0 2h9v5h-2c-.66 0-1.23.32-1.6.81-.15-.1-.3-.24-.43-.34C9.6 8.8 10.23 8 10.75 7H12V6H9V5H8v1H5v1h1.13a.5.5 0 0 0-.1.5s.17.5.69 1.19c.19.24.45.52.75.81-1.15.97-2.13 1.4-2.13 1.4a.5.5 0 0 0 .38.94s1.2-.48 2.53-1.65c.23.18.5.35.78.53-.01.1-.03.18-.03.28v2H4zm2.88 3h2.68A9.8 9.8 0 0 1 8.2 8.84a6.59 6.59 0 0 1-.69-.75c-.44-.57-.5-.87-.5-.87A.53.53 0 0 0 6.87 7zm7.96 5h1.32L19 20h-1.16l-.75-2.19h-3.25L13.13 20H12zm.6.9c-.13.48-1.28 4.1-1.28 4.1h2.65s-1.22-3.63-1.34-4.1zM7 15h2v2H7z"/>
|
||||
<path d="M4 2a2 2 0 0 0-2 2v9c0 1.1.9 2 2 2h1v2l2 2h2v1c0 1.1.9 2 2 2h9a2 2 0 0 0 2-2v-9a2 2
|
||||
0 0 0-2-2h-5V4a2 2 0 0 0-2-2zm0 2h9v5h-2c-.66 0-1.23.32-1.6.81-.15-.1-.3-.24-.43-.34C9.6
|
||||
8.8 10.23 8 10.75 7H12V6H9V5H8v1H5v1h1.13a.5.5 0 0 0-.1.5s.17.5.69
|
||||
1.19c.19.24.45.52.75.81-1.15.97-2.13 1.4-2.13 1.4a.5.5 0 0 0 .38.94s1.2-.48
|
||||
2.53-1.65c.23.18.5.35.78.53-.01.1-.03.18-.03.28v2H4zm2.88 3h2.68A9.8 9.8 0 0 1 8.2
|
||||
8.84a6.59 6.59 0 0 1-.69-.75c-.44-.57-.5-.87-.5-.87A.53.53 0 0 0 6.87 7zm7.96 5h1.32L19
|
||||
20h-1.16l-.75-2.19h-3.25L13.13 20H12zm.6.9c-.13.48-1.28 4.1-1.28
|
||||
4.1h2.65s-1.22-3.63-1.34-4.1zM7 15h2v2H7z"/>
|
||||
</svg>
|
||||
|
||||
</a>
|
||||
<a href="https://userstyles.org" target="_blank" i18n-data-title="linkGetStyles" class="tt-w">
|
||||
<svg class="svg-icon" viewBox="0 0 24 24">
|
||||
<path d="M2.53 19.65l1.34.56v-9.03l-2.43 5.86a2.02 2.02 0 0 0 1.09 2.61zm19.5-3.7L17.07 3.98a2.01 2.01 0 0 0-2.6-1.08L7.1 5.95a2 2 0 0 0-1.08 2.6l4.96 11.97a2 2 0 0 0 2.6 1.08l7.36-3.05a2 2 0 0 0 1.09-2.6zm-9.2 3.8L7.87 7.79l7.35-3.04h.01l4.95 11.95-7.35 3.05z"/>
|
||||
<path d="M2.53 19.65l1.34.56v-9.03l-2.43 5.86a2.02 2.02 0 0 0 1.09 2.61zm19.5-3.7L17.07
|
||||
3.98a2.01 2.01 0 0 0-2.6-1.08L7.1 5.95a2 2 0 0 0-1.08 2.6l4.96 11.97a2 2 0 0 0 2.6
|
||||
1.08l7.36-3.05a2 2 0 0 0 1.09-2.6zm-9.2 3.8L7.87 7.79l7.35-3.04h.01l4.95 11.95-7.35 3.05z"/>
|
||||
<circle cx="11" cy="9" r="1"/>
|
||||
<path d="M5.88 19.75c0 1.1.9 2 2 2h1.45l-3.45-8.34v6.34z"/>
|
||||
</svg>
|
||||
|
|
@ -266,40 +295,6 @@
|
|||
<div id="tools-wrapper" class="hidden">
|
||||
|
||||
<div class="manage-row">
|
||||
|
||||
<span id="bulk-actions">
|
||||
<label class="checkmate toggle-all" tabindex="0">
|
||||
<input id="toggle-all-filters" type="checkbox">
|
||||
<svg class="svg-icon checkbox" viewBox="0 0 14 14">
|
||||
<path class="circle" d="M7 1.2a5.8 5.8 0 1 0 0 11.6A5.8 5.8 0 0 0 7 1.2zm0 10.5a4.7 4.7 0 0 1 0-9.4 4.7 4.7 0 0 1 0 9.4z"/>
|
||||
<path class="checkmark" d="M9.6 4.5L5.8 8.3 4.3 6.8l-.8.8L5.8 10l4.7-4.7-.9-.8z"/>
|
||||
<path class="indeterminate" d="M3.5 6.3h7v1.4h-7z"/>
|
||||
</svg>
|
||||
</label>
|
||||
<span id="bulk-filter-count"></span>
|
||||
<span i18n-text="bulkActions"></span>
|
||||
<span class="select-resizer bulk-actions-select-wrapper">
|
||||
<select id="bulk-actions-select">
|
||||
<option i18n-text="bulkActionsSelect" value=""></option>
|
||||
<option i18n-text="enableStyleLabel" value="enable"></option>
|
||||
<option i18n-text="disableStyleLabel" value="disable"></option>
|
||||
<option i18n-text="exportLabel" value="export"></option>
|
||||
<option i18n-text="checkForUpdate" value="update"></option>
|
||||
<option i18n-text="genericResetLabel" value="reset"></option>
|
||||
<option i18n-text="deleteStyleLabel" value="delete"></option>
|
||||
</select>
|
||||
<svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
|
||||
</span>
|
||||
<button id="bulk-actions-apply" i18n-text="bulkActionsApply"></button>
|
||||
<button id="apply-all-updates" class="hidden" i18n-text="applyAllUpdates"></button>
|
||||
<svg class="svg-icon busy hidden" viewBox="0 0 24 24">
|
||||
<path d="M12 23h-1v-6.57A5.97 5.97 0 0 1 7 18c-3.25 0-6-2.75-6-6v-1h6.57A5.97 5.97 0 0 1 6 7c0-3.25 2.75-6 6-6h1v6.57A5.97 5.97 0 0 1 17 6c3.25 0 6 2.75 6 6v1h-6.57A5.97 5.97 0 0 1 18 17c0 3.25-2.75 6-6 6zm1-9.87v7.74c1.7-.46 3-2.04 3-3.87s-1.3-3.41-3-3.87zM3.13 13c.46 1.7 2.04 3 3.87 3s3.41-1.3 3.87-3H3.13zm10-2h7.74c-.46-1.7-2.05-3-3.87-3s-3.41 1.3-3.87 3zM11 3.13C9.3 3.59 8 5.18 8 7s1.3 3.41 3 3.87V3.13z"/>
|
||||
<!-- supported everwhere?
|
||||
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 0 0" to="360 0 0" dur="1s" repeatCount="indefinite"/>
|
||||
-->
|
||||
</svg>
|
||||
</span>
|
||||
|
||||
<span id="search-wrapper">
|
||||
<input id="search" type="search" i18n-placeholder="searchStyles" spellcheck="false"
|
||||
data-filter=":not(.not-matching)"
|
||||
|
|
@ -384,8 +379,49 @@
|
|||
</span>
|
||||
|
||||
</span>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="bulk-actions" class="manage-row">
|
||||
<div>
|
||||
<label class="checkmate toggle-all" tabindex="0">
|
||||
<input id="toggle-all-filters" type="checkbox">
|
||||
<svg class="svg-icon checkbox" viewBox="0 0 14 14">
|
||||
<path class="circle" d="M7 1.2a5.8 5.8 0 1 0 0 11.6A5.8 5.8 0 0 0 7 1.2zm0 10.5a4.7 4.7 0
|
||||
0 1 0-9.4 4.7 4.7 0 0 1 0 9.4z"/>
|
||||
<path class="checkmark" d="M9.6 4.5L5.8 8.3 4.3 6.8l-.8.8L5.8 10l4.7-4.7-.9-.8z"/>
|
||||
<path class="indeterminate" d="M3.5 6.3h7v1.4h-7z"/>
|
||||
</svg>
|
||||
</label>
|
||||
<span id="bulk-filter-count"></span>
|
||||
<span i18n-text="bulkActions"></span>
|
||||
<span class="select-resizer bulk-actions-select-wrapper">
|
||||
<select id="bulk-actions-select">
|
||||
<option i18n-text="bulkActionsSelect" value=""></option>
|
||||
<option i18n-text="enableStyleLabel" value="enable"></option>
|
||||
<option i18n-text="disableStyleLabel" value="disable"></option>
|
||||
<option i18n-text="exportLabel" value="export"></option>
|
||||
<option i18n-text="checkForUpdate" value="update"></option>
|
||||
<option i18n-text="genericResetLabel" value="reset"></option>
|
||||
<option i18n-text="deleteStyleLabel" value="delete"></option>
|
||||
</select>
|
||||
<svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
|
||||
</span>
|
||||
<button id="bulk-actions-apply" i18n-text="bulkActionsApply"></button>
|
||||
<button id="apply-all-updates" class="hidden" i18n-text="applyAllUpdates"></button>
|
||||
<svg class="svg-icon busy hidden" viewBox="0 0 24 24">
|
||||
<path d="M12 23h-1v-6.57A5.97 5.97 0 0 1 7 18c-3.25 0-6-2.75-6-6v-1h6.57A5.97 5.97 0 0 1 6
|
||||
7c0-3.25 2.75-6 6-6h1v6.57A5.97 5.97 0 0 1 17 6c3.25 0 6 2.75 6 6v1h-6.57A5.97 5.97 0 0 1
|
||||
18 17c0 3.25-2.75 6-6 6zm1-9.87v7.74c1.7-.46 3-2.04 3-3.87s-1.3-3.41-3-3.87zM3.13 13c.46
|
||||
1.7 2.04 3 3.87 3s3.41-1.3 3.87-3H3.13zm10-2h7.74c-.46-1.7-2.05-3-3.87-3s-3.41 1.3-3.87
|
||||
3zM11 3.13C9.3 3.59 8 5.18 8 7s1.3 3.41 3 3.87V3.13z"/>
|
||||
<!-- supported everwhere?
|
||||
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 0 0"
|
||||
to="360 0 0" dur="1s" repeatCount="indefinite"/>
|
||||
-->
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="installed" class="manage-col-entries">
|
||||
|
|
@ -411,12 +447,21 @@
|
|||
<div class="entry-col header-last-update center-text">
|
||||
<a href="#" class="entry-col sortable tt-sw" i18n-text="searchResultUpdated" i18n-data-title="sortLabel;sortColumnLastUpdate" data-type="dateUpdated"><span></span></a>
|
||||
<a href="#" id="update-history" class="tt-sw" i18n-data-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 class="svg-icon update-history" viewBox="0 0 24 24" i18n-alt="updateCheckHistory">
|
||||
<path d="M20.8 10.86a7 7 0 0 0-1.53-1.47V7.02L13.35 1H5.47c-1.08 0-1.96.9-1.96 2L3.5
|
||||
19.05c0 1.1.88 2 1.96 2h5.94a6.86 6.86 0 0 0 8.2-.26 7.16 7.16 0 0 0 1.2-9.93zm-2.15
|
||||
8.7a5.34 5.34 0 0 1-7.59-.96 5.53 5.53 0 0 1-1.1-4.05l-1.53-.2c-.2 1.6.14 3.26 1.05
|
||||
4.7h-4V3h7.05l4.77 4.85v.59a6.84 6.84 0 0 0-6.26 1.2L9.62 7.78l-.52 4.3-.05.1 4.37.56L12
|
||||
10.88a5.34 5.34 0 0 1 7.6.95 5.56 5.56 0 0 1-.94 7.72z"/>
|
||||
<path d="M14.38 12.07V16l3.3 2 .56-.95-2.7-1.64v-3.34z"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
<div class="entry-col header-applies-to" i18n-text="appliesLabel"></div>
|
||||
<div class="entry-col header-applies-to" i18n-text="appliesLabel">
|
||||
<a href="#" id="applies-to-config" class="tt-sw" i18n-data-title="configureStyle" tabIndex="0">
|
||||
<svg class="svg-icon applies-to-config" viewBox="0 0 24 24"><use xlink:href="#svg-icon-config"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
</header>
|
||||
</div>
|
||||
|
||||
|
|
@ -426,15 +471,40 @@
|
|||
<button id="check-all-updates-force"></button>
|
||||
<button id="file-all-styles"></button>
|
||||
<button id="unfile-all-styles"></button>
|
||||
<button id="manage-options-button"></button>
|
||||
<button id="manage-shortcuts-button"></button>
|
||||
<button id="sorter-help"></button>
|
||||
<input id="manage.newUI" type="checkbox">
|
||||
<input id="manage.newUI.faviconsGray" type="checkbox">
|
||||
<input id="manage.newUI.targets" type="number" min="1" max="100" value="3">
|
||||
<input id="manage.newUI.favicons" type="checkbox">
|
||||
</div>
|
||||
|
||||
<!-- Applies to config, can't put this in a template because these inputs are bound to subscribed prefs -->
|
||||
<div class="hidden">
|
||||
<div id="appliesToConfig">
|
||||
<label class="checkmate" tabindex="0">
|
||||
<input id="manage.newUI.favicons" type="checkbox">
|
||||
<svg class="svg-icon checkbox" viewBox="0 0 24 24">
|
||||
<path class="circle" d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 18a8.01 8.01 0 0 1 0-16
|
||||
8.01 8.01 0 0 1 0 16z"/>
|
||||
<path class="checkmark" d="M16.59 7.52L10 14.11l-2.59-2.58L6 12.94l4 4 8-8z"/>
|
||||
</svg>
|
||||
<span i18n-text="manageFavicons"></span>
|
||||
</label>
|
||||
<div id="faviconsHelp" i18n-text="manageFaviconsHelp">
|
||||
<p></p>
|
||||
<label class="checkmate" tabindex="0">
|
||||
<input id="manage.newUI.faviconsGray" type="checkbox">
|
||||
<svg class="svg-icon checkbox" viewBox="0 0 24 24">
|
||||
<path class="circle" d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 18a8.01 8.01 0 0 1 0-16
|
||||
8.01 8.01 0 0 1 0 16z"/>
|
||||
<path class="checkmark" d="M16.59 7.52L10 14.11l-2.59-2.58L6 12.94l4 4 8-8z"/>
|
||||
</svg>
|
||||
<span i18n-text="manageFaviconsGray"></span>
|
||||
</label>
|
||||
</div>
|
||||
<label>
|
||||
<input id="manage.newUI.targets" type="number" min="1" max="100" value="3">
|
||||
<span i18n-text="manageMaxTargets"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div id="manage-settings">
|
||||
<div class="settings-column">
|
||||
|
||||
|
|
@ -579,17 +649,45 @@
|
|||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="display: none !important;">
|
||||
<symbol id="svg-icon-checked" viewBox="0 0 1000 1000">
|
||||
<path fill-rule="evenodd" d="M983.2,184.3L853,69.8c-4-3.5-9.3-5.3-14.5-5c-5.3,0.4-10.3,2.8-13.8,6.8L352.3,609.2L184.4,386.9c-3.2-4.2-8-7-13.2-7.8c-5.3-0.8-10.6,0.6-14.9,3.9L18,487.5c-8.8,6.7-10.6,19.3-3.9,28.1L325,927.2c3.6,4.8,9.3,7.7,15.3,8c0.2,0,0.5,0,0.7,0c5.8,0,11.3-2.5,15.1-6.8L985,212.6C992.3,204.3,991.5,191.6,983.2,184.3z"/>
|
||||
<path fill-rule="evenodd" d="M983.2,184.3L853,69.8c-4-3.5-9.3-5.3-14.5-5c-5.3,0.4-10.3,2.8-13.8,
|
||||
6.8L352.3,609.2L184.4,386.9c-3.2-4.2-8-7-13.2-7.8c-5.3-0.8-10.6,0.6-14.9,3.9L18,487.5c-8.8,
|
||||
6.7-10.6,19.3-3.9,28.1L325,927.2c3.6,4.8,9.3,7.7,15.3,8c0.2,0,0.5,0,0.7,0c5.8,0,11.3-2.5,
|
||||
15.1-6.8L985,212.6C992.3,204.3,991.5,191.6,983.2,184.3z"/>
|
||||
</symbol>
|
||||
|
||||
<symbol id="svg-icon-select-arrow" viewBox="0 0 1792 1792">
|
||||
<path fill-rule="evenodd" d="M1408 704q0 26-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45t19-45 45-19h896q26 0 45 19t19 45z"/>
|
||||
<path fill-rule="evenodd" d="M1408 704q0 26-19 45l-448 448q-19 19-45
|
||||
19t-45-19l-448-448q-19-19-19-45t19-45 45-19h896q26 0 45 19t19 45z"/>
|
||||
</symbol>
|
||||
|
||||
<symbol id="svg-icon-help" viewBox="0 0 14 16">
|
||||
<title i18n-text="helpAlt"></title>
|
||||
<path fill-rule="evenodd" d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"></path>
|
||||
<path fill-rule="evenodd" d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28
|
||||
0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8
|
||||
7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27
|
||||
0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56
|
||||
5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7
|
||||
7-7-3.12-7-7 3.14-7 7-7z"></path>
|
||||
</symbol>
|
||||
|
||||
<symbol id="svg-icon-config" viewBox="0 0 24 24">
|
||||
<path d="M19.43 12.98a7.8 7.8 0 0 0 0-1.96l2.11-1.65a.5.5 0 0 0 .12-.64l-2-3.46a.5.5
|
||||
0 0 0-.61-.22l-2.49 1a7.3 7.3 0 0 0-1.69-.98l-.38-2.65A.49.49 0 0 0 14 2h-4a.49.49
|
||||
0 0 0-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1a.57.57 0 0 0-.18-.03.5.5 0 0
|
||||
0-.43.25l-2 3.46a.5.5 0 0 0 .12.64l2.11 1.65a7.93 7.93 0 0 0 0 1.96l-2.11 1.65a.5.5
|
||||
0 0 0-.12.64l2 3.46a.5.5 0 0 0 .61.22l2.49-1c.52.4 1.08.73 1.69.98l.38
|
||||
2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65a7.68 7.68 0 0 0 1.69-.98l2.49
|
||||
1 .18.03a.5.5 0 0 0 .43-.25l2-3.46a.5.5 0 0 0-.12-.64l-2.11-1.65zm-1.98-1.71a5.34
|
||||
5.34 0 0 1 0 1.46l-.14 1.13.89.7 1.08.84-.7
|
||||
1.21-1.27-.51-1.04-.42-.9.68c-.43.32-.84.56-1.25.73l-1.06.43-.16 1.13-.2
|
||||
1.35h-1.4l-.19-1.35-.16-1.13-1.06-.43a5.67 5.67 0 0
|
||||
1-1.23-.71l-.91-.7-1.06.43-1.27.51-.7-1.21
|
||||
1.08-.84.89-.7-.14-1.13c-.03-.31-.05-.54-.05-.74s.02-.43.05-.73l.14-1.13-.89-.7-1.08-.84.7-1.21
|
||||
1.27.51 1.04.42.9-.68c.43-.32.84-.56 1.25-.73l1.06-.43.16-1.13.2-1.35h1.39l.19 1.35.16
|
||||
1.13 1.06.43c.43.18.83.41 1.23.71l.91.7 1.06-.43 1.27-.51.7 1.21-1.07.85-.89.7.14
|
||||
1.13zM12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8zm0 6c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"/>
|
||||
</symbol>
|
||||
|
||||
</svg>
|
||||
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -61,10 +61,15 @@ function onRuntimeMessage(msg) {
|
|||
function initGlobalEvents() {
|
||||
installed = $('#installed');
|
||||
installed.onclick = handleEvent.entryClicked;
|
||||
$('#manage-options-button').onclick = () => chrome.runtime.openOptionsPage();
|
||||
$('#manage-options-button').onclick = event => {
|
||||
event.preventDefault();
|
||||
chrome.runtime.openOptionsPage();
|
||||
};
|
||||
|
||||
const btn = $('#manage-shortcuts-button');
|
||||
btn.onclick = btn.onclick || (() => openURL({url: URLS.configureCommands}));
|
||||
$('#manage-shortcuts-button').onclick = event => {
|
||||
event.preventDefault();
|
||||
openURL({url: URLS.configureCommands});
|
||||
};
|
||||
|
||||
$$('#header a[href^="http"]').forEach(a => (a.onclick = handleEvent.external));
|
||||
|
||||
|
|
@ -108,7 +113,6 @@ function initGlobalEvents() {
|
|||
sorter.init();
|
||||
|
||||
prefs.subscribe([
|
||||
'manage.newUI',
|
||||
'manage.newUI.favicons',
|
||||
'manage.newUI.faviconsGray',
|
||||
'manage.newUI.targets',
|
||||
|
|
@ -130,7 +134,8 @@ Object.assign(handleEvent, {
|
|||
'.entry-delete': 'delete',
|
||||
'.entry-configure-usercss': 'config',
|
||||
'.header-filter': 'toggleBulkActions',
|
||||
'.sortable': 'updateSort'
|
||||
'.sortable': 'updateSort',
|
||||
'#applies-to-config': 'appliesConfig',
|
||||
},
|
||||
|
||||
entryClicked(event) {
|
||||
|
|
@ -281,6 +286,51 @@ Object.assign(handleEvent, {
|
|||
configDialog(styleMeta);
|
||||
},
|
||||
|
||||
appliesConfig() {
|
||||
messageBox({
|
||||
title: t('configureStyle'),
|
||||
className: 'config-dialog',
|
||||
contents: [
|
||||
$('#appliesToConfig').cloneNode(true)
|
||||
],
|
||||
buttons: [{
|
||||
textContent: t('confirmClose'),
|
||||
dataset: {cmd: 'close'},
|
||||
}],
|
||||
onshow: box => {
|
||||
box.addEventListener('change', handleEvent.toggleFavicons);
|
||||
$$('input', box).forEach(el => {
|
||||
el.dataset.id = el.id;
|
||||
el.id = null;
|
||||
});
|
||||
}
|
||||
}).then(() => {
|
||||
$('#message-box').removeEventListener('change', handleEvent.toggleFavicons);
|
||||
});
|
||||
},
|
||||
|
||||
toggleFavicons(event) {
|
||||
event.stopPropagation();
|
||||
const box = $('#message-box-contents');
|
||||
|
||||
let value = $('[data-id="manage.newUI.favicons"]', box).checked;
|
||||
prefs.set('manage.newUI.favicons', value);
|
||||
// UI.favicons = value;
|
||||
// Updating the hidden inputs; not the inputs in the message box
|
||||
$('#manage.newUI.favicons').checked = value;
|
||||
|
||||
value = $('[data-id="manage.newUI.faviconsGray"]', box).checked;
|
||||
prefs.set('manage.newUI.faviconsGray', value);
|
||||
// UI.faviconsGray = value;
|
||||
$('#manage.newUI.faviconsGray').checked = value;
|
||||
|
||||
value = $('[data-id="manage.newUI.targets"]', box).value;
|
||||
prefs.set('manage.newUI.targets', value);
|
||||
// UI.targets = value;
|
||||
//$('#manage.newUI.targets').value = value;
|
||||
|
||||
},
|
||||
|
||||
});
|
||||
|
||||
function handleUpdate(style, {reason, method} = {}) {
|
||||
|
|
@ -343,14 +393,14 @@ function handleDelete(id) {
|
|||
|
||||
|
||||
function switchUI({styleOnly} = {}) {
|
||||
const current = {};
|
||||
const current = {enabled: true};
|
||||
const changed = {};
|
||||
let someChanged = false;
|
||||
// ensure the global option is processed first
|
||||
for (const el of [$('#manage.newUI'), ...$$('[id^="manage.newUI."]')]) {
|
||||
const id = el.id.replace(/^manage\.newUI\.?/, '') || 'enabled';
|
||||
for (const el of $$('[id^="manage.newUI."]')) {
|
||||
const id = el.id.replace(/^manage\.newUI\.?/, '');
|
||||
const value = el.type === 'checkbox' ? el.checked : Number(el.value);
|
||||
const valueChanged = value !== UI[id] && (id === 'enabled' || current.enabled);
|
||||
const valueChanged = value !== UI[id];
|
||||
current[id] = value;
|
||||
changed[id] = valueChanged;
|
||||
someChanged |= valueChanged;
|
||||
|
|
@ -368,16 +418,36 @@ function switchUI({styleOnly} = {}) {
|
|||
return;
|
||||
}
|
||||
|
||||
const missingFavicons = UI.favicons && !$('.entry-applies-to img');
|
||||
|
||||
// TO DO: Fix switching `prefs.set('manage.newUI.favicons', true)`
|
||||
const missingFavicons = UI.favicons && !$('.entry-applies-to img[src]');
|
||||
if (changed.enabled || (missingFavicons && !UI.createStyleElement.parts)) {
|
||||
const header = document.createDocumentFragment().appendChild($('.entry-header'));
|
||||
installed.textContent = '';
|
||||
installed.appendChild(header);
|
||||
API.getAllStyles(true).then(UI.showStyles);
|
||||
return;
|
||||
}
|
||||
if (changed.targets) {
|
||||
for (const targets of $$('.entry .targets')) {
|
||||
const hasMore = targets.children.length > UI.targets;
|
||||
targets.parentElement.classList.toggle('has-more', hasMore);
|
||||
const items = $$('.target', targets);
|
||||
const extra = $('.applies-to-extra', targets);
|
||||
const x = items.length === 54;
|
||||
items.splice(0, UI.targets).every(el => {
|
||||
if (!el.parentElement.classList.contains('targets')) {
|
||||
targets.insertBefore(el, extra);
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
extra.classList.toggle('hidden', items.length < 1);
|
||||
items.some((el, indx) => {
|
||||
if (!el.parentElement.classList.contains('applies-to-extra')) {
|
||||
extra.prepend(el);
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
|
@ -413,7 +483,7 @@ function updateBulkFilters({target}) {
|
|||
// total is undefined until initialized
|
||||
if (!installed.dataset.total) return;
|
||||
// ignore filter checkboxes
|
||||
if (target.type === 'checkbox' && !target.dataset.filter) {
|
||||
if (target.type === 'checkbox' && !target.dataset.filter && target.closest('#tools-wrapper, .entry')) {
|
||||
handleEvent.toggleBulkActions({hidden: false});
|
||||
const bulk = $('#toggle-all-filters');
|
||||
const state = target.checked;
|
||||
|
|
@ -451,7 +521,7 @@ function removeSelection() {
|
|||
function updateInjectionOrder() {
|
||||
const entries = [...installed.children];
|
||||
entries.shift(); // remove header
|
||||
console.log(entries[1].styleMeta.id, entries[1].styleMeta.injectionOrder)
|
||||
// console.log(entries[1].styleMeta.id, entries[1].styleMeta.injectionOrder)
|
||||
|
||||
entries.forEach((entry, index) => {
|
||||
entry.styleMeta.injectionOrder = index + 1;
|
||||
|
|
|
|||
|
|
@ -99,10 +99,10 @@ const UI = {
|
|||
|
||||
createStyleElement: ({style, name}) => {
|
||||
// query the sub-elements just once, then reuse the references
|
||||
if ((UI._parts || {}).UI !== UI.enabled) {
|
||||
if (!(UI._parts || {}).UI) {
|
||||
const entry = template['style'];
|
||||
UI._parts = {
|
||||
UI: UI.enabled,
|
||||
UI: true,
|
||||
entry,
|
||||
entryClassBase: entry.className,
|
||||
checker: $('.entry-state-toggle', entry) || {},
|
||||
|
|
@ -199,8 +199,10 @@ const UI = {
|
|||
const element = template.appliesToTarget.cloneNode(true);
|
||||
if (numTargets === UI.targets) {
|
||||
container = container.appendChild(template.extraAppliesTo.cloneNode(true));
|
||||
container.classList.remove('hidden');
|
||||
}
|
||||
element.dataset.type = type;
|
||||
element.dataset.index = numTargets;
|
||||
element.dataset.title =
|
||||
(parts.decorations[type + 'Before'] || '') +
|
||||
targetValue +
|
||||
|
|
@ -210,8 +212,9 @@ const UI = {
|
|||
}
|
||||
}
|
||||
}
|
||||
if (numTargets > UI.targets) {
|
||||
$('.entry-applies-to', entry).classList.add('has-more');
|
||||
if (numTargets <= UI.targets) {
|
||||
// Include hidden expander in case user changes UI.targets
|
||||
container.appendChild(template.extraAppliesTo.cloneNode(true));
|
||||
}
|
||||
if (numTargets) {
|
||||
entryTargets.parentElement.replaceChild(targets, entryTargets);
|
||||
|
|
@ -232,8 +235,6 @@ const UI = {
|
|||
const regexpReplaceExtraCharacters = /[\\(]|((\|\w+)+\))/g;
|
||||
const regexpMatchRegExp = /[\w-]+[.(]+(com|org|co|net|im|io|edu|gov|biz|info|de|cn|uk|nl|eu|ru)\b/g;
|
||||
const regexpMatchDomain = /^.*?:\/\/([^/]+)/;
|
||||
const image = document.createElement('img');
|
||||
image.async = true;
|
||||
for (const target of $$('.target', container)) {
|
||||
const type = target.dataset.type;
|
||||
const targetValue = target.dataset.title;
|
||||
|
|
@ -254,15 +255,12 @@ const UI = {
|
|||
favicon = favicon ? UI.GET_FAVICON_URL + favicon[1] : '';
|
||||
}
|
||||
if (favicon) {
|
||||
const el = $('img, svg', target);
|
||||
const el = $('img[src], svg', target);
|
||||
if (!el || el.localName === 'svg') {
|
||||
const img = image.cloneNode();
|
||||
const img = $('img', target);
|
||||
img.dataset.src = favicon;
|
||||
el.replaceWith(img);
|
||||
//target.insertAdjacentElement('afterbegin', document.createElement('img'))
|
||||
//.dataset.src = favicon;
|
||||
} else if ((target.dataset.src || target.src) !== favicon) {
|
||||
el.src = '';
|
||||
delete el.src;
|
||||
el.dataset.src = favicon;
|
||||
}
|
||||
}
|
||||
|
|
@ -283,7 +281,12 @@ const UI = {
|
|||
addHeaderLabels: () => {
|
||||
const header = $('.header-name');
|
||||
const span = document.createElement('span');
|
||||
const labels = span.cloneNode();
|
||||
let labels = $('.header-labels', header);
|
||||
if (labels) {
|
||||
labels.textContent = '';
|
||||
} else {
|
||||
labels = span.cloneNode();
|
||||
}
|
||||
const label = document.createElement('a');
|
||||
labels.className = 'header-labels';
|
||||
label.className = 'header-label sortable tt-s';
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
:root {
|
||||
--icon-size: 20px;
|
||||
--narrow-column: 60px;
|
||||
--narrow-column: 75px;
|
||||
--header-height: 40px;
|
||||
--toolbar-height: 35px;
|
||||
--toolbar-height: 60px;
|
||||
--entry-header-height: 25px;
|
||||
--onoffswitch-width: 60px;
|
||||
}
|
||||
|
|
@ -119,20 +119,17 @@ a:hover {
|
|||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
#main-header a {
|
||||
font-size: .7em;
|
||||
color: #999;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#main-header a:hover {
|
||||
#main-header a:hover,
|
||||
#main-actions a:hover svg {
|
||||
color: hsla(180, 50%, 50%, 1);
|
||||
fill: hsla(180, 50%, 50%, 1);
|
||||
}
|
||||
|
||||
#main-header:lang(ja) {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
|
||||
#installed .entry-header {
|
||||
background: #eee;
|
||||
position: fixed;
|
||||
|
|
@ -291,12 +288,18 @@ a:hover {
|
|||
padding: 2px;
|
||||
}
|
||||
|
||||
.targets .target img {
|
||||
.targets .target img,
|
||||
.targets .target svg {
|
||||
max-width: var(--icon-size);
|
||||
max-height: var(--icon-size);
|
||||
width: var(--icon-size);
|
||||
}
|
||||
|
||||
#installed:not(.has-favicons) .targets img,
|
||||
#installed.has-favicons .targets img[src] + svg {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#installed.faviconsGray .target img {
|
||||
-webkit-filter: grayscale(1);
|
||||
filter: grayscale(1);
|
||||
|
|
@ -632,8 +635,12 @@ details.applies-to-extra[open] {
|
|||
margin-right: 20px;
|
||||
}
|
||||
|
||||
#search-wrapper {
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
#search {
|
||||
width: 15vw;
|
||||
width: calc(100% - var(--icon-size) * 1.4);
|
||||
}
|
||||
|
||||
#search-help {
|
||||
|
|
@ -852,7 +859,12 @@ details.applies-to-extra[open] {
|
|||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
@media (max-width: 900px) {
|
||||
#installed .entry,
|
||||
#installed .entry-col,
|
||||
#installed .entry-header {
|
||||
display: block;
|
||||
}
|
||||
.entry-actions {
|
||||
white-space: normal;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user