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

Fix bulk import

Browse Source
This commit is contained in:
Rob Garrison 2018-12-18 19:14:52 -06:00
parent 198315c626
commit 30a69f5bea
5 changed files with 61 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
_locales/en/messages.json
View File

@ -84,6 +84,10 @@
"message": "Backup",
"description": "Heading for backup"
},
"backupImport": {
"message": "Import backup",
"description": "Tooltip for header import/restore backup icon"
},
"backupMessage": {
"message": "Select a file or drag and drop to this page.",
"description": "Message for backup"

50
manage.html
View File

@ -150,7 +150,7 @@
</template>
<template data-id="appliesToEverything">
<span class="target" i18n-data-title="appliesToEverything">
<span class="target tt-w" i18n-data-title="appliesToEverything">
<svg class="svg-icon world" viewBox="0 0 24 24">
<path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zM4 12c0-.61.08-1.21.21-1.78L8.99 15v1c0
1.1.9 2 2 2v1.93A8.01 8.01 0 0 1 4 12zm13.89 5.4a2 2 0 0 0-1.9-1.4h-1v-3a1 1 0 0
@ -165,6 +165,21 @@
</details>
</template>
<template data-id="export">
<span i18n-text="backupMessage"></span>
<div class="dropdown">
<button class="dropbtn">
<span>Import</span>
<svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
</button>
<div class="dropdown-content">
<a href="#" class="unfile-all-styles" i18n-text="retrieveBckp"></a>
<a href="#" class="sync-dropbox-import" i18n-text="retrieveDropboxSync"></a>
</div>
</div>
</template>
<script src="js/polyfill.js"></script>
<script src="js/promisify.js"></script>
<script src="js/dom.js"></script>
@ -233,10 +248,18 @@
</svg>
</a>
<span class="spacer"></span>
<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-backups-button" 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>
</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
@ -407,6 +430,19 @@
<svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
</span>
<button id="bulk-actions-apply" i18n-text="bulkActionsApply"></button>
<div class="dropdown export hidden">
<button class="dropbtn">
<span>Export</span>
<svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
</button>
<div class="dropdown-content">
<a href="#" id="file-all-styles" i18n-text="bckpInstStyles"></a>
<a href="#" id="sync-dropbox-export" i18n-text="syncDropboxStyles"></a>
</div>
</div>
<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
@ -469,9 +505,7 @@
<button id="apply-all-updates"></button>
<button id="check-all-updates"></button>
<button id="check-all-updates-force"></button>
<button id="file-all-styles"></button>
<button id="unfile-all-styles"></button>
<button id="sorter-help"></button>
</div>
<!-- Applies to config, can't put this in a template because these inputs are bound to subscribed prefs -->
@ -508,16 +542,6 @@
<!-- <div id="manage-settings">
<div class="settings-column">
<div id="sort-wrapper">
<div class="sorter-selection" i18n-title="sortLabel">
<select id="manage.newUI.sort"></select>
<svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
</div>
<a href="#" id="sorter-help" tabindex="0">
<svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
</a>
</div>
<div id="style-actions">
<div id="update-check">
<button id="check-all-updates" i18n-text="checkAllUpdates"><span id="update-progress"></span></button>

28
manage/manage-actions.js
View File

@ -298,37 +298,35 @@ Object.assign(handleEvent, {
dataset: {cmd: 'close'},
}],
onshow: box => {
box.addEventListener('change', handleEvent.toggleFavicons);
box.addEventListener('change', handleEvent.manageFavicons);
box.addEventListener('input', handleEvent.manageFavicons);
$$('input', box).forEach(el => {
el.dataset.id = el.id;
el.id = null;
});
}
}).then(() => {
$('#message-box').removeEventListener('change', handleEvent.toggleFavicons);
const box = $('#message-box')
box.removeEventListener('change', handleEvent.manageFavicons);
box.removeEventListener('input', handleEvent.manageFavicons);
});
},
toggleFavicons(event) {
manageFavicons(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;
},
});
@ -419,29 +417,19 @@ function switchUI({styleOnly} = {}) {
}
// 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 items = $$('.target', targets);
const extra = $('.applies-to-extra', targets);
const x = items.length === 54;
items.splice(0, UI.targets).every(el => {
items.splice(0, UI.targets).forEach(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) => {
items.some(el => {
if (!el.parentElement.classList.contains('applies-to-extra')) {
extra.prepend(el);
return false;

7
manage/manage.css
View File

@ -57,7 +57,7 @@ a:hover {
#main-actions {
display: flex;
width: 200px;
width: 260px;
height: 40px;
justify-content: space-between;
align-items: center;
@ -66,7 +66,7 @@ a:hover {
.spacer {
width: 10px;
height: 1em;
border-right: 1px solid #777;
border-right: 1px solid rgba(119, 119, 119, .5);
margin-right: 10px;
}
@ -296,6 +296,7 @@ a:hover {
}
#installed:not(.has-favicons) .targets img,
#installed.has-favicons .targets img:not([src]),
#installed.has-favicons .targets img[src] + svg {
display: none;
}
@ -624,7 +625,7 @@ details.applies-to-extra[open] {
}
.manage-row {
padding: 2px 10px;
padding: 2px 18px;
display: flex;
align-items: center;
justify-content: space-between;

9
manage/tooltips.css
View File

@ -23,10 +23,17 @@
text-shadow: none;
text-transform: none;
white-space: pre;
word-wrap: break-word;
word-break: break-all;
overflow-wrap: break-word;
max-width: 50vw;
z-index: 1000000;
}
.targets [data-title]:after {
white-space: pre-wrap;
min-width: 240px;
}
.entry-last-update[data-title]:after {
text-align: left;
}