Merge branch 'master' into dev-color-scheme
This commit is contained in:
commit
2d8220a445
|
@ -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)**
|
||||
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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;
|
||||
|
|
23
options.html
23
options.html
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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);
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
|
|
Loading…
Reference in New Issue
Block a user