Skip to content

Commit b55e1ef

Browse files
ramedina86ramedina86
authored
Merge pull request #872 from writer/dev
chore: Merge for release
2 parents 3d6ced6 + 2cc637c commit b55e1ef

37 files changed

Lines changed: 857 additions & 322 deletions

‎package-lock.json‎

Lines changed: 8 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎pyproject.toml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ build-backend = "poetry.core.masonry.api"
44

55
[tool.poetry]
66
name = "writer"
7-
version = "0.8.3rc20"
7+
version = "0.8.3rc21"
88
description = "An open-source, Python framework for building feature-rich apps that are fully integrated with the Writer platform."
99
authors = ["Writer, Inc."]
1010
readme = "README.md"

‎src/ui/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
"dependencies": {
2121
"@apache-arrow/ts": "^15.0.2",
2222
"@floating-ui/vue": "^1.1.5",
23-
"@fontsource-variable/material-symbols-outlined": "^5.0.34",
23+
"@fontsource-variable/material-symbols-outlined": "^5.2.10",
2424
"@fontsource/poppins": "^5.0.14",
2525
"@googlemaps/js-api-loader": "^1.16.6",
2626
"@monaco-editor/loader": "^1.3.3",

‎src/ui/src/builder/BuilderApp.vue‎

Lines changed: 3 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,7 @@
55
:class="{ openPanels: ssbm.openPanels.value.size > 0 }"
66
>
77
<BuilderHeader class="builderHeader"></BuilderHeader>
8-
<div v-if="builderMode !== 'preview'" class="sidebar">
9-
<BuilderSidebar></BuilderSidebar>
10-
</div>
8+
<BuilderSidebar class="sidebar" />
119
<div class="builderMain">
1210
<div class="rendererWrapper">
1311
<ComponentRenderer
@@ -89,6 +87,7 @@ import BuilderHeader from "./BuilderHeader.vue";
8987
import BuilderTooltip from "./BuilderTooltip.vue";
9088
import BuilderAsyncLoader from "./BuilderAsyncLoader.vue";
9189
import BuilderPanelSwitcher from "./panels/BuilderPanelSwitcher.vue";
90+
import BuilderSidebar from "./sidebar/BuilderSidebar.vue";
9291
import { WDS_CSS_PROPERTIES } from "@/wds/tokens";
9392
import { SelectionStatus } from "./builderManager";
9493
import BuilderToasts from "./BuilderToasts.vue";
@@ -99,10 +98,6 @@ const BuilderSettings = defineAsyncComponent({
9998
loader: () => import("./settings/BuilderSettings.vue"),
10099
loadingComponent: BuilderAsyncLoader,
101100
});
102-
const BuilderSidebar = defineAsyncComponent({
103-
loader: () => import("./sidebar/BuilderSidebar.vue"),
104-
loadingComponent: BuilderAsyncLoader,
105-
});
106101
const ComponentRenderer = defineAsyncComponent({
107102
loader: () => import("@/renderer/ComponentRenderer.vue"),
108103
loadingComponent: BuilderAsyncLoader,
@@ -398,11 +393,7 @@ onUnmounted(() => abort.abort());
398393
.mainGrid {
399394
width: 100vw;
400395
height: 100vh;
401-
grid-template-columns:
402-
v-bind(
403-
"ssbm.getMode() !== 'preview' ? 'var(--builderSidebarWidth)' : '0px'"
404-
)
405-
1fr;
396+
grid-template-columns: auto 1fr;
406397
grid-template-rows:
407398
var(--builderTopBarHeight)
408399
1fr

‎src/ui/src/builder/BuilderHeader.vue‎

Lines changed: 25 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,27 @@
11
<template>
22
<div class="BuilderHeader">
3-
<a
4-
v-if="writerDeployUrl"
5-
:href="writerDeployUrl.toString()"
6-
target="_blank"
7-
class="BuilderHeader__goBack"
8-
>
9-
<img src="../assets/logo.svg" alt="Writer Framework logo" />
10-
</a>
11-
<img v-else src="../assets/logo.svg" alt="Writer Framework logo" />
12-
<BuilderSwitcher />
13-
<div class="gap"></div>
14-
<div class="BuilderHeader__toolbar">
15-
<WdsButton
16-
variant="secondary"
17-
size="smallIcon"
18-
data-automation-key="undo"
19-
:data-writer-tooltip="
20-
undoRedoSnapshot.isUndoAvailable
21-
? `Undo: ${undoRedoSnapshot.undoDesc}`
22-
: 'Nothing to undo'
23-
"
24-
:disabled="!undoRedoSnapshot.isUndoAvailable"
25-
data-writer-tooltip-placement="bottom"
26-
@click="undo()"
27-
>
28-
<i class="material-symbols-outlined">undo</i>
29-
</WdsButton>
30-
<WdsButton
31-
variant="secondary"
32-
size="smallIcon"
33-
data-automation-key="redo"
34-
:data-writer-tooltip="
35-
undoRedoSnapshot.isRedoAvailable
36-
? `Redo: ${undoRedoSnapshot.redoDesc}`
37-
: 'Nothing to redo'
38-
"
39-
:disabled="!undoRedoSnapshot.isRedoAvailable"
40-
data-writer-tooltip-placement="bottom"
41-
@click="redo()"
3+
<div>
4+
<a
5+
v-if="writerDeployUrl"
6+
:href="writerDeployUrl.toString()"
7+
target="_blank"
8+
class="BuilderHeader__goBack"
429
>
43-
<i class="material-symbols-outlined">redo</i>
44-
</WdsButton>
10+
<img src="../assets/logo.svg" alt="Writer Framework logo" />
11+
</a>
12+
<img v-else src="../assets/logo.svg" alt="Writer Framework logo" />
13+
</div>
14+
<BuilderSwitcher class="BuilderHeader__switcher" />
15+
<div class="BuilderHeader__toolbar">
16+
<hr />
4517
<WdsButton
4618
variant="secondary"
4719
size="smallIcon"
4820
data-writer-tooltip="State Explorer"
4921
data-writer-tooltip-placement="bottom"
5022
@click="showStateExplorer"
5123
>
52-
<i class="material-symbols-outlined">mystery</i>
24+
<i class="material-symbols-outlined">code</i>
5325
</WdsButton>
5426
<WdsButton
5527
v-if="canDeploy"
@@ -93,7 +65,6 @@
9365
<script setup lang="ts">
9466
import { computed, inject, ref } from "vue";
9567
import BuilderSwitcher from "./BuilderSwitcher.vue";
96-
import { useComponentActions } from "./useComponentActions";
9768
import WdsModal, { ModalAction } from "@/wds/WdsModal.vue";
9869
import injectionKeys from "@/injectionKeys";
9970
import BuilderStateExplorer from "./BuilderStateExplorer.vue";
@@ -103,14 +74,11 @@ import WdsButton from "@/wds/WdsButton.vue";
10374
import { useWriterTracking } from "@/composables/useWriterTracking";
10475
10576
const wf = inject(injectionKeys.core);
106-
const ssbm = inject(injectionKeys.builderManager);
10777
10878
const isStateExplorerShown = ref(false);
10979
11080
const tracking = useWriterTracking(wf);
11181
112-
const { undo, redo, getUndoRedoSnapshot } = useComponentActions(wf, ssbm);
113-
11482
const {
11583
canDeploy,
11684
isDeploying,
@@ -120,8 +88,6 @@ const {
12088
writerDeployUrl,
12189
} = useApplicationCloud(wf);
12290
123-
const undoRedoSnapshot = computed(() => getUndoRedoSnapshot());
124-
12591
const dateFormater = new Intl.DateTimeFormat(undefined, {
12692
weekday: "long",
12793
year: "numeric",
@@ -208,10 +174,11 @@ function showStateExplorer() {
208174
@import "./sharedStyles.css";
209175
210176
.BuilderHeader {
211-
background: var(--builderHeaderBackgroundColor);
177+
background: var(--wdsColorBlack);
212178
color: var(--builderBackgroundColor);
213-
padding: 0 12px 0 16px;
214-
display: flex;
179+
padding: 0 12px 0 10px;
180+
display: grid;
181+
grid-template-columns: 1fr auto 1fr;
215182
align-items: center;
216183
gap: 16px;
217184
padding-top: 1px;
@@ -220,15 +187,21 @@ function showStateExplorer() {
220187
221188
.BuilderHeader__goBack {
222189
text-decoration: none;
223-
display: flex;
190+
display: inline-flex;
224191
align-items: center;
225192
}
226193
227194
.BuilderHeader__toolbar {
228195
display: flex;
229196
align-items: center;
197+
justify-content: flex-end;
230198
gap: 8px;
231199
}
200+
.BuilderHeader__toolbar hr {
201+
border: none;
202+
border-left: 1px solid var(--wdsColorGray6);
203+
height: 26px;
204+
}
232205
233206
.BuilderHeader__toolbar__deployModal__text {
234207
font-size: 14px;
@@ -238,10 +211,6 @@ function showStateExplorer() {
238211
width: 28px;
239212
}
240213
241-
.BuilderHeader .gap {
242-
flex: 1 0 auto;
243-
}
244-
245214
.panelToggler,
246215
.panelToggler:hover {
247216
font-size: 12px;

‎src/ui/src/builder/BuilderModelSelect.vue‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
<script setup lang="ts">
2+
import injectionKeys from "@/injectionKeys";
3+
import {
4+
computed,
5+
defineAsyncComponent,
6+
inject,
7+
onMounted,
8+
PropType,
9+
} from "vue";
10+
import { useListResources } from "@/composables/useListResources";
11+
import type { Option } from "@/wds/WdsSelect.vue";
12+
import BuilderAsyncLoader from "./BuilderAsyncLoader.vue";
13+
import type { WriterModel } from "@/writerTypes";
14+
import WdsTextInput from "@/wds/WdsTextInput.vue";
15+
16+
const WdsSelect = defineAsyncComponent({
17+
loader: () => import("@/wds/WdsSelect.vue"),
18+
loadingComponent: BuilderAsyncLoader,
19+
});
20+
21+
const wf = inject(injectionKeys.core);
22+
23+
defineProps({
24+
enableMultiSelection: { type: Boolean, required: false },
25+
});
26+
27+
const currentValue = defineModel({
28+
type: [String, Array] as PropType<string | string[]>,
29+
required: true,
30+
});
31+
32+
const {
33+
load: loadModels,
34+
data: models,
35+
isLoading,
36+
} = useListResources<WriterModel>(wf, "models");
37+
38+
onMounted(loadModels);
39+
40+
const options = computed(() =>
41+
models.value
42+
.map<Option>((model) => ({
43+
label: model.name,
44+
value: model.id,
45+
}))
46+
.sort((a, b) => a.label.localeCompare(b.label)),
47+
);
48+
49+
const currentValueStr = computed<string>({
50+
get() {
51+
if (currentValue.value === undefined) return "";
52+
53+
return typeof currentValue.value === "string"
54+
? currentValue.value
55+
: currentValue.value.join(",");
56+
},
57+
set(value: string) {
58+
currentValue.value = value.split(",");
59+
},
60+
});
61+
62+
const selectedData = computed(() => {
63+
if (currentValue.value === undefined) return undefined;
64+
65+
return typeof currentValue.value === "string"
66+
? models.value.find((m) => m.id === currentValue.value)
67+
: models.value.filter((m) => currentValue.value.includes(m.id));
68+
});
69+
70+
defineExpose({ selectedData });
71+
</script>
72+
73+
<template>
74+
<div class="BuilderModelSelect--text">
75+
<WdsSelect
76+
v-if="models.length > 0 || isLoading"
77+
v-model="currentValue"
78+
:options="options"
79+
hide-icons
80+
enable-search
81+
:loading="isLoading"
82+
:enable-multi-selection="enableMultiSelection"
83+
/>
84+
<WdsTextInput v-else v-model="currentValueStr" />
85+
</div>
86+
</template>
87+
88+
<style scoped>
89+
.BuilderGraphSelect--text {
90+
width: 100%;
91+
display: flex;
92+
gap: 12px;
93+
align-items: center;
94+
}
95+
</style>

‎src/ui/src/builder/BuilderSwitcher.vue‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@
66
type="button"
77
@click="selectOption('ui')"
88
>
9-
<i class="icon material-symbols-outlined"> brush </i>
10-
UI
9+
<i class="icon material-symbols-outlined">grid_3x3</i>
10+
Interface
1111
</button>
1212
<button
1313
data-automation-action="set-mode-blueprints"
@@ -24,7 +24,7 @@
2424
type="button"
2525
@click="selectOption('preview')"
2626
>
27-
<i class="icon material-symbols-outlined"> preview </i>
27+
<i class="icon material-symbols-outlined">visibility</i>
2828
Preview
2929
</button>
3030
</div>
@@ -75,7 +75,8 @@ const activeId = computed(() => ssbm.getMode());
7575
7676
.BuilderSwitcher {
7777
display: flex;
78-
gap: 0px;
78+
align-items: center;
79+
gap: 8px;
7980
overflow: hidden;
8081
}
8182
@@ -94,12 +95,15 @@ const activeId = computed(() => ssbm.getMode());
9495
height: 32px;
9596
border-radius: 4px;
9697
}
98+
.BuilderSwitcher button:hover {
99+
background: var(--wdsColorGray5);
100+
}
97101
98102
.BuilderSwitcher .icon {
99103
margin-right: 8px;
100104
}
101105
102106
.BuilderSwitcher .active {
103-
background: var(--builderHeaderBackgroundHoleColor);
107+
background: var(--wdsColorGray6);
104108
}
105109
</style>

0 commit comments

Comments
 (0)