AMBARI-22548 Admin View: update toggle styles. (atkach)
Project: http://git-wip-us.apache.org/repos/asf/ambari/repo Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/c3150a46 Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/c3150a46 Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/c3150a46 Branch: refs/heads/branch-3.0-perf Commit: c3150a4652d8b129383a9a49fc3fd78991b224b7 Parents: 1f7bd75 Author: Andrii Tkach <atk...@apache.org> Authored: Wed Nov 29 19:27:44 2017 +0200 Committer: Andrii Tkach <atk...@apache.org> Committed: Thu Nov 30 12:40:00 2017 +0200 ---------------------------------------------------------------------- .../ui/admin-web/app/styles/toggle-switch.css | 72 ++++++++++++++++++++ .../app/views/ambariViews/modals/create.html | 3 +- .../app/views/authentication/main.html | 6 +- .../views/loginActivities/homeDirectory.html | 6 +- .../app/views/loginActivities/loginMessage.html | 6 +- .../userManagement/modals/groupCreate.html | 3 +- .../views/userManagement/modals/userCreate.html | 11 ++- .../app/views/userManagement/userEdit.html | 12 ++-- 8 files changed, 104 insertions(+), 15 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/ambari/blob/c3150a46/ambari-admin/src/main/resources/ui/admin-web/app/styles/toggle-switch.css ---------------------------------------------------------------------- diff --git a/ambari-admin/src/main/resources/ui/admin-web/app/styles/toggle-switch.css b/ambari-admin/src/main/resources/ui/admin-web/app/styles/toggle-switch.css new file mode 100644 index 0000000..3e36a6c --- /dev/null +++ b/ambari-admin/src/main/resources/ui/admin-web/app/styles/toggle-switch.css @@ -0,0 +1,72 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +.ats-switch { + border-radius: 20px; + height: 40px; + min-width: 66px; + width: 66px; + position: relative; + overflow: hidden; + border-color: #EBECF1; + border-width: 2px; +} + +.ats-switch .knob { + margin-left: 34px; + border-radius: 20px; + height: 32px; + width: 32px; + margin-top: 2px; +} + +.ats-switch .switch-left, +.ats-switch .switch-right { + position: absolute; + right: -40px; +} + +.ats-switch .switch-animate { + height: 100%; +} + +.ats-switch .switch-off { + background-color: white; +} + +.ats-switch .switch-on { + background-color: #1EB475; + left: -10%; +} + +.ats-switch .switch-on .knob { + background-color: white; +} + +.ats-switch .switch-off .knob { + background-color: #999; +} + +.switch-option-label { + padding-left: 5px; + font-size: 14px; +} + +.switch-inline-label { + line-height: 40px; +} http://git-wip-us.apache.org/repos/asf/ambari/blob/c3150a46/ambari-admin/src/main/resources/ui/admin-web/app/views/ambariViews/modals/create.html ---------------------------------------------------------------------- diff --git a/ambari-admin/src/main/resources/ui/admin-web/app/views/ambariViews/modals/create.html b/ambari-admin/src/main/resources/ui/admin-web/app/views/ambariViews/modals/create.html index 82f90b3..b9d50c7 100644 --- a/ambari-admin/src/main/resources/ui/admin-web/app/views/ambariViews/modals/create.html +++ b/ambari-admin/src/main/resources/ui/admin-web/app/views/ambariViews/modals/create.html @@ -17,7 +17,7 @@ --> <form role="form" id="create-instance-form" name="form.instanceCreateForm" novalidate> <div class="modal-header"> - <h1 class="modal-title"> + <h1 class="modal-title col-sm-8"> <span ng-if="!instanceClone"> {{'views.create' | translate}} </span> @@ -25,6 +25,7 @@ {{'views.clone' | translate}} </span> </h1> + <a class="close" aria-hidden="true" ng-click="cancel()">×</a> </div> <div class="modal-body" ng-hide="isLoading"> http://git-wip-us.apache.org/repos/asf/ambari/blob/c3150a46/ambari-admin/src/main/resources/ui/admin-web/app/views/authentication/main.html ---------------------------------------------------------------------- diff --git a/ambari-admin/src/main/resources/ui/admin-web/app/views/authentication/main.html b/ambari-admin/src/main/resources/ui/admin-web/app/views/authentication/main.html index 0275a21..9e672e1 100644 --- a/ambari-admin/src/main/resources/ui/admin-web/app/views/authentication/main.html +++ b/ambari-admin/src/main/resources/ui/admin-web/app/views/authentication/main.html @@ -28,9 +28,11 @@ <div class="form-horizontal"> <div class="form-group col-sm-12">{{'authentication.description' | translate}}</div> <div class="form-group"> - <label class="control-label col-sm-4">{{'authentication.ldap' | translate}}</label> + <label class="switch-inline-label col-sm-4">{{'authentication.ldap' | translate}}</label> <span class="col-sm-8"> - <toggle-switch model="isLDAPEnabled" ng-disabled="isRequestRunning" on-label="{{'authentication.on' | translate}}" off-label="{{'authentication.off' | translate}}" class="switch-primary" data-off-color="danger" on-change="toggleAuthentication()"></toggle-switch> + <toggle-switch model="isLDAPEnabled" ng-disabled="isRequestRunning" class="switch-success" data-off-color="danger" on-change="toggleAuthentication()"></toggle-switch> + <span ng-if="isLDAPEnabled" class="switch-option-label">{{'authentication.on' | translate}}</span> + <span ng-if="!isLDAPEnabled" class="switch-option-label">{{'authentication.off' | translate}}</span> </span> </div> </div> http://git-wip-us.apache.org/repos/asf/ambari/blob/c3150a46/ambari-admin/src/main/resources/ui/admin-web/app/views/loginActivities/homeDirectory.html ---------------------------------------------------------------------- diff --git a/ambari-admin/src/main/resources/ui/admin-web/app/views/loginActivities/homeDirectory.html b/ambari-admin/src/main/resources/ui/admin-web/app/views/loginActivities/homeDirectory.html index 913bc0f..7cf17cd 100644 --- a/ambari-admin/src/main/resources/ui/admin-web/app/views/loginActivities/homeDirectory.html +++ b/ambari-admin/src/main/resources/ui/admin-web/app/views/loginActivities/homeDirectory.html @@ -25,9 +25,11 @@ </div> <fieldset> <div class="form-group"> - <label class="col-sm-4 control-label">{{'common.loginActivities.homeDirectory.autoCreate' | translate}}</label> + <label class="col-sm-4 switch-inline-label">{{'common.loginActivities.homeDirectory.autoCreate' | translate}}</label> <div class="col-sm-8"> - <toggle-switch model="autoCreate" on-label="{{'common.enabled' | translate}}" off-label="{{'common.disabled' | translate}}" class="switch-primary"></toggle-switch> + <toggle-switch model="autoCreate" class="switch-success"></toggle-switch> + <span ng-if="autoCreate" class="switch-option-label">{{'common.enabled' | translate}}</span> + <span ng-if="!autoCreate" class="switch-option-label">{{'common.disabled' | translate}}</span> </div> <input type="checkbox" name="autoCreate" class="hidden" ng-model="autoCreate"> </div> http://git-wip-us.apache.org/repos/asf/ambari/blob/c3150a46/ambari-admin/src/main/resources/ui/admin-web/app/views/loginActivities/loginMessage.html ---------------------------------------------------------------------- diff --git a/ambari-admin/src/main/resources/ui/admin-web/app/views/loginActivities/loginMessage.html b/ambari-admin/src/main/resources/ui/admin-web/app/views/loginActivities/loginMessage.html index e5890e5..3055ba1 100644 --- a/ambari-admin/src/main/resources/ui/admin-web/app/views/loginActivities/loginMessage.html +++ b/ambari-admin/src/main/resources/ui/admin-web/app/views/loginActivities/loginMessage.html @@ -22,9 +22,11 @@ <div class="well"> <fieldset> <div class="form-group"> - <label class="col-sm-2 control-label">{{'common.loginActivities.status' | translate}}</label> + <label class="col-sm-2 switch-inline-label">{{'common.loginActivities.status' | translate}}</label> <div class="col-sm-10"> - <toggle-switch ng-click="changeStatus();" model="status" on-label="{{'common.enabled' | translate}}" off-label="{{'common.disabled' | translate}}" class="switch-primary userstatus" data-off-color="disabled"></toggle-switch> + <toggle-switch ng-click="changeStatus();" model="status" class="switch-success" data-off-color="disabled"></toggle-switch> + <span ng-if="status" class="switch-option-label">{{'common.enabled' | translate}}</span> + <span ng-if="!status" class="switch-option-label">{{'common.disabled' | translate}}</span> </div> <input type="checkbox" name="status" class="hidden" ng-model="status"> </div> http://git-wip-us.apache.org/repos/asf/ambari/blob/c3150a46/ambari-admin/src/main/resources/ui/admin-web/app/views/userManagement/modals/groupCreate.html ---------------------------------------------------------------------- diff --git a/ambari-admin/src/main/resources/ui/admin-web/app/views/userManagement/modals/groupCreate.html b/ambari-admin/src/main/resources/ui/admin-web/app/views/userManagement/modals/groupCreate.html index e11b478..7692a68 100644 --- a/ambari-admin/src/main/resources/ui/admin-web/app/views/userManagement/modals/groupCreate.html +++ b/ambari-admin/src/main/resources/ui/admin-web/app/views/userManagement/modals/groupCreate.html @@ -18,9 +18,10 @@ <form id="create-group-form" role="form" novalidate name="form.groupCreateForm"> <div class="modal-header"> - <h1 class="modal-title"> + <h1 class="modal-title col-sm-8"> {{'groups.createLocal' | translate}} </h1> + <a class="close" aria-hidden="true" ng-click="cancel()">×</a> </div> <div class="modal-body"> <div class="form-group" http://git-wip-us.apache.org/repos/asf/ambari/blob/c3150a46/ambari-admin/src/main/resources/ui/admin-web/app/views/userManagement/modals/userCreate.html ---------------------------------------------------------------------- diff --git a/ambari-admin/src/main/resources/ui/admin-web/app/views/userManagement/modals/userCreate.html b/ambari-admin/src/main/resources/ui/admin-web/app/views/userManagement/modals/userCreate.html index 2a71102..b1b5876 100644 --- a/ambari-admin/src/main/resources/ui/admin-web/app/views/userManagement/modals/userCreate.html +++ b/ambari-admin/src/main/resources/ui/admin-web/app/views/userManagement/modals/userCreate.html @@ -18,9 +18,10 @@ <form id="create-user-form" role="form" novalidate name="form.userCreateForm"> <div class="modal-header"> - <h1 class="modal-title"> + <h1 class="modal-title col-sm-8"> {{'users.create' | translate}} </h1> + <a class="close" aria-hidden="true" ng-click="cancel()">×</a> </div> <div class="modal-body"> <div class="form-group" @@ -125,7 +126,9 @@ <i class="fa fa-question-circle" aria-hidden="true"></i> </label> <div> - <toggle-switch model="formData.isAdmin" on-label="{{'common.yes' | translate}}" off-label="{{'common.no' | translate}}" class="switch-primary" data-off-color="danger"></toggle-switch> + <toggle-switch model="formData.isAdmin" class="switch-success" data-off-color="danger"></toggle-switch> + <span ng-if="formData.isAdmin" class="switch-option-label">{{'common.yes' | translate}}</span> + <span ng-if="!formData.isAdmin" class="switch-option-label">{{'common.no' | translate}}</span> </div> </div> @@ -135,7 +138,9 @@ <i class="fa fa-question-circle" aria-hidden="true"></i> </label> <div> - <toggle-switch model="formData.isActive" on-label="{{'users.active' | translate}}" off-label="{{'users.inactive' | translate}}" class="switch-primary" data-off-color="danger"></toggle-switch> + <toggle-switch model="formData.isActive" class="switch-success" data-off-color="danger"></toggle-switch> + <span ng-if="formData.isActive" class="switch-option-label">{{'users.active' | translate}}</span> + <span ng-if="!formData.isActive" class="switch-option-label">{{'users.inactive' | translate}}</span> </div> </div> http://git-wip-us.apache.org/repos/asf/ambari/blob/c3150a46/ambari-admin/src/main/resources/ui/admin-web/app/views/userManagement/userEdit.html ---------------------------------------------------------------------- diff --git a/ambari-admin/src/main/resources/ui/admin-web/app/views/userManagement/userEdit.html b/ambari-admin/src/main/resources/ui/admin-web/app/views/userManagement/userEdit.html index cc46173..8a96663 100644 --- a/ambari-admin/src/main/resources/ui/admin-web/app/views/userManagement/userEdit.html +++ b/ambari-admin/src/main/resources/ui/admin-web/app/views/userManagement/userEdit.html @@ -38,15 +38,19 @@ </div> </div> <div class="form-group"> - <label class="col-sm-2 ">{{'users.status' | translate}}</label> + <label class="col-sm-2 switch-inline-label">{{'users.status' | translate}}</label> <div class="col-sm-10"> - <toggle-switch on-change="toggleUserActive()" disabled-tooltip="{{'users.alerts.cannotChange' | translate: '{term: constants.status}'}}" ng-disabled="isCurrentUser" model="user.active" on-label="{{'users.active' | translate}}" off-label="{{'users.inactive' | translate}}" class="switch-primary userstatus {{user ? '' : 'no-animation'}}" data-off-color="danger"></toggle-switch> + <toggle-switch on-change="toggleUserActive()" disabled-tooltip="{{'users.alerts.cannotChange' | translate: '{term: constants.status}'}}" ng-disabled="isCurrentUser" model="user.active" class="switch-success userstatus {{user ? '' : 'no-animation'}}" data-off-color="danger"></toggle-switch> + <span ng-if="user.active" class="switch-option-label">{{'users.active' | translate}}</span> + <span ng-if="!user.active" class="switch-option-label">{{'users.inactive' | translate}}</span> </div> </div> <div class="form-group"> - <label class="col-sm-2 "><span class="glyphicon glyphicon-flash"></span> {{'users.ambariAdmin' | translate}}</label> + <label class="col-sm-2 switch-inline-label"><span class="glyphicon glyphicon-flash"></span> {{'users.ambariAdmin' | translate}}</label> <div class="col-sm-10"> - <toggle-switch on-change="toggleUserAdmin()" disabled-tooltip="{{'users.alerts.cannotChange' | translate: '{term: constants.admin}'}}" ng-disabled="isCurrentUser" model="user.admin" on-label="{{'common.yes' | translate}}" off-label="{{'common.no' | translate}}" class="switch-primary userstatus {{user ? '' : 'no-animation'}}" data-off-color="danger"></toggle-switch> + <toggle-switch on-change="toggleUserAdmin()" disabled-tooltip="{{'users.alerts.cannotChange' | translate: '{term: constants.admin}'}}" ng-disabled="isCurrentUser" model="user.admin" class="switch-success userstatus {{user ? '' : 'no-animation'}}" data-off-color="danger"></toggle-switch> + <span ng-if="user.admin" class="switch-option-label">{{'common.yes' | translate}}</span> + <span ng-if="!user.admin" class="switch-option-label">{{'common.no' | translate}}</span> </div> </div> <div class="form-group">