dnrops
/
cryptpad
mirror of https://github.com/xwiki-labs/cryptpad
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add fixed order for rightside icons in the toolbar

This commit is contained in:
yflory 2018-03-01 14:32:14 +01:00
parent 95bbc3d130
commit 12bfcbe701
13 changed files with 183 additions and 132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
customize.dist/src/less2/include/toolbar.less
View File

@ -389,11 +389,6 @@
margin: 0;
}*/
.cp-toolbar-rightside-button {
float: right;
cursor: pointer;
}
select {
margin-left: 5px;
margin-right: 5px;
@ -475,13 +470,6 @@
background-color: @bg-color;
}
}
.cp-toolbar-rightside {
@media screen and (max-width: @barWidth) { // 450px
flex-wrap: wrap;
height: auto;
width: 100%;
}
}
.cp-toolbar-title-hoverable:hover {
.cp-toolbar-title-editable, .cp-toolbar-title-edit {
cursor: text;
@ -830,13 +818,37 @@
}
}
.cp-toolbar-rightside {
display: flex;
min-height: @toolbar_line-height;
overflow: hidden;
@media screen and (max-width: @barWidth) { // 450px
flex-wrap: wrap;
height: auto;
width: 100%;
}
&:empty {
min-height: 0;
height: 0;
}
text-align: right;
.cp-toolbar-rightside-button {
cursor: pointer;
// UI actions
&.cp-toolbar-icon-toggle { order: 1; }
&.cp-toolbar-icon-preview { order: 2; }
&.cp-toolbar-icon-present { order: 3; }
// Content actions
&.cp-toolbar-icon-mediatag { order: 10; }
order: 11;
// Storage actions
&.cp-toolbar-icon-hashtag { order: 20; }
&.cp-toolbar-icon-template { order: 21; }
&.cp-toolbar-icon-forget { order: 22; }
// Drawer
&.cp-toolbar-drawer-button { order: 30; }
}
.cp-toolbar-drawer-content:empty ~ .cp-toolbar-drawer-button {
display: none;
}

11
www/code/inner.js
View File

@ -102,7 +102,7 @@ define([
class: 'cp-app-code-preview-empty'
}).appendTo($previewContainer);
var $previewButton = framework._.sfCommon.createButton(null, true);
var $previewButton = framework._.sfCommon.createButton('preview', true);
var forceDrawPreview = function () {
try {
if (editor.getValue() === '') {
@ -119,12 +119,6 @@ define([
forceDrawPreview();
}, 150);
$previewButton.removeClass('fa-question').addClass('fa-eye');
window.setTimeout(function () {
// setTimeout needed for tippy (tooltip), otherwise we have the browser's default
// tooltips
$previewButton.attr('title', Messages.previewButtonTitle);
});
var previewTo;
$previewButton.click(function () {
clearTimeout(previewTo);
@ -377,9 +371,6 @@ define([
if ($preview.length && $preview.is(':visible')) {
return $preview[0];
}
if ($codeMirror.length) {
return $codeMirror[0];
}
};
var main = function () {

3
www/common/common-thumbnail.js
View File

@ -177,6 +177,7 @@ define([
window.html2canvas = undefined;
Thumb.fromDOM = function (opts, cb) {
var element = opts.getContainer();
if (!element) { return; }
var todo = function () {
if (opts.filter) { opts.filter(element, true); }
window.html2canvas(element, {
@ -202,8 +203,8 @@ define([
var mkThumbnail = function () {
var content = opts.getContent();
if (content === oldThumbnailState) { return; }
oldThumbnailState = content;
Thumb.fromDOM(opts, function (err, b64) {
oldThumbnailState = content;
Thumb.setPadThumbnail(common, opts.href, b64);
});
};

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

@ -468,7 +468,7 @@ define([
switch (type) {
case 'export':
button = $('<button>', {
'class': 'fa fa-download',
'class': 'fa fa-download cp-toolbar-icon-export',
title: Messages.exportButtonTitle,
}).append($('<span>', {'class': 'cp-toolbar-drawer-element'}).text(Messages.exportButton));
@ -479,7 +479,7 @@ define([
break;
case 'import':
button = $('<button>', {
'class': 'fa fa-upload',
'class': 'fa fa-upload cp-toolbar-icon-import',
title: Messages.importButtonTitle,
}).append($('<span>', {'class': 'cp-toolbar-drawer-element'}).text(Messages.importButton));
if (callback) {
@ -525,7 +525,8 @@ define([
if (!common.isLoggedIn()) { return; }
button = $('<button>', {
title: Messages.saveTemplateButton,
}).append($('<span>', {'class':'fa fa-bookmark', style: 'font:'+size+' FontAwesome'}));
class: 'fa fa-bookmark cp-toolbar-icon-template'
});
if (data.rt) {
button
.click(function () {
@ -570,37 +571,45 @@ define([
break;
case 'forget':
button = $('<button>', {
id: 'cryptpad-forget',
title: Messages.forgetButtonTitle,
'class': "fa fa-trash cryptpad-forget",
style: 'font:'+size+' FontAwesome'
'class': "fa fa-trash cp-toolbar-icon-forget"
});
if (callback) {
button
.click(common.prepareFeedback(type))
.click(function() {
var msg = common.isLoggedIn() ? Messages.forgetPrompt : Messages.fm_removePermanentlyDialog;
UI.confirm(msg, function (yes) {
if (!yes) { return; }
sframeChan.query('Q_MOVE_TO_TRASH', null, function (err) {
if (err) { return void callback(err); }
var cMsg = common.isLoggedIn() ? Messages.movedToTrash : Messages.deleted;
UI.alert(cMsg, undefined, true);
callback();
return;
});
callback = typeof callback === "function" ? callback : function () {};
button
.click(common.prepareFeedback(type))
.click(function() {
var msg = common.isLoggedIn() ? Messages.forgetPrompt : Messages.fm_removePermanentlyDialog;
UI.confirm(msg, function (yes) {
if (!yes) { return; }
sframeChan.query('Q_MOVE_TO_TRASH', null, function (err) {
if (err) { return void callback(err); }
var cMsg = common.isLoggedIn() ? Messages.movedToTrash : Messages.deleted;
UI.alert(cMsg, undefined, true);
callback();
return;
});
});
}
});
break;
case 'present':
button = $('<button>', {
title: Messages.presentButtonTitle,
'class': "fa fa-play-circle cp-app-slide-present-button", // used in slide.js
style: 'font:'+size+' FontAwesome'
'class': "fa fa-play-circle cp-toolbar-icon-present", // used in slide.js
});
break;
case 'preview':
button = $('<button>', {
title: Messages.previewButtonTitle,
'class': "fa fa-eye cp-toolbar-icon-preview",
});
break;
case 'print':
button = $('<button>', {
title: Messages.printButtonTitle,
'class': "fa fa-print cp-toolbar-icon-print",
}).append($('<span>', {'class': 'cp-toolbar-drawer-element'}).text(Messages.printText));
break;
case 'history':
if (!AppConfig.enableHistory) {
button = $('<span>');
@ -608,7 +617,7 @@ define([
}
button = $('<button>', {
title: Messages.historyButton,
'class': "fa fa-history history",
'class': "fa fa-history cp-toolbar-icon-history",
}).append($('<span>', {'class': 'cp-toolbar-drawer-element'}).text(Messages.historyText));
if (data.histConfig) {
button
@ -622,19 +631,25 @@ define([
button = $('<button>', {
title: Messages.moreActions,
'class': "cp-toolbar-drawer-button fa fa-ellipsis-h",
style: 'font:'+size+' FontAwesome'
});
break;
case 'mediatag':
button = $('<button>', {
'class': 'fa fa-picture-o cp-toolbar-icon-mediatag',
title: Messages.filePickerButton,
})
.click(common.prepareFeedback(type));
break;
case 'savetodrive':
button = $('<button>', {
'class': 'fa fa-cloud-upload',
'class': 'fa fa-cloud-upload cp-toolbar-icon-savetodrive',
title: Messages.canvas_saveToDrive,
})
.click(common.prepareFeedback(type));
break;
case 'hashtag':
button = $('<button>', {
'class': 'fa fa-hashtag',
'class': 'fa fa-hashtag cp-toolbar-icon-hashtag',
title: Messages.tags_title,
})
.click(common.prepareFeedback(type))
@ -642,7 +657,7 @@ define([
break;
case 'toggle':
button = $('<button>', {
'class': 'fa fa-caret-down',
'class': 'fa fa-caret-down cp-toolbar-icon-toggle',
})
.click(common.prepareFeedback(type));
window.setTimeout(function () {
@ -668,7 +683,7 @@ define([
break;
case 'properties':
button = $('<button>', {
'class': 'fa fa-info-circle',
'class': 'fa fa-info-circle cp-toolbar-icon-properties',
title: Messages.propertiesButtonTitle,
}).append($('<span>', {'class': 'cp-toolbar-drawer-element'})
.text(Messages.propertiesButton))
@ -684,10 +699,24 @@ define([
});
break;
default:
data = data || {};
var icon = data.icon || "fa-question";
button = $('<button>', {
'class': "fa fa-question",
'class': "fa " + icon,
})
.click(common.prepareFeedback(type));
if (data.title) { button.attr('title', data.title); }
if (data.style) { button.attr('style', data.style); }
if (data.id) { button.attr('id', data.id); }
if (data.hiddenReadOnly) { button.addClass('cp-hidden-if-readonly'); }
if (data.name) {
button.addClass('cp-toolbar-icon-'+data.name);
button.click(common.prepareFeedback(data.name));
}
if (data.text) {
$('<span>', {'class': 'cp-toolbar-drawer-element'}).text(data.text)
.appendTo(button);
}
}
if (rightside) {
button.addClass('cp-toolbar-rightside-button');
@ -864,10 +893,11 @@ define([
var text = h('p.cp-help-text');
var closeButton = h('span.cp-help-close.fa.fa-window-close');
var $toolbarButton = common.createButton('', true).addClass('cp-toolbar-button-active');
$toolbarButton.attr('title', Messages.hide_help_button);
$toolbarButton
.append($('<span>', {'class': 'cp-toolbar-drawer-element'}).text(Messages.help_button));
var $toolbarButton = common.createButton('', true, {
title: Messages.hide_help_button,
text: Messages.help_button,
name: 'help'
}).addClass('cp-toolbar-button-active');
var help = h('div.cp-help-container', [
closeButton,
text

6
www/common/sframe-app-framework.js
View File

@ -398,11 +398,7 @@ define([
'" data-crypto-key="cryptpad:' + data.key + '"></media-tag>'), data);
}
});
$embedButton = $('<button>', {
title: Messages.filePickerButton,
'class': 'cp-toolbar-rightside-button fa fa-picture-o',
style: 'font-size: 17px'
}).click(function () {
$embedButton = common.createButton('mediatag', true).click(function () {
common.openFilePicker({
types: ['file'],
where: ['root']

2
www/drive/app-drive.less
View File

@ -724,7 +724,7 @@ span {
}
}
.history {
.cp-toolbar-icon-history {
float: right;
.cp-toolbar-drawer-element {
display: none;

24
www/file/app-file.less
View File

@ -30,6 +30,8 @@ flex-flow: column;
display: flex;
justify-content: center;
align-items: center;
flex-flow: column;
min-height: 0;
}
#cp-app-file-content.ready {
@ -134,3 +136,25 @@ media-tag {
z-index: 10000;
display: block;
}
#cp-app-file-download-view {
flex: 1;
display: flex;
min-height: 0;
align-items: center;
justify-content: center;
flex-flow: column;
media-tag {
flex: 1;
min-height: 0;
max-width: 100vw;
display: flex;
align-items: center;
justify-content: center;
&> * {
max-height: 100%;
max-width: 100%;
}
}
}

12
www/file/inner.js
View File

@ -100,6 +100,11 @@ define([
var title = document.title = metadata.name;
Title.updateTitle(title || Title.defaultTitle);
toolbar.addElement(['pageTitle'], {pageTitle: title});
toolbar.$rightside.append(common.createButton('forget', true));
if (common.isLoggedIn()) {
toolbar.$rightside.append(common.createButton('hashtag', true));
}
common.setPadAttribute('fileType', metadata.type);
@ -118,7 +123,6 @@ define([
$mt.attr('data-crypto-key', 'cryptpad:'+cryptKey);
var rightsideDisplayed = false;
$(window.document).on('decryption', function (e) {
var decrypted = e.originalEvent;
if (decrypted.callback) {
@ -142,13 +146,7 @@ define([
toolbar.$rightside
.append(common.createButton('export', true, {}, function () {
saveAs(decrypted.blob, decrypted.metadata.name);
}))
.append(common.createButton('forget', true, {}, function () {
// not sure what to do here
}));
if (common.isLoggedIn()) {
toolbar.$rightside.append(common.createButton('hashtag', true));
}
rightsideDisplayed = true;
}

16
www/poll/inner.js
View File

@ -1064,7 +1064,7 @@ define([
setTimeout(waitFor());
}).nThen(function (waitFor) {
// Switch to non-admin mode
$('.cp-toolbar-rightside-button.fa-check').click();
$('.cp-toolbar-icon-publish').click();
setTimeout(waitFor());
}).nThen(function (waitFor) {
$('.cp-app-poll-comments-add-name').val("Mr.Me").keyup();
@ -1213,9 +1213,11 @@ define([
$(helpMenu.text).html($(help).html());
if (APP.readOnly) { publish(true); return; }
var $publish = common.createButton('', true)
.removeClass('fa-question').addClass('fa-check')
.click(function () { publish(!APP.proxy.published); }).appendTo($rightside);
var $publish = common.createButton('', true, {
name: 'publish',
icon: 'fa-check',
hiddenReadOnly: true
}).click(function () { publish(!APP.proxy.published); }).appendTo($rightside);
APP.$publishButton = $publish;
updatePublishButton();
@ -1230,11 +1232,7 @@ define([
}
};
common.initFilePicker(fileDialogCfg);
APP.$mediaTagButton = $('<button>', {
title: Messages.filePickerButton,
'class': 'cp-toolbar-rightside-button fa fa-picture-o',
style: 'font-size: 17px'
}).click(function () {
APP.$mediaTagButton = common.createButton('mediatag', true).click(function () {
var pickerCfg = {
types: ['file'],
where: ['root']

63
www/slide/inner.js
View File

@ -73,9 +73,7 @@ define([
};
var mkSlidePreviewPane = function (framework, $contentContainer) {
var $previewButton = framework._.sfCommon.createButton(null, true);
$previewButton.removeClass('fa-question').addClass('fa-eye');
$previewButton.attr('title', Messages.previewButtonTitle);
var $previewButton = framework._.sfCommon.createButton('preview', true);
$previewButton.click(function () {
var $c = $contentContainer;
if ($c.hasClass('cp-app-slide-preview')) {
@ -102,19 +100,16 @@ define([
});
};
var mkPrintButton = function (framework, editor, $content, $print, $toolbarDrawer) {
var $printButton = $('<button>', {
title: Messages.printButtonTitle,
'class': 'cp-toolbar-rightside-button fa fa-print',
style: 'font-size: 17px'
}).click(function () {
var mkPrintButton = function (framework, editor, $content, $print) {
var $printButton = framework._.sfCommon.createButton('print', true);
$printButton.click(function () {
Slide.update(editor.getValue(), true);
$print.html($content.html());
window.focus();
window.print();
framework.feedback('PRINT_SLIDES');
}).append($('<span>', {'class': 'cp-toolbar-drawer-element'}).text(Messages.printText));
$toolbarDrawer.append($printButton);
});
framework._.toolbar.$drawer.append($printButton);
};
// Flag to check if a file from the filepicker is a mediatag for the slides or a background image
@ -122,7 +117,7 @@ define([
isBackground: false
};
var mkSlideOptionsButton = function (framework, slideOptions, $toolbarDrawer) {
var mkSlideOptionsButton = function (framework, slideOptions) {
var metadataMgr = framework._.cpNfInner.metadataMgr;
var updateSlideOptions = function (newOpt) {
if (JSONSortify(newOpt) !== JSONSortify(slideOptions)) {
@ -319,14 +314,17 @@ define([
return $container;
};
var $slideOptions = $('<button>', {
var $optionsButton = framework._.sfCommon.createButton(null, true, {
icon: 'fa-cog',
title: Messages.slideOptionsTitle,
'class': 'cp-toolbar-rightside-button fa fa-cog cp-hidden-if-readonly',
style: 'font-size: 17px'
}).click(function () {
hiddenReadOnly: true,
text: Messages.slideOptionsText,
name: 'options'
});
$optionsButton.click(function () {
$('body').append(createPrintDialog());
}).append($('<span>', {'class': 'cp-toolbar-drawer-element'}).text(Messages.slideOptionsText));
$toolbarDrawer.append($slideOptions);
});
framework._.toolbar.$drawer.append($optionsButton);
metadataMgr.onChange(function () {
var md = metadataMgr.getMetadata();
@ -363,17 +361,21 @@ define([
framework.localChange();
};
var $back = $('<button>', {
id: SLIDE_BACKCOLOR_ID,
'class': 'fa fa-square cp-toolbar-rightside-button cp-hidden-if-readonly',
'style': 'font-family: FontAwesome; color: #000;',
title: Messages.backgroundButtonTitle
var $back = framework._.sfCommon.createButton(null, true, {
icon: 'fa-square',
title: Messages.backgroundButtonTitle,
hiddenReadOnly: true,
name: 'background',
style: 'color: #000;',
id: SLIDE_BACKCOLOR_ID
});
var $text = $('<button>', {
id: SLIDE_COLOR_ID,
'class': 'fa fa-i-cursor cp-toolbar-rightside-button cp-hidden-if-readonly',
'style': 'font-family: FontAwesome; font-weight: bold; color: #fff;',
title: Messages.colorButtonTitle
var $text = framework._.sfCommon.createButton(null, true, {
icon: 'fa-i-cursor',
title: Messages.colorButtonTitle,
hiddenReadOnly: true,
name: 'color',
style: 'font-weight: bold; color: #FFF;',
id: SLIDE_COLOR_ID
});
var $testColor = $('<input>', { type: 'color', value: '!' });
var $check = $("#cp-app-slide-colorpicker");
@ -471,7 +473,7 @@ define([
activateLinks($content, framework);
Slide.setModal(framework._.sfCommon, $modal, $content, slideOptions, Messages.slideInitialState);
mkPrintButton(framework, editor, $content, $print, $toolbarDrawer);
mkPrintButton(framework, editor, $content, $print);
mkSlideOptionsButton(framework, slideOptions, $toolbarDrawer);
mkColorConfiguration(framework, $modal);
mkFilePicker(framework, editor);
@ -559,9 +561,6 @@ define([
if ($c.hasClass('cp-app-slide-preview')) {
return $('.cp-app-slide-frame').first()[0];
}
if ($codeMirror.length) {
return $codeMirror[0];
}
};
var main = function () {

3
www/slide/slide.js
View File

@ -139,7 +139,6 @@ define([
change(null, Slide.index);
Common.setPresentUrl(true);
$('.cp-app-slide-present-button').hide();
updateFontSize();
return;
}
@ -147,8 +146,6 @@ define([
Common.setTabTitle(); // Remove the slide number from the title
Common.setPresentUrl(false);
change(Slide.index, null);
$('.cp-app-slide-present-button').show();
$('.cp-app-slide-source-button').hide();
$modal.removeClass('cp-app-slide-shown');
updateFontSize();
};

7
www/whiteboard/app-whiteboard.less
View File

@ -31,6 +31,13 @@
display: none;
}
.cp-toolbar-rightside {
.cp-toolbar-icon-savetodrive { order: 13; }
.cp-toolbar-icon-embedImage { order: 12; }
.cp-toolbar-icon-mediatag { order: 11; }
.cp-toolbar-icon-color { order: 10; }
}
#cp-app-whiteboard-media-hidden {
display: none;
}

30
www/whiteboard/inner.js
View File

@ -312,12 +312,13 @@ define([
return;
}
var $color = APP.$color = $('<button>', {
id: "cp-app-whiteboard-color-picker",
var $color = APP.$color = common.createButton(null, true, {
icon: 'fa-square',
title: Messages.canvas_chooseColor,
'class': "fa fa-square cp-toolbar-rightside-button",
})
.on('click', function () {
name: 'color',
id: 'cp-app-whiteboard-color-picker'
});
$color.on('click', function () {
pickColor($color.css('background-color'), function (color) {
setColor(color);
});
@ -469,12 +470,13 @@ define([
};
reader.readAsDataURL(file);
};
common.createButton('', true)
.attr('title', Messages.canvas_imageEmbed)
.removeClass('fa-question').addClass('fa-file-image-o')
.click(function () {
$('<input>', {type:'file'}).on('change', onUpload).click();
}).appendTo($rightside);
common.createButton('', true, {
title: Messages.canvas_imageEmbed,
icon: 'fa-file-image-o',
name: 'embedImage'
}).click(function () {
$('<input>', {type:'file'}).on('change', onUpload).click();
}).appendTo($rightside);
if (common.isLoggedIn()) {
var fileDialogCfg = {
@ -493,11 +495,7 @@ define([
}
};
common.initFilePicker(fileDialogCfg);
APP.$mediaTagButton = $('<button>', {
title: Messages.filePickerButton,
'class': 'cp-toolbar-rightside-button fa fa-picture-o',
style: 'font-size: 17px'
}).click(function () {
APP.$mediaTagButton = common.createButton('mediatag', true).click(function () {
var pickerCfg = {
types: ['file'],
where: ['root'],