فهرست منبع

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 سال پیش
والد
کامیت
ec29e531fc

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

@@ -82,7 +82,7 @@ ${layout.menubar(section='groups', _=_)}
 		$("#id_members").jHueSelector({
 		$("#id_members").jHueSelector({
             selectAllLabel: "${_('Select all')}",
             selectAllLabel: "${_('Select all')}",
             searchPlaceholder: "${_('Search')}",
             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,
             width:600,
             height:240
             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">
 	<form id="editForm" action="${urllib.quote(action)}" method="POST" class="form form-horizontal">
 		<fieldset>
 		<fieldset>
 			% for field in form:
 			% 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="row">
                         <div class="span5">
                         <div class="span5">
-                        ${render_field(form["first_name"])}
+                        ${render_field(form["password1"])}
                         </div>
                         </div>
                         <div class="span4">
                         <div class="span4">
-                        ${render_field(form["last_name"])}
+                        ${render_field(form["password2"])}
                         </div>
                         </div>
                     </div>
                     </div>
-                %elif field.name == "password1":
+                %elif field.name == "first_name":
                     <div class="row">
                     <div class="row">
                         <div class="span5">
                         <div class="span5">
-                        ${render_field(form["password1"])}
+                        ${render_field(form["first_name"])}
                         </div>
                         </div>
                         <div class="span4">
                         <div class="span4">
-                        ${render_field(form["password2"])}
+                        ${render_field(form["last_name"])}
                         </div>
                         </div>
                     </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
                     ## skip rendering
                 %else:
                 %else:
 				    ${render_field(field)}
 				    ${render_field(field)}
@@ -100,7 +101,7 @@ ${layout.menubar(section='users', _=_)}
 		$("#id_groups").jHueSelector({
 		$("#id_groups").jHueSelector({
             selectAllLabel: "${_('Select all')}",
             selectAllLabel: "${_('Select all')}",
             searchPlaceholder: "${_('Search')}",
             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,
             width:618,
             height:240
             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
 from useradmin.models import group_permissions
 %>
 %>
 
 
+<%namespace name="actionbar" file="actionbar.mako" />
 <%namespace name="layout" file="layout.mako" />
 <%namespace name="layout" file="layout.mako" />
 ${commonheader(_('Hue Groups'), "useradmin", user, "100px")}
 ${commonheader(_('Hue Groups'), "useradmin", user, "100px")}
 ${layout.menubar(section='groups', _=_)}
 ${layout.menubar(section='groups', _=_)}
 
 
 <div class="container-fluid">
 <div class="container-fluid">
     <h1>${_('Hue Groups')}</h1>
     <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">
     <table class="table table-striped table-condensed datatables">
     <thead>
     <thead>
       <tr>
       <tr>
         %if user.is_superuser:
         %if user.is_superuser:
-          <th width="1%"><input id="selectAll" type="checkbox"/></th>
+          <th width="1%"><div id="selectAll" class="hueCheckbox"></div></th>
         %endif
         %endif
         <th>${_('Group Name')}</th>
         <th>${_('Group Name')}</th>
         <th>${_('Members')}</th>
         <th>${_('Members')}</th>
@@ -58,15 +57,15 @@ ${layout.menubar(section='groups', _=_)}
     % for group in groups:
     % for group in groups:
       <tr class="tableRow" data-search="${group.name}${', '.join([group_user.username for group_user in group.user_set.all()])}">
       <tr class="tableRow" data-search="${group.name}${', '.join([group_user.username for group_user in group.user_set.all()])}">
         %if user.is_superuser:
         %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>
           </td>
         %endif
         %endif
         <td>
         <td>
             %if user.is_superuser:
             %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:
             %else:
-            <h5>${group.name}</h5>
+            <strong>${group.name}</strong>
             %endif
             %endif
          </td>
          </td>
         <td>${', '.join([group_user.username for group_user in group.user_set.all()])}</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 {
                 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 {
                 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();
             $("a[data-row-selector='true']").jHueRowSelector();
         });
         });
     </script>
     </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
 from django.contrib.auth.models import Group
 %>
 %>
 
 
+<%namespace name="actionbar" file="actionbar.mako" />
 <%namespace name="layout" file="layout.mako" />
 <%namespace name="layout" file="layout.mako" />
 ${commonheader(_('Hue Permissions'), "useradmin", user, "100px")}
 ${commonheader(_('Hue Permissions'), "useradmin", user, "100px")}
 ${layout.menubar(section='permissions', _=_)}
 ${layout.menubar(section='permissions', _=_)}
 
 
 <div class="container-fluid">
 <div class="container-fluid">
     <h1>${_('Hue Permissions')}</h1>
     <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">
     <table class="table table-striped table-condensed datatables">
         <thead>
         <thead>
         <tr>
         <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')])}">
             <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>
                 <td>
                 %if user.is_superuser:
                 %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:
                 %else:
-                    <h5>${perm.app}</h5>
+                    <strong>${perm.app}</strong>
                 %endif
                 %endif
                 </td>
                 </td>
                 <td>${perm.description}</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 _
 from django.utils.translation import ugettext as _
 %>
 %>
 
 
+<%namespace name="actionbar" file="actionbar.mako" />
 <%namespace name="layout" file="layout.mako" />
 <%namespace name="layout" file="layout.mako" />
 ${commonheader(_('Hue Users'), "useradmin", user, "100px")}
 ${commonheader(_('Hue Users'), "useradmin", user, "100px")}
 ${layout.menubar(section='users', _=_)}
 ${layout.menubar(section='users', _=_)}
 
 
 <div class="container-fluid">
 <div class="container-fluid">
     <h1>${_('Hue Users')}</h1>
     <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">
     <table class="table table-striped table-condensed datatables">
         <thead>
         <thead>
             <tr>
             <tr>
                 %if user.is_superuser:
                 %if user.is_superuser:
-                    <th width="1%"><input id="selectAll" type="checkbox"/></th>
+                    <th width="1%"><div id="selectAll" class="hueCheckbox"></div></th>
                 %endif
                 %endif
                 <th>${_('Username')}</th>
                 <th>${_('Username')}</th>
                 <th>${_('First Name')}</th>
                 <th>${_('First Name')}</th>
@@ -63,15 +61,15 @@ ${layout.menubar(section='users', _=_)}
         % for listed_user in 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()])}">
             <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:
                 %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>
                     </td>
                 %endif
                 %endif
                 <td>
                 <td>
                     %if user.is_superuser or user.username == listed_user.username:
                     %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:
                     %else:
-                        <h5>${listed_user.username}</h5>
+                        <strong>${listed_user.username}</strong>
                     %endif
                     %endif
                 </td>
                 </td>
                 <td>${listed_user.first_name}</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 {
                 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 {
                 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();
             $("a[data-row-selector='true']").jHueRowSelector();
         });
         });
     </script>
     </script>

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

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

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

@@ -47,7 +47,7 @@
         sortedKeys.sort();
         sortedKeys.sort();
 
 
         if (sortedKeys.length == 0){
         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 {
         else {
             selectorContainer.addClass("jHueSelector");
             selectorContainer.addClass("jHueSelector");