Permalink
Browse files

Rethink tooltips for search options (#842)

  • Loading branch information...
flodolo authored and TheoChevalier committed Jan 31, 2017
1 parent 6742526 commit e077c22d2972d00dd88e7263d4a0c4c6575dcd66
Showing with 138 additions and 65 deletions.
  1. +16 −8 app/views/search_form.php
  2. +3 −3 composer.json
  3. +0 −10 web/js/base.js
  4. +25 −0 web/js/main_search.js
  5. +94 −44 web/style/transvision.css
View
@@ -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"
View
@@ -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": {
View
@@ -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();
-});
View
@@ -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();
+ });
+ });
});
View
@@ -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;

0 comments on commit e077c22

Please sign in to comment.