Skip to content

Commit b06236e

Browse files
StigmatozStigmatoz
committed
add settings page
1 parent ddb85a6 commit b06236e

File tree

6 files changed

+267
-1
lines changed

6 files changed

+267
-1
lines changed

‎index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
<a class="active" id="btnToday">Today</a>
2323
<a id="btnAll">All</a>
2424
<a id="btnByDays">By days</a>
25+
<a id="settings">Settings</a>
2526
</div>
2627
<div id="chart"></div>
2728
<div id="resultTable" class="list-of-site"></div>

‎manifest.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@
88
"minimum_chrome_version": "26",
99

1010
"description": "A plain text description",
11+
12+
"options_page": "options.html",
1113

1214
"icons": {
1315
"16": "icons/16x16.png",

‎options.html‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>WebActivity Time Tracker</title>
7+
<link href="style/settings.css" rel="stylesheet" />
8+
</head>
9+
10+
<body>
11+
<div class="content">
12+
<div class="header">
13+
<p class="title">Web Activity Time Tracker</p>
14+
</div>
15+
<div id="nav" class="nav">
16+
<a class="active">Settings</a>
17+
<a>About</a>
18+
</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>
37+
</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>
51+
</div>
52+
<div class="margin-top-10"><input type="button" value="Clear all data"></div>
53+
</div>
54+
</div>
55+
</body>
56+
57+
</html>

‎scripts/webact.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,13 @@ document.addEventListener('DOMContentLoaded', function () {
2424
ui.setUIForByDays();
2525
getDataFromStorageByDays();
2626
});
27+
document.getElementById('settings').addEventListener('click', function () {
28+
if (chrome.runtime.openOptionsPage) {
29+
chrome.runtime.openOptionsPage();
30+
} else {
31+
window.open(chrome.runtime.getURL('options.html'));
32+
}
33+
});
2734
});
2835

2936
firstInitPage();

‎style/settings.css‎

Lines changed: 199 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,199 @@
1+
body {
2+
font-family: "Segoe UI", Tahoma, sans-serif !important;
3+
color: #262626;
4+
}
5+
6+
.content {
7+
width: 750px;
8+
margin: 50px auto;
9+
display: grid;
10+
grid-template-columns: 200px auto;
11+
grid-column-gap: 40px;
12+
grid-template-areas: 'h h' 'n m';
13+
}
14+
15+
.title{
16+
font-size: 23px;
17+
font-weight: 650;
18+
}
19+
20+
.header{
21+
grid-area: h;
22+
margin: 0 0 50px;
23+
font-size: 20px;
24+
}
25+
26+
a {
27+
color: #3477db;
28+
text-decoration: none;
29+
cursor: pointer;
30+
}
31+
32+
.nav{
33+
grid-area: n;
34+
border-right: 1px solid #ddd;
35+
padding-right: 15px;
36+
align-self: start;
37+
}
38+
39+
.nav a {
40+
font-size: 16px;
41+
margin-bottom: 20px;
42+
color: #888;
43+
display: block;
44+
}
45+
46+
.nav a:hover {
47+
font-size: 16px;
48+
margin-bottom: 20px;
49+
color: #3477db;
50+
display: block;
51+
font-weight: 650;
52+
}
53+
54+
.nav .active {
55+
color: #3477db;
56+
font-weight: bold;
57+
}
58+
59+
label{
60+
font-size: 14px;
61+
}
62+
63+
[type="checkbox"]:not(:checked),[type="checkbox"]:checked {
64+
position: absolute;
65+
opacity: 0;
66+
pointer-events: none
67+
}
68+
69+
[type="checkbox"]+span {
70+
position: relative;
71+
padding-left: 35px;
72+
cursor: pointer;
73+
display: inline-block;
74+
height: 25px;
75+
line-height: 25px;
76+
font-size: 14px;
77+
-webkit-user-select: none;
78+
-moz-user-select: none;
79+
-ms-user-select: none;
80+
user-select: none
81+
}
82+
83+
[type="checkbox"]+span:before,[type="checkbox"]:not(.filled-in)+span:after {
84+
content: '';
85+
position: absolute;
86+
top: 0;
87+
left: 0;
88+
width: 18px;
89+
height: 18px;
90+
z-index: 0;
91+
border: 2px solid #5a5a5a;
92+
border-radius: 1px;
93+
margin-top: 3px;
94+
}
95+
96+
[type="checkbox"]:not(:checked):disabled+span:before {
97+
border: none;
98+
background-color: rgba(0,0,0,0.42)
99+
}
100+
101+
[type="checkbox"]:checked:disabled+span:before {
102+
border-right: 2px solid rgba(0,0,0,0.42);
103+
border-bottom: 2px solid rgba(0,0,0,0.42)
104+
}
105+
106+
[type="checkbox"].filled-in+span:after {
107+
border-radius: 2px
108+
}
109+
110+
[type="checkbox"].filled-in+span:before,[type="checkbox"].filled-in+span:after {
111+
content: '';
112+
left: 0;
113+
position: absolute;
114+
z-index: 1
115+
}
116+
117+
[type="checkbox"].filled-in:not(:checked)+span:before {
118+
width: 0;
119+
height: 0;
120+
border: 3px solid transparent;
121+
left: 6px;
122+
top: 10px;
123+
-webkit-transform: rotateZ(37deg);
124+
transform: rotateZ(37deg);
125+
-webkit-transform-origin: 100% 100%;
126+
transform-origin: 100% 100%
127+
}
128+
129+
[type="checkbox"].filled-in:not(:checked)+span:after {
130+
height: 17px;
131+
width: 17px;
132+
background-color: transparent;
133+
border: 2px solid #5a5a5a;
134+
top: 0px;
135+
z-index: 0
136+
}
137+
138+
[type="checkbox"].filled-in:checked+span:before {
139+
top: -3px;
140+
left: -2px;
141+
width: 7px;
142+
height: 12px;
143+
border-top: 3px solid transparent;
144+
border-left: 3px solid transparent;
145+
border-right: 3px solid #fff;
146+
border-bottom: 3px solid #fff;
147+
-webkit-transform: rotateZ(35deg);
148+
transform: rotateZ(35deg);
149+
-webkit-transform-origin: 100% 100%;
150+
transform-origin: 100% 100%
151+
}
152+
153+
[type="checkbox"].filled-in:checked+span:after {
154+
top: 0;
155+
width: 17px;
156+
height: 17px;
157+
border: 2px solid #3477db;
158+
background-color: #3477db;
159+
z-index: 0
160+
}
161+
162+
input[type="button"]{
163+
background: #3477db;
164+
color: #fff;
165+
border-radius: 3px;
166+
height: 40px;
167+
line-height: 40px;
168+
padding: 0 20px;
169+
display: inline-block;
170+
border: 0;
171+
font-size: 14px;
172+
font-weight: 500;
173+
cursor: pointer;
174+
min-width: 80px;
175+
text-align: center;
176+
width: 170px;
177+
}
178+
179+
input[type="button"]:hover {
180+
background: #5c9dfe;
181+
text-decoration: none;
182+
}
183+
184+
.margin-top-10{
185+
margin-top: 10px;
186+
}
187+
188+
select {
189+
min-width: 170px;
190+
color: #444;
191+
background: #fff;
192+
border-radius: 3px;
193+
margin: 0;
194+
padding: 10px 30px 10px 15px;
195+
font-size: 14px;
196+
border-color: #ccc;
197+
position: relative;
198+
cursor: pointer;
199+
}

‎style/webact.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,7 @@ a{
101101

102102
border-bottom: 2px solid rgb(184, 179, 179);
103103
background: transparent;
104-
width: 30%;
104+
width: 21%;
105105
}
106106

107107
a:hover {

0 commit comments

Comments
 (0)