Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Right to left mode #611

Merged
merged 3 commits into from
Nov 20, 2024
Merged

Right to left mode #611

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
fed3054
Right to left mode
chiragchhatrala Nov 8, 2024
acbae32
Fix label
JhumanJ Nov 13, 2024
b194c50
Merge branch 'main' into 12fa6-right-to-left-mode
JhumanJ Nov 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions api/app/Http/Requests/UserFormRequest.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ public function rules()
'theme' => ['required', Rule::in(Form::THEMES)],
'width' => ['required', Rule::in(Form::WIDTHS)],
'size' => ['required', Rule::in(Form::SIZES)],
'layout_rtl' => 'boolean',
'border_radius' => ['required', Rule::in(Form::BORDER_RADIUS)],
'cover_picture' => 'url|nullable',
'logo_picture' => 'url|nullable',
Expand Down
1 change: 1 addition & 0 deletions api/app/Http/Resources/FormResource.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,7 @@ private function getProtectedForm()
'is_password_protected' => true,
'has_password' => $this->has_password,
'width' => 'centered',
'layout_rtl' => $this->layout_rtl,
'no_branding' => $this->no_branding,
'properties' => [],
'logo_picture' => $this->logo_picture,
Expand Down
1 change: 1 addition & 0 deletions api/app/Models/Forms/Form.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@ class Form extends Model implements CachableAttributes
'border_radius',
'theme',
'width',
'layout_rtl',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Add boolean casting for the layout_rtl property.

For better data integrity and consistent type handling, consider adding the layout_rtl property to the casts array.

Add this to the casts array in the casts() method:

     protected function casts(): array
     {
         return [
             'properties' => 'array',
             'database_fields_update' => 'array',
             'closes_at' => 'datetime',
             'tags' => 'array',
             'removed_properties' => 'array',
-            'seo_meta' => 'object'
+            'seo_meta' => 'object',
+            'layout_rtl' => 'boolean'
         ];
     }

Committable suggestion skipped: line range outside the PR's diff.

'cover_picture',
'logo_picture',
'dark_mode',
Expand Down
27 changes: 27 additions & 0 deletions api/database/migrations/2024_11_08_091638_add_layout_rtl_to_forms_table.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class () extends Migration {
/**
* Run the migrations.
*/
public function up(): void
{
Schema::table('forms', function (Blueprint $table) {
$table->boolean('layout_rtl')->default(false);
});
}

/**
* Reverse the migrations.
*/
public function down(): void
{
Schema::table('forms', function (Blueprint $table) {
$table->dropColumn('layout_rtl');
});
}
};
4 changes: 2 additions & 2 deletions client/components/open/forms/OpenCompleteForm.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<div
v-if="form"
class="open-complete-form"
:style="{ '--font-family': form.font_family }"
:style="{ '--font-family': form.font_family, 'direction': form?.layout_rtl ? 'rtl' : 'ltr' }"
>
<link
v-if="adminPreview && form.font_family"
Expand Down Expand Up @@ -147,7 +147,7 @@
key="submitted"
class="px-2"
>
<TextBlock
<TextBlock
v-if="form.submitted_text"
class="form-description text-gray-700 dark:text-gray-300 whitespace-pre-wrap"
:content="form.submitted_text"
Expand Down
11 changes: 10 additions & 1 deletion client/components/open/forms/components/form-components/FormCustomization.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,6 +113,14 @@
label="Form Width"
help="Useful when embedding your form"
/>

<ToggleSwitchInput
name="layout_rtl"
:form="form"
class="mt-4"
label="Right-to-Left Layout"
help="Adjusts form layout for right-to-left languages."
/>

<EditorSectionHeader
icon="heroicons:tag-16-solid"
Expand All @@ -128,7 +136,8 @@
<image-input
name="cover_picture"
:form="form"
label="Color (for buttons & inputs border)"
label="Color image"
help="Not visible when form is embedded"
/>
<toggle-switch-input
name="hide_title"
Expand Down
3 changes: 2 additions & 1 deletion client/components/open/forms/components/form-components/FormEditorPreview.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,12 +71,13 @@
v-if="form.logo_picture"
class="w-full mx-auto py-5 relative"
:class="{'pt-20':!form.cover_picture, 'max-w-lg': form && (form.width === 'centered'),'px-7': !isExpanded, 'px-3': isExpanded}"
:style="{ 'direction': form?.layout_rtl ? 'rtl' : 'ltr' }"
>
<img
alt="Logo Picture"
:src="coverPictureSrc(form.logo_picture)"
:class="{'top-5':!form.cover_picture, '-top-10':form.cover_picture}"
class="max-w-60 h-20 object-contain absolute left-5 transition-all"
class="max-w-60 h-20 object-contain absolute transition-all"
>
</div>
</div>
Expand Down
1 change: 1 addition & 0 deletions client/composables/forms/initForm.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ export const initForm = (defaultValue = {}, withDefaultProperties = false) => {
font_family: null,
theme: "default",
width: "centered",
layout_rtl: false,
dark_mode: "auto",
color: DEFAULT_COLOR,
hide_title: false,
Expand Down
3 changes: 2 additions & 1 deletion client/pages/forms/[slug]/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,12 +20,13 @@
v-if="form.logo_picture"
class="w-full p-5 relative mx-auto"
:class="{'pt-20':!form.cover_picture, 'md:w-3/5 lg:w-1/2 md:max-w-2xl': form.width === 'centered', 'max-w-7xl': (form.width === 'full' && !isIframe) }"
:style="{ 'direction': form?.layout_rtl ? 'rtl' : 'ltr' }"
>
<img
alt="Logo Picture"
:src="form.logo_picture"
:class="{'top-5':!form.cover_picture, '-top-10':form.cover_picture}"
class="w-20 h-20 object-contain absolute left-5 transition-all"
class="w-20 h-20 object-contain absolute transition-all"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

Logo positioning change needs to be reverted

The search results show that the logo positioning was previously handled with dynamic classes based on the cover picture presence:

:class="{'top-5':!form.cover_picture, '-top-10':form.cover_picture}"

This conditional positioning has been removed in favor of a static positioning, which will break the layout in different scenarios. The logo needs different vertical positions (top-5 vs -top-10) depending on whether a cover picture is present.

  • Revert the change and restore the conditional classes for proper logo positioning
  • Keep the other utility classes (w-20 h-20 object-contain absolute transition-all)
🔗 Analysis chain

Verify logo positioning in all scenarios.

The class binding has been simplified, but please verify that the logo positioning still works correctly in these scenarios:

  1. With cover picture
  2. Without cover picture
  3. With RTL mode enabled/disabled
🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Search for related logo positioning styles and tests
echo "Searching for related logo positioning styles..."
rg -t vue "logo.*position|position.*logo" --glob "client/**/*.vue"

echo "Searching for related logo tests..."
rg -t js -t vue "logo.*test|test.*logo" --glob "client/**/*.{spec,test}.{js,ts,vue}"

Length of output: 399

Script:

#!/bin/bash
# Let's try a different approach to search for logo-related styles and layout
echo "Searching for logo-related styles in Vue files..."
rg "class=.*logo|class=.*w-20.*h-20" --type-add 'vue:*.vue' -t vue

echo -e "\nSearching for cover picture related code..."
rg "coverPicture|cover-picture" --type-add 'vue:*.vue' -t vue

echo -e "\nChecking RTL-related styles..."
rg "rtl|direction.*rtl|dir=.*rtl" --type-add 'vue:*.vue' -t vue

echo -e "\nLooking for the form component structure..."
rg -A 5 -B 5 "w-20.*h-20" --type-add 'vue:*.vue' -t vue

Length of output: 2656

>
</div>
</div>
Expand Down
Loading