Merge branch 'master' into dev-color-scheme

This commit is contained in:
eight 2019-12-04 00:29:53 +08:00
commit 2d8220a445
8 changed files with 111 additions and 12 deletions

View File

@ -53,7 +53,7 @@ Copyright © 2005-2014 [Jason Barnabe](jason.barnabe@gmail.com)
Current Stylus:
Copyright © 2017-2018 [Stylus Team](https://github.com/openstyles/stylus/graphs/contributors)
Copyright © 2017-2019 [Stylus Team](https://github.com/openstyles/stylus/graphs/contributors)
**[GNU GPLv3](./LICENSE)**

View File

@ -242,6 +242,14 @@
"message": "Yes",
"description": "'Yes' button in a confirm dialog"
},
"copied": {
"message": "Copied to clipboard",
"description": "Message shown when content has been copied to the clipboard"
},
"copy": {
"message": "Copy to clipboard",
"description": "Tooltip for elements which can be copied"
},
"dateInstalled": {
"message": "Date installed",
"description": "Option text for the user to sort the style by install date"

View File

@ -198,6 +198,11 @@ select[disabled] > option {
color: graytext;
}
select:disabled + .select-arrow,
select[disabled] + .select-arrow {
fill: hsl(0, 0%, 50%);
}
/* global stuff we use everywhere */
.hidden {
display: none !important;

View File

@ -140,15 +140,18 @@
<div class="block sync-options">
<h1 i18n-text="optionsCustomizeSync"></h1>
<div class="items">
<label>
<div class="label">
<span class="sync-status"></span>
<select class="cloud-name">
<option value="none" i18n-text="optionsSyncNone"></option>
<option value="dropbox">Dropbox</option>
<option value="google">Google Drive</option>
<option value="onedrive">OneDrive</option>
</select>
</label>
<div class="select-resizer">
<select class="cloud-name">
<option value="none" i18n-text="optionsSyncNone"></option>
<option value="dropbox">Dropbox</option>
<option value="google">Google Drive</option>
<option value="onedrive">OneDrive</option>
</select>
<svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
</div>
</div>
<div class="actions">
<button type="button" class="connect" i18n-text="optionsSyncConnect"></button>
<button type="button" class="disconnect" i18n-text="optionsSyncDisconnect"></button>
@ -236,6 +239,10 @@
<symbol id="svg-icon-help" viewBox="0 0 14 16">
<path fill-rule="evenodd" d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"></path>
</symbol>
<symbol id="svg-icon-select-arrow" viewBox="0 0 1792 1792">
<path fill-rule="evenodd" d="M1408 704q0 26-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45t19-45 45-19h896q26 0 45 19t19 45z"/>
</symbol>
</svg>
<script src="options/options.js"></script>

View File

@ -80,12 +80,18 @@ h1 {
width: 70%;
}
label {
label,
.label {
display: flex;
margin: .25ex 0;
align-items: center;
}
.label {
flex-grow: 1;
justify-content: space-between;
}
label > :first-child {
margin-right: 8px;
flex-grow: 1;
@ -109,6 +115,10 @@ select,
flex-shrink: 0;
}
select.cloud-name {
width: auto;
}
button {
text-align: center;
}
@ -354,6 +364,9 @@ input[type="radio"].radio:checked::after {
}
.sync-status {
flex-grow: 1;
padding-right: 8px;
box-sizing: border-box;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@ -361,3 +374,7 @@ input[type="radio"].radio:checked::after {
.sync-status::first-letter {
text-transform: uppercase;
}
.sync-options .actions {
padding-top: 6px;
}

View File

@ -106,6 +106,7 @@
<template data-id="unreachableInfo">
<div class="blocked-info">
<div class="copy-message" i18n-text="copied"></div>
<label i18n-text="unreachableContentScript"></label>
</div>
</template>

View File

@ -697,6 +697,8 @@ body.blocked .actions > .main-controls {
.blocked-info {
hyphens: none;
word-wrap: break-word;
line-height: 16px;
position: relative;
}
.blocked-info label {
@ -712,6 +714,46 @@ body.blocked .actions > .main-controls {
margin: 0;
}
.blocked-info strong {
cursor: pointer;
transition: all .1s;
border-bottom: 1px dotted #000;
}
.blocked-info strong.copied {
background: hsl(170, 40%, 80%);
color: #000;
}
.copy-message {
white-space: nowrap;
position: absolute;
display: none;
top: 0;
left: calc(var(--outer-padding) * -1);
right: calc(var(--outer-padding) * -1);
font-weight: bold;
font-size: 13px;
text-align: center;
padding: 4px 0;
background: hsl(170, 40%, 80%);
color: #000;
z-index: 10;
}
.copy-message.show-message {
display: block;
}
.blocked-info strong:after {
content: '';
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAMAAAC67D+PAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAGUExURQAAAAAAAKVnuc8AAAABdFJOUwBA5thmAAAAIElEQVQI12NgYGCEAgYgkwEMGBFijEhixDMZkUSRLQAACpYALjrE2uIAAAAASUVORK5CYII=)center no-repeat;
height: 10px;
width: 10px;
display: inline-flex;
margin-left: 3px;
}
/******************************************/
#hotkey-info {

View File

@ -1,6 +1,6 @@
/* global configDialog hotkeys onTabReady msg
getActiveTab FIREFOX getTabRealURL URLS API onDOMready $ $$ prefs CHROME
setupLivePrefs template t $create tWordBreak animateElement
setupLivePrefs template t $create animateElement
tryJSONparse debounce CHROME_HAS_BORDER_BUG capitalize */
'use strict';
@ -141,7 +141,14 @@ function initPopup() {
$('label', info).textContent = t('unreachableAMO');
const note = (FIREFOX < 59 ? t('unreachableAMOHintOldFF') : t('unreachableAMOHint')) +
(FIREFOX < 60 ? '' : '\n' + t('unreachableAMOHintNewFF'));
const renderToken = s => s[0] === '<' ? $create('b', tWordBreak(s.slice(1, -1))) : s;
const renderToken = s => s[0] === '<'
? $create('strong', {
textContent: s.slice(1, -1),
onclick: handleEvent.copyContent,
tabIndex: -1,
title: t('copy'),
})
: s;
const renderLine = line => $create('p', line.split(/(<.*?>)/).map(renderToken));
const noteNode = $create('fragment', note.split('\n').map(renderLine));
info.appendChild(noteNode);
@ -582,6 +589,18 @@ Object.assign(handleEvent, {
handleEvent.openURLandHide.call(this, event);
}
},
copyContent(event) {
const target = event.target;
const message = $('.copy-message');
navigator.clipboard.writeText(target.textContent);
target.classList.add('copied');
message.classList.add('show-message');
setTimeout(() => {
target.classList.remove('copied');
message.classList.remove('show-message');
}, 1000);
},
});