Make cover image and attachment modals consistent.

* Redo search toggle button to use aria-labels, split into two.
* Remove css hiding filters or cover image.

Author: kimisgold

views/admin/css/exhibits.css

@@ -89,34 +89,10 @@
 
 /* Item select */
 
-.show-search-label,
-.hide-search-label {
-    display: block;
-    padding: 10px;
-}
-
-.show-search-label:before,
-.hide-search-label:before {
-    font-family: "Font Awesome 5 Free";
-    font-weight: 900;
-}
-
-.show-search-label:before {
-    content: "\f002";
-}
-
-.hide-search-label:before {
-    content: "\f30a";
-}
-
 #item-select {
     padding: 0;
 }
 
-#cover-image-panel #item-filters {
-    display: none;
-}
-
 #item-filters,
 #item-filters ul {
     display: inline-block;
@@ -247,27 +223,37 @@
     font-family: "Lato", sans-serif;
 }
 
-#show-or-hide-search {
+.search-toggle {
     float: left;
     margin-bottom: 10px;
-    padding: 0;
-}
-
-#view-all-items {
+    padding: 10px;
     display: none;
-    padding: 3px 12px;
 }
 
-#item-filters + #view-all-items {
+.search-toggle.active {
     display: inline-block;
 }
 
-#show-or-hide-search.show-form .hide-search-label {
-    display: none;
+.search-toggle:before {
+    font-family: "Font Awesome 5 Free";
+    font-weight: 900;
+}
+
+.show-form:before {
+    content: "\f002";
 }
 
-#show-or-hide-search.hide-form .show-search-label {
+.hide-form:before {
+    content: "\f30a";
+}
+
+#view-all-items {
     display: none;
+    padding: 3px 12px;
+}
+
+#item-filters + #view-all-items {
+    display: inline-block;
 }
 
 #change-selected-item, #revert-selected-item {

views/admin/exhibits/exhibit-metadata-form.php

@@ -117,11 +117,8 @@
     <div id="item-form">
         <div class="browse-controls">
             <button type="button" id="revert-selected-item">Revert to Selected Item</button>
-            <button type="button" id="show-or-hide-search" class="show-form blue">
-                <span class="show-search-label"><?php echo __('Show Search Form'); ?></span>
-                <span class="hide-search-label"><?php echo __('Hide Search Form'); ?></span>
-            </button>
-            <a href="<?php echo url('exhibit-builder/items/browse'); ?>" id="view-all-items" class="green button"><?php echo __('View All Items'); ?></a>
+            <button type="button" class="search-toggle show-form blue" aria-label="<?php echo __('Show Search Form'); ?>" title="<?php echo __('Show Search Form'); ?>"></button>
+            <button type="button" class="search-toggle hide-form blue active" aria-label="<?php echo __('Hide Search Form'); ?>" title="<?php echo __('Hide Search Form'); ?>"></button>
         </div>
         <div id="page-search-form" class="container-twelve">
         <?php

views/admin/exhibits/page-form.php

@@ -94,11 +94,11 @@
 </form>
 <div id="attachment-panel" title="<?php echo html_escape(__('Attach an Item')); ?>">
     <div id="item-form">
-        <button type="button" id="revert-selected-item"><?php echo __('Revert to Selected Item'); ?></button>
-        <button type="button" id="show-or-hide-search" class="show-form blue">
-            <span class="show-search-label" title="<?php echo __('Show Search Form'); ?>"></span>
-            <span class="hide-search-label" title="<?php echo __('Hide Search Form'); ?>"></span>
-        </button>
+        <div class="browse-controls">
+            <button type="button" id="revert-selected-item">Revert to Selected Item</button>
+            <button type="button" class="search-toggle show-form blue" aria-label="<?php echo __('Show Search Form'); ?>" title="<?php echo __('Show Search Form'); ?>"></button>
+            <button type="button" class="search-toggle hide-form blue active" aria-label="<?php echo __('Hide Search Form'); ?>" title="<?php echo __('Hide Search Form'); ?>"></button>
+        </div>
         <div id="page-search-form" class="container-twelve">
         <?php
             $action = url(array('module' => 'exhibit-builder',

views/admin/javascripts/exhibits.js

@@ -24,18 +24,18 @@ Omeka.ExhibitBuilder = {};
     }
     Omeka.ExhibitBuilder.setSearchVisibility = function(show) {
         var searchForm = $('#page-search-form');
-        var searchButton = $('#show-or-hide-search');
+        var searchToggleButton = $('.search-toggle');
 
         if (typeof show === 'undefined') {
             show = !searchForm.is(':visible');
         }
+
         if (show) {
             searchForm.show();
-            searchButton.addClass('hide-form').removeClass('show-form');
         } else {
             searchForm.hide();
-            searchButton.addClass('show-form').removeClass('hide-form');
         }
+        searchToggleButton.toggleClass('active');
     }
 
     Omeka.ExhibitBuilder.loadItemOptionsForm = function(data, itemOptionsUrl, panel, options) {
@@ -227,7 +227,7 @@ Omeka.ExhibitBuilder = {};
         });
 
         Omeka.ExhibitBuilder.setSearchVisibility(false);
-        $('#show-or-hide-search').click(function (event) {
+        $('.search-toggle').click(function (event) {
             event.preventDefault();
             Omeka.ExhibitBuilder.setSearchVisibility();
         });
@@ -547,7 +547,7 @@ Omeka.ExhibitBuilder = {};
         });
 
         Omeka.ExhibitBuilder.setSearchVisibility(false);
-        $('#show-or-hide-search').click(function (event) {
+        $('.search-toggle').click(function (event) {
             event.preventDefault();
             Omeka.ExhibitBuilder.setSearchVisibility();
         });