mirror of https://github.com/xwiki-labs/cryptpad
Merge pull request #1578 from cryptpad/Misaligned-file-menu-items
Fix misaligned/missing file dropdown menu items
This commit is contained in:
commit
b0407255ff
|
@ -73,8 +73,8 @@
|
|||
text-transform: uppercase;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
.fa:not(:last-child) {
|
||||
margin-right: 5px;
|
||||
i:not(:last-child) {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
&:hover {
|
||||
background-color: fade(@cp_toolbar-fg, 30%);
|
||||
|
|
|
@ -987,11 +987,8 @@
|
|||
height: @toolbar_line-height;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
.fa, .cptools {
|
||||
margin-right: 5px;
|
||||
}
|
||||
.cp-dropdown-button-title .cp-icon {
|
||||
margin-left: 5px;
|
||||
i ~ span {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
&:hover {
|
||||
background-color: fade(@cp_toolbar-bottom-bg, 70%);
|
||||
|
@ -1113,15 +1110,6 @@
|
|||
}
|
||||
}
|
||||
.cp-toolbar-bottom-left {
|
||||
.cp-toolbar-appmenu, .cp-toolbar-file {
|
||||
button {
|
||||
&::before, .fa {
|
||||
min-width: 20px;
|
||||
text-align: center;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.cp-toolbar-file {
|
||||
order: 1;
|
||||
}
|
||||
|
|
|
@ -623,13 +623,22 @@ define([
|
|||
var appType = (common.getMetadataMgr().getMetadata().type || 'pad').toUpperCase();
|
||||
data = data || {};
|
||||
if (!callback && data.callback) { callback = data.callback; }
|
||||
|
||||
let makeButton = function(iconClasses, buttonClasses, title, text) {
|
||||
const ariaLabel = title || text || '';
|
||||
return $(h('button', {
|
||||
class: buttonClasses,
|
||||
title: title,
|
||||
'aria-label': ariaLabel
|
||||
}, [
|
||||
iconClasses ? h('i', { class: iconClasses }) : null,
|
||||
text ? h('span', { class: 'cp-toolbar-drawer-element' }, text) : null
|
||||
]));
|
||||
};
|
||||
|
||||
switch (type) {
|
||||
case 'export':
|
||||
button = $('<button>', {
|
||||
'class': 'fa fa-download cp-toolbar-icon-export',
|
||||
title: Messages.exportButtonTitle,
|
||||
}).append($('<span>', {'class': 'cp-toolbar-drawer-element'}).text(Messages.exportButton));
|
||||
|
||||
button = makeButton('fa fa-download', 'cp-toolbar-icon-export', Messages.exportButtonTitle, Messages.exportButton);
|
||||
button
|
||||
.click(common.prepareFeedback(type))
|
||||
.click(UI.clearTooltipsDelay);
|
||||
|
@ -638,34 +647,28 @@ define([
|
|||
}
|
||||
break;
|
||||
case 'import':
|
||||
button = $('<button>', {
|
||||
'class': 'fa fa-upload cp-toolbar-icon-import',
|
||||
title: Messages.importButtonTitle,
|
||||
}).append($('<span>', {'class': 'cp-toolbar-drawer-element'}).text(Messages.importButton));
|
||||
var importer = importContent((data && data.binary) ? 'application/octet-stream' : 'text/plain', callback, {
|
||||
accept: data ? data.accept : undefined,
|
||||
binary: data ? data.binary : undefined
|
||||
});
|
||||
button = makeButton('fa fa-upload', 'cp-toolbar-icon-import', Messages.importButtonTitle, Messages.importButton);
|
||||
var importer = importContent((data && data.binary) ? 'application/octet-stream' : 'text/plain', callback, {
|
||||
accept: data ? data.accept : undefined,
|
||||
binary: data ? data.binary : undefined
|
||||
});
|
||||
|
||||
var handler = data.first? function () {
|
||||
data.first(function () {
|
||||
importer(); // Make sure we don't pass arguments to importer
|
||||
});
|
||||
}: importer; //importContent;
|
||||
|
||||
button
|
||||
.click(common.prepareFeedback(type))
|
||||
.click(function () {
|
||||
handler();
|
||||
UI.clearTooltipsDelay();
|
||||
var handler = data.first? function () {
|
||||
data.first(function () {
|
||||
importer(); // Make sure we don't pass arguments to importer
|
||||
});
|
||||
}: importer; //importContent;
|
||||
|
||||
button
|
||||
.click(common.prepareFeedback(type))
|
||||
.click(function () {
|
||||
handler();
|
||||
UI.clearTooltipsDelay();
|
||||
});
|
||||
//}
|
||||
break;
|
||||
case 'upload':
|
||||
button = $('<button>', {
|
||||
'class': 'btn btn-primary new',
|
||||
title: Messages.uploadButtonTitle,
|
||||
}).append($('<span>', {'class':'fa fa-upload'})).append(' '+Messages.uploadButton);
|
||||
button = makeButton('fa fa-upload', 'btn btn-primary new', Messages.uploadButtonTitle, Messages.uploadButton);
|
||||
if (!data.FM) { return; }
|
||||
var $input = $('<input>', {
|
||||
'type': 'file',
|
||||
|
@ -697,9 +700,7 @@ define([
|
|||
});
|
||||
break;
|
||||
case 'copy':
|
||||
button = $('<button>', {
|
||||
'class': 'fa fa-files-o cp-toolbar-icon-import',
|
||||
}).append($('<span>', {'class': 'cp-toolbar-drawer-element'}).text(Messages.makeACopy));
|
||||
button = makeButton('fa fa-files-o', 'cp-toolbar-icon-import', '', Messages.makeACopy);
|
||||
button
|
||||
.click(common.prepareFeedback(type))
|
||||
.click(function () {
|
||||
|
@ -710,9 +711,7 @@ define([
|
|||
case 'importtemplate':
|
||||
if (!AppConfig.enableTemplates) { return; }
|
||||
if (!common.isLoggedIn()) { return; }
|
||||
button = $('<button>', {
|
||||
'class': 'fa fa-upload cp-toolbar-icon-import',
|
||||
}).append($('<span>', {'class': 'cp-toolbar-drawer-element'}).text(Messages.template_import));
|
||||
button = makeButton('fa fa-upload', 'cp-toolbar-icon-import', '', Messages.template_import);
|
||||
button
|
||||
.click(common.prepareFeedback(type))
|
||||
.click(function () {
|
||||
|
@ -724,9 +723,7 @@ define([
|
|||
case 'template':
|
||||
if (!AppConfig.enableTemplates) { return; }
|
||||
if (!common.isLoggedIn()) { return; }
|
||||
button = $('<button>', {
|
||||
'class': 'cptools cptools-new-template cp-toolbar-icon-template',
|
||||
}).append($('<span>', {'class': 'cp-toolbar-drawer-element'}).text(Messages.saveTemplateButton));
|
||||
button = makeButton('cptools cptools-new-template', 'cp-toolbar-icon-template', '', Messages.saveTemplateButton);
|
||||
if (data.rt || data.callback) {
|
||||
button
|
||||
.click(function () {
|
||||
|
@ -774,9 +771,7 @@ define([
|
|||
}
|
||||
break;
|
||||
case 'forget':
|
||||
button = $('<button>', {
|
||||
'class': "fa fa-trash cp-toolbar-icon-forget"
|
||||
}).append($('<span>', {'class': 'cp-toolbar-drawer-element'}).text(Messages.fc_delete));
|
||||
button = makeButton('fa fa-trash', 'cp-toolbar-icon-forget', '', Messages.fc_delete);
|
||||
callback = typeof callback === "function" ? callback : function () {};
|
||||
button
|
||||
.click(common.prepareFeedback(type))
|
||||
|
@ -837,25 +832,16 @@ define([
|
|||
])).click(common.prepareFeedback(type));
|
||||
break;
|
||||
case 'print':
|
||||
button = $('<button>', {
|
||||
title: Messages.printButtonTitle2,
|
||||
'class': "fa fa-print cp-toolbar-icon-print",
|
||||
}).append($('<span>', {'class': 'cp-toolbar-drawer-element'}).text(Messages.printText));
|
||||
button = makeButton('fa fa-print', 'cp-toolbar-icon-print', Messages.printButtonTitle2, Messages.printText);
|
||||
break;
|
||||
case 'history':
|
||||
if (!AppConfig.enableHistory) {
|
||||
button = $('<span>');
|
||||
break;
|
||||
}
|
||||
button = $('<button>', {
|
||||
title: Messages.historyButton,
|
||||
'aria-label': Messages.historyButton,
|
||||
'class': "fa fa-history cp-toolbar-icon-history",
|
||||
}).append($('<span>', {'class': 'cp-toolbar-drawer-element'}).text(Messages.historyText));
|
||||
button = makeButton('fa fa-history', 'cp-toolbar-icon-history', Messages.historyButton, Messages.historyText, Messages.historyButton);
|
||||
if (data.histConfig) {
|
||||
button
|
||||
.click(common.prepareFeedback(type))
|
||||
.on('click', function () {
|
||||
button.click(common.prepareFeedback(type)).on('click', function () {
|
||||
common.getHistory(data.histConfig);
|
||||
UI.clearTooltipsDelay();
|
||||
});
|
||||
|
@ -879,9 +865,10 @@ define([
|
|||
if (callback) { button.click(callback); }
|
||||
break;
|
||||
case 'storeindrive':
|
||||
button = $(h('button.cp-toolbar-storeindrive.fa.fa-hdd-o', {
|
||||
button = $(h('button.cp-toolbar-storeindrive', {
|
||||
style: 'display:none;'
|
||||
}, [
|
||||
h('i.fa.fa-hdd-o'),
|
||||
h('span.cp-toolbar-name.cp-toolbar-drawer-element', Messages.toolbar_storeInDrive)
|
||||
])).click(common.prepareFeedback(type)).click(function () {
|
||||
$(button).hide();
|
||||
|
@ -902,10 +889,7 @@ define([
|
|||
});
|
||||
break;
|
||||
case 'hashtag':
|
||||
button = $('<button>', {
|
||||
'class': 'fa fa-hashtag cp-toolbar-icon-hashtag',
|
||||
title: Messages.tags_title,
|
||||
}).append($('<span>', {'class': 'cp-toolbar-drawer-element'}).text(Messages.fc_hashtag));
|
||||
button = makeButton('fa fa-hashtag', 'cp-toolbar-icon-hashtag', Messages.tags_title, Messages.fc_hashtag);
|
||||
button.click(common.prepareFeedback(type))
|
||||
.click(function () {
|
||||
common.isPadStored(function (err, data) {
|
||||
|
@ -950,11 +934,8 @@ define([
|
|||
//updateIcon(data.element.is(':visible'));
|
||||
break;
|
||||
case 'properties':
|
||||
button = $('<button>', {
|
||||
'class': 'fa fa-info-circle cp-toolbar-icon-properties',
|
||||
title: Messages.propertiesButtonTitle,
|
||||
}).append($('<span>', {'class': 'cp-toolbar-drawer-element'})
|
||||
.text(Messages.propertiesButton))
|
||||
button = makeButton('fa fa-info-circle', 'cp-toolbar-icon-properties', Messages.propertiesButtonTitle, Messages.propertiesButton);
|
||||
button
|
||||
.click(common.prepareFeedback(type))
|
||||
.click(function () {
|
||||
var isTop;
|
||||
|
@ -970,11 +951,8 @@ define([
|
|||
});
|
||||
break;
|
||||
case 'save': // OnlyOffice save
|
||||
button = $('<button>', {
|
||||
'class': 'fa fa-save',
|
||||
title: Messages.settings_save,
|
||||
}).append($('<span>', {'class': 'cp-toolbar-drawer-element'})
|
||||
.text(Messages.settings_save))
|
||||
button = makeButton('fa fa-save', '', Messages.settings_save, Messages.settings_save);
|
||||
button
|
||||
.click(function() {
|
||||
common.prepareFeedback(type);
|
||||
UI.clearTooltipsDelay();
|
||||
|
@ -982,10 +960,7 @@ define([
|
|||
if (callback) { button.click(callback); }
|
||||
break;
|
||||
case 'newpad':
|
||||
button = $('<button>', {
|
||||
title: Messages.newButtonTitle,
|
||||
'class': 'fa fa-plus cp-toolbar-icon-newpad',
|
||||
}).append($('<span>', {'class': 'cp-toolbar-drawer-element'}).text(Messages.newButton));
|
||||
button = makeButton('fa fa-plus', 'cp-toolbar-icon-newpad', Messages.newButtonTitle, Messages.newButton);
|
||||
button
|
||||
.click(common.prepareFeedback(type))
|
||||
.click(function () {
|
||||
|
@ -994,10 +969,7 @@ define([
|
|||
});
|
||||
break;
|
||||
case 'snapshots':
|
||||
button = $('<button>', {
|
||||
title: Messages.snapshots_button,
|
||||
'class': 'fa fa-camera cp-toolbar-icon-snapshots',
|
||||
}).append($('<span>', {'class': 'cp-toolbar-drawer-element'}).text(Messages.snapshots_button));
|
||||
button = makeButton('fa fa-camera', 'cp-toolbar-icon-snapshots', Messages.snapshots_button,Messages.snapshots_button);
|
||||
button
|
||||
.click(common.prepareFeedback(type))
|
||||
.click(function () {
|
||||
|
@ -1280,6 +1252,7 @@ define([
|
|||
kanban: 'kanban',
|
||||
form: 'form',
|
||||
whiteboard: 'whiteboard',
|
||||
diagram: 'diagram',
|
||||
};
|
||||
|
||||
var href = "https://docs.cryptpad.org/en/user_guide/applications.html";
|
||||
|
|
|
@ -4,20 +4,24 @@
|
|||
|
||||
// This is the initialization loading the CryptPad libraries
|
||||
define([
|
||||
'jquery',
|
||||
'/common/sframe-app-framework.js',
|
||||
'/customize/messages.js', // translation keys
|
||||
'/components/pako/dist/pako.min.js',
|
||||
'/components/x2js/x2js.js',
|
||||
'/diagram/util.js',
|
||||
'/common/common-ui-elements.js',
|
||||
'/components/tweetnacl/nacl-fast.min.js',
|
||||
'less!/diagram/app-diagram.less',
|
||||
'css!/diagram/drawio.css',
|
||||
], function (
|
||||
$,
|
||||
Framework,
|
||||
Messages,
|
||||
pako,
|
||||
X2JS,
|
||||
DiagramUtil
|
||||
DiagramUtil,
|
||||
UIElements
|
||||
) {
|
||||
const Nacl = window.nacl;
|
||||
const APP = window.APP = {};
|
||||
|
@ -61,6 +65,15 @@ define([
|
|||
return JSON.stringify(o1) === JSON.stringify(o2);
|
||||
};
|
||||
|
||||
var mkHelpMenu = function (framework) {
|
||||
var $codeMirrorContainer = $('#cp-app-diagram-container');
|
||||
var helpMenu = framework._.sfCommon.createHelpMenu(['diagram']);
|
||||
$codeMirrorContainer.prepend(helpMenu.menu);
|
||||
|
||||
var $helpMenuButton = UIElements.getEntryFromButton(helpMenu.button);
|
||||
framework._.toolbar.$drawer.append($helpMenuButton);
|
||||
};
|
||||
|
||||
// This is the main initialization loop
|
||||
var onFrameworkReady = function (framework) {
|
||||
var EMPTY_DRAWIO = "<mxfile type=\"embed\"><diagram id=\"bWoO5ACGZIaXrIiKNTKd\" name=\"Page-1\"><mxGraphModel dx=\"1259\" dy=\"718\" grid=\"1\" gridSize=\"10\" guides=\"1\" tooltips=\"1\" connect=\"1\" arrows=\"1\" fold=\"1\" page=\"1\" pageScale=\"1\" pageWidth=\"827\" pageHeight=\"1169\" math=\"0\" shadow=\"0\"><root><mxCell id=\"0\"/><mxCell id=\"1\" parent=\"0\"/></root></mxGraphModel></diagram></mxfile>";
|
||||
|
@ -69,6 +82,11 @@ define([
|
|||
var lastContent = x2js.xml2js(EMPTY_DRAWIO);
|
||||
var drawIoInitalized = false;
|
||||
|
||||
var privateData = framework._.cpNfInner.metadataMgr.getPrivateData();
|
||||
if (!privateData.isEmbed) {
|
||||
mkHelpMenu(framework);
|
||||
}
|
||||
|
||||
var postMessageToDrawio = function(msg) {
|
||||
if (!drawIoInitalized) {
|
||||
return;
|
||||
|
|
Loading…
Reference in New Issue