tyler
/
proxmox-backup
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

prune sim: fine tune calendar layout/style 

Avoid black on white, to much contrast hurts the eye, use a dark grey
instead.

Highlight Sundays, and show month boundaries explicitly with strong
dashed border.

Factor out some manual set styles to classes and use them instead,
decoupling logic and styling a bit more.

Use span elements for plain text stuff, which should not be a block
(e.g., div) element.

Signed-off-by: Thomas Lamprecht <t.lamprecht@proxmox.com>
This commit is contained in:
Thomas Lamprecht 2020-11-07 13:37:54 +01:00
parent 1f4befe136
commit 435a6c5e0a
2 changed files with 40 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
docs/prune-simulator/index.html
View File

@ -6,6 +6,31 @@
<title>PBS Prune Simulator</title>
<link rel="stylesheet" type="text/css" href="extjs/theme-crisp/resources/theme-crisp-all.css">
<style>
.cal-day {
vertical-align: top;
width: 150px;
border: #939393 1px solid;
color: #454545;
}
.cal-day-date {
border-bottom: #444 1px solid;
color: #000;
}
.strikethrough {
text-decoration: line-through;
}
.black {
color: #000;
}
.sun {
background-color: #ededed;
}
.first-of-month {
border-right: dashed black 4px;
}
</style>
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script type="text/javascript" src="prune-simulator.js"></script>
</head>

29
docs/prune-simulator/prune-simulator.js
View File

@ -175,7 +175,7 @@ Ext.onReady(function() {
let me = this;
let backups = me.store.data.items;
let html = '<table>';
let html = '<table class="cal">';
let now = new Date(NOW.getTime());
let skip = 7 - parseInt(Ext.Date.format(now, 'N'), 10);
@ -187,38 +187,39 @@ Ext.onReady(function() {
html += '<tr>';
for (let j = 0; j < 7; j++) {
html += '<td style="vertical-align: top;' +
'width: 150px;' +
'border: black 1px solid;' +
'">';
let date = Ext.Date.subtract(tableStartDate, Ext.Date.DAY, j + 7 * i);
let currentDay = Ext.Date.format(date, 'd/m/Y');
let isBackupOnDay = function(backup, day) {
let dayOfWeekCls = Ext.Date.format(date, 'D').toLowerCase();
let firstOfMonthCls = Ext.Date.format(date, 'd') === '01'
? 'first-of-month'
: '';
html += `<td class="cal-day ${dayOfWeekCls} ${firstOfMonthCls}">`;
const isBackupOnDay = function(backup, day) {
return backup && Ext.Date.format(backup.data.backuptime, 'd/m/Y') === day;
};
let backup = backups[bIndex];
html += '<table><tr><th style="border-bottom: black 1px solid;">' +
Ext.Date.format(date, 'D, d M Y') + '</th>';
html += '<table><tr>';
html += `<th class="cal-day-date">${Ext.Date.format(date, 'D, d M Y')}</th>`;
while (isBackupOnDay(backup, currentDay)) {
html += '<tr><td>';
let text = Ext.Date.format(backup.data.backuptime, 'H:i');
if (backup.data.mark === 'remove') {
html += '<div style="text-decoration: line-through;">' + text + '</div>';
html += `<span class="strikethrough">${text}</span>`;
} else {
text += ' (' + backup.data.keepName + ')';
text += ` (${backup.data.keepName})`;
if (me.useColors) {
let bgColor = COLORS[backup.data.keepName];
let textColor = TEXT_COLORS[backup.data.keepName];
html += '<div style="background-color: ' + bgColor + '; ' +
'color: ' + textColor + ';">' + text + '</div>';
html += `<span style="background-color: ${bgColor};
color: ${textColor};">${text}</span>`;
} else {
html += '<div>' + text + '</div>';
html += `<span class="black">${text}</span>`;
}
}
html += '</td></tr>';