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,21 +66,26 @@
             <div class="menu-body" guac-touch-drag="menuDrag" guac-scroll="menu.scrollState">
 
                 <!-- Clipboard -->
+                <div class="menu-section" id="clipboard-settings">
                     <h3>{{'CLIENT.SECTION_HEADER_CLIPBOARD' | translate}}</h3>
-                <div class="content" id="clipboard-settings">
+                    <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 -->
+                <div class="menu-section" id="file-transfers">
                     <h3 guac-marker="menu.fileTransferMarker">{{'CLIENT.SECTION_HEADER_FILE_TRANSFERS' | translate}}</h3>
-                <div class="content" id="file-transfers">
+                    <div class="content">
                         <guac-file-transfer-manager client="client"></guac-file-transfer-manager>
                     </div>
+                </div>
 
                 <!-- Input method -->
+                <div class="menu-section" id="keyboard-settings">
                     <h3>{{'CLIENT.SECTION_HEADER_INPUT_METHOD' | translate}}</h3>
-                <div class="content" id="keyboard-settings">
+                    <div class="content">
 
                         <!-- No IME -->
                         <div class="choice">
@@ -102,10 +107,12 @@
                         </div>
 
                     </div>
+                </div>
 
                 <!-- Mouse mode -->
+                <div class="menu-section" id="mouse-settings">
                     <h3>{{'CLIENT.SECTION_HEADER_MOUSE_MODE' | translate}}</h3>
-                <div class="content" id="mouse-settings">
+                    <div class="content">
                         <p class="description">{{'CLIENT.HELP_MOUSE_MODE' | translate}}</p>
 
                         <!-- Touchscreen -->
@@ -127,8 +134,10 @@
                         </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">
@@ -138,6 +147,7 @@
                         </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>
 

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.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;
 }
 
-.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');
 }
 
-.button.manage,
+.button.manage::before,
-button.manage {
+button.manage::before {
     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');
 }
 
-.button.home,
+.button.home::before,
-button.home {
+button.home::before {
     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');
 }

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;
-
 }