[icinga-checkins] icinga.org: icingaweb2/master: CSS: Add clear button to the search field in the menu

git at icinga.org git at icinga.org
Wed Nov 16 12:56:48 CET 2016


Module: icingaweb2
Branch: master
Commit: 6b06e05c04354c654eaaf372c22eb80cadae28de
URL:    https://git.icinga.org/?p=icingaweb2.git;a=commit;h=6b06e05c04354c654eaaf372c22eb80cadae28de

Author: Eric Lippmann <eric.lippmann at icinga.com>
Date:   Wed Nov 16 11:43:21 2016 +0100

CSS: Add clear button to the search field in the menu

refs #11835

---

 application/views/scripts/layout/menu.phtml |   10 +++---
 public/css/icinga/menu.less                 |   45 ++++++++++++++++++++++++++-
 2 files changed, 49 insertions(+), 6 deletions(-)

diff --git a/application/views/scripts/layout/menu.phtml b/application/views/scripts/layout/menu.phtml
index 6821e53..6102432 100644
--- a/application/views/scripts/layout/menu.phtml
+++ b/application/views/scripts/layout/menu.phtml
@@ -6,11 +6,11 @@ $searchDashboard = new SearchDashboard();
 $searchDashboard->setUser($this->Auth()->getUser());
 
 if ($searchDashboard->search('dummy')->getPane('search')->hasDashlets()): ?>
-    <form action="<?= $this->href('search') ?>" method="get" role="search">
-        <input
-            type="text" name="q" id="search" class="search" placeholder="<?= $this->translate('Search') ?> …"
-            autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
-        />
+    <form action="<?= $this->href('search') ?>" method="get" role="search" class="search-control">
+        <input type="text" name="q" id="search" class="search search-input"
+               placeholder="<?= $this->translate('Search') ?> …"
+               autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" required="required">
+        <button class="search-reset icon-cancel" type="reset"></button>
     </form>
 <?php endif; ?>
 <?= $menuRenderer->setCssClass('primary-nav')->setElementTag('nav')->setHeading(t('Navigation')); ?>
diff --git a/public/css/icinga/menu.less b/public/css/icinga/menu.less
index 944461c..6bb1410 100644
--- a/public/css/icinga/menu.less
+++ b/public/css/icinga/menu.less
@@ -167,7 +167,6 @@
 }
 
 // Accessibility skip links
-
 .skip-links {
   position: relative;
   ul {
@@ -198,3 +197,47 @@
   bottom: 0 !important;
   height: auto !important;
 }
+
+.search-control {
+  position: relative;
+}
+
+.search-reset {
+  background: none;
+  border: 0;
+  cursor: pointer;
+  display: none;
+  height: 100%;
+  padding: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  user-select: none;
+}
+
+.search-reset:focus {
+  outline: 0;
+}
+
+// Override forms.less
+input[type=text].search-input {
+  padding-right: 1.4em;
+  text-overflow: ellipsis;
+}
+
+.search-input:valid ~ .search-reset {
+  animation-duration: .4s;
+  animation-name: search-reset-in;
+  display: block;
+}
+
+ at keyframes search-reset-in {
+  0% {
+    opacity: 0;
+    transform: translate3d(-20%, 0, 0);
+  }
+  100% {
+    opacity: 1;
+    transform: none;
+  }
+}



More information about the icinga-checkins mailing list