ambari-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From avija...@apache.org
Subject [27/50] [abbrv] ambari git commit: AMBARI-22548 Admin View: update toggle styles. (atkach)
Date Fri, 01 Dec 2017 18:10:42 GMT
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-ams
Commit: c3150a4652d8b129383a9a49fc3fd78991b224b7
Parents: 1f7bd75
Author: Andrii Tkach <atkach@apache.org>
Authored: Wed Nov 29 19:27:44 2017 +0200
Committer: Andrii Tkach <atkach@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()">&times;</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()">&times;</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()">&times;</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">


Mime
View raw message