Skip to content

Commit ec88e6a

Browse files
conemaconema
authored
Merge pull request #48 from conema/options-page
Add options page
2 parents 34f2542 + c4c3d1d commit ec88e6a

File tree

6 files changed

+246
-11
lines changed

6 files changed

+246
-11
lines changed

‎background.js‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,33 @@
1-
messenger.WindowListener.registerChromeUrl([
2-
["content", "MonterailOverlay", "content/"]
1+
messenger.WindowListener.registerChromeUrl([
2+
["content", "MonterailOverlay", "content/"]
33
]);
44

55
messenger.WindowListener.registerWindow(
6-
"chrome://messenger/content/addressbook/addressbook.xhtml",
6+
"chrome://messenger/content/addressbook/addressbook.xhtml",
77
"chrome://MonterailOverlay/content/scripts/loadAddressbook.js");
88

99
messenger.WindowListener.registerWindow(
10-
"chrome://messenger/content/addressbook/abContactsPanel.xhtml",
10+
"chrome://messenger/content/addressbook/abContactsPanel.xhtml",
1111
"chrome://MonterailOverlay/content/scripts/loadAddressbook.js");
1212

1313
messenger.WindowListener.registerWindow(
14-
"chrome://messenger/content/messengercompose/messengercompose.xhtml",
14+
"chrome://messenger/content/messengercompose/messengercompose.xhtml",
1515
"chrome://MonterailOverlay/content/scripts/loadCompose.js");
1616

1717
messenger.WindowListener.registerWindow(
18-
"chrome://messenger/content/messenger.xhtml",
18+
"chrome://messenger/content/messenger.xhtml",
1919
"chrome://MonterailOverlay/content/scripts/loadMessenger.js");
2020

2121
messenger.WindowListener.registerWindow(
22-
"chrome://messenger/content/messageWindow.xhtml",
22+
"chrome://messenger/content/messageWindow.xhtml",
2323
"chrome://MonterailOverlay/content/scripts/loadMessenger.js");
2424

2525
messenger.WindowListener.registerWindow(
26-
"chrome://messenger/content/customizeToolbar.xhtml",
26+
"chrome://messenger/content/customizeToolbar.xhtml",
2727
"chrome://MonterailOverlay/content/scripts/loadMessenger.js");
2828

2929
messenger.WindowListener.registerWindow(
30-
"chrome://messenger/content/glodaFacetView.xhtml",
30+
"chrome://messenger/content/glodaFacetView.xhtml",
3131
"chrome://MonterailOverlay/content/scripts/loadSearch.js");
3232

3333
messenger.WindowListener.startListening();

‎content/options.html‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<!DOCTYPE html>
2+
3+
<html>
4+
5+
<head>
6+
<meta charset="utf-8">
7+
<link rel="stylesheet" href="skin/options.css">
8+
</head>
9+
10+
<body>
11+
<div id="error" class="error"></div>
12+
<div id="success" class="success"></div>
13+
14+
<form>
15+
<div class="container">
16+
<div class="info-group">
17+
<p class="title">Message List Height</p>
18+
<p class="subtitle">Set the messages height in px in the message list (email list)</p>
19+
</div>
20+
<div class="input-group">
21+
<input id="messageListHeight" placeholder="40" type="number">
22+
<div class="input-group-append">
23+
<span>px</span>
24+
</div>
25+
</div>
26+
27+
<div class="info-group">
28+
<p class="title">Folder tree Height</p>
29+
<p class="subtitle">Set the folders height in px in the folder tree</p>
30+
</div>
31+
<div class="input-group">
32+
<input id="folderTreeHeight" placeholder="25" type="number">
33+
<div class="input-group-append">
34+
<span>px</span>
35+
</div>
36+
</div>
37+
</div>
38+
39+
<div class="container-buttons">
40+
<button id="submit" class="btn">Save settings</button>
41+
<button id="reset" class="btn">Reset defaults</button>
42+
</div>
43+
</form>
44+
45+
<script src="scripts/options.js"></script>
46+
</body>
47+
48+
</html>

‎content/scripts/loadMessenger.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
var { Services } = ChromeUtils.import("resource://gre/modules/Services.jsm");
22

33
const fileName = "messenger.css";
4+
const defaultMessageListHeight = "40";
5+
const defaultFolderTreeHeight = "25";
46

57
function onLoad(activatedWhileWindowOpen) {
68
WL.injectCSS("chrome://MonterailOverlay/content/skin/" + fileName);
@@ -13,6 +15,12 @@ function onLoad(activatedWhileWindowOpen) {
1315
} else if (Services.appinfo.OS == "Darwin") {
1416
WL.injectCSS("chrome://MonterailOverlay/content/skin/mac/skin/" + fileName);
1517
}
18+
19+
var gettingItem = WL.messenger.storage.sync.get(['messageListHeight', 'folderTreeHeight']);
20+
gettingItem.then((res) => {
21+
document.querySelector(':root').style.setProperty('--message-list-row-height', (res.messageListHeight || defaultMessageListHeight) + "px");
22+
document.querySelector(':root').style.setProperty('--folder-tree-row-height', (res.folderTreeHeight || defaultFolderTreeHeight) + "px");
23+
});
1624
}
1725

1826
function onUnload(deactivatedWhileWindowOpen) {

‎content/scripts/options.js‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
window.browser = window.browser.extension.getBackgroundPage().browser;
2+
3+
const defaultMessageListHeight = "40";
4+
const defaultFolderTreeHeight = "25";
5+
6+
var messageListInput = document.querySelector("#messageListHeight");
7+
var folderTreeInput = document.querySelector("#folderTreeHeight");
8+
9+
function saveOptions(e) {
10+
browser.storage.sync.set({
11+
messageListHeight: messageListInput.value,
12+
folderTreeHeight: folderTreeInput.value
13+
});
14+
e.preventDefault();
15+
16+
if (messageListInput.validationMessage || folderTreeInput.validationMessage){
17+
document.querySelector("#error").style.display = "block";
18+
document.querySelector("#error").innerHTML = messageListInput.validationMessage + "<br>" + folderTreeInput.validationMessage;
19+
document.querySelector("#success").style.display = "none";
20+
} else {
21+
document.querySelector("#error").style.display = "none";
22+
document.querySelector("#success").style.display = "block";
23+
document.querySelector("#success").innerHTML = "Settings saved. You must restart Thunderbird to see the changes.";
24+
}
25+
}
26+
27+
function resetOptions(e) {
28+
browser.storage.sync.set({
29+
messageListHeight: defaultMessageListHeight,
30+
folderTreeHeight: defaultFolderTreeHeight
31+
});
32+
e.preventDefault();
33+
34+
messageListInput.value = defaultMessageListHeight;
35+
folderTreeInput.value = defaultFolderTreeHeight;
36+
37+
document.querySelector("#error").style.display = "none";
38+
document.querySelector("#success").style.display = "block";
39+
document.querySelector("#success").innerHTML = "Settings are restored. You must restart Thunderbird to see the changes.";
40+
}
41+
42+
function restoreOptions() {
43+
var gettingItem = browser.storage.sync.get(['messageListHeight', 'folderTreeHeight']);
44+
gettingItem.then((res) => {
45+
messageListInput.value = res.messageListHeight || defaultMessageListHeight;
46+
folderTreeInput.value = res.folderTreeHeight || defaultFolderTreeHeight;
47+
});
48+
}
49+
50+
document.addEventListener('DOMContentLoaded', restoreOptions);
51+
document.querySelector("#submit").addEventListener("click", saveOptions);
52+
document.querySelector("#reset").addEventListener("click", resetOptions);

‎content/skin/options.css‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
.input-group {
2+
display: flex;
3+
flex-wrap: wrap;
4+
align-items: stretch;
5+
position: relative;
6+
width: 100%;
7+
}
8+
9+
.input-group>input[type="number"] {
10+
flex: 1 1 auto;
11+
position: relative;
12+
width: 1%;
13+
margin-bottom: 0;
14+
}
15+
16+
input[type="number"] {
17+
display: block;
18+
width: 100%;
19+
padding: 0.375rem 0.75rem;
20+
color: #99a6b7;
21+
background-color: #fff;
22+
border: 1px solid #e1e6f1;
23+
border-radius: 3px;
24+
font-size: 0.95rem;
25+
font-weight: 400;
26+
line-height: 1.5;
27+
}
28+
29+
.input-group-append {
30+
display: flex;
31+
}
32+
33+
.input-group-append>span {
34+
display: flex;
35+
align-items: center;
36+
padding: 0.375rem 0.75rem;
37+
margin-bottom: 0;
38+
color: #596882;
39+
text-align: center;
40+
white-space: nowrap;
41+
background-color: #ebebef;
42+
border: 1px solid #ebebef;
43+
border-radius: 3px;
44+
font-size: 0.95rem;
45+
font-weight: 400;
46+
line-height: 1.5;
47+
}
48+
49+
.title {
50+
margin-bottom: 10px;
51+
color: #334151;
52+
font-size: 15px;
53+
line-height: 1;
54+
font-weight: 500;
55+
}
56+
57+
.subtitle {
58+
height: 30px;
59+
font-size: 13px;
60+
color: #99a6b7;
61+
}
62+
63+
input[type="number"] {
64+
-moz-appearance: textfield;
65+
}
66+
67+
.btn {
68+
border-width: 0;
69+
line-height: 1.538;
70+
padding: 4px 10px;
71+
border-radius: 4px;
72+
min-height: 20px;
73+
74+
display: block;
75+
width: 100px;
76+
margin: 0 auto;
77+
text-align: center;
78+
font-size: 9pt;
79+
color: #f9f9fa;
80+
81+
background-color: #3c3b37;
82+
border-color: #3c3b37;
83+
font-weight: 500;
84+
cursor: pointer;
85+
}
86+
87+
.container {
88+
display: grid;
89+
grid-template-columns: 45% 15%;
90+
grid-template-rows: auto auto;
91+
grid-column-gap: 45px;
92+
grid-row-gap: 20px;
93+
justify-items: stretch;
94+
align-items: center;
95+
justify-content: center;
96+
}
97+
98+
.container-buttons {
99+
display: flex;
100+
flex-direction: row;
101+
flex-wrap: nowrap;
102+
justify-content: center;
103+
align-content: center;
104+
align-items: center;
105+
width: 40%;
106+
margin: 20px auto;
107+
}
108+
109+
.error, .success {
110+
color: #fff;
111+
padding: 1rem;
112+
width: 100%;
113+
display: none;
114+
}
115+
116+
.error {
117+
background-color: #dc3545;
118+
}
119+
120+
.success {
121+
background-color: #28a745;
122+
}

‎manifest.json‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"manifest_version": 2,
33
"name": "Monterail Dark",
44
"description": "Monterail Dark, a Thunderbird theme inspired by the mockup of Monterail",
5-
"version": "3.0",
5+
"version": "3.1",
66
"author": "Emanuele Concas",
77
"homepage_url": "https://addons.thunderbird.net/en-US/thunderbird/addon/monterail-dark/",
88
"applications": {
@@ -28,6 +28,11 @@
2828
"scripts": [
2929
"background.js"
3030
]
31-
}
31+
},
32+
"options_ui": {
33+
"page": "content/options.html",
34+
"browser_style": true
35+
},
36+
"permissions": ["storage"]
3237
}
3338

0 commit comments

Comments
 (0)