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

Slide app toolbar

This commit is contained in:
yflory 2020-05-07 18:16:36 +02:00
parent f506400f76
commit 55e531c8f7
6 changed files with 105 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -863,7 +863,7 @@ color: var(--toolbar-bg-color);
position: relative;
.cp-dropdown-button-title {
position: absolute;
bottom: 0;
bottom: 10px;
right: 0;
font-size: 14px;
border: 1px solid;
@ -1025,12 +1025,13 @@ color: var(--toolbar-bg-color);
}
}
button {
position: relative;
margin: 0px;
border-radius: 0;
height: @toolbar_line-height;
display: inline-flex;
align-items: center;
.fa {
.fa, .cptools {
margin-right: 5px;
}
}
@ -1044,6 +1045,7 @@ color: var(--toolbar-bg-color);
.cp-toolbar-bottom-left {
display: flex;
order: 1;
}
.cp-toolbar-bottom-mid {
@ -1064,7 +1066,8 @@ color: var(--toolbar-bg-color);
box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2);
position: absolute;
left: 0px;
margin-top: @toolbar_line-height;
top: @toolbar_line-height;
margin: -1px;
min-width: 50px;
background: @colortheme_dropdown-bg;
display: flex;
@ -1083,6 +1086,7 @@ color: var(--toolbar-bg-color);
border: 0;
}
button {
white-space: nowrap;
padding: 5px 16px;
text-align: left;
margin: 0;

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

@ -1513,16 +1513,20 @@ define([
});
break;
case 'present':
button = $('<button>', {
title: Messages.presentButtonTitle,
'class': "fa fa-play-circle cp-toolbar-icon-present", // used in slide.js
});
button = $(h('button', {
title: Messages.presentButtonTitle, // XXX remove tippy?
}, [
h('i.fa.fa-play-circle'),
h('span.cp-toolbar-name', Messages.share_linkPresent)
])).click(common.prepareFeedback(type));
break;
case 'preview':
button = $('<button>', {
title: Messages.previewButtonTitle,
'class': "fa fa-eye cp-toolbar-icon-preview",
});
button = $(h('button', {
title: Messages.previewButtonTitle, // XXX remove tippy?
}, [
h('i.fa.fa-eye'),
h('span.cp-toolbar-name', Messages.share_linkOpen)
])).click(common.prepareFeedback(type));
break;
case 'print':
button = $('<button>', {
@ -1555,11 +1559,13 @@ define([
}
break;
case 'mediatag':
button = $('<button>', {
'class': 'fa fa-picture-o cp-toolbar-icon-mediatag',
title: Messages.filePickerButton,
})
.click(common.prepareFeedback(type));
Messages.toolbar_insert = "Insert"; // XXX
button = $(h('button', {
title: Messages.filePickerButton, // XXX remove tippy?
}, [
h('i.fa.fa-picture-o'),
h('span.cp-toolbar-name', Messages.toolbar_insert)
])).click(common.prepareFeedback(type));
break;
case 'savetodrive':
button = $('<button>', {
@ -1584,9 +1590,14 @@ define([
});
break;
case 'toggle':
button = $('<button>', {
'class': 'fa fa-caret-down cp-toolbar-icon-toggle',
});
Messages.toolbar_tools = "Tools"; // XXX
button = $(h('button', {
title: data.title || '', // XXX remove tippy?
}, [
h('i.fa.fa-wrench'),
h('span.cp-toolbar-name', Messages.toolbar_tools)
])).click(common.prepareFeedback(type));
/*
window.setTimeout(function () {
button.attr('title', data.title);
});
@ -1595,6 +1606,7 @@ define([
if (!isVisible) { button.addClass('fa-caret-down'); }
else { button.addClass('fa-caret-up'); }
};
*/
button.click(function (e) {
data.element.toggle();
var isVisible = data.element.is(':visible');
@ -1606,9 +1618,9 @@ define([
button.removeClass('cp-toolbar-button-active');
if (e.originalEvent) { Feedback.send('TOGGLE_HIDE_' + appType); }
}
updateIcon(isVisible);
//updateIcon(isVisible);
});
updateIcon(data.element.is(':visible'));
//updateIcon(data.element.is(':visible'));
break;
case 'properties':
button = $('<button>', {
@ -1638,25 +1650,21 @@ define([
default:
data = data || {};
var icon = data.icon || "fa-question";
button = $('<button>', {
'class': "fa " + icon,
})
.click(common.prepareFeedback(data.name || 'DEFAULT'));
//.click(common.prepareFeedback(type));
button = $(h('button', {
title: data.title || '', // XXX remove tippy?
}, [
h('i.fa.' + icon),
h('span.cp-toolbar-name.cp-toolbar-drawer-element', data.text)
])).click(common.prepareFeedback(data.name || 'DEFAULT'));
if (callback) {
button.click(callback);
}
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);
}
if (data.text) {
$('<span>', {'class': 'cp-toolbar-drawer-element'}).text(data.text)
.appendTo(button);
}
}
if (rightside) {
button.addClass('cp-toolbar-rightside-button');

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

@ -526,7 +526,7 @@ define([
mediaTagEmbedder($('<media-tag src="' + src +
'" data-crypto-key="cryptpad:' + data.key + '"></media-tag>'), data);
});
}).appendTo(toolbar.$rightside).hide();
}).appendTo(toolbar.$bottomL).hide();
};
var setMediaTagEmbedder = function (mte, filter) {
if (!common.isLoggedIn()) { return; }
@ -691,21 +691,21 @@ define([
getTitle: function () { return cpNfInner.metadataMgr.getMetadata().title; }
};
var $templateButton = common.createButton('template', true, templateObj);
toolbar.$rightside.append($templateButton);
toolbar.$drawer.append($templateButton);
}
var $importTemplateButton = common.createButton('importtemplate', true);
toolbar.$drawer.append($importTemplateButton);
/* add a forget button */
toolbar.$rightside.append(common.createButton('forget', true, {}, function (err) {
toolbar.$drawer.append(common.createButton('forget', true, {}, function (err) {
if (err) { return; }
stateChange(STATE.FORGOTTEN);
}));
if (common.isLoggedIn()) {
var $tags = common.createButton('hashtag', true);
toolbar.$rightside.append($tags);
toolbar.$drawer.append($tags);
}
var $properties = common.createButton('properties', true);

8
www/common/sframe-common-codemirror.js
View File

@ -188,15 +188,13 @@ define([
var Title;
var onLocal = function () {};
var $rightside;
var $drawer;
exp.init = function (local, title, toolbar) {
if (typeof local === "function") {
onLocal = local;
}
Title = title;
$rightside = toolbar.$rightside;
$drawer = toolbar.$drawer;
$drawer = toolbar.$theme || $();
};
var editor = exp.editor = CMeditor.fromTextArea($textarea[0], {
@ -355,10 +353,10 @@ define([
content: l.name // Pretty name of the language value
});
});
Messages.code_editorTheme = "Editor theme";
var dropdownConfig = {
text: 'Theme', // Button initial text
text: Messages.code_editorTheme, // Button initial text
options: options, // Entries displayed in the menu
left: true, // Open to the left of the button
isSelect: true,
initialValue: lastTheme,
feedback: 'CODE_THEME',

13
www/common/toolbar.js
View File

@ -30,6 +30,7 @@ MessengerUI, Messages) {
var BOTTOM_RIGHT_CLS = Bar.constants.bottomR = 'cp-toolbar-bottom-right';
var LEFTSIDE_CLS = Bar.constants.leftside = 'cp-toolbar-leftside';
var RIGHTSIDE_CLS = Bar.constants.rightside = 'cp-toolbar-rightside';
var FILE_CLS = Bar.constants.file = 'cp-toolbar-file';
var DRAWER_CLS = Bar.constants.drawer = 'cp-toolbar-drawer-content';
var HISTORY_CLS = Bar.constants.history = 'cp-toolbar-history';
@ -93,14 +94,14 @@ MessengerUI, Messages) {
Messages.toolbar_file = "File"; // XXX
if (!config.hideDrawer) {
var $drawer = $(h('button.' + FILE_CLS, [
h('i.fa.fa-file-o'),
h('span.cp-button-name', Messages.toolbar_file)
])).appendTo($file).hide();
var $drawerContent = $('<div>', {
'class': DRAWER_CLS,
'tabindex': 1
}).appendTo($file).hide();
var $drawer = $(h('button', [
h('i.fa.fa-file-o'),
h('span.cp-button-name', Messages.toolbar_file)
])).appendTo($file);
}).appendTo($drawer).hide();
$drawer.click(function () {
$drawerContent.toggle();
$drawer.removeClass('cp-toolbar-button-active');
@ -1248,6 +1249,7 @@ MessengerUI, Messages) {
toolbar.$bottomR = $toolbar.find('.'+Bar.constants.bottomR);
toolbar.$leftside = $toolbar.find('.'+Bar.constants.leftside);
toolbar.$rightside = $toolbar.find('.'+Bar.constants.rightside);
toolbar.$file = $toolbar.find('.'+Bar.constants.file);
toolbar.$drawer = $toolbar.find('.'+Bar.constants.drawer);
toolbar.$top = $toolbar.find('.'+Bar.constants.top);
toolbar.$history = $toolbar.find('.'+Bar.constants.history);
@ -1275,6 +1277,7 @@ MessengerUI, Messages) {
tb['notifications'] = createNotifications;
tb['pad'] = function () {
toolbar.$file.show();
addElement([
'chat', 'userlist', 'title', 'useradmin', 'spinner',
'newpad', 'share', 'access', 'limit', 'unpinnedWarning',

56
www/slide/inner.js
View File

@ -9,6 +9,7 @@ define([
'/common/common-util.js',
'/common/common-hash.js',
'/common/common-interface.js',
'/common/hyperscript.js',
'/customize/messages.js',
'cm/lib/codemirror',
@ -53,6 +54,7 @@ define([
Util,
Hash,
UI,
h,
Messages,
CMeditor)
{
@ -88,7 +90,7 @@ define([
$previewButton.addClass('cp-toolbar-button-active');
Slide.updateFontSize();
});
framework._.toolbar.$rightside.append($previewButton);
framework._.toolbar.$bottomM.append($previewButton);
framework._.sfCommon.getPadAttribute('previewMode', function (e, data) {
if (e) { return void console.error(e); }
@ -98,6 +100,39 @@ define([
});
};
var mkThemeButton = function (framework) {
Messages.toolbar_theme = "Theme";
var $theme = $(h('button', [
h('i.cptools.cptools-palette'),
h('span.cp-button-name', Messages.toolbar_theme)
]));
var $content = $(h('div.cp-toolbar-drawer-content', {
tabindex: 1
})).hide();
$theme.click(function () {
$content.toggle();
$theme.removeClass('cp-toolbar-button-active');
if ($content.is(':visible')) {
$theme.addClass('cp-toolbar-button-active');
$content.focus();
}
});
var onBlur = function (e) {
if (e.relatedTarget) {
if ($(e.relatedTarget).is('.cp-toolbar-drawer-button')) { return; }
if ($(e.relatedTarget).parents('.cp-toolbar-drawer-content').length) {
$(e.relatedTarget).blur(onBlur);
return;
}
}
$theme.removeClass('cp-toolbar-button-active');
$content.hide();
};
$content.blur(onBlur).appendTo($theme);
framework._.toolbar.$theme = $content;
framework._.toolbar.$bottomL.append($theme);
};
var mkPrintButton = function (framework, editor, $content, $print) {
var $printButton = framework._.sfCommon.createButton('print', true);
$printButton.click(function () {
@ -302,7 +337,7 @@ define([
$optionsButton.click(function () {
$('body').append(createPrintDialog());
});
framework._.toolbar.$drawer.append($optionsButton);
framework._.toolbar.$theme.append($optionsButton);
metadataMgr.onChange(function () {
var md = metadataMgr.getMetadata();
@ -322,12 +357,12 @@ define([
textColor = text;
$modal.css('color', text);
$modal.css('border-color', text);
$('#' + SLIDE_COLOR_ID).css('color', text);
$('#' + SLIDE_COLOR_ID).find('i').css('color', text);
}
if (back) {
backColor = back;
$modal.css('background-color', back);
$('#' + SLIDE_BACKCOLOR_ID).css('color', back);
$('#' + SLIDE_BACKCOLOR_ID).find('i').css('color', back);
}
};
var updateLocalColors = function (text, back) {
@ -339,20 +374,22 @@ define([
framework.localChange();
};
Messages.slide_backCol = "Background color"; // XXX
var $back = framework._.sfCommon.createButton(null, true, {
icon: 'fa-square',
text: Messages.slide_backCol,
title: Messages.backgroundButtonTitle,
hiddenReadOnly: true,
name: 'background',
style: 'color: #000;',
id: SLIDE_BACKCOLOR_ID
});
Messages.slide_textCol = "Text color"; // XXX
var $text = framework._.sfCommon.createButton(null, true, {
icon: 'fa-i-cursor',
text: Messages.slide_textCol,
title: Messages.colorButtonTitle,
hiddenReadOnly: true,
name: 'color',
style: 'font-weight: bold; color: #FFF;',
id: SLIDE_COLOR_ID
});
var $testColor = $('<input>', { type: 'color', value: '!' });
@ -377,7 +414,7 @@ define([
$foregroundPicker.click();
});
framework._.toolbar.$rightside.append($text).append($back);
framework._.toolbar.$theme.append($text).append($back);
metadataMgr.onChange(function () {
var md = metadataMgr.getMetadata();
@ -405,7 +442,7 @@ define([
var $codeMirrorContainer = $('#cp-app-slide-editor-container');
var markdownTb = framework._.sfCommon.createMarkdownToolbar(editor);
$codeMirrorContainer.prepend(markdownTb.toolbar);
framework._.toolbar.$rightside.append(markdownTb.button);
framework._.toolbar.$bottomL.append(markdownTb.button);
};
var mkHelpMenu = function (framework) {
@ -451,6 +488,7 @@ define([
activateLinks($content, framework);
Slide.setModal(framework._.sfCommon, $modal, $content, slideOptions, Messages.slideInitialState);
mkThemeButton(framework);
mkPrintButton(framework, editor, $content, $print);
mkSlideOptionsButton(framework, slideOptions, $toolbarDrawer);
mkColorConfiguration(framework, $modal);
@ -534,7 +572,7 @@ define([
Slide.setTitle(framework._.title);
var enterPresentationMode = function () { Slide.show(true, editor.getValue()); };
framework._.toolbar.$rightside.append(
framework._.toolbar.$bottomM.append(
framework._.sfCommon.createButton('present', true).click(enterPresentationMode)
);
if (isPresentMode) { enterPresentationMode(); }