Skip to content

Commit 0835f0e

Browse files
StigmatozStigmatoz
committed
Added dark mode
1 parent 8f28e82 commit 0835f0e

File tree

10 files changed

+169
-39
lines changed

10 files changed

+169
-39
lines changed

‎src/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@
3535
<div id='hintForUsers' class="hint-for-settings hide">
3636
<div id='closeHintBtn' class="close-hint">✖</div>
3737
<p class="title-block">You can:</p>
38+
<p><span class="arrow">➤</span> enable dark mode</p>
3839
<p><span class="arrow">➤</span> set daily limits for sites</p>
3940
<p><span class="arrow">➤</span> set notifications after a certain time has elapsed</p>
4041
<p><span class="arrow">➤</span> set a list of sites with no tracking</p>

‎src/manifest.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33

44
"name": "Web Activity Time Tracker",
55
"short_name": "Web Time Tracker",
6-
"version": "1.5.3",
6+
"version": "1.5.4",
77
"minimum_chrome_version": "26",
88

99
"description": "Track and limit time your activity in the browser every day.",

‎src/options.html‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,13 +25,20 @@
2525
<a id='restrictionsBtn'>Limits</a>
2626
<a id='notifyBtn'>Notifications</a>
2727
<a id='aboutBtn'>About</a>
28+
<a id='donateBtn'>Donate</a>
2829
</div>
2930
<div id='block'>
3031
<div id='settingsBlock'>
3132
<label>
3233
<input type="checkbox" class="filled-in" id="viewTimeInBadge" checked="checked" />
3334
<span>Display time tracker in icon</span>
3435
</label>
36+
<div class="margin-top-10">
37+
<label>
38+
<input type="checkbox" class="filled-in" id="darkMode" />
39+
<span>Dark mode</span>
40+
</label>
41+
</div>
3542
<div class="margin-top-10">
3643
<label>Stop tracking if no activity detected for: </label>
3744
<div class="tooltip"><img src="/icons/information.svg" height="18" />
@@ -219,8 +226,9 @@
219226
href="https://chrome.google.com/webstore/detail/web-activity-time-tracker/hhfnghjdeddcfegfekjeihfmbjenlomm/reviews"
220227
target="_blank">Let me know!</a></label>
221228
</div>
222-
<hr class="margin-top-20">
223-
<div class="margin-top-20">
229+
</div>
230+
<div id='donateBlock' hidden>
231+
<div>
224232
<label>You can support Web Activity Time Tracker by donating:</label>
225233
<div class="margin-top-20">
226234
<div class="inline-block">

‎src/scripts/background.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ var setting_restriction_list;
1212
var setting_interval_save;
1313
var setting_interval_inactivity;
1414
var setting_view_in_badge;
15+
var setting_dark_mode;
1516
var setting_notification_list;
1617
var setting_notification_message;
1718

@@ -196,6 +197,7 @@ function setDefaultSettings() {
196197
storage.saveValue(SETTINGS_INTERVAL_INACTIVITY, SETTINGS_INTERVAL_INACTIVITY_DEFAULT);
197198
storage.saveValue(SETTINGS_INTERVAL_RANGE, SETTINGS_INTERVAL_RANGE_DEFAULT);
198199
storage.saveValue(SETTINGS_VIEW_TIME_IN_BADGE, SETTINGS_VIEW_TIME_IN_BADGE_DEFAULT);
200+
storage.saveValue(SETTINGS_DARK_MODE, SETTINGS_DARK_MODE_DEFAULT);
199201
storage.saveValue(SETTINGS_INTERVAL_SAVE_STORAGE, SETTINGS_INTERVAL_SAVE_STORAGE_DEFAULT);
200202
storage.saveValue(STORAGE_NOTIFICATION_MESSAGE, STORAGE_NOTIFICATION_MESSAGE_DEFAULT);
201203
}
@@ -256,6 +258,9 @@ function addListener() {
256258
if (key === SETTINGS_VIEW_TIME_IN_BADGE) {
257259
storage.getValue(SETTINGS_VIEW_TIME_IN_BADGE, function(item) { setting_view_in_badge = item; });
258260
}
261+
if (key === SETTINGS_DARK_MODE) {
262+
storage.getValue(SETTINGS_DARK_MODE, function(item) { setting_dark_mode = item; });
263+
}
259264
}
260265
});
261266

@@ -331,6 +336,7 @@ function loadNotificationMessage() {
331336
function loadSettings() {
332337
storage.getValue(SETTINGS_INTERVAL_INACTIVITY, function(item) { setting_interval_inactivity = item; });
333338
storage.getValue(SETTINGS_VIEW_TIME_IN_BADGE, function(item) { setting_view_in_badge = item; });
339+
storage.getValue(SETTINGS_DARK_MODE, function(item) { setting_dark_mode = item; });
334340
}
335341

336342
function loadAddDataFromStorage() {

‎src/scripts/chart/chart-core.js‎

Lines changed: 86 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
function donutChart() {
22
var width,
33
height,
4+
darkMode,
45
margin = { top: 10, right: 10, bottom: 10, left: 10 },
56
colour = d3.scaleOrdinal(d3.schemeCategory20), // colour scheme
67
variable, // value in data that will dictate proportions on chart
@@ -78,20 +79,35 @@ function donutChart() {
7879
})
7980
.attr("class", "legend");
8081

82+
if (darkMode)
83+
legendG.style("fill", "#ffffff");
84+
else legendG.style("fill", "black");
85+
8186
legendG.append("rect") // make a matching color rect
8287
.attr("width", 10)
8388
.attr("height", 10)
8489
.attr("fill", function (d, i) {
8590
return colour(d.data[category]);
8691
});
8792

88-
legendG.append("text") // add the text
89-
.text(function (d) {
90-
return d.data.url;
91-
})
92-
.style("font-size", 13)
93-
.attr("y", 10)
94-
.attr("x", 13);
93+
if (darkMode)
94+
legendG.append("text") // add the text
95+
.text(function (d) {
96+
return d.data.url;
97+
})
98+
.style("font-size", 13)
99+
.style('fill', '#ffffff')
100+
.attr("y", 10)
101+
.attr("x", 13);
102+
else
103+
legendG.append("text") // add the text
104+
.text(function (d) {
105+
return d.data.url;
106+
})
107+
.style("fill", "black")
108+
.style("font-size", 13)
109+
.attr("y", 10)
110+
.attr("x", 13);
95111

96112
// ===========================================================================================
97113
// add tooltip to mouse events on slices and labels
@@ -110,12 +126,21 @@ function donutChart() {
110126
// add tooltip (svg circle element) when mouse enters label or slice
111127
selection.on('mouseenter', function (data) {
112128
d3.selectAll('.toolCircle').remove();
113-
svg.append('text')
114-
.attr('class', 'toolCircle')
115-
.attr('dy', -15) // hard-coded. can adjust this to adjust text vertical alignment in tooltip
116-
.html(toolTipHTML(data)) // add text to the circle.
117-
.style('font-size', '.9em')
118-
.style('text-anchor', 'middle'); // centres text in tooltip
129+
if (darkMode)
130+
svg.append('text')
131+
.attr('class', 'toolCircle')
132+
.attr('dy', -15) // hard-coded. can adjust this to adjust text vertical alignment in tooltip
133+
.html(toolTipHTML(data)) // add text to the circle.
134+
.style('font-size', '.9em')
135+
.style('fill', '#ffffff')
136+
.style('text-anchor', 'middle'); // centres text in tooltip
137+
else
138+
svg.append('text')
139+
.attr('class', 'toolCircle')
140+
.attr('dy', -15)
141+
.html(toolTipHTML(data))
142+
.style('font-size', '.9em')
143+
.style('text-anchor', 'middle');
119144

120145
svg.append('circle')
121146
.attr('class', 'toolCircle')
@@ -180,6 +205,12 @@ function donutChart() {
180205
return chart;
181206
};
182207

208+
chart.darkMode = function (value) {
209+
if (!arguments.length) return darkMode;
210+
darkMode = value;
211+
return chart;
212+
};
213+
183214
chart.margin = function (value) {
184215
if (!arguments.length) return margin;
185216
margin = value;
@@ -323,17 +354,33 @@ function drawIntervalChart(data) {
323354

324355
var tickDistance = 4.38;
325356

326-
var tooltip = d3.select("#timeChart")
327-
.append("div")
328-
.style("opacity", 0)
329-
.style("display", "none")
330-
.style("position", "absolute")
331-
.attr("class", "tooltip")
332-
.style("background-color", "white")
333-
.style("border", "solid")
334-
.style("border-width", "1px")
335-
.style("border-radius", "5px")
336-
.style("padding", "5px")
357+
var tooltip;
358+
if (document.body.classList.contains('night-mode'))
359+
tooltip = d3.select("#timeChart")
360+
.append("div")
361+
.style("opacity", 0)
362+
.style("display", "none")
363+
.style("position", "absolute")
364+
.attr("class", "tooltip")
365+
.style("background-color", "#cbcbcb")
366+
.style("color", "black")
367+
.style("border", "solid")
368+
.style("border-width", "1px")
369+
.style("border-radius", "5px")
370+
.style("padding", "5px")
371+
else
372+
tooltip = d3.select("#timeChart")
373+
.append("div")
374+
.style("opacity", 0)
375+
.style("display", "none")
376+
.style("position", "absolute")
377+
.attr("class", "tooltip")
378+
.style("background-color", "white")
379+
.style("color", "black")
380+
.style("border", "solid")
381+
.style("border-width", "1px")
382+
.style("border-radius", "5px")
383+
.style("padding", "5px")
337384

338385
// Three function that change the tooltip when user hover / move / leave a cell
339386
var mouseover = function (d) {
@@ -361,11 +408,20 @@ function drawIntervalChart(data) {
361408
}
362409

363410
//create the svg
364-
var svg = d3.select("#timeChart").append("svg")
365-
.attr("width", width + margin.left + margin.right)
366-
.attr("height", height + margin.top + margin.bottom)
367-
.append("g")
368-
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
411+
var svg;
412+
if (document.body.classList.contains('night-mode'))
413+
svg = d3.select("#timeChart").append("svg")
414+
.style('background-color', '#383838')
415+
.attr("width", width + margin.left + margin.right)
416+
.attr("height", height + margin.top + margin.bottom)
417+
.append("g")
418+
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
419+
else
420+
svg = d3.select("#timeChart").append("svg")
421+
.attr("width", width + margin.left + margin.right)
422+
.attr("height", height + margin.top + margin.bottom)
423+
.append("g")
424+
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
369425

370426
//draw the axis.
371427
svg.append("g")
@@ -419,7 +475,7 @@ function drawIntervalChart(data) {
419475
})
420476
.attr("height", function (d) {
421477
var offset = getMinutesTo(d.interval) - getMinutesFrom(d.interval);
422-
if (offset == 0){
478+
if (offset == 0) {
423479
var offsetSeconds = getSecondsTo(d.interval) - getSecondsFrom(d.interval);
424480
if (offsetSeconds <= 3)
425481
return 0;

‎src/scripts/common.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,12 +40,14 @@ var SETTINGS_INTERVAL_SAVE_STORAGE_DEFAULT = 2000;
4040
var SETTINGS_INTERVAL_CHECK_STORAGE_DEFAULT = 3000;
4141
var SETTINGS_INTERVAL_RANGE_DEFAULT = RangeForDays.days7;
4242
var SETTINGS_VIEW_TIME_IN_BADGE_DEFAULT = true;
43+
var SETTINGS_DARK_MODE_DEFAULT = false;
4344
var SETTINGS_SHOW_HINT_DEFAULT = true;
4445
var STORAGE_NOTIFICATION_MESSAGE_DEFAULT = 'You have spent a lot of time on this site';
4546

4647
var SETTINGS_INTERVAL_INACTIVITY = 'inactivity_interval';
4748
var SETTINGS_INTERVAL_SAVE_STORAGE = 'interval_save_in_storage';
4849
var SETTINGS_INTERVAL_RANGE = 'range_days';
50+
var SETTINGS_DARK_MODE = 'night_mode';
4951
var SETTINGS_VIEW_TIME_IN_BADGE = 'view_time_in_badge';
5052
var SETTINGS_SHOW_HINT = 'show_hint';
5153

‎src/scripts/settings.js‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@ var storage = new LocalStorage();
22
var blackList = [];
33
var restrictionList = [];
44
var notifyList = [];
5-
var blockBtnList = ['settingsBtn', 'restrictionsBtn', 'notifyBtn', 'aboutBtn'];
6-
var blockList = ['settingsBlock', 'restrictionsBlock', 'notifyBlock', 'aboutBlock'];
5+
var blockBtnList = ['settingsBtn', 'restrictionsBtn', 'notifyBtn', 'aboutBtn', 'donateBtn'];
6+
var blockList = ['settingsBlock', 'restrictionsBlock', 'notifyBlock', 'aboutBlock', 'donateBlock'];
77

88
document.addEventListener('DOMContentLoaded', function () {
99
document.getElementById('settingsBtn').addEventListener('click', function () {
@@ -19,6 +19,9 @@ document.addEventListener('DOMContentLoaded', function () {
1919
setBlockEvent('aboutBtn', 'aboutBlock');
2020
loadVersion();
2121
});
22+
document.getElementById('donateBtn').addEventListener('click', function () {
23+
setBlockEvent('donateBtn', 'donateBlock');
24+
});
2225
document.getElementById('clearAllData').addEventListener('click', function () {
2326
clearAllData();
2427
});
@@ -46,6 +49,9 @@ document.addEventListener('DOMContentLoaded', function () {
4649
document.getElementById('viewTimeInBadge').addEventListener('change', function () {
4750
storage.saveValue(SETTINGS_VIEW_TIME_IN_BADGE, this.checked);
4851
});
52+
document.getElementById('darkMode').addEventListener('change', function () {
53+
storage.saveValue(SETTINGS_DARK_MODE, this.checked);
54+
});
4955
document.getElementById('intervalInactivity').addEventListener('change', function () {
5056
storage.saveValue(SETTINGS_INTERVAL_INACTIVITY, this.value);
5157
});
@@ -94,6 +100,9 @@ function loadSettings() {
94100
storage.getValue(SETTINGS_VIEW_TIME_IN_BADGE, function (item) {
95101
document.getElementById('viewTimeInBadge').checked = item;
96102
});
103+
storage.getValue(SETTINGS_DARK_MODE, function (item) {
104+
document.getElementById('darkMode').checked = item;
105+
});
97106
storage.getMemoryUse(STORAGE_TABS, function (integer) {
98107
document.getElementById('memoryUse').innerHTML = (integer / 1024).toFixed(2) + 'Kb';
99108
});

‎src/scripts/ui.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -117,6 +117,10 @@ class UI {
117117
.variable('percentage')
118118
.category('url');
119119

120+
if (setting_dark_mode)
121+
donut.darkMode(true);
122+
else donut.darkMode(false);
123+
120124
d3.select('#chart')
121125
.datum(tabs) // bind data to the div
122126
.call(donut); // draw chart in div
@@ -396,6 +400,11 @@ class UI {
396400
document.getElementById('preloader').classList.add('preloader');
397401
}
398402

403+
setMode(){
404+
if (setting_dark_mode)
405+
document.body.classList.add('night-mode');
406+
}
407+
399408
removePreloader() {
400409
document.getElementById('preloader').classList.remove('preloader');
401410
document.getElementById('preloader').classList.add('hide');

‎src/scripts/webact.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ var targetTabs;
99
var currentTypeOfList;
1010
var today = new Date().toLocaleDateString("en-US");
1111
var setting_range_days;
12+
var setting_dark_mode;
1213
var restrictionList;
1314
var stat = {
1415
set firstDay(value) {
@@ -95,6 +96,8 @@ firstInitPage();
9596

9697
function firstInitPage() {
9798
chrome.runtime.getBackgroundPage(function(bg) {
99+
setting_dark_mode = bg.setting_dark_mode;
100+
ui.setMode();
98101
tabsFromBackground = bg.tabs;
99102
currentTypeOfList = TypeListEnum.ToDay;
100103
getLimitsListFromStorage();

0 commit comments

Comments
 (0)