fix(UX): Reset overrides should be disabled if not applicable

frappe · Jan 14, 2025 · 74ccb14 · 74ccb14
1 parent 194fe1c
commit 74ccb14
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 15 deletions.
diff --git a/frontend/src/builder.d.ts b/frontend/src/builder.d.ts
@@ -53,6 +53,7 @@ declare interface ContextMenuOption {
 	label: string;
 	action: CallableFunction;
 	condition?: () => boolean;
+	disabled?: () => boolean;
 }
 
 declare interface ComponentData {

diff --git a/frontend/src/components/BlockContextMenu.vue b/frontend/src/components/BlockContextMenu.vue
@@ -143,12 +143,6 @@ const contextMenuOptions: ContextMenuOption[] = [
 			return selectedBlocks.every((block: Block) => block.getParentBlock() === parentBlock);
 		},
 	},
-	{
-		label: "Save As Component",
-		action: () => (showNewComponentDialog.value = true),
-		condition: () => !block.value.isExtendedFromComponent(),
-	},
-
 	{
 		label: "Repeat Block",
 		action: () => {
@@ -166,7 +160,8 @@ const contextMenuOptions: ContextMenuOption[] = [
 	},
 	{
 		label: "Reset Overrides",
-		condition: () => block.value.hasOverrides(store.activeBreakpoint),
+		condition: () => store.activeBreakpoint !== "desktop",
+		disabled: () => !block.value?.hasOverrides(store.activeBreakpoint),
 		action: () => {
 			block.value.resetOverrides(store.activeBreakpoint);
 		},
@@ -216,6 +211,11 @@ const contextMenuOptions: ContextMenuOption[] = [
 		},
 		condition: () => !block.value.isExtendedFromComponent() && Boolean(window.is_developer_mode),
 	},
+	{
+		label: "Save As Component",
+		action: () => (showNewComponentDialog.value = true),
+		condition: () => !block.value.isExtendedFromComponent(),
+	},
 	{
 		label: "Detach Component",
 		action: () => {

diff --git a/frontend/src/components/ContextMenu.vue b/frontend/src/components/ContextMenu.vue
@@ -7,14 +7,15 @@
 			<MenuItem
 				v-slot="{ active, disabled }"
 				class="block cursor-pointer rounded-sm px-3 py-1 text-ink-gray-9"
+				:disabled="option.disabled && option.disabled()"
 				v-for="(option, index) in options"
 				v-show="!option.condition || option.condition()">
 				<div
 					@click.prevent.stop="(!option.condition || option.condition()) && handleClick(option.action)"
 					:class="{
 						'text-gray-900': !disabled,
 						'bg-surface-gray-4': active,
-						'text-ink-gray-4': disabled,
+						'!cursor-default !text-ink-gray-4': disabled,
 					}">
 					{{ option.label }}
 				</div>
@@ -28,12 +29,6 @@ import { computed, ref } from "vue";
 
 const menu = ref(null) as unknown as typeof Menu;
 
-interface ContextMenuOption {
-	label: string;
-	action: CallableFunction;
-	condition?: () => boolean;
-}
-
 const props = defineProps({
 	posX: {
 		type: Number,

diff --git a/frontend/src/components/PageClientScriptManager.vue b/frontend/src/components/PageClientScriptManager.vue
@@ -140,7 +140,6 @@ const selectScript = (script: attachedScript) => {
 };
 
 const updateScript = (value: string) => {
-	console.log(value);
 	if (!activeScript.value) return;
 	clientScriptResource.setValue
 		.submit({