Skip to content

Commit

Permalink
full screen on the side panel, and remove the side panel header
Browse files Browse the repository at this point in the history
  • Loading branch information
@ZihengSun
ZihengSun committed Mar 3, 2024
1 parent 615964c commit e6e1044
Show file tree
Hide file tree
Showing 5 changed files with 83 additions and 29 deletions.
2 changes: 1 addition & 1 deletion src/main/resources/static/css/promptprocesspanel.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@
width: 40%;
height: 100%;
top: 52px;
margin-top:50px;
margin-top: 0;
padding:0;
transition: transform 0.3s 0.3s;
border: 1px dashed lightgray;
Expand Down
37 changes: 34 additions & 3 deletions src/main/resources/static/js/gw.editor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,42 @@ GW.editor = {

isfullscreen: false,

switchSidePanelFullScreen: function(){

var sidepanel = $('.cd-panel__container') //.cd-panel__container
if (!sidepanel.hasClass('fullscreen')) {
// this.beforeFullscreen = { height: sidepanel.height(), width: sidepanel.width() }
sidepanel.addClass('fullscreen');
sidepanel.height('100vh');
sidepanel.width('100vw');
sidepanel.css('top', '0');
$('#prompt-panel-main').height('calc(100% - 55px)')
$('#prompt-panel-main-process-info-code').height('100%')
$('#prompt-panel-main-process-info-history').height('100%')
this.isfullscreen = true;
}else {
sidepanel.removeClass('fullscreen');
// sidepanel.height(this.beforeFullscreen.height);
// sidepanel.width(this.beforeFullscreen.width);
sidepanel.css('top', '52px');
// subtabCodeDiv.height('calc(100% - 150px)');
// subtabHistoryDiv.height('calc(100% - 150px)');
sidepanel.height('100%')
sidepanel.width('40%')
$('#prompt-panel-main').height('calc(100% - 105px)')
$('#prompt-panel-main-process-info-code').height('100%')
$('#prompt-panel-main-process-info-history').height('100%')
// editor.refresh();
this.isfullscreen = false;
}

},

switchFullScreen: function(){

this.switchFullScreenUtil('#editor-history-tab-panel', '#main-process-info-code', '#main-process-info-history')
this.switchFullScreenUtil('#editor-history-tab-panel',
'#main-process-info-code',
'#main-process-info-history')

},

Expand All @@ -22,7 +55,6 @@ GW.editor = {
editorDiv.addClass('fullscreen');
editorDiv.height('100vh');
editorDiv.width('100vw');
// editor.refresh();
subtabCodeDiv.height('calc(100% - 40px)');
subtabHistoryDiv.height('calc(100% - 40px)');
this.isfullscreen = true;
Expand All @@ -33,7 +65,6 @@ GW.editor = {
editorDiv.width(this.beforeFullscreen.width);
subtabCodeDiv.height('calc(100% - 150px)');
subtabHistoryDiv.height('calc(100% - 150px)');
// editor.refresh();
this.isfullscreen = false;
}

Expand Down
20 changes: 15 additions & 5 deletions src/main/resources/static/js/gw.process.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1412,13 +1412,23 @@ GW.process = {
<button class="tablinks-process" id="main-process-info-code-tab" onclick="GW.process.openCity(event, 'main-process-info-code')">Code</button>
<button class="tablinks-process" id="main-process-info-history-tab" onclick="GW.process.openCity(event, 'main-process-info-history'); GW.process.history('`+
process_id+`', '` + process_name+`')">History</button>
<button class="btn pull-right" onclick="GW.editor.switchFullScreen()" ><i class="glyphicon glyphicon-fullscreen"></i></button>
<button class="btn pull-right" onclick="GW.editor.switchFullScreen()" >
<i class="glyphicon glyphicon-fullscreen"></i>
</button>
<button class="btn pull-right" onclick="GW.process.runProcess('`+
process_id+`', '`+process_name+`', '`+code_type+
`');" ><i class="glyphicon glyphicon-play"></i></button>
<button class="btn pull-right" onclick="GW.process.editSwitch()" ><i class="glyphicon glyphicon-floppy-saved"></i></button>
<button class="btn pull-right" onclick="GW.process.bottomDock()" ><i class="fas fa-window-maximize"></i></button>
<button class="btn pull-right" onclick="GW.process.leftDock()" ><i class="fas fa-window-maximize fa-rotate-270"></i></i></button>
`');" >
<i class="glyphicon glyphicon-play"></i>
</button>
<button class="btn pull-right" onclick="GW.process.editSwitch()" >
<i class="glyphicon glyphicon-floppy-saved"></i>
</button>
<button class="btn pull-right" onclick="GW.process.bottomDock()" >
<i class="fas fa-window-maximize"></i>
</button>
<button class="btn pull-right" onclick="GW.process.leftDock()" >
<i class="fas fa-window-maximize fa-rotate-270"></i>
</button>
</div>
<div id="main-process-info-code" class="tabcontent-process generalshadow" style="height:calc(100% - 150px);left:0; margin:0; padding: 0; ">
<div class="code__container" style="font-size: 12px; margin:0; height:100%;" id="process-code-history-section">
Expand Down
47 changes: 30 additions & 17 deletions src/main/resources/static/js/gw.process.sidepanel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -290,23 +290,34 @@ GW.process.sidepanel = {
<div class="subtab tab titleshadow" style="margin-top: 0; max-width: 100%">
<button class="tablinks-process" id="prompt-panel-main-process-info-code-tab" onclick="GW.process.openCity(event, 'prompt-panel-main-process-info-code')">Code</button>
<button class="tablinks-process" id="prompt-panel-main-process-info-history-tab" onclick="GW.process.openCity(event, 'prompt-panel-main-process-info-history'); GW.process.sidepanel.history('`+this.current_process_id+`', '` + this.current_process_name+`')">History</button>
<!-- TODO: play button, save button, full screen button-->
<!--
<button class="btn pull-right" onclick="GW.process.sidepanel.switchFullScreen()" ><i class="glyphicon glyphicon-fullscreen"></i></button>
-->
<button class="btn pull-right" title="dock log window on bottom" onclick="GW.process.sidepanel.bottomDock()" ><i class="fas fa-window-maximize"></i></button>
<button class="btn pull-right" title="dock log window on right" onclick="GW.process.sidepanel.leftDock()" ><i class="fas fa-window-maximize fa-rotate-270"></i></i></button>
<button class="btn pull-right" title="edit switch" onclick="GW.process.sidepanel.editSwitch()" ><i class="glyphicon glyphicon-floppy-saved"></i></button>
<button class="btn pull-right" title="skip it in workflow" onclick="javascript:void(0)">Skip: <input type="checkbox"
onClick='GW.workflow.skipprocess("` + this.current_workflow_history_id + `", "` + this.current_workflow_process_id + `");'
id="prompt_panel_skip_process_` + this.current_workflow_process_id + `" /></button>
<button class="btn pull-right" title="switch on/off log" onclick="javascript:void(0)">Log: <input type="checkbox" id="prompt_panel_log_switch" checked="checked" /></button>
<button class="btn pull-right" title="execute process" onclick="GW.process.sidepanel.runProcess('`+ this.current_process_id+`', '`+this.current_process_name+`', '`+code_type+`');" ><i class="glyphicon glyphicon-play"></i></button>
<button class="btn pull-right" onclick="GW.process.sidepanel.close()" >
<i class="glyphicon glyphicon-remove"></i>
</button>
<button class="btn pull-right" onclick="GW.editor.switchSidePanelFullScreen()" >
<i class="glyphicon glyphicon-fullscreen"></i>
</button>
<button class="btn pull-right"
title="dock log window on bottom" onclick="GW.process.sidepanel.bottomDock()" >
<i class="fas fa-window-maximize"></i>
</button>
<button class="btn pull-right" title="dock log window on right" onclick="GW.process.sidepanel.leftDock()" >
<i class="fas fa-window-maximize fa-rotate-270"></i>
</button>
<button class="btn pull-right" title="edit switch" onclick="GW.process.sidepanel.editSwitch()" >
<i class="glyphicon glyphicon-floppy-saved"></i>
</button>
<button class="btn pull-right" title="skip it in workflow" onclick="javascript:void(0)">
Skip: <input type="checkbox"
onClick='GW.workflow.skipprocess("` + this.current_workflow_history_id + `", "` + this.current_workflow_process_id + `");'
id="prompt_panel_skip_process_` + this.current_workflow_process_id + `" />
</button>
<button class="btn pull-right" title="switch on/off log" onclick="javascript:void(0)">
Log: <input type="checkbox" id="prompt_panel_log_switch" checked="checked" />
</button>
<button class="btn pull-right" title="execute process" onclick="GW.process.sidepanel.runProcess('`+ this.current_process_id+`', '`+this.current_process_name+`', '`+code_type+`');" >
<i class="glyphicon glyphicon-play"></i>
</button>
</div>
<div id="prompt-panel-main-process-info-code" class="tabcontent-process generalshadow" style="height:100%;left:0; margin:0; padding: 0; ">
Expand Down Expand Up @@ -461,7 +472,9 @@ GW.process.sidepanel = {

switchFullScreen: function(){

GW.editor.switchFullScreenUtil('#prompt-panel-editor-history-tab-panel', '#prompt-panel-main-process-info-code', '#prompt-panel-main-process-info-history')
GW.editor.switchFullScreenUtil('#prompt-panel-editor-history-tab-panel',
'#prompt-panel-main-process-info-code',
'#prompt-panel-main-process-info-history')

},

Expand Down
6 changes: 3 additions & 3 deletions src/main/resources/templates/geoweaver.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -657,16 +657,16 @@ <h3>Processing your import</h3>
</div>

<div class="cd-panel cd-panel--from-right js-cd-panel-main" id="prompt-panel">
<header class="cd-panel__header">
<!-- <header class="cd-panel__header">
<h3 style="margin:5px;">Process Details</h3>
<div onclick="GW.process.sidepanel.close()" class="prompt-panel-close-btn">
<img src="../img/close-sidenav.png" alt="close" width="20" height="20" />
</div>
</header>
</header> -->

<div class="cd-panel__container">
<div class="cd-panel__content" id="prompt-panel-main" style="height:calc(100% - 150px); width:100%;">
<div class="cd-panel__content" id="prompt-panel-main" style="height:calc(100% - 105px); width:100%;">
<!-- your side panel content here -->
</div> <!-- cd-panel__content -->
</div> <!-- cd-panel__container -->
Expand Down

0 comments on commit e6e1044

Please sign in to comment.