Merge pull request writer#482 from madeindjs/WF-20

fix: Hide `CoreText` in preview if empty value. WF-20
ZBMO · Jul 23, 2024 · bd6f95d · bd6f95d
2 parents dba74df + 08a0c4b
commit bd6f95d
Show file tree

Hide file tree

Showing 4 changed files with 101 additions and 77 deletions.
diff --git a/src/ui/src/core_components/base/BaseEmptiness.vue b/src/ui/src/core_components/base/BaseEmptiness.vue
@@ -0,0 +1,56 @@
+<template>
+	<div class="BaseEmptiness">
+		<div class="content">
+			<div class="title">
+				<h3>Empty {{ definition.name }}</h3>
+			</div>
+			<div v-if="message" class="message">
+				{{ message }}
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { computed, inject } from "vue";
+import injectionKeys from "../../injectionKeys";
+
+const props = defineProps({
+	componentId: { type: String, required: true },
+	message: { type: String, required: false, default: undefined },
+});
+
+const wf = inject(injectionKeys.core);
+const component = computed(() => wf.getComponentById(props.componentId));
+const definition = computed(() =>
+	wf.getComponentDefinition(component.value.type),
+);
+</script>
+
+<style scoped>
+@import "../../renderer/sharedStyles.css";
+
+.BaseEmptiness {
+	background: #e4e7ed;
+	color: #4f4f4f;
+	padding: 16px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 100%;
+	min-height: 100%;
+}
+
+.content {
+	text-align: center;
+}
+
+.title > h3 {
+	color: #4f4f4f;
+}
+
+.message {
+	opacity: 0.5;
+	margin-top: 8px;
+}
+</style>
diff --git a/src/ui/src/core_components/content/CoreMessage.vue b/src/ui/src/core_components/content/CoreMessage.vue
@@ -24,16 +24,13 @@ else:
 			</LoadingSymbol>
 			<span>{{ messageWithoutPrefix }}</span>
 		</div>
-		<div v-else class="empty">
-			<h3>Blank message</h3>
-		</div>
+		<BaseEmptiness v-else :component-id="componentId" />
 	</div>
 </template>
 
 <script lang="ts">
-import LoadingSymbol from "../../renderer/LoadingSymbol.vue";
-import { FieldCategory, FieldType } from "../../writerTypes";
 import { cssClasses, primaryTextColor } from "../../renderer/sharedStyleFields";
+import { FieldCategory, FieldType } from "../../writerTypes";
 
 const description =
 	"A component that displays a message in various styles, including success, error, warning, and informational.";
@@ -86,10 +83,14 @@ export default {
 	},
 };
 </script>
+
 <script setup lang="ts">
 import { computed, inject } from "vue";
 import injectionKeys from "../../injectionKeys";
+import LoadingSymbol from "../../renderer/LoadingSymbol.vue";
+import BaseEmptiness from "../base/BaseEmptiness.vue";
 
+const componentId = inject(injectionKeys.componentId);
 const fields = inject(injectionKeys.evaluatedFields);
 const isBeingEdited = inject(injectionKeys.isBeingEdited);
 
@@ -157,14 +158,4 @@ const rootStyle = computed(() => {
 .loadingSymbol {
 	margin: -8px 0 -8px 0;
 }
-
-.empty {
-	padding: 16px;
-	background-color: #e4e7ed;
-}
-
-.empty > h3 {
-	text-align: center;
-	color: var(--primaryTextColor);
-}
 </style>
diff --git a/src/ui/src/core_components/content/CoreText.vue b/src/ui/src/core_components/content/CoreText.vue
@@ -1,22 +1,30 @@
 <template>
-	<div ref="rootEl" class="CoreText" :style="rootStyle" @click="handleClick">
-		<BaseMarkdown
-			v-if="fields.useMarkdown.value == 'yes'"
-			:raw-text="fields.text.value"
-			:style="contentStyle"
-		>
-		</BaseMarkdown>
-		<div v-else class="plainText" :style="contentStyle">
-			{{ fields.text.value }}
-		</div>
+	<div
+		v-if="shouldDisplay"
+		ref="rootEl"
+		class="CoreText"
+		:style="rootStyle"
+		@click="handleClick"
+	>
+		<BaseEmptiness v-if="isEmpty" :component-id="componentId" />
+		<template v-else>
+			<BaseMarkdown
+				v-if="fields.useMarkdown.value == 'yes'"
+				:raw-text="fields.text.value"
+				:style="contentStyle"
+			>
+			</BaseMarkdown>
+			<div v-else class="plainText" :style="contentStyle">
+				{{ fields.text.value }}
+			</div>
+		</template>
 	</div>
 </template>
 
 <script lang="ts">
-import { FieldCategory, FieldControl, FieldType } from "../../writerTypes";
 import { cssClasses, primaryTextColor } from "../../renderer/sharedStyleFields";
 import { getClick } from "../../renderer/syntheticEvents";
-import BaseMarkdown from "../base/BaseMarkdown.vue";
+import { FieldCategory, FieldControl, FieldType } from "../../writerTypes";
 
 const clickHandlerStub = `
 def click_handler(state):
@@ -36,7 +44,6 @@ export default {
 		fields: {
 			text: {
 				name: "Text",
-				default: "(No text)",
 				init: "Text",
 				desc: "Add text directly, or reference state elements with @{my_text}.",
 				type: FieldType.Text,
@@ -79,12 +86,18 @@ export default {
 <script setup lang="ts">
 import { Ref, computed, inject, ref } from "vue";
 import injectionKeys from "../../injectionKeys";
+import BaseEmptiness from "../base/BaseEmptiness.vue";
+import BaseMarkdown from "../base/BaseMarkdown.vue";
 
 const rootEl: Ref<HTMLElement> = ref(null);
 const fields = inject(injectionKeys.evaluatedFields);
 const componentId = inject(injectionKeys.componentId);
 const wf = inject(injectionKeys.core);
 
+const isBeingEdited = inject(injectionKeys.isBeingEdited);
+const isEmpty = computed(() => !fields.text.value);
+const shouldDisplay = computed(() => !isEmpty.value || isBeingEdited.value);
+
 const rootStyle = computed(() => {
 	const component = wf.getComponentById(componentId);
 	const isClickHandled = typeof component.handlers?.["click"] !== "undefined";

diff --git a/src/ui/src/renderer/ChildlessPlaceholder.vue b/src/ui/src/renderer/ChildlessPlaceholder.vue
@@ -1,32 +1,23 @@
 <template>
-	<div class="ChildlessPlaceholder">
-		<div class="content">
-			<div class="title">
-				<h3>Empty {{ definition.name }}</h3>
-			</div>
-			<div v-if="message" class="message">
-				{{ message }}
-			</div>
-		</div>
-	</div>
+	<BaseEmptiness
+		class="ChildlessPlaceholder"
+		:component-id="componentId"
+		:message="message"
+	/>
 </template>
+
 <script setup lang="ts">
-import { computed, inject, toRefs } from "vue";
-import { Component } from "../writerTypes";
+import { computed, inject } from "vue";
+import BaseEmptiness from "../core_components/base/BaseEmptiness.vue";
 import injectionKeys from "../injectionKeys";
+import { Component } from "../writerTypes";
 
 const ALLOWED_LIST_MAX_LENGTH = 10;
 const wf = inject(injectionKeys.core);
 
-interface Props {
-	componentId: Component["id"];
-}
-const props = defineProps<Props>();
-const { componentId } = toRefs(props);
-const component = computed(() => wf.getComponentById(componentId.value));
-const definition = computed(() =>
-	wf.getComponentDefinition(component.value.type),
-);
+const props = defineProps({
+	componentId: { type: String, required: true },
+});
 
 const typesToMessage = (
 	types: Component["type"][],
@@ -41,7 +32,7 @@ const typesToMessage = (
 };
 
 const message = computed(() => {
-	const containableTypes = wf.getContainableTypes(componentId.value);
+	const containableTypes = wf.getContainableTypes(props.componentId);
 	let message: string;
 
 	if (containableTypes.length <= ALLOWED_LIST_MAX_LENGTH) {
@@ -52,30 +43,3 @@ const message = computed(() => {
 	return message;
 });
 </script>
-<style scoped>
-@import "./sharedStyles.css";
-
-.ChildlessPlaceholder {
-	background: #e4e7ed;
-	color: #4f4f4f;
-	padding: 16px;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	width: 100%;
-	min-height: 100%;
-}
-
-.content {
-	text-align: center;
-}
-
-.title > h3 {
-	color: #4f4f4f;
-}
-
-.message {
-	opacity: 0.5;
-	margin-top: 8px;
-}
-</style>