Skip to content

Commit 4bbd54f

Browse files
surajshetty3416surajshetty3416
committed
fix: Update pagebuilder style
1 parent adaff72 commit 4bbd54f

5 files changed

Lines changed: 29 additions & 15 deletions

File tree

‎frontend/src/components/BlockLayers.vue‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
<template>
22
<div class="ml-2">
33
<div v-for="block in blocks">
4-
<div class="cursor-pointer text-sm px-2 py-1 truncate dark:text-gray-400 rounded-md"
5-
:class="{
6-
'border-blue-200 bg-transparent dark:border-blue-500 border-[1px]': store.hoveredBlock === block.blockId,
7-
'bg-none': !store.hoveredBlock === block.blockId,
8-
'border-blue-400 bg-transparent dark:border-blue-200 border-[1px]': store.builderState.selectedBlock === block
4+
<div class="cursor-pointer text-sm px-2 py-1 truncate dark:text-gray-400 rounded-md border-[1px]"
5+
:class="{
6+
'border-transparent': store.builderState.selectedBlock !== block && store.hoveredBlock !== block.blockId,
7+
'border-blue-200 bg-transparent dark:border-blue-800': store.hoveredBlock === block.blockId,
8+
'border-blue-400 bg-transparent dark:border-blue-600': store.builderState.selectedBlock === block,
99
}"
1010
@click.stop="selectBlock($event, block)"
1111
@mouseover.stop="store.hoveredBlock = block.blockId"

‎frontend/src/components/BuilderSidebar.vue‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,23 +5,23 @@
55
<PanelResizer :width="store.builderLayout.leftPanelWidth" side="right"
66
@resize="width => store.builderLayout.leftPanelWidth = width">
77
</PanelResizer>
8-
<div class="flex w-full rounded-md bg-gray-200 dark:bg-gray-700 p-[2px] text-sm mb-4">
8+
<div class="flex w-full rounded-md bg-gray-200 dark:bg-zinc-700 p-[2px] text-sm mb-4">
99
<button
1010
class="rounded-md px-3 py-[3px] flex-1"
1111
@click="currentView = 'Pages'"
12-
:class="{ 'bg-white dark:bg-gray-800 dark:text-gray-200 shadow-md': currentView === 'Pages', 'text-gray-700 dark:text-gray-400': currentView !== 'Pages' }">
12+
:class="{ 'bg-white dark:bg-zinc-800 dark:text-gray-200 shadow-md': currentView === 'Pages', 'text-gray-700 dark:text-gray-400': currentView !== 'Pages' }">
1313
Pages
1414
</button>
1515
<button
1616
class="ml-1 rounded-md px-3 py-[3px] flex-1"
1717
@click="currentView = 'Components'"
18-
:class="{ 'bg-white dark:bg-gray-800 dark:text-gray-200 shadow-md': currentView === 'Components', 'text-gray-700 dark:text-gray-400': currentView !== 'Components'}">
18+
:class="{ 'bg-white dark:bg-zinc-800 dark:text-gray-200 shadow-md': currentView === 'Components', 'text-gray-700 dark:text-gray-400': currentView !== 'Components'}">
1919
Components
2020
</button>
2121
<button
2222
class="ml-1 rounded-md px-3 py-[3px] flex-1"
2323
@click="currentView = 'Layers'"
24-
:class="{ 'bg-white dark:bg-gray-800 dark:text-gray-200 shadow-md': currentView === 'Layers', 'text-gray-700 dark:text-gray-400': currentView !== 'Layers'}">
24+
:class="{ 'bg-white dark:bg-zinc-800 dark:text-gray-200 shadow-md': currentView === 'Layers', 'text-gray-700 dark:text-gray-400': currentView !== 'Layers'}">
2525
Layers
2626
</button>
2727
</div>
@@ -35,7 +35,7 @@
3535
<div v-for="(page, i) in store.pages">
3636
<ul>
3737
<li class="mb-1 flex items-center rounded-md pl-2 cursor-pointer"
38-
:class="{ 'bg-gray-200 dark:bg-gray-700': store.builderState.selectedPage === page.name }"
38+
:class="{ 'bg-gray-200 dark:bg-zinc-800': store.builderState.selectedPage === page.name }"
3939
@click="setPage(page)">
4040
<FeatherIcon name="globe" class="w-3 h-3 text-gray-600 dark:text-gray-200"></FeatherIcon>
4141
<a class="p-1 px-2 text-base flex dark:text-gray-200">

‎frontend/src/components/BuilderToolbar.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<div class="toolbar bg-white p-2 flex justify-center h-14 shadow-sm" ref="toolbar">
33
<input type="text" v-model="store.pageName"
4-
class="border-none rounded m-1 absolute left-4 h-8 bg-gray-100 dark:bg-gray-800 text-base focus:ring-gray-400 dark:focus:ring-gray-700 dark:text-gray-300"
4+
class="border-none rounded mt-[5px] absolute left-4 h-7 bg-gray-100 dark:bg-zinc-800 text-base focus:ring-gray-400 dark:focus:ring-zinc-700 dark:text-gray-300"
55
placeholder="Page Name">
66
<div class="breakpoint-options">
77
<Button v-for="(option, deviceName) in store.deviceBreakpoints"
@@ -16,7 +16,7 @@
1616
<FeatherIcon :name="option.icon" class="h-5 w-5 text-gray-800 dark:text-gray-400"></FeatherIcon>
1717
</Button>
1818
</div>
19-
<Button appearance="primary" @click="publish" class="m-1 absolute right-2 text-xs rounded-2xl dark:border-0">
19+
<Button appearance="primary" @click="publish" class="mt-[5px] absolute right-3 text-xs rounded-2xl border-0">
2020
Preview
2121
</Button>
2222
</div>

‎frontend/src/pages/PageBuilder.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,13 @@
33
<BuilderToolbar class="relative z-30 dark:bg-zinc-900 dark:border-b-[1px] dark:border-gray-800"></BuilderToolbar>
44
<div>
55
<BuilderSidebar
6-
class="fixed left-0 top-[var(--toolbar-height)] bottom-0 z-20 overflow-auto border-r-[1px] bg-white p-4 dark:bg-zinc-900 dark:border-gray-800">
6+
class="fixed left-0 top-[var(--toolbar-height)] bottom-0 z-20 overflow-auto border-r-[1px] bg-white p-4 dark:bg-zinc-900 dark:border-gray-800 no-scrollbar">
77
</BuilderSidebar>
88
<BuilderCanvas
99
class="canvas-container absolute top-[var(--toolbar-height)] bottom-0 flex justify-center overflow-hidden bg-gray-200 p-10 dark:bg-zinc-800">
1010
</BuilderCanvas>
1111
<BlockPropertiesEditor
12-
class="fixed right-0 top-[var(--toolbar-height)] bottom-0 z-20 overflow-auto border-l-[1px] bg-white p-4 pr-2 dark:bg-zinc-900 dark:border-gray-800">
12+
class="fixed right-0 top-[var(--toolbar-height)] bottom-0 z-20 overflow-auto border-l-[1px] bg-white p-4 pr-2 dark:bg-zinc-900 dark:border-gray-800 no-scrollbar">
1313
</BlockPropertiesEditor>
1414
</div>
1515
</div>

‎frontend/tailwind.config.js‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
const plugin = require('tailwindcss/plugin')
2+
13
module.exports = {
24
presets: [require("frappe-ui/src/utils/tailwind.config")],
35
content: [
@@ -13,5 +15,17 @@ module.exports = {
1315
},
1416
},
1517
},
16-
plugins: [],
18+
plugins: [
19+
plugin(function({ addUtilities }) {
20+
addUtilities({
21+
".no-scrollbar::-webkit-scrollbar" : {
22+
"display": "none"
23+
},
24+
".no-scrollbar": {
25+
"-ms-overflow-style": "none",
26+
"scrollbar-width": "none"
27+
},
28+
})
29+
})
30+
],
1731
};

0 commit comments

Comments
 (0)