Skip to content

Commit 152e8fc

Browse files
nickvergessennickvergessen
authored
Merge pull request #420 from nextcloud/fix/4-Replace_custom_tooltips_with_native_one_for_system_settings_page
Replace "Active users" and "Shares" charts and replace custom tooltips on Disk chart.
2 parents c191baa + a821953 commit 152e8fc

3 files changed

Lines changed: 117 additions & 214 deletions

File tree

‎css/style.css‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,22 @@
6060
border: 1px var(--color-border);
6161
}
6262

63+
.info-color-label--available::before, .info-color-label--used::before {
64+
content: '';
65+
display: inline-block;
66+
width: 10px;
67+
height: 10px;
68+
border-radius: 10px;
69+
margin-right: 5px;
70+
}
71+
.info-color-label--available::before {
72+
background-color: var(--color-border-maxcontrast);
73+
}
74+
75+
.info-color-label--used::before {
76+
background-color: var(--color-primary);
77+
}
78+
6379
@media only screen and (max-width: $breakpoint-mobile) {
6480
.infobox {
6581
display: block;

‎js/script.js‎

Lines changed: 17 additions & 179 deletions
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@
7474
}
7575

7676
function getThemedPassiveColor() {
77-
return OCA.Theming && OCA.Theming.inverted ? 'rgb(55, 55, 55)' : 'rgb(200, 200, 200)';
77+
return 'rgb(148, 148, 148)';
7878
}
7979

8080
/**
@@ -84,24 +84,14 @@
8484
var cpuCanvas = $("#cpuloadcanvas"),
8585
cpuCanvasWidth = cpuCanvas.parents('.infobox').width() - 30,
8686
memCanvas = $("#memorycanvas"),
87-
memCanvasWidth = memCanvas.parents('.infobox').width() - 30,
88-
activeUsersCanvas = $("#activeuserscanvas"),
89-
activeUsersCanvasWidth = activeUsersCanvas.parents('.infobox').width() - 30,
90-
shareCanvas = $("#sharecanvas"),
91-
shareCanvasWidth = shareCanvas.parents('.infobox').width() - 30;
87+
memCanvasWidth = memCanvas.parents('.infobox').width() - 30;
88+
9289

9390
// We have to set css width AND attribute width
9491
cpuCanvas.width(cpuCanvasWidth);
9592
cpuCanvas.attr('width', cpuCanvasWidth);
9693
memCanvas.width(memCanvasWidth);
9794
memCanvas.attr('width', memCanvasWidth);
98-
activeUsersCanvas.width(activeUsersCanvasWidth);
99-
activeUsersCanvas.attr('width', activeUsersCanvasWidth);
100-
shareCanvas.width(shareCanvasWidth);
101-
shareCanvas.attr('width', shareCanvasWidth);
102-
103-
updateShareStatistics();
104-
updateActiveUsersStatistics();
10595
}
10696

10797
function updateCPUStatistics(cpuload) {
@@ -142,15 +132,15 @@
142132
$cpuFooterInfo.text(t('serverinfo', 'Load average: {cpu} (last minute)', { cpu: cpu1 }));
143133
cpuLoadLine.append(new Date().getTime(), cpu1);
144134
}
145-
135+
146136
function isMemoryStat(memTotal, memFree) {
147137
if (memTotal === 'N/A' || memFree === 'N/A') {
148138
return false;
149139
} else {
150140
return true;
151141
}
152142
}
153-
143+
154144
function isSwapStat(swapTotal, swapFree) {
155145
if (swapTotal === 'N/A' || swapFree === 'N/A') {
156146
return false;
@@ -207,15 +197,15 @@
207197
if (isMemoryStat(memTotal, memFree)) {
208198
$memFooterInfo.text(t('serverinfo','RAM: Total: {memTotalBytes}/Current usage: {memUsageBytes}', { memTotalBytes: OC.Util.humanFileSize(memTotalBytes), memUsageBytes: OC.Util.humanFileSize(memUsageBytes) }));
209199
memoryUsageLine.append(new Date().getTime(), memUsageGB);
210-
200+
211201
if ($memoryCanvas.hasClass('hidden')) {
212202
$memoryCanvas.removeClass('hidden');
213203
}
214204
} else {
215205
$memFooterInfo.text(t('serverinfo', 'RAM info not available'));
216206
$memoryCanvas.addClass('hidden');
217207
}
218-
208+
219209
if (isSwapStat(swapTotal, swapFree)) {
220210
$swapFooterInfo.text(t('serverinfo','SWAP: Total: {swapTotalBytes}/Current usage: {swapUsageBytes}', { swapTotalBytes: OC.Util.humanFileSize(swapTotalBytes), swapUsageBytes: OC.Util.humanFileSize(swapUsageBytes) }));
221211
swapUsageLine.append(new Date().getTime(), swapUsageGB);
@@ -224,135 +214,6 @@
224214
}
225215
}
226216

227-
function updateShareStatistics() {
228-
229-
var shares = $('#sharecanvas').data('shares'),
230-
sharesData = [shares.num_shares_user,
231-
shares.num_shares_groups,
232-
shares.num_shares_link,
233-
shares.num_shares_mail,
234-
shares.num_fed_shares_sent,
235-
shares.num_fed_shares_received,
236-
shares.num_shares_room
237-
],
238-
stepSize = 0;
239-
240-
if (Math.max.apply(null, sharesData) < 10) {
241-
stepSize = 1;
242-
}
243-
244-
if (typeof sharesChart === 'undefined') {
245-
var ctx = document.getElementById("sharecanvas");
246-
247-
sharesChart = new Chart(ctx, {
248-
type: 'bar',
249-
data: {
250-
labels: [
251-
t('serverinfo', 'Users'),
252-
t('serverinfo', 'Groups'),
253-
t('serverinfo', 'Links'),
254-
t('serverinfo', 'Emails'),
255-
t('serverinfo', 'Federated sent'),
256-
t('serverinfo', 'Federated received'),
257-
t('serverinfo', 'Talk conversations'),
258-
],
259-
datasets: [{
260-
label: " ",
261-
data: sharesData,
262-
backgroundColor: [
263-
'rgba(0, 76, 153, 0.2)',
264-
'rgba(51, 153, 255, 0.2)',
265-
'rgba(207, 102, 0, 0.2)',
266-
'rgba(255, 178, 102, 0.2)',
267-
'rgba(0, 153, 0, 0.2)',
268-
'rgba(153, 255, 51, 0.2)',
269-
'rgba(178, 102, 255, 0.2)'
270-
],
271-
borderColor: [
272-
'rgba(0, 76, 153, 1)',
273-
'rgba(51, 153, 255, 1)',
274-
'rgba(207, 102, 0, 1)',
275-
'rgba(255, 178, 102, 1)',
276-
'rgba(0, 153, 0, 1)',
277-
'rgba(153, 255, 51, 1)',
278-
'rgba(178, 102, 255, 1)'
279-
],
280-
borderWidth: 1
281-
}]
282-
},
283-
options: {
284-
plugins: { legend: { display: false } },
285-
scales: {
286-
yAxes: {
287-
ticks: {
288-
min: 0,
289-
stepSize: stepSize
290-
}
291-
}
292-
}
293-
}
294-
});
295-
}
296-
297-
sharesChart.update();
298-
}
299-
300-
function updateActiveUsersStatistics() {
301-
302-
var activeUsers = $('#activeuserscanvas').data('users'),
303-
activeUsersData = [activeUsers.last24hours, activeUsers.last1hour, activeUsers.last5minutes],
304-
stepSize = 0;
305-
306-
if (Math.max.apply(null, activeUsersData) < 10) {
307-
stepSize = 1;
308-
}
309-
310-
if (typeof activeUsersChart === 'undefined') {
311-
var ctx = document.getElementById("activeuserscanvas");
312-
313-
activeUsersChart = new Chart(ctx, {
314-
type: 'line',
315-
data: {
316-
labels: [
317-
t('serverinfo', '24 hours'),
318-
t('serverinfo', '1 hour'),
319-
t('serverinfo', '5 mins')
320-
],
321-
datasets: [{
322-
label: " ",
323-
data: activeUsersData,
324-
fill: false,
325-
borderColor: [getThemedPrimaryColor()],
326-
borderWidth: 1,
327-
borderDashOffset: 0.0,
328-
borderJoinStyle: 'miter',
329-
pointBorderColor: getThemedPrimaryColor(),
330-
pointBackgroundColor: getThemedPassiveColor(),
331-
pointBorderWidth: 1,
332-
pointHoverRadius: 5,
333-
pointHoverBackgroundColor: getThemedPrimaryColor(),
334-
pointHoverBorderColor: getThemedPrimaryColor(),
335-
pointHoverBorderWidth: 1,
336-
pointRadius: 5,
337-
pointHitRadius: 10,
338-
lineTension: 0
339-
}]
340-
},
341-
options: {
342-
plugins: { legend: { display: false } },
343-
scales: {
344-
yAxes: {
345-
ticks: {
346-
min: 0,
347-
stepSize: stepSize
348-
}
349-
}
350-
}
351-
}
352-
});
353-
}
354-
}
355-
356217
function setHumanReadableSizeToElement(elementId) {
357218
var maxUploadSize = parseInt($('#' + elementId).text());
358219

@@ -362,27 +223,11 @@
362223
}
363224

364225
function initMonitoringLinkToClipboard() {
365-
var monAPIBox = $("#ocsEndPoint");
366-
/* reused from settings/js/authtoken_view.js */
367-
monAPIBox.find('.clipboardButton').tooltip({placement: 'bottom', title: t('core', 'Copy'), trigger: 'hover'});
368-
369-
// Clipboard!
370226
var clipboard = new Clipboard('.clipboardButton');
371227
clipboard.on('success', function (e) {
372-
var $input = $(e.trigger);
373-
$input.tooltip('hide')
374-
.attr('data-original-title', t('core', 'Copied!'))
375-
.tooltip('fixTitle')
376-
.tooltip({placement: 'bottom', trigger: 'manual'})
377-
.tooltip('show');
378-
_.delay(function () {
379-
$input.tooltip('hide')
380-
.attr('data-original-title', t('core', 'Copy'))
381-
.tooltip('fixTitle');
382-
}, 3000);
228+
OC.Notification.show('Copied!', { type: 'success' })
383229
});
384-
clipboard.on('error', function (e) {
385-
var $input = $(e.trigger);
230+
clipboard.on('error', function () {
386231
var actionMsg = '';
387232
if (/iPhone|iPad/i.test(navigator.userAgent)) {
388233
actionMsg = t('core', 'Not supported!');
@@ -391,17 +236,7 @@
391236
} else {
392237
actionMsg = t('core', 'Press Ctrl-C to copy.');
393238
}
394-
395-
$input.tooltip('hide')
396-
.attr('data-original-title', actionMsg)
397-
.tooltip('fixTitle')
398-
.tooltip({placement: 'bottom', trigger: 'manual'})
399-
.tooltip('show');
400-
_.delay(function () {
401-
$input.tooltip('hide')
402-
.attr('data-original-title', t('core', 'Copy'))
403-
.tooltip('fixTitle');
404-
}, 3000);
239+
OC.Notification.show(actionMsg, { type: 'error' })
405240
});
406241
}
407242

@@ -415,15 +250,13 @@
415250
var i;
416251
for (i = 0; i < diskcharts.length; i++) {
417252
var chartdata = {
418-
labels: ["Used GB", "Available GB"],
419253
datasets: [
420254
{
421255
backgroundColor: [
422256
getThemedPrimaryColor(),
423257
getThemedPassiveColor(),
424258
],
425-
borderWidth: 0,
426-
data: diskdata[i]
259+
data: diskdata[i],
427260
}
428261
]
429262
};
@@ -432,7 +265,12 @@
432265
type: 'doughnut',
433266
data: chartdata,
434267
options: {
435-
plugins: { legend: { display: false } },
268+
plugins: {
269+
legend: { display: false },
270+
tooltip: {
271+
enabled: false
272+
}
273+
},
436274
tooltips: {
437275
enabled: true,
438276
},

0 commit comments

Comments
 (0)