diff --git a/customize.dist/ckeditor-config.js b/customize.dist/ckeditor-config.js index 1ae5d05d0..762359b9c 100644 --- a/customize.dist/ckeditor-config.js +++ b/customize.dist/ckeditor-config.js @@ -8,13 +8,12 @@ CKEDITOR.editorConfig = function( config ) { // https://dev.ckeditor.com/ticket/10907 config.needsBrFiller= fixThings; config.needsNbspFiller= fixThings; - config.disableObjectResizing = true; config.removeButtons= 'Source,Maximize'; // magicline plugin inserts html crap into the document which is not part of the // document itself and causes problems when it's sent across the wire and reflected back - config.removePlugins= 'resize,elementspath'; + config.removePlugins= 'resize,elementspath,contextmenu,liststyle,tabletools,tableselection'; config.resize_enabled= false; //bottom-bar config.extraPlugins= 'autolink,colorbutton,colordialog,font,indentblock,justify,mediatag,print,blockbase64,mathjax,wordcount,comments'; config.toolbarGroups= [ @@ -35,7 +34,7 @@ CKEDITOR.editorConfig = function( config ) { config.mathJaxLib = '/pad/mathjax/MathJax.js?config=TeX-AMS_HTML'; config.font_defaultLabel = 'Arial'; config.fontSize_defaultLabel = '16'; - + config.accessibility = 'true'; config.keystrokes = [ [ CKEDITOR.ALT + 121 /*F10*/, 'toolbarFocus' ], [ CKEDITOR.ALT + 122 /*F11*/, 'elementsPathFocus' ], @@ -53,7 +52,13 @@ CKEDITOR.editorConfig = function( config ) { [ CKEDITOR.CTRL + 73 /*I*/, 'italic' ], [ CKEDITOR.CTRL + 85 /*U*/, 'underline' ], - [ CKEDITOR.ALT + 109 /*-*/, 'toolbarCollapse' ] + [CKEDITOR.ALT + 109 /*-*/, 'toolbarCollapse' ], + [37 /* Left Arrow */, 'focusPreviousButton'], + [39 /* Right Arrow */, 'focusNextButton'], + //enter + [13, 'clickFocusedButton'], + //space bar + [32, 'clickFocusedButton'] ]; //skin: 'moono-cryptpad,/pad/themes/moono-cryptpad/' diff --git a/www/pad/app-pad.less b/www/pad/app-pad.less index 9059a1c31..dda6f1069 100644 --- a/www/pad/app-pad.less +++ b/www/pad/app-pad.less @@ -28,6 +28,15 @@ body.cp-app-pad { flex-flow: row; height: 100%; overflow: hidden; + .cp-toolbar-chat-drawer, .cp-toolbar-userlist-drawer{ + @media screen and (max-width: @browser_media-medium-screen){ + position: absolute; + right: 0; + bottom: 0; + top: 74px; + + } + } } @media screen and (max-height: @browser_media-medium-screen), @@ -78,6 +87,7 @@ body.cp-app-pad { border-color: @cryptpad_color_red; } } + .cp-pad-show { line-height: 0px; } @@ -139,7 +149,7 @@ body.cp-app-pad { } h2 { font-size: 1.5rem; - text-align: right; + text-align: center; } .comments_main(); } @@ -150,6 +160,13 @@ body.cp-app-pad { h2 { text-align: left; } + p.msg{ + align-self: center; + padding: 0; + } + .dialog.nav{ + padding: 10px; + } } .cke_toolbox_main { @@ -158,6 +175,7 @@ body.cp-app-pad { .cke_toolbar { height: 28px; padding: 2px 0; + display: flex; } .cp-app-pad-wordCount { float: right; @@ -175,6 +193,15 @@ body.cp-app-pad { border-color: @toolbar-bg-active; } .cke_button, .cke_combo_button { + .cke_combo_open{ + display: flex; + flex-flow: row; + .cke_combo_arrow{ + @media (max-width: 360px){ + display:none; + } + } + } .tools_unselectable(); &.cke_button_on, &.cke_combo_button:hover, &.cke_button_off:hover { background-color: @toolbar-bg-active; diff --git a/www/pad/csp.js b/www/pad/csp.js index 31eaa861f..039ddf6ef 100644 --- a/www/pad/csp.js +++ b/www/pad/csp.js @@ -18,11 +18,12 @@ define(['jquery'], function ($) { CKEDITOR.tools.callFunction(Number(m[1]), e.currentTarget); $iframe.scrollTop(s); }); - + // Buttons var $a = $('.cke_toolbox_main').find('.cke_button, .cke_combo_button'); $a.each(function (i, el) { var $el = $(el); + $el.attr('tabindex', '0'); var $icon = $el.find('span.cke_button_icon'); if ($icon.length) { try { @@ -34,7 +35,16 @@ define(['jquery'], function ($) { } catch (e) { console.error(e); } } $el.on('keydown blur focus click dragstart', function (e) { - e.preventDefault(); + if (e.key !== 'Tab') { e.preventDefault(); } + if (e.key === 'Enter' || e.key === ' ') { + e.preventDefault(); + var focusedButton = document.activeElement; + + // Simulate a click event on the focused button + if (focusedButton) { + focusedButton.click(); + } + } var attr = $(el).attr('oon'+e.type); if (!attr) { return; } if (['blur', 'dragstart'].indexOf(e.type) !== -1) { return false; } @@ -48,7 +58,7 @@ define(['jquery'], function ($) { $iframe.scrollTop(s); }); }); - + // Dropdown menus