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

301 lines
9.0 KiB
HTML
Raw Normal View History

Unix line endings
2015-02-09 04:24:58 +00:00
<html>
Options UI discoverability and other fixes #34
2017-02-28 23:57:03 +00:00
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title i18n-text="manageTitle"></title>
<style>
body {
margin: 0;
font: 12px arial, sans-serif;
}
a,
a:visited {
color: #555;
-webkit-transition: color 0.5s;
}
a:hover {
color: #999;
}
#header {
height: 100%;
width: 250px;
position: fixed;
top: 0;
padding: 15px;
border-right: 1px dashed #AAA;
-webkit-box-shadow: 0 0 50px -18px black;
}
#header h1 {
margin-top: 0;
}
#installed {
position: relative;
margin-left: 280px;
}
[style-id] {
margin: 10px;
padding: 0 15px;
}
[style-id] {
border-top: 2px solid gray;
}
#installed::after {
content: "";
position: absolute;
top: 0;
width: 100%;
height: 2px;
background-color: #fff;
}
Switch info/external style link icons from img to svg Switched info to `i` and found a pretty nice external link icon imo. @tophf As for pixelation on the info icons, you mentioned maybe a lighter color would help. For all icons besides external links, I made them lighter with darker hovers. Besides a really high zoom, I never saw any issue to begin with, but let me know if they're alright. I also changed them to use their exact original dimensions, so maybe that helps.
2017-03-30 23:49:03 +00:00
.svg-icon.installed {
cursor: pointer;
vertical-align: middle;
margin-left: 0.3rem;
margin-top: -4px;
transition: fill .5s;
}
a:hover .svg-icon.installed {
fill: hsl(0, 0%, 40%);
}
.style-name {
Get rid of text decoration in disabled styles Fixes https://github.com/schomery/stylish-chrome/pull/58#issuecomment-290607298
2017-03-31 11:14:47 +00:00
margin-top: .25em;
word-break: break-word;
Switch info/external style link icons from img to svg Switched info to `i` and found a pretty nice external link icon imo. @tophf As for pixelation on the info icons, you mentioned maybe a lighter color would help. For all icons besides external links, I made them lighter with darker hovers. Besides a really high zoom, I never saw any issue to begin with, but let me know if they're alright. I also changed them to use their exact original dimensions, so maybe that helps.
2017-03-30 23:49:03 +00:00
}
Options UI discoverability and other fixes #34
2017-02-28 23:57:03 +00:00
.applies-to {
word-break: break-word;
}
.applies-to,
.actions {
padding-left: 15px;
}
.applies-to-extra {
font-weight: bold;
}
.disabled h2::after {
content: " (Disabled)";
}
.disabled {
opacity: 0.5;
}
.disabled .disable {
display: none;
}
.enabled .enable {
display: none;
}
Get rid of text decoration in disabled styles Fixes https://github.com/schomery/stylish-chrome/pull/58#issuecomment-290607298
2017-03-31 11:14:47 +00:00
.style-name a[target="_blank"] {
text-decoration: none;
}
Options UI discoverability and other fixes #34
2017-02-28 23:57:03 +00:00
/* Default, no update buttons */
.update,
.check-update {
display: none;
}
/* Check update button for things that can*/
*[style-update-url] .check-update {
display: inline;
}
/* Update check in progress */
.checking-update .check-update {
display: none;
}
/* Updates available */
.can-update .update {
display: inline;
}
.can-update .check-update {
display: none;
}
/* Updates not available */
.no-update .check-update {
display: none;
}
/* Updates done */
.update-done .check-update {
display: none;
}
.hidden {
display: none
}
@media(max-width:675px) {
#header {
height: auto;
position: inherit;
width: auto;
border-right: none;
}
#installed {
margin-left: 0;
}
[style-id] {
margin: 0;
}
}
#header {
overflow: auto;
height: calc(100vh - 30px)
}
fieldset {
border-width: 1px;
border-radius: 6px;
margin: 1em 0;
}
.enabled-only > .disabled,
.edited-only > [style-update-url] {
display: none;
}
#search {
width: calc(100% - 4px);
margin: 0.25rem 4px 0;
border-radius: 0.25rem;
padding-left: 0.25rem;
border-width: 1px;
}
#import ul {
margin-left: 0;
padding-left: 0;
list-style: none;
}
#import li {
margin-bottom: .5em;
}
#import pre {
background: #eee;
overflow: auto;
margin: 0 0 .5em 0;
}
Support file drag-n-drop on the entire manage page
2017-03-15 18:18:17 +00:00
/* drag-n-drop on import button */
.dropzone:after {
background-color: rgba(0, 0, 0, 0.7);
color: white;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 1000;
position: fixed;
padding: calc(50vh - 3em) calc(50vw - 5em);
content: attr(dragndrop-hint);
text-shadow: 1px 1px 10px black;
font-size: xx-large;
text-align: center;
animation: fadein 1s cubic-bezier(.03,.67,.08,.94);
animation-fill-mode: both;
}
.fadeout.dropzone:after {
animation: fadeout .25s ease-in-out;
animation-fill-mode: both;
}
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes fadeout {
from { opacity: 1; }
to { opacity: 0; }
}
Options UI discoverability and other fixes #34
2017-02-28 23:57:03 +00:00
</style>
Responsive design for Installed styles Pretty much the same thing as the edit page.
2015-02-20 07:18:54 +00:00
Options UI discoverability and other fixes #34
2017-02-28 23:57:03 +00:00
<template data-id="style">
<div>
<h2 class="style-name"></h2>
<p class="applies-to"></p>
<p class="actions">
<a class="style-edit-link" href="edit.html?id="><button i18n-text="editStyleLabel"></button></a>
<button class="enable" i18n-text="enableStyleLabel"></button>
<button class="disable" i18n-text="disableStyleLabel"></button>
<button class="delete" i18n-text="deleteStyleLabel"></button>
<button class="check-update" i18n-text="checkForUpdate"></button>
<button class="update" i18n-text="installUpdate"></button>
<span class="update-note"></span>
</p>
</div>
</template>
Responsive design for Installed styles Pretty much the same thing as the edit page.
2015-02-20 07:18:54 +00:00
Options UI discoverability and other fixes #34
2017-02-28 23:57:03 +00:00
<template data-id="styleHomepage">
<a target="_blank">
Switch info/external style link icons from img to svg Switched info to `i` and found a pretty nice external link icon imo. @tophf As for pixelation on the info icons, you mentioned maybe a lighter color would help. For all icons besides external links, I made them lighter with darker hovers. Besides a really high zoom, I never saw any issue to begin with, but let me know if they're alright. I also changed them to use their exact original dimensions, so maybe that helps.
2017-03-30 23:49:03 +00:00
<svg xmlns="http://www.w3.org/2000/svg" fill="#000000" class="svg-icon installed" height="16" width="16" viewBox="0 0 8 8">
<path d="M0 0v8h8v-2h-1v1h-6v-6h1v-1h-2zm4 0l1.5 1.5-2.5 2.5 1 1 2.5-2.5 1.5 1.5v-4h-4z" id="external-link"></path>
</svg>
Options UI discoverability and other fixes #34
2017-02-28 23:57:03 +00:00
</a>
</template>
Responsive design for Installed styles Pretty much the same thing as the edit page.
2015-02-20 07:18:54 +00:00
Options UI discoverability and other fixes #34
2017-02-28 23:57:03 +00:00
<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="manage.js"></script>
</head>
Listing filters for 'Manage' Two independent filters. One allows only styles that are enabled, the other allows only styles that were written locally (that is, styles without an update URL).
2015-03-04 07:55:35 +00:00
New backup labels by narcolepticinsomniac
2017-03-16 10:24:00 +00:00
<body id="stylus-manage" i18n-dragndrop-hint="dragDropMessage">
Options UI discoverability and other fixes #34
2017-02-28 23:57:03 +00:00
<div id="header">
<h1 id="manage-heading" i18n-text="manageHeading"></h1>
<fieldset>
<legend id="filters" i18n-text="manageFilters"></legend>
<div>
<input id="manage.onlyEnabled" type="checkbox">
<label id="manage.onlyEnabled-label" for="manage.onlyEnabled" i18n-text="manageOnlyEnabled"></label>
</div>
<div>
<input id="manage.onlyEdited" type="checkbox">
<label id="manage.onlyEdited-label" for="manage.onlyEdited" i18n-text="manageOnlyEdited"></label>
</div>
<div>
<input id="search" type="search" i18n-placeholder="searchStyles">
</div>
</fieldset>
<p>
<button id="check-all-updates" i18n-text="checkAllUpdates"></button>
</p>
<p>
<button id="apply-all-updates" class="hidden" i18n-text="applyAllUpdates"></button>
<span id="update-all-no-updates" class="hidden" i18n-text="updateAllCheckSucceededNoUpdate"></span>
</p>
<p>
<a href="edit.html">
<button id="add-style-label" i18n-text="addStyleLabel"></button>
</a>
</p>
<div id="options">
<h2 id="options-heading" i18n-text="optionsHeading"></h2>
<div>
<input id="show-badge" type="checkbox">
<label id="show-badge-label" for="show-badge" i18n-text="prefShowBadge"></label>
</div>
<div>
<input id="popup.stylesFirst" type="checkbox">
<label id="stylesFirst-label" for="popup.stylesFirst" i18n-text="popupStylesFirst"></label>
</div>
<div id="more-options">
<h3 id="options-subheading" i18n-text="optionsSubheading"></h3>
<button id="manage-options-button" i18n-text="openOptionsManage"></button>
<button id="manage-shortcuts-button" i18n-text="openOptionsShortcuts"></button>
<p>
<button id="editor-styles-button" i18n-text="editorStylesButton"></button>
</p>
</div>
</div>
<div id="backup">
Support file drag-n-drop on the entire manage page
2017-03-15 18:18:17 +00:00
<h2 id="backup-title" i18n-text="backupButtons"></h2>
Options UI discoverability and other fixes #34
2017-02-28 23:57:03 +00:00
<span id="backup-message" i18n-text="backupMessage"></span>
<p>
<button id="file-all-styles" i18n-text="bckpInstStyles"></button>
<button id="unfile-all-styles" i18n-text="retrieveBckp"></button>
</p>
</div>
<p id="manage-text" i18n-html="manageText"></p>
</div>
<div id="installed"></div>
<script src="openOptions.js"></script>
<script src="backup/fileSaveLoad.js"></script>
</body>
allow scrollbar for manager's header section
2017-01-13 09:00:01 +00:00
Options UI discoverability & other fixes
2017-03-01 00:09:49 +00:00
</html>
Reference in New Issue Copy Permalink