mirror of
https://github.com/gyurix1968/guacamole-client.git
synced 2025-09-06 05:07:41 +00:00
236 lines
12 KiB
HTML
236 lines
12 KiB
HTML
|
|
<guac-viewport>
|
|
|
|
<!-- Client view -->
|
|
<div class="client-view">
|
|
<div class="client-view-content">
|
|
|
|
<!-- Central portion of view -->
|
|
<div class="client-body" guac-touch-drag="clientDrag" guac-touch-pinch="clientPinch">
|
|
|
|
<!-- Client for current connection -->
|
|
<guac-client client="client"></guac-client>
|
|
|
|
<!-- All other active connections -->
|
|
<div id="other-connections">
|
|
<guac-client-panel clients="otherClients"></guac-client-panel>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Bottom portion of view -->
|
|
<div class="client-bottom">
|
|
|
|
<!-- Text input -->
|
|
<div class="text-input-container" ng-class="{ open : showTextInput }">
|
|
<guac-text-input needs-focus="showTextInput"></guac-text-input>
|
|
</div>
|
|
|
|
<!-- On-screen keyboard -->
|
|
<div class="keyboard-container" ng-class="{ open : showOSK }">
|
|
<guac-osk layout="'CLIENT.URL_OSK_LAYOUT' | translate"></guac-osk>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- File transfers -->
|
|
<div id="file-transfer-dialog" ng-show="hasTransfers()">
|
|
<guac-file-transfer-manager client="client"></guac-file-transfer-manager>
|
|
</div>
|
|
|
|
<!-- Connection stability warning -->
|
|
<div id="connection-warning" ng-show="isConnectionUnstable()">
|
|
{{'CLIENT.TEXT_CLIENT_STATUS_UNSTABLE' | translate}}
|
|
</div>
|
|
|
|
<!-- Menu -->
|
|
<div class="menu" ng-class="{open: menu.shown}" id="guac-menu">
|
|
<div class="menu-content" ng-if="menu.shown">
|
|
|
|
<!-- Stationary header -->
|
|
<div class="header">
|
|
<h2 ng-hide="rootConnectionGroups">{{client.name}}</h2>
|
|
<h2 class="connection-select-menu" ng-show="rootConnectionGroups">
|
|
<guac-menu menu-title="client.name" interactive="true">
|
|
<div class="all-connections">
|
|
<guac-group-list-filter connection-groups="rootConnectionGroups"
|
|
filtered-connection-groups="filteredRootConnectionGroups"
|
|
placeholder="'CLIENT.FIELD_PLACEHOLDER_FILTER' | translate"
|
|
connection-properties="filteredConnectionProperties"
|
|
connection-group-properties="filteredConnectionGroupProperties"></guac-group-list-filter>
|
|
<guac-group-list
|
|
connection-groups="filteredRootConnectionGroups"
|
|
templates="{
|
|
'connection' : 'app/client/templates/connection.html',
|
|
'connection-group' : 'app/client/templates/connectionGroup.html'
|
|
}"
|
|
page-size="10"></guac-group-list>
|
|
</div>
|
|
</guac-menu>
|
|
</h2>
|
|
<div class="share-menu" ng-show="canShareConnection()">
|
|
<guac-menu menu-title="'CLIENT.ACTION_SHARE' | translate">
|
|
<ul ng-repeat="sharingProfile in sharingProfiles">
|
|
<li><a ng-click="share(sharingProfile)">{{sharingProfile.name}}</a></li>
|
|
</ul>
|
|
</guac-menu>
|
|
</div>
|
|
<guac-user-menu local-actions="clientMenuActions"></guac-user-menu>
|
|
</div>
|
|
|
|
<!-- Scrollable body -->
|
|
<div class="menu-body" guac-touch-drag="menuDrag" guac-scroll="menu.scrollState">
|
|
|
|
<!-- Connection sharing -->
|
|
<div class="menu-section" id="share-links" ng-show="isShared()">
|
|
<div class="content">
|
|
<h3>{{'CLIENT.INFO_CONNECTION_SHARED' | translate}}</h3>
|
|
<p class="description"
|
|
translate="CLIENT.HELP_SHARE_LINK"
|
|
translate-values="{LINKS : getShareLinkCount()}"></p>
|
|
<table>
|
|
<tr ng-repeat="link in client.shareLinks | toArray | orderBy: value.name">
|
|
<th>{{link.value.name}}</th>
|
|
<td><a href="{{link.value.href}}" target="_blank">{{link.value.href}}</a></td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Clipboard -->
|
|
<div class="menu-section" id="clipboard-settings">
|
|
<h3>{{'CLIENT.SECTION_HEADER_CLIPBOARD' | translate}}</h3>
|
|
<div class="content">
|
|
<p class="description">{{'CLIENT.HELP_CLIPBOARD' | translate}}</p>
|
|
<guac-clipboard data="client.clipboardData"></guac-clipboard>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Devices -->
|
|
<div class="menu-section" id="devices" ng-show="client.filesystems.length">
|
|
<h3>{{'CLIENT.SECTION_HEADER_DEVICES' | translate}}</h3>
|
|
<div class="content">
|
|
<div class="device filesystem" ng-repeat="filesystem in client.filesystems" ng-click="showFilesystemMenu(filesystem)">
|
|
{{filesystem.name}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Connection parameters which may be modified while the connection is open -->
|
|
<div class="menu-section connection-parameters" id="connection-settings" ng-show="client.protocol">
|
|
<guac-form namespace="getProtocolNamespace(client.protocol)"
|
|
content="client.forms"
|
|
model="menu.connectionParameters"
|
|
model-only="true"></guac-form>
|
|
</div>
|
|
|
|
<!-- Input method -->
|
|
<div class="menu-section" id="keyboard-settings">
|
|
<h3>{{'CLIENT.SECTION_HEADER_INPUT_METHOD' | translate}}</h3>
|
|
<div class="content">
|
|
|
|
<!-- 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>
|
|
</div>
|
|
|
|
<!-- Mouse mode -->
|
|
<div class="menu-section" id="mouse-settings">
|
|
<h3>{{'CLIENT.SECTION_HEADER_MOUSE_MODE' | translate}}</h3>
|
|
<div class="content">
|
|
<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>
|
|
</div>
|
|
|
|
<!-- Display options -->
|
|
<div class="menu-section" id="display-settings">
|
|
<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 class="zoom-ctrl">
|
|
<input type="number" class="zoom-ctrl" guac-zoom-ctrl
|
|
ng-model="client.clientProperties.scale"
|
|
ng-model-options="{ updateOn: 'blur submit' }"
|
|
ng-change="zoomSet()" />%
|
|
</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>
|
|
|
|
<!-- Filesystem menu -->
|
|
<div id="filesystem-menu" class="menu" ng-class="{open: isFilesystemMenuShown()}">
|
|
<div class="menu-content">
|
|
|
|
<!-- Stationary header -->
|
|
<div class="header">
|
|
<h2>{{filesystemMenuContents.name}}</h2>
|
|
<button class="upload button" guac-upload="uploadFiles">{{'CLIENT.ACTION_UPLOAD_FILES' | translate}}</button>
|
|
<button class="back" ng-click="hideFilesystemMenu()">{{'CLIENT.ACTION_NAVIGATE_BACK' | translate}}</button>
|
|
</div>
|
|
|
|
<!-- Breadcrumbs -->
|
|
<div class="header breadcrumbs"><div
|
|
class="breadcrumb root"
|
|
ng-click="changeDirectory(filesystemMenuContents, filesystemMenuContents.root)"></div><div
|
|
class="breadcrumb"
|
|
ng-repeat="file in getPath(filesystemMenuContents.currentDirectory)"
|
|
ng-click="changeDirectory(filesystemMenuContents, file)">{{file.name}}</div>
|
|
</div>
|
|
|
|
<!-- Scrollable body -->
|
|
<div class="menu-body">
|
|
<guac-file-browser client="client" filesystem="filesystemMenuContents"></guac-file-browser>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</guac-viewport>
|