Skip to content

Commit 45bf10f

Browse files
LogendeLogende
authored
843 due to new expandable header in views sometimes content is out of screen in bottom of view (#854)
* make more properties required in settings schema * fix issue of some panel content being out of view * apply formatting changes --------- Co-authored-by: Logende <[email protected]>
1 parent 58bc79d commit 45bf10f

6 files changed

Lines changed: 209 additions & 121 deletions

File tree

‎meta_configurator/src/components/panels/ai-prompts/AiPromptsPanel.vue‎

Lines changed: 45 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -14,33 +14,50 @@ const props = defineProps<{
1414
</script>
1515

1616
<template>
17-
<PanelSettings panel-name="AI Prompts View" :panel-settings-path="['aiIntegration']">
18-
<p>
19-
This panel allows you to manage AI prompts for the current document. You can define prompts
20-
for schema generation, data manipulation, and other AI-related tasks.
21-
</p>
22-
<br />
23-
<ApiKey />
24-
</PanelSettings>
25-
<ApiKeyWarning />
26-
27-
<ScrollPanel
28-
style="width: 100%; height: 100%"
29-
:dt="{
30-
bar: {
31-
background: '{primary.color}',
32-
},
33-
}">
34-
<AiPromptsSchema
35-
:session-mode="props.sessionMode"
36-
v-if="props.sessionMode == SessionMode.SchemaEditor" />
37-
<AiPromptsData
38-
:session-mode="props.sessionMode"
39-
v-else-if="props.sessionMode == SessionMode.DataEditor" />
40-
<AiPromptsSettings
41-
:session-mode="props.sessionMode"
42-
v-else-if="props.sessionMode == SessionMode.Settings" />
43-
</ScrollPanel>
17+
<div class="panel-container">
18+
<PanelSettings panel-name="AI Prompts View" :panel-settings-path="['aiIntegration']">
19+
<p>
20+
This panel allows you to manage AI prompts for the current document. You can define prompts
21+
for schema generation, data manipulation, and other AI-related tasks.
22+
</p>
23+
<br />
24+
<ApiKey />
25+
</PanelSettings>
26+
<ApiKeyWarning />
27+
<div class="panel-content">
28+
<ScrollPanel
29+
style="width: 100%; height: 100%"
30+
:dt="{
31+
bar: {
32+
background: '{primary.color}',
33+
},
34+
}">
35+
<AiPromptsSchema
36+
:session-mode="props.sessionMode"
37+
v-if="props.sessionMode == SessionMode.SchemaEditor" />
38+
<AiPromptsData
39+
:session-mode="props.sessionMode"
40+
v-else-if="props.sessionMode == SessionMode.DataEditor" />
41+
<AiPromptsSettings
42+
:session-mode="props.sessionMode"
43+
v-else-if="props.sessionMode == SessionMode.Settings" />
44+
</ScrollPanel>
45+
</div>
46+
</div>
4447
</template>
4548

46-
<style scoped></style>
49+
<style scoped>
50+
.panel-container {
51+
display: flex;
52+
flex-direction: column;
53+
height: 100%;
54+
width: 100%;
55+
overflow: hidden;
56+
}
57+
58+
.panel-content {
59+
flex: 1;
60+
min-height: 0;
61+
overflow: hidden;
62+
}
63+
</style>

‎meta_configurator/src/components/panels/code-editor/CodeEditorPanel.vue‎

Lines changed: 27 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
1-
<!-- Facade for CodeEditorPanel. Higher level code does not need to know about any details
2-
of this panel. When the panel or underlying editor changes, the changes can be applied here
3-
and the main view does not need to know about any of that. -->
41
<template>
5-
<PanelSettings panel-name="Text View" :panel-settings-path="['codeEditor']">
6-
<p>
7-
This panel allows you to view and edit the raw JSON/YAML/XML data of the current document. It
8-
is useful for advanced users who want to directly manipulate the data structure.
9-
</p>
10-
</PanelSettings>
11-
<AceEditor :sessionMode="props.sessionMode" />
2+
<div class="panel-container">
3+
<PanelSettings panel-name="Text View" :panel-settings-path="['codeEditor']">
4+
<p>
5+
This panel allows you to view and edit the raw JSON/YAML/XML data of the current document.
6+
It is useful for advanced users who want to directly manipulate the data structure.
7+
</p>
8+
</PanelSettings>
9+
<div class="panel-content">
10+
<AceEditor :sessionMode="props.sessionMode" />
11+
</div>
12+
</div>
1213
</template>
1314

1415
<script setup lang="ts">
@@ -20,3 +21,19 @@ const props = defineProps<{
2021
sessionMode: SessionMode;
2122
}>();
2223
</script>
24+
25+
<style scoped>
26+
.panel-container {
27+
display: flex;
28+
flex-direction: column;
29+
height: 100%;
30+
width: 100%;
31+
overflow: hidden;
32+
}
33+
34+
.panel-content {
35+
flex: 1;
36+
min-height: 0;
37+
overflow: hidden;
38+
}
39+
</style>

‎meta_configurator/src/components/panels/documentation/DocumentationPanel.vue‎

Lines changed: 29 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import {
1515
import {constructSchemaGraph} from '@/schema/graph-representation/schemaGraphConstructor';
1616
import {useSettings} from '@/settings/useSettings';
1717
import PanelSettings from '@/components/panels/shared-components/PanelSettings.vue';
18+
import {ScrollPanel} from 'primevue';
1819
1920
const props = defineProps<{
2021
sessionMode: SessionMode;
@@ -93,7 +94,7 @@ onUnmounted(() => docsRef.value?.removeEventListener('click', onAnchorClick));
9394
</script>
9495

9596
<template>
96-
<div class="documentation-panel">
97+
<div class="panel-container">
9798
<PanelSettings panel-name="Documentation View" :panel-settings-path="['documentation']">
9899
<p>
99100
This panel provides documentation for the current schema. It is generated from the schema
@@ -104,21 +105,24 @@ onUnmounted(() => docsRef.value?.removeEventListener('click', onAnchorClick));
104105
be downloaded as a Markdown file for offline viewing or sharing.
105106
</p>
106107
</PanelSettings>
107-
<div ref="docsRef" class="rendered-docs" v-html="renderedHtml"></div>
108-
<div style="text-align: center; margin-top: 1rem">
109-
<button class="download-btn" @click="handleDownloadClick">Download as Markdown</button>
108+
<div class="panel-content">
109+
<ScrollPanel
110+
style="width: 100%; height: 100%"
111+
:dt="{
112+
bar: {
113+
background: '{primary.color}',
114+
},
115+
}">
116+
<div ref="docsRef" class="rendered-docs" v-html="renderedHtml"></div>
117+
<div style="text-align: center; margin-top: 1rem; margin-bottom: 1rem">
118+
<button class="download-btn" @click="handleDownloadClick">Download as Markdown</button>
119+
</div>
120+
</ScrollPanel>
110121
</div>
111122
</div>
112123
</template>
113124

114125
<style>
115-
.documentation-panel {
116-
height: 100%;
117-
display: flex;
118-
flex-direction: column;
119-
overflow: hidden;
120-
}
121-
122126
.heading {
123127
font-size: 24px;
124128
font-weight: bold;
@@ -280,4 +284,18 @@ onUnmounted(() => docsRef.value?.removeEventListener('click', onAnchorClick));
280284
.download-btn:hover {
281285
background-color: var(--p-highlight-color);
282286
}
287+
288+
.panel-container {
289+
display: flex;
290+
flex-direction: column;
291+
height: 100%;
292+
width: 100%;
293+
overflow: hidden;
294+
}
295+
296+
.panel-content {
297+
flex: 1;
298+
min-height: 0;
299+
overflow: hidden;
300+
}
283301
</style>

‎meta_configurator/src/components/panels/gui-editor/GuiEditorPanel.vue‎

Lines changed: 42 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -15,31 +15,35 @@ const props = defineProps<{
1515
</script>
1616

1717
<template>
18-
<div class="gui-panel">
19-
<PanelSettings panel-name="GUI View" :panel-settings-path="['guiEditor']">
20-
<p>
21-
This panel allows you to view and edit the current document in a GUI format. You can
22-
navigate through the document tree, view properties, and modify data directly.
23-
</p>
24-
<br />
25-
<p>
26-
Hint: Click on a object property name to navigate into that object or expand it to view its
27-
properties.
28-
</p>
29-
<br />
30-
<p>The GUI is generated based on the following schema:</p>
31-
<SchemaInfoPanel :sessionMode="props.sessionMode" />
32-
</PanelSettings>
18+
<div class="panel-container">
19+
<div class="gui-panel">
20+
<PanelSettings panel-name="GUI View" :panel-settings-path="['guiEditor']">
21+
<p>
22+
This panel allows you to view and edit the current document in a GUI format. You can
23+
navigate through the document tree, view properties, and modify data directly.
24+
</p>
25+
<br />
26+
<p>
27+
Hint: Click on a object property name to navigate into that object or expand it to view
28+
its properties.
29+
</p>
30+
<br />
31+
<p>The GUI is generated based on the following schema:</p>
32+
<SchemaInfoPanel :sessionMode="props.sessionMode" />
33+
</PanelSettings>
3334

34-
<ScrollPanel
35-
style="width: 100%; height: 100%"
36-
:dt="{
37-
bar: {
38-
background: '{primary.color}',
39-
},
40-
}">
41-
<GuiEditorPanelJsonSchema :sessionMode="props.sessionMode" />
42-
</ScrollPanel>
35+
<div class="panel-content">
36+
<ScrollPanel
37+
style="width: 100%; height: 100%"
38+
:dt="{
39+
bar: {
40+
background: '{primary.color}',
41+
},
42+
}">
43+
<GuiEditorPanelJsonSchema :sessionMode="props.sessionMode" />
44+
</ScrollPanel>
45+
</div>
46+
</div>
4347
</div>
4448
</template>
4549

@@ -50,4 +54,18 @@ const props = defineProps<{
5054
flex-direction: column;
5155
overflow: hidden;
5256
}
57+
58+
.panel-container {
59+
display: flex;
60+
flex-direction: column;
61+
height: 100%;
62+
width: 100%;
63+
overflow: hidden;
64+
}
65+
66+
.panel-content {
67+
flex: 1;
68+
min-height: 0;
69+
overflow: hidden;
70+
}
5371
</style>

0 commit comments

Comments
 (0)