Skip to content

Commit 33db15d

Browse files
committed
Add icon for limit for site with tooltip
1 parent 20149a4 commit 33db15d

File tree

5 files changed

+83
-3
lines changed

5 files changed

+83
-3
lines changed

icons/limit.png

1.83 KB
Loading

scripts/common.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,17 @@ function convertShortSummaryTimeToString(summaryTime) {
9292
return hours + 'h : ' + mins + 'm';
9393
}
9494

95+
function convertShortSummaryTimeToLongString(summaryTime) {
96+
var hours = Math.floor(summaryTime / 3600);
97+
var totalSeconds = summaryTime % 3600;
98+
var mins = Math.floor(totalSeconds / 60);
99+
100+
hours = zeroAppend(hours);
101+
mins = zeroAppend(mins);
102+
103+
return hours + ' hour ' + mins + ' minutes';
104+
}
105+
95106
function convertSummaryTimeToString(summaryTime) {
96107
var days = Math.floor(summaryTime / 3600 / 24);
97108
var totalHours = summaryTime % (3600 * 24);

scripts/ui.js

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,7 @@ class UI {
110110
this.getTableOfSite().appendChild(p);
111111
}
112112

113-
addLineToTableOfSite(tab, currentTab, summaryTime, blockName) {
113+
addLineToTableOfSite(tab, currentTab, summaryTime, typeOfList, blockName) {
114114
var div = document.createElement('div');
115115
div.classList.add('inline-flex');
116116

@@ -128,6 +128,26 @@ class UI {
128128
spanUrl.classList.add('span-active-url');
129129
}
130130

131+
if (typeOfList !== undefined && typeOfList === TypeListEnum.ToDay) {
132+
if (restrictionList !== undefined && restrictionList.length > 0) {
133+
var item = restrictionList.find(x => isDomainEquals(x.domain, tab.url));
134+
if (item !== undefined) {
135+
var divLimit = document.createElement('div');
136+
divLimit.classList.add('tooltip', 'inline-block');
137+
var limitIcon = document.createElement('img');
138+
limitIcon.height = 15;
139+
limitIcon.classList.add('margin-left-5', 'tooltip');
140+
limitIcon.src = '/icons/limit.png';
141+
var tooltip = document.createElement('span');
142+
tooltip.classList.add('tooltiptext');
143+
tooltip.innerText = "Dayly limit is " + convertShortSummaryTimeToLongString(item.time);
144+
divLimit.appendChild(limitIcon);
145+
divLimit.appendChild(tooltip);
146+
spanUrl.appendChild(divLimit);
147+
}
148+
}
149+
}
150+
131151
var spanPercentage = document.createElement('span');
132152
spanPercentage.classList.add('span-percentage');
133153
spanPercentage.innerText = getPercentage(summaryTime);

scripts/webact.js

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ var targetTabs;
88
var currentTypeOfList;
99
var today = new Date().toLocaleDateString();
1010
var setting_range_days;
11+
var restrictionList;
1112

1213
document.addEventListener('DOMContentLoaded', function () {
1314
storage.getSettings(SETTINGS_INTERVAL_RANGE, function (item) { setting_range_days = item; });
@@ -39,9 +40,14 @@ firstInitPage();
3940

4041
function firstInitPage() {
4142
currentTypeOfList = TypeListEnum.ToDay;
43+
getLimitsListFromStorage();
4244
getDataFromStorage();
4345
}
4446

47+
function getLimitsListFromStorage() {
48+
storage.loadTabs(STORAGE_RESTRICTION_LIST, getLimitsListFromStorageCallback);
49+
}
50+
4551
function getDataFromStorage() {
4652
storage.loadTabs(STORAGE_TABS, getTabsFromStorage);
4753
}
@@ -50,6 +56,12 @@ function getDataFromStorageByDays() {
5056
storage.loadTabs(STORAGE_TABS, getTabsByDays);
5157
}
5258

59+
function getLimitsListFromStorageCallback(items){
60+
if (items !== undefined)
61+
restrictionList = items;
62+
else restrictionList = [];
63+
}
64+
5365
function getTabsFromStorage(tabs) {
5466
tabsFromStorage = tabs;
5567
targetTabs = [];
@@ -105,7 +117,7 @@ function getTabsFromStorage(tabs) {
105117
summaryTime = targetTabs[i].summaryTime;
106118
}
107119

108-
ui.addLineToTableOfSite(targetTabs[i], currentTab, summaryTime);
120+
ui.addLineToTableOfSite(targetTabs[i], currentTab, summaryTime, currentTypeOfList);
109121

110122
if (i <= 8)
111123
addTabForChart(tabsForChart, targetTabs[i].url, summaryTime);
@@ -254,6 +266,6 @@ function getTabsFromStorageByDay(day, blockName) {
254266
var summaryTime;
255267
summaryTime = targetTabs[i].days.find(x => x.date == day).summary;
256268

257-
ui.addLineToTableOfSite(targetTabs[i], currentTab, summaryTime, blockName + '_content');
269+
ui.addLineToTableOfSite(targetTabs[i], currentTab, summaryTime, TypeListEnum.ByDays, blockName + '_content');
258270
}
259271
}

style/webact.css

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -236,4 +236,41 @@ p.table-header{
236236

237237

238238
/* border-left: 3px solid rgb(151, 218, 52); */
239+
}
240+
241+
.margin-left-5{
242+
margin-left: 5px;
243+
}
244+
245+
.tooltip {
246+
position: relative;
247+
display: inline-block;
248+
}
249+
250+
/* Tooltip text */
251+
.tooltip .tooltiptext {
252+
font-size: 11px;
253+
font-weight: 500;
254+
visibility: hidden;
255+
width: 220px;
256+
background-color: #555;
257+
color: #fff;
258+
text-align: center;
259+
padding: 5px 0;
260+
border-radius: 6px;
261+
262+
/* Position the tooltip text */
263+
position: absolute;
264+
z-index: 1;
265+
transform: translateX(-20%) translateY(-120%);
266+
267+
/* Fade in tooltip */
268+
opacity: 0;
269+
transition: opacity 0.3s;
270+
}
271+
272+
/* Show the tooltip text when you mouse over the tooltip container */
273+
.tooltip:hover .tooltiptext {
274+
visibility: visible;
275+
opacity: 1;
239276
}

0 commit comments

Comments
 (0)