Merge branch 'popup-design'
This commit is contained in:
Jeremy Schomery
commit
b721f01c5f
|
|
@ -266,7 +266,7 @@
|
|||
"description": "Text displayed when no styles are installed for the current site"
|
||||
},
|
||||
"openManage": {
|
||||
"message": "Manage installed styles",
|
||||
"message": "Manage",
|
||||
"description": "Link to open the manage page."
|
||||
},
|
||||
"openOptionsManage": {
|
||||
|
|
@ -274,7 +274,7 @@
|
|||
"description": "Go to Options UI"
|
||||
},
|
||||
"openOptionsPopup": {
|
||||
"message": "Options UI",
|
||||
"message": "Options",
|
||||
"description": "Go to Options UI"
|
||||
},
|
||||
"openOptionsShortcuts": {
|
||||
|
|
@ -464,6 +464,9 @@
|
|||
"optionsBadgeDisabled": {
|
||||
"message": "Badge background color (when disabled)"
|
||||
},
|
||||
"optionsPopupWidth": {
|
||||
"message": "Popup width (in pixels)"
|
||||
},
|
||||
"optionsUpdateInterval": {
|
||||
"message": "Automatically check for and install all available userstyle updates (in hrs)"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -53,6 +53,10 @@ function tNodeList(nodes) {
|
|||
case "text":
|
||||
node.insertBefore(document.createTextNode(value), node.firstChild);
|
||||
break;
|
||||
case "tooltip": {
|
||||
node.setAttribute('title', value);
|
||||
break;
|
||||
}
|
||||
case "html":
|
||||
node.insertAdjacentHTML("afterbegin", value);
|
||||
break;
|
||||
|
|
|
|||
|
|
@ -18,6 +18,10 @@
|
|||
<td i18n-text="optionsBadgeDisabled"></td>
|
||||
<td><input type="color" id="badgeDisabled"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td i18n-text="optionsPopupWidth"></td>
|
||||
<td><input type="number" id="popupWidth" min="200"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td i18n-text="optionsUpdateInterval"><sup>1</sup></td>
|
||||
<td><input type="number" min="0" id="updateInterval"></td>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ function restore () {
|
|||
chrome.runtime.getBackgroundPage(bg => {
|
||||
document.getElementById('badgeDisabled').value = bg.prefs.get('badgeDisabled');
|
||||
document.getElementById('badgeNormal').value = bg.prefs.get('badgeNormal');
|
||||
document.getElementById('popupWidth').value = localStorage.getItem('popupWidth') || '246';
|
||||
document.getElementById('updateInterval').value = bg.prefs.get('updateInterval');
|
||||
});
|
||||
}
|
||||
|
|
@ -12,6 +13,7 @@ function save () {
|
|||
chrome.runtime.getBackgroundPage(bg => {
|
||||
bg.prefs.set('badgeDisabled', document.getElementById('badgeDisabled').value);
|
||||
bg.prefs.set('badgeNormal', document.getElementById('badgeNormal').value);
|
||||
localStorage.setItem('popupWidth', document.getElementById('popupWidth').value);
|
||||
bg.prefs.set(
|
||||
'updateInterval',
|
||||
Math.max(0, +document.getElementById('updateInterval').value)
|
||||
|
|
|
|||
97
popup.css
97
popup.css
|
|
@ -1,16 +1,13 @@
|
|||
body {
|
||||
width: 200px;
|
||||
font-size: 13px;
|
||||
width: 252px;
|
||||
font-size: 12px;
|
||||
font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
|
||||
}
|
||||
input[type=checkbox] {
|
||||
outline: none;
|
||||
}
|
||||
#disable-all-wrapper {
|
||||
padding: 0.2em 0 0.7em;
|
||||
}
|
||||
#disable-all-wrapper .main-controls {
|
||||
padding-top: 0.1em;
|
||||
padding: 0.3em 0 0.6em;
|
||||
}
|
||||
#no-styles {
|
||||
font-style: italic;
|
||||
|
|
@ -24,12 +21,8 @@ input[type=checkbox] {
|
|||
.style-name {
|
||||
cursor: default;
|
||||
font-weight: bold;
|
||||
margin-bottom: 2px;
|
||||
display: block;
|
||||
}
|
||||
.actions {
|
||||
font-size: x-small;
|
||||
}
|
||||
a, a:visited {
|
||||
color: black;
|
||||
}
|
||||
|
|
@ -40,6 +33,7 @@ a, a:visited {
|
|||
vertical-align: top;
|
||||
}
|
||||
.left-gutter input {
|
||||
margin-bottom: 1px;
|
||||
margin-top: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
|
@ -49,14 +43,11 @@ a, a:visited {
|
|||
|
||||
.entry {
|
||||
padding: 0.5em 0;
|
||||
border-bottom: 1px solid black;
|
||||
}
|
||||
.entry:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
.entry:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
body > DIV {
|
||||
border-bottom: 1px solid black;
|
||||
padding-bottom: 2px;
|
||||
|
|
@ -68,11 +59,30 @@ body.blocked > DIV {
|
|||
#installed {
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
#installed.disabled .style-name {
|
||||
#installed .disabled .style-name {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
#installed .actions a {
|
||||
margin-right: 0.2em;
|
||||
text-decoration: none;
|
||||
}
|
||||
#installed .style-edit-link, #installed .delete {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.svg-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
pointer-events: none;
|
||||
}
|
||||
.svg-icon path,
|
||||
.svg-icon polygon,
|
||||
.svg-icon rect {
|
||||
fill: hsl(0, 0%, 40%);
|
||||
}
|
||||
.svg-icon circle {
|
||||
stroke: hsl(0, 0%, 40%);
|
||||
stroke-width: 1;
|
||||
}
|
||||
body > .actions {
|
||||
margin-top: 0.5em;
|
||||
|
|
@ -87,7 +97,9 @@ body > .actions {
|
|||
|
||||
#unavailable {
|
||||
border: none;
|
||||
display: none;
|
||||
display: none; /* flex */
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
text-indent: 6px;
|
||||
}
|
||||
|
|
@ -141,3 +153,54 @@ body:not(.blocked) #unavailable {
|
|||
color: inherit;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* action buttons */
|
||||
#popup-options {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
padding: 1.2em 0;
|
||||
}
|
||||
#popup-options button {
|
||||
margin: 0 2px;
|
||||
width: 33%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* margins */
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
body>div:not(#installed) {
|
||||
margin-left:0.75em;
|
||||
margin-right:0.75em;
|
||||
}
|
||||
#unavailable {
|
||||
margin-top: 0.75em;
|
||||
}
|
||||
#installed .entry {
|
||||
}
|
||||
/* entries */
|
||||
#installed .entry {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 5px 0.75em;
|
||||
}
|
||||
#installed .entry:nth-child(even) {
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
#installed .main-controls {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
width: calc(100% - 20px);
|
||||
align-items: center;
|
||||
}
|
||||
#installed .main-controls label {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
|
|
|||
30
popup.html
30
popup.html
|
|
@ -14,8 +14,16 @@
|
|||
<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-text="editStyleLabel"></a>
|
||||
<a href="#" class="delete" i18n-text="deleteStyleLabel"></a>
|
||||
<a class="style-edit-link" href="edit.html?id=" i18n-tooltip="editStyleLabel">
|
||||
<svg class="svg-icon" 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-tooltip="deleteStyleLabel">
|
||||
<svg class="svg-icon" 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>
|
||||
|
|
@ -45,21 +53,21 @@
|
|||
</div>
|
||||
<div class="left-gutter"></div>
|
||||
<div class="main-controls">
|
||||
<div id="manage-styles">
|
||||
<button id="popup-manage-button" i18n-text="openManage"></button>
|
||||
</div>
|
||||
<div id="popup-options">
|
||||
<button id="popup-options-button" i18n-text="openOptionsPopup">
|
||||
<button id="popup-shortcuts-button" i18n-text="openShortcutsPopup"></button>
|
||||
</div>
|
||||
<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"><br></span>
|
||||
<div id="write-style">
|
||||
<span id="write-style-for" i18n-text="writeStyleFor"><br></span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Actions -->
|
||||
<div id="popup-options">
|
||||
<button id="popup-manage-button" i18n-text="openManage"></button>
|
||||
<button id="popup-options-button" i18n-text="openOptionsPopup">
|
||||
<button id="popup-shortcuts-button" i18n-text="openShortcutsPopup"></button>
|
||||
</div>
|
||||
</div>
|
||||
<script src="popup.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
5
popup.js
5
popup.js
|
|
@ -13,7 +13,7 @@ function updatePopUp(url) {
|
|||
var urlWillWork = /^(file|http|https|ftps?|chrome\-extension):/.exec(url);
|
||||
if (!urlWillWork) {
|
||||
document.body.classList.add("blocked");
|
||||
document.getElementById("unavailable").style.display = "block";
|
||||
document.getElementById("unavailable").style.display = "flex";
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -227,3 +227,6 @@ document.querySelector('#popup-shortcuts-button').addEventListener("click", func
|
|||
'url': 'chrome://extensions/configureCommands'
|
||||
});
|
||||
});
|
||||
|
||||
// popup width
|
||||
document.body.style.width = (localStorage.getItem('popupWidth') || '246') + 'px';
|
||||
|
|
|
|||
|
|
@ -352,6 +352,8 @@ var prefs = chrome.extension.getBackgroundPage().prefs || new function Prefs() {
|
|||
"badgeDisabled": "#8B0000", // badge background color when disabled
|
||||
"badgeNormal": "#006666", // badge background color
|
||||
|
||||
"popupWidth": 240, // popup width in pixels
|
||||
|
||||
"updateInterval": 0 // user-style automatic update interval, hour
|
||||
};
|
||||
var values = deepCopy(defaults);
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user