GUACAMOLE-422: Use the same display mechanism and structure (the guacForm directive) for all locale preferences, not just the time zone.

This commit is contained in:
Michael Jumper
2019-06-15 13:43:28 -07:00
parent ec963dd036
commit 78977ae4fc
3 changed files with 35 additions and 48 deletions

View File

@@ -39,7 +39,6 @@ angular.module('settings').directive('guacSettingsPreferences', [function guacSe
var $translate = $injector.get('$translate');
var authenticationService = $injector.get('authenticationService');
var guacNotification = $injector.get('guacNotification');
var languageService = $injector.get('languageService');
var permissionService = $injector.get('permissionService');
var preferenceService = $injector.get('preferenceService');
var requestService = $injector.get('requestService');
@@ -80,19 +79,21 @@ angular.module('settings').directive('guacSettingsPreferences', [function guacSe
$scope.preferences = preferenceService.preferences;
/**
* A map of all available language keys to their human-readable
* names.
* The fields which should be displayed for choosing locale
* preferences. Each field name must be a property on
* $scope.preferences.
*
* @type Object.<String, String>
* @type Field[]
*/
$scope.languages = null;
$scope.localeFields = [
{ 'type' : 'LANGUAGE', 'name' : 'language' },
{ 'type' : 'TIMEZONE', 'name' : 'timezone' }
];
/**
* Switches the active display langugae to the chosen language.
*/
$scope.changeLanguage = function changeLanguage() {
$translate.use($scope.preferences.language);
};
// Automatically update applied translation when language preference is changed
$scope.$watch('preferences.language', function changeLanguage(language) {
$translate.use(language);
});
/**
* The new password for the user.
@@ -169,17 +170,6 @@ angular.module('settings').directive('guacSettingsPreferences', [function guacSe
};
// Retrieve defined languages
languageService.getLanguages()
.then(function languagesRetrieved(languages) {
$scope.languages = Object.keys(languages).map(function(key) {
return {
key: key,
value: languages[key]
};
});
}, requestService.DIE);
// Retrieve current permissions
permissionService.getEffectivePermissions(dataSource, username)
.then(function permissionsRetrieved(permissions) {

View File

@@ -17,8 +17,23 @@
* under the License.
*/
.preferences .update-password .form,
.preferences .locale .form {
.preferences .form .fields {
display: table;
padding-left: 0.5em;
border-left: 3px solid rgba(0,0,0,0.125);
}
.preferences .form .fields .labeled-field {
display: table-row;
}
.preferences .form .fields .field-header,
.preferences .form .fields .form-field {
display: table-cell;
padding: 0.125em;
vertical-align: top;
}
.preferences .form .fields .field-header {
padding-right: 1em;
}

View File

@@ -3,25 +3,7 @@
<!-- Locale settings -->
<div class="settings section locale">
<p>{{'SETTINGS_PREFERENCES.HELP_LOCALE' | translate}}</p>
<!-- Language selection -->
<div class="form">
<table class="fields">
<tr>
<th>{{'SETTINGS_PREFERENCES.FIELD_HEADER_LANGUAGE' | translate}}</th>
<td><select ng-model="preferences.language" ng-change="changeLanguage()" ng-options="language.key as language.value for language in languages | orderBy: key"></select></td>
</tr>
</table>
</div>
<!-- Timezone selection -->
<div class="form">
<guac-form-field
field="{ 'type' : 'TIMEZONE', 'name' : 'timezone' }"
model="preferences.timezone"
namespace="'SETTINGS_PREFERENCES'">
</guac-form-field>
</div>
<guac-form content="localeFields" model="preferences" namespace="'SETTINGS_PREFERENCES'"></guac-form>
</div>
<!-- Password update -->