Skip to content

Commit c416e1f

Browse files
m-mohrm-mohr
committed
Use available space better, improvements on positioning and scrollbars etc.
1 parent d7bd876 commit c416e1f

15 files changed

+83
-68
lines changed

‎src/Page.vue

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -195,4 +195,10 @@ p.aboutPage {
195195
h3.aboutPage {
196196
margin-bottom: 0.5em;
197197
}
198+
199+
.noDataMessage {
200+
text-align: center;
201+
margin: 1em;
202+
font-weight: bold;
203+
}
198204
</style>

‎src/components/DataTable.vue

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -302,11 +302,6 @@ export default {
302302
.filter-icon {
303303
margin-right: 3px;
304304
}
305-
.noDataMessage {
306-
text-align: center;
307-
margin: 1em;
308-
font-weight: bold;
309-
}
310305
.noSearchResults td {
311306
text-align: center;
312307
}

‎src/components/DataViewer.vue

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
<template>
22
<div id="dataViewer">
3-
<span v-if="isText()">{{ nl2br(content) }}</span>
4-
<ObjectTree v-else :data="content"></ObjectTree>
3+
<div class="text" v-if="isText()">{{ nl2br(content) }}</div>
4+
<ObjectTree class="tree" v-else-if="content" :data="content"></ObjectTree>
5+
<div ref="emptyMsg" class="noDataMessage" v-else>Nothing to show.</div>
56
</div>
67
</template>
78

@@ -17,7 +18,7 @@ export default {
1718
},
1819
data() {
1920
return {
20-
content: null,
21+
content: null
2122
};
2223
},
2324
mounted() {
@@ -30,7 +31,7 @@ export default {
3031
},
3132
3233
reset() {
33-
this.content = 'Nothing to show.';
34+
this.content = null;
3435
},
3536
3637
showJson(data) {
@@ -74,7 +75,7 @@ export default {
7475
</script>
7576

7677
<style scoped>
77-
#dataViewer {
78+
#dataViewer .text, #dataViewer .tree {
7879
padding: 5px;
7980
}
8081
</style>

‎src/components/Editor.vue

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<Tabs ref="tabs" id="processGraphContent">
2+
<Tabs class="editor" ref="tabs" id="processGraphContent">
33
<Tab id="visual" name="Visual Model" icon="fa-code-branch" :selected="true" :onBeforeShow="prepareProcessGraph" :onShow="transferProcessGraph">
44
<template v-slot:tab="{ tab }">
55
<VisualEditor ref="graphBuilder" :active="tab.active" :editable="editable" :value="processGraph" :id="id + '_visual'" :enableClear="enableClear" :enableExecute="enableExecute" :enableLocalStorage="enableLocalStorage" :showDiscoveryToolbar="showDiscoveryToolbar" />
@@ -10,7 +10,7 @@
1010
<TextEditor ref="sourceEditor" :active="tab.active" :editable="editable" :value="processGraph" :id="id + '_text'" :enableClear="enableClear" :enableExecute="enableExecute" :enableLocalStorage="enableLocalStorage" />
1111
</template>
1212
</Tab>
13-
</tabs>
13+
</Tabs>
1414
</template>
1515

1616
<script>
@@ -147,4 +147,4 @@ export default {
147147
148148
}
149149
}
150-
</script>
150+
</script>

‎src/components/IDE.vue

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
</div>
1818
<hr class="separator" ref="separator0" @dblclick="centerSeparator(0)" @mousedown="startMovingSeparator($event, 0)" />
1919
<div id="workspace" ref="workspace">
20-
<Editor ref="editor" class="mainEditor" :showDiscoveryToolbar="false" />
20+
<Editor ref="editor" class="mainEditor" id="main" :showDiscoveryToolbar="false" />
2121
<UserWorkspace class="userContent" />
2222
</div>
2323
<hr class="separator" ref="separator1" @dblclick="centerSeparator(1)" @mousedown="startMovingSeparator($event, 1)" />
@@ -223,10 +223,6 @@ export default {
223223
#ide main, #workspace, #viewer, #wrapper {
224224
height: 100%;
225225
}
226-
#workspace, #viewer {
227-
overflow: auto;
228-
box-sizing: border-box;
229-
}
230226
#discovery {
231227
width: 20%;
232228
min-width: 200px;
@@ -237,28 +233,29 @@ export default {
237233
#discovery .category {
238234
padding: 5px 1em;;
239235
}
240-
#workspace {
236+
#workspace, #viewer {
237+
box-sizing: border-box;
241238
padding: 1em;
239+
}
240+
#workspace {
242241
flex-grow: 1;
243242
min-width: 300px;
244-
overflow-y: auto;
243+
width: 300px; /* Set a fixed size so that the box doesn't change size when tabs are changed or so. flex-grow will make the width larger/smaller anyway */
245244
display: flex;
246245
flex-direction: column;
247246
}
248247
#viewer {
249-
padding: 1em;
250248
min-width: 200px;
251249
width: 30%;
252250
}
253-
#viewer .tabs {
254-
height: 100%;
255-
}
256-
#viewer .tabsBody,
257-
#viewer .tabContent {
258-
height: calc(98% - 1em + 16px);
251+
.mainEditor {
252+
min-height: 300px;
253+
height: 50vh;
254+
flex-grow: 1;
259255
}
260256
.userContent {
261257
flex-grow: 1;
258+
height: 50%;
262259
}
263260
.separator {
264261
border: 0;
@@ -268,6 +265,9 @@ export default {
268265
border-left: 1px dotted #65421F;
269266
cursor: e-resize;
270267
}
268+
.infoViewer {
269+
height: 450px;
270+
}
271271
#ide header.navbar {
272272
width: 100%;
273273
background-color: #1665B6;

‎src/components/ImageViewer.vue

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<div id="imageViewer" ref="imageContainer">
3-
<span ref="emptyMsg" v-show="visibleContent == 'text'"></span>
3+
<div ref="emptyMsg" class="noDataMessage" v-show="visibleContent == 'text'"></div>
44
<img ref="image" v-show="visibleContent == 'image'" @click="resize" />
55
</div>
66
</template>
@@ -71,10 +71,4 @@ export default {
7171
7272
}
7373
};
74-
</script>
75-
76-
<style>
77-
#imageViewer {
78-
padding: 5px;
79-
}
80-
</style>
74+
</script>

‎src/components/JobInfoModal.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@
4545

4646
<section class="process-graph">
4747
<div class="vue-component"><h3>Process Graph</h3></div>
48-
<Editor :processGraph="job.processGraph" :editable="false" :enableExecute="false" id="jobPgViewer" />
48+
<Editor :processGraph="job.processGraph" :editable="false" :enableExecute="false" class="infoViewer" id="jobPgViewer" />
4949
</section>
5050

5151
</template>

‎src/components/ParameterField.vue

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@
4444
<div :id="fieldName" class="areaSelector"></div>
4545
</template>
4646
<div v-else-if="type === 'callback'" class="border">
47-
<VisualEditor ref="callbackBuilder" id="inlinePgEditor" :editable="editable" :callbackArguments="schema.getCallbackParameters()" :value="value" :enableExecute="false" :enableLocalStorage="false" />
47+
<VisualEditor ref="callbackBuilder" class="callbackEditor" id="inlinePgEditor" :editable="editable" :callbackArguments="schema.getCallbackParameters()" :value="value" :enableExecute="false" :enableLocalStorage="false" />
4848
</div>
4949
<template v-else-if="type === 'null'">
5050
The field will be set to&nbsp;<strong><tt>null</tt></strong>.
@@ -392,4 +392,9 @@ export default {
392392
font-size: 1.1em;
393393
font-weight: bold;
394394
}
395+
.callbackEditor {
396+
height: 450px;
397+
min-width: 50vw;
398+
width: 100%;
399+
}
395400
</style>

‎src/components/ParameterModal.vue

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<Modal ref="__modal" minWidth="60%">
2+
<Modal ref="__modal" minWidth="60%" maxWidth="90%">
33
<template v-slot:main>
44
<p v-if="editableFields.length === 0">No editable parameters available.</p>
55
<form v-else id="parameterModal" @submit.prevent="save">
@@ -98,8 +98,8 @@ export default {
9898
border-top: 1px dotted #ccc;
9999
}
100100
#parameterModal .fieldRow label {
101-
min-width: 40%;
102-
width: 40%;
101+
min-width: 35%;
102+
width: 35%;
103103
}
104104
#parameterModal .fieldRow .fieldEditorContainer {
105105
flex-grow: 1;

‎src/components/ProcessGraphInfoModal.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212

1313
<section class="process-graph">
1414
<div class="vue-component"><h3>Process Graph</h3></div>
15-
<Editor :processGraph="pg.processGraph" :editable="false" :enableExecute="false" id="pgInfoViewer" />
15+
<Editor :processGraph="pg.processGraph" :editable="false" :enableExecute="false" class="infoViewer" id="pgInfoViewer" />
1616
</section>
1717

1818
</template>

‎src/components/ServiceInfoModal.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929

3030
<section class="process-graph">
3131
<div class="vue-component"><h3>Process Graph</h3></div>
32-
<Editor :processGraph="service.processGraph" :editable="false" :enableExecute="false" id="servicePgViewer" />
32+
<Editor :processGraph="service.processGraph" :editable="false" :enableExecute="false" class="infoViewer" id="servicePgViewer" />
3333
</section>
3434

3535
<section class="vue-component parameters" v-if="hasParameters">

‎src/components/Tabs.vue

Lines changed: 18 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -102,15 +102,21 @@ export default {
102102
</script>
103103

104104
<style>
105-
.tabContent {
106-
background-color: white;
107-
border-top: 1px solid #ddd;
108-
overflow: auto;
109-
padding-top: 1px;
110-
}
111105
.tabs {
112106
border-radius: 3px;
113107
border: 1px solid #aaa;
108+
display: flex;
109+
flex-direction: column;
110+
height: 100%;
111+
}
112+
.tabsHeader {
113+
display: flex;
114+
background-color: #f9f9f9;
115+
}
116+
.tabsBody {
117+
flex-grow: 1;
118+
overflow: auto;
119+
height: 100%;
114120
}
115121
.tabs.hide {
116122
display: none;
@@ -121,10 +127,13 @@ export default {
121127
.tabs.hideNames .tabName {
122128
display: none;
123129
}
124-
.tabsHeader {
125-
background-color: #f9f9f9;
130+
.tabContent {
131+
background-color: white;
132+
border-top: 1px solid #ddd;
133+
padding-top: 1px;
134+
height: calc(100% - 2px);
126135
}
127-
.tabContent table {
136+
.tabContent .dataTable, .tabContent table {
128137
width: 100%;
129138
border-collapse: collapse;
130139
}
@@ -133,12 +142,6 @@ export default {
133142
border: 1px solid #ddd;
134143
padding: 3px;
135144
}
136-
.tabsHeader {
137-
display: flex;
138-
}
139-
#processGraphContent .tabsHeader {
140-
display: flex;
141-
}
142145
.tabItem:first-of-type {
143146
margin-left: 5px;
144147
}

‎src/components/TextEditor.vue

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div id="TextEditor">
2+
<div class="textEditor">
33
<EditorToolbar :editable="editable" :onStore="getProcessGraph" :onInsert="insertProcessGraph" :onClear="clearProcessGraph" :enableClear="enableClear" :enableExecute="enableExecute" :enableLocalStorage="enableLocalStorage" />
44
<div :id="id" class="sourceCodeEditor"></div>
55
</div>
@@ -142,7 +142,14 @@ export default {
142142
</script>
143143

144144
<style scoped>
145+
.textEditor {
146+
height: 100%;
147+
display: flex;
148+
flex-direction: column;
149+
}
145150
.sourceCodeEditor {
146-
height: 400px;
151+
flex-grow: 1;
152+
height: 100%;
153+
overflow: auto;
147154
}
148155
</style>

‎src/components/UserWorkspace.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ export default {
6868
}
6969
#userContent .tabContent {
7070
padding: 5px;
71+
height: calc(100% - 12px);
7172
min-height: 200px;
72-
max-height: 350px;
7373
}
7474
</style>

‎src/components/VisualEditor.vue

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div id="VisualEditor" ref="visualEditor">
2+
<div class="visualEditor" ref="visualEditor">
33
<EditorToolbar :editable="editable" :onStore="getProcessGraph" :onInsert="insertProcessGraph" :onClear="clearProcessGraph" :enableClear="enableClear" :enableExecute="enableExecute" :enableLocalStorage="enableLocalStorage">
44
<button type="button" @click="blocks.deleteEvent()" v-show="editable && blocks.canDelete()" title="Delete selected elements"><i class="fas fa-trash"></i></button>
55
<button type="button" @click="blocks.undo()" v-show="editable && blocks.hasUndo()" title="Undo last change"><i class="fas fa-undo-alt"></i></button>
@@ -291,21 +291,25 @@ export default {
291291
</script>
292292

293293
<style>
294-
#VisualEditor {
294+
.visualEditor {
295295
background-color: white;
296+
height: 100%;
297+
display: flex;
298+
flex-direction: column;
296299
}
297300
298-
#VisualEditor .editorSplitter {
301+
.visualEditor .editorSplitter {
299302
display: flex;
300-
height: 400px;
303+
height: 100%;
304+
flex-grow: 1;
301305
}
302306
303-
#VisualEditor .discoveryToolbar {
307+
.visualEditor .discoveryToolbar {
304308
width: 25%;
305309
min-width: 150px;
306310
border-right: 1px solid #ddd;
307311
}
308-
#VisualEditor.fullscreen .discoveryToolbar {
312+
.visualEditor.fullscreen .discoveryToolbar {
309313
width: 15%;
310314
min-width: 250px;
311315
}
@@ -315,7 +319,7 @@ export default {
315319
flex-grow: 1;
316320
}
317321
318-
#VisualEditor.fullscreen {
322+
.visualEditor.fullscreen {
319323
position: absolute;
320324
top: 0;
321325
left: 0;
@@ -326,7 +330,7 @@ export default {
326330
flex-direction: column;
327331
}
328332
329-
#VisualEditor.fullscreen .editorSplitter {
333+
.visualEditor.fullscreen .editorSplitter {
330334
height: 100%;
331335
}
332336

0 commit comments

Comments
 (0)