Merge pull request #227 from frappe/develop

frontend/src/builder.d.ts

@@ -68,7 +68,7 @@ declare type HashString = `#${string}`;
 
 declare type RGBString = `rgb(${number}, ${number}, ${number})`;
 
-declare type LeftSidebarTabOption = "Blocks" | "Layers" | "Assets";
+declare type LeftSidebarTabOption = "Blocks" | "Layers" | "Assets" | "Code";
 declare type RightSidebarTabOption = "Properties" | "Script" | "Options";
 
 declare type BuilderMode = "select" | "text" | "container" | "image" | "repeater" | "move";

frontend/src/components/BlockProperties.vue

@@ -1,6 +1,6 @@
 <template>
 	<div v-if="blockController.isBLockSelected()" class="flex select-none flex-col pb-16">
-		<div class="sticky top-[41px] z-50 mt-[-16px] flex w-full bg-surface-white py-3">
+		<div class="sticky top-0 z-50 mt-[-16px] flex w-full bg-surface-white py-3">
 			<BuilderInput
 				ref="searchInput"
 				type="text"
@@ -28,7 +28,9 @@
 		</div>
 	</div>
 	<div v-else>
-		<p class="text-center text-sm text-gray-600 dark:text-zinc-500">Select a block to edit properties.</p>
+		<p class="mt-2 text-center text-sm text-gray-600 dark:text-zinc-500">
+			Select a block to edit properties.
+		</p>
 	</div>
 </template>
 <script setup lang="ts">

frontend/src/components/BuilderLeftPanel.vue

@@ -4,12 +4,14 @@
 			<button
 				v-for="option of leftPanelOptions"
 				:key="option.value"
-				class="size-8 rounded text-text-icons-gray-7 hover:bg-surface-gray-2 focus:!bg-surface-gray-3"
+				class="flex size-8 items-center justify-center rounded text-text-icons-gray-7 hover:bg-surface-gray-2 focus:!bg-surface-gray-3"
 				:class="{
 					'bg-surface-gray-3 text-text-icons-gray-9': store.leftPanelActiveTab === option.value,
 				}"
-				@click.stop="setActiveTab(option.value as LeftSidebarTabOption)">
-				<component :is="option.icon" />
+				@click.stop="setActiveTab(option.value as LeftSidebarTabOption)"
+				:title="option.label">
+				<FeatherIcon :name="option.icon" v-if="typeof option.icon === 'string'" class="size-4"></FeatherIcon>
+				<component :is="option.icon" v-else />
 			</button>
 		</div>
 		<div
@@ -55,6 +57,13 @@
 					:blocks="[fragmentCanvas?.getFirstBlock()]"
 					v-if="store.editingMode === 'fragment' && fragmentCanvas" />
 			</div>
+			<div v-show="store.leftPanelActiveTab === 'Code'">
+				<PageScript
+					class="p-4"
+					:key="store.selectedPage"
+					v-if="store.selectedPage && store.activePage"
+					:page="store.activePage" />
+			</div>
 		</div>
 	</div>
 </template>
@@ -72,6 +81,7 @@ import BuilderAssets from "./BuilderAssets.vue";
 import BuilderBlockTemplates from "./BuilderBlockTemplates.vue";
 import BuilderCanvas from "./BuilderCanvas.vue";
 import PanelResizer from "./PanelResizer.vue";
+import PageScript from "@/components/PageScript.vue";
 
 const pageCanvas = inject("pageCanvas") as Ref<InstanceType<typeof BuilderCanvas> | null>;
 const fragmentCanvas = inject("fragmentCanvas") as Ref<InstanceType<typeof BuilderCanvas> | null>;
@@ -108,6 +118,11 @@ const leftPanelOptions = [
 		value: "Assets",
 		icon: ComponentIcon,
 	},
+	{
+		label: "Code",
+		value: "Code",
+		icon: "code",
+	},
 ];
 
 const getPage = () => {

frontend/src/components/BuilderRightPanel.vue

@@ -10,40 +10,13 @@
 				@resize="(width) => (store.builderLayout.rightPanelWidth = width)"
 				:min-dimension="275"
 				:max-dimension="400" />
-			<div class="sticky top-0 z-[12] flex w-full bg-surface-white px-2 text-base">
-				<button
-					v-for="tab of ['Properties', 'Script'] as RightSidebarTabOption[]"
-					:key="tab"
-					class="mx-2 flex-1 p-2 py-3"
-					@click="store.rightPanelActiveTab = tab"
-					:class="{
-						'border-b-[1px] border-gray-900 dark:border-zinc-500 dark:text-zinc-300':
-							store.rightPanelActiveTab === tab,
-						'text-gray-700 dark:text-zinc-500': store.rightPanelActiveTab !== tab,
-					}">
-					{{ tab }}
-				</button>
-			</div>
-			<BlockProperties v-show="store.rightPanelActiveTab === 'Properties'" class="p-4" />
-			<PageScript
-				class="p-4"
-				v-show="store.rightPanelActiveTab === 'Script'"
-				:key="store.selectedPage"
-				v-if="store.selectedPage && store.activePage"
-				:page="store.activePage" />
-			<!-- <PageOptions
-				class="p-4"
-				v-show="store.rightPanelActiveTab === 'Options'"
-				:key="store.selectedPage"
-				v-if="store.selectedPage && store.activePage"
-				:page="store.activePage" /> -->
+			<BlockProperties class="p-3" />
 		</div>
 	</div>
 </template>
 <script setup lang="ts">
 import useStore from "@/store";
 import BlockProperties from "./BlockProperties.vue";
-import PageScript from "./PageScript.vue";
 import PanelResizer from "./PanelResizer.vue";
 const store = useStore();
 </script>

frontend/src/utils/panAndZoom.ts

@@ -34,9 +34,22 @@ function setPanAndZoom(
 				};
 				panAndZoomAreaElement.addEventListener("mousemove", clearPinchPoint, { once: true });
 			}
-			// Multiplying with 0.01 to make the zooming less sensitive
+
+			let sensitivity = 0.008;
+			function tooMuchScroll() {
+				if (e.deltaY > 30 || e.deltaY < -30) {
+					return true;
+				}
+			}
+			if (tooMuchScroll()) {
+				// If the user scrolls too much, reduce the sensitivity
+				// this mostly happens when the user uses mouse wheel to scroll
+				// probably not the best way to handle this, but works for now
+				sensitivity = 0.001;
+			}
+
 			// Multiplying with scale to make the zooming feel consistent
-			let scale = props.scale - e.deltaY * 0.008 * props.scale;
+			let scale = props.scale - e.deltaY * sensitivity * props.scale;
 			scale = Math.min(Math.max(scale, zoomLimits.min), zoomLimits.max);
 			props.scale = scale;
 			nextTick(() => {