From f77b763ef8638bbe3195a9fac3aff0894b802d4b Mon Sep 17 00:00:00 2001 From: Michael Jumper Date: Sun, 8 Feb 2015 11:42:11 -0800 Subject: [PATCH 1/6] GUAC-1052: Explicitly close custom tags. --- guacamole/src/main/webapp/app/client/templates/client.html | 2 +- .../main/webapp/app/home/templates/guacRecentConnections.html | 2 +- guacamole/src/main/webapp/app/home/templates/home.html | 4 ++-- .../main/webapp/app/manage/templates/manageConnection.html | 2 +- guacamole/src/main/webapp/index.html | 4 ++-- 5 files changed, 7 insertions(+), 7 deletions(-) diff --git a/guacamole/src/main/webapp/app/client/templates/client.html b/guacamole/src/main/webapp/app/client/templates/client.html index 685045312..b6b61ad74 100644 --- a/guacamole/src/main/webapp/app/client/templates/client.html +++ b/guacamole/src/main/webapp/app/client/templates/client.html @@ -29,7 +29,7 @@
- +
diff --git a/guacamole/src/main/webapp/app/home/templates/guacRecentConnections.html b/guacamole/src/main/webapp/app/home/templates/guacRecentConnections.html index 07cf4b52b..27e514daf 100644 --- a/guacamole/src/main/webapp/app/home/templates/guacRecentConnections.html +++ b/guacamole/src/main/webapp/app/home/templates/guacRecentConnections.html @@ -30,7 +30,7 @@
- +
diff --git a/guacamole/src/main/webapp/app/home/templates/home.html b/guacamole/src/main/webapp/app/home/templates/home.html index 887b93cad..5fabad7c5 100644 --- a/guacamole/src/main/webapp/app/home/templates/home.html +++ b/guacamole/src/main/webapp/app/home/templates/home.html @@ -32,7 +32,7 @@

{{'HOME.SECTION_HEADER_RECENT_CONNECTIONS' | translate}}

- +
@@ -41,7 +41,7 @@ + connection-group-template="'app/home/templates/connectionGroup.html'"> diff --git a/guacamole/src/main/webapp/app/manage/templates/manageConnection.html b/guacamole/src/main/webapp/app/manage/templates/manageConnection.html index 85dca606a..b4e5be351 100644 --- a/guacamole/src/main/webapp/app/manage/templates/manageConnection.html +++ b/guacamole/src/main/webapp/app/manage/templates/manageConnection.html @@ -68,7 +68,7 @@ THE SOFTWARE. {{getProtocolParameterName(connection.protocol, parameter.name) | translate}} - + diff --git a/guacamole/src/main/webapp/index.html b/guacamole/src/main/webapp/index.html index 0f6971afb..ffa6eb08b 100644 --- a/guacamole/src/main/webapp/index.html +++ b/guacamole/src/main/webapp/index.html @@ -37,7 +37,7 @@ THE SOFTWARE.
- +
@@ -47,7 +47,7 @@ THE SOFTWARE.
- +
From 40b6858ea90c166e4c2fe39a9b02caf17fcd1e3e Mon Sep 17 00:00:00 2001 From: Michael Jumper Date: Tue, 10 Feb 2015 14:30:11 -0800 Subject: [PATCH 2/6] GUAC-1052: Work around IE10 issues with display: table. --- guacamole/src/main/webapp/app/client/styles/client.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/guacamole/src/main/webapp/app/client/styles/client.css b/guacamole/src/main/webapp/app/client/styles/client.css index f39cc3be6..af8c41f03 100644 --- a/guacamole/src/main/webapp/app/client/styles/client.css +++ b/guacamole/src/main/webapp/app/client/styles/client.css @@ -47,7 +47,7 @@ body.client { } .client-view .client-body { - display: table-row; + display: table-cell; width: 100%; height: 100%; } From 16055e58b07251df52d9193955e81a1ab8330bbb Mon Sep 17 00:00:00 2001 From: Michael Jumper Date: Tue, 17 Feb 2015 17:05:33 -0800 Subject: [PATCH 3/6] GUAC-1052: Migrate to flexbox layout for menu. --- .../main/webapp/app/client/styles/menu.css | 59 ++++--- .../webapp/app/client/templates/client.html | 152 +++++++++--------- 2 files changed, 114 insertions(+), 97 deletions(-) diff --git a/guacamole/src/main/webapp/app/client/styles/menu.css b/guacamole/src/main/webapp/app/client/styles/menu.css index f3f324025..a08006a37 100644 --- a/guacamole/src/main/webapp/app/client/styles/menu.css +++ b/guacamole/src/main/webapp/app/client/styles/menu.css @@ -38,16 +38,45 @@ } .menu-content { - overflow: hidden; - display: table; - table-layout: fixed; + + /* IE10 */ + display: -ms-flexbox; + -ms-flex-align: stretch; + -ms-flex-direction: column; + + /* Ancient Mozilla */ + display: -moz-box; + -moz-box-align: stretch; + -moz-box-orient: vertical; + + /* Ancient WebKit */ + display: -webkit-box; + -webkit-box-align: stretch; + -webkit-box-orient: vertical; + + /* Old WebKit */ + display: -webkit-flex; + -webkit-align-items: stretch; + -webkit-flex-direction: column; + + /* W3C */ + display: flex; + align-items: stretch; + flex-direction: column; + width: 100%; height: 100%; + } .menu-header { - display: table-row; - height: 0; + + -ms-flex: 0 0 auto; + -moz-box-flex: 0; + -webkit-box-flex: 0; + -webkit-flex: 0 0 auto; + flex: 0 0 auto; + } .menu-header h2 { @@ -55,23 +84,15 @@ } .menu-body { - display: table-row; - height: 100%; -} -.menu-body-content { - position: relative; - width: 100%; - height: 100%; -} + -ms-flex: 0 1 auto; + -moz-box-flex: 1; + -webkit-box-flex: 1; + -webkit-flex: 0 1 auto; + flex: 0 1 auto; -.menu-body-scroll-region { overflow: auto; - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; + } #menu h3 { diff --git a/guacamole/src/main/webapp/app/client/templates/client.html b/guacamole/src/main/webapp/app/client/templates/client.html index b6b61ad74..3e8a36bf0 100644 --- a/guacamole/src/main/webapp/app/client/templates/client.html +++ b/guacamole/src/main/webapp/app/client/templates/client.html @@ -64,86 +64,82 @@ -
-
-
+
- -

{{'CLIENT.SECTION_HEADER_CLIPBOARD' | translate}}

-
-

{{'CLIENT.HELP_CLIPBOARD' | translate}}

- -
- - -

{{'CLIENT.SECTION_HEADER_FILE_TRANSFERS' | translate}}

-
- -
- - -

{{'CLIENT.SECTION_HEADER_INPUT_METHOD' | translate}}

-
- - -
- -

-
- - -
-
- -

-
- - -
- -

-
- -
- - -

{{'CLIENT.SECTION_HEADER_MOUSE_MODE' | translate}}

-
-

{{'CLIENT.HELP_MOUSE_MODE' | translate}}

- - -
- -
- -

-
-
- - -
- -
- -

-
-
- -
- - -

{{'CLIENT.SECTION_HEADER_DISPLAY' | translate}}

-
-
-
-
-
{{formattedScale()}}%
-
+
-
-
-
- -
+ +

{{'CLIENT.SECTION_HEADER_CLIPBOARD' | translate}}

+
+

{{'CLIENT.HELP_CLIPBOARD' | translate}}

+
+ + +

{{'CLIENT.SECTION_HEADER_FILE_TRANSFERS' | translate}}

+
+ +
+ + +

{{'CLIENT.SECTION_HEADER_INPUT_METHOD' | translate}}

+
+ + +
+ +

+
+ + +
+
+ +

+
+ + +
+ +

+
+ +
+ + +

{{'CLIENT.SECTION_HEADER_MOUSE_MODE' | translate}}

+
+

{{'CLIENT.HELP_MOUSE_MODE' | translate}}

+ + +
+ +
+ +

+
+
+ + +
+ +
+ +

+
+
+ +
+ + +

{{'CLIENT.SECTION_HEADER_DISPLAY' | translate}}

+
+
+
-
+
{{formattedScale()}}%
+
+
+
+
+
+
From 019031726434a7affea58a7c7c677f006be5f305 Mon Sep 17 00:00:00 2001 From: Michael Jumper Date: Wed, 18 Feb 2015 14:11:10 -0800 Subject: [PATCH 4/6] GUAC-1052: Fix rendering of flexbox menu in older browsers. --- .../main/webapp/app/client/styles/menu.css | 145 +++++++++++++++++- .../webapp/app/client/templates/client.html | 6 +- 2 files changed, 140 insertions(+), 11 deletions(-) diff --git a/guacamole/src/main/webapp/app/client/styles/menu.css b/guacamole/src/main/webapp/app/client/styles/menu.css index a08006a37..132b72b40 100644 --- a/guacamole/src/main/webapp/app/client/styles/menu.css +++ b/guacamole/src/main/webapp/app/client/styles/menu.css @@ -77,10 +77,61 @@ -webkit-flex: 0 0 auto; flex: 0 0 auto; + /* IE10 */ + display: -ms-flexbox; + -ms-flex-align: center; + -ms-flex-direction: row; + + /* Ancient Mozilla */ + display: -moz-box; + -moz-box-align: center; + -moz-box-orient: horizontal; + + /* Ancient WebKit */ + display: -webkit-box; + -webkit-box-align: center; + -webkit-box-orient: horizontal; + + /* Old WebKit */ + display: -webkit-flex; + -webkit-align-items: center; + -webkit-flex-direction: row; + + /* W3C */ + display: flex; + align-items: center; + flex-direction: row; + + padding: 0.75em 0.5em; + + border-bottom: 1px solid rgba(0, 0, 0, 0.125); + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.125); + background: rgba(0, 0, 0, 0.04); + } -.menu-header h2 { - margin-bottom: 0; +.menu-header > * { + -ms-flex: 0 0 auto; + -moz-box-flex: 0; + -webkit-box-flex: 0; + -webkit-flex: 0 0 auto; + flex: 0 0 auto; +} + +.menu-header > h2 { + + -ms-flex: 1 0 auto; + -moz-box-flex: 1; + -webkit-box-flex: 1; + -webkit-flex: 1 0 auto; + flex: 1 0 auto; + + border: none; + padding: 0; + box-shadow: none; + background: none; + margin: 0; + } .menu-body { @@ -91,20 +142,100 @@ -webkit-flex: 0 1 auto; flex: 0 1 auto; + padding: 1em; overflow: auto; + /* IE10 */ + display: -ms-flexbox; + -ms-flex-align: stretch; + -ms-flex-direction: column; + + /* Ancient Mozilla */ + display: -moz-box; + -moz-box-align: stretch; + -moz-box-orient: vertical; + + /* Ancient WebKit */ + display: -webkit-box; + -webkit-box-align: stretch; + -webkit-box-orient: vertical; + + /* Old WebKit */ + display: -webkit-flex; + -webkit-align-items: stretch; + -webkit-flex-direction: column; + + /* W3C */ + display: flex; + align-items: stretch; + flex-direction: column; + +} + +.menu-body > * { + -ms-flex: 0 0 auto; + -moz-box-flex: 0; + -webkit-box-flex: 0; + -webkit-flex: 0 0 auto; + flex: 0 0 auto; } #menu h3 { - margin: 1em; + margin: 0; + padding: 0; + padding-bottom: 1em; } #menu .content { - margin: 1em; + + padding: 0; + margin: 0; + + /* IE10 */ + display: -ms-flexbox; + -ms-flex-align: stretch; + -ms-flex-direction: column; + + /* Ancient Mozilla */ + display: -moz-box; + -moz-box-align: stretch; + -moz-box-orient: vertical; + + /* Ancient WebKit */ + display: -webkit-box; + -webkit-box-align: stretch; + -webkit-box-orient: vertical; + + /* Old WebKit */ + display: -webkit-flex; + -webkit-align-items: stretch; + -webkit-flex-direction: column; + + /* W3C */ + display: flex; + align-items: stretch; + flex-direction: column; + +} + +#menu .content + h3 { + padding-top: 1em; } #menu .content > * { - margin: 1em 0; + + margin: 0; + + -ms-flex: 0 0 auto; + -moz-box-flex: 0; + -webkit-box-flex: 0; + -webkit-flex: 0 0 auto; + flex: 0 0 auto; + +} + +#menu .content > * + * { + margin-top: 1em; } #menu, @@ -137,7 +268,6 @@ #menu #mouse-settings .choice .figure { display: inline-block; vertical-align: middle; - max-width: 80%; } #menu #keyboard-settings .caption { @@ -153,7 +283,8 @@ #menu #mouse-settings .figure img { display: block; - max-width: 100%; + width: 75%; + max-width: 320px; margin: 1em auto; } diff --git a/guacamole/src/main/webapp/app/client/templates/client.html b/guacamole/src/main/webapp/app/client/templates/client.html index 3e8a36bf0..8505df0bf 100644 --- a/guacamole/src/main/webapp/app/client/templates/client.html +++ b/guacamole/src/main/webapp/app/client/templates/client.html @@ -56,11 +56,9 @@
-
- {{'CLIENT.ACTION_NAVIGATE_HOME' | translate}} - {{'CLIENT.ACTION_DISCONNECT' | translate}} -

{{client.name}}

+ {{'CLIENT.ACTION_NAVIGATE_HOME' | translate}} + {{'CLIENT.ACTION_DISCONNECT' | translate}}
From 7a4c606efd4bfc818abe97625ac5256b0042285d Mon Sep 17 00:00:00 2001 From: Michael Jumper Date: Wed, 18 Feb 2015 15:02:58 -0800 Subject: [PATCH 5/6] GUAC-1052: Migrate to flexbox layout for client view. --- .../main/webapp/app/client/styles/client.css | 62 +++++++++++++++++-- .../main/webapp/app/client/styles/menu.css | 12 ++-- 2 files changed, 62 insertions(+), 12 deletions(-) diff --git a/guacamole/src/main/webapp/app/client/styles/client.css b/guacamole/src/main/webapp/app/client/styles/client.css index af8c41f03..04bd3af67 100644 --- a/guacamole/src/main/webapp/app/client/styles/client.css +++ b/guacamole/src/main/webapp/app/client/styles/client.css @@ -38,21 +38,71 @@ body.client { } .client-view { - display: table; + + /* IE10 */ + display: -ms-flexbox; + -ms-flex-align: stretch; + -ms-flex-direction: column; + -ms-flex-pack: end; + + /* Ancient Mozilla */ + display: -moz-box; + -moz-box-align: stretch; + -moz-box-orient: vertical; + -moz-box-pack: end; + + /* Ancient WebKit */ + display: -webkit-box; + -webkit-box-align: stretch; + -webkit-box-orient: vertical; + -webkit-box-pack: end; + + /* Old WebKit */ + display: -webkit-flex; + -webkit-align-items: stretch; + -webkit-flex-direction: column; + -webkit-flex-pack: end; + + /* W3C */ + display: flex; + align-items: stretch; + flex-direction: column; + flex-pack: end; + position: absolute; top: 0; left: 0; width: 100%; height: 100%; + } .client-view .client-body { - display: table-cell; - width: 100%; - height: 100%; + -ms-flex: 1 1 auto; + -moz-box-flex: 1; + -webkit-box-flex: 1; + -webkit-flex: 1 1 auto; + flex: 1 1 auto; + position: relative; } .client-view .client-bottom { - display: table-row; - height: 0; + -ms-flex: 0 0 auto; + -moz-box-flex: 0; + -webkit-box-flex: 0; + -webkit-flex: 0 0 auto; + flex: 0 0 auto; } + +.client-view .client-body .main { + + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; + + width: auto; + height: auto; + +} \ No newline at end of file diff --git a/guacamole/src/main/webapp/app/client/styles/menu.css b/guacamole/src/main/webapp/app/client/styles/menu.css index 132b72b40..102713f4e 100644 --- a/guacamole/src/main/webapp/app/client/styles/menu.css +++ b/guacamole/src/main/webapp/app/client/styles/menu.css @@ -120,11 +120,11 @@ .menu-header > h2 { - -ms-flex: 1 0 auto; + -ms-flex: 1 1 auto; -moz-box-flex: 1; -webkit-box-flex: 1; - -webkit-flex: 1 0 auto; - flex: 1 0 auto; + -webkit-flex: 1 1 auto; + flex: 1 1 auto; border: none; padding: 0; @@ -136,11 +136,11 @@ .menu-body { - -ms-flex: 0 1 auto; + -ms-flex: 1 1 auto; -moz-box-flex: 1; -webkit-box-flex: 1; - -webkit-flex: 0 1 auto; - flex: 0 1 auto; + -webkit-flex: 1 1 auto; + flex: 1 1 auto; padding: 1em; overflow: auto; From 2e612ac70b7b9747a798af005e5375b5331fcab0 Mon Sep 17 00:00:00 2001 From: Michael Jumper Date: Wed, 18 Feb 2015 16:31:46 -0800 Subject: [PATCH 6/6] GUAC-1052: Migrate to flexbox layout for client view. --- .../main/webapp/app/client/styles/client.css | 18 ++++++++-- .../webapp/app/client/templates/client.html | 34 ++++++++++--------- 2 files changed, 33 insertions(+), 19 deletions(-) diff --git a/guacamole/src/main/webapp/app/client/styles/client.css b/guacamole/src/main/webapp/app/client/styles/client.css index 04bd3af67..db405fff1 100644 --- a/guacamole/src/main/webapp/app/client/styles/client.css +++ b/guacamole/src/main/webapp/app/client/styles/client.css @@ -39,6 +39,19 @@ body.client { .client-view { + position: absolute; + top: 0; + left: 0; + + width: 100%; + height: 100%; + + font-size: 0px; + +} + +.client-view-content { + /* IE10 */ display: -ms-flexbox; -ms-flex-align: stretch; @@ -69,12 +82,11 @@ body.client { flex-direction: column; flex-pack: end; - position: absolute; - top: 0; - left: 0; width: 100%; height: 100%; + font-size: 12pt; + } .client-view .client-body { diff --git a/guacamole/src/main/webapp/app/client/templates/client.html b/guacamole/src/main/webapp/app/client/templates/client.html index 8505df0bf..9d8e2cb9b 100644 --- a/guacamole/src/main/webapp/app/client/templates/client.html +++ b/guacamole/src/main/webapp/app/client/templates/client.html @@ -24,30 +24,32 @@
+
- -
+ +
- - + + -
- - -
- - -
-
- -
- + +
+ + +
+ +
+ + +
+ +
+
-