mirror of
https://github.com/cryptpad/cryptpad.git
synced 2026-09-14 11:05:41 +05:00
Implement review fixes (all except profile) + fix issue with markdown toolbar not appearing
This commit is contained in:
DianaXWiki
yflory
parent
dc6acfab9d
commit
4f945fffbd
@ -289,3 +289,32 @@
|
||||
}
|
||||
}
|
||||
|
||||
//reusable styling for the markdown toggle button across all apps
|
||||
.markdown-toolbar-button-style() {
|
||||
padding: 3px 5px;
|
||||
height: fit-content;
|
||||
margin: 0;
|
||||
line-height: 1;
|
||||
border-radius: @variables_radius;
|
||||
display: inline-flex;
|
||||
background-color: @cp_toolbar-bottom-bg;
|
||||
color: @cp_toolbar-bottom-fg;
|
||||
|
||||
&:hover {
|
||||
background-color: fade(@cryptpad_text_col, 20%);
|
||||
border-color: @cryptpad_text_col;
|
||||
color: @cryptpad_text_col;
|
||||
}
|
||||
|
||||
&.cp-toolbar-button-active {
|
||||
background-color: @cp_toolbar-bg;
|
||||
border-color: @cp_toolbar-fg;
|
||||
color: @cp_toolbar-fg;
|
||||
|
||||
&:hover {
|
||||
background-color: fade(@cryptpad_text_col, 20%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -1343,7 +1343,7 @@ define([
|
||||
|
||||
UIElements.createMarkdownToolbarToggle = function(toolbarElement, editor) {
|
||||
var $button = $('<button>', {
|
||||
'class': 'btn cp-markdown-toolbar-toggle-button',
|
||||
'class': 'btn cp-markdown-toggle-button',
|
||||
'aria-label': Messages.toolbar_tools,
|
||||
'data-notippy':1,
|
||||
'title': Messages.toolbar_tools,
|
||||
@ -1363,6 +1363,7 @@ define([
|
||||
$button.on('click', function () {
|
||||
var isExpanded = $(toolbarElement).is(':visible');
|
||||
$(this).attr('aria-pressed', String(!isExpanded));
|
||||
$(this).toggleClass('cp-toolbar-button-active', !isExpanded);
|
||||
$(toolbarElement).toggle();
|
||||
});
|
||||
|
||||
@ -1378,16 +1379,21 @@ define([
|
||||
|
||||
return $button;
|
||||
};
|
||||
|
||||
var isSmallScreenToolbar = function () {
|
||||
return window.innerHeight < 530 || window.innerWidth < 530;
|
||||
}
|
||||
|
||||
UIElements.updateToolbarVisibility = function(markdownEditorWrapper, toolbar, editor) {
|
||||
let toggleButton = null;
|
||||
if (Util.isSmallScreen()) {
|
||||
if (!$(markdownEditorWrapper).find('.cp-markdown-toolbar-toggle-button').length) {
|
||||
if (isSmallScreenToolbar()) {
|
||||
if (!$(markdownEditorWrapper).find('.cp-markdown-toggle-button').length) {
|
||||
toggleButton = UIElements.createMarkdownToolbarToggle(toolbar, editor);
|
||||
$(markdownEditorWrapper).append(toggleButton);
|
||||
}
|
||||
$(toolbar).hide();
|
||||
} else {
|
||||
$(markdownEditorWrapper).find('.cp-markdown-toolbar-toggle-button').remove();
|
||||
$(markdownEditorWrapper).find('.cp-markdown-toggle-button').remove();
|
||||
$(toolbar).show();
|
||||
}
|
||||
return toggleButton; // May return null if not created
|
||||
|
||||
@ -176,6 +176,13 @@
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
min-width: 300px;
|
||||
.cp-markdown-toggle-row {
|
||||
margin: 0.5rem 0;
|
||||
position: relative;
|
||||
.cp-markdown-toggle-button {
|
||||
.markdown-toolbar-button-style() !important;
|
||||
}
|
||||
}
|
||||
|
||||
div.timeline-container {
|
||||
width: 100%;
|
||||
@ -381,6 +388,12 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
div.cp-form-response-msg-container {
|
||||
.cp-markdown-toolbar {
|
||||
background-color: transparent;
|
||||
border-radius: @variables_radius @variables_radius 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
div.cp-form-creator-results {
|
||||
.cp-form-block {
|
||||
@ -432,18 +445,12 @@
|
||||
}
|
||||
|
||||
.cp-editor-wrapper {
|
||||
.cp-markdown-toggle-row {
|
||||
margin: 0.5rem 0;
|
||||
position: relative;
|
||||
.cp-markdown-toolbar-toggle-button {
|
||||
padding: 3px 10px;
|
||||
height: 32px;
|
||||
margin: 0;
|
||||
line-height: 1;
|
||||
border-radius: @variables_radius;
|
||||
display: inline-flex;
|
||||
}
|
||||
.cp-form-edit-options-block {
|
||||
padding: 1px;
|
||||
overflow: hidden;
|
||||
border: 1px solid @cp_forms-border;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.cp-form-creator-add-inline {
|
||||
@ -547,7 +554,6 @@
|
||||
padding-bottom: 75px;
|
||||
button {
|
||||
white-space: initial;
|
||||
line-height: 25px;
|
||||
padding: 5.5px 6px;
|
||||
}
|
||||
.cp-form-response-msg-hint {
|
||||
@ -834,7 +840,6 @@
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: baseline;
|
||||
border: 1px solid @cp_forms-border;
|
||||
border-radius: @variables_radius;
|
||||
margin-top: 0.5rem;
|
||||
padding: 1px;
|
||||
@ -1380,8 +1385,12 @@
|
||||
}
|
||||
}
|
||||
.cp-form-response-modal {
|
||||
.CodeMirror {
|
||||
.cp-form-markdown-editor-wrapper {
|
||||
border: 1px solid @cp_forms-border;
|
||||
border-radius: @variables_radius;
|
||||
}
|
||||
.CodeMirror {
|
||||
border-radius: 0 0 @variables_radius @variables_radius;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -5571,30 +5571,45 @@ define([
|
||||
]);
|
||||
var editButtons = h('div.cp-form-edit-buttons-container', [ preview, edit, del ]);
|
||||
|
||||
var toggleRow = h('div.cp-markdown-toggle-row');
|
||||
var markdownWrapper = h('div.cp-form-markdown-editor-wrapper', t);
|
||||
var editDiv, previewDiv;
|
||||
var div = h('div.cp-form-block.editable.nodrag.cp-form-submit-message', [
|
||||
h('div.cp-form-block-content', [
|
||||
p,
|
||||
editDiv = h('div.cp-form-response-modal', t),
|
||||
editDiv = h('div.cp-form-response-modal', toggleRow, markdownWrapper),
|
||||
previewDiv = h('div.cp-form-response-preview#cp-response-preview'),
|
||||
editButtons
|
||||
]),
|
||||
]);
|
||||
var cm = APP.responseCM = SFCodeMirror.create("gfm", CMeditor, t);
|
||||
var editor = APP.responseEditor = cm.editor;
|
||||
|
||||
editor.setOption("extraKeys", {
|
||||
"Esc": function() {
|
||||
$(preview).focus();
|
||||
}
|
||||
});
|
||||
var markdownTb = APP.common.createMarkdownToolbar(editor, {
|
||||
embed: function (mt) {
|
||||
editor.focus();
|
||||
editor.replaceSelection($(mt)[0].outerHTML);
|
||||
}
|
||||
});
|
||||
var $tb = $(markdownTb.toolbar).insertAfter($(p));
|
||||
var toggleButton = UIElements.createMarkdownToolbarToggle(markdownTb.toolbar, editor)[0];
|
||||
toggleRow.appendChild(toggleButton);
|
||||
markdownWrapper.insertBefore(markdownTb.toolbar instanceof jQuery ? markdownTb.toolbar[0] : markdownTb.toolbar,t);
|
||||
setTimeout(() => {
|
||||
UIElements.updateToolbarVisibility(toggleRow, markdownTb.toolbar, editor);
|
||||
}, 10);
|
||||
$(window).on('resize', function () {
|
||||
UIElements.updateToolbarVisibility(toggleRow, markdownTb.toolbar, editor);
|
||||
});
|
||||
|
||||
var $edit = $(editDiv);
|
||||
var $preview = $(previewDiv);
|
||||
var $p = $(preview);
|
||||
var $e = $(edit);
|
||||
var $tb = $(markdownTb);
|
||||
var previewState = true;
|
||||
|
||||
var updatePreview = function () {
|
||||
|
||||
@ -130,18 +130,14 @@
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.cp-markdown-toolbar-toggle-button {
|
||||
.cp-markdown-toggle-button {
|
||||
.markdown-toolbar-button-style();
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
padding: 3px 10px;
|
||||
height: 32px;
|
||||
margin: 0;
|
||||
line-height: 1;
|
||||
border-radius: @variables_radius;
|
||||
display: inline-flex;
|
||||
}
|
||||
}
|
||||
|
||||
#cp-kanban-edit-body {
|
||||
border: 1px solid @cp_forms-border;
|
||||
border-radius: @variables_radius;
|
||||
@ -155,7 +151,7 @@
|
||||
box-sizing: content-box;
|
||||
}
|
||||
.cp-markdown-toolbar {
|
||||
background-color: @cp_kanban-conflict-bg;
|
||||
background-color: transparent;
|
||||
color: @cp_kanban-fg;
|
||||
border-radius: @variables_radius @variables_radius 0px 0px;
|
||||
button {
|
||||
@ -164,6 +160,20 @@
|
||||
color: @cp_kanban-conflict-bg;
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
outline: 0;
|
||||
border-radius: @variables_radius;
|
||||
.fa {
|
||||
font: normal normal normal 14px/1 FontAwesome;
|
||||
font-family: FontAwesome;
|
||||
}
|
||||
&:hover {
|
||||
background-color: contrast(@cp_toolbar-bg, darken(@cp_toolbar-bg, 5%), lighten(@cp_toolbar-bg, 5%));
|
||||
}
|
||||
&:focus-visible {
|
||||
outline: @variables_focus_style;
|
||||
}
|
||||
}
|
||||
}
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
@ -112,6 +112,9 @@
|
||||
}
|
||||
.cp-markdown-toggle-row {
|
||||
margin-bottom: 0.5rem;
|
||||
.btn.cp-markdown-toggle-button {
|
||||
.markdown-toolbar-button-style() !important;
|
||||
}
|
||||
}
|
||||
|
||||
.cp-app-profile-resizer {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user