feat(frontend): Add a toggle to disable breakpoints in the App editor (#4274)

* feat(frontend): Add a toggle to disable breakpoints in the App editor * feat(frontend): improve UI * feat(frontend): fix build * feat(frontend): fix build * feat(frontend): fix how mobileViewOnSmallerScreens works for older apps * feat(frontend): fix build
2024-08-22 15:38:57 +02:00
parent cc738f32e7
commit 5b2dd7573d
9 changed files with 98 additions and 15 deletions
--- a/frontend/src/lib/components/Dev.svelte
+++ b/frontend/src/lib/components/Dev.svelte
@@ -456,7 +456,8 @@
 		testStepStore,
 		saveDraft: () => {},
 		initialPath: '',
-		flowInputsStore: writable<FlowInput>({})
+		flowInputsStore: writable<FlowInput>({}),
+		customUi: {}
 	})

 	$: updateFlow($flowStore)
--- a/frontend/src/lib/components/apps/editor/AppEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/AppEditor.svelte
@@ -35,7 +35,7 @@
 	import VariableEditor from '$lib/components/VariableEditor.svelte'
 	import { VariableService, type Policy } from '$lib/gen'
 	import { initHistory } from '$lib/history'
-	import { Component, Minus, Paintbrush, Plus } from 'lucide-svelte'
+	import { Component, Minus, Paintbrush, Plus, Smartphone } from 'lucide-svelte'
 	import { findGridItem, findGridItemParentGrid } from './appUtils'
 	import ComponentNavigation from './component/ComponentNavigation.svelte'
 	import CssSettings from './componentsPanel/CssSettings.svelte'
@@ -222,7 +222,10 @@

 	$: context.mode = $mode == 'dnd' ? 'editor' : 'viewer'

-	$: width = $breakpoint === 'sm' ? 'min-w-[400px] max-w-[656px]' : 'min-w-[710px] w-full'
+	$: width =
+		$breakpoint === 'sm' && $appStore?.mobileViewOnSmallerScreens !== false
+			? 'min-w-[400px] max-w-[656px]'
+			: 'min-w-[710px] w-full'

 	let selectedTab: 'insert' | 'settings' | 'css' = 'insert'

@@ -670,6 +673,34 @@
 												<GridEditor {policy} />
 											</div>
 										{/if}
+										{#if !$appStore?.mobileViewOnSmallerScreens && $breakpoint === 'sm'}
+											<div
+												class="absolute inset-0 flex bg-surface center-center z-10000 bg-opacity-60"
+											>
+												<div
+													class="bg-surface shadow-md rounded-md p-4 max-w-sm flex flex-col gap-2"
+												>
+													<div class="text-sm font-semibold"> Mobile View </div>
+													<div class="text-xs">
+														Enabling mobile view allows you to adjust component placement for
+														smaller screens.
+													</div>
+													<Button
+														color="light"
+														variant="border"
+														size="xs"
+														on:click={() => {
+															$appStore.mobileViewOnSmallerScreens = true
+														}}
+														startIcon={{
+															icon: Smartphone
+														}}
+													>
+														Add mobile view on smaller screens
+													</Button>
+												</div>
+											</div>
+										{/if}
 									</div>
 								</div>
 							</Pane>
--- a/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte
+++ b/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte
@@ -83,6 +83,7 @@
 	import { getDeleteInput } from '../components/display/dbtable/queries/delete'
 	import { collectOneOfFields } from './appUtils'
 	import Summary from '$lib/components/Summary.svelte'
+	import ToggleEnable from '$lib/components/common/toggleButton-v2/ToggleEnable.svelte'

 	async function hash(message) {
 		try {
@@ -1293,20 +1294,29 @@
 					/>
 				</ToggleButtonGroup>
 			{/if}
-			<div>
+			<div class="flex flex-row gap-2">
 				<ToggleButtonGroup class="h-[30px]" bind:selected={$breakpoint}>
-					<ToggleButton
-						tooltip="Mobile View"
-						icon={Smartphone}
-						value="sm"
-						iconProps={{ size: 16 }}
-					/>
 					<ToggleButton
 						tooltip="Computer View"
 						icon={Laptop2}
-						value="lg"
+						value={'lg'}
 						iconProps={{ size: 16 }}
 					/>
+					<ToggleButton
+						tooltip="Mobile View"
+						icon={Smartphone}
+						value={'sm'}
+						iconProps={{ size: 16 }}
+					/>
+					{#if $breakpoint === 'sm'}
+						<ToggleEnable
+							tooltip="Desktop view is enabled by default. Enable this to customize the layout of the components for the mobile view"
+							label="Enable mobile view for smaller screens"
+							bind:checked={$app.mobileViewOnSmallerScreens}
+							iconProps={{ size: 16 }}
+							iconOnly={false}
+						/>
+					{/if}
 				</ToggleButtonGroup>
 			</div>
 		</div>
--- a/frontend/src/lib/components/apps/editor/AppPreview.svelte
+++ b/frontend/src/lib/components/apps/editor/AppPreview.svelte
@@ -153,7 +153,10 @@
 			.filter((x) => x != undefined) as string[]
 	}

-	$: width = $breakpoint === 'sm' ? 'max-w-[640px]' : 'w-full min-w-[768px]'
+	$: width =
+		$breakpoint === 'sm' && $appStore?.mobileViewOnSmallerScreens !== false
+			? 'max-w-[640px]'
+			: 'w-full min-w-[768px]'
 	$: lockedClasses = isLocked ? '!max-h-[400px] overflow-hidden pointer-events-none' : ''
 	function onThemeChange() {
 		$darkMode = document.documentElement.classList.contains('dark')
--- a/frontend/src/lib/components/apps/types.ts
+++ b/frontend/src/lib/components/apps/types.ts
@@ -161,6 +161,7 @@ export type App = {
 	subgrids?: Record<string, GridItem[]>
 	theme: AppTheme | undefined
 	hideLegacyTopBar?: boolean | undefined
+	mobileViewOnSmallerScreens?: boolean | undefined
 }

 export type ConnectingInput = {
--- a/frontend/src/lib/components/common/toggleButton-v2/ToggleEnable.svelte
+++ b/frontend/src/lib/components/common/toggleButton-v2/ToggleEnable.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+	import { Tab } from '@rgossiaux/svelte-headlessui'
+	import { twMerge } from 'tailwind-merge'
+
+	import Toggle from '$lib/components/Toggle.svelte'
+
+	export let label: string | undefined = undefined
+	export let tooltip: string | undefined = undefined
+	export let disabled: boolean = false
+	export let small = false
+	export let light = false
+	export let checked: boolean = false
+	export let id: string | undefined = undefined
+</script>
+
+<div {id} class="flex">
+	<Tab
+		{disabled}
+		class={twMerge(
+			' rounded-md transition-all text-xs flex gap-1 flex-row items-center',
+			small ? 'px-1.5 py-0.5 text-2xs' : 'px-2 py-1',
+			light ? 'font-medium' : '',
+			'bg-surface-secondary ',
+			$$props.class
+		)}
+	>
+		<Toggle
+			size="xs"
+			options={{
+				right: label,
+				rightTooltip: tooltip
+			}}
+			textClass="text-2xs whitespace-nowrap white !w-full"
+			bind:checked
+		/>
+	</Tab>
+</div>
--- a/frontend/src/routes/(root)/(logged)/apps/add/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/apps/add/+page.svelte
@@ -143,6 +143,7 @@
 			setUpTopBarComponentContent(id, value)

 			value.hideLegacyTopBar = true
+			value.mobileViewOnSmallerScreens = false

 			value = value
 		}
--- a/frontend/src/routes/(root)/(logged)/apps/get/[...path]/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/apps/get/[...path]/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { goto, replaceState } from '$app/navigation'
+	import { goto } from '$app/navigation'
 	import { page } from '$app/stores'
 	import { base } from '$lib/base'
 	import AppPreview from '$lib/components/apps/editor/AppPreview.svelte'
@@ -66,7 +66,6 @@
 					goto(path)
 				}}
 				gotoFn={(path, opt) => {
-					console.log(path, opt)
 					goto(path, opt)
 				}}
 			/>
--- a/frontend/src/routes/public/[workspace]/[...secret]/+page.svelte
+++ b/frontend/src/routes/public/[workspace]/[...secret]/+page.svelte
@@ -18,7 +18,7 @@
 	import Login from '$lib/components/Login.svelte'
 	import { getUserExt } from '$lib/user'
 	import { User, UserRoundX } from 'lucide-svelte'
-	import { goto, replaceState } from '$app/navigation'
+	import { goto } from '$app/navigation'
 	import { sendUserToast } from '$lib/toast'

 	let app: (AppWithLastVersion & { value: any }) | undefined = undefined