feat(client/rtl): handle margin-left

2025-10-26 15:56:29 +01:00 · 2025-10-08 17:44:17 +03:00
parent adff36cf22
commit 247ab1aec3
27 changed files with 71 additions and 71 deletions
--- a/apps/client/src/layouts/mobile_layout.tsx
+++ b/apps/client/src/layouts/mobile_layout.tsx
@@ -68,7 +68,7 @@ const FANCYTREE_CSS = `

 .fancytree-title {
    font-size: 1.5em;
-    margin-left: 0.6em !important;
+    margin-inline-start: 0.6em !important;
 }

 .fancytree-node {
--- a/apps/client/src/stylesheets/style.css
+++ b/apps/client/src/stylesheets/style.css
@@ -174,7 +174,7 @@ textarea,
 /* Add a gap between consecutive radios / check boxes */
 label.tn-radio + label.tn-radio,
 label.tn-checkbox + label.tn-checkbox {
-    margin-left: 12px;
+    margin-inline-start: 12px;
 }

 label.tn-radio input[type="radio"],
@@ -226,7 +226,7 @@ samp {
 .badge {
    --bs-badge-color: var(--muted-text-color);

-    margin-left: 8px;
+    margin-inline-start: 8px;
    background: var(--accented-background-color);
 }

@@ -338,7 +338,7 @@ button kbd {
 }

 .ui-menu kbd {
-    margin-left: 30px;
+    margin-inline-start: 30px;
    float: right;
 }

@@ -392,7 +392,7 @@ body.desktop .tabulator-popup-container {
 }

 .dropend .dropdown-toggle::after {
-    margin-left: 0.5em;
+    margin-inline-start: 0.5em;
    color: var(--muted-text-color);
 }

@@ -403,7 +403,7 @@ body.desktop .tabulator-popup-container {

 .dropdown-menu .disabled .disabled-tooltip {
    pointer-events: all;
-    margin-left: 8px;
+    margin-inline-start: 8px;
    font-size: 0.5em;
    color: var(--disabled-tooltip-icon-color);
    cursor: help;
@@ -1033,7 +1033,7 @@ svg.ck-icon .note-icon {
    counter-increment: footnote-counter;
    display: flex;
    list-style: none;
-    margin-left: 0.5em;
+    margin-inline-start: 0.5em;
 }

 .ck-content .footnote-item > * {
@@ -1414,7 +1414,7 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu {

 .ck.ck-slash-command-button__text-part,
 .ck.ck-template-form__text-part {
-    margin-left: 0.5em;
+    margin-inline-start: 0.5em;
    line-height: 1.2em !important;
 }

@@ -1748,7 +1748,7 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu {
    display: flex;
    flex-shrink: 0;
    flex-direction: column;
-    margin-left: 10px;
+    margin-inline-start: 10px;
    margin-right: 5px;
 }

@@ -1800,7 +1800,7 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu {
 }

 .note-split {
-    margin-left: auto;
+    margin-inline-start: auto;
    margin-right: auto;
 }

@@ -1858,7 +1858,7 @@ textarea {

 .attachment-help-button {
    display: inline-block;
-    margin-left: 10px;
+    margin-inline-start: 10px;
    vertical-align: middle;
    font-size: 1em;
 }
--- a/apps/client/src/stylesheets/table.css
+++ b/apps/client/src/stylesheets/table.css
@@ -67,7 +67,7 @@
 }

 .tabulator div.tabulator-header .tabulator-frozen.tabulator-frozen-left {
-    margin-left: var(--cell-editing-border-width);
+    margin-inline-start: var(--cell-editing-border-width);
 }

 .tabulator div.tabulator-header .tabulator-col,
--- a/apps/client/src/stylesheets/theme-next/base.css
+++ b/apps/client/src/stylesheets/theme-next/base.css
@@ -211,7 +211,7 @@ html body .dropdown-item[disabled] {

 .dropdown-item span.keyboard-shortcut {
    color: var(--menu-item-keyboard-shortcut-color) !important;
-    margin-left: 16px;
+    margin-inline-start: 16px;
 }

 .dropdown-divider {
--- a/apps/client/src/stylesheets/theme-next/dialogs.css
+++ b/apps/client/src/stylesheets/theme-next/dialogs.css
@@ -29,7 +29,7 @@
    display: flex;
    justify-content: center;
    align-items: center;
-    margin-left: 8px;
+    margin-inline-start: 8px;
    border: 0;
    border-radius: 50%;
    padding: 0;
@@ -374,7 +374,7 @@ div.tn-tool-dialog {
 }

 .help-dialog .help-cards kbd:first-child {
-    margin-left: 0;
+    margin-inline-start: 0;
 }

 /* Inline code - used for Markdown samples */
--- a/apps/client/src/stylesheets/theme-next/forms.css
+++ b/apps/client/src/stylesheets/theme-next/forms.css
@@ -71,7 +71,7 @@ button.btn.btn-primary kbd,
 button.btn.btn-secondary kbd,
 button.btn.btn-sm kbd,
 button.btn.btn-success kbd {
-    margin-left: 0.5em;
+    margin-inline-start: 0.5em;
    background: var(--cmd-button-keyboard-shortcut-background);
    color: var(--cmd-button-keyboard-shortcut-color);
    font-size: 0.6em;
@@ -102,7 +102,7 @@ button.btn.btn-success kbd {
 }

 .btn-group .tn-tool-button + .tn-tool-button {
-    margin-left: 4px !important;
+    margin-inline-start: 4px !important;
 }

 /* The "x" icon button */
--- a/apps/client/src/stylesheets/theme-next/llm-chat.css
+++ b/apps/client/src/stylesheets/theme-next/llm-chat.css
@@ -19,7 +19,7 @@
 }

 .chat-message.user-message {
-    margin-left: auto;
+    margin-inline-start: auto;
 }

 .chat-message.assistant-message {
--- a/apps/client/src/stylesheets/theme-next/notes/text.css
+++ b/apps/client/src/stylesheets/theme-next/notes/text.css
@@ -210,7 +210,7 @@
 /* Separator */
 :root .ck .ck-list__separator {
    margin: .5em 0;
-    margin-left: calc(0px - var(--ck-editor-popup-padding));
+    margin-inline-start: calc(0px - var(--ck-editor-popup-padding));
    width: calc(100% + (var(--ck-editor-popup-padding) * 2));
    background: var(--menu-item-delimiter-color);
 }
--- a/apps/client/src/stylesheets/theme-next/pages.css
+++ b/apps/client/src/stylesheets/theme-next/pages.css
@@ -199,7 +199,7 @@ body.desktop .option-section:not(.tn-no-card) {
    color: var(--launcher-pane-text-color);
    margin-top: calc(-1 * var(--options-card-padding) - var(--options-title-font-size) - var(--options-title-offset)) !important;
    margin-bottom: calc(var(--options-title-offset) + var(--options-card-padding)) !important;
-    margin-left: calc(-1 * var(--options-card-padding));
+    margin-inline-start: calc(-1 * var(--options-card-padding));
 }

 .options-section:not(.tn-no-card) h5 {
@@ -216,7 +216,7 @@ body.desktop .option-section:not(.tn-no-card) {
 .options-section hr {
    --bs-border-width: 2px;

-    margin-left: calc(var(--options-card-padding) * -1);
+    margin-inline-start: calc(var(--options-card-padding) * -1);
    margin-right: calc(var(--options-card-padding) * -1);
    opacity: 1;
    color: var(--root-background);
--- a/apps/client/src/stylesheets/theme-next/ribbon.css
+++ b/apps/client/src/stylesheets/theme-next/ribbon.css
@@ -105,7 +105,7 @@ ul.note-type-dropdown li.dropdown-item {
 /* Editability dropdown */

 ul.editability-dropdown li.dropdown-item > div {
-    margin-left: 4px;
+    margin-inline-start: 4px;
 }

 .editability-dropdown .dropdown-item .description {
@@ -147,7 +147,7 @@ ul.editability-dropdown li.dropdown-item > div {

 /* Note path in attribute detail dialog */
 .attr-detail .note-path {
-    margin-left: 8px;
+    margin-inline-start: 8px;
 }

 /*
--- a/apps/client/src/stylesheets/theme-next/shell.css
+++ b/apps/client/src/stylesheets/theme-next/shell.css
@@ -1101,7 +1101,7 @@ body.layout-vertical .tab-row-widget-is-sorting .note-tab.note-tab-is-dragging .

 .tab-row-widget .note-new-tab {
    position: relative;
-    margin-left: 3px;
+    margin-inline-start: 3px;
    color: transparent; /* Prevent the original "+" from being displayed */
 }

@@ -1225,7 +1225,7 @@ body.mobile .note-title {
 }

 .title-row > *:nth-child(2) {
-    margin-left: 0;
+    margin-inline-start: 0;
 }

 .title-row {
@@ -1407,7 +1407,7 @@ div.promoted-attribute-cell.promoted-attribute-label-boolean > div:first-of-type
 div.promoted-attribute-cell .multiplicity:has(span) {
    --icon-button-size: 24px;

-    margin-left: 8px;
+    margin-inline-start: 8px;
    margin-right: calc(var(--pa-card-padding-left) - var(--pa-card-padding-right));
    font-size: 0; /* Prevent whitespaces creating a gap between buttons */
    display: flex;
@@ -1547,7 +1547,7 @@ div.floating-buttons-children .close-floating-buttons {
 }

 div.floating-buttons-children .close-floating-buttons {
-    margin-left: 0 !important;
+    margin-inline-start: 0 !important;
    background: var(--floating-button-hide-button-background);
    color: var(--floating-button-hide-button-color);
 }
@@ -1642,7 +1642,7 @@ div.find-replace-widget div.find-widget-found-wrapper > span {
 }

 .find-replace-widget .form-check .form-check-input {
-    margin-left: 0;
+    margin-inline-start: 0;
 }

 /* Narrow version */
@@ -1806,7 +1806,7 @@ div.find-replace-widget div.find-widget-found-wrapper > span {
 }

 .excalidraw .dropdown-menu .dropdown-menu-container > div:not([class]):not(:last-child) {
-    margin-left: calc(var(--padding) * var(--space-factor) * -1) !important;
+    margin-inline-start: calc(var(--padding) * var(--space-factor) * -1) !important;
    margin-right: calc(var(--padding) * var(--space-factor) * -1) !important;
 }

--- a/apps/client/src/stylesheets/tree.css
+++ b/apps/client/src/stylesheets/tree.css
@@ -15,7 +15,7 @@ span.fancytree-node.fancytree-hide {
    flex-shrink: 1;
    flex-grow: 1;
    overflow: hidden;
-    margin-left: 7px;
+    margin-inline-start: 7px;
    outline: none;
    position: relative;
    top: 2px;
@@ -80,7 +80,7 @@ span.fancytree-node.fancytree-hide {
    width: 12px;
    height: 12px;
    margin-top: 2px;
-    margin-left: 1px;
+    margin-inline-start: 1px;
    border-width: 1px;
    border-style: solid;
 }
@@ -229,14 +229,14 @@ span.fancytree-node.archived {
    display: none;
    font-size: 120%;
    cursor: pointer;
-    margin-left: 8px;
+    margin-inline-start: 8px;
    padding: 1px;
    border: 1px solid transparent;
    border-radius: 5px;
 }

 .unhoist-button.bx.tree-item-button {
-    margin-left: 0; /* unhoist button is on the left and doesn't need more margin */
+    margin-inline-start: 0; /* unhoist button is on the left and doesn't need more margin */
    display: block; /* keep always visible */
 }

--- a/apps/client/src/widgets/FloatingButtons.css
+++ b/apps/client/src/widgets/FloatingButtons.css
@@ -74,7 +74,7 @@

 .show-floating-buttons {
    /* display: none;*/
-    margin-left: 5px !important;
+    margin-inline-start: 5px !important;
 }

 .show-floating-buttons-button {
@@ -97,7 +97,7 @@

 /* #region Close floating buttons */
 .close-floating-buttons {
-    margin-left: 5px !important;
+    margin-inline-start: 5px !important;
 }

 .close-floating-buttons:first-child {
--- a/apps/client/src/widgets/attachment_detail.ts
+++ b/apps/client/src/widgets/attachment_detail.ts
@@ -30,7 +30,7 @@ const TPL = /*html*/`
        }

        .attachment-details {
-            margin-left: 10px;
+            margin-inline-start: 10px;
        }

        .attachment-content-wrapper {
--- a/apps/client/src/widgets/bulk_actions/BulkAction.tsx
+++ b/apps/client/src/widgets/bulk_actions/BulkAction.tsx
@@ -4,7 +4,7 @@ import AbstractBulkAction from "./abstract_bulk_action";
 import HelpRemoveButtons from "../react/HelpRemoveButtons";

 interface BulkActionProps {
-    label: string | ComponentChildren;   
+    label: string | ComponentChildren;
    children?: ComponentChildren;
    helpText?: ComponentChildren;
    bulkAction: AbstractBulkAction;
@@ -13,7 +13,7 @@ interface BulkActionProps {
 // Define styles as constants to prevent recreation
 const flexContainerStyle = { display: "flex", alignItems: "center" } as const;
 const labelStyle = { marginRight: "10px" } as const;
-const textStyle = { marginRight: "10px", marginLeft: "10px" } as const;
+const textStyle = { marginRight: "10px", marginInlineStart: "10px" } as const;

 const BulkAction = memo(({ label, children, helpText, bulkAction }: BulkActionProps) => {
    return (
@@ -44,4 +44,4 @@ export const BulkActionText = memo(({ text }: { text: string }) => {
                {text}
            </div>
    );
-});
+});
--- a/apps/client/src/widgets/buttons/global_menu.css
+++ b/apps/client/src/widgets/buttons/global_menu.css
@@ -69,7 +69,7 @@ button.global-menu-button {
 }

 .global-menu .zoom-buttons {
-    margin-left: 2em;
+    margin-inline-start: 2em;
 }

 .global-menu .zoom-buttons a {
@@ -79,7 +79,7 @@ button.global-menu-button {
    color: var(--button-text-color);
    background-color: var(--button-background-color);
    padding: 3px;
-    margin-left: 3px;
+    margin-inline-start: 3px;
    text-decoration: none;
 }

@@ -88,7 +88,7 @@ button.global-menu-button {
 }

 .global-menu .zoom-state {
-    margin-left: 5px;
+    margin-inline-start: 5px;
    margin-right: 5px;
 }

--- a/apps/client/src/widgets/collections/board/index.css
+++ b/apps/client/src/widgets/collections/board/index.css
@@ -93,7 +93,7 @@

 .board-view-container .board-column .edit-icon {
  opacity: 0;
-  margin-left: 0.5em;
+  margin-inline-start: 0.5em;
  transition: opacity 0.2s ease;
  color: var(--muted-text-color);
  cursor: pointer;
--- a/apps/client/src/widgets/dialogs/revisions.tsx
+++ b/apps/client/src/widgets/dialogs/revisions.tsx
@@ -91,7 +91,7 @@ export default function RevisionsDialog() {
                    </>
                )
            }
-            footer={<RevisionFooter note={note} />} 
+            footer={<RevisionFooter note={note} />}
            footerStyle={{ paddingTop: 0, paddingBottom: 0 }}
            onHidden={() => {
                setShown(false);
@@ -115,16 +115,16 @@ export default function RevisionsDialog() {

                <div className="revision-content-wrapper" style={{
                    flexGrow: "1",
-                    marginLeft: "20px",
+                    marginInlineStart: "20px",
                    display: "flex",
                    flexDirection: "column",
                    maxWidth: "calc(100% - 150px)",
-                    minWidth: 0                    
+                    minWidth: 0
                }}>
-                    <RevisionPreview 
+                    <RevisionPreview
                        noteContent={noteContent}
                        revisionItem={currentRevision}
-                        showDiff={showDiff} 
+                        showDiff={showDiff}
                        setShown={setShown}
                        onRevisionDeleted={() => {
                            setRefreshCounter(c => c + 1);
@@ -138,7 +138,7 @@ export default function RevisionsDialog() {
 function RevisionsList({ revisions, onSelect, currentRevision }: { revisions: RevisionItem[], onSelect: (val: string) => void, currentRevision?: RevisionItem }) {
    return (
        <FormList onSelect={onSelect} fullHeight>
-            {revisions.map((item) => 
+            {revisions.map((item) =>
                <FormListItem
                    title={t("revisions.revision_last_edited", { date: item.dateLastEdited })}
                    value={item.revisionId}
@@ -152,7 +152,7 @@ function RevisionsList({ revisions, onSelect, currentRevision }: { revisions: Re

 function RevisionPreview({noteContent, revisionItem, showDiff, setShown, onRevisionDeleted }: {
    noteContent?: string,
-    revisionItem?: RevisionItem,  
+    revisionItem?: RevisionItem,
    showDiff: boolean,
    setShown: Dispatch<StateUpdater<boolean>>,
    onRevisionDeleted?: () => void
@@ -163,7 +163,7 @@ function RevisionPreview({noteContent, revisionItem, showDiff, setShown, onRevis
        if (revisionItem) {
            server.get<RevisionPojo>(`revisions/${revisionItem.revisionId}`).then(setFullRevision);
        } else {
-            setFullRevision(undefined);            
+            setFullRevision(undefined);
        }
    }, [revisionItem]);

@@ -242,11 +242,11 @@ function RevisionContent({ noteContent, revisionItem, fullRevision, showDiff }:
            return <RevisionContentText content={content} />
        case "code":
            return <pre style={CODE_STYLE}>{content}</pre>;
-        case "image":            
+        case "image":
            switch (revisionItem.mime) {
                case "image/svg+xml": {
                    //Base64 of other format images may be embedded in svg
-                    const encodedSVG = encodeURIComponent(content as string); 
+                    const encodedSVG = encodeURIComponent(content as string);
                    return <img
                        src={`data:${fullRevision.mime};utf8,${encodedSVG}`}
                        style={IMAGE_STYLE} />;
@@ -355,7 +355,7 @@ function RevisionFooter({ note }: { note?: FNote }) {
    if (revisionsNumberLimit === -1) {
        revisionsNumberLimit = "∞";
    }
-    
+
    return <>
        <span class="revisions-snapshot-interval flex-grow-1 my-0 py-0">
            {t("revisions.snapshot_interval", { seconds: options.getInt("revisionSnapshotTimeInterval") })}
@@ -376,4 +376,4 @@ async function getNote(noteId?: string | null) {
    } else {
        return appContext.tabManager.getActiveContextNote();
    }
-}
+}
--- a/apps/client/src/widgets/note_map.ts
+++ b/apps/client/src/widgets/note_map.ts
@@ -38,7 +38,7 @@ const TPL = /*html*/`<div class="note-map-widget">
            /* removing default appearance */
            -webkit-appearance: none;
            appearance: none;
-            margin-left: 15px;
+            margin-inline-start: 15px;
            width: 150px;
        }

--- a/apps/client/src/widgets/promoted_attributes.ts
+++ b/apps/client/src/widgets/promoted_attributes.ts
@@ -45,7 +45,7 @@ const TPL = /*html*/`
    }

    .promoted-attribute-cell div.input-group {
-        margin-left: 10px;
+        margin-inline-start: 10px;
        display: flex;
        min-height: 40px;
    }
--- a/apps/client/src/widgets/react/FormToggle.css
+++ b/apps/client/src/widgets/react/FormToggle.css
@@ -18,7 +18,7 @@
 .switch-widget .switch-button {
    display: block;
    position: relative;
-    margin-left: 8px;
+    margin-inline-start: 8px;
    width: var(--switch-track-width);
    height: var(--switch-track-height);
    border-radius: 24px;
@@ -86,7 +86,7 @@

 .switch-widget .switch-help-button {
    border: 0;
-    margin-left: 4px;
+    margin-inline-start: 4px;
    background: none;
    cursor: pointer;
    font-size: 1.1em;
--- a/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx
+++ b/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx
@@ -353,7 +353,7 @@ function NoteLanguageSwitch({ note }: { note?: FNote | null }) {
                >{t("note_language.configure-languages")}</FormListItem>
            </Dropdown>

-            <HelpButton helpPage="B0lcI9xz1r8K" style={{ marginLeft: "4px" }} />
+            <HelpButton helpPage="B0lcI9xz1r8K" style={{ marginInlineStart: "4px" }} />

            <Modal
                className="content-languages-modal"
--- a/apps/client/src/widgets/ribbon/SearchDefinitionOptions.tsx
+++ b/apps/client/src/widgets/ribbon/SearchDefinitionOptions.tsx
@@ -263,7 +263,7 @@ function AncestorOption({ note, ...restProps}: SearchOptionProps) {
        placeholder={t("ancestor.placeholder")}
      />

-      <div style="margin-left: 10px; margin-right: 10px">{t("ancestor.depth_label")}:</div>
+      <div style="margin-inline-start: 10px; margin-right: 10px">{t("ancestor.depth_label")}:</div>
      <FormSelect
        values={options}
        keyProperty="value" titleProperty="label"
--- a/apps/client/src/widgets/ribbon/style.css
+++ b/apps/client/src/widgets/ribbon/style.css
@@ -11,7 +11,7 @@
    display: flex;
    flex-direction: row;
    justify-content: center;
-    margin-left: 10px;
+    margin-inline-start: 10px;
    flex-grow: 1;
    flex-flow: row wrap;
 }
@@ -76,12 +76,12 @@
 .ribbon-button-container > * {
    position: relative;
    top: -3px;
-    margin-left: 10px;
+    margin-inline-start: 10px;
 }

 .ribbon-body {
    border-bottom: 1px solid var(--main-border-color);
-    margin-left: 10px;
+    margin-inline-start: 10px;
    margin-right: 5px; /* needs to have this value so that the bottom border is the same width as the top one */
 }

@@ -308,7 +308,7 @@

 /* #region Owned Attributes */
 .attribute-list {
-    margin-left: 7px;
+    margin-inline-start: 7px;
    margin-right: 7px;
    margin-top: 5px;
    margin-bottom: 2px;
--- a/apps/client/src/widgets/tab_row.ts
+++ b/apps/client/src/widgets/tab_row.ts
@@ -172,7 +172,7 @@ const TAB_ROW_TPL = `
    }

    .tab-row-widget .note-tab[is-small] .note-tab-title {
-        margin-left: 0;
+        margin-inline-start: 0;
    }

    .tab-row-widget .note-tab .note-tab-drag-handle {
@@ -240,13 +240,13 @@ const TAB_ROW_TPL = `
    }

    .tab-row-widget .note-tab[is-smaller] .note-tab-close {
-        margin-left: auto;
+        margin-inline-start: auto;
    }
    .tab-row-widget .note-tab[is-mini]:not([active]) .note-tab-close {
        display: none;
    }
    .tab-row-widget .note-tab[is-mini][active] .note-tab-close {
-        margin-left: auto;
+        margin-inline-start: auto;
        margin-right: auto;
    }
    @-moz-keyframes note-tab-was-just-added {
--- a/apps/client/src/widgets/toc.ts
+++ b/apps/client/src/widgets/toc.ts
@@ -103,12 +103,12 @@ const TPL = /*html*/`<div class="toc-widget">
        }

        .toc li .item-content {
-            margin-left: 25px;
+            margin-inline-start: 25px;
            flex: 1;
        }

        .toc li .collapse-button + .item-content {
-            margin-left: 4px;
+            margin-inline-start: 4px;
        }

        .toc li:hover {
--- a/apps/client/src/widgets/type_widgets/options/text_notes.tsx
+++ b/apps/client/src/widgets/type_widgets/options/text_notes.tsx
@@ -62,7 +62,7 @@ function FormattingToolbar() {
                name="multiline-toolbar"
                label={t("editing.editor_type.multiline-toolbar")}
                currentValue={textNoteEditorMultilineToolbar} onChange={setTextNoteEditorMultilineToolbar}
-                containerStyle={{ marginLeft: "1em" }}
+                containerStyle={{ marginInlineStart: "1em" }}
            />
        </OptionsSection>
    )