[4.0] Move searchtools, sort and item count to dropdown (#17059)

* Move searchtools to dropdown * Add eventlistener to body to close dropdown
joomla · Jul 14, 2017 · 9bd62d5 · 9bd62d5
1 parent c3c39f8
commit 9bd62d5
Show file tree

Hide file tree

Showing 11 changed files with 84 additions and 46 deletions.
diff --git a/administrator/language/en-GB/en-GB.ini b/administrator/language/en-GB/en-GB.ini
@@ -1043,6 +1043,5 @@ POSTGRESQL="PostgreSQL"
 SQLITE="SQLite"
 
 ; Search tools
-JSEARCH_TOOLS="Search Tools"
-JSEARCH_TOOLS_DESC="Filter the list items."
-JSEARCH_TOOLS_ORDERING="Order by:"
+JTABLE_OPTIONS="Table Options"
+JTABLE_OPTIONS_ORDERING="Order by:"
diff --git a/administrator/templates/atum/css/template-rtl.css.map b/administrator/templates/atum/css/template-rtl.css.map
diff --git a/administrator/templates/atum/css/template-rtl.min.css b/administrator/templates/atum/css/template-rtl.min.css
diff --git a/administrator/templates/atum/css/template.css.map b/administrator/templates/atum/css/template.css.map
diff --git a/administrator/templates/atum/css/template.min.css b/administrator/templates/atum/css/template.min.css
diff --git a/administrator/templates/atum/scss/blocks/_searchtools.scss b/administrator/templates/atum/scss/blocks/_searchtools.scss
@@ -1,6 +1,7 @@
 // Search tools
 
 .js-stools {
+  position: relative;
   width: 100%;
   padding: 8px 10px 0;
   background-color: $atum-card-title-bg;
@@ -14,16 +15,50 @@
   }
 
   .js-stools-container-filters {
+    position: absolute;
+    right: -1px;
     display: none;
-    margin: 0 0 2px;
+    flex-direction: column;
+    padding: 10px;
+    margin: 0;
+    background-color: $white;
+    border: 1px solid $atum-border-color;
+    border-radius: 0 0 0 $border-radius;
+
+    .custom-select {
+      width: 100%;
+    }
+
+    &.js-filters-show {
+      display: flex;
+    }
+
+  }
+
+  .js-stools-field-filter {
+    .custom-select {
+      &.active {
+        color: #fff;
+        background: #fefefe url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 4 5\'%3E%3Cpath fill=\'%23fff\' d=\'M2 0L0 2h4zm0 5L0 3h4z\'/%3E%3C/svg%3E") no-repeat scroll right .75rem center / 8px 10px;
+        background-color: $brand-primary;
+
+      }
+
+      option {
+        color: $gray;
+        background-color: #fff;
+
+      }
+
+    }
   }
 
   .js-stools-container-selector {
     float: left;
   }
 
   .js-stools-container-bar {
-    float: left;
+    float: right;
 
     .btn-toolbar {
       float: left;
@@ -41,7 +76,7 @@
   }
 
   .js-stools-container-list {
-    float: right;
+    float: left;
     text-align: left;
 
     .js-stools-field-list:last-child {
@@ -50,20 +85,9 @@
 
   }
 
-  .js-stools-container-filters-visible {
-    display: inline-block;
-  }
-
   .js-stools-field-list,
   .js-stools-field-filter {
-    display: inline-block;
-    float: left;
-    margin-right: 5px;
-    margin-bottom: 5px;
-
-    .form-control {
-      display: inline-block;
-	}
+    display: block;
 
   }
 

diff --git a/layouts/joomla/searchtools/default.php b/layouts/joomla/searchtools/default.php
@@ -79,7 +79,7 @@
 // Load search tools
 JHtml::_('searchtools.form', $data['options']['formSelector'], $data['options']);
 ?>
-<div class="js-stools clearfix">
+<div class="js-stools clearfix <?php echo $dataShowOn; ?>">
 	<div class="clearfix">
 		<?php if ($data['options']['showSelector']) : ?>
 		<div class="js-stools-container-selector">
@@ -89,13 +89,11 @@
 		<div class="js-stools-container-bar">
 			<?php echo $this->sublayout('bar', $data); ?>
 		</div>
-		<div class="js-stools-container-list hidden-md-down">
-			<?php echo $this->sublayout('list', $data); ?>
-		</div>
 	</div>
 	<!-- Filters div -->
 	<?php if ($data['options']['filterButton']) : ?>
 	<div class="js-stools-container-filters hidden-sm-down clearfix<?php echo $filtersActiveClass; ?>">
+		<?php echo $this->sublayout('list', $data); ?>
 		<?php echo $this->sublayout('filters', $data); ?>
 	</div>
 	<?php endif; ?>

diff --git a/layouts/joomla/searchtools/default/bar.php b/layouts/joomla/searchtools/default/bar.php
@@ -53,8 +53,8 @@
 			</div>
 			<?php if ($filterButton) : ?>
 				<div class="btn-group hidden-sm-down">
-					<button type="button" class="btn btn-secondary hasTooltip js-stools-btn-filter" title="<?php echo JHtml::_('tooltipText', 'JSEARCH_TOOLS_DESC'); ?>">
-						<?php echo JText::_('JSEARCH_TOOLS'); ?> <span class="fa fa-caret-down"></span>
+					<button type="button" class="btn btn-secondary hasTooltip js-stools-btn-filter">
+						<?php echo JText::_('JTABLE_OPTIONS'); ?> <span class="fa fa-caret-down"></span>
 					</button>
 				</div>
 			<?php endif; ?>

diff --git a/media/system/css/searchtools.css b/media/system/css/searchtools.css
@@ -49,10 +49,6 @@ html[dir=rtl] .js-stools .js-stools-container-list {
 html[dir=rtl] .js-stools .chzn-container {
 	text-align: right;
 }
-.js-stools .js-stools-container-filters select.active,
-.js-stools .js-stools-container-filters .chzn-container.active .chzn-single{
-	border: 2px solid #2384D3;
-}
 .js-stools .js-stools-container-filters-visible {
 	display: inline-block;
 }

diff --git a/media/system/js/searchtools.js b/media/system/js/searchtools.js
@@ -110,7 +110,7 @@
 				self.filterButton.addEventListener('click', function(e) {
 					self.toggleFilters();
 					e.stopPropagation();
-					e.preventDefault();
+					e.preventDefault();				
 				});
 			}
 
@@ -169,14 +169,26 @@
 
 				});
 			});
+
+			self.checkActiveStatus(self);
+
+			document.body.addEventListener('click', function(e) {
+				if (document.body.classList.contains('filters-shown')) {
+					self.hideFilters();
+				}
+			});
+			self.filterContainer.addEventListener('click',function(e) {
+			    e.stopPropagation();
+			}, true);
+
 		},
 		checkFilter: function (element) {
 			var self = this;
 			var option = element.querySelector('option:checked');
 			if (option.value !== '') {
-				self.activeFilter(element);
+				self.activeFilter(element, self);
 			} else {
-				self.deactiveFilter(element);
+				self.deactiveFilter(element, self);
 			}
 		},
 		clear: function () {
@@ -213,17 +225,26 @@
 
 			self.theForm.submit();
 		},
-		activeFilter: function (element) {
-			var self = this;
-
+		checkActiveStatus: function(cont) {
+			var el = cont.mainContainer;
+			var els = [].slice.call(el.querySelectorAll('.js-stools-field-filter select'));
+			els.forEach(function(item) {
+				if (item.classList.contains('active')) {
+					cont.filterButton.classList.remove('btn-secondary');
+					cont.filterButton.classList.add('btn-primary');
+					return '';
+				}
+			});
+		},
+		activeFilter: function (element, cont) {
 			element.classList.add('active');
 			var chosenId = '#' + element.getAttribute('id');
 			var tmpEl = element.querySelector(chosenId);
 			if (tmpEl) {
-				tmpEl.classList.add('active');
+				tmpEl.classList.add('active');	
 			}
 		},
-		deactiveFilter: function (element) {
+		deactiveFilter: function (element, cont) {
 			element.classList.remove('active');
 			var chosenId = '#' + element.getAttribute('id');
 			var tmpEl = element.querySelector(chosenId);
@@ -243,16 +264,16 @@
 		// Common container functions
 		hideContainer: function (container) {
 			if (container) {
-				container.style.display = 'none';
-				container.classList.remove('shown');
+				container.classList.remove('js-filters-show');
+				document.body.classList.remove('filters-shown');
 			}
 		},
 		showContainer: function (container) {
-			container.style.display = 'block';
-			container.classList.add('shown');
+			container.classList.add('js-filters-show');
+			document.body.classList.add('filters-shown');
 		},
 		toggleContainer: function (container) {
-			if (container.classList.contains('shown')) {
+			if (container.classList.contains('js-filters-show')) {
 				this.hideContainer(container);
 			} else {
 				this.showContainer(container);