gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-20 23:29:02 +02:00
Code Issues Actions 19 Packages Projects Releases Wiki Activity

feat(client/rtl): handle left

Browse Source
This commit is contained in:
Elian Doran 2025-10-08 17:50:54 +03:00
parent a8e44afd6d
commit db1bcfda45
No known key found for this signature in database
21 changed files with 80 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
apps/client/src/menus/context_menu.ts
View File

@ -151,7 +151,7 @@ class ContextMenu {
.css({ .css({
display: "block", display: "block",
top: top, top: top,
left: left "inset-inline-start": left
}) })
.addClass("show"); .addClass("show");
} }
@ -187,7 +187,7 @@ class ContextMenu {
} }
// Create a new group to avoid column breaks before and after the seaparator / header. // Create a new group to avoid column breaks before and after the seaparator / header.
// This is a workaround for Firefox not supporting break-before / break-after: avoid // This is a workaround for Firefox not supporting break-before / break-after: avoid
// for columns. // for columns.
if (shouldStartNewGroup) { if (shouldStartNewGroup) {
$group = $("<div class='dropdown-no-break'>"); $group = $("<div class='dropdown-no-break'>");
@ -313,7 +313,7 @@ class ContextMenu {
} }
$group.append($item); $group.append($item);
// After adding a menu item, if the previous item was a separator or header, // After adding a menu item, if the previous item was a separator or header,
// reset the group so that the next item will be appended directly to the parent. // reset the group so that the next item will be appended directly to the parent.
if (shouldResetGroup) { if (shouldResetGroup) {

6
apps/client/src/stylesheets/llm_chat.css
View File

@ -299,7 +299,7 @@
content: ''; content: '';
position: absolute; position: absolute;
top: 0; top: 0;
left: -100%; inset-inline-start: -100%;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: linear-gradient(90deg, transparent, var(--hover-item-background-color, rgba(0, 0, 0, 0.03)), transparent); background: linear-gradient(90deg, transparent, var(--hover-item-background-color, rgba(0, 0, 0, 0.03)), transparent);
@ -406,10 +406,10 @@
@keyframes shimmer { @keyframes shimmer {
0% { 0% {
left: -100%; inset-inline-start: -100%;
} }
100% { 100% {
left: 100%; inset-inline-start: 100%;
} }
} }

2
apps/client/src/stylesheets/print.css
View File

@ -281,7 +281,7 @@ span[style] {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; inset-inline-start: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }

26
apps/client/src/stylesheets/style.css
View File

@ -725,7 +725,7 @@ table.promoted-attributes-in-tooltip th {
.bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before,
.bs-tooltip-left .tooltip-arrow::before { .bs-tooltip-left .tooltip-arrow::before {
left: -1px; inset-inline-start: -1px;
border-width: 0.4rem 0 0.4rem 0.4rem; border-width: 0.4rem 0 0.4rem 0.4rem;
border-inline-start-color: var(--main-border-color) !important; border-inline-start-color: var(--main-border-color) !important;
} }
@ -753,7 +753,7 @@ table.promoted-attributes-in-tooltip th {
.bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::after, .bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::after,
.bs-tooltip-left .tooltip-arrow::after { .bs-tooltip-left .tooltip-arrow::after {
left: -1px; inset-inline-start: -1px;
border-width: 0.4rem 0 0.4rem 0.4rem; border-width: 0.4rem 0 0.4rem 0.4rem;
border-inline-start-color: var(--tooltip-background-color) !important; border-inline-start-color: var(--tooltip-background-color) !important;
} }
@ -1274,7 +1274,7 @@ a.external:not(.no-arrow):after, a[href^="http://"]:not(.no-arrow):after, a[href
#context-menu-cover.show { #context-menu-cover.show {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; inset-inline-start: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
z-index: 1000; z-index: 1000;
@ -1288,7 +1288,7 @@ a.external:not(.no-arrow):after, a[href^="http://"]:not(.no-arrow):after, a[href
body.mobile #context-menu-container.mobile-bottom-menu { body.mobile #context-menu-container.mobile-bottom-menu {
position: fixed !important; position: fixed !important;
left: 0 !important; inset-inline-start: 0 !important;
right: 0 !important; right: 0 !important;
bottom: 0 !important; bottom: 0 !important;
top: unset !important; top: unset !important;
@ -1339,7 +1339,7 @@ body.desktop li.dropdown-submenu:hover > ul.dropdown-menu {
.dropdown-submenu > .dropdown-menu { .dropdown-submenu > .dropdown-menu {
top: 0; top: 0;
left: calc(100% - 2px); /* -2px, otherwise there's a small gap between menu and submenu where the hover can disappear */ inset-inline-start: calc(100% - 2px); /* -2px, otherwise there's a small gap between menu and submenu where the hover can disappear */
margin-top: -10px; margin-top: -10px;
min-width: 15rem; min-width: 15rem;
/* to make submenu scrollable https://github.com/zadam/trilium/issues/3136 */ /* to make submenu scrollable https://github.com/zadam/trilium/issues/3136 */
@ -1348,7 +1348,7 @@ body.desktop li.dropdown-submenu:hover > ul.dropdown-menu {
} }
body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu { body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu {
left: calc(-100% + 10px); inset-inline-start: calc(-100% + 10px);
} }
.right-dropdown-widget { .right-dropdown-widget {
@ -1533,7 +1533,7 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu {
position: fixed !important; position: fixed !important;
bottom: calc(var(--mobile-bottom-offset) + var(--launcher-pane-size)) !important; bottom: calc(var(--mobile-bottom-offset) + var(--launcher-pane-size)) !important;
top: unset !important; top: unset !important;
left: 0 !important; inset-inline-start: 0 !important;
right: 0 !important; right: 0 !important;
transform: unset !important; transform: unset !important;
} }
@ -1541,7 +1541,7 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu {
#mobile-sidebar-container { #mobile-sidebar-container {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; inset-inline-start: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
z-index: 1000; z-index: 1000;
@ -1557,7 +1557,7 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu {
#mobile-sidebar-wrapper { #mobile-sidebar-wrapper {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; inset-inline-start: 0;
bottom: 0; bottom: 0;
width: 85vw; width: 85vw;
padding-top: env(safe-area-inset-top); padding-top: env(safe-area-inset-top);
@ -1589,7 +1589,7 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu {
body.mobile .modal-dialog { body.mobile .modal-dialog {
position: fixed; position: fixed;
bottom: 0; bottom: 0;
left: 0; inset-inline-start: 0;
right: 0; right: 0;
margin: 0 !important; margin: 0 !important;
max-height: 85vh; max-height: 85vh;
@ -2293,7 +2293,7 @@ footer.webview-footer button {
font-family: boxicons !important; font-family: boxicons !important;
position: absolute; position: absolute;
top: 1em; top: 1em;
left: 1em; inset-inline-start: 1em;
} }
.admonition.note { --accent-color: var(--admonition-note-accent-color); } .admonition.note { --accent-color: var(--admonition-note-accent-color); }
@ -2369,12 +2369,12 @@ footer.webview-footer button {
.content-floating-buttons.top-left { .content-floating-buttons.top-left {
top: 10px; top: 10px;
left: 10px; inset-inline-start: 10px;
} }
.content-floating-buttons.bottom-left { .content-floating-buttons.bottom-left {
bottom: 10px; bottom: 10px;
left: 10px; inset-inline-start: 10px;
} }
.content-floating-buttons.bottom-right { .content-floating-buttons.bottom-right {

6
apps/client/src/stylesheets/theme-next/base.css
View File

@ -120,7 +120,7 @@ body.desktop .dropdown-menu::before,
border-radius: var(--dropdown-border-radius); border-radius: var(--dropdown-border-radius);
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; inset-inline-start: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
z-index: -1; z-index: -1;
@ -224,7 +224,7 @@ html body .dropdown-item[disabled] {
position: absolute; position: absolute;
content: ""; content: "";
top: -1px; top: -1px;
left: calc(0px - var(--menu-padding-size)); inset-inline-start: calc(0px - var(--menu-padding-size));
right: calc(0px - var(--menu-padding-size)); right: calc(0px - var(--menu-padding-size));
border-top: 1px solid var(--menu-item-delimiter-color); border-top: 1px solid var(--menu-item-delimiter-color);
} }
@ -264,7 +264,7 @@ html body .dropdown-item[disabled] {
content: ""; content: "";
position: absolute; position: absolute;
bottom: 8px; bottom: 8px;
left: calc(0px - var(--menu-padding-size)); inset-inline-start: calc(0px - var(--menu-padding-size));
right: calc(0px - var(--menu-padding-size)); right: calc(0px - var(--menu-padding-size));
border-top: 1px solid var(--menu-item-delimiter-color); border-top: 1px solid var(--menu-item-delimiter-color);
} }

4
apps/client/src/stylesheets/theme-next/dialogs.css
View File

@ -259,7 +259,7 @@ div.tn-tool-dialog {
position: absolute; position: absolute;
content: ""; content: "";
top: var(--connector-top, 0); top: var(--connector-top, 0);
left: calc(var(--timeline-left-gap) + ((var(--timeline-bullet-size) - var(--timeline-connector-size)) / 2)); inset-inline-start: calc(var(--timeline-left-gap) + ((var(--timeline-bullet-size) - var(--timeline-connector-size)) / 2));
bottom: var(--connector-bottom, 0); bottom: var(--connector-bottom, 0);
width: var(--timeline-connector-size); width: var(--timeline-connector-size);
border-radius: var(--connector-radius, 0) var(--connector-radius, 0) 0 0; border-radius: var(--connector-radius, 0) var(--connector-radius, 0) 0 0;
@ -291,7 +291,7 @@ div.tn-tool-dialog {
position: absolute; position: absolute;
content: ""; content: "";
top: calc(var(--timeline-item-top-padding) + var(--timeline-bullet-vertical-pos)); top: calc(var(--timeline-item-top-padding) + var(--timeline-bullet-vertical-pos));
left: var(--timeline-left-gap); inset-inline-start: var(--timeline-left-gap);
width: var(--timeline-bullet-size); width: var(--timeline-bullet-size);
height: var(--timeline-bullet-size); height: var(--timeline-bullet-size);
border-radius: 50%; border-radius: 50%;

4
apps/client/src/stylesheets/theme-next/forms.css
View File

@ -471,7 +471,7 @@ optgroup {
label.tn-checkbox > input[type="checkbox"] { label.tn-checkbox > input[type="checkbox"] {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; inset-inline-start: 0;
width: var(--box-size); width: var(--box-size);
height: 100%; height: 100%;
margin: unset; margin: unset;
@ -485,7 +485,7 @@ optgroup {
content: ""; content: "";
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 0; inset-inline-start: 0;
translate: 0 -50%; translate: 0 -50%;
width: var(--box-size); width: var(--box-size);
height: var(--box-size); height: var(--box-size);

6
apps/client/src/stylesheets/theme-next/notes/text.css
View File

@ -119,7 +119,7 @@
top: var(--negative-padding); top: var(--negative-padding);
right: var(--negative-padding); right: var(--negative-padding);
bottom: var(--negative-padding); bottom: var(--negative-padding);
left: var(--negative-padding); inset-inline-start: var(--negative-padding);
border-radius: var(--dropdown-border-radius); border-radius: var(--dropdown-border-radius);
backdrop-filter: var(--dropdown-backdrop-filter); backdrop-filter: var(--dropdown-backdrop-filter);
z-index: -1; z-index: -1;
@ -233,7 +233,7 @@
position: absolute; position: absolute;
top: 0; top: 0;
bottom: var(--negative-padding); bottom: var(--negative-padding);
left: var(--negative-padding); inset-inline-start: var(--negative-padding);
right: var(--negative-padding); right: var(--negative-padding);
border-top: 1px solid var(--ck-editor-popup-border-color); border-top: 1px solid var(--ck-editor-popup-border-color);
background: var(--menu-section-background-color); background: var(--menu-section-background-color);
@ -615,7 +615,7 @@ html .note-detail-editable-text :not(figure, .include-note, hr):first-child {
.ck-content blockquote:before { .ck-content blockquote:before {
content: "“"; content: "“";
left: 0.2em; inset-inline-start: 0.2em;
} }
.ck-content blockquote:after { .ck-content blockquote:after {

24
apps/client/src/stylesheets/theme-next/shell.css
View File

@ -402,7 +402,7 @@ body.layout-horizontal > .horizontal {
top: var(--vertical-margin); top: var(--vertical-margin);
right: var(--horiz-margin); right: var(--horiz-margin);
bottom: var(--vertical-margin); bottom: var(--vertical-margin);
left: var(--horiz-margin); inset-inline-start: var(--horiz-margin);
border-radius: 6px; border-radius: 6px;
background: var(--calendar-day-highlight-background); background: var(--calendar-day-highlight-background);
z-index: -1; z-index: -1;
@ -496,7 +496,7 @@ div.quick-search::before {
position: absolute; position: absolute;
content: ""; content: "";
top: var(--padding-top); top: var(--padding-top);
left: var(--padding-inline-start); inset-inline-start: var(--padding-inline-start);
bottom: var(--padding-bottom); bottom: var(--padding-bottom);
right: var(--padding-inline-end); right: var(--padding-inline-end);
z-index: 0; z-index: 0;
@ -658,7 +658,7 @@ body.layout-vertical.background-effects div.quick-search .dropdown-menu {
position: absolute; position: absolute;
content: ""; content: "";
top: var(--left-pane-item-selected-shadow-size); top: var(--left-pane-item-selected-shadow-size);
left: var(--left-pane-item-selected-shadow-size); inset-inline-start: var(--left-pane-item-selected-shadow-size);
bottom: var(--left-pane-item-selected-shadow-size); bottom: var(--left-pane-item-selected-shadow-size);
right: var(--left-pane-item-selected-shadow-size); right: var(--left-pane-item-selected-shadow-size);
background: var(--left-pane-item-selected-background) !important; background: var(--left-pane-item-selected-background) !important;
@ -906,7 +906,7 @@ body.electron.background-effects.layout-horizontal .tab-row-container .toggle-bu
content: ""; content: "";
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: -10px; inset-inline-start: -10px;
right: -10px; right: -10px;
top: 32px; top: 32px;
height: 1px; height: 1px;
@ -918,12 +918,12 @@ body.electron.background-effects.layout-horizontal .tab-row-container .tab-scrol
position: relative; position: relative;
} }
body.electron.background-effects.layout-horizontal .tab-row-container .tab-scroll-button-left:after, body.electron.background-effects.layout-horizontal .tab-row-container .tab-scroll-button-inset-inline-start:after,
body.electron.background-effects.layout-horizontal .tab-row-container .tab-scroll-button-right:after { body.electron.background-effects.layout-horizontal .tab-row-container .tab-scroll-button-right:after {
content: ""; content: "";
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0px; inset-inline-start: 0px;
right: 0px; right: 0px;
height: 1px; height: 1px;
border-bottom: 1px solid var(--launcher-pane-horiz-border-color); border-bottom: 1px solid var(--launcher-pane-horiz-border-color);
@ -933,7 +933,7 @@ body.electron.background-effects.layout-horizontal .tab-row-container .note-tab[
content: ""; content: "";
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: -32768px; inset-inline-start: -32768px;
top: var(--tab-height); top: var(--tab-height);
right: calc(100% - 1px); right: calc(100% - 1px);
height: 1px; height: 1px;
@ -944,7 +944,7 @@ body.electron.background-effects.layout-horizontal .tab-row-container .note-tab[
content: ""; content: "";
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 100%; inset-inline-start: 100%;
top: var(--tab-height); top: var(--tab-height);
right: 0; right: 0;
width: 100vw; width: 100vw;
@ -956,7 +956,7 @@ body.electron.background-effects.layout-horizontal .tab-row-container .note-new-
content: ""; content: "";
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: -4px; inset-inline-start: -4px;
top: calc(var(--tab-height), -1); top: calc(var(--tab-height), -1);
right: 0; right: 0;
width: 100vw; width: 100vw;
@ -1045,7 +1045,7 @@ body.layout-horizontal .tab-row-widget .note-tab .note-tab-wrapper {
content: ""; content: "";
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; inset-inline-start: 0;
right: 0; right: 0;
height: 3px; height: 3px;
background-color: var(--workspace-tab-background-color); background-color: var(--workspace-tab-background-color);
@ -1114,7 +1114,7 @@ body.layout-vertical .tab-row-widget-is-sorting .note-tab.note-tab-is-dragging .
position: absolute; position: absolute;
content: ""; content: "";
top: calc((var(--tab-height) - var(--new-tab-button-size)) / 2); top: calc((var(--tab-height) - var(--new-tab-button-size)) / 2);
left: calc((var(--tab-height) - var(--new-tab-button-size)) / 2); inset-inline-start: calc((var(--tab-height) - var(--new-tab-button-size)) / 2);
width: var(--new-tab-button-size); width: var(--new-tab-button-size);
height: var(--new-tab-button-size); height: var(--new-tab-button-size);
background: var(--new-tab-button-background); background: var(--new-tab-button-background);
@ -1139,7 +1139,7 @@ body.layout-vertical .tab-row-widget-is-sorting .note-tab.note-tab-is-dragging .
display: flex; display: flex;
position: absolute; position: absolute;
content: "\ebc0"; content: "\ebc0";
left: 0; inset-inline-start: 0;
top: 0; top: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;

2
apps/client/src/widgets/FloatingButtons.css
View File

@ -16,7 +16,7 @@
.note-split.rtl .floating-buttons-children, .note-split.rtl .floating-buttons-children,
.note-split.rtl .show-floating-buttons { .note-split.rtl .show-floating-buttons {
right: unset; right: unset;
left: 10px; inset-inline-start: 10px;
} }
.note-split.rtl .close-floating-buttons { .note-split.rtl .close-floating-buttons {

2
apps/client/src/widgets/close_zen_button.css
View File

@ -21,6 +21,6 @@ body.zen.mobile .close-zen-container {
} }
body.zen.electron:not(.platform-darwin):not(.native-titlebar) .close-zen-container { body.zen.electron:not(.platform-darwin):not(.native-titlebar) .close-zen-container {
left: calc(env(titlebar-area-width) - var(--zen-button-size) - 2px); inset-inline-start: calc(env(titlebar-area-width) - var(--zen-button-size) - 2px);
right: unset; right: unset;
} }

2
apps/client/src/widgets/collections/calendar/index.css
View File

@ -13,7 +13,7 @@
.search-result-widget-content .calendar-view { .search-result-widget-content .calendar-view {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; inset-inline-start: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
} }

6
apps/client/src/widgets/collections/geomap/index.css
View File

@ -36,14 +36,14 @@
.geo-map-container .leaflet-div-icon .icon-shadow { .geo-map-container .leaflet-div-icon .icon-shadow {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; inset-inline-start: 0;
z-index: -1; z-index: -1;
} }
.geo-map-container .leaflet-div-icon .bx { .geo-map-container .leaflet-div-icon .bx {
position: absolute; position: absolute;
top: 3px; top: 3px;
left: 2px; inset-inline-start: 2px;
background-color: white; background-color: white;
color: black; color: black;
padding: 2px; padding: 2px;
@ -55,7 +55,7 @@
display: block; display: block;
position: absolute; position: absolute;
top: 100%; top: 100%;
left: 50%; inset-inline-start: 50%;
transform: translateX(-50%); transform: translateX(-50%);
font-size: 0.75rem; font-size: 0.75rem;
height: 1rem; height: 1rem;

4
apps/client/src/widgets/collections/table/index.css
View File

@ -13,7 +13,7 @@
.search-result-widget-content .table-view { .search-result-widget-content .table-view {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; inset-inline-start: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
} }
@ -65,7 +65,7 @@
.tabulator button.tree-collapse span { .tabulator button.tree-collapse span {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; inset-inline-start: 0;
font-size: 1.5em; font-size: 1.5em;
transform: translateY(-50%); transform: translateY(-50%);
} }

2
apps/client/src/widgets/dialogs/popup_editor.ts
View File

@ -46,7 +46,7 @@ const TPL = /*html*/`\
.modal.popup-editor-dialog .classic-toolbar-widget { .modal.popup-editor-dialog .classic-toolbar-widget {
position: sticky; position: sticky;
top: 0; top: 0;
left: 0; inset-inline-start: 0;
right: 0; right: 0;
background: var(--modal-background-color); background: var(--modal-background-color);
z-index: 998; z-index: 998;

2
apps/client/src/widgets/promoted_attributes.ts
View File

@ -95,7 +95,7 @@ const TPL = /*html*/`
content: ""; content: "";
position: absolute; position: absolute;
top: 10px; top: 10px;
left: 0px; inset-inline-start: 0px;
right: 0; right: 0;
height: 2px; height: 2px;
background: rgba(0, 0, 0, 0.5); background: rgba(0, 0, 0, 0.5);

44
apps/client/src/widgets/quick_search.ts
View File

@ -15,12 +15,12 @@ const TPL = /*html*/`
padding: 10px 10px 10px 0px; padding: 10px 10px 10px 0px;
height: 50px; height: 50px;
} }
.quick-search button, .quick-search input { .quick-search button, .quick-search input {
border: 0; border: 0;
font-size: 100% !important; font-size: 100% !important;
} }
.quick-search .dropdown-menu { .quick-search .dropdown-menu {
--quick-search-item-delimiter-color: var(--dropdown-border-color); --quick-search-item-delimiter-color: var(--dropdown-border-color);
@ -32,40 +32,40 @@ const TPL = /*html*/`
text-overflow: ellipsis; text-overflow: ellipsis;
box-shadow: -30px 50px 93px -50px black; box-shadow: -30px 50px 93px -50px black;
} }
.quick-search .dropdown-item { .quick-search .dropdown-item {
white-space: normal; white-space: normal;
padding: 12px 16px; padding: 12px 16px;
line-height: 1.4; line-height: 1.4;
position: relative; position: relative;
} }
.quick-search .dropdown-item + .dropdown-item::after { .quick-search .dropdown-item + .dropdown-item::after {
content: ''; content: '';
position: absolute; position: absolute;
left: 0; inset-inline-start: 0;
top: 0; top: 0;
width: 100%; width: 100%;
height: 1px; height: 1px;
border-bottom: 1px solid var(--quick-search-item-delimiter-color); border-bottom: 1px solid var(--quick-search-item-delimiter-color);
} }
.quick-search .dropdown-item:last-child::after { .quick-search .dropdown-item:last-child::after {
display: none; display: none;
} }
.quick-search .dropdown-item.disabled::after { .quick-search .dropdown-item.disabled::after {
display: none; display: none;
} }
.quick-search .dropdown-item.show-in-full-search::after { .quick-search .dropdown-item.show-in-full-search::after {
display: none; display: none;
} }
.quick-search-item.dropdown-item:hover { .quick-search-item.dropdown-item:hover {
background-color: #f8f9fa; background-color: #f8f9fa;
} }
.quick-search .quick-search-item { .quick-search .quick-search-item {
width: 100%; width: 100%;
} }
@ -151,7 +151,7 @@ export default class QuickSearchWidget extends BasicWidget {
private dropdown!: bootstrap.Dropdown; private dropdown!: bootstrap.Dropdown;
private $searchString!: JQuery<HTMLElement>; private $searchString!: JQuery<HTMLElement>;
private $dropdownMenu!: JQuery<HTMLElement>; private $dropdownMenu!: JQuery<HTMLElement>;
// State for infinite scrolling // State for infinite scrolling
private allSearchResults: Array<any> = []; private allSearchResults: Array<any> = [];
private allSearchResultNoteIds: string[] = []; private allSearchResultNoteIds: string[] = [];
@ -172,7 +172,7 @@ export default class QuickSearchWidget extends BasicWidget {
}); });
this.$widget.find(".input-group-prepend").on("shown.bs.dropdown", () => this.search()); this.$widget.find(".input-group-prepend").on("shown.bs.dropdown", () => this.search());
// Add scroll event listener for infinite scrolling // Add scroll event listener for infinite scrolling
this.$dropdownMenu.on("scroll", () => { this.$dropdownMenu.on("scroll", () => {
this.handleScroll(); this.handleScroll();
@ -187,7 +187,7 @@ export default class QuickSearchWidget extends BasicWidget {
if (originalEvent && isIMEComposing(originalEvent)) { if (originalEvent && isIMEComposing(originalEvent)) {
return; return;
} }
if (e.which === 13) { if (e.which === 13) {
if (this.$dropdownMenu.is(":visible")) { if (this.$dropdownMenu.is(":visible")) {
this.search(); // just update already visible dropdown this.search(); // just update already visible dropdown
@ -293,40 +293,40 @@ export default class QuickSearchWidget extends BasicWidget {
if (!noteId) continue; if (!noteId) continue;
const $item = $('<a class="dropdown-item" tabindex="0" href="javascript:">'); const $item = $('<a class="dropdown-item" tabindex="0" href="javascript:">');
// Build the display HTML with content snippet below the title // Build the display HTML with content snippet below the title
let itemHtml = `<div class="quick-search-item"> let itemHtml = `<div class="quick-search-item">
<div class="quick-search-item-header"> <div class="quick-search-item-header">
<span class="quick-search-item-icon ${result.icon}"></span> <span class="quick-search-item-icon ${result.icon}"></span>
<span class="search-result-title">${result.highlightedNotePathTitle}</span> <span class="search-result-title">${result.highlightedNotePathTitle}</span>
</div>`; </div>`;
// Add attribute snippet (tags/attributes) below the title if available // Add attribute snippet (tags/attributes) below the title if available
if (result.highlightedAttributeSnippet) { if (result.highlightedAttributeSnippet) {
// Replace <br> with a blank space to join the atributes on the same single line // Replace <br> with a blank space to join the atributes on the same single line
const snippet = (result.highlightedAttributeSnippet as string).replace(/<br\s?\/?>/g, " "); const snippet = (result.highlightedAttributeSnippet as string).replace(/<br\s?\/?>/g, " ");
itemHtml += `<div class="search-result-attributes">${snippet}</div>`; itemHtml += `<div class="search-result-attributes">${snippet}</div>`;
} }
// Add content snippet below the attributes if available // Add content snippet below the attributes if available
if (result.highlightedContentSnippet) { if (result.highlightedContentSnippet) {
itemHtml += `<div class="search-result-content">${result.highlightedContentSnippet}</div>`; itemHtml += `<div class="search-result-content">${result.highlightedContentSnippet}</div>`;
} }
itemHtml += `</div>`; itemHtml += `</div>`;
$item.html(itemHtml); $item.html(itemHtml);
$item.on("click", (e) => { $item.on("click", (e) => {
this.dropdown.hide(); this.dropdown.hide();
e.preventDefault(); e.preventDefault();
const activeContext = appContext.tabManager.getActiveContext(); const activeContext = appContext.tabManager.getActiveContext();
if (activeContext) { if (activeContext) {
activeContext.setNote(noteId); activeContext.setNote(noteId);
} }
}); });
shortcutService.bindElShortcut($item, "return", () => { shortcutService.bindElShortcut($item, "return", () => {
this.dropdown.hide(); this.dropdown.hide();
@ -390,7 +390,7 @@ export default class QuickSearchWidget extends BasicWidget {
// Trigger loading more when user scrolls near the bottom (within 50px) // Trigger loading more when user scrolls near the bottom (within 50px)
if (scrollTop + clientHeight >= scrollHeight - 50) { if (scrollTop + clientHeight >= scrollHeight - 50) {
const totalResults = this.allSearchResults.length > 0 ? this.allSearchResults.length : this.allSearchResultNoteIds.length; const totalResults = this.allSearchResults.length > 0 ? this.allSearchResults.length : this.allSearchResultNoteIds.length;
if (this.currentDisplayedCount < totalResults) { if (this.currentDisplayedCount < totalResults) {
this.displayMoreResults(LOAD_MORE_BATCH_SIZE).then(() => { this.displayMoreResults(LOAD_MORE_BATCH_SIZE).then(() => {
this.addShowInFullSearchButton(); this.addShowInFullSearchButton();

4
apps/client/src/widgets/react/FormToggle.css
View File

@ -40,7 +40,7 @@
content: ""; content: "";
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; inset-inline-start: 0;
width: var(--switch-thumb-width); width: var(--switch-thumb-width);
height: var(--switch-thumb-height); height: var(--switch-thumb-height);
background-color: var(--switch-off-thumb-background); background-color: var(--switch-off-thumb-background);
@ -63,7 +63,7 @@
/* A hidden check box for accesibility purposes */ /* A hidden check box for accesibility purposes */
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; inset-inline-start: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
opacity: 0; opacity: 0;

2
apps/client/src/widgets/sync_status.ts
View File

@ -27,7 +27,7 @@ const TPL = /*html*/`
.sync-status .sync-status-sub-icon { .sync-status .sync-status-sub-icon {
font-size: 40%; font-size: 40%;
position: absolute; position: absolute;
left: 0; inset-inline-start: 0;
top: 16px; top: 16px;
} }

2
apps/client/src/widgets/toc.ts
View File

@ -80,7 +80,7 @@ const TPL = /*html*/`<div class="toc-widget">
} }
.toc > ol ol::before { .toc > ol ol::before {
left: calc((var(--toc-depth-level) - 2) * 20px + 14px); inset-inline-start: calc((var(--toc-depth-level) - 2) * 20px + 14px);
} }
.toc li { .toc li {

4
apps/client/src/widgets/type_widgets/ckeditor/mobile_editor_toolbar.css
View File

@ -12,7 +12,7 @@
#root-widget.virtual-keyboard-opened .classic-toolbar-outer-container.ios { #root-widget.virtual-keyboard-opened .classic-toolbar-outer-container.ios {
position: absolute; position: absolute;
left: 0; inset-inline-start: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
} }
@ -20,7 +20,7 @@
.classic-toolbar-widget { .classic-toolbar-widget {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; inset-inline-start: 0;
right: 0; right: 0;
height: 38px; height: 38px;
overflow: scroll; overflow: scroll;