GitHub/Anki
1
0
Fork 0
mirror of https://github.com/ankitects/anki.git synced 2025-09-24 16:56:36 -04:00
Code Issues Projects Releases Packages 1 Wiki Activity Actions

Make #fields display correctly

Browse source
This commit is contained in:
Henrik Giesel 2021-01-26 23:15:11 +01:00
parent e481452114
commit 520c4a3b4d
2 changed files with 29 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
qt/aqt/data/web/css/editor.scss
View file

@ -1,6 +1,12 @@
/* Copyright: Ankitects Pty Ltd and contributors /* Copyright: Ankitects Pty Ltd and contributors
* License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */ * License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
#fields {
display: flex;
flex-direction: column;
margin: 5px;
}
.field { .field {
border: 1px solid var(--border); border: 1px solid var(--border);
background: var(--frame-bg); background: var(--frame-bg);

33
qt/aqt/data/web/js/editor.ts
View file

@ -118,7 +118,14 @@ function nodeIsText(node: Node): node is Text {
} }
function nodeIsInline(node: Node): boolean { function nodeIsInline(node: Node): boolean {
return nodeIsText(node) || nodeIsBRElement(node) || window.getComputedStyle(node as Element).getPropertyValue("display").startsWith("inline"); return (
nodeIsText(node) ||
nodeIsBRElement(node) ||
window
.getComputedStyle(node as Element)
.getPropertyValue("display")
.startsWith("inline")
);
} }
function inListItem(): boolean { function inListItem(): boolean {
@ -308,10 +315,11 @@ function saveField(type: "blur" | "key"): void {
return; return;
} }
const fieldText = fieldIsInInlineMode(currentField) && currentField.innerHTML.endsWith("<br>") const fieldText =
// trim trailing <br> fieldIsInInlineMode(currentField) && currentField.innerHTML.endsWith("<br>")
? currentField.innerHTML.slice(0, -4) ? // trim trailing <br>
: currentField.innerHTML currentField.innerHTML.slice(0, -4)
: currentField.innerHTML;
pycmd(`${type}:${currentFieldOrdinal()}:${currentNoteId}:${fieldText}`); pycmd(`${type}:${currentFieldOrdinal()}:${currentNoteId}:${fieldText}`);
} }
@ -387,7 +395,12 @@ function onCutOrCopy(): boolean {
return true; return true;
} }
function createField(index: number, label: string, color: string, content: string): [HTMLDivElement, HTMLDivElement] { function createField(
index: number,
label: string,
color: string,
content: string
): [HTMLDivElement, HTMLDivElement] {
const name = document.createElement("div"); const name = document.createElement("div");
name.id = `name${index}`; name.id = `name${index}`;
name.className = "fname"; name.className = "fname";
@ -426,11 +439,11 @@ function setFields(fields: [string, string][]): void {
.getComputedStyle(document.documentElement) .getComputedStyle(document.documentElement)
.getPropertyValue("--text-fg"); .getPropertyValue("--text-fg");
const elements = fields.flatMap( const elements = fields.flatMap(([name, fieldcontent], index: number) =>
([name, fieldcontent], index: number) => createField(index, name, color, fieldcontent) createField(index, name, color, fieldcontent)
) );
const fieldsContainer = document.getElementById("fields") const fieldsContainer = document.getElementById("fields");
// can be replaced with ParentNode.replaceChildren in Chrome 86+ // can be replaced with ParentNode.replaceChildren in Chrome 86+
while (fieldsContainer.firstChild) { while (fieldsContainer.firstChild) {
fieldsContainer.removeChild(fieldsContainer.firstChild); fieldsContainer.removeChild(fieldsContainer.firstChild);