mirror of
https://github.com/gyurix1968/guacamole-client.git
synced 2025-09-06 13:17:41 +00:00
GUAC-1044: Keep menu header stationary while allowing body to scroll.
This commit is contained in:
Michael Jumper
@@ -21,10 +21,10 @@
|
||||
*/
|
||||
|
||||
#menu {
|
||||
overflow: auto;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
height: 100%;
|
||||
max-width: 100%;
|
||||
width: 480px;
|
||||
background: #EEE;
|
||||
@@ -37,6 +37,43 @@
|
||||
transition: left 0.125s, opacity 0.125s;
|
||||
}
|
||||
|
||||
.menu-content {
|
||||
overflow: hidden;
|
||||
display: table;
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.menu-header {
|
||||
display: table-row;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.menu-header h2 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.menu-body {
|
||||
display: table-row;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.menu-body-content {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.menu-body-scroll-region {
|
||||
overflow: auto;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
#menu h3 {
|
||||
margin: 1em;
|
||||
}
|
||||
|
||||
@@ -43,7 +43,7 @@
|
||||
|
||||
<!-- On-screen keyboard -->
|
||||
<div class="keyboard-container" ng-show="showOSK">
|
||||
<guac-osk layout="'CLIENT.URL_OSK_LAYOUT' | translate"/>
|
||||
<guac-osk layout="'CLIENT.URL_OSK_LAYOUT' | translate"></guac-osk>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -51,88 +51,102 @@
|
||||
</div>
|
||||
|
||||
<!-- Menu -->
|
||||
<div ng-class="{open: menu.shown}" id="menu" guac-touch-drag="menuDrag" guac-scroll="menu.scrollState">
|
||||
<div ng-class="{open: menu.shown}" id="menu">
|
||||
<div class="menu-content">
|
||||
|
||||
<div class="logout-panel">
|
||||
<a class="home button" href="#/">{{'CLIENT.ACTION_NAVIGATE_HOME' | translate}}</a>
|
||||
<a class="disconnect danger button" ng-click="disconnect()">{{'CLIENT.ACTION_DISCONNECT' | translate}}</a>
|
||||
</div>
|
||||
<h2>{{client.name}}</h2>
|
||||
|
||||
<!-- Clipboard -->
|
||||
<h3>{{'CLIENT.SECTION_HEADER_CLIPBOARD' | translate}}</h3>
|
||||
<div class="content" id="clipboard-settings">
|
||||
<p class="description">{{'CLIENT.HELP_CLIPBOARD' | translate}}</p>
|
||||
<textarea ng-model="client.clipboardData" rows="10" cols="40" id="clipboard"></textarea>
|
||||
</div>
|
||||
|
||||
<!-- File transfers -->
|
||||
<h3 guac-marker="menu.fileTransferMarker">{{'CLIENT.SECTION_HEADER_FILE_TRANSFERS' | translate}}</h3>
|
||||
<div class="content" id="file-transfers">
|
||||
<guac-file-transfer-manager client="client"></guac-file-transfer-manager>
|
||||
</div>
|
||||
|
||||
<!-- Input method -->
|
||||
<h3>{{'CLIENT.SECTION_HEADER_INPUT_METHOD' | translate}}</h3>
|
||||
<div class="content" id="keyboard-settings">
|
||||
|
||||
<!-- No IME -->
|
||||
<div class="choice">
|
||||
<label><input id="ime-none" name="input-method" ng-change="closeMenu()" ng-model="menu.inputMethod" type="radio" value="none"/> {{'CLIENT.NAME_INPUT_METHOD_NONE' | translate}}</label>
|
||||
<p class="caption"><label for="ime-none">{{'CLIENT.HELP_INPUT_METHOD_NONE' | translate}}</label></p>
|
||||
</div>
|
||||
|
||||
<!-- Text input -->
|
||||
<div class="choice">
|
||||
<div class="figure"><label for="ime-text"><img src="images/settings/tablet-keys.png" alt=""/></label></div>
|
||||
<label><input id="ime-text" name="input-method" ng-change="closeMenu()" ng-model="menu.inputMethod" type="radio" value="text"/> {{'CLIENT.NAME_INPUT_METHOD_TEXT' | translate}}</label>
|
||||
<p class="caption"><label for="ime-text">{{'CLIENT.HELP_INPUT_METHOD_TEXT' | translate}} </label></p>
|
||||
</div>
|
||||
|
||||
<!-- Guac OSK -->
|
||||
<div class="choice">
|
||||
<label><input id="ime-osk" name="input-method" ng-change="closeMenu()" ng-model="menu.inputMethod" type="radio" value="osk"/> {{'CLIENT.NAME_INPUT_METHOD_OSK' | translate}}</label>
|
||||
<p class="caption"><label for="ime-osk">{{'CLIENT.HELP_INPUT_METHOD_OSK' | translate}}</label></p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Mouse mode -->
|
||||
<h3>{{'CLIENT.SECTION_HEADER_MOUSE_MODE' | translate}}</h3>
|
||||
<div class="content" id="mouse-settings">
|
||||
<p class="description">{{'CLIENT.HELP_MOUSE_MODE' | translate}}</p>
|
||||
|
||||
<!-- Touchscreen -->
|
||||
<div class="choice">
|
||||
<input name="mouse-mode" ng-change="closeMenu()" ng-model="client.clientProperties.emulateAbsoluteMouse" type="radio" ng-value="true" checked="checked" id="absolute"/>
|
||||
<div class="figure">
|
||||
<label for="absolute"><img src="images/settings/touchscreen.png" alt="{{'CLIENT.NAME_MOUSE_MODE_ABSOLUTE' | translate}}"/></label>
|
||||
<p class="caption"><label for="absolute">{{'CLIENT.HELP_MOUSE_MODE_ABSOLUTE' | translate}}</label></p>
|
||||
<!-- Stationary header -->
|
||||
<div class="menu-header">
|
||||
<div class="logout-panel">
|
||||
<a class="home button" href="#/">{{'CLIENT.ACTION_NAVIGATE_HOME' | translate}}</a>
|
||||
<a class="disconnect danger button" ng-click="disconnect()">{{'CLIENT.ACTION_DISCONNECT' | translate}}</a>
|
||||
</div>
|
||||
<h2>{{client.name}}</h2>
|
||||
</div>
|
||||
|
||||
<!-- Touchpad -->
|
||||
<div class="choice">
|
||||
<input name="mouse-mode" ng-change="closeMenu()" ng-model="client.clientProperties.emulateAbsoluteMouse" type="radio" ng-value="false" id="relative"/>
|
||||
<div class="figure">
|
||||
<label for="relative"><img src="images/settings/touchpad.png" alt="{{'CLIENT.NAME_MOUSE_MODE_RELATIVE' | translate}}"/></label>
|
||||
<p class="caption"><label for="relative">{{'CLIENT.HELP_MOUSE_MODE_RELATIVE' | translate}}</label></p>
|
||||
<!-- Scrollable body -->
|
||||
<div class="menu-body">
|
||||
<div class="menu-body-content">
|
||||
<div class="menu-body-scroll-region" guac-touch-drag="menuDrag" guac-scroll="menu.scrollState">
|
||||
|
||||
<!-- Clipboard -->
|
||||
<h3>{{'CLIENT.SECTION_HEADER_CLIPBOARD' | translate}}</h3>
|
||||
<div class="content" id="clipboard-settings">
|
||||
<p class="description">{{'CLIENT.HELP_CLIPBOARD' | translate}}</p>
|
||||
<textarea ng-model="client.clipboardData" rows="10" cols="40" id="clipboard"></textarea>
|
||||
</div>
|
||||
|
||||
<!-- File transfers -->
|
||||
<h3 guac-marker="menu.fileTransferMarker">{{'CLIENT.SECTION_HEADER_FILE_TRANSFERS' | translate}}</h3>
|
||||
<div class="content" id="file-transfers">
|
||||
<guac-file-transfer-manager client="client"></guac-file-transfer-manager>
|
||||
</div>
|
||||
|
||||
<!-- Input method -->
|
||||
<h3>{{'CLIENT.SECTION_HEADER_INPUT_METHOD' | translate}}</h3>
|
||||
<div class="content" id="keyboard-settings">
|
||||
|
||||
<!-- No IME -->
|
||||
<div class="choice">
|
||||
<label><input id="ime-none" name="input-method" ng-change="closeMenu()" ng-model="menu.inputMethod" type="radio" value="none"/> {{'CLIENT.NAME_INPUT_METHOD_NONE' | translate}}</label>
|
||||
<p class="caption"><label for="ime-none">{{'CLIENT.HELP_INPUT_METHOD_NONE' | translate}}</label></p>
|
||||
</div>
|
||||
|
||||
<!-- Text input -->
|
||||
<div class="choice">
|
||||
<div class="figure"><label for="ime-text"><img src="images/settings/tablet-keys.png" alt=""/></label></div>
|
||||
<label><input id="ime-text" name="input-method" ng-change="closeMenu()" ng-model="menu.inputMethod" type="radio" value="text"/> {{'CLIENT.NAME_INPUT_METHOD_TEXT' | translate}}</label>
|
||||
<p class="caption"><label for="ime-text">{{'CLIENT.HELP_INPUT_METHOD_TEXT' | translate}} </label></p>
|
||||
</div>
|
||||
|
||||
<!-- Guac OSK -->
|
||||
<div class="choice">
|
||||
<label><input id="ime-osk" name="input-method" ng-change="closeMenu()" ng-model="menu.inputMethod" type="radio" value="osk"/> {{'CLIENT.NAME_INPUT_METHOD_OSK' | translate}}</label>
|
||||
<p class="caption"><label for="ime-osk">{{'CLIENT.HELP_INPUT_METHOD_OSK' | translate}}</label></p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Mouse mode -->
|
||||
<h3>{{'CLIENT.SECTION_HEADER_MOUSE_MODE' | translate}}</h3>
|
||||
<div class="content" id="mouse-settings">
|
||||
<p class="description">{{'CLIENT.HELP_MOUSE_MODE' | translate}}</p>
|
||||
|
||||
<!-- Touchscreen -->
|
||||
<div class="choice">
|
||||
<input name="mouse-mode" ng-change="closeMenu()" ng-model="client.clientProperties.emulateAbsoluteMouse" type="radio" ng-value="true" checked="checked" id="absolute"/>
|
||||
<div class="figure">
|
||||
<label for="absolute"><img src="images/settings/touchscreen.png" alt="{{'CLIENT.NAME_MOUSE_MODE_ABSOLUTE' | translate}}"/></label>
|
||||
<p class="caption"><label for="absolute">{{'CLIENT.HELP_MOUSE_MODE_ABSOLUTE' | translate}}</label></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Touchpad -->
|
||||
<div class="choice">
|
||||
<input name="mouse-mode" ng-change="closeMenu()" ng-model="client.clientProperties.emulateAbsoluteMouse" type="radio" ng-value="false" id="relative"/>
|
||||
<div class="figure">
|
||||
<label for="relative"><img src="images/settings/touchpad.png" alt="{{'CLIENT.NAME_MOUSE_MODE_RELATIVE' | translate}}"/></label>
|
||||
<p class="caption"><label for="relative">{{'CLIENT.HELP_MOUSE_MODE_RELATIVE' | translate}}</label></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Display options -->
|
||||
<h3>{{'CLIENT.SECTION_HEADER_DISPLAY' | translate}}</h3>
|
||||
<div class="content">
|
||||
<div id="zoom-settings">
|
||||
<div ng-click="zoomOut()" id="zoom-out"><img src="images/settings/zoom-out.png" alt="-"/></div>
|
||||
<div id="zoom-state">{{formattedScale()}}%</div>
|
||||
<div ng-click="zoomIn()" id="zoom-in"><img src="images/settings/zoom-in.png" alt="+"/></div>
|
||||
</div>
|
||||
<div><label><input ng-model="menu.autoFit" ng-change="changeAutoFit()" ng-disabled="autoFitDisabled()" type="checkbox" id="auto-fit"/> {{'CLIENT.TEXT_ZOOM_AUTO_FIT' | translate}}</label></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Display options -->
|
||||
<h3>{{'CLIENT.SECTION_HEADER_DISPLAY' | translate}}</h3>
|
||||
<div class="content">
|
||||
<div id="zoom-settings">
|
||||
<div ng-click="zoomOut()" id="zoom-out"><img src="images/settings/zoom-out.png" alt="-"/></div>
|
||||
<div id="zoom-state">{{formattedScale()}}%</div>
|
||||
<div ng-click="zoomIn()" id="zoom-in"><img src="images/settings/zoom-in.png" alt="+"/></div>
|
||||
</div>
|
||||
<div><label><input ng-model="menu.autoFit" ng-change="changeAutoFit()" ng-disabled="autoFitDisabled()" type="checkbox" id="auto-fit"/> {{'CLIENT.TEXT_ZOOM_AUTO_FIT' | translate}}</label></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</guac-viewport>
|
||||
|
||||
Reference in New Issue
Block a user