Merge pull request #174 from glyptodon/friendlier-css

GUAC-587: Make DOM/CSS friendlier for theming

guacamole/src/main/webapp/app/client/styles/menu.css

@@ -127,12 +127,6 @@
     flex: 0 0 auto;
 }
 
-#menu h3 {
-    margin: 0;
-    padding: 0;
-    padding-bottom: 1em;
-}
-
 #menu .content {
 
     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;
 }
 

guacamole/src/main/webapp/app/client/templates/client.html

@@ -66,77 +66,87 @@
             <div class="menu-body" 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 class="menu-section" id="clipboard-settings">
+                    <h3>{{'CLIENT.SECTION_HEADER_CLIPBOARD' | translate}}</h3>
+                    <div class="content">
+                        <p class="description">{{'CLIENT.HELP_CLIPBOARD' | translate}}</p>
+                        <textarea ng-model="client.clipboardData" rows="10" cols="40" id="clipboard"></textarea>
+                    </div>
                 </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 class="menu-section" id="file-transfers">
+                    <h3 guac-marker="menu.fileTransferMarker">{{'CLIENT.SECTION_HEADER_FILE_TRANSFERS' | translate}}</h3>
+                    <div class="content">
+                        <guac-file-transfer-manager client="client"></guac-file-transfer-manager>
+                    </div>
                 </div>
 
                 <!-- Input method -->
-                <h3>{{'CLIENT.SECTION_HEADER_INPUT_METHOD' | translate}}</h3>
-                <div class="content" id="keyboard-settings">
+                <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>
 
-                    <!-- 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>
+                <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>
+                        <!-- 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>
-                    </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>
+                        <!-- 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>
                 </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 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 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><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>

guacamole/src/main/webapp/app/index/styles/buttons.css

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

guacamole/src/main/webapp/app/settings/styles/buttons.css

@@ -24,37 +24,35 @@ button.add-user,
 a.button.add-connection,
 a.button.add-connection-group {
     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-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-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-repeat: no-repeat;
-    background-size: 1em;
-    background-position: 0.5em 0.45em;
-
-    padding-left: 1.8em;
-
 }