safebox/guacamole-client
4
0
Fork 0
mirror of https://github.com/gyurix1968/guacamole-client.git synced 2025-10-31 00:53:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

GUAC-1161: Move field header within guacFormField directive.

Browse Source
This commit is contained in:
Michael Jumper
2015-04-21 12:25:32 -07:00
parent f29a24ad68
commit 1000bcb866
6 changed files with 53 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
guacamole/src/main/webapp/app/form/directives/form.js
View File

@@ -113,34 +113,6 @@ angular.module('form').directive('guacForm', [function form() {
};
/**
* Produces the translation string for the header of the given
* field. The translation string will be of the form:
*
* <code>NAMESPACE.FIELD_HEADER_NAME<code>
*
* where <code>NAMESPACE</code> is the namespace provided to the
* directive and <code>NAME</code> is the field name transformed
* via translationStringService.canonicalize().
*
* @param {Field} field
* The field for which to produce the translation string.
*
* @returns {String}
* The translation string which produces the translated header
* of the field.
*/
$scope.getFieldHeader = function getFieldHeader(field) {
// If no field, or no name, then no header
if (!field || !field.name)
return '';
return translationStringService.canonicalize($scope.namespace || 'MISSING_NAMESPACE')
+ '.FIELD_HEADER_' + translationStringService.canonicalize(field.name);
};
/**
* Determines whether the given object is a form, under the
* assumption that the object is either a form or a field.

25
guacamole/src/main/webapp/app/form/directives/formField.js
View File

@@ -110,6 +110,31 @@ angular.module('form').directive('guacFormField', [function formField() {
};
/**
* Produces the translation string for the header of the current
* field. The translation string will be of the form:
*
* <code>NAMESPACE.FIELD_HEADER_NAME<code>
*
* where <code>NAMESPACE</code> is the namespace provided to the
* directive and <code>NAME</code> is the field name transformed
* via translationStringService.canonicalize().
*
* @returns {String}
* The translation string which produces the translated header
* of the field.
*/
$scope.getFieldHeader = function getFieldHeader() {
// If no field, or no name, then no header
if (!$scope.field || !$scope.field.name)
return '';
return translationStringService.canonicalize($scope.namespace || 'MISSING_NAMESPACE')
+ '.FIELD_HEADER_' + translationStringService.canonicalize($scope.field.name);
};
/**
* Produces the translation string for the given field option
* value. The translation string will be of the form:

6
guacamole/src/main/webapp/app/form/templates/form.html
View File

@@ -26,10 +26,8 @@
<!-- All fields in form -->
<div class="fields">
<label ng-repeat="field in form.fields" class="labeled-field">
<span class="field-header">{{getFieldHeader(field) | translate}}</span>
<guac-form-field namespace="namespace" field="field" model="values[field.name]"></guac-form-field>
</label>
<guac-form-field ng-repeat="field in form.fields" namespace="namespace"
field="field" model="values[field.name]"></guac-form-field>
</div>
</div>

39
guacamole/src/main/webapp/app/form/templates/formField.html
View File

@@ -1,4 +1,4 @@
<div class="form-field" ng-class="{empty: !model}">
<label class="labeled-field" ng-class="{empty: !model}">
<!--
Copyright 2014 Glyptodon LLC.
@@ -21,22 +21,27 @@
THE SOFTWARE.
-->
<!-- Generic input types -->
<input ng-show="field.type === 'TEXT'" type="text" ng-model="typedValue" autocorrect="off" autocapitalize="off"/>
<input ng-show="field.type === 'NUMERIC'" type="number" ng-model="typedValue" autocorrect="off" autocapitalize="off"/>
<input ng-show="field.type === 'USERNAME'" type="text" ng-model="typedValue" autocorrect="off" autocapitalize="off"/>
<input ng-show="field.type === 'BOOLEAN'" type="checkbox" ng-model="typedValue" autocorrect="off" autocapitalize="off"/>
<!-- Field header -->
<span class="field-header">{{getFieldHeader() | translate}}</span>
<!-- Password field -->
<div ng-show="field.type === 'PASSWORD'" class="password-field">
<input type="{{passwordInputType}}" ng-model="typedValue" autocorrect="off" autocapitalize="off"/>
<div class="icon toggle-password" ng-click="togglePassword()" title="{{getTogglePasswordHelpText() | translate}}"></div>
<!-- Generic input types -->
<div class="form-field">
<input ng-show="field.type === 'TEXT'" type="text" ng-model="typedValue" autocorrect="off" autocapitalize="off"/>
<input ng-show="field.type === 'NUMERIC'" type="number" ng-model="typedValue" autocorrect="off" autocapitalize="off"/>
<input ng-show="field.type === 'USERNAME'" type="text" ng-model="typedValue" autocorrect="off" autocapitalize="off"/>
<input ng-show="field.type === 'BOOLEAN'" type="checkbox" ng-model="typedValue" autocorrect="off" autocapitalize="off"/>
<!-- Password field -->
<div ng-show="field.type === 'PASSWORD'" class="password-field">
<input type="{{passwordInputType}}" ng-model="typedValue" autocorrect="off" autocapitalize="off"/>
<div class="icon toggle-password" ng-click="togglePassword()" title="{{getTogglePasswordHelpText() | translate}}"></div>
</div>
<!-- Multiline field -->
<textarea ng-show="field.type === 'MULTILINE'" ng-model="typedValue" autocorrect="off" autocapitalize="off"></textarea>
<!-- Enumerated field -->
<select ng-show="field.type === 'ENUM'" ng-model="typedValue" ng-options="option.value as getFieldOption(option.value) | translate for option in field.options | orderBy: value"></select>
</div>
<!-- Multiline field -->
<textarea ng-show="field.type === 'MULTILINE'" ng-model="typedValue" autocorrect="off" autocapitalize="off"></textarea>
<!-- Enumerated field -->
<select ng-show="field.type === 'ENUM'" ng-model="typedValue" ng-options="option.value as getFieldOption(option.value) | translate for option in field.options | orderBy: value"></select>
</div>
</label>

6
guacamole/src/main/webapp/app/login/styles/login.css
View File

@@ -64,7 +64,7 @@ p.login-error {
position: relative;
}
.login-fields .field-header {
.login-fields .labeled-field .field-header {
display: block;
position: absolute;
@@ -79,10 +79,10 @@ p.login-error {
}
.login-fields .form-field.empty input {
.login-fields .labeled-field.empty input {
background: transparent;
}
.login-fields .form-field input:focus {
.login-fields .labeled-field input:focus {
background: white;
}

1
guacamole/src/main/webapp/app/manage/styles/connection-parameter.css
View File

@@ -39,4 +39,5 @@
.connection-parameters .form .fields .form-field {
display: table-cell;
padding: 0.125em;
vertical-align: top;
}