Skip to content

Commit 9c2c905

Browse files
StigmatozStigmatoz
committed
Some UI improvements for settings
1 parent 82030b9 commit 9c2c905

File tree

4 files changed

+97
-76
lines changed

4 files changed

+97
-76
lines changed

‎src/options.html‎

Lines changed: 72 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -29,39 +29,39 @@
2929
<div id='block'>
3030
<div id='settingsBlock'>
3131
<label>
32-
<input type="checkbox" class="filled-in" id="viewTimeInBadge" checked="checked" />
33-
<span>Display time tracker in icon</span>
34-
</label>
32+
<input type="checkbox" class="filled-in" id="viewTimeInBadge" checked="checked" />
33+
<span>Display time tracker in icon</span>
34+
</label>
3535
<div class="margin-top-10">
3636
<label>Stop tracking if no activity detected for: </label>
3737
<div class="tooltip"><img src="/icons/information.svg" height="18" />
3838
<span class="tooltiptext">An activity is an action with a mouse or keyboard</span>
3939
</div>
4040
<div class="margin-top-10">
4141
<select id='intervalInactivity' class="option">
42-
<option value="30">30 seconds</option>
43-
<option value="45">45 seconds</option>
44-
<option value="60">1 min</option>
45-
<option value="120">2 min</option>
46-
<option value="300">5 mins</option>
47-
<option value="600">10 mins</option>
48-
<option value="1200">20 mins</option>
49-
<option value="1800">30 mins</option>
50-
</select>
42+
<option value="30">30 seconds</option>
43+
<option value="45">45 seconds</option>
44+
<option value="60">1 min</option>
45+
<option value="120">2 min</option>
46+
<option value="300">5 mins</option>
47+
<option value="600">10 mins</option>
48+
<option value="1200">20 mins</option>
49+
<option value="1800">30 mins</option>
50+
</select>
5151
</div>
5252
<div class="margin-top-10"><label>Default range for days:</label></div>
5353
<div class="margin-top-10">
5454
<select id='rangeToDays' class="option">
55-
<option value="days2">2 days</option>
56-
<option value="days3">3 days</option>
57-
<option value="days4">4 days</option>
58-
<option value="days5">5 days</option>
59-
<option value="days6">6 days</option>
60-
<option value="days7">7 days</option>
61-
<option value="month1">1 month</option>
62-
<option value="month2">2 month</option>
63-
<option value="month3">3 month</option>
64-
</select>
55+
<option value="days2">2 days</option>
56+
<option value="days3">3 days</option>
57+
<option value="days4">4 days</option>
58+
<option value="days5">5 days</option>
59+
<option value="days6">6 days</option>
60+
<option value="days7">7 days</option>
61+
<option value="month1">1 month</option>
62+
<option value="month2">2 month</option>
63+
<option value="month3">3 month</option>
64+
</select>
6565
</div>
6666
<div class="margin-top-10">
6767
<label>Ignored list of domain: </label>
@@ -84,32 +84,32 @@
8484
</div>
8585
<!-- YouTube -->
8686
<div class="margin-top-10">
87-
<label class="block">Web Activity Time Tracker tracks your activity, if you active in browser (mouse
88-
or keyboard).
89-
In order for the extension to also track when you watch a video on YouTube / Netflix, you need grant
90-
permission to
91-
access the sites.
92-
It is necessary that extension will get access to DOM (Document Object Model).</label>
87+
<label class="block">Web Activity Time Tracker tracks your activity, if you active in browser
88+
(mouse
89+
or keyboard).
90+
In order for the extension to also track when you watch <span class="bold">a video on
91+
YouTube / Netflix</span>, you need grant
92+
permission to
93+
access the sites.
94+
It is necessary that extension will get access to DOM (Document Object Model).</label>
9395
</div>
9496
<div class="margin-top-10">
95-
<label class="block">YouTube</label>
96-
<input class="margin-top-10" type="button" value="Grant permission" id='grantPermissionForYT'>
97-
<div class="inline-block">
98-
<div id='permissionSuccessedBlockForYT' hidden>
99-
<img src="/icons/success.png" height="18" />
100-
<label>Permissions have been granted</label>
101-
</div>
97+
<label class="bold site-name">YouTube</label>
98+
<input class="margin-top-10 permission-btn" type="button" value="Grant permission"
99+
id='grantPermissionForYT'>
100+
<div id='permissionSuccessedBlockForYT' hidden>
101+
<img src="/icons/success.png" height="18" />
102+
<label>Permissions have been granted</label>
102103
</div>
103104
</div>
104105
<!-- Netflix -->
105106
<div class="margin-top-10">
106-
<label class="block">Netflix</label>
107-
<input class="margin-top-10" type="button" value="Grant permission" id='grantPermissionForNetflix'>
108-
<div class="inline-block">
109-
<div id='permissionSuccessedBlockForNetflix' hidden>
110-
<img src="/icons/success.png" height="18" />
111-
<label>Permissions have been granted</label>
112-
</div>
107+
<label class="bold site-name">Netflix</label>
108+
<input class="margin-top-10 permission-btn" type="button" value="Grant permission"
109+
id='grantPermissionForNetflix'>
110+
<div id='permissionSuccessedBlockForNetflix' hidden>
111+
<img src="/icons/success.png" height="18" />
112+
<label>Permissions have been granted</label>
113113
</div>
114114
</div>
115115
<div class="margin-top-10">
@@ -124,11 +124,13 @@
124124
<div id='restrictionsBlock' hidden>
125125
<label>Access daily restrictions for websites: </label>
126126
<div class="tooltip"><img src="/icons/information.svg" height="18" />
127-
<span class="tooltiptext">Set the time you can spend on the site during the day. After this time, access
128-
to the site will be blocked.</span>
127+
<span class="tooltiptext">Set the time you can spend on the site during the day. After this time,
128+
access
129+
to the site will be blocked.</span>
129130
</div>
130131
<div class="margin-top-10">
131-
<input type="text" class="label-with-list" placeholder="Enter site name..." id='addRestrictionSiteLbl' />
132+
<input type="text" class="label-with-list" placeholder="Enter site name..."
133+
id='addRestrictionSiteLbl' />
132134
<div class="inline-block clockpicker" data-placement="left" data-align="top" data-autoclose="true">
133135
<input type="text" class="clock" placeholder="Time..." readonly id="addRestrictionTimeLbl">
134136
</div>
@@ -145,7 +147,7 @@
145147
<label>List of sites with notifications: </label>
146148
<div class="tooltip"><img src="/icons/information.svg" height="18" />
147149
<span class="tooltiptext">Show notifications every time you spend a specified time interval on the
148-
site</span>
150+
site</span>
149151
</div>
150152
<div class="margin-top-10">
151153
<input type="text" class="label-with-list" placeholder="Enter site name..." id='addNotifySiteLbl' />
@@ -168,14 +170,14 @@
168170
</div>
169171
</div>
170172
<div class="margin-top-10">
171-
<label class="block">In order to Web Activity Time Tracker showed notifications every time you spend a specified time interval on the site, you need grant permission to access for notifications.
172-
</label>
173-
<input class="margin-top-10" type="button" value="Grant permission" id='grantPermissionForNotifications'>
174-
<div class="inline-block">
175-
<div id='permissionSuccessedBlockForNotifications' hidden>
176-
<img src="/icons/success.png" height="18" />
177-
<label>Permissions have been granted</label>
178-
</div>
173+
<label class="block">In order to Web Activity Time Tracker showed notifications every time you spend
174+
a specified time interval on the site, you need grant permission to access for notifications.
175+
</label>
176+
<input class="margin-top-10 permission-btn" type="button" value="Grant permission"
177+
id='grantPermissionForNotifications'>
178+
<div id='permissionSuccessedBlockForNotifications' hidden>
179+
<img src="/icons/success.png" height="18" />
180+
<label>Permissions have been granted</label>
179181
</div>
180182
</div>
181183
<div class="notify warning notify-width-300" id='notifyForNotifyList' hidden>
@@ -184,33 +186,35 @@
184186
</div>
185187
<div id='aboutBlock' hidden>
186188
<div><label id='version'></label></div>
187-
<div class="margin-top-20"><label>GitHub: <a href="https://github.com/Stigmatoz/web-activity-time-tracker"
188-
target="_blank">github.com/Stigmatoz/web-activity-time-tracker</a></label>
189+
<div class="margin-top-20"><label>GitHub: <a
190+
href="https://github.com/Stigmatoz/web-activity-time-tracker"
191+
target="_blank">github.com/Stigmatoz/web-activity-time-tracker</a></label>
189192
</div>
190-
<div class="margin-top-20"><label>If you have feedback or would like to report an issue, you can do so on
191-
the <a href="https://github.com/Stigmatoz/web-activity-time-tracker/issues" target="_blank">GitHub
192-
issues page</a></label>
193+
<div class="margin-top-20"><label>If you have feedback or would like to report an issue, you can do so
194+
on
195+
the <a href="https://github.com/Stigmatoz/web-activity-time-tracker/issues"
196+
target="_blank">GitHub
197+
issues page</a></label>
193198
</div>
194199
<div class="margin-top-20">
195200
<label>If experiencing problems, having questions or suggestions, please fill out <a
196-
href="https://chrome.google.com/webstore/detail/web-activity-time-tracker/hhfnghjdeddcfegfekjeihfmbjenlomm/support"
197-
target="_blank">support
198-
form</a>.</label>
201+
href="https://chrome.google.com/webstore/detail/web-activity-time-tracker/hhfnghjdeddcfegfekjeihfmbjenlomm/support"
202+
target="_blank">support
203+
form</a>.</label>
199204
</div>
200205
<div class="margin-top-20">
201206
<label>Do you enjoy using Web Activity Time Tracker? <a
202-
href="https://chrome.google.com/webstore/detail/web-activity-time-tracker/hhfnghjdeddcfegfekjeihfmbjenlomm/reviews"
203-
target="_blank">Let me know!</a></label>
207+
href="https://chrome.google.com/webstore/detail/web-activity-time-tracker/hhfnghjdeddcfegfekjeihfmbjenlomm/reviews"
208+
target="_blank">Let me know!</a></label>
204209
</div>
205210
<hr class="margin-top-20">
206211
<div class="margin-top-20">
207212
<label>You can support Web Activity Time Tracker by donating:</label>
208213
<div class="margin-top-20">
209214
<div class="inline-block">
210-
<a class="bmc-button" target="_blank" href="https://www.buymeacoffee.com/webtracker"><img src="/icons/bmc-new-btn-logo.svg" alt="Buy me a coffee"><span>Buy me a coffee</span></a>
211-
</div>
212-
<div class="inline-block">
213-
<a class="button" target="_blank" href="https://www.patreon.com/bePatron?u=19558753" data-patreon-widget-type="become-patron-button">Become a Patron!</a>
215+
<a class="bmc-button" target="_blank" href="https://www.buymeacoffee.com/webtracker"><img
216+
src="/icons/bmc-new-btn-logo.svg" alt="Buy me a coffee"><span>Buy me a
217+
coffee</span></a>
214218
</div>
215219
</div>
216220
</div>

‎src/scripts/settings.js‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -196,17 +196,20 @@ function grantPermissionForNotifications() {
196196

197197
function setUIForAnyPermissionForYT() {
198198
document.getElementById('permissionSuccessedBlockForYT').hidden = false;
199-
document.getElementById('grantPermissionForYT').setAttribute('disabled', 'true');
199+
document.getElementById('permissionSuccessedBlockForYT').classList.add('inline-block');
200+
document.getElementById('grantPermissionForYT').hidden = true;
200201
}
201202

202203
function setUIForAnyPermissionForNetflix() {
203204
document.getElementById('permissionSuccessedBlockForNetflix').hidden = false;
204-
document.getElementById('grantPermissionForNetflix').setAttribute('disabled', 'true');
205+
document.getElementById('permissionSuccessedBlockForNetflix').classList.add('inline-block');
206+
document.getElementById('grantPermissionForNetflix').hidden = true;
205207
}
206208

207209
function setUIForAnyPermissionForNotifications() {
208210
document.getElementById('permissionSuccessedBlockForNotifications').hidden = false;
209-
document.getElementById('grantPermissionForNotifications').setAttribute('disabled', 'true');
211+
document.getElementById('permissionSuccessedBlockForNotifications').classList.add('inline-block');
212+
document.getElementById('grantPermissionForNotifications').hidden = true;
210213
}
211214

212215
function viewNotificationList(items) {

‎src/style/settings.css‎

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -164,10 +164,9 @@ input[type="button"]{
164164
background: #3477db;
165165
color: #fff;
166166
border-radius: 3px;
167-
height: 40px;
168-
line-height: 40px;
167+
height: 35px;
168+
line-height: 35px;
169169
padding: 0 20px;
170-
display: inline-block;
171170
border: 0;
172171
font-size: 14px;
173172
font-weight: 500;
@@ -246,7 +245,7 @@ input[type="button"]:hover {
246245
}
247246

248247
.hidden{
249-
display: none;
248+
display: none !important;
250249
}
251250

252251
.notify{
@@ -443,4 +442,19 @@ input[type="button"]:hover {
443442
.setting-notify-block .setting-notify-message-block{
444443
display: inline-block;
445444
position: absolute;
445+
}
446+
447+
.bold{
448+
font-weight: 650;
449+
}
450+
451+
.site-name{
452+
display: inline-block;
453+
width: 100px;
454+
}
455+
456+
.permission-btn{
457+
height: 25px !important;
458+
line-height: 25px !important;
459+
background-color:green !important;
446460
}

‎src/style/webact.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -479,7 +479,7 @@ input[type='checkbox'] {
479479
position: absolute;
480480
z-index: 98;
481481
width: 300px;
482-
height: 140px;
482+
height: 160px;
483483
}
484484

485485
.hint-for-settings::before {

0 commit comments

Comments
 (0)