Skip to content

Commit 08d9484

Browse files
StigmatozStigmatoz
committed
Small redesign
1 parent 1ba238d commit 08d9484

File tree

5 files changed

+129
-50
lines changed

5 files changed

+129
-50
lines changed

‎src/index.html‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,17 @@
1515
</head>
1616

1717
<body>
18-
<div id="title">
18+
<svg class="height-0">
19+
<filter id="dropShadow">
20+
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
21+
<feOffset dx="0" dy="1" />
22+
<feMerge>
23+
<feMergeNode />
24+
<feMergeNode in="SourceGraphic" />
25+
</feMerge>
26+
</filter>
27+
</svg>
28+
<div id="extensionTitle">
1929
<p class="title">Web Activity Time Tracker</p>
2030
</div>
2131
<div id="buttons" class="btn-block">
@@ -31,19 +41,9 @@
3141
<div id="chart"></div>
3242
<div id="timeChart"></div>
3343
<div id="resultTable" class="list-of-site"></div>
34-
<div id="total"></div>
44+
<div id="total" class="inline-flex"></div>
3545
<div id="byDays" class="calendar-block"></div>
3646

37-
<svg class="height-0">
38-
<filter id="dropShadow">
39-
<feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
40-
<feOffset dx="0" dy="1" />
41-
<feMerge>
42-
<feMergeNode />
43-
<feMergeNode in="SourceGraphic" />
44-
</feMerge>
45-
</filter>
46-
</svg>
4747
</body>
4848

4949
</html>

‎src/scripts/common.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -103,6 +103,24 @@ function convertShortSummaryTimeToLongString(summaryTime) {
103103
return hours + ' hour ' + mins + ' minutes';
104104
}
105105

106+
function getArrayTime(summaryTime) {
107+
var days = Math.floor(summaryTime / 3600 / 24);
108+
var totalHours = summaryTime % (3600 * 24);
109+
var hours = Math.floor(totalHours / 3600);
110+
var totalSeconds = summaryTime % 3600;
111+
var mins = Math.floor(totalSeconds / 60);
112+
var seconds = totalSeconds % 60;
113+
114+
hours = zeroAppend(hours);
115+
mins = zeroAppend(mins);
116+
seconds = zeroAppend(seconds);
117+
118+
return {'days': days,
119+
'hours': hours,
120+
'mins': mins,
121+
'seconds': seconds};
122+
}
123+
106124
function convertSummaryTimeToString(summaryTime) {
107125
var days = Math.floor(summaryTime / 3600 / 24);
108126
var totalHours = summaryTime % (3600 * 24);

‎src/scripts/ui.js‎

Lines changed: 45 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -42,25 +42,32 @@ class UI {
4242
document.getElementById('byDays').innerHTML = null;
4343
}
4444

45-
setUIForDonutChart(){
45+
setUIForDonutChart() {
4646
document.getElementById('donutChartBtn').classList.add('active');
4747
document.getElementById('heatMapChartBtn').classList.remove('active');
4848
document.getElementById('timeChart').innerHTML = null;
4949
}
5050

51-
setUIForTimeChart(){
51+
setUIForTimeChart() {
5252
document.getElementById('donutChartBtn').classList.remove('active');
5353
document.getElementById('heatMapChartBtn').classList.add('active');
5454
document.getElementById('chart').innerHTML = null;
5555
}
5656

57-
createTotalBlock(totalTime) {
57+
createTotalBlock(totalTime, currentTypeOfList, counter) {
5858
var totalElement = document.getElementById('total');
5959

60-
var spanTitle = this.createElement('span', ['title'], 'Total: ');
61-
var spanTime = this.createElement('span', ['span-time'], convertSummaryTimeToString(totalTime));
60+
var spanVisits = this.createElement('span', ['span-visits', 'tooltip', 'visits'], counter !== undefined ? counter : 0);
61+
var visitsTooltip = this.createElement('span', ['tooltiptext'], 'Count of visits');
62+
spanVisits.appendChild(visitsTooltip);
6263

63-
totalElement = this.appendChild(totalElement, [spanTitle, spanTime]);
64+
var spanPercentage = this.createElement('span', ['span-percentage'], '100 %');
65+
66+
var div = this.createElement('div', ['margin-left-5', 'total-block'], 'Total');
67+
var span = this.createElement('span', ['span-time']);
68+
this.createElementsForTotalTime(totalTime, currentTypeOfList, span);
69+
70+
this.appendChild(totalElement, [div, spanVisits, spanPercentage, span]);
6471
}
6572

6673
fillEmptyBlock(elementName) {
@@ -196,7 +203,8 @@ class UI {
196203
spanVisits.appendChild(visitsTooltip);
197204

198205
var spanPercentage = this.createElement('span', ['span-percentage'], getPercentage(summaryTime));
199-
var spanTime = this.createElement('span', ['span-time'], convertSummaryTimeToString(summaryTime));
206+
var spanTime = this.createElement('span', ['span-time']);
207+
this.createElementsForTotalTime(summaryTime, typeOfList, spanTime);
200208

201209
div = this.appendChild(div, [divForImg, spanUrl, spanVisits, spanPercentage, spanTime]);
202210
if (blockName !== undefined)
@@ -205,6 +213,30 @@ class UI {
205213
this.getTableOfSite().appendChild(div);
206214
}
207215

216+
createElementsForTotalTime(summaryTime, typeOfList, parentElement) {
217+
var arr = getArrayTime(summaryTime);
218+
var isNextPartActiv = false;
219+
var getCssClass = function (item) {
220+
if (item > 0) {
221+
isNextPartActiv = true;
222+
return ['span-active-time'];
223+
}
224+
else {
225+
if (isNextPartActiv)
226+
return ['span-active-time'];
227+
return null;
228+
}
229+
};
230+
if (typeOfList === TypeListEnum.All) {
231+
var spanForDays = this.createElement('span', getCssClass(arr.days), arr.days + 'd ');
232+
this.appendChild(parentElement, [spanForDays]);
233+
}
234+
var spanForHour = this.createElement('span', getCssClass(arr.hours), arr.hours + 'h ');
235+
var spanForMin = this.createElement('span', getCssClass(arr.mins), arr.mins + 'm ');
236+
var spanForSec = this.createElement('span', getCssClass(arr.seconds), arr.seconds + 's ');
237+
this.appendChild(parentElement, [spanForHour, spanForMin, spanForSec]);
238+
}
239+
208240
addExpander() {
209241
if (document.getElementById('expander') === null) {
210242
var div = this.createElement('div', ['expander'], 'Show all');
@@ -227,7 +259,7 @@ class UI {
227259
barChart.id = 'barChart';
228260

229261
var from = this.createElement('span', null, 'From');
230-
var to = this.createElement('span', null,'To');
262+
var to = this.createElement('span', null, 'To');
231263

232264
var calendarFirst = document.createElement('input');
233265
calendarFirst.id = 'dateFrom';
@@ -328,10 +360,10 @@ class UI {
328360
return resultList;
329361
}
330362

331-
createElement(type, css, innerText){
363+
createElement(type, css, innerText) {
332364
var element = document.createElement(type);
333-
if (css !== undefined && css !== null){
334-
for (let i=0; i<css.length; i++)
365+
if (css !== undefined && css !== null) {
366+
for (let i = 0; i < css.length; i++)
335367
element.classList.add(css[i]);
336368
}
337369
if (innerText !== undefined)
@@ -340,8 +372,8 @@ class UI {
340372
return element;
341373
}
342374

343-
appendChild(element, children){
344-
for (let i=0; i<children.length; i++)
375+
appendChild(element, children) {
376+
for (let i = 0; i < children.length; i++)
345377
element.appendChild(children[i]);
346378

347379
return element;

‎src/scripts/webact.js‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -125,6 +125,7 @@ function getTabsFromStorage(tabs) {
125125
var currentTab = getCurrentTab();
126126

127127
var tabsForChart = [];
128+
var summaryCounter = 0;
128129
for (var i = 0; i < targetTabs.length; i++) {
129130
var summaryTime;
130131
var counter;
@@ -138,6 +139,8 @@ function getTabsFromStorage(tabs) {
138139
counter = targetTabs[i].counter;
139140
}
140141

142+
summaryCounter += counter;
143+
141144
if (currentTypeOfList === TypeListEnum.ToDay || (currentTypeOfList === TypeListEnum.All && i <= 30))
142145
ui.addLineToTableOfSite(targetTabs[i], currentTab, summaryTime, currentTypeOfList, counter);
143146
else
@@ -150,7 +153,7 @@ function getTabsFromStorage(tabs) {
150153

151154
currentTabListForToday = targetTabs;
152155
ui.addHrAfterTableOfSite();
153-
ui.createTotalBlock(totalTime);
156+
ui.createTotalBlock(totalTime, currentTypeOfList, summaryCounter);
154157
ui.drawChart(tabsForChart);
155158
ui.setActiveTooltipe(currentTab);
156159
}
@@ -229,7 +232,7 @@ function getTotalTimeForDay(day, tabs) {
229232
}
230233

231234
function getPercentage(time) {
232-
return ((time / totalTime) * 100).toFixed(2) + '%';
235+
return ((time / totalTime) * 100).toFixed(2) + ' %';
233236
}
234237

235238
function getPercentageForChart(time) {

‎src/style/webact.css‎

Lines changed: 49 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,26 @@ body {
77
overflow-y: auto;
88
}
99

10+
#extensionTitle{
11+
margin-top:-20px;
12+
}
13+
1014
.inline-flex{
11-
display: inline-flex;
15+
display: flex;
1216
height: 23px;
1317
}
1418

1519
.inline-flex:hover{
20+
cursor: pointer;
21+
}
22+
23+
.inline-flex:hover .span-url{
1624
font-size: 13px;
1725
font-weight: 650;
18-
cursor: pointer;
26+
}
27+
28+
.inline-flex:hover .span-time{
29+
color: rgb(0, 0, 0);
1930
}
2031

2132
.span-url{
@@ -26,10 +37,14 @@ body {
2637
cursor: pointer;
2738
}
2839

29-
.span-active-url{
40+
.span-active-url .span-url{
3041
font-size: 13px;
3142
font-weight: 650;
3243
}
44+
.span-active-url .span-time{
45+
color: rgb(0, 0, 0);
46+
cursor: pointer;
47+
}
3348

3449
.span-total{
3550
width: 450px;
@@ -41,9 +56,11 @@ body {
4156
cursor: pointer;
4257
}
4358

44-
#total{
45-
text-align: right;
46-
}
59+
#total .total-block{
60+
width: 344px;
61+
font-size: 13px;
62+
font-weight: 600;
63+
}
4764

4865
#total .title{
4966
font-weight: 550;
@@ -53,10 +70,7 @@ body {
5370

5471
#total .span-time{
5572
font-weight: 750;
56-
font-size: 14px;
5773
text-align: right;
58-
padding: 5px 40px 5px 5px;
59-
color: green;
6074
}
6175

6276
.span-visits{
@@ -73,14 +87,24 @@ body {
7387
}
7488

7589
.span-percentage{
76-
width: 80px;
7790
color: rgb(78, 78, 78);
7891
font-size: 11px;
7992
}
8093

8194
.span-time{
95+
color:#c5c3c3;
8296
font-weight: 700;
8397
text-align: right;
98+
margin-left: auto;
99+
margin-right: 8px;
100+
}
101+
102+
.span-time .span-active-time{
103+
color: rgb(0, 0, 0);
104+
}
105+
106+
.margin-left-auto{
107+
margin-left: auto;
84108
}
85109

86110
.favicon{
@@ -119,7 +143,7 @@ hr {
119143
}
120144

121145
a{
122-
color: rgb(184, 179, 179);
146+
color: rgb(195, 194, 194);
123147
padding: 4px 5px;
124148
text-align: center;
125149
display: inline-block;
@@ -131,19 +155,19 @@ a{
131155
text-decoration: none;
132156
text-transform: uppercase;
133157

134-
border-bottom: 2px solid rgb(184, 179, 179);
158+
border-bottom: 2px solid rgb(195, 194, 194);
135159
background: transparent;
136160
width: 19%;
137161
}
138162

139163
a:hover {
140-
color:rgb(55, 158, 86);
141-
border-bottom: 2px solid rgb(55, 158, 86);
164+
color:rgb(76, 160, 175);
165+
border-bottom: 2px solid rgb(76, 160, 175);
142166
}
143167

144168
a.active {
145-
color:rgb(55, 158, 86);
146-
border-bottom: 2px solid rgb(55, 158, 86);
169+
color:rgb(76, 160, 175);
170+
border-bottom: 2px solid rgb(76, 160, 175);
147171
}
148172

149173
input[type="date"]{
@@ -173,7 +197,7 @@ input[type="date"]{
173197
font-weight: 600;
174198
font-size: 13px;
175199
padding: 4px;
176-
background-color: rgb(176, 233, 188);
200+
background-color: rgb(235, 243, 251);
177201
}
178202

179203
p.table-header{
@@ -278,6 +302,7 @@ p.table-header{
278302
}
279303

280304
.tooltip {
305+
width: 70px;
281306
position: relative;
282307
display: inline-block;
283308
}
@@ -333,29 +358,30 @@ p.table-header{
333358
.button{
334359
width: 40%;
335360
background-color: white;
336-
color: rgb(184, 179, 179);
337-
border: 2px solid rgb(184, 179, 179);
361+
color: rgb(195, 194, 194);
362+
border: 2px solid rgb(209, 207, 207);
338363
}
339364

340365
.button:hover{
341366
background-color: white;
342367
color: black;
343-
color:rgb(55, 158, 86);
344-
border: 2px solid rgb(55, 158, 86);
368+
color:rgb(76, 160, 175);
369+
border: 2px solid rgb(76, 160, 175);
345370
}
346371

347372
.button.active{
348373
background-color: white;
349374
color: black;
350-
color:rgb(55, 158, 86);
351-
border: 2px solid rgb(55, 158, 86);
375+
color:rgb(76, 160, 175);
376+
border: 2px solid rgb(76, 160, 175);
352377
}
353378

354379
.hide{
355380
display: none;
356381
}
357382

358383
.chart-btn{
384+
border-radius: 5px;
359385
background-color: transparent;
360386
background-repeat: no-repeat;
361387
background-position: 5px;

0 commit comments

Comments
 (0)