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

Move initial state into a help block

Browse Source
This commit is contained in:
yflory
2018-02-27 17:38:29 +01:00
parent 5c53868c3b
commit 60b2384885
22 changed files with 251 additions and 206 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
www/code/app-code.less
View File

@@ -74,6 +74,24 @@
}
}
.markdown_main();
.cp-app-code-preview-empty {
display: none;
}
&.cp-app-code-preview-isempty {
display: flex;
align-items: center;
justify-content: center;
#cp-app-code-preview-content {
display: none;
}
.cp-app-code-preview-empty {
//flex: 1 1 auto;
max-height: 100%;
max-width: 100%;
display: block;
opacity: 0.2;
}
}
}
#cp-app-code-preview-content {

47
www/code/inner.js
View File

@@ -63,6 +63,31 @@ define([
'xml',
]);
var mkMarkdownTb = function (editor, framework) {
var $codeMirrorContainer = $('#cp-app-code-container');
var markdownTb = framework._.sfCommon.createMarkdownToolbar(editor);
$codeMirrorContainer.prepend(markdownTb.toolbar);
framework._.toolbar.$rightside.append(markdownTb.button);
var modeChange = function (mode) {
if (['markdown', 'gfm'].indexOf(mode) !== -1) { return void markdownTb.setState(true); }
markdownTb.setState(false);
};
return {
modeChange: modeChange
};
};
var mkHelpMenu = function (framework) {
var $codeMirrorContainer = $('#cp-app-code-container');
var helpMenu = framework._.sfCommon.createHelpMenu();
$codeMirrorContainer.prepend(helpMenu.menu);
$(helpMenu.text).html(DiffMd.render(Messages.codeInitialState));
framework._.toolbar.$rightside.append(helpMenu.button);
};
var mkPreviewPane = function (editor, CodeMirror, framework, isPresentMode) {
var $previewContainer = $('#cp-app-code-preview');
var $preview = $('#cp-app-code-preview-content');
@@ -70,12 +95,20 @@ define([
var $codeMirrorContainer = $('#cp-app-code-container');
var $codeMirror = $('.CodeMirror');
var markdownTb = framework._.sfCommon.createMarkdownToolbar(editor);
$codeMirrorContainer.prepend(markdownTb.toolbar);
$('<img>', {
src: '/customize/main-favicon.png',
alt: '',
class: 'cp-app-code-preview-empty'
}).appendTo($previewContainer);
var $previewButton = framework._.sfCommon.createButton(null, true);
var forceDrawPreview = function () {
try {
if (editor.getValue() === '') {
$previewContainer.addClass('cp-app-code-preview-isempty');
return;
}
$previewContainer.removeClass('cp-app-code-preview-isempty');
DiffMd.apply(DiffMd.render(editor.getValue()), $preview);
} catch (e) { console.error(e); }
};
@@ -118,7 +151,7 @@ define([
}
});
framework._.toolbar.$rightside.append($previewButton).append(markdownTb.button);
framework._.toolbar.$rightside.append($previewButton);
$preview.click(function (e) {
if (!e.target) { return; }
@@ -145,7 +178,6 @@ define([
}
}
});
markdownTb.setState(true);
return;
}
$editorContainer.removeClass('cp-app-code-present');
@@ -153,7 +185,6 @@ define([
$previewContainer.hide();
$previewButton.removeClass('active');
$codeMirrorContainer.addClass('cp-app-code-fullpage');
markdownTb.setState(false);
};
var isVisible = function () {
@@ -252,8 +283,12 @@ define([
var common = framework._.sfCommon;
var previewPane = mkPreviewPane(editor, CodeMirror, framework, isPresentMode);
var markdownTb = mkMarkdownTb(editor, framework);
mkHelpMenu(framework);
var evModeChange = Util.mkEvent();
evModeChange.reg(previewPane.modeChange);
evModeChange.reg(markdownTb.modeChange);
mkIndentSettings(editor, framework._.cpNfInner.metadataMgr);
CodeMirror.init(framework.localChange, framework._.title, framework._.toolbar);
@@ -315,7 +350,7 @@ define([
});
framework.onDefaultContentNeeded(function () {
editor.setValue(Messages.codeInitialState);
editor.setValue(''); //Messages.codeInitialState);
});
framework.setFileExporter(CodeMirror.getContentExtension, CodeMirror.fileExporter);

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

@@ -855,6 +855,45 @@ define([
};
};
UIElements.createHelpMenu = function (common) {
var type = common.getMetadataMgr().getMetadata().type || 'pad';
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');
var help = h('div.cp-help-container', [
closeButton,
text
]);
var toggleHelp = function (forceClose) {
if ($(help).hasClass('cp-help-hidden')) {
if (forceClose) { return; }
common.setAttribute(['hideHelp', type], false);
$toolbarButton.addClass('cp-toolbar-button-active');
return void $(help).removeClass('cp-help-hidden');
}
$toolbarButton.removeClass('cp-toolbar-button-active');
$(help).addClass('cp-help-hidden');
common.setAttribute(['hideHelp', type], true);
};
$(closeButton).click(function () { toggleHelp(true); });
$toolbarButton.click(function () {
toggleHelp();
});
common.getAttribute(['hideHelp', type], function (err, val) {
if (val === true) { toggleHelp(true); }
});
return {
menu: help,
button: $toolbarButton,
text: text
};
};
// Avatars
// Enable mediatags

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

@@ -141,7 +141,6 @@ define([
mode: defaultMode || "javascript",
readOnly: true
});
//editor.setValue(Messages.codeInitialState);
editor.focus();
var setMode = exp.setMode = function (mode, cb) {

1
www/common/sframe-common.js
View File

@@ -90,6 +90,7 @@ define([
funcs.updateTags = callWithCommon(UIElements.updateTags);
funcs.createLanguageSelector = callWithCommon(UIElements.createLanguageSelector);
funcs.createMarkdownToolbar = callWithCommon(UIElements.createMarkdownToolbar);
funcs.createHelpMenu = callWithCommon(UIElements.createHelpMenu);
funcs.getPadCreationScreen = callWithCommon(UIElements.getPadCreationScreen);
funcs.createNewPadModal = callWithCommon(UIElements.createNewPadModal);
funcs.onServerError = callWithCommon(UIElements.onServerError);

25
www/common/toolbar3.js
View File

@@ -377,38 +377,15 @@ define([
config.$contentContainer.prepend($content);
}
var $ck = config.$container.find('.cke_toolbox_main');
var mobile = $('body').width() <= 600;
var hide = function () {
$content.hide();
$button.removeClass('cp-toolbar-button-active');
$ck.css({
'padding-left': '',
});
};
var show = function () {
if (Bar.isEmbed) { $content.hide(); return; }
$content.show();
if (mobile) {
$ck.hide();
}
$button.addClass('cp-toolbar-button-active');
$ck.css({
'padding-left': '175px',
});
var h = $ck.is(':visible') ? -$ck.height() : 0;
$content.css('margin-top', h+'px');
};
$(window).on('cryptpad-ck-toolbar', function () {
if (mobile && $ck.is(':visible')) { return void hide(); }
if ($content.is(':visible')) { return void show(); }
hide();
});
$(window).on('resize', function () {
mobile = $('body').width() <= 600;
var h = $ck.is(':visible') ? -$ck.height() : 0;
$content.css('margin-top', h+'px');
});
$closeIcon.click(function () {
Common.setAttribute(['toolbar', 'userlist-drawer'], false);
hide();
@@ -423,7 +400,7 @@ define([
});
show();
Common.getAttribute(['toolbar', 'userlist-drawer'], function (err, val) {
if (val === false || mobile) { return void hide(); }
if (val === false) { return void hide(); }
show();
});

38
www/pad/app-pad.less
View File

@@ -15,19 +15,41 @@
padding: 0px;
display: flex;
}
#cke_1_toolbox {
display: inline-flex;
width: 100%;
flex-flow: column;
.cke_toolbox_main {
background-color: @colortheme_pad-toolbar-bg;
}
#cke_1_toolbox .cke_toolbar {
height: 28px;
padding: 2px 0;
.cke_toolbar {
height: 28px;
padding: 2px 0;
}
}
.cke_wysiwyg_frame {
min-width: 60%;
}
#cke_1_toolbox {
flex: 1;
}
#cke_editor1 {
display: flex;
flex-flow: column;
height: 100%;
border: 0;
> .cke_inner {
flex: 1;
position: unset;
display: flex;
margin-top: -1px;
#cke_1_contents {
flex: 1;
display: flex;
flex-flow: column;
height: auto !important;
iframe {
flex: 1;
}
}
}
}
}
.cke_wysiwyg_frame {

36
www/pad/inner.js
View File

@@ -136,6 +136,16 @@ define([
check();
};
var mkHelpMenu = function (framework) {
var $toolbarContainer = $('.cke_toolbox_main');
var helpMenu = framework._.sfCommon.createHelpMenu();
$toolbarContainer.before(helpMenu.menu);
$(helpMenu.text).html(Messages.initialState);
framework._.toolbar.$rightside.append(helpMenu.button);
};
var mkDiffOptions = function (cursor, readOnly) {
return {
preDiffApply: function (info) {
@@ -269,8 +279,6 @@ define([
element: $bar.find('.cke_toolbox_main')
};
var onClick = function (visible) {
$(window).trigger('resize');
$(window).trigger('cryptpad-ck-toolbar');
framework._.sfCommon.setAttribute(['pad', 'showToolbar'], visible);
};
framework._.sfCommon.getAttribute(['pad', 'showToolbar'], function (err, data) {
@@ -324,12 +332,12 @@ define([
var andThen2 = function (editor, Ckeditor, framework) {
var mediaTagMap = {};
var $bar = $('#cke_1_toolbox');
var $contentContainer = $('#cke_1_contents');
var $html = $bar.closest('html');
var $faLink = $html.find('head link[href*="/bower_components/components-font-awesome/css/font-awesome.min.css"]');
if ($faLink.length) {
$html.find('iframe').contents().find('head').append($faLink.clone());
}
var ml = Ckeditor.instances.editor1.plugins.magicline.backdoor.that.line.$;
[ml, ml.parentElement].forEach(function (el) {
el.setAttribute('class', 'non-realtime');
@@ -352,6 +360,8 @@ define([
}
};
mkHelpMenu(framework);
framework.onEditableChange(function (unlocked) {
if (!framework.isReadOnly()) {
$(inner).attr('contenteditable', '' + Boolean(unlocked));
@@ -421,7 +431,7 @@ define([
$bar.find('#cke_1_toolbar_collapser').hide();
if (!framework.isReadOnly()) {
addToolbarHideBtn(framework, $bar);
addToolbarHideBtn(framework, $contentContainer);
} else {
$('.cke_toolbox_main').hide();
}
@@ -466,9 +476,7 @@ define([
});
});
framework.onDefaultContentNeeded(function () {
documentBody.innerHTML = Messages.initialState;
});
framework.onDefaultContentNeeded(function () { });
var importMediaTags = function (dom, cb) {
var $dom = $(dom);
@@ -561,9 +569,9 @@ define([
nThen(function (waitFor) {
Framework.create({
toolbarContainer: '#cke_1_toolbox',
contentContainer: '#cke_1_contents',
contentContainer: '#cke_editor1 > .cke_inner',
patchTransformer: ChainPad.NaiveJSONTransformer,
thumbnail: {
/*thumbnail: {
getContainer: function () { return $('iframe').contents().find('html')[0]; },
filter: function (el, before) {
if (before) {
@@ -584,7 +592,7 @@ define([
var range = module.cursor.makeRange();
module.cursor.fixSelection(sel, range);
}
}
}*/
}, waitFor(function (fw) { window.APP.framework = framework = fw; }));
nThen(function (waitFor) {
@@ -624,6 +632,14 @@ define([
height: Messages.pad_mediatagHeight
};
Links.addSupportForOpeningLinksInNewTab(Ckeditor)({editor: editor});
}).nThen(function () {
// Move ckeditor parts to have a structure like the other apps
var $toolbarContainer = $('#cke_1_top');
var $contentContainer = $('#cke_1_contents');
var $mainContainer = $('#cke_editor1');
$contentContainer.prepend($toolbarContainer.find('.cke_toolbox_main'));
$mainContainer.prepend($toolbarContainer);
$contentContainer.find('.cke_toolbox_main').addClass('cke_reset_all');
}).nThen(waitFor());
}).nThen(function (/*waitFor*/) {

56
www/poll/inner.js
View File

@@ -14,6 +14,7 @@ define([
'/common/sframe-common-codemirror.js',
'/common/common-thumbnail.js',
'/common/common-interface.js',
'/common/hyperscript.js',
'/customize/messages.js',
'cm/lib/codemirror',
'/common/test.js',
@@ -43,6 +44,7 @@ define([
SframeCM,
Thumb,
UI,
h,
Messages,
CMeditor,
Test)
@@ -61,8 +63,6 @@ define([
var debug = $.noop; //console.log;
var HIDE_INTRODUCTION_TEXT = "hide-text";
var metadataMgr;
var Title;
var common;
@@ -628,29 +628,6 @@ define([
APP.editor.refresh();
};
var updateHelpButton = function () {
if (!APP.$helpButton) { return; }
var help = $('#cp-app-poll-help').is(':visible');
var msg = (help ? Messages.poll_hide_help_button : Messages.poll_show_help_button);
APP.$helpButton.attr('title', msg);
if (help) {
APP.$helpButton.addClass('cp-toolbar-button-active');
return;
}
APP.$helpButton.removeClass('cp-toolbar-button-active');
};
var showHelp = function(help) {
if (typeof help === 'undefined') {
help = !$('#cp-app-poll-help').is(':visible');
}
var msg = (help ? Messages.poll_hide_help_button : Messages.poll_show_help_button);
$('#cp-app-poll-help').toggle(help);
$('#cp-app-poll-action-help').text(msg);
updateHelpButton();
};
var setEditable = function (editable) {
APP.locked = APP.readOnly || !editable;
@@ -1221,10 +1198,19 @@ define([
var $export = common.createButton('export', true, {}, exportFile);
$drawer.append($export);
var $help = common.createButton('', true).click(function () { showHelp(); })
.appendTo($rightside);
APP.$helpButton = $help;
updateHelpButton();
var helpMenu = common.createHelpMenu();
$('#cp-app-poll-form').prepend(helpMenu.menu);
$rightside.append(helpMenu.button);
var setHTML = function (e, html) {
e.innerHTML = html;
return e;
};
var help = h('div', [
setHTML(h('h1'), Messages.poll_subtitle),
h('p', Messages.poll_p_save),
h('p', Messages.poll_p_encryption)
]);
$(helpMenu.text).html($(help).html());
if (APP.readOnly) { publish(true); return; }
var $publish = common.createButton('', true)
@@ -1344,18 +1330,6 @@ define([
})
.on('disconnect', onDisconnect)
.on('reconnect', onReconnect);
common.getAttribute(['poll', HIDE_INTRODUCTION_TEXT], function (e, value) {
if (e) { console.error(e); }
if (!value) {
common.setAttribute(['poll', HIDE_INTRODUCTION_TEXT], "1", function (e) {
if (e) { console.error(e); }
});
showHelp(true);
} else {
showHelp(false);
}
});
});
};
main();

10
www/slide/app-slide.less
View File

@@ -221,6 +221,16 @@ div#cp-app-slide-modal {
background-color: black;
color: white;
.cp-app-slide-isempty {
display: flex;
align-items: center;
justify-content: center;
img {
max-width: 100%;
max-height: 100%;
}
}
/* Navigation buttons */
.cp-app-slide-modal-button {
position: absolute;

15
www/slide/inner.js
View File

@@ -9,6 +9,7 @@ define([
'/common/common-util.js',
'/common/common-hash.js',
'/common/common-interface.js',
'/common/diffMarked.js',
'/customize/messages.js',
'cm/lib/codemirror',
@@ -53,6 +54,7 @@ define([
Util,
Hash,
UI,
DiffMd,
Messages,
CMeditor)
{
@@ -426,6 +428,16 @@ define([
framework._.toolbar.$rightside.append(markdownTb.button);
};
var mkHelpMenu = function (framework) {
var $codeMirrorContainer = $('#cp-app-slide-editor-container');
var helpMenu = framework._.sfCommon.createHelpMenu();
$codeMirrorContainer.prepend(helpMenu.menu);
$(helpMenu.text).html(DiffMd.render(Messages.slideInitialState));
framework._.toolbar.$rightside.append(helpMenu.button);
};
var activateLinks = function ($content, framework) {
$content.click(function (e) {
if (!e.target) { return; }
@@ -465,6 +477,7 @@ define([
mkFilePicker(framework, editor);
mkSlidePreviewPane(framework, $contentContainer);
mkMarkdownToolbar(framework, editor);
mkHelpMenu(framework);
CodeMirror.configureTheme(common);
@@ -519,7 +532,7 @@ define([
});
framework.onDefaultContentNeeded(function () {
CodeMirror.contentUpdate({ content: Messages.slideInitialState });
CodeMirror.contentUpdate({ content: '' });
});
Slide.setTitle(framework._.title);

14
www/slide/slide.js
View File

@@ -75,6 +75,20 @@ define([
if (typeof(Slide.content) !== 'string') { return; }
var c = Slide.content;
if (c === '') {
var $empty = $('<img>', {
src: '/customize/main-favicon.png',
alt: '',
class: 'cp-app-code-preview-empty'
});
$content.html('').append($empty);
$content.addClass('cp-app-slide-isempty');
return;
//c = $('<div>').append($empty).html();
}
$content.removeClass('cp-app-slide-isempty');
var mediatagBg = '';
if (options.background && options.background.mt) {
mediatagBg = options.background.mt;