Skip to content
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
@@ -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"
@@ -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": {
@@ -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();
});
@@ -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();
});
});
});
@@ -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.
You can’t perform that action at this time.