webui: adjust header controls alignment

Reviewed-By: Endi Sukma Dewata <edewata@redhat.com>

5 files changed, 64 insertions, 56 deletions

diff --git a/install/ui/ipa.css b/install/ui/ipa.css
index 62f97a641..a950f645b 100644
--- a/install/ui/ipa.css
+++ b/install/ui/ipa.css
@@ -166,25 +166,25 @@ div[name=settings].facet-group li a {
     clear: both;
 }
 
-.right-aligned-facet-controls {
+.facet-controls-left {
+    float: left;
+}
+
+.facet-controls-right {
     float: right;
 }
 
 .control-buttons {
-    float: left;
+    display: inline-block;
 }
 
 .control-buttons a {
-    float: left;
-    font-size: 13px;
     margin-right: 16px;
     text-decoration: none;
 }
 
 .facet-actions {
     display: inline-block;
-    float: right;
-    margin-right: 8px;
 }
 
 /* --- Facet error --- */
diff --git a/install/ui/src/freeipa/association.js b/install/ui/src/freeipa/association.js
index aee95f184..25d5a0d87 100644
--- a/install/ui/src/freeipa/association.js
+++ b/install/ui/src/freeipa/association.js
@@ -1041,57 +1041,58 @@ exp.association_facet = IPA.association_facet = function (spec, no_init) {
         that.facet_create_header(container);
 
         if (that.indirect_attribute_member) {
+            that.create_membership_radios(that.controls_right);
+        }
 
-            var div = $('<div/>', {
-                'class': 'right-aligned-facet-controls'
-            }).appendTo(that.controls);
+        that.create_control_buttons(that.controls_left);
+    };
 
-            div.append(text.get('@i18n:association.show_results'));
-            div.append(' ');
+    that.create_membership_radios = function(container) {
 
-            var name = that.entity.name+'-'+that.attribute_member+'-'+that.other_entity.name+'-type-radio';
-            var direct_id = name + '-direct';
+        var div = $('<div/>', { 'class': 'association-direction'}).appendTo(container);
+        div.append(text.get('@i18n:association.show_results'));
+        div.append(' ');
 
-            that.direct_radio = $('<input/>', {
-                id: direct_id,
-                type: 'radio',
-                name: name,
-                value: 'direct',
-                click: function() {
-                    that.association_type = $(this).val();
-                    that.refresh();
-                    return true;
-                }
-            }).appendTo(div);
+        var name = that.entity.name+'-'+that.attribute_member+'-'+that.other_entity.name+'-type-radio';
+        var direct_id = name + '-direct';
 
-            $('<label/>', {
-                text: text.get('@i18n:association.direct_membership'),
-                'for': direct_id
-            }).appendTo(div);
+        that.direct_radio = $('<input/>', {
+            id: direct_id,
+            type: 'radio',
+            name: name,
+            value: 'direct',
+            click: function() {
+                that.association_type = $(this).val();
+                that.refresh();
+                return true;
+            }
+        }).appendTo(div);
 
-            div.append(' ');
+        $('<label/>', {
+            text: text.get('@i18n:association.direct_membership'),
+            'for': direct_id
+        }).appendTo(div);
 
-            var indirect_id = name + '-indirect';
+        div.append(' ');
 
-            that.indirect_radio = $('<input/>', {
-                id: indirect_id,
-                type: 'radio',
-                name: name,
-                value: 'indirect',
-                click: function() {
-                    that.association_type = $(this).val();
-                    that.refresh();
-                    return true;
-                }
-            }).appendTo(div);
+        var indirect_id = name + '-indirect';
 
-            $('<label/>', {
-                text: text.get('@i18n:association.indirect_membership'),
-                'for': indirect_id
-            }).appendTo(div);
-        }
+        that.indirect_radio = $('<input/>', {
+            id: indirect_id,
+            type: 'radio',
+            name: name,
+            value: 'indirect',
+            click: function() {
+                that.association_type = $(this).val();
+                that.refresh();
+                return true;
+            }
+        }).appendTo(div);
 
-        that.create_control_buttons(that.controls);
+        $('<label/>', {
+            text: text.get('@i18n:association.indirect_membership'),
+            'for': indirect_id
+        }).appendTo(div);
     };
 
     that.get_attribute_name = function() {
diff --git a/install/ui/src/freeipa/details.js b/install/ui/src/freeipa/details.js
index b0d330466..a3aac27c7 100644
--- a/install/ui/src/freeipa/details.js
+++ b/install/ui/src/freeipa/details.js
@@ -631,8 +631,8 @@ exp.details_facet = IPA.details_facet = function(spec, no_init) {
      */
     that.create_controls = function() {
 
-        that.create_control_buttons(that.controls);
-        that.create_action_dropdown(that.controls);
+        that.create_control_buttons(that.controls_left);
+        that.create_action_dropdown(that.controls_left);
     };
 
     /**
diff --git a/install/ui/src/freeipa/facet.js b/install/ui/src/freeipa/facet.js
index 54e86a4c8..d8ac90a0a 100644
--- a/install/ui/src/freeipa/facet.js
+++ b/install/ui/src/freeipa/facet.js
@@ -593,6 +593,14 @@ exp.facet = IPA.facet = function(spec, no_init) {
         that.controls = $('<div/>', {
             'class': 'facet-controls clearfix'
         }).appendTo(container);
+
+        that.controls_left = $('<div/>', {
+            'class': 'facet-controls-left'
+        }).appendTo(that.controls);
+
+        that.controls_right = $('<div/>', {
+            'class': 'facet-controls-right'
+        }).appendTo(that.controls);
     };
 
     /**
diff --git a/install/ui/src/freeipa/search.js b/install/ui/src/freeipa/search.js
index 9c0676313..a8bb928ee 100644
--- a/install/ui/src/freeipa/search.js
+++ b/install/ui/src/freeipa/search.js
@@ -104,14 +104,16 @@ IPA.search_facet = function(spec, no_init) {
     that.create_header = function(container) {
 
         that.facet_create_header(container);
+        that.create_search_filter(that.controls_left);
+        that.create_control_buttons(that.controls_right);
+        that.create_action_dropdown(that.controls_right);
+    };
 
-        var div = $('<div/>', {
-            'class': 'right-aligned-facet-controls'
-        }).appendTo(that.controls);
+    that.create_search_filter = function(container) {
 
         that.filter_container = $('<div/>', {
             'class': 'search-filter'
-        }).appendTo(div);
+        }).appendTo(container);
 
         that.filter = $('<input/>', {
             type: 'text',
@@ -134,9 +136,6 @@ IPA.search_facet = function(spec, no_init) {
                 return false;
             }
         }).appendTo(that.filter_container);
-
-        that.create_control_buttons(that.controls);
-        that.create_action_dropdown(that.controls);
     };
 
     that.managed_entity_pkey_prefix = function() {