Make top global search significantly more obvious. (CO-2846)

app/View/CoDashboards/search.ctp

@@ -58,7 +58,13 @@
   <div id="search">
     <?php
       print $this->Form->input('q', $options);
-      print $this->Form->submit(_txt('op.search'));
+      $options = array(
+        'type' => 'submit',
+        'class' => 'btn btn-primary global-search-submit',
+        'escape' => false
+      );
+      $submitButtonText = '<span class="material-icons-outlined">search</span><span class="search-button-text">' . _txt('op.search') . '</span>';
+      print $this->Form->button($submitButtonText, $options);
     ?>
   </div>
   <?php

app/View/Elements/javascript.ctp

@@ -163,19 +163,6 @@
     // END DESKTOP MENU DRAWER BEHAVIOR
 
     // USER MENU BEHAVIORS
-    // Toggle the global search box
-    $("#global-search-toggle").click(function (e) {
-      e.stopPropagation();
-      if ($("#global-search-box").is(":visible")) {
-        $("#global-search-box").hide();
-        $(this).attr("aria-expanded","false");
-      } else {
-        $("#global-search-box").show();
-        $("#global-search-box .input input[type='text']").focus();
-        $(this).attr("aria-expanded","true");
-      }
-    });
-
     // Toggle the custom user panel in the user menu
     $("#user-panel-toggle").click(function(e) {
       e.stopPropagation();
@@ -202,8 +189,8 @@
 
     // Hide interface items on click outside
     $(document).on('click', function (e) {
-      if ($(e.target).closest("#user-panel, #global-search-box, #notification-menu").length === 0) {
-        $("#user-panel, #global-search-box, #notifications-menu").hide();
+      if ($(e.target).closest("#user-panel, #notification-menu").length === 0) {
+        $("#user-panel, #notifications-menu").hide();
       }
       if ($(e.target).closest(".cm-inline-editable-field").length === 0) {
         $(".cm-inline-editable-field").removeClass('active');

app/View/Elements/menuUser.ctp

@@ -27,34 +27,6 @@
  */
 ?>
 
-<?php if(!empty($cur_co['Co']['id']) && $vv_ui_mode === EnrollmentFlowUIMode::Full): ?>
-
-  <div id="global-search" class="topMenu">
-    <?php
-      $options = array(
-        'type' => 'get',
-        'url' => array(
-          'plugin' => null,
-          'action' => 'search'
-        )
-      );
-      print $this->Form->create('CoDashboard', $options);
-      print $this->Form->label('q', '<span class="sr-only">' . _txt('op.search')
-        . '</span><button type="button" id="global-search-toggle" aria-expanded="false" class="cm-toggle"><em class="material-icons">search</em></button>');
-      print '<div id="global-search-box" style="display: none;">';
-      $options = array(
-        'label' => false,
-      );
-      print $this->Form->input('q', $options);
-      print $this->Form->submit(_txt('op.search'));
-      print $this->Form->hidden('co', array('default' => $cur_co['Co']['id']));
-      print '</div>';
-      print $this->Form->end();
-    ?>
-  </div>
-
-<?php endif; ?>
-
 <?php if(isset($vv_my_notifications)): ?>
 
   <div id="notifications">

app/View/Elements/searchGlobal.ctp

@@ -0,0 +1,72 @@
+<?php
+/**
+ * COmanage Registry Global Search Element
+ *
+ * Portions licensed to the University Corporation for Advanced Internet
+ * Development, Inc. ("UCAID") under one or more contributor license agreements.
+ * See the NOTICE file distributed with this work for additional information
+ * regarding copyright ownership.
+ *
+ * UCAID licenses this file to you under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with the
+ * License. You may obtain a copy of the License at:
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * @link          http://www.internet2.edu/comanage COmanage Project
+ * @package       registry
+ * @since         COmanage Registry v4.5.0
+ * @license       Apache License, Version 2.0 (http://www.apache.org/licenses/LICENSE-2.0)
+ */
+?>
+<div id="global-search">
+  <?php
+    $options = array(
+      'type' => 'get',
+      'url' => array(
+        'plugin' => null,
+        'action' => 'search'
+      ),
+      'id' => 'co-global-search-form'
+    );
+    print $this->Form->create('CoDashboard', $options);
+  ?>
+
+  <div id="global-search-box">
+  <?php
+    // output the label, visible only to screen readers
+    $options = array(
+      'for' => 'global-search-field'
+    );
+    print $this->Form->label('q', '<span class="sr-only">' . _txt('op.search.global') . '</span>', $options);
+
+    // output the search field
+    $options = array(
+      'label' => false,
+      'id' => 'global-search-field'
+    );
+    print $this->Form->input('q', $options);
+
+    // output the submit button
+    $options = array(
+      'type' => 'submit',
+      'class' => 'btn btn-primary btn-sm global-search-submit',
+      'escape' => false
+    );
+    $submitButtonText = '<span class="material-icons-outlined">search</span><span class="search-button-text">' . _txt('op.search') . '</span>';
+    print $this->Form->button($submitButtonText, $options);
+
+    print $this->Form->hidden('co', array('default' => $cur_co['Co']['id']));
+  ?>
+  </div>
+
+  <?php
+    print $this->Form->end();
+  ?>
+</div>

app/View/Layouts/default.ctp

@@ -170,14 +170,19 @@
       <?php endif; ?>
 
       <div id="top-menu">
-        <?php if($vv_ui_mode === EnrollmentFlowUIMode::Full): ?>
-          <button id="co-hamburger" class="cm-toggle" aria-controls="navigation-drawer"><em class="material-icons">menu</em></button>
-        <?php endif; ?>
-        <?php if(!empty($vv_NavLinks) || !empty($vv_CoNavLinks)): ?>
-          <div id="user-defined-links-top">
-            <?php print $this->element('links'); // XXX allow user to set this location (e.g. top or side) ?>
-          </div>
-        <?php endif; ?>
+        <div id="top-menu-left">
+          <?php if($vv_ui_mode === EnrollmentFlowUIMode::Full): ?>
+            <button id="co-hamburger" class="cm-toggle" aria-controls="navigation-drawer"><em class="material-icons">menu</em></button>
+          <?php endif; ?>
+          <?php if(!empty($cur_co['Co']['id']) && $vv_ui_mode === EnrollmentFlowUIMode::Full): ?>
+            <?php print $this->element('searchGlobal'); ?>
+          <?php endif; ?>
+          <?php if(!empty($vv_NavLinks) || !empty($vv_CoNavLinks)): ?>
+            <div id="user-defined-links-top">
+              <?php print $this->element('links'); // XXX allow user to set this location (e.g. top or side) ?>
+            </div>
+          <?php endif; ?>
+        </div>
         <nav id="user-menu" aria-label="<?php print _txt('me.menu.user'); ?>">
           <?php print $this->element('menuUser'); ?>
         </nav>

app/webroot/css/co-base.css

@@ -116,9 +116,18 @@ a {
 /* TOP MENU (BLACK BAR) */
 #top-menu {
   position: relative;
-  line-height: 1.5em;
-  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1em;
   background-color: var(--cmg-color-black-002);
+  z-index: 20;
+  min-height: 37px;
+}
+#top-menu-left {
+  display: flex;
+  align-items: center;
+  gap: 1em;
 }
 button.cm-toggle {
   padding: 0;
@@ -129,6 +138,7 @@ button.cm-toggle {
 }
 #top-menu button.cm-toggle {
   color: var(--cmg-color-white);
+  border: 1px dotted transparent; /* to avoid shifting the buttons on focus */
 }
 #top-menu button.cm-toggle:focus {
   border: 1px dotted #fff;
@@ -159,10 +169,6 @@ body.logged-out #user-menu {
   text-align: right;
 }
 body.logged-in #user-menu {
-  position: absolute;
-  margin: 0;
-  top: 0;
-  right: 1em;
   display: flex;
 }
 #user-menu #user,
@@ -182,41 +188,50 @@ body.logged-in #user-menu {
   vertical-align: bottom;
   font-size: 20px;
 }
+#global-search {
+  margin: 0.5em 0;
+}
 #global-search-box {
-  position: absolute;
-  top: 30px;
-  right: 0;
-  min-width: 320px;
-  z-index: 10;
-  margin: 0;
-  padding: 8px;
-  background-color: #f8f8f8;
-  box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
-  border-radius: 2px;
+  display: flex;
+  align-items: center;
+}
+#global-search-box label {
+  /* This is hidden except to screen readers. These rules help avoid false positives in automated accessiblity checkers. */
+  color: var(--cmg-color-white);
+  background-color: var(--cmg-color-black-001);
 }
 #global-search-box .submit,
 #global-search-box .input.text {
   display: inline-block;
 }
-#global-search-box #CoDashboardQ {
-  width: 194px;
-  padding: 18px 6px;
+#global-search-box #global-search-field {
+  width: 100px;
+  padding: 12px 8px;
   height: 24px;
-  margin: 2px 8px 0 0;
+  margin: 0 0.5em 0 0;
   border-radius: 2px;
-  border: 1px solid #ccc;
-  font-size: 16px;
+  border: none;
 }
 #global-search-box #CoDashboardQ:focus {
   background-color: #ffd;
 }
 #global-search-box .btn {
-  position: relative;
-  top: -4px;
+  padding: 0.3em 0.6em;
+  margin: 0;
+}
+.global-search-submit .material-icons-outlined {
+  display: none;
+}
+#global-search-box #CoDashboardQ:focus-visible {
+  outline: 3px solid var(--cmg-color-blue-primary);
+}
+#global-search-box .btn-primary:hover {
+  background-color: var(--cmg-color-blue-primary);
+  border-color: var(--cmg-color-gray-border);
 }
 #user-menu #user,
 #user-menu #logout {
-  margin-right: 12px;
+  margin-right: 1em;
 }
 #user-common-name {
   display: none;
@@ -231,17 +246,14 @@ body.logged-in #user-menu {
 #user-menu .icon-adjust {
   margin-right: -8px;
 }
-#user {
-  margin-top: 2px;
-}
 #user-panel {
   position: absolute;
   right: 0;
-  top: 27px;
   z-index: 200;
   color: var(--cmg-color-black-002);
   background-color: #f8f8f8;
   border: 1px solid #eee;
+  margin-top: 6px;
   padding: 1em;
   min-width: calc(100vw - 50px);
   box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
@@ -310,9 +322,6 @@ body.logged-in #user-menu {
   margin-top: 0;
 }
 /* NOTIFICATIONS */
-#notifications {
-  margin-top: 2px;
-}
 #user-notification-count {
   position: relative;
   top: -1px;
@@ -323,8 +332,8 @@ body.logged-in #user-menu {
   width: 220px;
   right: 140px;
   background-color: #f8f8f8;
-  top: 30px;
   list-style: none;
+  margin-top: 6px;
   padding: 0 0 1em;
   box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
   border-radius: 3px;
@@ -593,7 +602,7 @@ form#notificationStatus {
 }
 .custom-links a {
   display: block;
-  padding: 8px 4px 8px 16px;
+  padding: 0.5em;
   color: #92B6D1;
 }
 /* CONTENT */
@@ -697,7 +706,7 @@ body.co_people.canvas .titleNavContainer {
 }
 /* SEARCH PAGE */
 #CoDashboardSearchForm {
-  margin-bottom: 1em;
+  margin-bottom: 1.25em;
 }
 #search-results {
   display: flex;
@@ -713,26 +722,31 @@ body.co_people.canvas .titleNavContainer {
 #search-results .co-card li:nth-child(2n+1) {
   background-color: #ededed;
 }
+#search {
+  display: flex;
+  gap: 0.5em;
+  align-items: flex-end;
+}
+#search label {
+  font-size: 1.4em;
+}
 #search .input.text,
 #search .submit {
   display: inline-block;
 }
 #search input#CoDashboardQ {
-  height: 24px;
-  width: 170px;
-  margin-right: 0.5em;
-  padding: 4px;
+  width: 100%;
+  padding: 0.4em 0.75rem;
   border: 1px solid #ccc;
-  font-size: 16px;
+  font-size: 1.4em;
+  border-radius: 3px;
 }
 #search input#CoDashboardQ:focus {
   background-color: #ffd;
   border: 1px solid #ccc;
 }
-#search input[type=submit] {
-  position: relative;
-  top: -2px;
-  height: 33px;
+#search .global-search-submit {
+  margin-bottom: 2px;
 }
 #search-results .co-card .co-card {
   background-color: var(--cmg-color-white);