| |
| <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> |
| |
| <!-- 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> |