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

Add export & update all buttons to header

Browse Source
This commit is contained in:
Rob Garrison 2019-01-13 12:21:12 -06:00
parent 30a780a44e
commit 7abc4f7fe6
5 changed files with 58 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
_locales/en/messages.json
View File

@ -336,7 +336,11 @@
},
"exportLabel": {
"message": "Export",
"description": "Label for the button to export a style ('edit' page) or all styles ('manage' page)"
"description": "Label for the button to export a style ('edit' page) or bulk styles ('manage' page)"
},
"exportAllLabel": {
"message": "Export All",
"description": "Label for the button to export all styles ('manage' page)"
},
"externalFeedback": {
"message": "Feedback",

38
manage.html
View File

@ -243,16 +243,6 @@
<svg class="svg-icon ui-config" viewBox="0 0 24 24"><use xlink:href="#svg-icon-config"/></svg>
</a>
<div id="manage-backups" i18n-data-title="backupImport" class="tt-w">
<svg class="svg-icon" viewBox="0 0 24 24">
<path d="M20.5 5.2l-1.4-1.6C19 3.2 18.5 3 18 3H6c-.5 0-.9.2-1.2.6L3.5 5.2A2 2 0 0 0 3 6.5V19c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2V6.5c0-.5-.2-1-.5-1.3zM6.2 5h11.6l.8 1H5.4l.8-1zM5 19V8h14v11H5zm3-5h2.5v3h3v-3H16l-4-4z"/>
</svg>
<div class="dropdown">
<a href="#" id="unfile-all-styles" i18n-text="bckpInstStyles"></a>
<a href="#" id="sync-dropbox-import" i18n-text="syncDropboxStyles"></a>
</div>
</div>
<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
@ -261,6 +251,34 @@
</svg>
</a>
<span class="spacer"></span>
<a href="#" id="update-all" class="tt-w" i18n-data-title="checkAllUpdates">
<svg class="svg-icon" viewBox="0 0 24 24">
<path d="M11 8v5l4.25 2.52.77-1.28-3.52-2.09V8zm10 2V3l-2.64 2.64A9 9 0 1 0 21 12h-2a7 7 0 1 1-2.05-4.95L14 10h7z"/>
</svg>
</a>
<div class="manage-backups tt-w" i18n-data-title="backupImport">
<svg class="svg-icon" viewBox="0 0 24 24">
<path d="M20.54 5.23l-1.39-1.68A1.45 1.45 0 0 0 18 3H6c-.47 0-.88.21-1.16.55L3.46 5.23C3.17 5.57 3 6.02 3 6.5V19c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2V6.5c0-.48-.17-.93-.46-1.27zM6.24 5h11.52l.81.97H5.44l.8-.97zM5 19V8h14v11H5zm8.45-9h-2.9v3H8l4 4 4-4h-2.55z"/>
</svg>
<div class="dropdown">
<a href="#" id="unfile-all-styles" i18n-text="bckpInstStyles"></a>
<a href="#" id="sync-dropbox-import" i18n-text="syncDropboxStyles"></a>
</div>
</div>
<div class="manage-backups tt-w" i18n-data-title="exportAllLabel">
<svg class="svg-icon" viewBox="0 0 24 24">
<path d="M20.5 5.2l-1.4-1.6C19 3.2 18.5 3 18 3H6c-.5 0-.9.2-1.2.6L3.5 5.2A2 2 0 0 0 3 6.5V19c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2V6.5c0-.5-.2-1-.5-1.3zM6.2 5h11.6l.8 1H5.4l.8-1zM5 19V8h14v11H5zm3-5h2.5v3h3v-3H16l-4-4z"/>
</svg>
<div class="dropdown">
<a href="#" id="file-all-styles" i18n-text="bckpInstStyles"></a>
<a href="#" id="sync-dropbox-export" i18n-text="syncDropboxStyles"></a>
</div>
</div>
<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">

8
manage/bulk-actions.js
View File

@ -11,6 +11,14 @@ const bulk = {
$('#bulk-actions-apply').onclick = bulk.handleApply;
},
// Update all button in header
updateAll: () => {
const toggle = $('#toggle-all-filters');
toggle.checked = false; // ensure click will check all styles
toggle.click();
checkUpdateBulk();
},
checkApply: () => {
const checkedEntries = $$('.entry-filter-toggle').filter(entry => entry.checked);
if (checkedEntries.length > 0 && $('#bulk-actions-select').value !== '') {

6
manage/manage-actions.js
View File

@ -71,6 +71,12 @@ function initGlobalEvents() {
openURL({url: URLS.configureCommands});
};
$('#update-all').onclick = event => {
event.preventDefault();
handleEvent.toggleBulkActions({hidden: false});
bulk.updateAll();
}
$$('#header a[href^="http"]').forEach(a => (a.onclick = handleEvent.external));
document.addEventListener('visibilitychange', onVisibilityChange);

20
manage/manage.css
View File

@ -9,6 +9,7 @@
--header-bg-color: #333;
--header-text-color: #ddd;
--header-text-hover-color: hsla(180, 100%, 20%, 1);
--header-icon-color: #888;
--header-icon-hover-color: hsla(180, 99%, 58%, 1);
@ -152,7 +153,7 @@ a:hover {
#main-header a:hover,
#main-actions a:hover svg,
#manage-backups:hover svg {
.manage-backups:hover svg {
color: var(--header-icon-hover-color);
fill: var(--header-icon-hover-color);
}
@ -795,11 +796,11 @@ details.applies-to-extra[open] {
}
/* export/import buttons */
#manage-backups {
.manage-backups {
position: relative;
}
#manage-backups .dropdown {
.manage-backups .dropdown {
display: none;
position: absolute;
background-color: #f9f9f9;
@ -808,7 +809,7 @@ details.applies-to-extra[open] {
z-index: 101;
}
#manage-backups .dropdown a {
.manage-backups .dropdown a {
color: black;
padding: 8px;
font-size: 12px;
@ -816,12 +817,13 @@ details.applies-to-extra[open] {
display: block;
}
#manage-backups .dropdown a:hover {
#main-header .manage-backups .dropdown a:hover {
/* background-color: #f2f2f2 */
background-color: #e9e9e9
background-color: #e9e9e9;
color: var(--header-text-hover-color);
}
#manage-backups:hover .dropdown {
.manage-backups:hover .dropdown {
display: block;
right: -20px;
top: 99%;
@ -899,11 +901,11 @@ details.applies-to-extra[open] {
width: 100%;
height: auto;
}
#manage-backups {
.manage-backups {
display: inline-block;
vertical-align: center;
}
#manage-backups:hover .dropdown {
.manage-backups:hover .dropdown {
display: block;
left: -20px;
right: auto;