You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@ambari.apache.org by nc...@apache.org on 2017/11/30 14:25:43 UTC
[49/50] [abbrv] ambari git commit: AMBARI-22548 Admin View: update
toggle styles. (atkach)
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-feature-AMBARI-21674
Commit: c3150a4652d8b129383a9a49fc3fd78991b224b7
Parents: 1f7bd75
Author: Andrii Tkach <at...@apache.org>
Authored: Wed Nov 29 19:27:44 2017 +0200
Committer: Andrii Tkach <at...@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">