From 7de448871e92b82225a961a454b8d611eca18449 Mon Sep 17 00:00:00 2001 From: Mostafa Ahangarha Date: Mon, 25 Dec 2023 19:48:07 +0330 Subject: [PATCH 1/2] Use logical properties in css Signed-off-by: Mostafa Ahangarha --- css/notes.css | 16 ++++++++++++---- src/App.vue | 4 ++-- src/components/EditorEasyMDE.vue | 6 +++--- src/components/EditorMarkdownIt.vue | 12 ++++++------ src/components/HelpMobile.vue | 8 ++++++-- src/components/Modal/EditorHint.vue | 2 +- src/components/NotePlain.vue | 6 +++--- src/components/NoteRich.vue | 2 +- src/components/NotesView.vue | 4 ++-- 9 files changed, 36 insertions(+), 24 deletions(-) diff --git a/css/notes.css b/css/notes.css index 4b2079c79..33a858d89 100644 --- a/css/notes.css +++ b/css/notes.css @@ -28,20 +28,28 @@ li:focus .app-navigation-entry__utils .action-item { /* Welcome / Help */ .feature { - background-position: left center; + background-position-y: center; width: 100%; min-height: 32px; line-height: 32px; - padding-left: 32px; + padding-inline-start: 32px; margin-top: 0.3em !important; margin-bottom: 0.3em !important; display: inline-block; vertical-align: middle; } +body[dir='ltr'] .feature { + background-position-x: left; +} + +body[dir='rtl'] .feature { + background-position-x: right; +} + .feature ul { list-style: circle outside; - padding-left: 2em; + padding-inline-start: 2em; } @@ -66,6 +74,6 @@ li:focus .app-navigation-entry__utils .action-item { } .app-content { - margin-left: 0 !important; + margin-inline-start: 0 !important; } } diff --git a/src/App.vue b/src/App.vue index c81128615..d75bc9b5a 100644 --- a/src/App.vue +++ b/src/App.vue @@ -317,9 +317,9 @@ export default { padding-top: 0 !important; // Prevent shrinking or growing flex: 0 0 auto; - padding-right: 3px; + padding-inline-end: 3px; padding-bottom: 3px; - padding-left: 3px; + padding-inline-start: 3px; margin: 0 3px; } diff --git a/src/components/EditorEasyMDE.vue b/src/components/EditorEasyMDE.vue index 3d7b576be..481bb45da 100644 --- a/src/components/EditorEasyMDE.vue +++ b/src/components/EditorEasyMDE.vue @@ -354,7 +354,7 @@ export default { border-radius: var(--border-radius); background-position: center; margin-top: 5px; - margin-left: 2px; + margin-inline-start: 2px; } .CodeMirror .cm-formatting-task.cm-property::before { @@ -370,10 +370,10 @@ export default { .upload-button { position: fixed; - right: 64px; + inset-inline-end: 64px; z-index: 10; height: 40px; - margin-right: 5px; + margin-inline-end: 5px; top: 65px; } diff --git a/src/components/EditorMarkdownIt.vue b/src/components/EditorMarkdownIt.vue index 48545f0df..c07bb119e 100644 --- a/src/components/EditorMarkdownIt.vue +++ b/src/components/EditorMarkdownIt.vue @@ -196,7 +196,7 @@ export default { } & ul, & ol { - margin-left: 3ex; + margin-inline-start: 3ex; } & li > p, & li > ul, & li > ol { @@ -220,8 +220,8 @@ export default { & blockquote { font-style: italic; - border-left: 4px solid var(--color-border); - padding-left: 2ex; + border-inline-start: 4px solid var(--color-border); + padding-inline-start: 2ex; color: var(--color-text-light) } @@ -263,8 +263,8 @@ export default { .download-icon-inner { height: 3em; width: auto; - margin-left: auto; - margin-right: auto; + margin-inline-start: auto; + margin-inline-end: auto; margin-bottom: 5px; } @@ -281,7 +281,7 @@ export default { & table td, & table th { padding: 0.35em 0.5em; - text-align: left; + text-align: start; border: 1px solid var(--color-border); } diff --git a/src/components/HelpMobile.vue b/src/components/HelpMobile.vue index 057138688..e59d04e13 100644 --- a/src/components/HelpMobile.vue +++ b/src/components/HelpMobile.vue @@ -56,15 +56,19 @@ export default { diff --git a/src/components/NotePlain.vue b/src/components/NotePlain.vue index 8db63470f..1a593832c 100644 --- a/src/components/NotePlain.vue +++ b/src/components/NotePlain.vue @@ -438,9 +438,9 @@ export default { margin: 0 auto; } .note-container { - padding-right: 250px; + padding-inline-end: 250px; transition-duration: var(--animation-quick); - transition-property: padding-right; + transition-property: padding-inline-end; } } @@ -467,7 +467,7 @@ export default { .action-buttons { position: fixed; top: 50px; - right: 20px; + inset-inline-end: 20px; width: 44px; margin-top: 1em; z-index: 2000; diff --git a/src/components/NoteRich.vue b/src/components/NoteRich.vue index 5b4b1c441..4886b9bd8 100644 --- a/src/components/NoteRich.vue +++ b/src/components/NoteRich.vue @@ -196,7 +196,7 @@ export default { .is-mobile:deep(.text-menubar) { // Avoid overlapping the navigation toggle - margin-left: 44px; + margin-inline-start: 44px; z-index: 1; } diff --git a/src/components/NotesView.vue b/src/components/NotesView.vue index 6413a3904..6dfb72ec2 100644 --- a/src/components/NotesView.vue +++ b/src/components/NotesView.vue @@ -227,7 +227,7 @@ export default { .content-list__search { padding: 4px; - padding-left: 50px; + padding-inline-start: 50px; position: sticky; top: 0; background-color: var(--color-main-background-translucent); @@ -268,6 +268,6 @@ export default { border: 2px solid var(--color-loading-light); border-top-color: var(--color-loading-dark); vertical-align: top; - margin-right: 5px; + margin-inline-end: 5px; } From 115e90f06711780d7dcd90074f7d86f6548f0919 Mon Sep 17 00:00:00 2001 From: Mostafa Ahangarha Date: Mon, 25 Dec 2023 19:50:46 +0330 Subject: [PATCH 2/2] Use markdown-it-bidi for bidi preview Signed-off-by: Mostafa Ahangarha --- package-lock.json | 11 +++++++++++ package.json | 3 ++- src/components/EditorMarkdownIt.vue | 2 ++ 3 files changed, 15 insertions(+), 1 deletion(-) diff --git a/package-lock.json b/package-lock.json index 9fd92e65e..6d6b1c164 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,6 +19,7 @@ "diff": "^5.1.0", "easymde": "^2.18.0", "markdown-it": "^13.0.2", + "markdown-it-bidi": "^0.1.0", "markdown-it-task-checkbox": "^1.0.6", "vue": "^2.7.16", "vue-fragment": "^1.6.0", @@ -12179,6 +12180,11 @@ "markdown-it": "bin/markdown-it.js" } }, + "node_modules/markdown-it-bidi": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/markdown-it-bidi/-/markdown-it-bidi-0.1.0.tgz", + "integrity": "sha512-4GloQnF+PiILh6wkLAIeSxCLo9qUW7LcKj/08GyCpvo0LLC6YEhrZBvM9RkMkieGG7i4uIRE/F5jmU14DgR8Wg==" + }, "node_modules/markdown-it-task-checkbox": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/markdown-it-task-checkbox/-/markdown-it-task-checkbox-1.0.6.tgz", @@ -26880,6 +26886,11 @@ "uc.micro": "^1.0.5" } }, + "markdown-it-bidi": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/markdown-it-bidi/-/markdown-it-bidi-0.1.0.tgz", + "integrity": "sha512-4GloQnF+PiILh6wkLAIeSxCLo9qUW7LcKj/08GyCpvo0LLC6YEhrZBvM9RkMkieGG7i4uIRE/F5jmU14DgR8Wg==" + }, "markdown-it-task-checkbox": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/markdown-it-task-checkbox/-/markdown-it-task-checkbox-1.0.6.tgz", diff --git a/package.json b/package.json index ceab6f756..eefd1f61e 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ "diff": "^5.1.0", "easymde": "^2.18.0", "markdown-it": "^13.0.2", + "markdown-it-bidi": "^0.1.0", "markdown-it-task-checkbox": "^1.0.6", "vue": "^2.7.16", "vue-fragment": "^1.6.0", @@ -46,4 +47,4 @@ "extends @nextcloud/browserslist-config" ], "version": "4.9.1" -} \ No newline at end of file +} diff --git a/src/components/EditorMarkdownIt.vue b/src/components/EditorMarkdownIt.vue index c07bb119e..a2f8522fc 100644 --- a/src/components/EditorMarkdownIt.vue +++ b/src/components/EditorMarkdownIt.vue @@ -37,6 +37,8 @@ export default { liClass: 'task-list-item', }) + md.use(require('markdown-it-bidi')) + return { html: '', md,