From 1fd54973823fbc8f26275d0f3608587e16e13256 Mon Sep 17 00:00:00 2001 From: Michael Jumper Date: Wed, 12 Nov 2014 18:26:38 -0800 Subject: [PATCH] GUAC-605: Add statusModal service. Set appropriate styles. --- .../main/webapp/app/client/styles/client.css | 63 ------------------- .../app/index/controllers/statusController.js | 52 +++++++++++++++ .../webapp/app/index/services/statusModal.js | 36 +++++++++++ .../src/main/webapp/app/index/styles/ui.css | 26 ++++++++ .../webapp/app/index/templates/status.html | 42 +++++++++++++ 5 files changed, 156 insertions(+), 63 deletions(-) create mode 100644 guacamole/src/main/webapp/app/index/controllers/statusController.js create mode 100644 guacamole/src/main/webapp/app/index/services/statusModal.js create mode 100644 guacamole/src/main/webapp/app/index/templates/status.html diff --git a/guacamole/src/main/webapp/app/client/styles/client.css b/guacamole/src/main/webapp/app/client/styles/client.css index 1687e0ea1..2e5d16737 100644 --- a/guacamole/src/main/webapp/app/client/styles/client.css +++ b/guacamole/src/main/webapp/app/client/styles/client.css @@ -51,69 +51,6 @@ img { opacity: 0; } -/* Dialogs */ - -div.dialogOuter { - display: table; - height: 100%; - width: 100%; - position: fixed; - left: 0; - top: 0; - background: rgba(0, 0, 0, 0.75); -} - -div.dialogMiddle { - width: 100%; - text-align: center; - display: table-cell; - vertical-align: middle; -} - -button { - - border-style: solid; - border-width: 1px; - - padding: 0.25em; - padding-right: 1em; - padding-left: 1em; - -} - -button:active { - - padding-top: 0.35em; - padding-left: 1.1em; - - padding-bottom: 0.15em; - padding-right: 0.9em; - -} - -button#reconnect { - display: none; -} - -.guac-error button#reconnect { - display: inline; - - background: #200; - border-color: #822; - color: #944; -} - -.guac-error button#reconnect:hover { - background: #822; - border-color: #B33; - color: black; -} - - -div.dialog p { - margin: 0; -} - div.main { overflow: auto; position: fixed; diff --git a/guacamole/src/main/webapp/app/index/controllers/statusController.js b/guacamole/src/main/webapp/app/index/controllers/statusController.js new file mode 100644 index 000000000..9429fd5b2 --- /dev/null +++ b/guacamole/src/main/webapp/app/index/controllers/statusController.js @@ -0,0 +1,52 @@ +/* + * Copyright (C) 2014 Glyptodon LLC + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in + * all copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN + * THE SOFTWARE. + */ + +/** + * The controller for the status modal. + */ +angular.module('manage').controller('statusController', ['$scope', '$injector', + function statusController($scope, $injector) { + + var statusModal = $injector.get('statusModal'); + + /** + * Fires a guacStatusAction event signalling a chosen action. By default, + * the status modal will be closed, but this can be prevented by calling + * preventDefault() on the event. + * + * @param {String} action The name of the action. + */ + $scope.fireAction = function fireAction(action) { + + // Fire action event + var actionEvent = $scope.$broadcast('guacStatusAction', action); + + // Close modal unless default is prevented + if (!actionEvent.defaultPrevented) + statusModal.deactivate(); + + }; + +}]); + + + diff --git a/guacamole/src/main/webapp/app/index/services/statusModal.js b/guacamole/src/main/webapp/app/index/services/statusModal.js new file mode 100644 index 000000000..42f693fd0 --- /dev/null +++ b/guacamole/src/main/webapp/app/index/services/statusModal.js @@ -0,0 +1,36 @@ +/* + * Copyright (C) 2014 Glyptodon LLC + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in + * all copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN + * THE SOFTWARE. + */ + +/** + * A modal for displaying the current status. + */ +angular.module('manage').factory('statusModal', ['btfModal', + function statusModal(btfModal) { + + // Create the modal object to be used later to actually create the modal + return btfModal({ + controller: 'statusController', + controllerAs: 'modal', + templateUrl: 'app/index/templates/status.html' + }); + +}]); diff --git a/guacamole/src/main/webapp/app/index/styles/ui.css b/guacamole/src/main/webapp/app/index/styles/ui.css index bf9d2e782..efecd895a 100644 --- a/guacamole/src/main/webapp/app/index/styles/ui.css +++ b/guacamole/src/main/webapp/app/index/styles/ui.css @@ -81,6 +81,7 @@ input[type="submit"], button, a.button { padding-right: 1em; padding-left: 1em; min-width: 5em; + margin: 0.25em; } @@ -171,6 +172,23 @@ div.section { padding: 1em; } +.dialog-outer { + display: table; + height: 100%; + width: 100%; + position: fixed; + left: 0; + top: 0; + background: rgba(0, 0, 0, 0.5); +} + +.dialog-middle { + width: 100%; + text-align: center; + display: table-cell; + vertical-align: middle; +} + .dialog.edit { max-height: 100%; } @@ -237,6 +255,14 @@ div.section { text-align: center; } +.dialog.status { + width: 3in; +} + +.dialog.status > * { + margin: 0.25em; +}; + /* * List elements */ diff --git a/guacamole/src/main/webapp/app/index/templates/status.html b/guacamole/src/main/webapp/app/index/templates/status.html new file mode 100644 index 000000000..b5a025ded --- /dev/null +++ b/guacamole/src/main/webapp/app/index/templates/status.html @@ -0,0 +1,42 @@ + + + + +
+
+
+ + +

{{title | translate}}

+ + +

{{text | translate}}

+ + +
+ +
+ +
+
+