From 1d23c789025e1450c5f01675fcb246461cce70ec Mon Sep 17 00:00:00 2001 From: Suraj Shetty Date: Tue, 15 Oct 2024 16:18:08 +0530 Subject: [PATCH 1/8] fix: Misc - Force reload webpage preview tab - Set page specific window name so that "Edit in editor" opens correct tab even if multiple tab is open - Fix some types --- builder/builder/doctype/builder_page/builder_page.py | 1 + builder/templates/generators/webpage_scripts.html | 2 +- frontend/src/builder.d.ts | 4 +++- frontend/src/pages/PageBuilder.vue | 2 +- frontend/src/store.ts | 4 +++- frontend/src/utils/blockController.ts | 4 +--- 6 files changed, 10 insertions(+), 7 deletions(-) diff --git a/builder/builder/doctype/builder_page/builder_page.py b/builder/builder/doctype/builder_page/builder_page.py index c2e602ab..1ee8a6d7 100644 --- a/builder/builder/doctype/builder_page/builder_page.py +++ b/builder/builder/doctype/builder_page/builder_page.py @@ -194,6 +194,7 @@ def get_context(self, context): context.content = content context.style = render_template(style, page_data) context.editor_link = f"/{builder_path}/page/{self.name}" + context.page_name = self.name if self.dynamic_route and hasattr(frappe.local, "request"): context.base_url = frappe.utils.get_url(frappe.local.request.path or self.route) diff --git a/builder/templates/generators/webpage_scripts.html b/builder/templates/generators/webpage_scripts.html index c53abede..53028639 100644 --- a/builder/templates/generators/webpage_scripts.html +++ b/builder/templates/generators/webpage_scripts.html @@ -14,5 +14,5 @@ {% endif %} \ No newline at end of file diff --git a/frontend/src/builder.d.ts b/frontend/src/builder.d.ts index c2e82ad9..f2ae2e58 100644 --- a/frontend/src/builder.d.ts +++ b/frontend/src/builder.d.ts @@ -1,7 +1,9 @@ declare type StyleValue = string | number | null | undefined; +declare type styleProperty = keyof CSSProperties; + declare interface BlockStyleMap { - [key: string]: StyleValue; + [key: styleProperty]: StyleValue; } declare interface BlockAttributeMap { diff --git a/frontend/src/pages/PageBuilder.vue b/frontend/src/pages/PageBuilder.vue index fabeaecd..21fc34c0 100644 --- a/frontend/src/pages/PageBuilder.vue +++ b/frontend/src/pages/PageBuilder.vue @@ -560,7 +560,7 @@ const saveAndExitFragmentMode = (e: Event) => { }; onActivated(async () => { - store.realtime.on("doc_viewers", async (data) => { + store.realtime.on("doc_viewers", async (data: { users: [] }) => { store.viewers = await getUsersInfo(data.users.filter((user: string) => user !== sessionUser.value)); }); store.realtime.doc_subscribe("Builder Page", route.params.pageId as string); diff --git a/frontend/src/store.ts b/frontend/src/store.ts index 44232b01..31f8d500 100644 --- a/frontend/src/store.ts +++ b/frontend/src/store.ts @@ -158,6 +158,7 @@ const useStore = defineStore("store", { const interval = setInterval(() => { if (this.fetchingComponent.size === 0) { this.settingPage = false; + window.name = `editor-${pageName}`; clearInterval(interval); } }, 100); @@ -455,7 +456,8 @@ const useStore = defineStore("store", { } }); } - window.open(`/${route}`, "builder-preview"); + const targetWindow = window.open(`/${route}`, "builder-preview"); + targetWindow?.location.reload(); }, savePage() { this.pageBlocks = this.getPageBlocks() as Block[]; diff --git a/frontend/src/utils/blockController.ts b/frontend/src/utils/blockController.ts index 4290f490..f4a2acda 100644 --- a/frontend/src/utils/blockController.ts +++ b/frontend/src/utils/blockController.ts @@ -1,12 +1,10 @@ import useStore from "@/store"; -import { CSSProperties, nextTick } from "vue"; +import { nextTick } from "vue"; import Block, { BlockDataKey } from "./block"; import getBlockTemplate from "./blockTemplate"; const store = useStore(); -type styleProperty = keyof CSSProperties; - const blockController = { clearSelection: () => { store.activeCanvas?.clearSelection(); From 671616b76e611ee2adde2e82a1c036f4346efdb0 Mon Sep 17 00:00:00 2001 From: Suraj Shetty Date: Tue, 15 Oct 2024 21:28:35 +0530 Subject: [PATCH 2/8] fix: Font upload UX - Ensure font is loaded properly - Show some feedback on font upload --- .../src/components/Controls/FontUploader.vue | 42 ++++++++++++------- frontend/src/utils/fontManager.ts | 2 +- 2 files changed, 27 insertions(+), 17 deletions(-) diff --git a/frontend/src/components/Controls/FontUploader.vue b/frontend/src/components/Controls/FontUploader.vue index 27e5ac9c..ed43368e 100644 --- a/frontend/src/components/Controls/FontUploader.vue +++ b/frontend/src/components/Controls/FontUploader.vue @@ -11,6 +11,8 @@ import userFont from "@/data/userFonts"; import blockController from "@/utils/blockController"; import { getFontName } from "@/utils/helpers"; import { FileUploadHandler } from "frappe-ui"; +import { nextTick } from "vue"; +import { toast } from "vue-sonner"; const emit = defineEmits(["change"]); type FileDoc = { @@ -22,20 +24,25 @@ const openFileSelector = () => { const input = document.createElement("input"); input.type = "file"; input.accept = ".woff2,.woff,.ttf,.otf"; - input.onchange = (e: Event) => { - const file = (e.target as HTMLInputElement)?.files?.[0]; - if (file) { - const fileUploadHandler = new FileUploadHandler(); - fileUploadHandler - .upload(file, { - private: false, - folder: "Home/Builder Uploads/Fonts", - }) - .then((fileDoc: FileDoc) => { - uploadFont(fileDoc); - }); - } - }; + input.onchange = (e) => + toast.promise( + new Promise(async (resolve) => { + const file = (e.target as HTMLInputElement)?.files?.[0]; + if (file) { + const fileUploadHandler = new FileUploadHandler(); + const fileDoc = await fileUploadHandler.upload(file, { + private: false, + folder: "Home/Builder Uploads/Fonts", + }); + await uploadFont(fileDoc); + } + resolve(null); + }), + { + loading: "Uploading font...", + success: () => "Font uploaded", + }, + ); input.click(); }; @@ -43,7 +50,8 @@ const uploadFont = async (file: FileDoc) => { const fontFamilyName = await getFontName(file.file_url); const fontURL = file.file_url; const fontFace = new FontFace(fontFamilyName, `url("${fontURL}")`); - await fontFace.load(); + const loadedFont = await fontFace.load(); + document.fonts.add(loadedFont); try { await userFont.insert.submit({ font_name: fontFace.family, @@ -55,9 +63,11 @@ const uploadFont = async (file: FileDoc) => { console.log("Font already exists"); } } + await userFont.fetch(); + emit("change"); + await nextTick(); if (blockController.isBLockSelected()) { blockController.setFontFamily(fontFace.family); } - emit("change"); }; diff --git a/frontend/src/utils/fontManager.ts b/frontend/src/utils/fontManager.ts index 225888d5..2d03759f 100644 --- a/frontend/src/utils/fontManager.ts +++ b/frontend/src/utils/fontManager.ts @@ -12,7 +12,7 @@ const setFontRequested = (font: string) => { }; const setFont = (font: string | null, weight: string | null) => { - let fontId = ""; + let fontId = font || ""; return new Promise((resolve) => { if (!font) { return resolve(font); From eeba97dc962749d96431dfca663141c2d75f556d Mon Sep 17 00:00:00 2001 From: Suraj Shetty Date: Wed, 16 Oct 2024 10:28:57 +0530 Subject: [PATCH 3/8] fix: Move code option to left sidebar --- frontend/src/builder.d.ts | 2 +- frontend/src/components/BlockProperties.vue | 2 +- frontend/src/components/BuilderLeftPanel.vue | 21 ++++++++++++-- frontend/src/components/BuilderRightPanel.vue | 29 +------------------ 4 files changed, 21 insertions(+), 33 deletions(-) diff --git a/frontend/src/builder.d.ts b/frontend/src/builder.d.ts index f2ae2e58..e6474767 100644 --- a/frontend/src/builder.d.ts +++ b/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"; diff --git a/frontend/src/components/BlockProperties.vue b/frontend/src/components/BlockProperties.vue index fd606850..391fc622 100644 --- a/frontend/src/components/BlockProperties.vue +++ b/frontend/src/components/BlockProperties.vue @@ -1,6 +1,6 @@ @@ -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 | null>; const fragmentCanvas = inject("fragmentCanvas") as Ref | null>; @@ -108,6 +118,11 @@ const leftPanelOptions = [ value: "Assets", icon: ComponentIcon, }, + { + label: "Code", + value: "Code", + icon: "code", + }, ]; const getPage = () => { diff --git a/frontend/src/components/BuilderRightPanel.vue b/frontend/src/components/BuilderRightPanel.vue index 5a5554db..475b0c58 100644 --- a/frontend/src/components/BuilderRightPanel.vue +++ b/frontend/src/components/BuilderRightPanel.vue @@ -10,40 +10,13 @@ @resize="(width) => (store.builderLayout.rightPanelWidth = width)" :min-dimension="275" :max-dimension="400" /> -
- -
- - - + From a8979812fc567835f76a261d5976c70c8499fef6 Mon Sep 17 00:00:00 2001 From: Suraj Shetty Date: Sat, 19 Oct 2024 13:00:38 +0530 Subject: [PATCH 4/8] fix: Avoid text selection while box resize --- frontend/src/components/BoxResizer.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/BoxResizer.vue b/frontend/src/components/BoxResizer.vue index b29a45cf..53a25e99 100644 --- a/frontend/src/components/BoxResizer.vue +++ b/frontend/src/components/BoxResizer.vue @@ -26,7 +26,7 @@
+ @mousedown.stop.prevent="handleBottomCornerResize" />