Skip to content

Commit

Permalink
fix(ui): better css with in editor doc for dashboard
Browse files Browse the repository at this point in the history 
close #6999
  • Loading branch information
@Skraye
Skraye committed Jan 28, 2025
1 parent dc13e91 commit 49d64b7
Showing 1 changed file with 123 additions and 106 deletions.
229 changes: 123 additions & 106 deletions ui/src/components/dashboard/components/DashboardEditor.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,117 +42,115 @@
{{ $t("save") }}
</el-button>
</div>
<el-row>
<el-col :span="24">
<section class="row h-100">
<div class="w-100" v-if="currentView === views.DASHBOARD">
<el-row class="custom">
<el-col
v-for="chart in charts"
:key="JSON.stringify(chart)"
:xs="24"
:sm="12"
>
<div
v-if="chart.data"
class="p-4 d-flex flex-column"
>
<p class="m-0 fs-6 fw-bold">
{{ chart.data.chartOptions?.displayName ?? chart.id }}
</p>
<p
v-if="chart.chartOptions?.description"
class="m-0 fw-light"
>
<small>{{ chart.data.chartOptions.description }}</small>
</p>

<div class="mt-4 flex-grow-1">
<component
:is="types[chart.data.type]"
:source="chart.data.content"
:chart="chart.data"
:identifier="chart.data.id"
is-preview
/>
</div>
</div>
<div v-else class="d-flex justify-content-center align-items-center text-container">
<el-tooltip :content="chart.error">
{{ chart.error }}
</el-tooltip>
</div>
</el-col>
</el-row>
</div>
<div class="w-100" v-if="currentView === views.DASHBOARD">
<el-row class="custom">
<el-col
v-for="chart in charts"
:key="JSON.stringify(chart)"
:xs="24"
:sm="12"
>
<div
id="editorWrapper"
class="editor-combined"
style="flex: 1;"
v-else
v-if="chart.data"
class="p-4 d-flex flex-column"
>
<editor
@save="(allowSaveUnchanged || source !== initialSource) ? $emit('save', $event) : undefined"
v-model="source"
schema-type="dashboard"
lang="yaml"
@update:model-value="source = $event"
@cursor="updatePluginDocumentation"
:creating="true"
:read-only="false"
:navbar="false"
/>
<p class="m-0 fs-6 fw-bold">
{{ chart.data.chartOptions?.displayName ?? chart.id }}
</p>
<p
v-if="chart.chartOptions?.description"
class="m-0 fw-light"
>
<small>{{ chart.data.chartOptions.description }}</small>
</p>

<div class="mt-4 flex-grow-1">
<component
:is="types[chart.data.type]"
:source="chart.data.content"
:chart="chart.data"
:identifier="chart.data.id"
is-preview
/>
</div>
</div>
<div v-if="displaySide" class="slider" @mousedown.prevent.stop="dragEditor" />
<div
v-if="displaySide"
:class="{'d-flex': 'true'}"
:style="`flex: 0 0 calc(${100 - editorWidth}% - 11px)`"
>
<PluginDocumentation
v-if="currentView === views.DOC"
class="plugin-doc combined-right-view enhance-readability"
:override-intro="intro"
/>
<div class="d-flex justify-content-center align-items-center w-100 p-5" v-else-if="currentView === views.CHART">
<div v-if="selectedChart" class="w-100">
<p class="fs-6 fw-bold">
{{ selectedChart.chartOptions?.displayName ?? selectedChart.id }}
</p>
<p
v-if="selectedChart.chartOptions?.description"
>
<small>{{ selectedChart.chartOptions.description }}</small>
</p>

<div class="w-100">
<component
:key="selectedChart.id"
:is="types[selectedChart.type]"
:source="selectedChart.content"
:chart="selectedChart"
:identifier="selectedChart.id"
is-preview
/>
</div>
</div>
<div v-else-if="chartError" class="text-container">
<span>{{ chartError }}</span>
</div>
<div v-else>
<el-empty :image="EmptyVisualDashboard" :image-size="200">
<template #description>
<h5>
{{ $t('dashboard.click_chart_preview') }}
</h5>
</template>
</el-empty>
</div>
<div v-else class="d-flex justify-content-center align-items-center text-container">
<el-tooltip :content="chart.error">
{{ chart.error }}
</el-tooltip>
</div>
</el-col>
</el-row>
</div>
<div class="main-editor" v-else>
<div
id="editorWrapper"
class="editor-combined"
style="flex: 1;"
>
<editor
@save="(allowSaveUnchanged || source !== initialSource) ? $emit('save', $event) : undefined"
v-model="source"
schema-type="dashboard"
lang="yaml"
@update:model-value="source = $event"
@cursor="updatePluginDocumentation"
:creating="true"
:read-only="false"
:navbar="false"
/>
</div>
<div v-if="displaySide" class="slider" @mousedown.prevent.stop="dragEditor" />
<div
v-if="displaySide"
:class="{'d-flex': displaySide}"
:style="displaySide ? `flex: 0 0 calc(${100 - editorWidth}% - 11px)` : 'flex: 1 0 0%'"
>
<PluginDocumentation
v-if="currentView === views.DOC"
class="plugin-doc combined-right-view enhance-readability"
:override-intro="intro"
/>
<div
class="d-flex justify-content-center align-items-center w-100 p-5"
v-else-if="currentView === views.CHART"
>
<div v-if="selectedChart" class="w-100">
<p class="fs-6 fw-bold">
{{ selectedChart.chartOptions?.displayName ?? selectedChart.id }}
</p>
<p
v-if="selectedChart.chartOptions?.description"
>
<small>{{ selectedChart.chartOptions.description }}</small>
</p>

<div class="w-100">
<component
:key="selectedChart.id"
:is="types[selectedChart.type]"
:source="selectedChart.content"
:chart="selectedChart"
:identifier="selectedChart.id"
is-preview
/>
</div>
</div>
</section>
</el-col>
</el-row>
<div v-else-if="chartError" class="text-container">
<span>{{ chartError }}</span>
</div>
<div v-else>
<el-empty :image="EmptyVisualDashboard" :image-size="200">
<template #description>
<h5>
{{ $t("dashboard.click_chart_preview") }}
</h5>
</template>
</el-empty>
</div>
</div>
</div>
</div>
</template>
<script setup>
import PluginDocumentation from "../../plugins/PluginDocumentation.vue";
Expand Down Expand Up @@ -334,8 +332,27 @@
</script>
<style scoped lang="scss">
@import "@kestra-io/ui-libs/src/scss/variables";
$spacing: 20px;
.main-editor {
padding: .5rem 0px;
background: var(--ks-background-body);
display: flex;
height: calc(100% - 49px);
min-height: 0;
max-height: 100%;
> * {
flex: 1;
}
html.dark & {
background-color: var(--bs-gray-100);
}
}
.el-empty {
background-color: transparent;
Expand Down

0 comments on commit 49d64b7

Please sign in to comment.