diff --git a/guacamole/src/main/webapp/app/form/directives/form.js b/guacamole/src/main/webapp/app/form/directives/form.js new file mode 100644 index 000000000..099f4a1d6 --- /dev/null +++ b/guacamole/src/main/webapp/app/form/directives/form.js @@ -0,0 +1,82 @@ +/* + * Copyright (C) 2015 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 directive that allows editing of a collection of fields. + */ +angular.module('form').directive('guacForm', [function form() { + + return { + // Element only + restrict: 'E', + replace: true, + scope: { + + /** + * The fields to display. + * + * @type Field[] + */ + fields : '=', + + /** + * The object which will receive all field values. Each field value + * will be assigned to the property of this object having the same + * name. + * + * @type Object. + */ + model : '=' + + }, + templateUrl: 'app/form/templates/form.html', + controller: ['$scope', function formController($scope) { + + /** + * The object which will receive all field values. Normally, this + * will be the object provided within the "model" attribute. If + * no such object has been provided, a blank model will be used + * instead as a placeholder, such that the fields of this form + * will have something to bind to. + * + * @type Object. + */ + $scope.values = {}; + + // Update string value and re-assign to model when field is changed + $scope.$watch('model', function setModel(model) { + + // Assign new model only if provided + if (model) + $scope.values = model; + + // Otherwise, use blank model + else + $scope.values = {}; + + }); + + }] // end controller + }; + +}]); diff --git a/guacamole/src/main/webapp/app/form/styles/form-field.css b/guacamole/src/main/webapp/app/form/styles/form-field.css new file mode 100644 index 000000000..b40dcbf14 --- /dev/null +++ b/guacamole/src/main/webapp/app/form/styles/form-field.css @@ -0,0 +1,50 @@ +/* + * Copyright (C) 2015 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. + */ + +/* Keep toggle-password icon on same line */ +.form-field .password-field { + white-space: nowrap; +} + +/* Generic 1x1em icon/button */ +.form-field .password-field .icon.toggle-password { + + display: inline-block; + opacity: 0.5; + cursor: default; + + background-repeat: no-repeat; + background-size: 1em; + width: 1em; + height: 1em; + +} + +/* Icon for unmasking passwords */ +.form-field .password-field input[type=password] ~ .icon.toggle-password { + background-image: url('images/action-icons/guac-show-pass.png'); +} + +/* Icon for masking passwords */ +.form-field .password-field input[type=text] ~ .icon.toggle-password { + background-image: url('images/action-icons/guac-hide-pass.png'); +} diff --git a/guacamole/src/main/webapp/app/form/styles/form.css b/guacamole/src/main/webapp/app/form/styles/form.css index b40dcbf14..1c37abbb3 100644 --- a/guacamole/src/main/webapp/app/form/styles/form.css +++ b/guacamole/src/main/webapp/app/form/styles/form.css @@ -20,31 +20,8 @@ * THE SOFTWARE. */ -/* Keep toggle-password icon on same line */ -.form-field .password-field { - white-space: nowrap; -} - -/* Generic 1x1em icon/button */ -.form-field .password-field .icon.toggle-password { - - display: inline-block; - opacity: 0.5; - cursor: default; - - background-repeat: no-repeat; - background-size: 1em; - width: 1em; - height: 1em; - -} - -/* Icon for unmasking passwords */ -.form-field .password-field input[type=password] ~ .icon.toggle-password { - background-image: url('images/action-icons/guac-show-pass.png'); -} - -/* Icon for masking passwords */ -.form-field .password-field input[type=text] ~ .icon.toggle-password { - background-image: url('images/action-icons/guac-hide-pass.png'); +table.form th { + text-align: left; + font-weight: normal; + padding-right: 1em; } diff --git a/guacamole/src/main/webapp/app/form/templates/form.html b/guacamole/src/main/webapp/app/form/templates/form.html new file mode 100644 index 000000000..e8b29eb58 --- /dev/null +++ b/guacamole/src/main/webapp/app/form/templates/form.html @@ -0,0 +1,32 @@ + + + + + + + + + +
{{field.title | translate}} + +
diff --git a/guacamole/src/main/webapp/app/manage/templates/manageConnection.html b/guacamole/src/main/webapp/app/manage/templates/manageConnection.html index c0320de72..3e2fdf3d8 100644 --- a/guacamole/src/main/webapp/app/manage/templates/manageConnection.html +++ b/guacamole/src/main/webapp/app/manage/templates/manageConnection.html @@ -59,17 +59,8 @@ THE SOFTWARE.

{{'MANAGE_CONNECTION.SECTION_HEADER_PARAMETERS' | translate}}

-
- - - - - - - -
{{parameter.title | translate}} - -
+
+