+
+
+
+
-
@@ -83,17 +96,24 @@ const props = defineProps<{
contentsTeleportEl: HTMLElement;
scrollable: boolean;
keyboardShortcutKey: string;
+ enableLeftPanel?: boolean;
}>();
+const emits = defineEmits({
+ openned: (open: boolean) => typeof open === "boolean",
+});
+
const collapsed = computed(() => !wfbm.openPanels.value.has(props.panelId));
const order = computed(() => panelIds.indexOf(props.panelId));
function togglePanel(panelId: typeof props.panelId) {
if (wfbm.openPanels.value.has(panelId)) {
wfbm.openPanels.value.delete(panelId);
+ emits("openned", false);
return;
}
wfbm.openPanels.value.add(panelId);
+ emits("openned", true);
}
function handleKeydown(ev: KeyboardEvent) {
@@ -145,26 +165,42 @@ onUnmounted(() => {
background: var(--builderBackgroundColor);
}
-.title {
+.BuilderPanel__title {
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: 140%;
}
-.titleCompanion {
+.BuilderPanel__titleCompanion {
margin-left: 8px;
}
-.contents {
+.BuilderPanel__contents {
display: grid;
height: 100%;
- grid-template-rows: 36px 1fr;
+ grid-template-rows: 56px 1fr;
grid-template-columns: 1fr;
overflow: hidden;
}
-.actions {
+.BuilderPanel__contents--leftPanel {
+ grid-template-columns: auto 1fr;
+}
+
+.BuilderPanel__contents__leftPanel {
+ width: 200px;
+ height: 100%;
+ grid-row: 1 / 3;
+ border-right: 1px solid var(--builderSeparatorColor);
+}
+
+.BuilderPanel__actions,
+.BuilderPanel__actionsCompanion {
+ width: 100%;
+}
+
+.BuilderPanel__actions {
display: flex;
justify-content: right;
align-items: center;
@@ -173,7 +209,7 @@ onUnmounted(() => {
border-bottom: 1px solid var(--builderSeparatorColor);
}
-.mainContents {
+.BuilderPanel__mainContents {
overflow-x: hidden;
overflow-y: auto;
}
diff --git a/src/ui/src/builder/panels/BuilderPanelSwitcher.vue b/src/ui/src/builder/panels/BuilderPanelSwitcher.vue
index 25e7b9a1a..0d19e2459 100644
--- a/src/ui/src/builder/panels/BuilderPanelSwitcher.vue
+++ b/src/ui/src/builder/panels/BuilderPanelSwitcher.vue
@@ -43,6 +43,7 @@ const screenEl = ref(null);
background: var(--builderBackgroundColor);
grid-template-rows: 48px;
grid-template-columns: 1fr;
+ z-index: 1; /* makes sure it's on top of `.ComponentRenderer` */
}
.BuilderPanelSwitcher.openPanels {
diff --git a/src/ui/src/builder/settings/BuilderFieldsAlign.vue b/src/ui/src/builder/settings/BuilderFieldsAlign.vue
index 71da71685..4cce84c8b 100644
--- a/src/ui/src/builder/settings/BuilderFieldsAlign.vue
+++ b/src/ui/src/builder/settings/BuilderFieldsAlign.vue
@@ -24,6 +24,7 @@
v-if="mode == 'css'"
ref="freehandInputEl"
:value="component.content[fieldKey]"
+ :error="error"
@input="handleInputCss"
/>
@@ -38,6 +39,7 @@ import {
nextTick,
onBeforeUnmount,
onMounted,
+ PropType,
Ref,
ref,
toRefs,
@@ -135,11 +137,15 @@ const focusEls: Record