From 3128b69db647097eb843dadbcb570fffa2cf6970 Mon Sep 17 00:00:00 2001 From: Michael Jumper Date: Mon, 4 May 2015 15:10:54 -0700 Subject: [PATCH 1/2] GUAC-587: Use ::before for button images - it's friendlier to overriding CSS. --- .../main/webapp/app/index/styles/buttons.css | 57 ++++++++++++++----- .../webapp/app/settings/styles/buttons.css | 44 +++++++------- 2 files changed, 63 insertions(+), 38 deletions(-) diff --git a/guacamole/src/main/webapp/app/index/styles/buttons.css b/guacamole/src/main/webapp/app/index/styles/buttons.css index 5990761e3..ec257abfc 100644 --- a/guacamole/src/main/webapp/app/index/styles/buttons.css +++ b/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'); } diff --git a/guacamole/src/main/webapp/app/settings/styles/buttons.css b/guacamole/src/main/webapp/app/settings/styles/buttons.css index d67e5dd41..6aa550cdc 100644 --- a/guacamole/src/main/webapp/app/settings/styles/buttons.css +++ b/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; - } From d8512531c6d57ecfc029a8a4be9a7815ac241c23 Mon Sep 17 00:00:00 2001 From: Michael Jumper Date: Tue, 5 May 2015 15:26:37 -0700 Subject: [PATCH 2/2] GUAC-587: Contain each menu section within its own div. --- .../main/webapp/app/client/styles/menu.css | 14 +-- .../webapp/app/client/templates/client.html | 112 ++++++++++-------- 2 files changed, 68 insertions(+), 58 deletions(-) diff --git a/guacamole/src/main/webapp/app/client/styles/menu.css b/guacamole/src/main/webapp/app/client/styles/menu.css index c35949f01..107b397ca 100644 --- a/guacamole/src/main/webapp/app/client/styles/menu.css +++ b/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; } diff --git a/guacamole/src/main/webapp/app/client/templates/client.html b/guacamole/src/main/webapp/app/client/templates/client.html index 01e0fa547..2a2a0cde0 100644 --- a/guacamole/src/main/webapp/app/client/templates/client.html +++ b/guacamole/src/main/webapp/app/client/templates/client.html @@ -66,77 +66,87 @@
-

{{'CLIENT.SECTION_HEADER_CLIPBOARD' | translate}}

-
-

{{'CLIENT.HELP_CLIPBOARD' | translate}}

- + -

{{'CLIENT.SECTION_HEADER_FILE_TRANSFERS' | translate}}

-
- + -

{{'CLIENT.SECTION_HEADER_INPUT_METHOD' | translate}}

-
+