infra
/
cryptpad
2
1
Fork 0
Code Issues Pull Requests Projects Releases 1 Activity

Slide app toolbar

Browse Source
pull/1/head
yflory 5 years ago
parent f506400f76
commit 55e531c8f7
6 changed files with 105 additions and 54 deletions
Show Stats Download Patch File Download Diff File

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

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

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

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

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

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

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

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

13
www/common/toolbar.js
Unescape Escape View File

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

56
www/slide/inner.js
Unescape Escape View File

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

Write Preview
Loading…
Cancel
Save