devs/PCv5
devs
/
PCv5
7
10
Fork 4
Code Issues 25 Pull Requests Releases Wiki Activity

editor: CSS and JS cleaning

This commit is contained in:
Eragon 2022-12-12 19:33:56 +01:00
parent 5eaf1cc207
commit e2283b7675
Signed by: Eragon
GPG Key ID: 087126EBFC725006
6 changed files with 36 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
app/static/css/editor.css
View File

@ -51,16 +51,24 @@
position: absolute;
left: 0px;
width: auto;
min-width: 30vw;
white-space: nowrap;
text-align: left;
right: inherit;
background-image: none;
background-color: #161819;
border-color: #3a3f42;
border-radius: .4rem;
background: var(--background-hover);
border: var(--border);
color: var(--text);
padding: .2rem;
top: 3.2rem;
z-index: 100;
list-style-position: initial;
list-style-type: none;
}
.editor .modal > div {
margin: 0.8rem;
margin-top: 0.4rem;
margin-bottom: 1rem;
}
.editor .modal > div label {
margin-top: 0.4rem;
}

3
app/static/css/form.css
View File

@ -23,6 +23,7 @@
.form input[type='date'],
.form input[type='password'],
.form input[type='search'],
.form input[type='url'],
.form textarea,
.form select {
display: block;
@ -38,6 +39,7 @@
.form input[type='date']:focus,
.form input[type='password']:focus,
.form input[type='search']:focus,
.form input[type='url']:focus,
.form textarea:focus,
.form select:focus {
border-color: var(--border-focused);
@ -48,6 +50,7 @@
.form input[type='date']:focus-within,
.form input[type='password']:focus-within,
.form input[type='search']:focus-within,
.form input[type='url']:focus-within,
.form textarea:focus-within,
.form select:focus-within {
outline: none;

18
app/static/less/editor.less
View File

@ -64,19 +64,29 @@
position: absolute;
left: 0px;
width: auto;
min-width: 30vw;
white-space: nowrap;
text-align: left;
right: inherit;
background-image: none;
background-color: rgb(22, 24, 25);
border-color: rgb(58, 63, 66);
border-radius: .4rem;
background: var(--background-hover);
border: var(--border);
color: var(--text);
padding: .2rem;
top: 3.2rem;
z-index: 100;
list-style-position: initial;
list-style-type: none;
& > div {
margin: 0.8rem;
margin-top: 0.4rem;
margin-bottom: 1rem;
label {
margin-top: 0.4rem;
}
}
}
}

1
app/static/less/form.less
View File

@ -32,6 +32,7 @@
input[type='date'],
input[type='password'],
input[type='search'],
input[type='url'],
textarea,
select {
display: block;

5
app/static/scripts/editor.js
View File

@ -112,13 +112,16 @@ function editor_clear_modals(event, close = true) {
for (const i of modals) {i.style.display = 'none'};
}
function editor_insert_link(event, link, text = "", image = false)
function editor_insert_link(event, link_id, text_id, image = false)
{
const [editor, button, ta] = editor_event_source(event);
ta.focus();
let indexStart = ta.selectionStart;
let indexEnd = ta.selectionEnd;
const link = document.getElementById(link_id).value;
const text = document.getElementById(text_id).value;
editor_clear_modals(event);
let [start, end] = editor_replace_range(ta, indexStart, indexEnd,

4
app/templates/widgets/editor.html
View File

@ -115,7 +115,7 @@
<input type="url" id="link-link-input" name="link-link-input">
</div>
<div>
<a type="button" class="button bg-ok" onclick="editor_insert_link(event, document.getElementById('link-link-input').value, document.getElementById('link-desc-input').value)">Valider</a>
<a type="button" class="button bg-ok" onclick="editor_insert_link(event, 'link-link-input', 'link-desc-input')">Valider</a>
<a type="button" class="button bg-error" onclick="editor_clear_modals(event)">Annuler</a>
</div>
</div>
@ -132,7 +132,7 @@
<input type="url" id="img-link-input" name="img-link-input">
</div>
<div>
<a type="button" class="button bg-ok" onclick="editor_insert_link(event, document.getElementById('img-link-input').value, document.getElementById('img-alt-input').value, true)">Valider</a>
<a type="button" class="button bg-ok" onclick="editor_insert_link(event, 'img-link-input', 'img-alt-input', true)">Valider</a>
<a type="button" class="button bg-error" onclick="editor_clear_modals(event)">Annuler</a>
</div>
</div>