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

show post-install buttons

Browse Source
This commit is contained in:
tophf 2021-08-24 14:01:48 +03:00
parent 4ce2ab232d
commit f4b8435904
3 changed files with 35 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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 {

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

@ -1,6 +1,6 @@
/* global $ $create $createLink $$remove showSpinner */// dom.js /* global $ $create $createLink $$remove showSpinner */// dom.js
/* global API */// msg.js /* global API */// msg.js
/* global deepEqual */// toolbox.js /* global closeCurrentTab deepEqual */// toolbox.js
/* global messageBox */ /* global messageBox */
/* global prefs */ /* global prefs */
/* global preinit */ /* global preinit */
@ -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,10 +299,28 @@ 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);
} }
function enablePostActions() {
const {id} = installed || installedDup;
sessionStorage.justEditedStyleId = id;
$('h2.installed').hidden = !installed;
$('.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) {
history.back();
} else {
closeCurrentTab();
}
}
};
}
async function getAppliesTo(style) { async function getAppliesTo(style) {
if (style.sectionsPromise) { if (style.sectionsPromise) {
try { try {