ソースを参照

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({
             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");