Rethink tooltips for search options (#842)

flodolo · TheoChevalier · commit e077c22d2972 · 2017-01-31T14:55:53.000Z
diff --git a/app/views/search_form.php b/app/views/search_form.php
@@ -127,6 +127,18 @@ class="mainsearch_default_checkbox"
 
                 <fieldset id="advanced_search">
                     <label>Advanced Search options</label>
+                    <a href="#" id="tooltip_search"><span>i</span></a>
+                    <div class="tooltip" id="tooltip_search_text">
+                        <a href="#" id="tooltip_search_close" data-tooltip-id="tooltip_search_text" title="Close this panel">×</a>
+                        <h2>Case Sensitive</h2>
+                        <p>If selected, search with the <strong>exact case</strong> used in the search query. By default, case is ignored.</p>
+                        <h2>Each Word</h2>
+                        <p>If selected, search for <strong>each word</strong> in the search query (at least 2 characters long). By default, the search query is used as a whole.</p>
+                        <h2>Entire String</h2>
+                        <p>If selected, the <strong>entire string</strong> needs to match the search query. By default, partial matches are included in the results.</p>
+                        <h2>Entire Words</h2>
+                        <p>If selected, each search term needs to match an <strong>entire word</strong>. By default, partial word matches are included in the results.</p>
+                    </div>
                     <span>
                         <input type="checkbox"
                                name="case_sensitive"
@@ -135,8 +147,7 @@ class="mainsearch_default_checkbox"
                                class="search_options"
                                <?=Utils::checkboxState($check['case_sensitive'])?>
                          />
-                        <label for="case_sensitive" aria-describedby="tooltip_case">Case Sensitive</label>
-                        <div id="tooltip_case" class="search_tooltip" role="tooltip">If selected, search with the <strong>exact case</strong> used in the search query. By default, case is ignored.</div>
+                        <label for="case_sensitive">Case Sensitive</label>
                     </span>
                     <span>
                         <input type="checkbox"
@@ -146,8 +157,7 @@ class="search_options"
                                class="search_options"
                                <?=Utils::checkboxState($check['each_word'])?>
                         />
-                        <label for="each_word" aria-describedby="tooltip_eachword">Each Word</label>
-                        <div id="tooltip_eachword" class="search_tooltip" role="tooltip">If selected, search for <strong>each word</strong> in the search query (at least 2 characters long). By default, the search query is used as a whole.</div>
+                        <label for="each_word">Each Word</label>
                     </span>
                     <span>
                         <input type="checkbox"
@@ -157,8 +167,7 @@ class="search_options"
                                class="search_options"
                                <?=Utils::checkboxState($check['entire_string'])?>
                         />
-                        <label for="entire_string" aria-describedby="tooltip_entirestring">Entire String</label>
-                        <div id="tooltip_entirestring" class="search_tooltip" role="tooltip">If selected, the <strong>entire string</strong> needs to match the search query. By default, partial matches are included in the results.</div>
+                        <label for="entire_string">Entire String</label>
                     </span>
                     <span>
                         <input type="checkbox"
@@ -168,8 +177,7 @@ class="search_options"
                                class="search_options"
                                <?=Utils::checkboxState($check['entire_words'])?>
                         />
-                        <label for="entire_words" aria-describedby="tooltip_entirewords">Entire Words</label>
-                        <div id="tooltip_entirewords" class="search_tooltip" role="tooltip">If selected, each search term needs to match an <strong>entire word</strong>. By default, partial word matches are included in the results.</div>
+                        <label for="entire_words">Entire Words</label>
                     </span>
                     <?php if ($check['t2t'] == 't2t') :?>
                     <input type="hidden"
diff --git a/composer.json b/composer.json
@@ -21,15 +21,15 @@
             "package": {
                 "name": "zenorocha/clipboard.js",
                 "type": "component",
-                "version": "1.5.3",
+                "version": "1.5.16",
                 "dist": {
                     "type": "zip",
-                    "url": "https://github.com/zenorocha/clipboard.js/archive/v1.5.3.zip"
+                    "url": "https://github.com/zenorocha/clipboard.js/archive/v1.5.16.zip"
                 },
                 "source": {
                     "type": "git",
                     "url": "https://github.com/zenorocha/clipboard.js.git",
-                    "reference": "1.5.3"
+                    "reference": "1.5.16"
                 },
                 "extra": {
                     "component": {
diff --git a/web/js/base.js b/web/js/base.js
@@ -67,13 +67,3 @@ $(document).ready(function() {
     // Focus on the main search field.
     $('#recherche').focus();
 });
-
-var clipboard = new Clipboard('.clipboard');
-clipboard.on('success', function(e) {
-    e.trigger.setAttribute('data-title', 'Translation copied!');
-    e.trigger.setAttribute('class', 'clipboard tooltip');
-    setTimeout(function(arg1) {
-        arg1.trigger.setAttribute('class', 'clipboard');
-    }, 1000, e);
-    e.clearSelection();
-});
diff --git a/web/js/main_search.js b/web/js/main_search.js
@@ -171,4 +171,29 @@ $(document).ready(function() {
         $('#recherche').autocomplete().clear();
         $(this).hide();
     });
+
+    // Associate code to search tooltip
+    $('#tooltip_search').click(function(e) {
+        e.preventDefault();
+        if (!$('#tooltip_search_text').is(':visible')) {
+            $('#tooltip_search_text').fadeIn(200);
+        } else {
+            $('#tooltip_search_text').fadeOut(20);
+        }
+    });
+
+    $('#tooltip_search_close').click(function() {
+        $('#tooltip_search_text').fadeOut(20);
+    });
+
+    // Initialize clipboard code (copy translation to clipboard)
+    var clipboard = new Clipboard('.clipboard');
+
+    clipboard.on('success', function(e) {
+        e.clearSelection();
+        $('<div class="tooltip clipboard_tooltip">Translation copied</div>').insertAfter(e.trigger);
+        $('.clipboard_tooltip').fadeIn(300).delay(1000).fadeOut(100, function() {
+            $(this).remove();
+        });
+    });
 });
diff --git a/web/style/transvision.css b/web/style/transvision.css
@@ -434,6 +434,7 @@ td .link_to_entity {
 }
 
 td .result_meta_link {
+    position: relative;
     font-size: 75%;
     text-align: left;
     margin-top: 4px;
@@ -765,8 +766,15 @@ input[type="checkbox"]:disabled + label {
 }
 
 #advanced_search {
+    position: relative;
     width: 230px;
     text-align: left;
+    padding-top: 0;
+    margin-top: 5px;
+}
+
+#advanced_search label {
+    float: left;
 }
 
 #advanced_search span > label {
@@ -782,6 +790,80 @@ input[type="checkbox"]:disabled + label {
     position: relative;
 }
 
+#tooltip_search {
+    display: block;
+    width: 18px;
+    height: 26px;
+    float: left;
+    margin-left: 4px;
+    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" width="18" height="18"><path style="fill: rgb(0,149,221)" d="M128 22.158a105.84 105.84 0 0 0-105.84 105.84A105.84 105.84 0 0 0 128 233.838a105.84 105.84 0 0 0 105.84-105.84A105.84 105.84 0 0 0 128 22.158zm0 32.76c5.16.117 9.55 1.875 13.18 5.273 3.34 3.576 5.07 7.94 5.19 13.097-.12 5.156-1.85 9.404-5.19 12.744-3.63 3.75-8.02 5.626-13.18 5.626s-9.4-1.875-12.74-5.625c-3.75-3.34-5.63-7.587-5.63-12.743s1.88-9.52 5.63-13.096c3.34-3.397 7.58-5.155 12.74-5.272zm-16.35 53.792h32.79v92.37h-32.79v-92.37z"/></svg>') center no-repeat transparent;
+}
+
+#tooltip_search_text {
+    position: absolute;
+    padding: 8px;
+    top: 25px;
+    right: 50px;
+    width: 450px;
+    font-size: 0.85em;
+    text-align: left;
+}
+
+@media only screen and (max-width: 900px) {
+    #tooltip_search_text {
+        left: -120px;
+        width: 400px;
+    }
+}
+
+@media only screen and (max-width: 640px) {
+    #tooltip_search {
+        height: 20px;
+    }
+
+    #tooltip_search_text {
+        left: -80px;
+        width: 300px;
+    }
+}
+
+@media only screen and (max-width: 480px) {
+    #tooltip_search_text {
+        left: -10px;
+        width: 280px;
+    }
+}
+
+#tooltip_search_close {
+    display: block;
+    position: absolute;
+    right: 5px;
+    top: 5px;
+    font-family: 'Fira Sans UltraLight', Arial, sans-serif;
+    font-size: 35px;
+    line-height: 0.5em;
+    color: #fff;
+    text-decoration: none;
+}
+
+#tooltip_search_text h2 {
+    border: 0;
+    padding: 0;
+    margin: 0;
+    width: 100%;
+    color: #fff;
+    text-align: left;
+    font-weight: bold;
+}
+
+#tooltip_search_text p {
+    margin: 0 0 5px;
+}
+
+#tooltip_search span {
+    display: none;
+}
+
 #simplesearchform {
     display: block;
     margin: 10px auto;
@@ -796,26 +878,17 @@ input[type="checkbox"]:disabled + label {
     width: 150px;
 }
 
-#advanced_search span > label:hover + .search_tooltip {
-    display: block;
+.tooltip {
+    display: none;
+    z-index: 2;
     white-space: normal;
     font-size: 0.9em;
-    top: 25px;
-    left: -80px;
-    width: 200px;
     padding: 0.5em;
     text-align: center;
     color: #fff;
     border-radius: 4px;
     background-color: #0095dd;
-    transition: all linear .1s;
-    opacity: 0.85;
-}
-
-.search_tooltip {
-    display: none;
-    position: absolute;
-    z-index: 2;
+    opacity: 0.9;
 }
 
 /* Autocomplete styles for suggestion popup */
@@ -1284,17 +1357,6 @@ input[type="checkbox"]:disabled + label {
         display: block;
     }
 
-    #advanced_search span > label:hover + .search_tooltip {
-        left: 20px;
-        top: 20px;
-        opacity: 0.9;
-    }
-
-    #advanced_search span > label:hover + #tooltip_entirewords,
-    #advanced_search span > label:hover + #tooltip_eachword {
-        left: -0px;
-    }
-
     /* Hide search options */
     .smallscreen_notices {
         display: block;
@@ -1330,6 +1392,14 @@ input[type="checkbox"]:disabled + label {
     background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path style="fill: rgb(0,149,221)" d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg>') center no-repeat transparent;
 }
 
+.clipboard_tooltip {
+    position: absolute;
+    top: -65px;
+    right: 0;
+    font-size: 1.5em;
+    width: 90px;
+}
+
 @media only screen and (max-width: 850px) {
     .clipboard img {
         position: relative;
@@ -1343,26 +1413,6 @@ input[type="checkbox"]:disabled + label {
     cursor: pointer;
 }
 
-.tooltip {
-    position: relative;
-}
-
-.tooltip:hover::after {
-    position: absolute;
-    font-size: 0.7em;
-    text-align: center;
-    background-color: #0095dd;
-    opacity: 0.85;
-    border-radius: 4px;
-    bottom: 26px;
-    color: #fff;
-    content: attr(data-title);
-    right: 20%;
-    padding: 0.5em;
-    z-index: 98;
-    transition: all linear .1s;
-}
-
 /* Unlocalized words view */
 #unlocalized_all #button-toggle {
     margin: -20px auto 0;
