polish popup/manage/edit css/svg/etc.
* restore the correct width of svg icons * popup: use the standard formatting & SVG <symbol> * popup .breadcrumbs hover highlight * manage: black links, transitions; use <p> in #options; trim .homepage * edit: move regexp tester info link to a template
This commit is contained in:
tophf
parent
67e606c3d5
commit
1cf904b135
15
edit.html
15
edit.html
|
|
@ -89,7 +89,6 @@
|
|||
}
|
||||
#url {
|
||||
margin-left: 0.25rem;
|
||||
color: inherit;
|
||||
}
|
||||
#url:not([href^="http"]) {
|
||||
display: none;
|
||||
|
|
@ -97,10 +96,9 @@
|
|||
.svg-icon {
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
transition: opacity .5s;
|
||||
transition: fill .5s;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
fill: currentColor;
|
||||
}
|
||||
.svg-icon:not(.applies-to-help):not(.dismiss) {
|
||||
margin-left: 0.2rem;
|
||||
|
|
@ -108,13 +106,17 @@
|
|||
h2 .svg-icon, label .svg-icon {
|
||||
margin-top: -2px;
|
||||
}
|
||||
.svg-icon.info {
|
||||
width: 14px;
|
||||
height: 16px;
|
||||
}
|
||||
.svg-icon:hover,
|
||||
.svg-icon.info {
|
||||
opacity: .6;
|
||||
fill: #666;
|
||||
}
|
||||
.svg-icon,
|
||||
.svg-icon.info:hover {
|
||||
opacity: 1;
|
||||
fill: #000;
|
||||
}
|
||||
#enabled {
|
||||
margin-left: 0;
|
||||
|
|
@ -638,6 +640,9 @@
|
|||
<template data-id="jumpToLine">
|
||||
<span i18n-text="editGotoLine">: <input class="CodeMirror-jump-field" type="text"></span>
|
||||
</template>
|
||||
<template data-id="regexpTestPartial">
|
||||
<a target="_blank" href="https://github.com/stylish-userstyles/stylish/wiki/Applying-styles-to-specific-sites#advanced-matching-with-regular-expressions"><svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg></a>
|
||||
</template>
|
||||
|
||||
<script src="storage.js"></script>
|
||||
<script src="messaging.js"></script>
|
||||
|
|
|
|||
6
edit.js
6
edit.js
|
|
@ -1689,11 +1689,7 @@ function showRegExpTester(event, section = getSectionForChild(this)) {
|
|||
rxData.urls = urlsNow;
|
||||
}
|
||||
}
|
||||
const moreInfoLink = '<a target="_blank" ' +
|
||||
'href="https://github.com/stylish-userstyles/' +
|
||||
'stylish/wiki/Applying-styles-to-specific-sites' +
|
||||
'#advanced-matching-with-regular-expressions">' +
|
||||
'<img src="/images/help.png"></a>';
|
||||
const moreInfoLink = template.regexpTestPartial.outerHTML;
|
||||
const stats = {
|
||||
full: {data: [], label: t('styleRegexpTestFull')},
|
||||
partial: {data: [], label: t('styleRegexpTestPartial') + moreInfoLink},
|
||||
|
|
|
|||
41
manage.css
41
manage.css
|
|
@ -3,20 +3,14 @@ body {
|
|||
font: 12px arial, sans-serif;
|
||||
}
|
||||
|
||||
a,
|
||||
a:visited {
|
||||
color: inherit;
|
||||
opacity: .75;
|
||||
-webkit-transition: opacity 0.5s;
|
||||
a {
|
||||
color: #000;
|
||||
transition: color .5s;
|
||||
text-decoration-skip: ink;
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a.homepage:hover {
|
||||
opacity: .6;
|
||||
}
|
||||
|
||||
a.homepage {
|
||||
opacity: 1;
|
||||
a:hover {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
#header {
|
||||
|
|
@ -53,13 +47,20 @@ a.homepage {
|
|||
.svg-icon {
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
margin-left: 0.3rem;
|
||||
margin-right: 0.3rem;
|
||||
margin-top: -4px;
|
||||
transition: opacity .5s;
|
||||
transition: fill .5s;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
fill: currentColor;
|
||||
fill: #000;
|
||||
}
|
||||
|
||||
.svg-icon:hover {
|
||||
fill: #666;
|
||||
}
|
||||
|
||||
.homepage {
|
||||
margin-left: 0.1em;
|
||||
margin-right: 0.1em;
|
||||
}
|
||||
|
||||
.style-name {
|
||||
|
|
@ -69,12 +70,11 @@ a.homepage {
|
|||
|
||||
.style-name a, .style-edit-link {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.style-name-link:hover {
|
||||
text-decoration: underline;
|
||||
color: black;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.applies-to {
|
||||
|
|
@ -181,11 +181,6 @@ summary {
|
|||
animation: highlight 10s cubic-bezier(0,.82,.47,.98);
|
||||
}
|
||||
|
||||
#find-editor-styles {
|
||||
display: block;
|
||||
margin-top: .5em;
|
||||
}
|
||||
|
||||
@keyframes highlight {
|
||||
from {
|
||||
background-color: rgba(128, 128, 128, .5);
|
||||
|
|
|
|||
14
manage.html
14
manage.html
|
|
@ -25,9 +25,7 @@
|
|||
</template>
|
||||
|
||||
<template data-id="styleHomepage">
|
||||
<a target="_blank" class="homepage">
|
||||
<svg class="svg-icon"><use xlink:href="#svg-icon-external-link"/></svg>
|
||||
</a>
|
||||
<a target="_blank" class="homepage"><svg class="svg-icon"><use xlink:href="#svg-icon-external-link"/></svg></a>
|
||||
</template>
|
||||
|
||||
<template data-id="appliesToTarget">
|
||||
|
|
@ -87,10 +85,14 @@
|
|||
</p>
|
||||
<div id="options">
|
||||
<h2 id="options-heading" i18n-text="optionsHeading"></h2>
|
||||
<button id="manage-options-button" i18n-text="openOptionsManage"></button>
|
||||
<button id="manage-shortcuts-button" i18n-text="openOptionsShortcuts"></button>
|
||||
<a id="find-editor-styles" i18n-text="editorStylesButton"
|
||||
<p>
|
||||
<button id="manage-options-button" i18n-text="openOptionsManage"></button>
|
||||
<button id="manage-shortcuts-button" i18n-text="openOptionsShortcuts"></button>
|
||||
</p>
|
||||
<p>
|
||||
<a id="find-editor-styles" i18n-text="editorStylesButton"
|
||||
href="https://userstyles.org/styles/browse/chrome-extension" target="_blank"></a>
|
||||
<p>
|
||||
</div>
|
||||
<div id="backup">
|
||||
<h2 id="backup-title" i18n-text="backupButtons"></h2>
|
||||
|
|
|
|||
26
popup.css
26
popup.css
|
|
@ -36,12 +36,16 @@ input[type=checkbox] {
|
|||
display: block;
|
||||
}
|
||||
|
||||
a,
|
||||
a:visited {
|
||||
color: black;
|
||||
a {
|
||||
color: #000;
|
||||
transition: color .5s;
|
||||
text-decoration-skip: ink;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.left-gutter {
|
||||
display: table-cell;
|
||||
width: 16px;
|
||||
|
|
@ -195,9 +199,13 @@ body.blocked > DIV {
|
|||
.svg-icon {
|
||||
pointer-events: none;
|
||||
transition: fill .5s;
|
||||
width: 14px;
|
||||
height: 16px;
|
||||
fill: #666;
|
||||
}
|
||||
|
||||
a:hover .svg-icon {
|
||||
fill: #000000;
|
||||
fill: #000;
|
||||
}
|
||||
|
||||
body > .actions {
|
||||
|
|
@ -245,6 +253,12 @@ body.blocked #unavailable {
|
|||
|
||||
/* 'New style' links */
|
||||
|
||||
#write-style {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
#write-style-for {
|
||||
margin-right: .6ex
|
||||
}
|
||||
|
|
@ -264,7 +278,9 @@ body.blocked #unavailable {
|
|||
|
||||
#match {
|
||||
overflow-wrap: break-word;
|
||||
display: inline-block;
|
||||
display: block;
|
||||
flex-grow: 9;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
/* "breadcrumbs" 'new style' links */
|
||||
|
|
|
|||
188
popup.html
188
popup.html
|
|
@ -1,108 +1,114 @@
|
|||
<html id="stylus">
|
||||
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
|
||||
<link rel="stylesheet" href="popup.css">
|
||||
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
|
||||
<link rel="stylesheet" href="popup.css">
|
||||
|
||||
<template data-id="style">
|
||||
<div class="entry">
|
||||
<div class="left-gutter">
|
||||
<input class="checker" type="checkbox">
|
||||
</div>
|
||||
<div class="main-controls">
|
||||
<label class="style-name"></label>
|
||||
<div class="actions">
|
||||
<a href="#" class="enable" i18n-text="enableStyleLabel"></a>
|
||||
<a href="#" class="disable" i18n-text="disableStyleLabel"></a>
|
||||
<a class="style-edit-link" href="edit.html?id=" i18n-title="editStyleLabel"> <!--`i18n-title` automatically creates `title` attribute -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-icon edit" fill="hsl(0, 0%, 40%)" height="16" width="14" viewBox="0 0 14 16">
|
||||
<path fill-rule="evenodd" d="M0 12v3h3l8-8-3-3-8 8zm3 2H1v-2h1v1h1v1zm10.3-9.3L12 6 9 3l1.3-1.3a.996.996 0 0 1 1.41 0l1.59 1.59c.39.39.39 1.02 0 1.41z"></path>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" class="delete" i18n-title="deleteStyleLabel">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-icon remove" fill="hsl(0, 0%, 40%)" height="16" width="14" viewBox="0 0 14 16">
|
||||
<path fill-rule="evenodd" d="M11 2H9c0-.55-.45-1-1-1H5c-.55 0-1 .45-1 1H2c-.55 0-1 .45-1 1v1c0 .55.45 1 1 1v9c0 .55.45 1 1 1h7c.55 0 1-.45 1-1V5c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm-1 12H3V5h1v8h1V5h1v8h1V5h1v8h1V5h1v9zm1-10H2V3h9v1z"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template data-id="writeStyle">
|
||||
<a class="write-style-link"></a>
|
||||
</template>
|
||||
|
||||
<template data-id="noStyles">
|
||||
<div id="no-styles" class="entry" i18n-text="noStylesForSite"></div>
|
||||
</template>
|
||||
|
||||
<template data-id="regexpProblemIndicator">
|
||||
<div class="regexp-problem-indicator" i18n-title="styleRegexpProblemTooltip"></div>
|
||||
</template>
|
||||
|
||||
<template data-id="regexpProblemExplanation">
|
||||
<div id="regexp-explanation">
|
||||
<div id="regexp-partial" i18n-html="styleRegexpPartialExplanation"></div>
|
||||
<div id="regexp-invalid" i18n-text="styleRegexpInvalidExplanation"></div>
|
||||
<button i18n-text="confirmOK"></button>
|
||||
<template data-id="style">
|
||||
<div class="entry">
|
||||
<div class="left-gutter">
|
||||
<input class="checker" type="checkbox">
|
||||
</div>
|
||||
</template>
|
||||
<div class="main-controls">
|
||||
<label class="style-name"></label>
|
||||
<div class="actions">
|
||||
<a href="#" class="enable" i18n-text="enableStyleLabel"></a>
|
||||
<a href="#" class="disable" i18n-text="disableStyleLabel"></a>
|
||||
<a class="style-edit-link" href="edit.html?id=" i18n-title="editStyleLabel">
|
||||
<!--`i18n-title` automatically creates `title` attribute -->
|
||||
<svg class="svg-icon edit"><use xlink:href="#svg-icon-edit"/></svg>
|
||||
</a>
|
||||
<a href="#" class="delete" i18n-title="deleteStyleLabel">
|
||||
<svg class="svg-icon remove"><use xlink:href="#svg-icon-remove"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template data-id="writeStyle">
|
||||
<a class="write-style-link"></a>
|
||||
</template>
|
||||
|
||||
<template data-id="noStyles">
|
||||
<div id="no-styles" class="entry" i18n-text="noStylesForSite"></div>
|
||||
</template>
|
||||
|
||||
<template data-id="regexpProblemIndicator">
|
||||
<div class="regexp-problem-indicator" i18n-title="styleRegexpProblemTooltip"></div>
|
||||
</template>
|
||||
|
||||
<template data-id="regexpProblemExplanation">
|
||||
<div id="regexp-explanation">
|
||||
<div id="regexp-partial" i18n-html="styleRegexpPartialExplanation"></div>
|
||||
<div id="regexp-invalid" i18n-text="styleRegexpInvalidExplanation"></div>
|
||||
<button i18n-text="confirmOK"></button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script src="localization.js"></script>
|
||||
<script src="health.js"></script>
|
||||
<script src="storage.js"></script>
|
||||
<script src="messaging.js"></script>
|
||||
<script src="apply.js"></script>
|
||||
<script src="dom.js"></script>
|
||||
|
||||
<script src="popup.js"></script>
|
||||
<script src="health.js"></script>
|
||||
<script src="storage.js"></script>
|
||||
<script src="messaging.js"></script>
|
||||
<script src="apply.js"></script>
|
||||
<script src="dom.js"></script>
|
||||
<script src="popup.js"></script>
|
||||
</head>
|
||||
|
||||
<body id="stylus-popup">
|
||||
<!-- confirm -->
|
||||
<div id="confirm">
|
||||
<div>
|
||||
<b>Style's Name</b>
|
||||
<span i18n-text="deleteStyleConfirm"></span>
|
||||
<div>
|
||||
<button i18n-text="confirmDelete" data-cmd="ok"></button>
|
||||
<button i18n-text="confirmCancel" data-cmd="cancel"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="unavailable">
|
||||
<div class="main-controls">
|
||||
<span id="unavailable-message" i18n-text="stylishUnavailableForURL"></span>
|
||||
</div>
|
||||
<div id="confirm">
|
||||
<div>
|
||||
<b>Style's Name</b>
|
||||
<span i18n-text="deleteStyleConfirm"></span>
|
||||
<div>
|
||||
<button i18n-text="confirmDelete" data-cmd="ok"></button>
|
||||
<button i18n-text="confirmCancel" data-cmd="cancel"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="unavailable">
|
||||
<div class="main-controls">
|
||||
<span id="unavailable-message" i18n-text="stylishUnavailableForURL"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="installed"></div>
|
||||
|
||||
<div class="actions">
|
||||
<div id="disable-all-wrapper">
|
||||
<div class="left-gutter">
|
||||
<input id="disableAll" type="checkbox">
|
||||
</div>
|
||||
<div class="main-controls">
|
||||
<label id="disableAll-label" for="disableAll" i18n-text="disableAllStyles"></label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="left-gutter"></div>
|
||||
<div class="main-controls">
|
||||
<div id="find-styles">
|
||||
<a id="find-styles-link" href="#" i18n-text="findStylesForSite"></a>
|
||||
</div>
|
||||
<div id="write-style">
|
||||
<span id="write-style-for" i18n-text="writeStyleFor"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="installed"></div>
|
||||
<div class="actions">
|
||||
<div id="disable-all-wrapper">
|
||||
<div class="left-gutter">
|
||||
<input id="disableAll" type="checkbox">
|
||||
</div>
|
||||
<div class="main-controls">
|
||||
<label id="disableAll-label" for="disableAll" i18n-text="disableAllStyles"></label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="left-gutter"></div>
|
||||
<div class="main-controls">
|
||||
<div id="find-styles">
|
||||
<a id="find-styles-link" href="#" i18n-text="findStylesForSite"></a>
|
||||
</div>
|
||||
<div id="write-style">
|
||||
<span id="write-style-for" i18n-text="writeStyleFor"></span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Actions -->
|
||||
<div id="popup-options">
|
||||
<button id="popup-manage-button" i18n-text="openManage"></button>
|
||||
<button id="popup-options-button" i18n-text="openOptionsPopup"></button>
|
||||
<button id="popup-shortcuts-button" i18n-text="openShortcutsPopup"></button>
|
||||
<button id="popup-manage-button" i18n-text="openManage"></button>
|
||||
<button id="popup-options-button" i18n-text="openOptionsPopup"></button>
|
||||
<button id="popup-shortcuts-button" i18n-text="openShortcutsPopup"></button>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</div>
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="display: none">
|
||||
<symbol id="svg-icon-edit" width="14" height="16" viewBox="0 0 14 16">
|
||||
<path fill-rule="evenodd" d="M0 12v3h3l8-8-3-3-8 8zm3 2H1v-2h1v1h1v1zm10.3-9.3L12 6 9 3l1.3-1.3a.996.996 0 0 1 1.41 0l1.59 1.59c.39.39.39 1.02 0 1.41z"></path>
|
||||
</symbol>
|
||||
<symbol id="svg-icon-remove" width="14" height="16" viewBox="0 0 14 16">
|
||||
<path fill-rule="evenodd" d="M11 2H9c0-.55-.45-1-1-1H5c-.55 0-1 .45-1 1H2c-.55 0-1 .45-1 1v1c0 .55.45 1 1 1v9c0 .55.45 1 1 1h7c.55 0 1-.45 1-1V5c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm-1 12H3V5h1v8h1V5h1v8h1V5h1v8h1V5h1v9zm1-10H2V3h9v1z"></path>
|
||||
</symbol>
|
||||
</svg>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
6
popup.js
6
popup.js
|
|
@ -78,7 +78,9 @@ function initPopup(url) {
|
|||
// Write new style links
|
||||
const writeStyle = $('#write-style');
|
||||
const matchTargets = document.createElement('span');
|
||||
matchTargets.id = 'match';
|
||||
const matchWrapper = document.createElement('span');
|
||||
matchWrapper.id = 'match';
|
||||
matchWrapper.appendChild(matchTargets);
|
||||
|
||||
// For this URL
|
||||
const urlLink = template.writeStyle.cloneNode(true);
|
||||
|
|
@ -120,7 +122,7 @@ function initPopup(url) {
|
|||
matchTargets.classList.add('breadcrumbs');
|
||||
matchTargets.appendChild(matchTargets.removeChild(matchTargets.firstElementChild));
|
||||
}
|
||||
writeStyle.appendChild(matchTargets);
|
||||
writeStyle.appendChild(matchWrapper);
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user