Re: [Freeipa-devel] [PATCH] 16-17 Attribute box in permission UI is too small

[Petr Vobornik]

On 25.4.2014 13:06, Misnyovszki Adam wrote:

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



Patch 16:

1. jslint warnings:
- aci.js(559): lint warning: undeclared identifier: attr_container
- aci.js(590): lint warning: undeclared identifier: attr_container

2. you can reuse existing create method of checkboxes widget since 
attribute widget inherits from it. The same with create_options - 
option_widget_base.create_options will do the trick. But be careful, it 
expects different param.


2a. in patch 17 you will have to have custom create method, but the code 
can be very similar to radio_widget.create method.



Patch 17:

1. jslint warnings:
- aci.js(614): lint warning: missing semicolon

2. too big indentation:
+that.filter.keyup(function(e) {
+that.filter_options();


3. ("ul.option_widget.attribute_widget li")
matches all options in all attribute widgets in the app. Limit the 
search to this widget by the context parameter ($node). It will also 
allow you to use simpler selector.


--
Petr Vobornik

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

[Freeipa-devel] [PATCH] 16-17 Attribute box in permission UI is too small

[Misnyovszki Adam]

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 
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 = $('', {
-'class': 'aci-attribute-table-container'
+that.$node = that.attr_container = attr_container = $('', {
+'class': 'widget radio-widget'
 }).appendTo(container);
 
-that.$node = that.table = $('', {
-id: id,
-name: that.name,
-'class': 'search-table aci-attribute-table scrollable'
-}).
-append('').
-append('').
-appendTo(attr_container);
-
-var tr = $('').appendTo($('thead', that.table));
-
-var 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($('', {
-'class': 'aci-attribute-column',
-html: text.get('@i18n:objects.aci.attribute')
-}));
+var 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').appendTo(tbody);
+var li = $('').appendTo(ul);
 
-var 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 = $('').appendTo(tr);
-td.append($('',{
-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_rba