Hi,
first patch redesigns attribute box in permission forms, making it
a bigger scrollable checkboxlist. Second one adds a filter field to it
for better user experience, if the checkboxlist would be too large.
Also, webui unit tests for rbac are updated to work properly with the
new widget.
Thanks
Adam
>From e12c8341b8ce10a32841cff8baca03c6b00b14d4 Mon Sep 17 00:00:00 2001
From: Adam Misnyovszki <amisn...@redhat.com>
Date: Fri, 25 Apr 2014 12:54:17 +0200
Subject: [PATCH 1/2] Attribute box in permission UI is too small

Attributes widget modified to display checkbox list
with a limited height scrollable div. Check all
attributes option is removed to keep the user read
through the attributes which he selects. Webui
integration tests modified according to new widget
layout.

https://fedorahosted.org/freeipa/ticket/4253
---
 install/ui/ipa.css               | 12 ++++++++++
 install/ui/src/freeipa/aci.js    | 51 ++++++++++------------------------------
 ipatests/test_webui/test_rbac.py |  6 ++---
 3 files changed, 27 insertions(+), 42 deletions(-)

diff --git a/install/ui/ipa.css b/install/ui/ipa.css
index 835ec1cc6c81f86e589f71e2d21450363c260850..d4c1c8c31878bddc77324e2d9e87e3ebb4ba2591 100644
--- a/install/ui/ipa.css
+++ b/install/ui/ipa.css
@@ -992,6 +992,18 @@ table.scrollable tbody {
     max-width: 150px;
 }
 
+.option_widget.columns.attribute_widget {
+    overflow-y: auto;
+    max-height: 36em;
+}
+
+.option_widget.columns.attribute_widget > li {
+    float: left;
+    width: 50%;
+    min-width: 90px;
+    max-width: 200px;
+}
+
 .combobox-widget-input {
     display: inline-block;
     position: relative;
diff --git a/install/ui/src/freeipa/aci.js b/install/ui/src/freeipa/aci.js
index e26ecd27d9987f629415c45f36cd8be410bf4c3b..2a0c669d1b90b3662e3b59fb00bb9b739296775c 100644
--- a/install/ui/src/freeipa/aci.js
+++ b/install/ui/src/freeipa/aci.js
@@ -556,36 +556,15 @@ aci.attributes_widget = function(spec) {
     that.create = function(container) {
         that.container = container;
 
-        var attr_container = $('<div/>', {
-            'class': 'aci-attribute-table-container'
+        that.$node = that.attr_container = attr_container = $('<div/>', {
+            'class': 'widget radio-widget'
         }).appendTo(container);
 
-        that.$node = that.table = $('<table/>', {
-            id: id,
-            name: that.name,
-            'class': 'search-table aci-attribute-table scrollable'
-        }).
-            append('<thead/>').
-            append('<tbody/>').
-            appendTo(attr_container);
-
-        var tr = $('<tr></tr>').appendTo($('thead', that.table));
-
-        var th = $('<th/>').appendTo(tr);
-        IPA.standalone_option({
-            type: "checkbox",
-            click: function() {
-                $('.aci-attribute', that.table).
-                    prop('checked', $(this).prop('checked'));
-                that.value_changed.notify([], that);
-                that.emit('value-change', { source: that });
-            }
-        }, th);
-
-        tr.append($('<th/>', {
-            'class': 'aci-attribute-column',
-            html: text.get('@i18n:objects.aci.attribute')
-        }));
+        var ul = $('<ul/>',{
+            'class' : 'option_widget columns attribute_widget',
+            'id' : id,
+            'name' : that.name
+        }).appendTo(attr_container);
 
         if (that.undo) {
             that.create_undo(container);
@@ -599,14 +578,13 @@ aci.attributes_widget = function(spec) {
     };
 
     that.create_options = function(options) {
-        var tbody = $('tbody', that.table);
+        var ul = $('ul.attribute_widget', that.attr_container);
 
         for (var i=0; i<options.length ; i++){
             var option = options[i];
             var value = option.value.toLowerCase();
-            var tr = $('<tr/>').appendTo(tbody);
+            var li = $('<li/>').appendTo(ul);
 
-            var td =  $('<td/>').appendTo(tr);
             var name = that.get_input_name();
             var id = that._option_next_id + name;
             var opt = IPA.standalone_option({
@@ -619,12 +597,7 @@ aci.attributes_widget = function(spec) {
                     that.value_changed.notify([], that);
                     that.emit('value-change', { source: that });
                 }
-            }, td);
-            td = $('<td/>').appendTo(tr);
-            td.append($('<label/>',{
-                text: value,
-                'for': id
-            }));
+            }, li, value);
             option.input_node = opt[0];
             that.new_option_id();
         }
@@ -653,7 +626,7 @@ aci.attributes_widget = function(spec) {
 
     that.populate = function(object_type) {
 
-        $('tbody tr', that.table).remove();
+        $('ul.attribute_widget li', that.attr_container).remove();
 
         if (!object_type || object_type === '') return;
 
@@ -1081,4 +1054,4 @@ aci.register = function() {
 phases.on('registration', aci.register);
 
 return aci;
-});
\ No newline at end of file
+});
diff --git a/ipatests/test_webui/test_rbac.py b/ipatests/test_webui/test_rbac.py
index e785131f550b1c06bbc158ce3846df1de4eb2a3e..ebb6de106039f3e064812bb856a2107b24ccc436 100644
--- a/ipatests/test_webui/test_rbac.py
+++ b/ipatests/test_webui/test_rbac.py
@@ -60,11 +60,11 @@ PERMISSION_DATA = {
         ('checkbox', 'ipapermright', 'write'),
         ('checkbox', 'ipapermright', 'read'),
         ('selectbox', 'type', 'user'),
-        ('table', 'attrs', 'audio'),
-        ('table', 'attrs', 'cn'),
+        ('checkbox', 'attrs', 'audio'),
+        ('checkbox', 'attrs', 'cn'),
     ],
     'mod': [
-        ('table', 'attrs', 'carlicense'),
+        ('checkbox', 'attrs', 'carlicense'),
     ],
 }
 
-- 
1.9.0

>From 1dafce07e3d3618ee33cd53601e0ccf69e21a68a Mon Sep 17 00:00:00 2001
From: Adam Misnyovszki <amisn...@redhat.com>
Date: Fri, 25 Apr 2014 12:26:24 +0200
Subject: [PATCH] Add filter to attribute box

Adds filter field to attribute box in permissions
for better user experience

https://fedorahosted.org/freeipa/ticket/4253
---
 install/ui/ipa.css                 |  5 +++++
 install/ui/src/freeipa/aci.js      | 34 ++++++++++++++++++++++++++++++++++
 install/ui/test/data/ipa_init.json |  3 ++-
 ipalib/plugins/internal.py         |  1 +
 4 files changed, 42 insertions(+), 1 deletion(-)

diff --git a/install/ui/ipa.css b/install/ui/ipa.css
index d4c1c8c31878bddc77324e2d9e87e3ebb4ba2591..b083e79cce31c18f12d93ef0d2d67d6e053e6fab 100644
--- a/install/ui/ipa.css
+++ b/install/ui/ipa.css
@@ -1524,3 +1524,8 @@ form#login {
 .choice-header {
     font-weight: bold;
 }
+
+.widget.radio-widget .search-filter a {
+    top: 0px;
+    font-size: 1.3em;
+}
diff --git a/install/ui/src/freeipa/aci.js b/install/ui/src/freeipa/aci.js
index 2a0c669d1b90b3662e3b59fb00bb9b739296775c..f4ee6a905c1ad6dc24025ce2dd4a147e6ebbe7e3 100644
--- a/install/ui/src/freeipa/aci.js
+++ b/install/ui/src/freeipa/aci.js
@@ -560,6 +560,29 @@ aci.attributes_widget = function(spec) {
             'class': 'widget radio-widget'
         }).appendTo(container);
 
+        var filter_container = $('<div/>', {
+            'class': 'search-filter'
+        }).appendTo(that.attr_container);
+
+        that.filter = $('<input/>', {
+            type: 'text',
+            name: 'filter',
+            placeholder: text.get('@i18n:objects.permission.filter')
+        }).appendTo(filter_container);
+
+        that.filter.keyup(function(e) {
+                that.filter_options();
+        });
+
+        var find_button = IPA.action_button({
+            name: 'find',
+            icon: 'fa-search',
+            click: function() {
+                that.filter_options();
+                return false;
+            }
+        }).appendTo(filter_container);
+
         var ul = $('<ul/>',{
             'class' : 'option_widget columns attribute_widget',
             'id' : id,
@@ -577,6 +600,17 @@ aci.attributes_widget = function(spec) {
         that.create_error_link(container);
     };
 
+    that.filter_options = function() {
+        $("ul.option_widget.attribute_widget li").each(function() {
+            var item = $(this);
+            if(item.find('input').val().indexOf(that.filter.val()) === -1) {
+                item.css('display','none');
+            } else {
+                item.css('display','inline');
+            }
+        });
+    }
+
     that.create_options = function(options) {
         var ul = $('ul.attribute_widget', that.attr_container);
 
diff --git a/install/ui/test/data/ipa_init.json b/install/ui/test/data/ipa_init.json
index 059726fead9a1cb235d1e70a0a9df5e652ad272a..305d580c5488d5949bc9653c013a620446d3a64c 100644
--- a/install/ui/test/data/ipa_init.json
+++ b/install/ui/test/data/ipa_init.json
@@ -373,7 +373,8 @@
                         "permission": {
                             "identity": "Permission settings",
                             "managed": "Attribute breakdown",
-                            "target": "Target"
+                            "target": "Target",
+                            "filter": "Filter"
                         },
                         "privilege": {
                             "identity": "Privilege Settings"
diff --git a/ipalib/plugins/internal.py b/ipalib/plugins/internal.py
index a34d2cb16b0ea758e85c83b6de7b8d1a42e155da..151fcfa58d31df17e21cba7d7d410d38ec6ad620 100644
--- a/ipalib/plugins/internal.py
+++ b/ipalib/plugins/internal.py
@@ -509,6 +509,7 @@ class i18n_messages(Command):
                 "identity": _("Permission settings"),
                 "managed": _("Attribute breakdown"),
                 "target": _("Target"),
+                "filter": _("Filter"),
             },
             "privilege": {
                 "identity": _("Privilege Settings"),
-- 
1.9.0

_______________________________________________
Freeipa-devel mailing list
Freeipa-devel@redhat.com
https://www.redhat.com/mailman/listinfo/freeipa-devel

Reply via email to