Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Hide CoreText in preview if empty value. WF-20 #482

Merged
merged 3 commits into from
Jul 23, 2024
Merged

fix: Hide CoreText in preview if empty value. WF-20 #482

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ba05e50
fix: Hide `CoreText` in preview if empty value. WF-20
madeindjs Jun 29, 2024
5ef475b
feat: implement `BaseEmptiness`
madeindjs Jul 15, 2024
08a0c4b
feat(ui): refactor `ChildlessPlaceholder` and use `BaseEmptiness`. WF-20
madeindjs Jul 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 56 additions & 0 deletions src/ui/src/core_components/base/BaseEmptiness.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
21 changes: 6 additions & 15 deletions src/ui/src/core_components/content/CoreMessage.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.";
Expand Down Expand Up @@ -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);

Expand Down Expand Up @@ -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>
39 changes: 26 additions & 13 deletions src/ui/src/core_components/content/CoreText.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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):
Expand All @@ -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,
Expand Down Expand Up @@ -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";
Expand Down
62 changes: 13 additions & 49 deletions src/ui/src/renderer/ChildlessPlaceholder.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"][],
Expand All @@ -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) {
Expand All @@ -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>
Loading