Skip to content

Commit c26409f

Browse files
StigmatozStigmatoz
committed
Small change UI
1 parent 2f443e7 commit c26409f

File tree

7 files changed

+114
-134
lines changed

7 files changed

+114
-134
lines changed

‎src/index.html‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -34,13 +34,13 @@
3434
<a id="settings">Settings</a>
3535
<div id='hintForUsers' class="hint-for-settings hide">
3636
<div id='closeHintBtn' class="close-hint">✖</div>
37-
<p class="title-block">You can:</p>
38-
<p><span class="arrow">➤</span> enable dark mode</p>
39-
<p><span class="arrow">➤</span> set daily limits for sites</p>
40-
<p><span class="arrow">➤</span> set notifications after a certain time has elapsed</p>
41-
<p><span class="arrow">➤</span> set a list of sites with no tracking</p>
42-
<p><span class="arrow">➤</span> enable time tracking on youtube.com</p>
43-
<p><span class="arrow">➤</span> enable time tracking on Netflix.com</p>
37+
<p class="title-block">In Web Activity Time Tracker you can:</p>
38+
<p><span class="arrow">➤</span> Set daily limits for sites</p>
39+
<p><span class="arrow">➤</span> Set notifications after a certain time has elapsed</p>
40+
<p><span class="arrow">➤</span> Set a list of sites with no tracking</p>
41+
<p><span class="arrow">➤</span> Enable time tracking on YouTube.com</p>
42+
<p><span class="arrow">➤</span> Enable time tracking on Netflix.com</p>
43+
<p><span class="arrow">➤</span> Enable dark mode</p>
4444
</div>
4545
</div>
4646
<div id="stats" class="hide">
@@ -108,7 +108,6 @@
108108
</div>
109109
<div id="timeChart"></div>
110110
<div id="resultTable" class="list-of-site"></div>
111-
<div id="total" class="inline-flex"></div>
112111
<div id="byDays" class="calendar-block"></div>
113112

114113
</body>

‎src/scripts/background.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ function backgroundCheck() {
4242
}
4343

4444
if (activity.isInBlackList(activeUrl)) {
45-
chrome.browserAction.setBadgeBackgroundColor({ color: '#FF0000' })
45+
chrome.browserAction.setBadgeBackgroundColor({ color: '#fdb8b8' })
4646
chrome.browserAction.setBadgeText({
4747
tabId: activeTab.id,
4848
text: 'n/a'
@@ -79,7 +79,7 @@ function mainTRacker(activeUrl, tab, activeTab) {
7979
tab.incSummaryTime();
8080
}
8181
if (setting_view_in_badge === true) {
82-
chrome.browserAction.setBadgeBackgroundColor({ color: '#1aa1434d' })
82+
chrome.browserAction.setBadgeBackgroundColor({ color: '#e7e7e7' })
8383
var summary = tab.days.find(s => s.date === todayLocalDate()).summary;
8484
chrome.browserAction.setBadgeText({
8585
tabId: activeTab.id,

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

Lines changed: 11 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ function donutChart() {
22
var width,
33
height,
44
darkMode,
5-
margin = { top: 10, right: 10, bottom: 10, left: 10 },
5+
margin = { top: 10, right: 10, bottom: 0, left: 10 },
66
colour = d3.scaleOrdinal(d3.schemeCategory20), // colour scheme
77
variable, // value in data that will dictate proportions on chart
88
category, // compare data by
@@ -17,7 +17,7 @@ function donutChart() {
1717

1818
// ===========================================================================================
1919
// Set up constructors for making donut. See https://github.com/d3/d3-shape/blob/master/README.md
20-
var radius = 135;
20+
var radius = 110;
2121

2222
// creates a new pie generator
2323
var pie = d3.pie()
@@ -27,30 +27,19 @@ function donutChart() {
2727
// contructs and arc generator. This will be used for the donut. The difference between outer and inner
2828
// radius will dictate the thickness of the donut
2929
var arc = d3.arc()
30-
.outerRadius(radius * 0.9)
31-
.innerRadius(radius * 0.8)
30+
.outerRadius(radius)
31+
.innerRadius(radius * 0.75)
3232
.cornerRadius(cornerRadius)
3333
.padAngle(padAngle);
3434

35-
// this arc is used for aligning the text labels
36-
var outerArc = d3.arc()
37-
.outerRadius(radius * 0.9)
38-
.innerRadius(radius * 0.9);
39-
// ===========================================================================================
40-
41-
var tempAngle;
42-
var tempOffset = {
43-
x: 1,
44-
y: 0.95
45-
};
4635
// ===========================================================================================
4736
// append the svg object to the selection
4837
var svg = selection.append('svg')
4938
.attr('width', width + margin.left + margin.right)
5039
.attr('height', height + margin.top + margin.bottom)
5140
.attr('class', 'backColorChart')
5241
.append('g')
53-
.attr('transform', 'translate(' + (width / 2 - 105) + ',' + (height / 2 + 12) + ')');
42+
.attr('transform', 'translate(' + (width / 2 - 105) + ',' + (height / 2) + ')');
5443
// ===========================================================================================
5544

5645
// ===========================================================================================
@@ -75,7 +64,7 @@ function donutChart() {
7564
.data(pie(data))
7665
.enter().append("g")
7766
.attr("transform", function (d, i) {
78-
return "translate(" + (130) + "," + (i * 20 - 80) + ")"; // place each legend on the right and bump each one down 15 pixels
67+
return "translate(" + (130) + "," + (i * 20 - 100) + ")"; // place each legend on the right and bump each one down 15 pixels
7968
})
8069
.attr("class", "legend");
8170

@@ -105,9 +94,9 @@ function donutChart() {
10594
return d.data.url;
10695
})
10796
.style("fill", "black")
108-
.style("font-size", 13)
97+
.style("font-size", 14)
10998
.attr("y", 10)
110-
.attr("x", 13);
99+
.attr("x", 15);
111100

112101
// ===========================================================================================
113102
// add tooltip to mouse events on slices and labels
@@ -145,7 +134,7 @@ function donutChart() {
145134
svg.append('circle')
146135
.attr('class', 'toolCircle')
147136
.attr('r', radius * 0.75) // radius of tooltip circle
148-
.style('fill', colour(data.data[category])) // colour based on category mouse is over
137+
.style('fill', 'white') // colour based on category mouse is over
149138
.style('fill-opacity', 0.35);
150139

151140
});
@@ -355,7 +344,7 @@ function drawIntervalChart(data) {
355344
var tickDistance = 4.38;
356345

357346
var tooltip;
358-
if (document.body.classList.contains('night-mode'))
347+
if (document.body.classList.contains('dark-mode'))
359348
tooltip = d3.select("#timeChart")
360349
.append("div")
361350
.style("opacity", 0)
@@ -409,7 +398,7 @@ function drawIntervalChart(data) {
409398

410399
//create the svg
411400
var svg;
412-
if (document.body.classList.contains('night-mode'))
401+
if (document.body.classList.contains('dark-mode'))
413402
svg = d3.select("#timeChart").append("svg")
414403
.style('background-color', '#383838')
415404
.attr("width", width + margin.left + margin.right)

‎src/scripts/common.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,7 @@ function convertShortSummaryTimeToLongString(summaryTime) {
111111
hours = zeroAppend(hours);
112112
mins = zeroAppend(mins);
113113

114-
return hours + ' hour ' + mins + ' minutes';
114+
return `${hours} hour ${mins} minutes`;
115115
}
116116

117117
function getArrayTime(summaryTime) {

‎src/scripts/ui.js‎

Lines changed: 28 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,6 @@ class UI {
4444
document.getElementById('resultTable').innerHTML = null;
4545
document.getElementById('chart').innerHTML = null;
4646
document.getElementById('timeChart').innerHTML = null;
47-
document.getElementById('total').innerHTML = null;
4847
document.getElementById('byDays').innerHTML = null;
4948
}
5049

@@ -62,22 +61,6 @@ class UI {
6261
document.getElementById('labelForTimeInterval').classList.remove('hide');
6362
}
6463

65-
createTotalBlock(totalTime, currentTypeOfList, counter) {
66-
var totalElement = document.getElementById('total');
67-
68-
var spanVisits = this.createElement('span', ['span-visits', 'tooltip', 'visits'], counter !== undefined ? counter : 0);
69-
var visitsTooltip = this.createElement('span', ['tooltiptext'], 'Count of visits');
70-
spanVisits.appendChild(visitsTooltip);
71-
72-
var spanPercentage = this.createElement('span', ['span-percentage'], '100 %');
73-
74-
var div = this.createElement('div', ['margin-left-5', 'total-block'], 'Total');
75-
var span = this.createElement('span', ['span-time']);
76-
this.createElementsForTotalTime(totalTime, currentTypeOfList, span);
77-
78-
this.appendChild(totalElement, [div, spanVisits, spanPercentage, span]);
79-
}
80-
8164
fillEmptyBlock(elementName) {
8265
document.getElementById(elementName).innerHTML = '<p class="no-data">No data</p>';
8366
}
@@ -94,9 +77,6 @@ class UI {
9477
document.getElementById('chart').appendChild(document.createElement('hr'));
9578
}
9679

97-
addHrAfterTableOfSite() {
98-
this.getTableOfSite().appendChild(document.createElement('hr'));
99-
}
10080

10181
setActiveTooltipe(currentTab) {
10282
if (currentTab !== '') {
@@ -148,7 +128,7 @@ class UI {
148128
var p = document.createElement('p');
149129
p.classList.add('table-header');
150130
if (currentTypeOfList === TypeListEnum.ToDay)
151-
p.innerHTML = 'Today (' + counterOfSite + ' sites) <br> <strong>' + convertShortSummaryTimeToLongString(totalTime) + '</strong>';
131+
p.innerHTML = `Today (${counterOfSite} sites) <br> <strong>${convertShortSummaryTimeToLongString(totalTime)}</strong>`;
152132
if (currentTypeOfList === TypeListEnum.All && totalDays !== undefined) {
153133
if (totalDays.countOfDays > 0) {
154134
p.innerHTML = 'Aggregate data since ' + new Date(totalDays.minDate).toLocaleDateString() + ' (' + totalDays.countOfDays + ' days) (' + counterOfSite + ' sites) <br> <strong>' + fillSummaryTime(totalTime) + '</strong>';
@@ -162,6 +142,7 @@ class UI {
162142

163143
addLineToTableOfSite(tab, currentTab, summaryTime, typeOfList, counter, blockName) {
164144
var div = document.createElement('div');
145+
var tabUrlString = tab.url;
165146
div.addEventListener('mouseenter', function() {
166147
if (document.getElementById('chart').innerHTML !== '') {
167148
var item = document.getElementById(tab.url);
@@ -186,28 +167,43 @@ class UI {
186167

187168
var divForImg = document.createElement('div');
188169
var img = document.createElement('img');
189-
img.setAttribute('height', 17);
170+
img.setAttribute('height', 27);
190171
if (tab.favicon !== undefined || tab.favicon == null)
191172
img.setAttribute('src', tab.favicon);
192173
else img.setAttribute('src', '/icons/empty.png');
193174
divForImg.classList.add('block-img');
194175
divForImg.appendChild(img);
195176

196-
var spanUrl = this.createElement('span', ['span-url'], tab.url);
197-
spanUrl.setAttribute('href', 'https://' + tab.url);
177+
var divForPath = document.createElement('div');
178+
179+
var url = this.createElement('p', ['p-url'], tabUrlString);
180+
url.setAttribute('href', 'https://' + tabUrlString);
181+
url.addEventListener('click', function(e){
182+
if (e.target.attributes.href.value != undefined)
183+
chrome.tabs.create({ url: e.target.attributes.href.value })
184+
})
185+
186+
var visits = this.createElement('p', ['p-visits'], function() {
187+
if (counter == 0) return '0 visits';
188+
if (counter > 1) return `${counter} visits`;
189+
if (counter == 1) return `${counter} visit`;
190+
}());
191+
192+
divForPath.appendChild(url);
193+
divForPath.appendChild(visits);
198194

199195
if (tab.url == currentTab) {
200196
var divForImage = document.createElement('div');
201197
div.classList.add('span-active-url');
202198
var imgCurrentDomain = document.createElement('img');
203199
imgCurrentDomain.setAttribute('src', '/icons/eye.png');
204-
imgCurrentDomain.setAttribute('height', 17);
200+
imgCurrentDomain.setAttribute('height', 20);
205201
imgCurrentDomain.classList.add('margin-left-5');
206202
divForImage.appendChild(imgCurrentDomain);
207203
var currentDomainTooltip = this.createElement('span', ['tooltiptext'], 'Current domain');
208204
divForImage.classList.add('tooltip', 'current-url');
209205
divForImage.appendChild(currentDomainTooltip);
210-
spanUrl.appendChild(divForImage);
206+
url.appendChild(divForImage);
211207
}
212208

213209
if (typeOfList !== undefined && typeOfList === TypeListEnum.ToDay) {
@@ -216,25 +212,20 @@ class UI {
216212
if (item !== undefined) {
217213
var divLimit = this.createElement('div', ['tooltip', 'inline-block']);
218214
var limitIcon = this.createElement('img', ['margin-left-5', 'tooltip']);
219-
limitIcon.height = 15;
215+
limitIcon.height = 20;
220216
limitIcon.src = '/icons/limit.png';
221217
var tooltip = this.createElement('span', ['tooltiptext'], "Daily limit is " + convertShortSummaryTimeToLongString(item.time));
222218
divLimit = this.appendChild(divLimit, [limitIcon, tooltip]);
223-
spanUrl.appendChild(divLimit);
219+
url.appendChild(divLimit);
224220
}
225221
}
226222
}
227223

228-
var spanVisits = this.createElement('span', ['span-visits', 'tooltip', 'visits'], counter !== undefined ? counter : 0);
229-
var visitsTooltip = this.createElement('span', ['tooltiptext'], 'Count of visits');
230-
231-
spanVisits.appendChild(visitsTooltip);
232-
233224
var spanPercentage = this.createElement('span', ['span-percentage'], getPercentage(summaryTime));
234225
var spanTime = this.createElement('span', ['span-time']);
235226
this.createElementsForTotalTime(summaryTime, typeOfList, spanTime);
236227

237-
div = this.appendChild(div, [divForImg, spanUrl, spanVisits, spanPercentage, spanTime]);
228+
div = this.appendChild(div, [divForImg, divForPath, spanPercentage, spanTime]);
238229
if (blockName !== undefined)
239230
document.getElementById(blockName).appendChild(div);
240231
else
@@ -346,8 +337,8 @@ class UI {
346337

347338
var label = this.createElement('label', ['day-block', 'lbl-toggle']);
348339
label.setAttribute('for', days[i].date);
349-
var span = this.createElement('span', ['day'], new Date(days[i].date).toLocaleDateString());
350-
var spanTime = this.createElement('span', ['span-time']);
340+
var span = this.createElement('p', ['day'], new Date(days[i].date).toLocaleDateString());
341+
var spanTime = this.createElement('p', ['span-time']);
351342
this.createElementsForTotalTime(days[i].total, TypeListEnum.ByDays, spanTime);
352343

353344
label = this.appendChild(label, [span, spanTime]);
@@ -412,7 +403,7 @@ class UI {
412403

413404
setMode(){
414405
if (setting_dark_mode)
415-
document.body.classList.add('night-mode');
406+
document.body.classList.add('dark-mode');
416407
}
417408

418409
removePreloader() {

‎src/scripts/webact.js‎

Lines changed: 4 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -132,25 +132,20 @@ function firstInitPage() {
132132
ui.setMode();
133133
tabsFromBackground = bg.tabs;
134134
currentTypeOfList = TypeListEnum.ToDay;
135-
getLimitsListFromStorage();
135+
getLimitsListFromStorage(bg.setting_restriction_list)
136136
getDataFromStorage();
137137
storage.getValue(SETTINGS_SHOW_HINT, function (item) {
138138
if (item)
139139
document.getElementById('hintForUsers').classList.remove('hide');
140140
});
141141
});
142142
}
143-
144143
window.addEventListener('click', function (e) {
145144
if (e.target.nodeName == 'SPAN' && e.target.className == 'span-url' && e.target.attributes.href.value != undefined){
146145
chrome.tabs.create({ url: e.target.attributes.href.value })
147146
}
148147
});
149148

150-
function getLimitsListFromStorage() {
151-
storage.loadTabs(STORAGE_RESTRICTION_LIST, getLimitsListFromStorageCallback);
152-
}
153-
154149
function getDataFromStorage() {
155150
if (tabsFromBackground != undefined && tabsFromBackground != null && tabsFromBackground.length > 0)
156151
getTabsFromStorage(tabsFromBackground);
@@ -162,7 +157,7 @@ function getDataFromStorageByDays() {
162157
getTabsByDays(tabsFromBackground);
163158
}
164159

165-
function getLimitsListFromStorageCallback(items) {
160+
function getLimitsListFromStorage(items) {
166161
if (items !== undefined)
167162
restrictionList = items;
168163
else restrictionList = [];
@@ -251,9 +246,8 @@ function getTabsFromStorage(tabs) {
251246
else addTabOthersForChart(tabsForChart, summaryTime);
252247
}
253248

254-
ui.addHrAfterTableOfSite();
255-
ui.createTotalBlock(totalTime, currentTypeOfList, summaryCounter);
256-
ui.drawChart(tabsForChart);
249+
if (currentTypeOfList === TypeListEnum.ToDay)
250+
ui.drawChart(tabsForChart);
257251
ui.setActiveTooltipe(currentTab);
258252

259253
ui.removePreloader();
@@ -315,7 +309,6 @@ function getTabsFromStorageForExpander(tabs) {
315309

316310
var table = ui.getTableOfSite();
317311
table.removeChild(table.getElementsByTagName('hr')[0]);
318-
ui.addHrAfterTableOfSite();
319312
}
320313

321314
function getTotalTime(tabs) {

0 commit comments

Comments
 (0)