Skip to content

Commit d73b3ca

Browse files
AldemyllaAldemylla
committed
refactor: replace deprecated UnnnicModal with UnnnicDialog in TemplateGallery.vue
1 parent 9825807 commit d73b3ca

File tree

2 files changed

+118
-110
lines changed

2 files changed

+118
-110
lines changed

‎src/views/projects/templates/setup.vue‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -272,6 +272,8 @@ export default {
272272
273273
<style lang="scss" scoped>
274274
.setup {
275+
padding: $unnnic-space-6;
276+
275277
display: flex;
276278
gap: $unnnic-spacing-inline-lg;
277279

‎src/views/register/forms/TemplateGallery.vue‎

Lines changed: 116 additions & 110 deletions
Original file line numberDiff line numberDiff line change
@@ -77,114 +77,132 @@
7777
@update:model-value="$emit('update:projectDescription', $event)"
7878
/>
7979

80-
<UnnnicModal
81-
v-if="templateDetails"
82-
class="template-details"
83-
:text="templateDetails.name"
80+
<UnnnicDialog
81+
:open="templateDetails"
8482
@close="templateDetails = null"
8583
>
86-
<div class="template-details__container">
87-
<div class="template-details__aside">
88-
<div class="template-details__description">
89-
{{ templateDetails.description }}
90-
</div>
91-
92-
<div class="categories">
93-
<UnnnicTag
94-
v-for="category in templateDetails.category"
95-
:key="category"
96-
:text="category"
97-
:class="[
98-
'category',
99-
'category--selected',
100-
`category--${clearString(categoriesMap[category] || '')}`,
101-
]"
102-
disabled
103-
></UnnnicTag>
104-
</div>
84+
<UnnnicDialogContent
85+
v-if="templateDetails"
86+
class="template-details"
87+
size="large"
88+
>
89+
<UnnnicDialogHeader>
90+
<UnnnicDialogTitle>
91+
{{ templateDetails.name }}
92+
</UnnnicDialogTitle>
93+
</UnnnicDialogHeader>
94+
95+
<div class="template-details__container">
96+
<div class="template-details__aside">
97+
<div class="template-details__description">
98+
{{ templateDetails.description }}
99+
</div>
105100

106-
<div class="template-details__features">
107-
<div
108-
v-for="feature in templateDetails.features.slice(0, 4)"
109-
:key="feature.id"
110-
class="template-details__features__feature"
111-
>
112-
<UnnnicIcon
113-
icon="check_circle"
114-
size="sm"
115-
scheme="aux-green-500"
116-
/>
101+
<div class="categories">
102+
<UnnnicTag
103+
v-for="category in templateDetails.category"
104+
:key="category"
105+
:text="category"
106+
:class="[
107+
'category',
108+
'category--selected',
109+
`category--${clearString(categoriesMap[category] || '')}`,
110+
]"
111+
disabled
112+
></UnnnicTag>
113+
</div>
117114

118-
{{
119-
$t(
120-
'projects.create.format.' +
121-
{
122-
Flows: 'flow_of',
123-
Integrations: 'integration_of',
124-
Intelligences: 'intelligence_of',
125-
}[feature.type],
126-
{ name: feature.name },
127-
)
128-
}}
115+
<div class="template-details__features">
116+
<div
117+
v-for="feature in templateDetails.features.slice(0, 4)"
118+
:key="feature.id"
119+
class="template-details__features__feature"
120+
>
121+
<UnnnicIcon
122+
icon="check_circle"
123+
size="sm"
124+
scheme="fg-success"
125+
/>
126+
127+
{{
128+
$t(
129+
'projects.create.format.' +
130+
{
131+
Flows: 'flow_of',
132+
Integrations: 'integration_of',
133+
Intelligences: 'intelligence_of',
134+
}[feature.type],
135+
{ name: feature.name },
136+
)
137+
}}
138+
</div>
139+
140+
<div v-if="templateDetails.features.length - 4 > 0">
141+
+{{ templateDetails.features.length - 4 }}
142+
{{ $t('template_gallery.templates.other_features') }}
143+
</div>
129144
</div>
130145

131-
<div v-if="templateDetails.features.length - 4 > 0">
132-
+{{ templateDetails.features.length - 4 }}
133-
{{ $t('template_gallery.templates.other_features') }}
146+
<div class="template-details__aside__footer">
147+
<InfoBox
148+
v-if="templateDetailsSetupWarning"
149+
:description="templateDetailsSetupWarning"
150+
/>
151+
152+
<UnnnicButton
153+
class="template-details__aside__footer__button"
154+
@click.prevent="
155+
templateDetailsSetupFields
156+
? (templateSettings = templateDetails)
157+
: (selectedTemplate = templateDetails.uuid);
158+
templateDetails = null;
159+
"
160+
>
161+
{{ $t('template_gallery.templates.button_use_template') }}
162+
</UnnnicButton>
134163
</div>
135164
</div>
136165

137-
<div class="template-details__aside__footer">
138-
<InfoBox
139-
v-if="templateDetailsSetupWarning"
140-
:description="templateDetailsSetupWarning"
141-
/>
142-
143-
<UnnnicButton
144-
class="template-details__aside__footer__button"
145-
@click.prevent="
146-
templateDetailsSetupFields
147-
? (templateSettings = templateDetails)
148-
: (selectedTemplate = templateDetails.uuid);
149-
templateDetails = null;
150-
"
151-
>
152-
{{ $t('template_gallery.templates.button_use_template') }}
153-
</UnnnicButton>
154-
</div>
166+
<img
167+
v-if="templateDetailsSetupPreview"
168+
class="template-details__preview"
169+
:src="templateDetailsSetupPreview"
170+
/>
155171
</div>
172+
</UnnnicDialogContent>
173+
</UnnnicDialog>
156174

157-
<img
158-
v-if="templateDetailsSetupPreview"
159-
class="template-details__preview"
160-
:src="templateDetailsSetupPreview"
161-
/>
162-
</div>
163-
</UnnnicModal>
164-
165-
<UnnnicModal
166-
v-if="templateSettings"
167-
:text="$t('template_gallery.templates.setup_template_title')"
168-
class="template-settings"
169-
@close="templateSettings = null"
175+
<UnnnicDialog
176+
:open="templateSettings"
177+
@update:open="templateSettings = null"
170178
>
171-
<div class="template-settings__container">
172-
<TemplateSetup
173-
form
174-
:template="templateSettings"
175-
@submit="setGlobals"
176-
/>
177-
178-
<template v-if="templateSettingsSetupObservation">
179-
<hr class="template-settings__separator" />
180-
181-
<div
182-
class="template-settings__observation"
183-
v-html="templateSettingsSetupObservation"
184-
></div>
185-
</template>
186-
</div>
187-
</UnnnicModal>
179+
<UnnnicDialogContent
180+
v-if="templateSettings"
181+
class="template-settings"
182+
size="large"
183+
>
184+
<UnnnicDialogHeader>
185+
<UnnnicDialogTitle>
186+
{{ $t('template_gallery.templates.setup_template_title') }}
187+
</UnnnicDialogTitle>
188+
</UnnnicDialogHeader>
189+
190+
<div class="template-settings__container">
191+
<TemplateSetup
192+
form
193+
:template="templateSettings"
194+
@submit="setGlobals"
195+
/>
196+
197+
<UnnnicDialogFooter v-if="templateSettingsSetupObservation">
198+
<div
199+
class="template-settings__observation"
200+
v-html="templateSettingsSetupObservation"
201+
></div>
202+
</UnnnicDialogFooter>
203+
</div>
204+
</UnnnicDialogContent>
205+
</UnnnicDialog>
188206
</template>
189207

190208
<template #tab-head-blank>
@@ -553,14 +571,9 @@ export default {
553571
}
554572
555573
.template-details {
556-
@media screen and (min-width: 601px) {
557-
:deep(.unnnic-modal-container-background) {
558-
width: 90%;
559-
max-width: 51.25rem;
560-
}
561-
}
562-
563574
&__container {
575+
padding: $unnnic-space-6;
576+
564577
display: flex;
565578
column-gap: $unnnic-spacing-sm;
566579
text-align: left;
@@ -619,13 +632,6 @@ export default {
619632
margin-top: $unnnic-spacing-md;
620633
}
621634
622-
&__separator {
623-
all: unset;
624-
display: block;
625-
border-top: $unnnic-border-width-thinner solid $unnnic-color-neutral-soft;
626-
margin: $unnnic-spacing-md 0;
627-
}
628-
629635
&__observation {
630636
padding: $unnnic-spacing-xs $unnnic-spacing-ant;
631637
border-radius: $unnnic-border-radius-md;

0 commit comments

Comments
 (0)