safebox/guacamole-client
4
0
Fork 0
mirror of https://github.com/gyurix1968/guacamole-client.git synced 2025-10-28 07:33:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #174 from glyptodon/friendlier-css

Browse Source 
GUAC-587: Make DOM/CSS friendlier for theming
This commit is contained in:
James Muehlner
2015-05-05 20:09:37 -07:00
parent 0ed3b9a992 d8512531c6
commit f0cd211043
4 changed files with 131 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
guacamole/src/main/webapp/app/client/styles/menu.css
View File

@@ -127,12 +127,6 @@
flex: 0 0 auto; flex: 0 0 auto;
} }
#menu h3 {
margin: 0;
padding: 0;
padding-bottom: 1em;
}
#menu .content { #menu .content {
padding: 0; padding: 0;
@@ -165,7 +159,13 @@
} }
#menu .content + h3 { .menu-section h3 {
margin: 0;
padding: 0;
padding-bottom: 1em;
}
.menu-section ~ .menu-section h3 {
padding-top: 1em; padding-top: 1em;
} }

112
guacamole/src/main/webapp/app/client/templates/client.html
View File

@@ -66,77 +66,87 @@
<div class="menu-body" guac-touch-drag="menuDrag" guac-scroll="menu.scrollState"> <div class="menu-body" guac-touch-drag="menuDrag" guac-scroll="menu.scrollState">
<!-- Clipboard --> <!-- Clipboard -->
<h3>{{'CLIENT.SECTION_HEADER_CLIPBOARD' | translate}}</h3> <div class="menu-section" id="clipboard-settings">
<div class="content" id="clipboard-settings"> <h3>{{'CLIENT.SECTION_HEADER_CLIPBOARD' | translate}}</h3>
<p class="description">{{'CLIENT.HELP_CLIPBOARD' | translate}}</p> <div class="content">
<textarea ng-model="client.clipboardData" rows="10" cols="40" id="clipboard"></textarea> <p class="description">{{'CLIENT.HELP_CLIPBOARD' | translate}}</p>
<textarea ng-model="client.clipboardData" rows="10" cols="40" id="clipboard"></textarea>
</div>
</div> </div>
<!-- File transfers --> <!-- File transfers -->
<h3 guac-marker="menu.fileTransferMarker">{{'CLIENT.SECTION_HEADER_FILE_TRANSFERS' | translate}}</h3> <div class="menu-section" id="file-transfers">
<div class="content" id="file-transfers"> <h3 guac-marker="menu.fileTransferMarker">{{'CLIENT.SECTION_HEADER_FILE_TRANSFERS' | translate}}</h3>
<guac-file-transfer-manager client="client"></guac-file-transfer-manager> <div class="content">
<guac-file-transfer-manager client="client"></guac-file-transfer-manager>
</div>
</div> </div>
<!-- Input method --> <!-- Input method -->
<h3>{{'CLIENT.SECTION_HEADER_INPUT_METHOD' | translate}}</h3> <div class="menu-section" id="keyboard-settings">
<div class="content" 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>
<!-- 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> </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 --> <!-- Mouse mode -->
<h3>{{'CLIENT.SECTION_HEADER_MOUSE_MODE' | translate}}</h3> <div class="menu-section" id="mouse-settings">
<div class="content" id="mouse-settings"> <h3>{{'CLIENT.SECTION_HEADER_MOUSE_MODE' | translate}}</h3>
<p class="description">{{'CLIENT.HELP_MOUSE_MODE' | translate}}</p> <div class="content">
<p class="description">{{'CLIENT.HELP_MOUSE_MODE' | translate}}</p>
<!-- Touchscreen --> <!-- Touchscreen -->
<div class="choice"> <div class="choice">
<input name="mouse-mode" ng-change="closeMenu()" ng-model="client.clientProperties.emulateAbsoluteMouse" type="radio" ng-value="true" checked="checked" id="absolute"/> <input name="mouse-mode" ng-change="closeMenu()" ng-model="client.clientProperties.emulateAbsoluteMouse" type="radio" ng-value="true" checked="checked" id="absolute"/>
<div class="figure"> <div class="figure">
<label for="absolute"><img src="images/settings/touchscreen.png" alt="{{'CLIENT.NAME_MOUSE_MODE_ABSOLUTE' | translate}}"/></label> <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> <p class="caption"><label for="absolute">{{'CLIENT.HELP_MOUSE_MODE_ABSOLUTE' | translate}}</label></p>
</div>
</div> </div>
</div>
<!-- Touchpad --> <!-- Touchpad -->
<div class="choice"> <div class="choice">
<input name="mouse-mode" ng-change="closeMenu()" ng-model="client.clientProperties.emulateAbsoluteMouse" type="radio" ng-value="false" id="relative"/> <input name="mouse-mode" ng-change="closeMenu()" ng-model="client.clientProperties.emulateAbsoluteMouse" type="radio" ng-value="false" id="relative"/>
<div class="figure"> <div class="figure">
<label for="relative"><img src="images/settings/touchpad.png" alt="{{'CLIENT.NAME_MOUSE_MODE_RELATIVE' | translate}}"/></label> <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> <p class="caption"><label for="relative">{{'CLIENT.HELP_MOUSE_MODE_RELATIVE' | translate}}</label></p>
</div>
</div> </div>
</div>
</div>
</div> </div>
<!-- Display options --> <!-- Display options -->
<h3>{{'CLIENT.SECTION_HEADER_DISPLAY' | translate}}</h3> <div class="menu-section" id="display-settings">
<div class="content"> <h3>{{'CLIENT.SECTION_HEADER_DISPLAY' | translate}}</h3>
<div id="zoom-settings"> <div class="content">
<div ng-click="zoomOut()" id="zoom-out"><img src="images/settings/zoom-out.png" alt="-"/></div> <div id="zoom-settings">
<div id="zoom-state">{{formattedScale()}}%</div> <div ng-click="zoomOut()" id="zoom-out"><img src="images/settings/zoom-out.png" alt="-"/></div>
<div ng-click="zoomIn()" id="zoom-in"><img src="images/settings/zoom-in.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><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>

57
guacamole/src/main/webapp/app/index/styles/buttons.css
View File

@@ -79,35 +79,62 @@ input[type="submit"]:disabled, button:disabled, button.danger:disabled {
opacity: 0.75; opacity: 0.75;
} }
.button.logout, .button.manage, .button.back, .button.home, .button.change-password, .button.logout,
button.logout, button.manage, button.back, button.home, button.change-password { button.logout,
background-repeat: no-repeat; .button.manage,
background-size: 1em; button.manage,
background-position: 0.5em 0.45em; .button.back,
button.back,
.button.home,
button.home,
.button.change-password,
button.change-password {
position: relative;
padding-left: 1.8em; padding-left: 1.8em;
} }
.button.logout, .button.logout::before,
button.logout { button.logout::before,
.button.manage::before,
button.manage::before,
.button.back::before,
button.back::before,
.button.home::before,
button.home::before,
.button.change-password::before,
button.change-password::before {
content: ' ';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 1.8em;
background-repeat: no-repeat;
background-size: 1em;
background-position: 0.5em 0.45em;
}
.button.logout::before,
button.logout::before {
background-image: url('images/action-icons/guac-logout.png'); background-image: url('images/action-icons/guac-logout.png');
} }
.button.manage, .button.manage::before,
button.manage { button.manage::before {
background-image: url('images/action-icons/guac-config.png'); background-image: url('images/action-icons/guac-config.png');
} }
.button.back, .button.back::before,
button.back { button.back::before {
background-image: url('images/action-icons/guac-back.png'); background-image: url('images/action-icons/guac-back.png');
} }
.button.home, .button.home::before,
button.home { button.home::before {
background-image: url('images/action-icons/guac-home.png'); background-image: url('images/action-icons/guac-home.png');
} }
.button.change-password, .button.change-password::before,
button.change-password { button.change-password::before {
background-image: url('images/action-icons/guac-key.png'); background-image: url('images/action-icons/guac-key.png');
} }

44
guacamole/src/main/webapp/app/settings/styles/buttons.css
View File

@@ -24,37 +24,35 @@ button.add-user,
a.button.add-connection, a.button.add-connection,
a.button.add-connection-group { a.button.add-connection-group {
font-size: 0.8em; font-size: 0.8em;
padding-left: 1.8em;
position: relative;
} }
button.add-user { button.add-user::before,
a.button.add-connection::before,
a.button.add-connection-group::before {
content: ' ';
position: absolute;
width: 1.8em;
top: 0;
bottom: 0;
left: 0;
background-repeat: no-repeat;
background-size: 1em;
background-position: 0.5em 0.45em;
}
button.add-user::before {
background-image: url('images/action-icons/guac-user-add.png'); background-image: url('images/action-icons/guac-user-add.png');
background-repeat: no-repeat;
background-size: 1em;
background-position: 0.5em 0.45em;
padding-left: 1.8em;
} }
a.button.add-connection { a.button.add-connection::before {
background-image: url('images/action-icons/guac-monitor-add.png'); background-image: url('images/action-icons/guac-monitor-add.png');
background-repeat: no-repeat;
background-size: 1em;
background-position: 0.5em 0.45em;
padding-left: 1.8em;
} }
a.button.add-connection-group { a.button.add-connection-group::before {
background-image: url('images/action-icons/guac-group-add.png'); background-image: url('images/action-icons/guac-group-add.png');
background-repeat: no-repeat;
background-size: 1em;
background-position: 0.5em 0.45em;
padding-left: 1.8em;
} }