Fix word breaks in popup (#805)
* Fix word breaks in popup. See #312 * Click to copy * Copy styling * Copy message * Copy styling * cleanup * cleanup
This commit is contained in:
parent
a2a8908e70
commit
2ea5290ea0
|
@ -242,6 +242,14 @@
|
||||||
"message": "Yes",
|
"message": "Yes",
|
||||||
"description": "'Yes' button in a confirm dialog"
|
"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": {
|
"dateInstalled": {
|
||||||
"message": "Date installed",
|
"message": "Date installed",
|
||||||
"description": "Option text for the user to sort the style by install date"
|
"description": "Option text for the user to sort the style by install date"
|
||||||
|
|
|
@ -106,6 +106,7 @@
|
||||||
|
|
||||||
<template data-id="unreachableInfo">
|
<template data-id="unreachableInfo">
|
||||||
<div class="blocked-info">
|
<div class="blocked-info">
|
||||||
|
<div class="copy-message" i18n-text="copied"></div>
|
||||||
<label i18n-text="unreachableContentScript"></label>
|
<label i18n-text="unreachableContentScript"></label>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
@ -697,6 +697,8 @@ body.blocked .actions > .main-controls {
|
||||||
.blocked-info {
|
.blocked-info {
|
||||||
hyphens: none;
|
hyphens: none;
|
||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
|
line-height: 16px;
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.blocked-info label {
|
.blocked-info label {
|
||||||
|
@ -712,6 +714,46 @@ body.blocked .actions > .main-controls {
|
||||||
margin: 0;
|
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 {
|
#hotkey-info {
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
/* global configDialog hotkeys onTabReady msg
|
/* global configDialog hotkeys onTabReady msg
|
||||||
getActiveTab FIREFOX getTabRealURL URLS API onDOMready $ $$ prefs CHROME
|
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 */
|
tryJSONparse debounce CHROME_HAS_BORDER_BUG */
|
||||||
|
|
||||||
'use strict';
|
'use strict';
|
||||||
|
@ -141,7 +141,14 @@ function initPopup() {
|
||||||
$('label', info).textContent = t('unreachableAMO');
|
$('label', info).textContent = t('unreachableAMO');
|
||||||
const note = (FIREFOX < 59 ? t('unreachableAMOHintOldFF') : t('unreachableAMOHint')) +
|
const note = (FIREFOX < 59 ? t('unreachableAMOHintOldFF') : t('unreachableAMOHint')) +
|
||||||
(FIREFOX < 60 ? '' : '\n' + t('unreachableAMOHintNewFF'));
|
(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 renderLine = line => $create('p', line.split(/(<.*?>)/).map(renderToken));
|
||||||
const noteNode = $create('fragment', note.split('\n').map(renderLine));
|
const noteNode = $create('fragment', note.split('\n').map(renderLine));
|
||||||
info.appendChild(noteNode);
|
info.appendChild(noteNode);
|
||||||
|
@ -581,6 +588,18 @@ Object.assign(handleEvent, {
|
||||||
handleEvent.openURLandHide.call(this, event);
|
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