Browse Source

HUE-856 [useradmin] Use universal toolbar

Added universal toolbar to users, groups and permissions
Moved password boxes on edit user page
Improved usability of jHueSelector in case of empty list
Enrico Berti 13 năm trước cách đây
mục cha
commit
ec29e531fc

+ 1 - 1
apps/useradmin/src/useradmin/templates/edit_group.mako

@@ -82,7 +82,7 @@ ${layout.menubar(section='groups', _=_)}
 		$("#id_members").jHueSelector({
             selectAllLabel: "${_('Select all')}",
             searchPlaceholder: "${_('Search')}",
-            noChoicesFound: "${_('No users found.')}",
+            noChoicesFound: "${_('No users found.')} <a href='${url('useradmin.views.edit_user')}'>${_('Create a new user now')} &raquo;</a>",
             width:600,
             height:240
         });

+ 9 - 8
apps/useradmin/src/useradmin/templates/edit_user.mako

@@ -55,25 +55,26 @@ ${layout.menubar(section='users', _=_)}
 	<form id="editForm" action="${urllib.quote(action)}" method="POST" class="form form-horizontal">
 		<fieldset>
 			% for field in form:
-                %if field.name == "first_name":
+                %if field.name == "username" and "password1" in form.fields:
+                    ${render_field(form["username"])}
                     <div class="row">
                         <div class="span5">
-                        ${render_field(form["first_name"])}
+                        ${render_field(form["password1"])}
                         </div>
                         <div class="span4">
-                        ${render_field(form["last_name"])}
+                        ${render_field(form["password2"])}
                         </div>
                     </div>
-                %elif field.name == "password1":
+                %elif field.name == "first_name":
                     <div class="row">
                         <div class="span5">
-                        ${render_field(form["password1"])}
+                        ${render_field(form["first_name"])}
                         </div>
                         <div class="span4">
-                        ${render_field(form["password2"])}
+                        ${render_field(form["last_name"])}
                         </div>
                     </div>
-                %elif field.name == "last_name" or field.name == "password2":
+                %elif field.name == "last_name" or field.name == "password1" or field.name == "password2":
                     ## skip rendering
                 %else:
 				    ${render_field(field)}
@@ -100,7 +101,7 @@ ${layout.menubar(section='users', _=_)}
 		$("#id_groups").jHueSelector({
             selectAllLabel: "${_('Select all')}",
             searchPlaceholder: "${_('Search')}",
-            noChoicesFound: "${_('No groups found.')}",
+            noChoicesFound: "${_('No groups found.')} <a href='${url('useradmin.views.edit_group')}'>${_('Create a new group now')} &raquo;</a>",
             width:618,
             height:240
         });

+ 42 - 31
apps/useradmin/src/useradmin/templates/list_groups.mako

@@ -20,34 +20,33 @@ from django.utils.translation import ugettext as _
 from useradmin.models import group_permissions
 %>
 
+<%namespace name="actionbar" file="actionbar.mako" />
 <%namespace name="layout" file="layout.mako" />
 ${commonheader(_('Hue Groups'), "useradmin", user, "100px")}
 ${layout.menubar(section='groups', _=_)}
 
 <div class="container-fluid">
     <h1>${_('Hue Groups')}</h1>
-    <div class="subnavContainer">
-        <div class="subnav sticky">
-            <p class="pull-right">
-                <input id="filterInput" type="text" class="input-xlarge search-query" placeholder="${_('Search for group name, members, etc...')}">
-            </p>
-            <p style="padding: 4px">
-                %if user.is_superuser:
-                    <button id="deleteGroupBtn" class="btn confirmationModal" title="${_('Delete')}" disabled="disabled"><i class="icon-trash"></i> ${_('Delete')}</button>
-                    &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a id="addGroupBtn" href="${url('useradmin.views.edit_group')}" class="btn"><i class="icon-plus-sign"></i> ${_('Add group')}</a>
-                    <a id="addLdapGroupBtn" href="${url('useradmin.views.add_ldap_group')}" class="btn"><i class="icon-refresh"></i> ${_('Add/Sync LDAP group')}</a>
-                    &nbsp;&nbsp;&nbsp;&nbsp;
-                %endif
-            </p>
-        </div>
-    </div>
-    <br/>
+
+    <%actionbar:render>
+        <%def name="actions()">
+            %if user.is_superuser:
+                <button id="deleteGroupBtn" class="btn confirmationModal" title="${_('Delete')}" disabled="disabled"><i class="icon-trash"></i> ${_('Delete')}</button>
+            %endif
+        </%def>
+        <%def name="creation()">
+            %if user.is_superuser:
+                <a id="addGroupBtn" href="${url('useradmin.views.edit_group')}" class="btn"><i class="icon-plus-sign"></i> ${_('Add group')}</a>
+                <a id="addLdapGroupBtn" href="${url('useradmin.views.add_ldap_group')}" class="btn"><i class="icon-refresh"></i> ${_('Add/Sync LDAP group')}</a>
+            %endif
+        </%def>
+    </%actionbar:render>
+
     <table class="table table-striped table-condensed datatables">
     <thead>
       <tr>
         %if user.is_superuser:
-          <th width="1%"><input id="selectAll" type="checkbox"/></th>
+          <th width="1%"><div id="selectAll" class="hueCheckbox"></div></th>
         %endif
         <th>${_('Group Name')}</th>
         <th>${_('Members')}</th>
@@ -58,15 +57,15 @@ ${layout.menubar(section='groups', _=_)}
     % for group in groups:
       <tr class="tableRow" data-search="${group.name}${', '.join([group_user.username for group_user in group.user_set.all()])}">
         %if user.is_superuser:
-          <td class="center" data-row-selector-exclude="true">
-            <input type="checkbox" class="groupCheck" data-group="${group.name}" data-confirmation-url="${ url('useradmin.views.delete_group', name=urllib.quote_plus(group.name)) }" data-row-selector-exclude="true"/>
+          <td data-row-selector-exclude="true">
+              <div class="hueCheckbox groupCheck" data-group="${group.name}" data-confirmation-url="${ url('useradmin.views.delete_group', name=urllib.quote_plus(group.name))}" data-row-selector-exclude="true"></div>
           </td>
         %endif
         <td>
             %if user.is_superuser:
-            <h5><a title="${_('Edit %(groupname)s') % dict(groupname=group.name)}" href="${ url('useradmin.views.edit_group', name=urllib.quote(group.name)) }" data-row-selector="true">${group.name}</a></h5>
+            <strong><a title="${_('Edit %(groupname)s') % dict(groupname=group.name)}" href="${ url('useradmin.views.edit_group', name=urllib.quote(group.name)) }" data-row-selector="true">${group.name}</a></strong>
             %else:
-            <h5>${group.name}</h5>
+            <strong>${group.name}</strong>
             %endif
          </td>
         <td>${', '.join([group_user.username for group_user in group.user_set.all()])}</td>
@@ -126,25 +125,37 @@ ${layout.menubar(section='groups', _=_)}
                 });
             });
 
-            $("#selectAll").change(function(){
-                if ($(this).is(":checked")){
-                    $(".groupCheck").attr("checked", "checked");
+            $("#selectAll").click(function(){
+                if ($(this).attr("checked")) {
+                    $(this).removeAttr("checked");
+                    $(".groupCheck").removeClass("icon-ok").removeAttr("checked");
                 }
                 else {
-                    $(".groupCheck").removeAttr("checked");
+                    $(this).attr("checked", "checked");
+                    $(".groupCheck").addClass("icon-ok").attr("checked", "checked");
                 }
-                $(".groupCheck").change();
+                toggleActions();
             });
 
-            $(".groupCheck").change(function(){
-                if ($(".groupCheck:checked").length == 1){
-                    $("#deleteGroupBtn").removeAttr("disabled").data("confirmation-url", $(".groupCheck:checked").data("confirmation-url"));
+            $(".groupCheck").click(function(){
+                if ($(this).attr("checked")) {
+                    $(this).removeClass("icon-ok").removeAttr("checked");
                 }
                 else {
-                    $("#deleteGroupBtn").attr("disabled", "disabled");
+                    $(this).addClass("icon-ok").attr("checked", "checked");
                 }
+                toggleActions();
             });
 
+            function toggleActions() {
+                if ($(".groupCheck[checked='checked']").length == 1) {
+                    $("#deleteGroupBtn").removeAttr("disabled").data("confirmation-url", $(".groupCheck[checked='checked']").data("confirmation-url"));
+                }
+                else {
+                    $("#deleteGroupBtn").attr("disabled", "disabled");
+                }
+            }
+
             $("a[data-row-selector='true']").jHueRowSelector();
         });
     </script>

+ 5 - 10
apps/useradmin/src/useradmin/templates/list_permissions.mako

@@ -21,20 +21,15 @@ from useradmin.models import group_permissions
 from django.contrib.auth.models import Group
 %>
 
+<%namespace name="actionbar" file="actionbar.mako" />
 <%namespace name="layout" file="layout.mako" />
 ${commonheader(_('Hue Permissions'), "useradmin", user, "100px")}
 ${layout.menubar(section='permissions', _=_)}
 
 <div class="container-fluid">
     <h1>${_('Hue Permissions')}</h1>
-    <div class="subnavContainer">
-        <div class="subnav sticky">
-            <p class="pull-right">
-                <input id="filterInput" type="text" class="input-xlarge search-query" placeholder="${_('Search for application name, description, etc...')}">
-            </p>
-        </div>
-    </div>
-    <br/>
+    <%actionbar:render />
+
     <table class="table table-striped table-condensed datatables">
         <thead>
         <tr>
@@ -48,9 +43,9 @@ ${layout.menubar(section='permissions', _=_)}
             <tr class="tableRow" data-search="${perm.app}${perm.description}${', '.join([group.name for group in Group.objects.filter(grouppermission__hue_permission=perm).order_by('name')])}">
                 <td>
                 %if user.is_superuser:
-                    <h5><a title="${_('Edit permission')}" href="${ url('useradmin.views.edit_permission', app=urllib.quote(perm.app), priv=urllib.quote(perm.action)) }" data-name="${perm.app}" data-row-selector="true">${perm.app}</a></h5>
+                    <strong><a title="${_('Edit permission')}" href="${ url('useradmin.views.edit_permission', app=urllib.quote(perm.app), priv=urllib.quote(perm.action)) }" data-name="${perm.app}" data-row-selector="true">${perm.app}</a></strong>
                 %else:
-                    <h5>${perm.app}</h5>
+                    <strong>${perm.app}</strong>
                 %endif
                 </td>
                 <td>${perm.description}</td>

+ 42 - 32
apps/useradmin/src/useradmin/templates/list_users.mako

@@ -20,36 +20,34 @@ import urllib
 from django.utils.translation import ugettext as _
 %>
 
+<%namespace name="actionbar" file="actionbar.mako" />
 <%namespace name="layout" file="layout.mako" />
 ${commonheader(_('Hue Users'), "useradmin", user, "100px")}
 ${layout.menubar(section='users', _=_)}
 
 <div class="container-fluid">
     <h1>${_('Hue Users')}</h1>
-    <div class="subnavContainer">
-        <div class="subnav sticky">
-            <p class="pull-right">
-                <input id="filterInput" type="text" class="input-xlarge search-query" placeholder="${_('Search for username, name, e-mail, etc...')}">
-            </p>
-            <p style="padding: 4px">
-                %if user.is_superuser:
-                    <button id="deleteUserBtn" class="btn confirmationModal" title="${_('Delete')}" disabled="disabled"><i class="icon-trash"></i> ${_('Delete')}</button>
-                    &nbsp;&nbsp;&nbsp;&nbsp;
-                    <a href="${ url('useradmin.views.edit_user') }" class="btn"><i class="icon-user"></i> ${_('Add user')}</a>
-                    <a href="${ url('useradmin.views.add_ldap_user') }" class="btn"><i class="icon-briefcase"></i> ${_('Add/Sync LDAP user')}</a>
-                    <a href="javascript:void(0)" class="btn confirmationModal" data-confirmation-url="${ url('useradmin.views.sync_ldap_users_groups') }"><i class="icon-refresh"></i> ${_('Sync LDAP users/groups')}</a>
-                    &nbsp;&nbsp;&nbsp;&nbsp;
-                %endif
-            </p>
-        </div>
-    </div>
-    <br/>
+
+    <%actionbar:render>
+        <%def name="actions()">
+            %if user.is_superuser:
+                <button id="deleteUserBtn" class="btn confirmationModal" title="${_('Delete')}" disabled="disabled"><i class="icon-trash"></i> ${_('Delete')}</button>
+            %endif
+        </%def>
+        <%def name="creation()">
+            %if user.is_superuser:
+                <a href="${ url('useradmin.views.edit_user') }" class="btn"><i class="icon-user"></i> ${_('Add user')}</a>
+                <a href="${ url('useradmin.views.add_ldap_user') }" class="btn"><i class="icon-briefcase"></i> ${_('Add/Sync LDAP user')}</a>
+                <a href="javascript:void(0)" class="btn confirmationModal" data-confirmation-url="${ url('useradmin.views.sync_ldap_users_groups') }"><i class="icon-refresh"></i> ${_('Sync LDAP users/groups')}</a>
+            %endif
+        </%def>
+    </%actionbar:render>
 
     <table class="table table-striped table-condensed datatables">
         <thead>
             <tr>
                 %if user.is_superuser:
-                    <th width="1%"><input id="selectAll" type="checkbox"/></th>
+                    <th width="1%"><div id="selectAll" class="hueCheckbox"></div></th>
                 %endif
                 <th>${_('Username')}</th>
                 <th>${_('First Name')}</th>
@@ -63,15 +61,15 @@ ${layout.menubar(section='users', _=_)}
         % for listed_user in users:
             <tr class="tableRow" data-search="${listed_user.username}${listed_user.first_name}${listed_user.last_name}${listed_user.email}${', '.join([group.name for group in listed_user.groups.all()])}">
                 %if user.is_superuser:
-                    <td class="center" data-row-selector-exclude="true">
-                        <input type="checkbox" class="userCheck" data-username="${listed_user.username}" data-confirmation-url="${ url('useradmin.views.delete_user', username=urllib.quote(listed_user.username))}" data-row-selector-exclude="true"/>
+                    <td data-row-selector-exclude="true">
+                        <div class="hueCheckbox userCheck" data-username="${listed_user.username}" data-confirmation-url="${ url('useradmin.views.delete_user', username=urllib.quote(listed_user.username))}" data-row-selector-exclude="true"></div>
                     </td>
                 %endif
                 <td>
                     %if user.is_superuser or user.username == listed_user.username:
-                        <h5><a title="${_('Edit %(username)s') % dict(username=listed_user.username)}" href="${ url('useradmin.views.edit_user', username=urllib.quote(listed_user.username)) }" data-row-selector="true">${listed_user.username}</a></h5>
+                        <strong><a title="${_('Edit %(username)s') % dict(username=listed_user.username)}" href="${ url('useradmin.views.edit_user', username=urllib.quote(listed_user.username)) }" data-row-selector="true">${listed_user.username}</a></strong>
                     %else:
-                        <h5>${listed_user.username}</h5>
+                        <strong>${listed_user.username}</strong>
                     %endif
                 </td>
                 <td>${listed_user.first_name}</td>
@@ -136,25 +134,37 @@ ${layout.menubar(section='users', _=_)}
                 });
             });
 
-            $("#selectAll").change(function(){
-                if ($(this).is(":checked")){
-                    $(".userCheck").attr("checked", "checked");
+            $("#selectAll").click(function(){
+                if ($(this).attr("checked")) {
+                    $(this).removeAttr("checked");
+                    $(".userCheck").removeClass("icon-ok").removeAttr("checked");
                 }
                 else {
-                    $(".userCheck").removeAttr("checked");
+                    $(this).attr("checked", "checked");
+                    $(".userCheck").addClass("icon-ok").attr("checked", "checked");
                 }
-                $(".userCheck").change();
+                toggleActions();
             });
 
-            $(".userCheck").change(function(){
-                if ($(".userCheck:checked").length == 1){
-                    $("#deleteUserBtn").removeAttr("disabled").data("confirmation-url", $(".userCheck:checked").data("confirmation-url"));
+            $(".userCheck").click(function(){
+                if ($(this).attr("checked")) {
+                    $(this).removeClass("icon-ok").removeAttr("checked");
                 }
                 else {
-                    $("#deleteUserBtn").attr("disabled", "disabled");
+                    $(this).addClass("icon-ok").attr("checked", "checked");
                 }
+                toggleActions();
             });
 
+            function toggleActions() {
+                if ($(".userCheck[checked='checked']").length == 1) {
+                    $("#deleteUserBtn").removeAttr("disabled").data("confirmation-url", $(".userCheck[checked='checked']").data("confirmation-url"));
+                }
+                else {
+                    $("#deleteUserBtn").attr("disabled", "disabled");
+                }
+            }
+
             $("a[data-row-selector='true']").jHueRowSelector();
         });
     </script>

+ 1 - 1
desktop/core/src/desktop/templates/actionbar.mako

@@ -19,7 +19,7 @@
 
 <%def name="render()">
     <div class="well" style="padding-top: 10px; padding-bottom: 0">
-        <p class="pull-right">
+        <p class="pull-right" style="margin:0">
             %if hasattr(caller, "creation"):
                 ${caller.creation()}
             %endif

+ 1 - 1
desktop/core/static/js/Source/jHue/jquery.selector.js

@@ -47,7 +47,7 @@
         sortedKeys.sort();
 
         if (sortedKeys.length == 0){
-            $(_this.element).after($("<input>").attr("type", "text").attr("disabled", "disabled").val(this.options.noChoicesFound));
+            $(_this.element).after($("<div>").addClass("alert").css("margin-top", "-2px").css("float", "left").html(this.options.noChoicesFound));
         }
         else {
             selectorContainer.addClass("jHueSelector");