mirror of
https://github.com/piskelapp/piskel.git
synced 2023-08-10 21:12:52 +03:00
improve styling for browse-backups dialog
This commit is contained in:
parent
8beba2088b
commit
9ff2ecbb45
95
src/css/dialogs-browse-backups.css
Normal file
95
src/css/dialogs-browse-backups.css
Normal file
|
@ -0,0 +1,95 @@
|
||||||
|
#dialog-container.browse-backups {
|
||||||
|
width: 700px;
|
||||||
|
height: 500px;
|
||||||
|
top : 50%;
|
||||||
|
left : 50%;
|
||||||
|
position : absolute;
|
||||||
|
margin-left: -350px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.backups-step-container {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.backups-step-content {
|
||||||
|
width: 100%;
|
||||||
|
height: 10px;
|
||||||
|
flex-grow: 1;
|
||||||
|
background: #444;
|
||||||
|
}
|
||||||
|
|
||||||
|
.backups-step-actions {
|
||||||
|
flex-grow: 0;
|
||||||
|
flex-shrink: 1;
|
||||||
|
height: 60px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.show #dialog-container.browse-backups {
|
||||||
|
margin-top: -250px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.browse-backups .session-list,
|
||||||
|
.browse-backups .snapshot-list {
|
||||||
|
width: 100%;
|
||||||
|
padding: 20px;
|
||||||
|
overflow: auto;
|
||||||
|
height: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.browse-backups .session-item,
|
||||||
|
.browse-backups .snapshot-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
width: 100%;
|
||||||
|
height: 60px;
|
||||||
|
|
||||||
|
margin-bottom: 10px;
|
||||||
|
padding: 0 20px;
|
||||||
|
|
||||||
|
border: 1px solid #666;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.browse-backups .session-details,
|
||||||
|
.browse-backups .snapshot-details {
|
||||||
|
flex-grow: 1;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.browse-backups .session-details {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.browse-backups .session-details-title {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.browse-backups .session-details-info {
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.browse-backups .session-actions,
|
||||||
|
.browse-backups .snapshot-actions {
|
||||||
|
flex-grow: 0;
|
||||||
|
flex-shrink: 1;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.browse-backups .session-actions button,
|
||||||
|
.browse-backups .snapshot-actions button {
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.browse-backups .session-item:last-child,
|
||||||
|
.browse-backups .snapshot-item:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
|
@ -28,7 +28,14 @@
|
||||||
var sessionItemTemplate = pskl.utils.Template.get('session-list-item');
|
var sessionItemTemplate = pskl.utils.Template.get('session-list-item');
|
||||||
var html = '';
|
var html = '';
|
||||||
sessions.forEach(function (session) {
|
sessions.forEach(function (session) {
|
||||||
html += pskl.utils.Template.replace(sessionItemTemplate, session);
|
var view = {
|
||||||
|
id: session.id,
|
||||||
|
name: session.name,
|
||||||
|
description: session.description ? '- ' + session.description : '',
|
||||||
|
date: pskl.utils.DateUtils.format(session.endDate, 'the {{Y}}/{{M}}/{{D}} at {{H}}:{{m}}'),
|
||||||
|
count: session.count === 1 ? '1 snapshot' : session.count + ' snapshots'
|
||||||
|
};
|
||||||
|
html += pskl.utils.Template.replace(sessionItemTemplate, view);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
this.container.querySelector('.session-list').innerHTML = html;
|
this.container.querySelector('.session-list').innerHTML = html;
|
||||||
|
|
|
@ -188,7 +188,8 @@
|
||||||
endDate: snapshot.date,
|
endDate: snapshot.date,
|
||||||
name: snapshot.name,
|
name: snapshot.name,
|
||||||
description: snapshot.description,
|
description: snapshot.description,
|
||||||
id: snapshot.session_id
|
id: snapshot.session_id,
|
||||||
|
count: 1
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -196,6 +197,7 @@
|
||||||
var s = sessions[snapshot.session_id];
|
var s = sessions[snapshot.session_id];
|
||||||
s.startDate = Math.min(s.startDate, snapshot.date);
|
s.startDate = Math.min(s.startDate, snapshot.date);
|
||||||
s.endDate = Math.max(s.endDate, snapshot.date);
|
s.endDate = Math.max(s.endDate, snapshot.date);
|
||||||
|
s.count++;
|
||||||
|
|
||||||
if (s.endDate === snapshot.date) {
|
if (s.endDate === snapshot.date) {
|
||||||
// If the endDate was updated, update also the session metadata to
|
// If the endDate was updated, update also the session metadata to
|
||||||
|
|
|
@ -18,6 +18,7 @@
|
||||||
"css/icons.css",
|
"css/icons.css",
|
||||||
"css/color-picker-slider.css",
|
"css/color-picker-slider.css",
|
||||||
"css/dialogs.css",
|
"css/dialogs.css",
|
||||||
|
"css/dialogs-browse-backups.css",
|
||||||
"css/dialogs-browse-local.css",
|
"css/dialogs-browse-local.css",
|
||||||
"css/dialogs-cheatsheet.css",
|
"css/dialogs-cheatsheet.css",
|
||||||
"css/dialogs-create-palette.css",
|
"css/dialogs-create-palette.css",
|
||||||
|
|
|
@ -19,10 +19,16 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script type="text/template" id="session-list-item">
|
<script type="text/template" id="session-list-item">
|
||||||
<div class="session-item">
|
<div class="session-item" title="{{id}}">
|
||||||
{{name}} - {{description}}
|
<div class="session-details">
|
||||||
<button class="button" data-session-id="{{id}}" data-action="delete">Delete</button>
|
<span class="session-details-title">{{name}} {{description}}</span>
|
||||||
<button class="button button-primary" data-session-id="{{id}}" data-action="view">View</button>
|
<span class="session-details-info">Session recorded {{date}}</span>
|
||||||
|
<span class="session-details-info">{{count}} saved</span>
|
||||||
|
</div>
|
||||||
|
<div class="session-actions">
|
||||||
|
<button class="button" data-session-id="{{id}}" data-action="delete">Delete</button>
|
||||||
|
<button class="button button-primary" data-session-id="{{id}}" data-action="view">View</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -31,13 +37,19 @@
|
||||||
<div class="backups-step-content">
|
<div class="backups-step-content">
|
||||||
<div class="snapshot-list"></div>
|
<div class="snapshot-list"></div>
|
||||||
</div>
|
</div>
|
||||||
<button class="button back-button">back</button>
|
<div class="backups-step-actions">
|
||||||
|
<button class="button back-button">back</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script type="text/template" id="snapshot-list-item">
|
<script type="text/template" id="snapshot-list-item">
|
||||||
<div class="snapshot-item">
|
<div class="snapshot-item">
|
||||||
{{name}} - {{description}}. Snapshot taken at {{date}}.
|
<div class="snapshot-details">
|
||||||
<button class="button button-primary" data-action="load" data-snapshot-id="{{id}}">Load</button>
|
{{name}} - {{description}}. Snapshot taken at {{date}}.
|
||||||
|
</div>
|
||||||
|
<div class="snapshot-actions">
|
||||||
|
<button class="button button-primary" data-action="load" data-snapshot-id="{{id}}">Load</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</script>
|
</script>
|
Loading…
Reference in New Issue
Block a user