Skip to content

Commit 437a775

Browse files
StigmatozStigmatoz
committed
Add several settings and add general css
1 parent c3d1784 commit 437a775

File tree

7 files changed

+75
-116
lines changed

7 files changed

+75
-116
lines changed

‎src/assets/css/general.css‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
.float-right {
2+
float: right;
3+
}
4+
.d-inline-block {
5+
display: inline-block;
6+
}
7+
.ml-10 {
8+
margin-left: 10px;
9+
}
10+
.mr-10 {
11+
margin-right: 10px;
12+
}
13+
.mr-5 {
14+
margin-right: 5px;
15+
}
16+
.pr-5{
17+
padding-right: 5px;
18+
}
19+
.p-5{
20+
padding: 5px;
21+
}
22+
.text-right {
23+
text-align: right;
24+
}
25+
.text-center {
26+
text-align: center;
27+
}
28+
29+
.mt-15{
30+
margin-top: 15px;
31+
}
32+
select{
33+
border-color: #ccc;
34+
border-radius: 5px;
35+
}

‎src/assets/css/main.css‎

Lines changed: 0 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -24,33 +24,6 @@ body {
2424
padding: 0;
2525
margin: 0;
2626
}
27-
.float-right {
28-
float: right;
29-
}
30-
.display-inline-block {
31-
display: inline-block;
32-
}
33-
.ml-10 {
34-
margin-left: 10px;
35-
}
36-
.mr-10 {
37-
margin-right: 10px;
38-
}
39-
.mr-5 {
40-
margin-right: 5px;
41-
}
42-
.pr-5{
43-
padding-right: 5px;
44-
}
45-
.p-5{
46-
padding: 5px;
47-
}
48-
.text-right {
49-
text-align: right;
50-
}
51-
.text-center {
52-
text-align: center;
53-
}
5427
.no-data{
5528
text-align: center;
5629
font-size: 16px;

‎src/assets/css/settings.css‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -25,10 +25,6 @@ body {
2525
margin: 7px 0 15px 0;
2626
}
2727

28-
.mt-15{
29-
margin-top: 15px;
30-
}
31-
3228
.option {
3329
min-width: 170px;
3430
color: #444;
@@ -208,10 +204,6 @@ input[type="button"]:hover {
208204
padding: 10px;
209205
}
210206

211-
.inline-block{
212-
display: inline-block !important;
213-
}
214-
215207
.block{
216208
display: block;
217209
}

‎src/assets/icons/information.svg‎

Lines changed: 0 additions & 44 deletions
This file was deleted.

‎src/pages/Settings.vue‎

Lines changed: 34 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -23,38 +23,41 @@
2323
</label>
2424
<br />
2525
<label class="setting-header">
26-
<input type="checkbox" class="filled-in" id="blockDeferral" />
26+
<input
27+
type="checkbox"
28+
class="filled-in"
29+
id="blockDeferral"
30+
v-model="allowDeferringBlock"
31+
/>
2732
<span>Allow deferring block for 5 minutes</span>
2833
<p class="description">
2934
After the site is blocked, you can postpone the blocking for 5 minutes
3035
</p>
3136
</label>
3237
<br />
3338
<label class="setting-header">
34-
<input type="checkbox" class="filled-in" id="darkMode" />
39+
<input type="checkbox" class="filled-in" id="darkMode" v-model="darkMode" />
3540
<span>Dark mode</span>
41+
<p class="description"></p>
42+
</label>
43+
<label class="setting-header d-inline-block"
44+
>Stop tracking if there is no activity during:
3645
</label>
46+
<div class="d-inline-block ml-10">
47+
<select class="option" v-model="intervalInactivity">
48+
<option :value="InactivityInterval.Seconds_30">30 seconds</option>
49+
<option :value="InactivityInterval.Seconds_45">45 seconds</option>
50+
<option :value="InactivityInterval.Min_1">1 min</option>
51+
<option :value="InactivityInterval.Min_2">2 min</option>
52+
<option :value="InactivityInterval.Min_5">5 mins</option>
53+
<option :value="InactivityInterval.Min_10">10 mins</option>
54+
<option :value="InactivityInterval.Min_20">20 mins</option>
55+
<option :value="InactivityInterval.Min_30">30 mins</option>
56+
</select>
57+
</div>
58+
<p class="description">These are any actions with the mouse or keyboard</p>
3759
<br />
3860
<!-- <div class="margin-top-10">
39-
<label class="setting-header">Stop tracking if no activity detected for: </label>
40-
<div class="tooltip">
41-
<img src="../assets/icons/information.svg" height="18" />
42-
<span class="tooltiptext">An activity is an action with a mouse or keyboard</span>
43-
</div>
44-
<div class="margin-top-10">
45-
<select id="intervalInactivity" class="option">
46-
<option value="30">30 seconds</option>
47-
<option value="45">45 seconds</option>
48-
<option value="60">1 min</option>
49-
<option value="120">2 min</option>
50-
<option value="300">5 mins</option>
51-
<option value="600">10 mins</option>
52-
<option value="1200">20 mins</option>
53-
<option value="1800">30 mins</option>
54-
</select>
55-
</div>
56-
<br />
57-
<div class="margin-top-10">
5861
<label class="setting-header">Default range for days:</label>
5962
</div>
6063
<div class="margin-top-10">
@@ -140,16 +143,26 @@
140143
import { watchEffect, onMounted, ref } from 'vue';
141144
import { StorageParams } from '../storage/storage-params';
142145
import { injecStorage } from '../storage/inject-storage';
146+
import { InactivityInterval } from '../storage/storage-params';
143147
144148
const settingsStorage = injecStorage();
145149
146150
const viewTimeInBadge = ref<boolean>();
151+
const intervalInactivity = ref<InactivityInterval>();
152+
const allowDeferringBlock = ref<boolean>();
153+
const darkMode = ref<boolean>();
147154
148155
onMounted(async () => {
149156
viewTimeInBadge.value = await settingsStorage.getValue(StorageParams.VIEW_TIME_IN_BADGE);
157+
intervalInactivity.value = await settingsStorage.getValue(StorageParams.INTERVAL_INACTIVITY);
158+
darkMode.value = await settingsStorage.getValue(StorageParams.DARK_MODE);
159+
allowDeferringBlock.value = await settingsStorage.getValue(StorageParams.BLOCK_DEFERRAL);
150160
});
151161
152162
watchEffect(() => save(StorageParams.VIEW_TIME_IN_BADGE, viewTimeInBadge.value));
163+
watchEffect(() => save(StorageParams.INTERVAL_INACTIVITY, intervalInactivity.value));
164+
watchEffect(() => save(StorageParams.DARK_MODE, darkMode.value));
165+
watchEffect(() => save(StorageParams.BLOCK_DEFERRAL, allowDeferringBlock.value));
153166
154167
function save(storageParam: StorageParams, value: any) {
155168
settingsStorage.saveValue(storageParam, value);

‎src/popup.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,4 +12,5 @@
1212
</body>
1313

1414
<link rel="stylesheet" href="assets/css/main.css" />
15+
<link rel="stylesheet" href="assets/css/general.css" />
1516
</html>

‎src/settings.html‎

Lines changed: 5 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -2,26 +2,15 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
5-
<meta
6-
http-equiv="X-UA-Compatible"
7-
content="IE=edge"
8-
/>
9-
<meta
10-
name="viewport"
11-
content="width=device-width, initial-scale=1.0"
12-
/>
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
137
<title>Settings</title>
148
</head>
159

1610
<body>
17-
<script
18-
type="module"
19-
src="./settings.ts"
20-
></script>
11+
<script type="module" src="./settings.ts"></script>
2112
</body>
2213

23-
<link
24-
rel="stylesheet"
25-
href="assets/css/settings.css"
26-
/>
14+
<link rel="stylesheet" href="assets/css/settings.css" />
15+
<link rel="stylesheet" href="assets/css/general.css" />
2716
</html>

0 commit comments

Comments
 (0)