Skip to content

Commit e077c22

Browse files
flodoloTheoChevalier
flodolo
authored and
TheoChevalier
committed
Rethink tooltips for search options (#842)
1 parent 6742526 commit e077c22

5 files changed

Lines changed: 138 additions & 65 deletions

File tree

‎app/views/search_form.php‎

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -127,6 +127,18 @@ class="mainsearch_default_checkbox"
127127

128128
<fieldset id="advanced_search">
129129
<label>Advanced Search options</label>
130+
<a href="#" id="tooltip_search"><span>i</span></a>
131+
<div class="tooltip" id="tooltip_search_text">
132+
<a href="#" id="tooltip_search_close" data-tooltip-id="tooltip_search_text" title="Close this panel">×</a>
133+
<h2>Case Sensitive</h2>
134+
<p>If selected, search with the <strong>exact case</strong> used in the search query. By default, case is ignored.</p>
135+
<h2>Each Word</h2>
136+
<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>
137+
<h2>Entire String</h2>
138+
<p>If selected, the <strong>entire string</strong> needs to match the search query. By default, partial matches are included in the results.</p>
139+
<h2>Entire Words</h2>
140+
<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>
141+
</div>
130142
<span>
131143
<input type="checkbox"
132144
name="case_sensitive"
@@ -135,8 +147,7 @@ class="mainsearch_default_checkbox"
135147
class="search_options"
136148
<?=Utils::checkboxState($check['case_sensitive'])?>
137149
/>
138-
<label for="case_sensitive" aria-describedby="tooltip_case">Case Sensitive</label>
139-
<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>
150+
<label for="case_sensitive">Case Sensitive</label>
140151
</span>
141152
<span>
142153
<input type="checkbox"
@@ -146,8 +157,7 @@ class="search_options"
146157
class="search_options"
147158
<?=Utils::checkboxState($check['each_word'])?>
148159
/>
149-
<label for="each_word" aria-describedby="tooltip_eachword">Each Word</label>
150-
<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>
160+
<label for="each_word">Each Word</label>
151161
</span>
152162
<span>
153163
<input type="checkbox"
@@ -157,8 +167,7 @@ class="search_options"
157167
class="search_options"
158168
<?=Utils::checkboxState($check['entire_string'])?>
159169
/>
160-
<label for="entire_string" aria-describedby="tooltip_entirestring">Entire String</label>
161-
<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>
170+
<label for="entire_string">Entire String</label>
162171
</span>
163172
<span>
164173
<input type="checkbox"
@@ -168,8 +177,7 @@ class="search_options"
168177
class="search_options"
169178
<?=Utils::checkboxState($check['entire_words'])?>
170179
/>
171-
<label for="entire_words" aria-describedby="tooltip_entirewords">Entire Words</label>
172-
<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>
180+
<label for="entire_words">Entire Words</label>
173181
</span>
174182
<?php if ($check['t2t'] == 't2t') :?>
175183
<input type="hidden"

‎composer.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,15 +21,15 @@
2121
"package": {
2222
"name": "zenorocha/clipboard.js",
2323
"type": "component",
24-
"version": "1.5.3",
24+
"version": "1.5.16",
2525
"dist": {
2626
"type": "zip",
27-
"url": "https://github.com/zenorocha/clipboard.js/archive/v1.5.3.zip"
27+
"url": "https://github.com/zenorocha/clipboard.js/archive/v1.5.16.zip"
2828
},
2929
"source": {
3030
"type": "git",
3131
"url": "https://github.com/zenorocha/clipboard.js.git",
32-
"reference": "1.5.3"
32+
"reference": "1.5.16"
3333
},
3434
"extra": {
3535
"component": {

‎web/js/base.js‎

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -67,13 +67,3 @@ $(document).ready(function() {
6767
// Focus on the main search field.
6868
$('#recherche').focus();
6969
});
70-
71-
var clipboard = new Clipboard('.clipboard');
72-
clipboard.on('success', function(e) {
73-
e.trigger.setAttribute('data-title', 'Translation copied!');
74-
e.trigger.setAttribute('class', 'clipboard tooltip');
75-
setTimeout(function(arg1) {
76-
arg1.trigger.setAttribute('class', 'clipboard');
77-
}, 1000, e);
78-
e.clearSelection();
79-
});

‎web/js/main_search.js‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -171,4 +171,29 @@ $(document).ready(function() {
171171
$('#recherche').autocomplete().clear();
172172
$(this).hide();
173173
});
174+
175+
// Associate code to search tooltip
176+
$('#tooltip_search').click(function(e) {
177+
e.preventDefault();
178+
if (!$('#tooltip_search_text').is(':visible')) {
179+
$('#tooltip_search_text').fadeIn(200);
180+
} else {
181+
$('#tooltip_search_text').fadeOut(20);
182+
}
183+
});
184+
185+
$('#tooltip_search_close').click(function() {
186+
$('#tooltip_search_text').fadeOut(20);
187+
});
188+
189+
// Initialize clipboard code (copy translation to clipboard)
190+
var clipboard = new Clipboard('.clipboard');
191+
192+
clipboard.on('success', function(e) {
193+
e.clearSelection();
194+
$('<div class="tooltip clipboard_tooltip">Translation copied</div>').insertAfter(e.trigger);
195+
$('.clipboard_tooltip').fadeIn(300).delay(1000).fadeOut(100, function() {
196+
$(this).remove();
197+
});
198+
});
174199
});

‎web/style/transvision.css‎

Lines changed: 94 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -434,6 +434,7 @@ td .link_to_entity {
434434
}
435435

436436
td .result_meta_link {
437+
position: relative;
437438
font-size: 75%;
438439
text-align: left;
439440
margin-top: 4px;
@@ -765,8 +766,15 @@ input[type="checkbox"]:disabled + label {
765766
}
766767

767768
#advanced_search {
769+
position: relative;
768770
width: 230px;
769771
text-align: left;
772+
padding-top: 0;
773+
margin-top: 5px;
774+
}
775+
776+
#advanced_search label {
777+
float: left;
770778
}
771779

772780
#advanced_search span > label {
@@ -782,6 +790,80 @@ input[type="checkbox"]:disabled + label {
782790
position: relative;
783791
}
784792

793+
#tooltip_search {
794+
display: block;
795+
width: 18px;
796+
height: 26px;
797+
float: left;
798+
margin-left: 4px;
799+
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;
800+
}
801+
802+
#tooltip_search_text {
803+
position: absolute;
804+
padding: 8px;
805+
top: 25px;
806+
right: 50px;
807+
width: 450px;
808+
font-size: 0.85em;
809+
text-align: left;
810+
}
811+
812+
@media only screen and (max-width: 900px) {
813+
#tooltip_search_text {
814+
left: -120px;
815+
width: 400px;
816+
}
817+
}
818+
819+
@media only screen and (max-width: 640px) {
820+
#tooltip_search {
821+
height: 20px;
822+
}
823+
824+
#tooltip_search_text {
825+
left: -80px;
826+
width: 300px;
827+
}
828+
}
829+
830+
@media only screen and (max-width: 480px) {
831+
#tooltip_search_text {
832+
left: -10px;
833+
width: 280px;
834+
}
835+
}
836+
837+
#tooltip_search_close {
838+
display: block;
839+
position: absolute;
840+
right: 5px;
841+
top: 5px;
842+
font-family: 'Fira Sans UltraLight', Arial, sans-serif;
843+
font-size: 35px;
844+
line-height: 0.5em;
845+
color: #fff;
846+
text-decoration: none;
847+
}
848+
849+
#tooltip_search_text h2 {
850+
border: 0;
851+
padding: 0;
852+
margin: 0;
853+
width: 100%;
854+
color: #fff;
855+
text-align: left;
856+
font-weight: bold;
857+
}
858+
859+
#tooltip_search_text p {
860+
margin: 0 0 5px;
861+
}
862+
863+
#tooltip_search span {
864+
display: none;
865+
}
866+
785867
#simplesearchform {
786868
display: block;
787869
margin: 10px auto;
@@ -796,26 +878,17 @@ input[type="checkbox"]:disabled + label {
796878
width: 150px;
797879
}
798880

799-
#advanced_search span > label:hover + .search_tooltip {
800-
display: block;
881+
.tooltip {
882+
display: none;
883+
z-index: 2;
801884
white-space: normal;
802885
font-size: 0.9em;
803-
top: 25px;
804-
left: -80px;
805-
width: 200px;
806886
padding: 0.5em;
807887
text-align: center;
808888
color: #fff;
809889
border-radius: 4px;
810890
background-color: #0095dd;
811-
transition: all linear .1s;
812-
opacity: 0.85;
813-
}
814-
815-
.search_tooltip {
816-
display: none;
817-
position: absolute;
818-
z-index: 2;
891+
opacity: 0.9;
819892
}
820893

821894
/* Autocomplete styles for suggestion popup */
@@ -1284,17 +1357,6 @@ input[type="checkbox"]:disabled + label {
12841357
display: block;
12851358
}
12861359

1287-
#advanced_search span > label:hover + .search_tooltip {
1288-
left: 20px;
1289-
top: 20px;
1290-
opacity: 0.9;
1291-
}
1292-
1293-
#advanced_search span > label:hover + #tooltip_entirewords,
1294-
#advanced_search span > label:hover + #tooltip_eachword {
1295-
left: -0px;
1296-
}
1297-
12981360
/* Hide search options */
12991361
.smallscreen_notices {
13001362
display: block;
@@ -1330,6 +1392,14 @@ input[type="checkbox"]:disabled + label {
13301392
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;
13311393
}
13321394

1395+
.clipboard_tooltip {
1396+
position: absolute;
1397+
top: -65px;
1398+
right: 0;
1399+
font-size: 1.5em;
1400+
width: 90px;
1401+
}
1402+
13331403
@media only screen and (max-width: 850px) {
13341404
.clipboard img {
13351405
position: relative;
@@ -1343,26 +1413,6 @@ input[type="checkbox"]:disabled + label {
13431413
cursor: pointer;
13441414
}
13451415

1346-
.tooltip {
1347-
position: relative;
1348-
}
1349-
1350-
.tooltip:hover::after {
1351-
position: absolute;
1352-
font-size: 0.7em;
1353-
text-align: center;
1354-
background-color: #0095dd;
1355-
opacity: 0.85;
1356-
border-radius: 4px;
1357-
bottom: 26px;
1358-
color: #fff;
1359-
content: attr(data-title);
1360-
right: 20%;
1361-
padding: 0.5em;
1362-
z-index: 98;
1363-
transition: all linear .1s;
1364-
}
1365-
13661416
/* Unlocalized words view */
13671417
#unlocalized_all #button-toggle {
13681418
margin: -20px auto 0;

0 commit comments

Comments
 (0)