Remove old & add buttons for new editor
This commit is contained in:
parent
dda7cce5d5
commit
c6d23843ab
GPG Key ID:
087126EBFC725006
|
|
@ -0,0 +1,7 @@
|
|||
.editor > button > svg {
|
||||
width: 25px;
|
||||
}
|
||||
.editor > button > svg > path,
|
||||
.editor > button > svg > rect {
|
||||
fill: var(--icons);
|
||||
}
|
||||
|
|
@ -95,7 +95,7 @@
|
|||
font-weight: 400;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.form input.abfield[type="email"] {
|
||||
.form .abfield {
|
||||
display: none;
|
||||
}
|
||||
.form.filter {
|
||||
|
|
|
|||
|
|
@ -69,6 +69,7 @@ section h2 {
|
|||
color: var(--text-light);
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
button,
|
||||
.button,
|
||||
input[type="button"],
|
||||
input[type="submit"] {
|
||||
|
|
@ -79,9 +80,11 @@ input[type="submit"] {
|
|||
font-weight: 400;
|
||||
border: 0;
|
||||
}
|
||||
button:hover,
|
||||
.button:hover,
|
||||
input[type="button"]:hover,
|
||||
input[type="submit"]:hover,
|
||||
button:focus,
|
||||
.button:focus,
|
||||
input[type="button"]:focus,
|
||||
input[type="submit"]:focus {
|
||||
|
|
|
|||
|
|
@ -1,71 +0,0 @@
|
|||
/* SimpleMDE overwrite that allows us to customize from themes */
|
||||
|
||||
div.editor-toolbar {
|
||||
border-color: var(--border);
|
||||
}
|
||||
|
||||
div.editor-toolbar > a {
|
||||
color: var(--text) !important;
|
||||
}
|
||||
div.editor-toolbar > a.active,
|
||||
div.editor-toolbar > a:hover {
|
||||
background: var(--background-light);
|
||||
border-color: var(--background-light);
|
||||
}
|
||||
|
||||
div.editor-toolbar > i.separator {
|
||||
border-right-color: transparent;
|
||||
border-left-color: var(--separator);
|
||||
}
|
||||
|
||||
div.editor-toolbar.disabled-for-preview a:not(.no-disable) {
|
||||
background: none;
|
||||
color: var(--text-disabled) !important;
|
||||
}
|
||||
div.editor-toolbar.disabled-for-preview > i.separator {
|
||||
border-left-color: var(--text-disabled);
|
||||
}
|
||||
|
||||
div.CodeMirror,
|
||||
div.editor-preview {
|
||||
background: var(--background);
|
||||
color: var(--text);
|
||||
border-color: var(--border);
|
||||
}
|
||||
div.editor-preview {
|
||||
background: var(--background-preview);
|
||||
}
|
||||
|
||||
div.editor-preview table th,
|
||||
div.editor-preview-side table th,
|
||||
div.editor-preview table td,
|
||||
div.editor-preview-side table td {
|
||||
border: inherit;
|
||||
padding: inherit;
|
||||
}
|
||||
|
||||
div.editor-preview table.codehilitetable pre,
|
||||
div.editor-preview-side table.codehilitetable pre {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
div.CodeMirror .CodeMirror-selected,
|
||||
div.CodeMirror .CodeMirror-selectedtext {
|
||||
background: var(--background-light);
|
||||
}
|
||||
div.CodeMirror .CodeMirror-focused .CodeMirror-selected,
|
||||
div.CodeMirror .CodeMirror-focused .CodeMirror-selectedtext,
|
||||
div.CodeMirror .CodeMirror-line::selection,
|
||||
div.CodeMirror .CodeMirror-line > span::selection,
|
||||
div.CodeMirror .CodeMirror-line > span > span::selection {
|
||||
background: var(--background-light);
|
||||
}
|
||||
div.CodeMirror .CodeMirror-line::-moz-selection,
|
||||
div.CodeMirror .CodeMirror-line > span::-moz-selection,
|
||||
div.CodeMirror .CodeMirror-line > span > span::-moz-selection {
|
||||
background: var(--background-light);
|
||||
}
|
||||
|
||||
div.CodeMirror-cursor {
|
||||
border-color: var(--text);
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -111,8 +111,6 @@ table.thread:not(.topcomment) div.info {
|
|||
table.thread div.info {
|
||||
text-align: right;
|
||||
position: relative;
|
||||
margin-left: 24px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
table.thread div.info > * {
|
||||
display: inline-block;
|
||||
|
|
|
|||
|
|
@ -117,12 +117,8 @@ footer {
|
|||
--background-light: #f0f0f0;
|
||||
}
|
||||
|
||||
div.editor-toolbar, div.CodeMirror {
|
||||
--border: #c0c0c0;
|
||||
--background-light: #d9d9d9;
|
||||
--background-preview: #f4f4f6;
|
||||
--separator: #a0a0a0;
|
||||
--text-disabled: #c0c0c0;
|
||||
.editor {
|
||||
--icons: #ffffff;
|
||||
}
|
||||
|
||||
/* Extra style on top of the Pygments style */
|
||||
|
|
|
|||
|
|
@ -0,0 +1,11 @@
|
|||
@import "vars";
|
||||
|
||||
.editor {
|
||||
& > button > svg {
|
||||
width: 25px;
|
||||
|
||||
& > path, & > rect {
|
||||
fill: var(--icons);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -69,7 +69,7 @@ section {
|
|||
}
|
||||
|
||||
/* Buttons */
|
||||
.button, input[type="button"], input[type="submit"] {
|
||||
button, .button, input[type="button"], input[type="submit"] {
|
||||
padding: 6px 10px; border-radius: 2px;
|
||||
cursor: pointer;
|
||||
font-family: 'DejaVu Sans', sans-serif; font-weight: 400;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1,66 +1,126 @@
|
|||
{% macro text_editor(field, label=True, autofocus=false) %}
|
||||
<!-- Buttons for the text editor -->
|
||||
<div class="editor">
|
||||
<button>
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path d="M3,4H5V10H9V4H11V18H9V12H5V18H3V4M14,18V16H16V6.31L13.5,7.75V5.44L16,4H18V16H20V18H14Z" />
|
||||
</svg>
|
||||
</button>
|
||||
<button>
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path xmlns="http://www.w3.org/2000/svg" d="M3,4H5V10H9V4H11V18H9V12H5V18H3V4M21,18H15A2,2 0 0,1 13,16C13,15.47 13.2,15 13.54,14.64L18.41,9.41C18.78,9.05 19,8.55 19,8A2,2 0 0,0 17,6A2,2 0 0,0 15,8H13A4,4 0 0,1 17,4A4,4 0 0,1 21,8C21,9.1 20.55,10.1 19.83,10.83L15,16H21V18Z"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button>
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path xmlns="http://www.w3.org/2000/svg" d="M3,4H5V10H9V4H11V18H9V12H5V18H3V4M15,4H19A2,2 0 0,1 21,6V16A2,2 0 0,1 19,18H15A2,2 0 0,1 13,16V15H15V16H19V12H15V10H19V6H15V7H13V6A2,2 0 0,1 15,4Z"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button>
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path xmlns="http://www.w3.org/2000/svg" d="M3,4H5V10H9V4H11V18H9V12H5V18H3V4M18,18V13H13V11L18,4H20V11H21V13H20V18H18M18,11V7.42L15.45,11H18Z"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button>
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path xmlns="http://www.w3.org/2000/svg" d="M3,4H5V10H9V4H11V18H9V12H5V18H3V4M15,4H20V6H15V10H17A4,4 0 0,1 21,14A4,4 0 0,1 17,18H15A2,2 0 0,1 13,16V15H15V16H17A2,2 0 0,0 19,14A2,2 0 0,0 17,12H15A2,2 0 0,1 13,10V6A2,2 0 0,1 15,4Z"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button>
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path xmlns="http://www.w3.org/2000/svg" d="M3,4H5V10H9V4H11V18H9V12H5V18H3V4M15,4H19A2,2 0 0,1 21,6V7H19V6H15V10H19A2,2 0 0,1 21,12V16A2,2 0 0,1 19,18H15A2,2 0 0,1 13,16V6A2,2 0 0,1 15,4M15,12V16H19V12H15Z"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button>
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path xmlns="http://www.w3.org/2000/svg" d="M4,4H6V10H10V4H12V18H10V12H6V18H4V4M20.42,7.41L16.83,11L20.42,14.59L19,16L14,11L19,6L20.42,7.41Z"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button>
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path xmlns="http://www.w3.org/2000/svg" d="M4,4H6V10H10V4H12V18H10V12H6V18H4V4M14.59,7.41L18.17,11L14.59,14.59L16,16L21,11L16,6L14.59,7.41Z"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button>
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path xmlns="http://www.w3.org/2000/svg" d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button>
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path xmlns="http://www.w3.org/2000/svg" d="M3 3v18h18V3H3zm8 16H5v-6h6v6zm0-8H5V5h6v6zm8 8h-6v-6h6v6zm0-8h-6V5h6v6z"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button>
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path xmlns="http://www.w3.org/2000/svg" d="M6.85,7.08C6.85,4.37,9.45,3,12.24,3c1.64,0,3,0.49,3.9,1.28c0.77,0.65,1.46,1.73,1.46,3.24h-3.01 c0-0.31-0.05-0.59-0.15-0.85c-0.29-0.86-1.2-1.28-2.25-1.28c-1.86,0-2.34,1.02-2.34,1.7c0,0.48,0.25,0.88,0.74,1.21 C10.97,8.55,11.36,8.78,12,9H7.39C7.18,8.66,6.85,8.11,6.85,7.08z M21,12v-2H3v2h9.62c1.15,0.45,1.96,0.75,1.96,1.97 c0,1-0.81,1.67-2.28,1.67c-1.54,0-2.93-0.54-2.93-2.51H6.4c0,0.55,0.08,1.13,0.24,1.58c0.81,2.29,3.29,3.3,5.67,3.3 c2.27,0,5.3-0.89,5.3-4.05c0-0.3-0.01-1.16-0.48-1.94H21V12z"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button>
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path xmlns="http://www.w3.org/2000/svg" d="M15.6 10.79c.97-.67 1.65-1.77 1.65-2.79 0-2.26-1.75-4-4-4H7v14h7.04c2.09 0 3.71-1.7 3.71-3.79 0-1.52-.86-2.82-2.15-3.42zM10 6.5h3c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5h-3v-3zm3.5 9H10v-3h3.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5z"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button>
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path xmlns="http://www.w3.org/2000/svg" d="M10 4v3h2.21l-3.42 8H6v3h8v-3h-2.21l3.42-8H18V4z"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button>
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path xmlns="http://www.w3.org/2000/svg" d="M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.68-1.5 1.5s.68 1.5 1.5 1.5 1.5-.68 1.5-1.5-.67-1.5-1.5-1.5zM7 19h14v-2H7v2zm0-6h14v-2H7v2zm0-8v2h14V5H7z"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button>
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path xmlns="http://www.w3.org/2000/svg" d="M2 17h2v.5H3v1h1v.5H2v1h3v-4H2v1zm1-9h1V4H2v1h1v3zm-1 3h1.8L2 13.1v.9h3v-1H3.2L5 10.9V10H2v1zm5-6v2h14V5H7zm0 14h14v-2H7v2zm0-6h14v-2H7v2z"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button>
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path xmlns="http://www.w3.org/2000/svg" d="M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button>
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path xmlns="http://www.w3.org/2000/svg" d="M10 19h4v-3h-4v3zM5 4v3h5v3h4V7h5V4H5zM3 14h18v-2H3v2z"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button>
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path xmlns="http://www.w3.org/2000/svg" d="M12 17c3.31 0 6-2.69 6-6V3h-2.5v8c0 1.93-1.57 3.5-3.5 3.5S8.5 12.93 8.5 11V3H6v8c0 3.31 2.69 6 6 6zm-7 2v2h14v-2H5z"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button>
|
||||
<svg viewBox="0 0 24 24">
|
||||
<rect xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" height="2" width="16" x="4" y="11"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button>
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path xmlns="http://www.w3.org/2000/svg" d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm3.5-9c.83 0 1.5-.67 1.5-1.5S16.33 8 15.5 8 14 8.67 14 9.5s.67 1.5 1.5 1.5zm-7 0c.83 0 1.5-.67 1.5-1.5S9.33 8 8.5 8 7 8.67 7 9.5 7.67 11 8.5 11zm3.5 6.5c2.33 0 4.31-1.46 5.11-3.5H6.89c.8 2.04 2.78 3.5 5.11 3.5z"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button>
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path xmlns="http://www.w3.org/2000/svg" d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button>
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path xmlns="http://www.w3.org/2000/svg" d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button>
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path xmlns="http://www.w3.org/2000/svg" d="M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
{{ field.label if label }}
|
||||
{{ field() }}
|
||||
<script>
|
||||
window.addEventListener("load", function(){
|
||||
var simplemde = new SimpleMDE({
|
||||
element: document.getElementById("{{field.name}}"),
|
||||
autofocus: {{ "true" if autofocus else "false" }},
|
||||
autosave: {
|
||||
enabled: true,
|
||||
uniqueId: "{{ request.path }}+{{ field.name }}",
|
||||
delay: 1000,
|
||||
},
|
||||
hideIcons: ["guide", "side-by-side", "fullscreen", "heading"],
|
||||
showIcons: ["code", "table", "horizontal-rule", "ordered-list",
|
||||
"unordered-list", "heading-1", "heading-2", "heading-3",
|
||||
"strikethrough"
|
||||
],
|
||||
insertTexts: {
|
||||
image: ["![](https://", ")"],
|
||||
link: ["[", "](https://)"],
|
||||
},
|
||||
previewRender: function(plainText, preview) { // Async method
|
||||
data = {text: plainText};
|
||||
fetch('{{ url_for("api_markdown") }}', {
|
||||
method: "POST",
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-CSRFToken': '{{ csrf_token() }}'
|
||||
},
|
||||
body: JSON.stringify(data)
|
||||
})
|
||||
.then(response => response.text())
|
||||
.then(data => preview.innerHTML = data);
|
||||
return "Chargement…";
|
||||
},
|
||||
spellChecker: false, // Uses CDN jsdelivr.net
|
||||
forceSync: true,
|
||||
tabSize: 4,
|
||||
shortcuts: {
|
||||
toggleFullScreen: null,
|
||||
},
|
||||
status: false,
|
||||
});
|
||||
|
||||
// Ctrl+Enter submits form
|
||||
ta = document.querySelector("div.CodeMirror");
|
||||
ta.addEventListener('keydown', function(e) {
|
||||
var keyCode = e.keyCode || e.which;
|
||||
if (e.ctrlKey && keyCode == 13) {
|
||||
var e = e.target;
|
||||
while(! (e instanceof HTMLFormElement)) {
|
||||
e = e.parentNode;
|
||||
}
|
||||
try {
|
||||
e.submit();
|
||||
} catch(exception) {
|
||||
e.submit.click();
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
window.addEventListener("load", function(){});
|
||||
</script>
|
||||
{% for error in field.errors %}
|
||||
<span class="msgerror">{{ error }}</span>
|
||||
|
|
|
|||
|
|
@ -16,14 +16,13 @@ def render(*args, styles=[], scripts=[], **kwargs):
|
|||
'css/flash.css',
|
||||
'css/table.css',
|
||||
'css/pagination.css',
|
||||
'css/simplemde.min.css',
|
||||
'css/simplemde-override.css',
|
||||
'css/editor.css',
|
||||
]
|
||||
scripts_ = [
|
||||
'scripts/trigger_menu.js',
|
||||
'scripts/pc-utils.js',
|
||||
'scripts/smartphone_patch.js',
|
||||
'scripts/simplemde.min.js',
|
||||
'scripts/editor.js',
|
||||
'scripts/filter.js'
|
||||
]
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue