From 56968aeafd7d3b422f3ef61c7aedb9a6834cddd4 Mon Sep 17 00:00:00 2001 From: Maksim Sukharev Date: Tue, 11 Feb 2025 12:05:03 +0100 Subject: [PATCH 1/2] fix(NcAction*): complete BiDi support Signed-off-by: Maksim Sukharev --- .../NcActionCaption/NcActionCaption.vue | 4 ++-- .../NcActionCheckbox/NcActionCheckbox.vue | 10 +++------- src/components/NcActionInput/NcActionInput.vue | 8 +++++--- src/components/NcActionRadio/NcActionRadio.vue | 12 ++++-------- .../NcActionTextEditable.vue | 18 +++++++++++++----- src/components/NcActions/NcActions.vue | 6 +----- 6 files changed, 28 insertions(+), 30 deletions(-) diff --git a/src/components/NcActionCaption/NcActionCaption.vue b/src/components/NcActionCaption/NcActionCaption.vue index a7931c0987..b886ab8c0e 100644 --- a/src/components/NcActionCaption/NcActionCaption.vue +++ b/src/components/NcActionCaption/NcActionCaption.vue @@ -52,8 +52,8 @@ export default { box-shadow: none !important; user-select: none; pointer-events: none; - margin-left: 12px; - padding-right: 14px; + margin-inline-start: 12px; + padding-inline-end: 14px; height: var(--default-clickable-area); display: flex; align-items: center; diff --git a/src/components/NcActionCheckbox/NcActionCheckbox.vue b/src/components/NcActionCheckbox/NcActionCheckbox.vue index 9049709bf5..e4f46c3cba 100644 --- a/src/components/NcActionCheckbox/NcActionCheckbox.vue +++ b/src/components/NcActionCheckbox/NcActionCheckbox.vue @@ -233,13 +233,9 @@ export default { /* checkbox/radio fixes */ &__checkbox { position: absolute; - top: auto; - left: -10000px; - - overflow: hidden; - - width: 1px; - height: 1px; + inset-inline-start: 0 !important; + z-index: -1; + opacity: 0; } &__label { diff --git a/src/components/NcActionInput/NcActionInput.vue b/src/components/NcActionInput/NcActionInput.vue index 919a0f7e11..9c6c9f9806 100644 --- a/src/components/NcActionInput/NcActionInput.vue +++ b/src/components/NcActionInput/NcActionInput.vue @@ -583,10 +583,11 @@ $input-margin: 4px; flex: 1 1 auto; margin: $input-margin 0; - padding-right: $icon-margin; + padding-inline-end: $icon-margin; } &__container { + position: relative; width: 100%; } @@ -615,11 +616,12 @@ $input-margin: 4px; &--hidden { position: absolute; - left: -10000px; - top: auto; + inset-inline-start: 0; width: 1px; height: 1px; overflow: hidden; + z-index: -1; + opacity: 0; } } diff --git a/src/components/NcActionRadio/NcActionRadio.vue b/src/components/NcActionRadio/NcActionRadio.vue index 1bb4dc97b4..05be3e565c 100644 --- a/src/components/NcActionRadio/NcActionRadio.vue +++ b/src/components/NcActionRadio/NcActionRadio.vue @@ -239,13 +239,9 @@ export default { /* checkbox/radio fixes */ &__radio { position: absolute; - top: auto; - left: -10000px; - - overflow: hidden; - - width: 1px; - height: 1px; + inset-inline-start: 0 !important; + z-index: -1; + opacity: 0; } &__label { @@ -254,7 +250,7 @@ export default { width: 100%; padding: 0 !important; - padding-right: $icon-margin !important; + padding-inline-end: $icon-margin !important; // (34 -14) / 2 = 10 same as ncactioncheckbox &::before { diff --git a/src/components/NcActionTextEditable/NcActionTextEditable.vue b/src/components/NcActionTextEditable/NcActionTextEditable.vue index 8298faba7c..0bf33d0000 100644 --- a/src/components/NcActionTextEditable/NcActionTextEditable.vue +++ b/src/components/NcActionTextEditable/NcActionTextEditable.vue @@ -82,7 +82,8 @@ export default { @@ -94,12 +95,16 @@ import { useModelMigration } from '../../composables/useModelMigration.ts' import ActionTextMixin from '../../mixins/actionText.js' import GenRandomId from '../../utils/GenRandomId.js' +import ArrowLeft from 'vue-material-design-icons/ArrowLeft.vue' import ArrowRight from 'vue-material-design-icons/ArrowRight.vue' +import { isRTL } from '@nextcloud/l10n' + export default { name: 'NcActionTextEditable', components: { + ArrowLeft, ArrowRight, }, @@ -165,6 +170,7 @@ export default { const model = useModelMigration('value', 'update:value') return { model, + isRTL: isRTL(), } }, @@ -276,16 +282,18 @@ $input-margin: 4px; position: relative; margin: $input-margin 0; - padding-right: $icon-margin; + padding-inline-end: $icon-margin; } &__submit { position: absolute; - left: -10000px; + inset-inline-start: 0; top: auto; width: 1px; height: 1px; overflow: hidden; + z-index: -1; + opacity: 0; } &__label { @@ -295,7 +303,7 @@ $input-margin: 4px; // bottom-right corner position: absolute; - right: calc($icon-margin + 1); + inset-inline-end: calc($icon-margin + 1px); bottom: 1px; width: calc(var(--default-clickable-area) - $input-margin * 2); height: calc(var(--default-clickable-area) - $input-margin * 2); @@ -356,7 +364,7 @@ $input-margin: 4px; z-index: 2; border-color: var(--color-primary-element); - border-left-color: transparent; + border-inline-start-color: transparent; } } } diff --git a/src/components/NcActions/NcActions.vue b/src/components/NcActions/NcActions.vue index 6cb27f4e31..fd1e5c9452 100644 --- a/src/components/NcActions/NcActions.vue +++ b/src/components/NcActions/NcActions.vue @@ -2040,11 +2040,7 @@ export default { .action-items { display: flex; align-items: center; - - // Spacing between buttons - & > button { - margin-right: calc($icon-margin / 2); - } + gap: calc($icon-margin / 2); } .action-item { From e1424a4d7fb9b718e613a837de2b78937dea142c Mon Sep 17 00:00:00 2001 From: Maksim Sukharev Date: Tue, 11 Feb 2025 12:13:33 +0100 Subject: [PATCH 2/2] fix(docs): fix style logical rules Signed-off-by: Maksim Sukharev --- src/components/NcButton/NcButton.vue | 2 +- src/components/NcColorPicker/NcColorPicker.vue | 4 ++-- src/components/NcHeaderButton/NcHeaderButton.vue | 2 +- src/components/NcHeaderMenu/NcHeaderMenu.vue | 2 +- src/components/NcPasswordField/NcPasswordField.vue | 2 +- src/components/NcTextField/NcTextField.vue | 2 +- 6 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/NcButton/NcButton.vue b/src/components/NcButton/NcButton.vue index 4c3f75719f..189ddd9d4c 100644 --- a/src/components/NcButton/NcButton.vue +++ b/src/components/NcButton/NcButton.vue @@ -397,7 +397,7 @@ td.row-name { } td.row-size { - text-align: right; + text-align: end; padding-inline-end: 16px; } diff --git a/src/components/NcColorPicker/NcColorPicker.vue b/src/components/NcColorPicker/NcColorPicker.vue index 5ef4baebb0..f303266f25 100644 --- a/src/components/NcColorPicker/NcColorPicker.vue +++ b/src/components/NcColorPicker/NcColorPicker.vue @@ -94,12 +94,12 @@ export default { @@ -129,12 +129,12 @@ export default { diff --git a/src/components/NcHeaderButton/NcHeaderButton.vue b/src/components/NcHeaderButton/NcHeaderButton.vue index 8f01bdd6e3..11dce01ec4 100644 --- a/src/components/NcHeaderButton/NcHeaderButton.vue +++ b/src/components/NcHeaderButton/NcHeaderButton.vue @@ -55,7 +55,7 @@ export default { justify-content: right; background-color: var(--color-primary); height: var(--header-height, 50px); - padding-right: 12px; + padding-inline-end: 12px; } ``` diff --git a/src/components/NcHeaderMenu/NcHeaderMenu.vue b/src/components/NcHeaderMenu/NcHeaderMenu.vue index 5fe8081ec1..06596e1634 100644 --- a/src/components/NcHeaderMenu/NcHeaderMenu.vue +++ b/src/components/NcHeaderMenu/NcHeaderMenu.vue @@ -50,7 +50,7 @@ export default { justify-content: right; background-color: var(--color-primary); height: var(--header-height, 50px); - padding-right: 12px; + padding-inline-end: 12px; } ``` diff --git a/src/components/NcPasswordField/NcPasswordField.vue b/src/components/NcPasswordField/NcPasswordField.vue index 464dcd639c..f2a8a7adc5 100644 --- a/src/components/NcPasswordField/NcPasswordField.vue +++ b/src/components/NcPasswordField/NcPasswordField.vue @@ -70,13 +70,13 @@ export default { .external-label { display: flex; + gap: 14px; width: 100%; margin-top: 1rem; } .external-label label { padding-top: 7px; - padding-right: 14px; white-space: nowrap; } diff --git a/src/components/NcTextField/NcTextField.vue b/src/components/NcTextField/NcTextField.vue index e42b77f1e4..72ffa22bbe 100644 --- a/src/components/NcTextField/NcTextField.vue +++ b/src/components/NcTextField/NcTextField.vue @@ -111,13 +111,13 @@ export default { .external-label { display: flex; + gap: 14px; width: 100%; margin-top: 1rem; } .external-label label { padding-top: 7px; - padding-right: 14px; white-space: nowrap; }