web/cryptpad
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

View more templates

Browse Source
This commit is contained in:
yflory 2018-04-17 18:23:58 +02:00
parent 842952fe1f
commit 24dfaf766d
2 changed files with 93 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
customize.dist/src/less2/include/creation.less
View File

@ -195,6 +195,25 @@
div.cp-creation-template { div.cp-creation-template {
width: 100%; width: 100%;
flex: 1 0 auto; flex: 1 0 auto;
flex-wrap: nowrap;
.cp-creation-template-more {
font-size: 30px;
cursor: pointer;
margin: 0 5px;
text-align: center;
&:first-child {
left: 5px;
}
&:last-child {
right: 5px;
}
&:hover {
color: #888;
}
&.hidden {
visibility: hidden;
}
}
} }
.cp-creation-template-container { .cp-creation-template-container {
width: 100%; width: 100%;
@ -202,7 +221,7 @@
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
overflow-y: auto; //overflow-y: auto;
align-items: center; align-items: center;
.cp-creation-template-element { .cp-creation-template-element {
box-shadow: 2px 2px 7px @colortheme_form-border; box-shadow: 2px 2px 7px @colortheme_form-border;

112
www/common/common-ui-elements.js
View File

@ -1907,10 +1907,14 @@ define([
createHelper('/faq.html#keywords-expiring', Messages.creation_expire2), createHelper('/faq.html#keywords-expiring', Messages.creation_expire2),
]); ]);
var right = h('span.fa.fa-chevron-right.cp-creation-template-more');
var left = h('span.fa.fa-chevron-left.cp-creation-template-more');
var templates = h('div.cp-creation-template', [ var templates = h('div.cp-creation-template', [
left,
h('div.cp-creation-template-container', [ h('div.cp-creation-template-container', [
h('span.fa.fa-circle-o-notch.fa-spin.fa-4x.fa-fw') h('span.fa.fa-circle-o-notch.fa-spin.fa-4x.fa-fw')
]) ]),
right
]); ]);
var settings = h('div.cp-creation-remember', [ var settings = h('div.cp-creation-remember', [
@ -1934,66 +1938,96 @@ define([
])).appendTo($creation); ])).appendTo($creation);
// Display templates // Display templates
var selected = 0;
var selected = 0; // Selected template in the list (highlighted)
var TEMPLATES_DISPLAYED = 4; // Max templates displayed per page
var next = function () {}; // Function called when pressing tab to highlight the next template
var i = 0; // Index of the first template displayed in the current page
sframeChan.query("Q_CREATE_TEMPLATES", type, function (err, res) { sframeChan.query("Q_CREATE_TEMPLATES", type, function (err, res) {
if (!res.data || !Array.isArray(res.data)) { if (!res.data || !Array.isArray(res.data)) {
return void console.error("Error: get the templates list"); return void console.error("Error: get the templates list");
} }
var data = res.data.slice().sort(function (a, b) { var allData = res.data.slice().sort(function (a, b) {
if (a.used === b.used) { if (a.used === b.used) {
// Sort by name // Sort by name
if (a.name === b.name) { return 0; } if (a.name === b.name) { return 0; }
return a.name < b.name ? -1 : 1; return a.name < b.name ? -1 : 1;
} }
return b.used - a.used; return b.used - a.used;
}).slice(0, 2); });
data.unshift({ allData.unshift({
name: Messages.creation_newTemplate, name: Messages.creation_newTemplate,
id: -1, id: -1,
icon: h('span.fa.fa-bookmark') icon: h('span.fa.fa-bookmark')
}); });
data.unshift({ allData.unshift({
name: Messages.creation_noTemplate, name: Messages.creation_noTemplate,
id: 0, id: 0,
icon: h('span.fa.fa-file') icon: h('span.fa.fa-file')
}); });
var $container = $(templates).find('.cp-creation-template-container').html(''); var redraw = function (index) {
data.forEach(function (obj, idx) { if (index < 0) { i = 0; }
var name = obj.name; else if (index > allData.length - 1) { return; }
var $span = $('<span>', { else { i = index; }
'class': 'cp-creation-template-element', var data = allData.slice(i, i + TEMPLATES_DISPLAYED);
'title': name, var $container = $(templates).find('.cp-creation-template-container').html('');
}).appendTo($container); data.forEach(function (obj, idx) {
$span.data('id', obj.id); var name = obj.name;
if (idx === 0) { $span.addClass('cp-creation-template-selected'); } var $span = $('<span>', {
$span.append(obj.icon || UI.getFileIcon({type: type})); 'class': 'cp-creation-template-element',
$('<span>', {'class': 'cp-creation-template-element-name'}).text(name) 'title': name,
.appendTo($span); }).appendTo($container);
$span.click(function () { $span.data('id', obj.id);
$container.find('.cp-creation-template-selected') if (idx === selected) { $span.addClass('cp-creation-template-selected'); }
.removeClass('cp-creation-template-selected'); $span.append(obj.icon || UI.getFileIcon({type: type}));
$span.addClass('cp-creation-template-selected'); $('<span>', {'class': 'cp-creation-template-element-name'}).text(name)
selected = idx; .appendTo($span);
$span.click(function () {
$container.find('.cp-creation-template-selected')
.removeClass('cp-creation-template-selected');
$span.addClass('cp-creation-template-selected');
selected = idx;
});
// Add thumbnail if it exists
if (obj.thumbnail) {
common.addThumbnail(obj.thumbnail, $span, function () {});
}
}); });
$(right).off('click').removeClass('hidden').click(function () {
selected = 0;
redraw(i + TEMPLATES_DISPLAYED);
});
if (i >= allData.length - TEMPLATES_DISPLAYED ) { $(right).addClass('hidden'); }
$(left).off('click').removeClass('hidden').click(function () {
selected = TEMPLATES_DISPLAYED - 1;
redraw(i - TEMPLATES_DISPLAYED);
});
if (i < TEMPLATES_DISPLAYED) { $(left).addClass('hidden'); }
};
redraw(0);
// Add thumbnail if it exists // Change template selection when Tab is pressed
if (obj.thumbnail) { next = function (revert) {
common.addThumbnail(obj.thumbnail, $span, function () {}); var max = $creation.find('.cp-creation-template-element').length;
if (selected + 1 === max && !revert) {
selected = i + TEMPLATES_DISPLAYED < allData.length ? 0 : max;
return void redraw(i + TEMPLATES_DISPLAYED);
} }
}); if (selected === 0 && revert) {
}); selected = i - TEMPLATES_DISPLAYED >= 0 ? TEMPLATES_DISPLAYED - 1 : 0;
// Change template selection when Tab is pressed return void redraw(i - TEMPLATES_DISPLAYED);
var next = function (revert) { }
var max = $creation.find('.cp-creation-template-element').length; selected = revert ?
selected = revert ? (--selected < 0 ? 0 : selected) :
(--selected < 0 ? max-1 : selected) : ++selected >= max ? max-1 : selected;
++selected % max; $creation.find('.cp-creation-template-element')
$creation.find('.cp-creation-template-element') .removeClass('cp-creation-template-selected');
.removeClass('cp-creation-template-selected'); $($creation.find('.cp-creation-template-element').get(selected))
$($creation.find('.cp-creation-template-element').get(selected)) .addClass('cp-creation-template-selected');
.addClass('cp-creation-template-selected'); };
};
});
// Display expiration form when checkbox checked // Display expiration form when checkbox checked
$creation.find('#cp-creation-expire').on('change', function () { $creation.find('#cp-creation-expire').on('change', function () {