Skip to content

Commit 6c4d62b

Browse files
hai-altx-softhai-altx-soft
committed
Add settings page
1 parent 440dbe1 commit 6c4d62b

File tree

9 files changed

+152
-53
lines changed

9 files changed

+152
-53
lines changed

‎icons/information.png‎

553 Bytes
Loading

‎options.html‎

Lines changed: 54 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -5,51 +5,70 @@
55
<meta charset="utf-8">
66
<title>WebActivity Time Tracker</title>
77
<link href="style/settings.css" rel="stylesheet" />
8+
<script src="scripts/storage.js"></script>
9+
<script src="scripts/settings.js"></script>
810
</head>
911

1012
<body>
1113
<div class="content">
1214
<div class="header">
1315
<p class="title">Web Activity Time Tracker</p>
1416
</div>
15-
<div id="nav" class="nav">
16-
<a class="active">Settings</a>
17-
<a>About</a>
17+
<div id='nav' class="nav">
18+
<a id='settingsBtn' class="active">Settings</a>
19+
<a id='aboutBtn'>About</a>
1820
</div>
19-
<div>
20-
<label>
21-
<input type="checkbox" class="filled-in" id="chk-demo3" checked="checked" />
22-
<span>Display time tracker in icon</span>
23-
</label>
24-
<div class="margin-top-10"><label>Stop tracking if no activity detected for:</label></div>
25-
<div class="margin-top-10">
26-
<select id="timeToStopTracking" class="option">
27-
<option value="0.33">30 seconds</option>
28-
<option value="0.45">45 seconds</option>
29-
<option value="1">1 min</option>
30-
<option value="2">2 min</option>
31-
<option value="5">5 mins</option>
32-
<option value="10">10 mins</option>
33-
<option value="15">15 mins</option>
34-
<option value="20">20 mins</option>
35-
<option value="30">30 mins</option>
36-
</select>
21+
<div id='block'>
22+
<div id="settingsBlock">
23+
<label>
24+
<input type="checkbox" class="filled-in" id="chk-demo3" checked="checked" />
25+
<span>Display time tracker in icon</span>
26+
</label>
27+
<div class="margin-top-10">
28+
<label>Stop tracking if no activity detected for: </label>
29+
<div class="tooltip"><img src="/icons/information.png" />
30+
<span class="tooltiptext">An activity is an action with a mouse or keyboard</span>
31+
</div>
32+
<div class="margin-top-10">
33+
<select id='timeToStopTracking' class="option">
34+
<option value="0.33">30 seconds</option>
35+
<option value="0.45">45 seconds</option>
36+
<option value="1">1 min</option>
37+
<option value="2">2 min</option>
38+
<option value="5">5 mins</option>
39+
<option value="10">10 mins</option>
40+
<option value="15">15 mins</option>
41+
<option value="20">20 mins</option>
42+
<option value="30">30 mins</option>
43+
</select>
44+
</div>
45+
<div class="margin-top-10"><label>Default range for days:</label></div>
46+
<div class="margin-top-10">
47+
<select id='rangeToDays' class="option">
48+
<option value="2days">2 days</option>
49+
<option value="3days">3 days</option>
50+
<option value="4days">4 days</option>
51+
<option value="5days">5 days</option>
52+
<option value="6days">6 days</option>
53+
<option value="7days">7 days</option>
54+
<option value="1month">1 month</option>
55+
<option value="2month">2 month</option>
56+
<option value="3month">3 month</option>
57+
</select>
58+
</div>
59+
<div class="margin-top-10"><input type="button" value="Clear all data"></div>
60+
</div>
3761
</div>
38-
<div class="margin-top-10"><label>Default range for days:</label></div>
39-
<div class="margin-top-10">
40-
<select id="rangeToDays" class="option">
41-
<option value="2days">2 days</option>
42-
<option value="3days">3 days</option>
43-
<option value="4days">4 days</option>
44-
<option value="5days">5 days</option>
45-
<option value="6days">6 days</option>
46-
<option value="7days">7 days</option>
47-
<option value="1month">1 month</option>
48-
<option value="2month">2 month</option>
49-
<option value="3month">3 month</option>
50-
</select>
62+
<div id='aboutBlock' hidden>
63+
<div><label id='version'>v0.0.1</label></div>
64+
<div class="margin-top-20">
65+
<label>If experiencing problems, having questions or suggestions, please fill out <a href="https://chrome.google.com/webstore/detail/webtime-tracker/fohgfakiidklhicnjedbohplegpnmbch/support" target="_blank">support
66+
form</a>.</label>
67+
</div>
68+
<div class="margin-top-20">
69+
<label>Do you enjoy using Web Activity Time Tracker? <a href="https://chrome.google.com/webstore/detail/webtime-tracker/fohgfakiidklhicnjedbohplegpnmbch/reviews" target="_blank">Let me know!</a></label>
70+
</div>
5171
</div>
52-
<div class="margin-top-10"><input type="button" value="Clear all data"></div>
5372
</div>
5473
</div>
5574
</body>

‎scripts/background.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ function backgroundCheck() {
4343

4444
function backgroundUpdateStorage() {
4545
if (tabs.length > 0)
46-
storage.save(tabs);
46+
storage.saveTabs(tabs);
4747
}
4848

4949
function addListener() {

‎scripts/chart/chart-core.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -91,8 +91,8 @@ function donutChart() {
9191

9292
var currentAngle = midAngle(d);
9393
if (angleIsInRangeDifference(tempAngle, currentAngle, 2)){
94-
tempOffset.x -= 0.1;
95-
tempOffset.y += 0.1;
94+
tempOffset.x -= 0.07;
95+
tempOffset.y += 0.07;
9696
tempAngle = 0;
9797
}
9898

@@ -128,8 +128,8 @@ function donutChart() {
128128

129129
var currentAngle = midAngle(d);
130130
if (angleIsInRangeDifference(tempAngle, currentAngle, 2)){
131-
tempOffset.x -= 0.1;
132-
tempOffset.y += 0.1;
131+
tempOffset.x -= 0.07;
132+
tempOffset.y += 0.07;
133133
tempAngle = 0;
134134
}
135135

‎scripts/common.js‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,17 @@
11
var STORAGE_TABS = 'tabs';
2-
var SETTINGS_INTERVAL_INACTIVITY = 30;
3-
var SETTINGS_INTERVAL_CHECK = 1000;
4-
var SETTINGS_INTERVAL_SAVE_STORAGE = 3000;
5-
var SETTINGS_INTERVAL_CHECK_STORAGE = 3000;
2+
3+
var SETTINGS_INTERVAL_INACTIVITY_DEFAULT = 30;
4+
var SETTINGS_INTERVAL_CHECK_DEFAULT = 1000;
5+
var SETTINGS_INTERVAL_SAVE_STORAGE_DEFAULT = 3000;
6+
var SETTINGS_INTERVAL_CHECK_STORAGE_DEFAULT = 3000;
7+
var SETTINGS_INTERVAL_RANGE_DEFAULT = 7;
8+
var SETTINGS_VIEW_TIME_IN_BADGE_DEFAULT = true;
9+
10+
var SETTINGS_INTERVAL_INACTIVITY = 'inactivity_interval';
11+
var SETTINGS_INTERVAL_CHECK = 'interval_check';
12+
var SETTINGS_INTERVAL_SAVE_STORAGE = 'interval_save_in_storage';
13+
var SETTINGS_INTERVAL_RANGE = 'range_days';
14+
var SETTINGS_VIEW_TIME_IN_BADGE = 'view_time_in_badge';
615

716
var TypeListEnum = {
817
ToDay: 1,

‎scripts/settings.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
var storage = new LocalStorage();
2+
3+
document.addEventListener('DOMContentLoaded', function () {
4+
document.getElementById('settingsBtn').addEventListener('click', function () {
5+
document.getElementById('settingsBtn').classList.add('active');
6+
document.getElementById('aboutBtn').classList.remove('active');
7+
8+
document.getElementById('settingsBlock').hidden = false;
9+
document.getElementById('aboutBlock').hidden = true;
10+
});
11+
document.getElementById('aboutBtn').addEventListener('click', function () {
12+
document.getElementById('settingsBtn').classList.remove('active');
13+
document.getElementById('aboutBtn').classList.add('active');
14+
15+
document.getElementById('settingsBlock').hidden = true;
16+
document.getElementById('aboutBlock').hidden = false;
17+
});
18+
});
19+
20+
loadSettings();
21+
22+
function loadSettings(){
23+
var options = storage.getSettings();
24+
}

‎scripts/storage.js‎

Lines changed: 17 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,29 @@
11
'use strict';
22

33
class LocalStorage {
4-
load(name, callback){
5-
chrome.storage.local.get(name, function (item){
6-
if (item[name] !== undefined){
4+
loadTabs(name, callback) {
5+
chrome.storage.local.get(name, function (item) {
6+
if (item[name] !== undefined) {
77
var result = JSON.parse(item[name]);
88
if (result !== undefined)
99
callback(result);
1010
}
1111
});
1212
}
1313

14-
save(value){
15-
chrome.storage.local.set({tabs: JSON.stringify(value)});
14+
saveTabs(value) {
15+
chrome.storage.local.set({ tabs: JSON.stringify(value) });
16+
}
17+
18+
saveSettings(name, value) {
19+
chrome.storage.local.set({ name: value });
20+
}
21+
22+
getSettings(name, callback) {
23+
chrome.storage.local.get(name, function(item){
24+
if (item !== undefined){
25+
callback(item.name);
26+
}
27+
});
1628
}
1729
};

‎scripts/webact.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,11 +41,11 @@ function firstInitPage() {
4141
}
4242

4343
function getDataFromStorage() {
44-
storage.load(STORAGE_TABS, getTabsFromStorage);
44+
storage.loadTabs(STORAGE_TABS, getTabsFromStorage);
4545
}
4646

4747
function getDataFromStorageByDays() {
48-
storage.load(STORAGE_TABS, getTabsByDays);
48+
storage.loadTabs(STORAGE_TABS, getTabsByDays);
4949
}
5050

5151
function getTabsFromStorage(tabs) {

‎style/settings.css‎

Lines changed: 37 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -185,7 +185,11 @@ input[type="button"]:hover {
185185
margin-top: 10px;
186186
}
187187

188-
select {
188+
.margin-top-20{
189+
margin-top: 20px;
190+
}
191+
192+
select {
189193
min-width: 170px;
190194
color: #444;
191195
background: #fff;
@@ -196,4 +200,35 @@ input[type="button"]:hover {
196200
border-color: #ccc;
197201
position: relative;
198202
cursor: pointer;
199-
}
203+
}
204+
205+
.tooltip {
206+
position: relative;
207+
display: inline-block;
208+
}
209+
210+
/* Tooltip text */
211+
.tooltip .tooltiptext {
212+
visibility: hidden;
213+
width: 250px;
214+
background-color: #555;
215+
color: #fff;
216+
text-align: center;
217+
padding: 5px 0;
218+
border-radius: 6px;
219+
220+
/* Position the tooltip text */
221+
position: absolute;
222+
z-index: 1;
223+
transform: translateX(-50%) translateY(-150%);
224+
225+
/* Fade in tooltip */
226+
opacity: 0;
227+
transition: opacity 0.3s;
228+
}
229+
230+
/* Show the tooltip text when you mouse over the tooltip container */
231+
.tooltip:hover .tooltiptext {
232+
visibility: visible;
233+
opacity: 1;
234+
}

0 commit comments

Comments
 (0)