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

polish popup/manage/edit css/svg/etc.

Browse Source 
* 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 2017-04-01 07:37:25 +03:00
parent 67e606c3d5
commit 1cf904b135
7 changed files with 159 additions and 137 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
edit.html
View File

@ -89,7 +89,6 @@
} }
#url { #url {
margin-left: 0.25rem; margin-left: 0.25rem;
color: inherit;
} }
#url:not([href^="http"]) { #url:not([href^="http"]) {
display: none; display: none;
@ -97,10 +96,9 @@
.svg-icon { .svg-icon {
cursor: pointer; cursor: pointer;
vertical-align: middle; vertical-align: middle;
transition: opacity .5s; transition: fill .5s;
width: 16px; width: 16px;
height: 16px; height: 16px;
fill: currentColor;
} }
.svg-icon:not(.applies-to-help):not(.dismiss) { .svg-icon:not(.applies-to-help):not(.dismiss) {
margin-left: 0.2rem; margin-left: 0.2rem;
@ -108,13 +106,17 @@
h2 .svg-icon, label .svg-icon { h2 .svg-icon, label .svg-icon {
margin-top: -2px; margin-top: -2px;
} }
.svg-icon.info {
width: 14px;
height: 16px;
}
.svg-icon:hover, .svg-icon:hover,
.svg-icon.info { .svg-icon.info {
opacity: .6; fill: #666;
} }
.svg-icon, .svg-icon,
.svg-icon.info:hover { .svg-icon.info:hover {
opacity: 1; fill: #000;
} }
#enabled { #enabled {
margin-left: 0; margin-left: 0;
@ -638,6 +640,9 @@
<template data-id="jumpToLine"> <template data-id="jumpToLine">
<span i18n-text="editGotoLine">: <input class="CodeMirror-jump-field" type="text"></span> <span i18n-text="editGotoLine">: <input class="CodeMirror-jump-field" type="text"></span>
</template> </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="storage.js"></script>
<script src="messaging.js"></script> <script src="messaging.js"></script>

6
edit.js
View File

@ -1689,11 +1689,7 @@ function showRegExpTester(event, section = getSectionForChild(this)) {
rxData.urls = urlsNow; rxData.urls = urlsNow;
} }
} }
const moreInfoLink = '<a target="_blank" ' + const moreInfoLink = template.regexpTestPartial.outerHTML;
'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 stats = { const stats = {
full: {data: [], label: t('styleRegexpTestFull')}, full: {data: [], label: t('styleRegexpTestFull')},
partial: {data: [], label: t('styleRegexpTestPartial') + moreInfoLink}, partial: {data: [], label: t('styleRegexpTestPartial') + moreInfoLink},

41
manage.css
View File

@ -3,20 +3,14 @@ body {
font: 12px arial, sans-serif; font: 12px arial, sans-serif;
} }
a, a {
a:visited { color: #000;
color: inherit; transition: color .5s;
opacity: .75; text-decoration-skip: ink;
-webkit-transition: opacity 0.5s;
} }
a:hover, a:hover {
a.homepage:hover { color: #666;
opacity: .6;
}
a.homepage {
opacity: 1;
} }
#header { #header {
@ -53,13 +47,20 @@ a.homepage {
.svg-icon { .svg-icon {
cursor: pointer; cursor: pointer;
vertical-align: middle; vertical-align: middle;
margin-left: 0.3rem;
margin-right: 0.3rem;
margin-top: -4px; margin-top: -4px;
transition: opacity .5s; transition: fill .5s;
width: 16px; width: 16px;
height: 16px; height: 16px;
fill: currentColor; fill: #000;
}
.svg-icon:hover {
fill: #666;
}
.homepage {
margin-left: 0.1em;
margin-right: 0.1em;
} }
.style-name { .style-name {
@ -69,12 +70,11 @@ a.homepage {
.style-name a, .style-edit-link { .style-name a, .style-edit-link {
text-decoration: none; text-decoration: none;
color: inherit;
} }
.style-name-link:hover { .style-name-link:hover {
text-decoration: underline; text-decoration: underline;
color: black; color: #000;
} }
.applies-to { .applies-to {
@ -181,11 +181,6 @@ summary {
animation: highlight 10s cubic-bezier(0,.82,.47,.98); animation: highlight 10s cubic-bezier(0,.82,.47,.98);
} }
#find-editor-styles {
display: block;
margin-top: .5em;
}
@keyframes highlight { @keyframes highlight {
from { from {
background-color: rgba(128, 128, 128, .5); background-color: rgba(128, 128, 128, .5);

14
manage.html
View File

@ -25,9 +25,7 @@
</template> </template>
<template data-id="styleHomepage"> <template data-id="styleHomepage">
<a target="_blank" class="homepage"> <a target="_blank" class="homepage"><svg class="svg-icon"><use xlink:href="#svg-icon-external-link"/></svg></a>
<svg class="svg-icon"><use xlink:href="#svg-icon-external-link"/></svg>
</a>
</template> </template>
<template data-id="appliesToTarget"> <template data-id="appliesToTarget">
@ -87,10 +85,14 @@
</p> </p>
<div id="options"> <div id="options">
<h2 id="options-heading" i18n-text="optionsHeading"></h2> <h2 id="options-heading" i18n-text="optionsHeading"></h2>
<button id="manage-options-button" i18n-text="openOptionsManage"></button> <p>
<button id="manage-shortcuts-button" i18n-text="openOptionsShortcuts"></button> <button id="manage-options-button" i18n-text="openOptionsManage"></button>
<a id="find-editor-styles" i18n-text="editorStylesButton" <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> href="https://userstyles.org/styles/browse/chrome-extension" target="_blank"></a>
<p>
</div> </div>
<div id="backup"> <div id="backup">
<h2 id="backup-title" i18n-text="backupButtons"></h2> <h2 id="backup-title" i18n-text="backupButtons"></h2>

26
popup.css
View File

@ -36,12 +36,16 @@ input[type=checkbox] {
display: block; display: block;
} }
a, a {
a:visited { color: #000;
color: black; transition: color .5s;
text-decoration-skip: ink; text-decoration-skip: ink;
} }
a:hover {
color: #666;
}
.left-gutter { .left-gutter {
display: table-cell; display: table-cell;
width: 16px; width: 16px;
@ -195,9 +199,13 @@ body.blocked > DIV {
.svg-icon { .svg-icon {
pointer-events: none; pointer-events: none;
transition: fill .5s; transition: fill .5s;
width: 14px;
height: 16px;
fill: #666;
} }
a:hover .svg-icon { a:hover .svg-icon {
fill: #000000; fill: #000;
} }
body > .actions { body > .actions {
@ -245,6 +253,12 @@ body.blocked #unavailable {
/* 'New style' links */ /* 'New style' links */
#write-style {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
#write-style-for { #write-style-for {
margin-right: .6ex margin-right: .6ex
} }
@ -264,7 +278,9 @@ body.blocked #unavailable {
#match { #match {
overflow-wrap: break-word; overflow-wrap: break-word;
display: inline-block; display: block;
flex-grow: 9;
min-width: 200px;
} }
/* "breadcrumbs" 'new style' links */ /* "breadcrumbs" 'new style' links */

188
popup.html
View File

@ -1,108 +1,114 @@
<html id="stylus"> <html id="stylus">
<head> <head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link rel="stylesheet" href="popup.css"> <link rel="stylesheet" href="popup.css">
<template data-id="style"> <template data-id="style">
<div class="entry"> <div class="entry">
<div class="left-gutter"> <div class="left-gutter">
<input class="checker" type="checkbox"> <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>
</div> </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="localization.js"></script>
<script src="health.js"></script> <script src="health.js"></script>
<script src="storage.js"></script> <script src="storage.js"></script>
<script src="messaging.js"></script> <script src="messaging.js"></script>
<script src="apply.js"></script> <script src="apply.js"></script>
<script src="dom.js"></script> <script src="dom.js"></script>
<script src="popup.js"></script>
<script src="popup.js"></script>
</head> </head>
<body id="stylus-popup"> <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 id="confirm">
<div class="main-controls"> <div>
<span id="unavailable-message" i18n-text="stylishUnavailableForURL"></span> <b>Style's Name</b>
</div> <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>
<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 --> <!-- Actions -->
<div id="popup-options"> <div id="popup-options">
<button id="popup-manage-button" i18n-text="openManage"></button> <button id="popup-manage-button" i18n-text="openManage"></button>
<button id="popup-options-button" i18n-text="openOptionsPopup"></button> <button id="popup-options-button" i18n-text="openOptionsPopup"></button>
<button id="popup-shortcuts-button" i18n-text="openShortcutsPopup"></button> <button id="popup-shortcuts-button" i18n-text="openShortcutsPopup"></button>
</div> </div>
</div> </div>
</body>
<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> </html>

6
popup.js
View File

@ -78,7 +78,9 @@ function initPopup(url) {
// Write new style links // Write new style links
const writeStyle = $('#write-style'); const writeStyle = $('#write-style');
const matchTargets = document.createElement('span'); const matchTargets = document.createElement('span');
matchTargets.id = 'match'; const matchWrapper = document.createElement('span');
matchWrapper.id = 'match';
matchWrapper.appendChild(matchTargets);
// For this URL // For this URL
const urlLink = template.writeStyle.cloneNode(true); const urlLink = template.writeStyle.cloneNode(true);
@ -120,7 +122,7 @@ function initPopup(url) {
matchTargets.classList.add('breadcrumbs'); matchTargets.classList.add('breadcrumbs');
matchTargets.appendChild(matchTargets.removeChild(matchTargets.firstElementChild)); matchTargets.appendChild(matchTargets.removeChild(matchTargets.firstElementChild));
} }
writeStyle.appendChild(matchTargets); writeStyle.appendChild(matchWrapper);
} }