matt
/
opnform-host-nginx
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

improve RTL mode (#625) 

Co-authored-by: Julien Nahum <julien@nahum.net>
This commit is contained in:
Chirag Chhatrala 2024-11-21 20:44:27 +05:30 committed by GitHub
parent 5870c447d5
commit 5cd9885185
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
9 changed files with 26 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
client/app.vue
View File

@ -96,7 +96,10 @@ export default {
type: 'image/png',
href: '/favicon.ico'
}
]
],
htmlAttrs: () => ({
dir: 'ltr'
})
})
const appStore = useAppStore()

2
client/components/forms/DateInput.vue
View File

@ -46,7 +46,7 @@
</div>
<button
v-if="fromDate && !props.disabled"
class="hover:bg-gray-50 dark:hover:bg-gray-900 border-l px-2 flex items-center"
class="hover:bg-gray-50 dark:hover:bg-gray-900 ltr:border-l rtl:border-r px-2 flex items-center"
@click.prevent="clear()"
>
<Icon

8
client/components/forms/MatrixInput.vue
View File

@ -15,11 +15,11 @@
<table class="w-full table-auto">
<thead class="">
<tr>
<th class="text-left p-2 w-auto max-w-xs" />
<th class="ltr:text-left rtl:text-right p-2 w-auto max-w-xs" />
<td
v-for="column in columns"
:key="column"
class="border-l border-gray-300 max-w-24 overflow-hidden"
class="ltr:border-l rtl:border-r rtl:!border-l-0 border-gray-300 max-w-24 overflow-hidden"
>
<div class="p-2 w-full flex items-center justify-center text-sm">
{{ column }}
@ -33,7 +33,7 @@
:key="rowIndex"
class="border-t border-gray-300"
>
<td class="text-left w-auto max-w-24 overflow-hidden">
<td class="ltr:text-left rtl:text-right w-auto max-w-24 overflow-hidden">
<div class="w-full p-2 text-sm">
{{ row }}
</div>
@ -41,7 +41,7 @@
<td
v-for="column in columns"
:key="row + column"
class="border-l border-gray-300 hover:!bg-gray-100 dark:hover:!bg-gray-800"
class="ltr:border-l rtl:border-r rtl:!border-l-0 border-gray-300 hover:!bg-gray-100 dark:hover:!bg-gray-800"
:class="{
'!cursor-not-allowed !bg-gray-200 dark:!bg-gray-800 hover:!bg-gray-200 dark:hover:!bg-gray-800': disabled,
}"

4
client/components/forms/PhoneInput.vue
View File

@ -14,7 +14,7 @@
v-model="selectedCountryCode"
:class="theme.PhoneInput.countrySelectWidth"
dropdown-class="max-w-[300px]"
input-class="rounded-r-none"
input-class="ltr-only:rounded-r-none rtl:!rounded-l-none"
:data="countries"
:disabled="disabled || countries.length === 1 ? true : null"
:searchable="true"
@ -55,7 +55,7 @@
<input
v-model="inputVal"
type="text"
class="inline-flex-grow !border-l-0 !rounded-l-none"
class="inline-flex-grow ltr-only:border-l-0 ltr-only:!rounded-l-none rtl:border-r-0 rtl:rounded-r-none"
:disabled="disabled ? true : null"
:class="[
theme.PhoneInput.input,

14
client/components/forms/components/VSelect.vue
View File

@ -64,7 +64,7 @@
>
<slot name="placeholder">
<div
class="text-gray-400 dark:text-gray-500 w-full text-left truncate pr-3"
class="text-gray-400 dark:text-gray-500 w-full ltr:text-left rtl:!text-right truncate ltr:pr-3 rtl:pl-3 rtl:!pr-0"
:class="[
{ 'py-1': multiple && !loading },
theme.SelectInput.fontSize
@ -76,7 +76,7 @@
</div>
</transition>
</div>
<span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
<span class="absolute inset-y-0 ltr:right-0 rtl:left-0 rtl:!right-auto flex items-center ltr:pr-2 rtl:pl-2 rtl:!pr-0 pointer-events-none">
<Icon
name="heroicons:chevron-up-down-16-solid"
class="h-5 w-5 text-gray-500"
@ -85,7 +85,7 @@
</button>
<button
v-if="clearable && showClearButton && !isEmpty"
class="hover:bg-gray-50 dark:hover:bg-gray-900 border-l px-2"
class="hover:bg-gray-50 dark:hover:bg-gray-900 ltr:border-l rtl:!border-l-0 rtl:border-r px-2 flex items-center"
:class="[theme.SelectInput.spacing.vertical]"
@click.prevent="clear()"
>
@ -119,12 +119,12 @@
<input
v-model="searchTerm"
type="text"
class="flex-grow pl-3 pr-7 py-2 w-full focus:outline-none dark:text-white"
class="flex-grow ltr:pl-3 ltr:pr-7 rtl:!pr-3 rtl:pl-7 py-2 w-full focus:outline-none dark:text-white"
placeholder="Search"
>
<div
v-if="!searchTerm"
class="flex absolute right-0 inset-y-0 items-center px-2 justify-center pointer-events-none"
class="flex absolute ltr:right-0 rtl:left-0 rtl:!right-auto inset-y-0 items-center px-2 justify-center pointer-events-none"
>
<Icon
name="heroicons:magnifying-glass-solid"
@ -134,12 +134,12 @@
<div
v-else
role="button"
class="flex absolute right-0 inset-y-0 items-center px-2 justify-center"
class="flex absolute ltr:right-0 rtl:!right-auto rtl:left-0 inset-y-0 items-center px-2 justify-center"
@click="searchTerm = ''"
>
<Icon
name="heroicons:backspace"
class="h-5 w-5 text-gray-500 dark:text-gray-400"
class="h-5 w-5 rtl:rotate-180 text-gray-500 dark:text-gray-400"
/>
</div>
</div>

1
client/components/open/forms/OpenCompleteForm.vue
View File

@ -2,6 +2,7 @@
<div
v-if="form"
class="open-complete-form"
:dir="form?.layout_rtl ? 'rtl' : 'ltr'"
:style="{ '--font-family': form.font_family, 'direction': form?.layout_rtl ? 'rtl' : 'ltr' }"
>
<link

2
client/components/open/forms/components/form-components/FormCustomization.vue
View File

@ -119,7 +119,7 @@
:form="form"
class="mt-4"
label="Right-to-Left Layout"
help="Adjusts form layout for right-to-left languages."
help="Adjusts layout for RTL languages"
/>
<EditorSectionHeader

5
client/pages/forms/[slug]/index.vue
View File

@ -254,6 +254,9 @@ useHead({
content: 'black-translucent'
},
] : {},
script: [{ src: '/widgets/iframeResizer.contentWindow.min.js' } ]
script: [{ src: '/widgets/iframeResizer.contentWindow.min.js' }],
htmlAttrs: () => ({
dir: form.value?.layout_rtl ? 'rtl' : 'ltr'
})
})
</script>

2
client/tailwind.config.js vendored
View File

@ -94,6 +94,8 @@ module.exports = {
plugin(function ({ addVariant }) {
addVariant("between", "&:not(:first-child):not(:last-child)")
addVariant("hocus", ["&:hover", "&:focus"])
// Add a new variant that only applies when there's no RTL parent
addVariant('ltr-only', '&:where(:not([dir="rtl"] *))')
}),
],
}