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

installer: show action buttons for installed styles (#1322)

Browse Source
This commit is contained in:
tophf 2021-08-26 22:10:08 +03:00 committed by GitHub
parent abced603b4
commit 2c31dc2af8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 28 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
_locales/en/messages.json
View File

@ -585,7 +585,7 @@
"description": "Label for install button" "description": "Label for install button"
}, },
"installButtonInstalled": { "installButtonInstalled": {
"message": "Style installed", "message": "Style is installed",
"description": "Text displayed when the style is successfully installed" "description": "Text displayed when the style is successfully installed"
}, },
"installButtonReinstall": { "installButtonReinstall": {

7
install-usercss.html
View File

@ -33,7 +33,7 @@
<small class="meta-version"></small> <small class="meta-version"></small>
</h1> </h1>
<div class="actions"> <div class="actions">
<h2 class="installed" i18n-text="installButtonInstalled"></h2> <h2 hidden class="installed" i18n-text="installButtonInstalled"></h2>
<button class="install" i18n-text="installButton"></button> <button class="install" i18n-text="installButton"></button>
<a class="configure-usercss" i18n-title="configureStyle" tabindex="0"> <a class="configure-usercss" i18n-title="configureStyle" tabindex="0">
<svg class="svg-icon config"><use xlink:href="#svg-icon-config"></use></svg> <svg class="svg-icon config"><use xlink:href="#svg-icon-config"></use></svg>
@ -50,6 +50,11 @@
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg> <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
<span i18n-text="liveReloadLabel"></span> <span i18n-text="liveReloadLabel"></span>
</label> </label>
<p hidden class="installed-actions">
<a href="manage.html" tabindex="0"><button i18n-text="openManage"></button></a>
<a href="edit.html?id=" tabindex="0"><button i18n-text="editStyleLabel"></button></a>
<a id="delete" tabindex="0"><button i18n-text="deleteStyleLabel"></button></a>
</p>
</div> </div>
<p class="meta-description"></p> <p class="meta-description"></p>
<div> <div>

11
install-usercss/install-usercss.css
View File

@ -213,16 +213,21 @@ h1 small {
filter: hue-rotate(-18deg) brightness(.7) contrast(2); filter: hue-rotate(-18deg) brightness(.7) contrast(2);
} }
.install.installed, .install.installed {
h2.installed {
display: none; display: none;
} }
h2.installed.active { h2.installed.active {
display: inline-block; display: inline-block;
font-weight: bold; font-weight: bold;
margin-bottom: 1ex;
margin-top: 0; margin-top: 0;
color: darkcyan;
}
h2.installed.active ~ .configure-usercss svg {
fill: hsl(180, 100%, 20%);
}
h2.installed.active ~ .configure-usercss:hover svg {
fill: hsl(180, 100%, 30%);
} }
.actions label input { .actions label input {

20
install-usercss/install-usercss.js
View File

@ -208,6 +208,7 @@ function updateMeta(style, dup = installedDup) {
setTimeout(() => $$remove('.lds-spinner'), 1000); setTimeout(() => $$remove('.lds-spinner'), 1000);
showError(''); showError('');
requestAnimationFrame(adjustCodeHeight); requestAnimationFrame(adjustCodeHeight);
if (dup) enablePostActions();
function makeAuthor(text) { function makeAuthor(text) {
const match = text.match(/^(.+?)(?:\s+<(.+?)>)?(?:\s+\((.+?)\))?$/); const match = text.match(/^(.+?)(?:\s+<(.+?)>)?(?:\s+\((.+?)\))?$/);
@ -298,21 +299,26 @@ function install(style) {
$('.set-update-url input[type=checkbox]').disabled = true; $('.set-update-url input[type=checkbox]').disabled = true;
$('.set-update-url').title = style.updateUrl ? $('.set-update-url').title = style.updateUrl ?
t('installUpdateFrom', style.updateUrl) : ''; t('installUpdateFrom', style.updateUrl) : '';
enablePostActions();
updateMeta(style); updateMeta(style);
}
if (!liveReload.enabled && !prefs.get('openEditInWindow')) { function enablePostActions() {
location.href = '/edit.html?id=' + style.id; const {id} = installed || installedDup;
} else { sessionStorage.justEditedStyleId = id;
API.openEditor({id: style.id}); $('h2.installed').hidden = !installed;
if (!liveReload.enabled) { $('.installed-actions').hidden = false;
$('.installed-actions a[href*="edit.html"]').search = `?id=${id}`;
$('#delete').onclick = async () => {
if (await messageBox.confirm(t('deleteStyleConfirm'), 'danger center', t('confirmDelete'))) {
await API.styles.delete(id);
if (tabId < 0 && history.length > 1) { if (tabId < 0 && history.length > 1) {
history.back(); history.back();
} else { } else {
closeCurrentTab(); closeCurrentTab();
} }
} }
} };
} }
async function getAppliesTo(style) { async function getAppliesTo(style) {