Skip to content

Commit 23b2139

Browse files
qaiswardagqaiswardag
committed
Refactor element editing functionality by creating ElementEditor component and integrating it into RightSidebarEditor
1 parent dfbaa5b commit 23b2139

File tree

4 files changed

+65
-29
lines changed

4 files changed

+65
-29
lines changed

‎resources/js/Components/PageBuilder/EditorMenu/Editables/EditGetElement.vue

Lines changed: 0 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -360,34 +360,6 @@ const handleModalIframeSrc = function () {
360360
<BackgroundColorEditor></BackgroundColorEditor>
361361
</div>
362362
</template>
363-
364-
<!-- delete & restore element # start -->
365-
<template v-if="getRestoredElement">
366-
<div class="px-2 flex items-center justify-start gap-2">
367-
<button
368-
@click="pageBuilder.handleRestoreElement"
369-
type="button"
370-
class="text-[12.5px] gap-2 text-nowrap pl-2 pr-3 w-full h-10 cursor-pointer rounded-full flex items-center border-none justify-center bg-gray-50 hover:bg-myPrimaryLinkColor hover:text-white focus-visible:ring-0"
371-
>
372-
<span class="material-symbols-outlined"> undo </span>
373-
<span>Undo</span>
374-
</button>
375-
</div>
376-
</template>
377-
378-
<template v-if="getElement && !getRestoredElement">
379-
<div class="px-2 flex items-center justify-start gap-2">
380-
<button
381-
@click="pageBuilder.handleDeleteElement"
382-
type="button"
383-
class="text-[12.5px] gap-2 text-nowrap pl-2 pr-3 w-full h-10 cursor-pointer rounded-full flex items-center border-none justify-center bg-gray-50 hover:text-white focus-visible:ring-0 hover:bg-myPrimaryErrorColor"
384-
>
385-
<span class="material-symbols-outlined"> delete </span>
386-
<span class="hover:text-white">Delete</span>
387-
</button>
388-
</div>
389-
</template>
390-
<!-- delete & restore element # end -->
391363
</div>
392364
</div>
393365
</template>

‎resources/js/Components/PageBuilder/EditorMenu/Editables/ElementEditor.vue

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<script setup>
2+
import { useStore } from "vuex";
3+
import { computed, ref } from "vue";
4+
import PageBuilder from "@/composables/PageBuilder";
5+
const store = useStore();
6+
const pageBuilder = new PageBuilder(store);
7+
import EditorAccordion from "@/Components/PageBuilder/EditorMenu/EditorAccordion.vue";
8+
9+
const getElement = computed(() => {
10+
return store.getters["pageBuilderState/getElement"];
11+
});
12+
13+
const getRestoredElement = computed(() => {
14+
return store.getters["pageBuilderState/getRestoredElement"];
15+
});
16+
</script>
17+
18+
<template>
19+
<EditorAccordion>
20+
<template #title>Element Editor</template>
21+
<template #content>
22+
<div class="flex flex-row flex-wrap gap-2 mt-2"></div>
23+
<div>
24+
<!-- delete & restore element # start -->
25+
<template v-if="getRestoredElement">
26+
<div class="px-2 flex items-center justify-start gap-2">
27+
<button
28+
@click="pageBuilder.handleRestoreElement"
29+
type="button"
30+
class="text-[12.5px] gap-2 text-nowrap pl-2 pr-3 w-full h-10 cursor-pointer rounded-full flex items-center border-none justify-center bg-gray-50 hover:bg-myPrimaryLinkColor hover:text-white focus-visible:ring-0"
31+
>
32+
<span class="material-symbols-outlined">
33+
undo
34+
</span>
35+
<span>Undo</span>
36+
</button>
37+
</div>
38+
</template>
39+
40+
<template v-if="getElement && !getRestoredElement">
41+
<div class="px-2 flex items-center justify-start gap-2">
42+
<button
43+
@click="pageBuilder.handleDeleteElement"
44+
type="button"
45+
class="text-[12.5px] gap-2 text-nowrap pl-2 pr-3 w-full h-10 cursor-pointer rounded-full flex items-center border-none justify-center bg-gray-50 hover:text-white focus-visible:ring-0 hover:bg-myPrimaryErrorColor"
46+
>
47+
<span class="material-symbols-outlined">
48+
delete
49+
</span>
50+
<span class="hover:text-white">Delete element</span>
51+
</button>
52+
</div>
53+
</template>
54+
<!-- delete & restore element # end -->
55+
</div>
56+
</template>
57+
</EditorAccordion>
58+
</template>

‎resources/js/Components/PageBuilder/EditorMenu/RightSidebarEditor.vue

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { computed, ref, watch } from "vue";
44
import { useStore } from "vuex";
55
66
import ClassEditor from "@/Components/PageBuilder/EditorMenu/Editables/ClassEditor.vue";
7+
import ElementEditor from "@/Components/PageBuilder/EditorMenu/Editables/ElementEditor.vue";
78
import ImageEditor from "@/Components/PageBuilder/EditorMenu/Editables/ImageEditor.vue";
89
import OpacityEditor from "@/Components/PageBuilder/EditorMenu/Editables/OpacityEditor.vue";
910
import Typography from "@/Components/PageBuilder/EditorMenu/Editables/Typography.vue";
@@ -126,6 +127,11 @@ const isHeadingElement = computed(() => {
126127
</article>
127128
</div>
128129
130+
<div>
131+
<article>
132+
<ElementEditor></ElementEditor>
133+
</article>
134+
</div>
129135
<article class="min-h-[12em]"></article>
130136
</div>
131137
</div>

‎resources/js/Components/TipTap/TipTapInput.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -223,7 +223,7 @@ onMounted(() => {
223223
<div
224224
class="flex justify-between myPrimaryGap items-center divide-x divide-gray-200 py-4 px-4 overflow-x-auto border-b border-gray-20"
225225
>
226-
<div class="flex items-center 0">
226+
<div class="flex items-center 0 divide-x divide-gray-200">
227227
<div class="px-2 flex items-center justify-start gap-2">
228228
<button
229229
@click="

0 commit comments

Comments
 (0)