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

export in compat mode on shift-click/right-click

Browse Source
This commit is contained in:
tophf 2021-12-25 17:43:52 +03:00
parent 3cdf526fa3
commit 440395db9f
4 changed files with 21 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
_locales/en/messages.json
View File

@ -93,8 +93,8 @@
"description": "Heading for backup" "description": "Heading for backup"
}, },
"backupMessage": { "backupMessage": {
"message": "Select a file or drag and drop to this page.", "message": "To import the backup file, drag'n'drop it into this page or click the Import button.\n\nTo export a compatible backup for Stylus older than 1.5.18, right-click or shift-click the Export button.",
"description": "Message for backup" "description": "Text for Backup section's (i) in the manager"
}, },
"bckpInstStyles": { "bckpInstStyles": {
"message": "Export styles" "message": "Export styles"

9
manage.html
View File

@ -320,8 +320,13 @@
<div class="settings-column"> <div class="settings-column">
<details id="backup" data-pref="manage.backup.expanded"> <details id="backup" data-pref="manage.backup.expanded">
<summary><h2 id="backup-title" i18n-text="backupButtons"></h2></summary> <summary>
<span id="backup-message" i18n-text="backupMessage"></span> <h2 id="backup-title" i18n-text="backupButtons">
<a tabindex="0" i18n-title="backupMessage" data-cmd="note">
<svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
</a>
</h2>
</summary>
<div id="backup-buttons"> <div id="backup-buttons">
<button id="file-all-styles" i18n-text="exportLabel"></button> <button id="file-all-styles" i18n-text="exportLabel"></button>
<button id="unfile-all-styles" i18n-text="importLabel"></button> <button id="unfile-all-styles" i18n-text="importLabel"></button>

11
manage/import-export.js
View File

@ -15,6 +15,7 @@
'use strict'; 'use strict';
$('#file-all-styles').onclick = exportToFile; $('#file-all-styles').onclick = exportToFile;
$('#file-all-styles').oncontextmenu = exportToFile;
$('#unfile-all-styles').onclick = () => importFromFile({fileTypeFilter: '.json'}); $('#unfile-all-styles').onclick = () => importFromFile({fileTypeFilter: '.json'});
Object.assign(document.body, { Object.assign(document.body, {
@ -333,8 +334,11 @@ async function importFromString(jsonString) {
} }
} }
async function exportToFile() { /** @param {MouseEvent} e */
async function exportToFile(e) {
e.preventDefault();
await require(['/js/storage-util']); await require(['/js/storage-util']);
const keepDupSections = e.type === 'contextmenu' || e.shiftKey;
const data = [ const data = [
Object.assign({ Object.assign({
[prefs.STORAGE_KEY]: prefs.values, [prefs.STORAGE_KEY]: prefs.values,
@ -353,8 +357,9 @@ async function exportToFile() {
const copy = {}; const copy = {};
for (let [key, val] of Object.entries(style)) { for (let [key, val] of Object.entries(style)) {
if (key === 'sections' if (key === 'sections'
// Keeping dummy `sections` for compatibility with older Stylus // Keeping dummy `sections` for compatibility with older Stylus
? !style.usercssData || (val = [{code: ''}]) // even in deduped backup so the user can resave/reconfigure the style to rebuild it.
? !style.usercssData || keepDupSections || (val = [{code: ''}])
: typeof val !== 'object' || !isEmptyObj(val)) { : typeof val !== 'object' || !isEmptyObj(val)) {
copy[key] = val; copy[key] = val;
} }

6
manage/manage.css
View File

@ -262,7 +262,6 @@ a:hover {
#backup-buttons { #backup-buttons {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin-top: .5rem;
} }
#backup-buttons button { #backup-buttons button {
@ -300,10 +299,13 @@ a:hover {
margin-top: .1em; margin-top: .1em;
margin-bottom: .1em; margin-bottom: .1em;
} }
#header summary:hover h2 { #header summary:hover h2 {
border-color: #bbb; border-color: #bbb;
} }
#header summary h2 [data-cmd="note"] {
display: flex;
align-items: center;
}
/* compact layout */ /* compact layout */