Skip to content

Commit f4fa62c

Browse files
phillip-krugerphillip-kruger
committed
Dev UI workspace: Make menubar sticky
Signed-off-by: Phillip Kruger <[email protected]>
1 parent 073d40d commit f4fa62c

File tree

1 file changed

+95
-37
lines changed
  • extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/qwc

1 file changed

+95
-37
lines changed

‎extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/qwc/qwc-workspace.js‎

Lines changed: 95 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,6 @@ import '@vaadin/tooltip';
88
import '@qomponent/qui-code-block';
99
import '@qomponent/qui-directory-tree';
1010
import '@qomponent/qui-badge';
11-
import '@vaadin/tabs';
12-
import '@vaadin/tabsheet';
1311
import '@vaadin/dialog';
1412
import '@vaadin/confirm-dialog';
1513
import '@vaadin/progress-bar';
@@ -43,6 +41,7 @@ export class QwcWorkspace extends observeState(QwcHotReloadElement) {
4341
display: flex;
4442
width: 100%;
4543
height: 100%;
44+
flex-direction: column;
4645
}
4746
4847
.split vaadin-split-layout {
@@ -74,6 +73,48 @@ export class QwcWorkspace extends observeState(QwcHotReloadElement) {
7473
height: 100vh;
7574
border: none;
7675
}
76+
77+
.sourcehalf {
78+
display: flex;
79+
flex-direction: column;
80+
height: 100%;
81+
justify-content: space-between;
82+
overflow:hidden !important;
83+
}
84+
85+
.mainMenuBar {
86+
display: flex;
87+
align-items: center;
88+
justify-content: space-between;
89+
border-bottom: 1px solid var(--lumo-contrast-20pct);
90+
}
91+
92+
.mainMenuBarButtons {
93+
display: flex;
94+
align-items: center;
95+
width: 100%;
96+
}
97+
98+
.mainMenuBarTitle {
99+
font-size: large;
100+
color: var(--lumo-contrast-50pct);
101+
user-select: none;
102+
cursor: pointer;
103+
}
104+
105+
.mainMenuBarActions {
106+
display: flex;
107+
align-items: center;
108+
gap: 0.5rem;
109+
width: 100%;
110+
justify-content: end;
111+
padding-right: 10px;
112+
}
113+
114+
.sourcehalfcontent {
115+
overflow: scroll;
116+
}
117+
77118
`;
78119

79120
static properties = {
@@ -85,7 +126,8 @@ export class QwcWorkspace extends observeState(QwcHotReloadElement) {
85126
_changeToWorkspaceItem: {state: true},
86127
_actionResult: {state: true},
87128
_showActionProgress: {state: true},
88-
_confirmDialogOpened: {state: true}
129+
_confirmDialogOpened: {state: true},
130+
_isMaximized: {state: true}
89131
};
90132

91133
constructor() {
@@ -98,6 +140,7 @@ export class QwcWorkspace extends observeState(QwcHotReloadElement) {
98140
this._clearSelectedWorkspaceItem();
99141
this._clearActionResult();
100142
this._confirmDialogOpened = false;
143+
this._isMaximized = false;
101144
}
102145

103146
connectedCallback() {
@@ -157,9 +200,10 @@ export class QwcWorkspace extends observeState(QwcHotReloadElement) {
157200
render() {
158201
if (this._workspaceItems) {
159202
return html`<div class="split">
203+
${this._renderMainMenuBar()}
160204
<vaadin-split-layout>
161-
<master-content style="width: 25%;">${this._renderWorkspaceTree()}</master-content>
162-
<detail-content style="width: 75%;">${this._renderSelectedSource()}</detail-content>
205+
<master-content style="width: ${this._isMaximized ? '0%' : '25%'};">${this._renderWorkspaceTree()}</master-content>
206+
<detail-content style="width: ${this._isMaximized ? '100%' : '75%'};">${this._renderSelectedSource()}</detail-content>
163207
</vaadin-split-layout>
164208
</div>
165209
${this._renderResultDialog()}
@@ -182,39 +226,49 @@ export class QwcWorkspace extends observeState(QwcHotReloadElement) {
182226

183227
return html`<vaadin-split-layout>
184228
<master-content style="width: 50%;">
185-
<vaadin-tabsheet>
186-
187-
<vaadin-button title="Save" slot="prefix" theme="icon" aria-label="Save" @click="${this._saveSelectedWorkspaceItem}">
188-
<vaadin-icon icon="font-awesome-solid:floppy-disk"></vaadin-icon>
189-
</vaadin-button>
190-
<vaadin-button title="Copy" slot="prefix" theme="icon" aria-label="Copy" @click="${this._copySelectedWorkspaceItem}">
191-
<vaadin-icon icon="font-awesome-solid:copy"></vaadin-icon>
192-
</vaadin-button>
193-
194-
195-
${this._renderActions()}
196-
197-
<qui-ide-link slot="suffix" title="Open in IDE" style="cursor: pointer;"
198-
fileName="${this._selectedWorkspaceItem.path}"
199-
lineNumber="0"
200-
noCheck>
201-
<vaadin-icon icon="font-awesome-solid:up-right-from-square"></vaadin-icon>
202-
</qui-ide-link>
203-
204-
<vaadin-tabs slot="tabs">
205-
<vaadin-tab id="${this._selectedWorkspaceItem.path}" title="${this._selectedWorkspaceItem.path}">${this._selectedWorkspaceItem.name.split('/').pop()}</vaadin-tab>
206-
</vaadin-tabs>
207-
208-
<div tab="${this._selectedWorkspaceItem.path}">
209-
${this._renderContent()}
210-
</div>
211-
</vaadin-tabsheet>
229+
<div class="mainPart">
230+
${this._renderMainContent()}
231+
</div>
212232
</master-content>
213233
${this._renderResultSplitView()}
214-
</vaadin-split-layout>`;
234+
</vaadin-split-layout>
235+
`;
215236
}
216237
}
217238

239+
_renderMainMenuBar(){
240+
const isHidden = !this._selectedWorkspaceItem.name;
241+
242+
return html`
243+
<div class="mainMenuBar" style="${isHidden ? 'visibility: hidden;' : ''}">
244+
<div class="mainMenuBarButtons">
245+
<vaadin-button title="Save" theme="icon tertiary" aria-label="Save" @click="${this._saveSelectedWorkspaceItem}">
246+
<vaadin-icon icon="font-awesome-solid:floppy-disk"></vaadin-icon>
247+
</vaadin-button>
248+
<vaadin-button title="Copy" theme="icon tertiary" aria-label="Copy" @click="${this._copySelectedWorkspaceItem}">
249+
<vaadin-icon icon="font-awesome-solid:copy"></vaadin-icon>
250+
</vaadin-button>
251+
</div>
252+
253+
<div class="mainMenuBarTitle" @dblclick="${this._toggleSplit}">
254+
${this._selectedWorkspaceItem?.name?.split('/').pop()}
255+
</div>
256+
257+
<div class="mainMenuBarActions">
258+
${this._renderActions()}
259+
<qui-ide-link title="Open in IDE"
260+
style="cursor: pointer;"
261+
fileName="${this._selectedWorkspaceItem?.path}"
262+
lineNumber="0"
263+
noCheck>
264+
<vaadin-icon icon="font-awesome-solid:up-right-from-square"></vaadin-icon>
265+
</qui-ide-link>
266+
</div>
267+
</div>
268+
`;
269+
270+
}
271+
218272
_renderResultSplitView(){
219273
if(this._actionResult && this._actionResult.content && this._actionResult.display === "split"){
220274
return html`<detail-content style="width: 50%;">
@@ -286,16 +340,16 @@ export class QwcWorkspace extends observeState(QwcHotReloadElement) {
286340
_renderActions(){
287341
if(this._filteredActions){
288342
if(this._showActionProgress){
289-
return html`<vaadin-progress-bar slot="suffix" indeterminate></vaadin-progress-bar>`;
343+
return html`<vaadin-progress-bar indeterminate></vaadin-progress-bar>`;
290344
}else{
291-
return html`<div class="actions" slot="suffix">
292-
<vaadin-menu-bar .items="${this._filteredActions}" theme="dropdown-indicators" @item-selected="${(e) => this._actionSelected(e)}"></vaadin-menu-bar>
345+
return html`<div class="actions">
346+
<vaadin-menu-bar .items="${this._filteredActions}" theme="dropdown-indicators tertiary" @item-selected="${(e) => this._actionSelected(e)}"></vaadin-menu-bar>
293347
</div>`;
294348
}
295349
}
296350
}
297351

298-
_renderContent(){
352+
_renderMainContent(){
299353
if(this._selectedWorkspaceItem.isBinary){
300354
return this._renderBinaryContent();
301355
}else{
@@ -354,6 +408,10 @@ export class QwcWorkspace extends observeState(QwcHotReloadElement) {
354408
</vaadin-confirm-dialog>`;
355409
}
356410

411+
_toggleSplit() {
412+
this._isMaximized = !this._isMaximized;
413+
}
414+
357415
_confirmOpenedChanged(e) {
358416
if(this._confirmDialogOpened !== e.detail.value){
359417
this._confirmDialogOpened = e.detail.value;

0 commit comments

Comments
 (0)