Make text area markdown toolbar responsive #1845
Conversation
|
Some review comments
|
|
Found a new issue: Markdown toolbar never appears for the submit message section. This PR aims to fix it as well. |
|
Design issues to finalise (by me):
|
There was a problem hiding this comment.
In addition to the specific comments in the code, I feel like this PR is adding a lot of complexity in our available tools.
With these changes, ff we want to create a markdown toolbar for a new app, we'll need to call 3 or 4 functions and also some event listeners. Some parts of the code are duplicated in multiple apps.
I would prefer to keep our single function "createMarkdownToolbar" that returns a "div" node, and this node's content automatically updates depending on the situation.
- full list of button on a big screen
- "Show" button for small screen and, when clicking on it, the button are added to the initial element
- Listen for "resize" inside this function
Basically, merge UIElements.updateToolbarVisibility and UIElements.createMarkdownToolbarToggle into createMarkdownToolbar, and keep the same definition for the markdown toolbar: let toolbar = UIElements.cvreateMarkdownToolbar(editor);
7f6fba5 to
0fe3f51
Compare
www/common/common-ui-elements.js
Outdated
|
|
||
| var toolbarVisibleOnSmallScreen = false; | ||
| var $toolbarToggleButton = null; | ||
| var appType = common.getMetadataMgr().getMetadata().type; |
There was a problem hiding this comment.
I recommend to use
var appType = common.getMetadataMgr().getPrivateData().app;getMetadata() may not be available for all the apps.
www/common/common-ui-elements.js
Outdated
|
|
||
| if (isSmallScreen()) { | ||
| if (!$toolbarToggleButton) { | ||
| $toolbarToggleButton = $('<button>', { |
There was a problem hiding this comment.
I'd prefer to use hyperscript to make new elements:
$toolbarToggleButton = $( h('button.btn.cp-markdown-toggle-button', {
'aria-label': ...
})).append([
h('i.fa.fa-wrench', { ... }),…cryptpad/cryptpad into markdown-toolbar-not-responsive
|
At smaller widths (675px pictured) the description text area is shown with neither toolbar nor toggle button. toolbar shows once I resize the window |
This PR aims to fix #1831, across all apps mentioned in the issue