feat(gui): tips over some buttons

DEgITx · Jun 22, 2018 · a1bdaa5 · a1bdaa5
1 parent b3fa8bf
commit a1bdaa5
Show file tree

Hide file tree

Showing 7 changed files with 145 additions and 72 deletions.
diff --git a/src/app/app.css b/src/app/app.css
@@ -38,4 +38,40 @@
 
 .header.sticky .search-panel {
   margin-bottom: 0px;
+}
+
+.tooltip {
+  position: relative;
+  display: inline-block;
+}
+
+.tooltip .tooltiptext {
+  visibility: hidden;
+  width: 120px;
+  background-color: black;
+  color: #fff;
+  text-align: center;
+  border-radius: 6px;
+  padding: 8px 6px;
+  position: absolute;
+  z-index: 3;
+  top: 150%;
+  left: 50%;
+  margin-left: -60px;
+  font-size: 0.9em;
+}
+
+.tooltip .tooltiptext::after {
+  content: "";
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  margin-left: -5px;
+  border-width: 5px;
+  border-style: solid;
+  border-color: transparent transparent black transparent;
+}
+
+.tooltip:hover .tooltiptext {
+  visibility: visible;
 }
diff --git a/src/app/header.js b/src/app/header.js
@@ -3,6 +3,7 @@ import {Card, CardActions, CardHeader, CardMedia, CardTitle, CardText} from 'mat
 import Background from './images/pirate-mod.jpg'
 import RaisedButton from 'material-ui/RaisedButton';
 import Search from './search'
+import Tooltip from './tooltip'
 
 class Header extends React.Component {
 	constructor(props)
@@ -56,13 +57,14 @@ class Header extends React.Component {
 						overlay={<CardTitle className='header-title' title={__('Yarrr, Landlubbers!')} style={{paddingTop: 2}} subtitle={
 							<div>
 								<div className='row' style={{position: 'absolute', top: -65}}>
-									<svg className='clickable'
-										onClick={() => {
-											window.router('/config')
-										}}
-										fill='white' style={{height: 45, margin: 4}} viewBox="0 0 932.179 932.179">
-										<g>
-											<path d="M61.2,341.538c4.9,16.8,11.7,33,20.3,48.2l-24.5,30.9c-8,10.1-7.1,24.5,1.9,33.6l42.2,42.2c9.1,9.1,23.5,9.899,33.6,1.899
+									<Tooltip hint={__('main settings')}>
+										<svg className='clickable'
+											onClick={() => {
+												window.router('/config')
+											}}
+											fill='white' style={{height: 45, margin: 4}} viewBox="0 0 932.179 932.179">
+											<g>
+												<path d="M61.2,341.538c4.9,16.8,11.7,33,20.3,48.2l-24.5,30.9c-8,10.1-7.1,24.5,1.9,33.6l42.2,42.2c9.1,9.1,23.5,9.899,33.6,1.899
                   l30.7-24.3c15.8,9.101,32.6,16.2,50.1,21.2l4.6,39.5c1.5,12.8,12.3,22.4,25.1,22.4h59.7c12.8,0,23.6-9.601,25.1-22.4l4.4-38.1
                   c18.8-4.9,36.8-12.2,53.7-21.7l29.7,23.5c10.1,8,24.5,7.1,33.6-1.9l42.2-42.2c9.1-9.1,9.9-23.5,1.9-33.6l-23.1-29.3
                   c9.6-16.601,17.1-34.3,22.1-52.8l35.6-4.1c12.801-1.5,22.4-12.3,22.4-25.1v-59.7c0-12.8-9.6-23.6-22.4-25.1l-35.1-4.1
@@ -71,7 +73,7 @@ class Header extends React.Component {
                   c-19.8,5.3-38.7,13.3-56.3,23.8l-27.5-21.8c-10.1-8-24.5-7.1-33.6,1.9l-42.2,42.2c-9.1,9.1-9.9,23.5-1.9,33.6l23,29.1
                   c-9.2,16.6-16.2,34.3-20.8,52.7l-36.8,4.2c-12.8,1.5-22.4,12.3-22.4,25.1v59.7c0,12.8,9.6,23.6,22.4,25.1L61.2,341.538z
                   M277.5,180.038c54.4,0,98.7,44.3,98.7,98.7s-44.3,98.7-98.7,98.7c-54.399,0-98.7-44.3-98.7-98.7S223.1,180.038,277.5,180.038z"/>
-											<path d="M867.699,356.238l-31.5-26.6c-9.699-8.2-24-7.8-33.199,0.9l-17.4,16.3c-14.699-7.1-30.299-12.1-46.4-15l-4.898-24
+												<path d="M867.699,356.238l-31.5-26.6c-9.699-8.2-24-7.8-33.199,0.9l-17.4,16.3c-14.699-7.1-30.299-12.1-46.4-15l-4.898-24
                   c-2.5-12.4-14-21-26.602-20l-41.1,3.5c-12.6,1.1-22.5,11.4-22.9,24.1l-0.799,24.4c-15.801,5.7-30.701,13.5-44.301,23.3
                   l-20.799-13.8c-10.602-7-24.701-5-32.9,4.7l-26.6,31.7c-8.201,9.7-7.801,24,0.898,33.2l18.201,19.399
                   c-6.301,14.2-10.801,29.101-13.4,44.4l-26,5.3c-12.4,2.5-21,14-20,26.601l3.5,41.1c1.1,12.6,11.4,22.5,24.1,22.9l28.1,0.899
@@ -82,7 +84,7 @@ class Header extends React.Component {
                   c-5.201-14.6-12.201-28.399-20.9-41.2l13.699-20.6C879.4,378.638,877.4,364.438,867.699,356.238z M712.801,593.837
                   c-44.4,3.801-83.602-29.3-87.301-73.699c-3.801-44.4,29.301-83.601,73.699-87.301c44.4-3.8,83.602,29.301,87.301,73.7
                   C790.301,550.938,757.199,590.138,712.801,593.837z"/>
-											<path d="M205,704.438c-12.6,1.3-22.3,11.899-22.4,24.6l-0.3,25.3c-0.2,12.7,9.2,23.5,21.8,25.101l18.6,2.399
+												<path d="M205,704.438c-12.6,1.3-22.3,11.899-22.4,24.6l-0.3,25.3c-0.2,12.7,9.2,23.5,21.8,25.101l18.6,2.399
                   c3.1,11.301,7.5,22.101,13.2,32.301l-12,14.8c-8,9.899-7.4,24.1,1.5,33.2l17.7,18.1c8.9,9.1,23.1,10.1,33.2,2.3l14.899-11.5
                   c10.5,6.2,21.601,11.101,33.2,14.5l2,19.2c1.3,12.6,11.9,22.3,24.6,22.4l25.301,0.3c12.699,0.2,23.5-9.2,25.1-21.8l2.3-18.2
                   c12.601-3.101,24.601-7.8,36-14l14,11.3c9.9,8,24.101,7.4,33.201-1.5l18.1-17.7c9.1-8.899,10.1-23.1,2.301-33.2L496.6,818.438
@@ -93,47 +95,49 @@ class Header extends React.Component {
                   l-18.2,17.801c-9.1,8.899-10.1,23.1-2.3,33.199l10.7,13.801c-6.2,11-11.1,22.699-14.3,35L205,704.438z M368.3,675.837
                   c36.3,0.4,65.399,30.301,65,66.601c-0.4,36.3-30.301,65.399-66.601,65c-36.3-0.4-65.399-30.3-65-66.601
                   C302.1,704.538,332,675.438,368.3,675.837z"/>
-										</g>
-									</svg>
-									<svg className='clickable'
-										onClick={() => {
-											window.router('/filters')
-										}}
-										fill='white' style={{height: 45, margin: 4}} viewBox="0 0 512 512">
-										<g>
+											</g>
+										</svg>
+									</Tooltip>
+									<Tooltip hint={__('filters settings')}>
+										<svg className='clickable'
+											onClick={() => {
+												window.router('/filters')
+											}}
+											fill='white' style={{height: 45, margin: 4}} viewBox="0 0 512 512">
 											<g>
-												<path d="M256,103.536c-58.559,0-106.2,47.641-106.2,106.2c0,4.512,3.657,8.169,8.169,8.169s8.169-3.658,8.169-8.169
+												<g>
+													<path d="M256,103.536c-58.559,0-106.2,47.641-106.2,106.2c0,4.512,3.657,8.169,8.169,8.169s8.169-3.658,8.169-8.169
                     c0-49.55,40.313-89.862,89.862-89.862c49.549,0,89.862,40.311,89.862,89.862c0,4.512,3.658,8.169,8.169,8.169
                     c4.513,0,8.169-3.658,8.169-8.169C362.2,151.177,314.559,103.536,256,103.536z"/>
+												</g>
 											</g>
-										</g>
-										<g>
 											<g>
-												<path d="M256,136.213c-40.541,0-73.523,32.982-73.523,73.523c0,4.512,3.657,8.169,8.169,8.169s8.169-3.658,8.169-8.169
+												<g>
+													<path d="M256,136.213c-40.541,0-73.523,32.982-73.523,73.523c0,4.512,3.657,8.169,8.169,8.169s8.169-3.658,8.169-8.169
                     c0-31.532,25.654-57.185,57.185-57.185s57.185,25.653,57.185,57.185c0,4.512,3.657,8.169,8.169,8.169
                     c4.513,0,8.169-3.658,8.169-8.169C329.523,169.195,296.541,136.213,256,136.213z"/>
+												</g>
 											</g>
-										</g>
-										<g>
 											<g>
-												<path d="M503.801,234.245H8.199c-4.513,0-8.169,3.658-8.169,8.169v43.569c0,2.721,1.354,5.263,3.612,6.781L167.331,402.76
+												<g>
+													<path d="M503.801,234.245H8.199c-4.513,0-8.169,3.658-8.169,8.169v43.569c0,2.721,1.354,5.263,3.612,6.781L167.331,402.76
                     c5.092,3.857,9.699,13.038,9.699,19.379v81.693c0,4.512,3.656,8.169,8.169,8.169h141.6c4.513,0,8.169-3.658,8.169-8.169v-81.693
                     c0-6.34,4.606-15.522,9.699-19.379l163.691-109.995c2.258-1.517,3.612-4.06,3.612-6.781v-43.569
                     C511.97,237.903,508.313,234.245,503.801,234.245z M495.632,277.815H157.969c-4.513,0-8.169,3.658-8.169,8.169
                     s3.657,8.169,8.169,8.169h319.028l-141.61,95.159c-0.1,0.068-0.199,0.137-0.296,0.209c-9.383,6.93-16.458,20.951-16.458,32.616
                     v73.523H193.37v-73.523c0-11.665-7.076-25.686-16.458-32.616c-0.098-0.072-0.197-0.142-0.296-0.209L35.003,294.153h90.289
                     c4.513,0,8.169-3.658,8.169-8.169s-3.657-8.169-8.169-8.169H16.368v-27.231h479.263V277.815z"/>
+												</g>
 											</g>
-										</g>
-										<g>
 											<g>
-												<path d="M296.504,397.63h-81.006c-4.513,0-8.169,3.658-8.169,8.169c0,4.512,3.657,8.169,8.169,8.169h81.006
+												<g>
+													<path d="M296.504,397.63h-81.006c-4.513,0-8.169,3.658-8.169,8.169c0,4.512,3.657,8.169,8.169,8.169h81.006
                     c4.513,0,8.169-3.658,8.169-8.169C304.674,401.288,301.016,397.63,296.504,397.63z"/>
+												</g>
 											</g>
-										</g>
-										<g>
 											<g>
-												<path d="M458.171,168.573l-36.481-3.382c-3.895-14.477-9.68-28.351-17.251-41.376l23.416-28.2
+												<g>
+													<path d="M458.171,168.573l-36.481-3.382c-3.895-14.477-9.68-28.351-17.251-41.376l23.416-28.2
                     c2.696-3.246,2.475-8.011-0.509-10.995l-46.545-46.545c-2.983-2.983-7.749-3.206-10.996-0.509L341.51,61.063
                     c-13.017-7.52-26.88-13.258-41.343-17.113l-3.386-36.534C296.391,3.213,292.866,0,288.647,0h-65.826
                     c-4.22,0-7.745,3.213-8.134,7.416l-3.401,36.68c-14.413,3.894-28.222,9.657-41.187,17.193L141.73,37.731
@@ -146,9 +150,10 @@ class Header extends React.Component {
                     c2.986,1.866,6.834,1.607,9.545-0.645l27.023-22.438l36.013,36.013l-22.371,26.941c-2.255,2.717-2.511,6.575-0.632,9.565
                     c9.189,14.625,15.814,30.514,19.69,47.225c0.795,3.429,3.699,5.964,7.203,6.287l34.829,3.229v25.582
                     c0,4.512,3.657,8.169,8.169,8.169s8.169-3.658,8.169-8.169v-33.029C465.586,172.488,462.373,168.963,458.171,168.573z"/>
+												</g>
 											</g>
-										</g>
-									</svg>
+										</svg>
+									</Tooltip>
 								</div>
 
 								{__('Welcome to')} ROTB! {__('This is file search engine based on the torrents from the internet')}. 

diff --git a/src/app/search.js b/src/app/search.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 
 import AdvancedSearch from './search-advanced-controls'
 import TorrentsStatistic from './torrent-statistic'
+import Tooltip from './tooltip'
 
 import TextField from 'material-ui/TextField';
 import RaisedButton from 'material-ui/RaisedButton';
@@ -261,21 +262,23 @@ class Search extends Component {
 						((this.searchTorrents && this.searchTorrents.length > 0) || (this.searchFiles && this.searchFiles.length > 0))
                         &&
                         <div style={{width: 25, height: 25, margin: 2, marginRight: 8}}>
-                        	<Checkbox
-                        		checked={false}
-                        		uncheckedIcon={<svg viewBox="0 0 459 459">
-                        			<g>
-                        				<path d="M178.5,382.5h102v-51h-102V382.5z M0,76.5v51h459v-51H0z M76.5,255h306v-51h-306V255z"/>
-                        			</g>
-                        		</svg>
-                        		}
-                        		iconStyle={{fill: '#27ce74'}}
-                        		onCheck={() => {
-                        			if(window.routerCurrent() !== '/search')
-                        				window.router('/search')
-                        		}}
-                        		style={{paddingTop: '0.6em', paddingLeft: '0.2em'}}
-                        	/>
+                        	<Tooltip hint={__('display search results for current search request')}>
+                        		<Checkbox
+                        			checked={false}
+                        			uncheckedIcon={<svg viewBox="0 0 459 459">
+                        				<g>
+                        					<path d="M178.5,382.5h102v-51h-102V382.5z M0,76.5v51h459v-51H0z M76.5,255h306v-51h-306V255z"/>
+                        				</g>
+                        			</svg>
+                        			}
+                        			iconStyle={{fill: '#27ce74'}}
+                        			onCheck={() => {
+                        				if(window.routerCurrent() !== '/search')
+                        					window.router('/search')
+                        			}}
+                        			style={{paddingTop: '0.6em', paddingLeft: '0.2em'}}
+                        		/>
+                        	</Tooltip>
                         </div>
 					}
 					<TextField
@@ -302,30 +305,34 @@ class Search extends Component {
 					/>
 
 					<div style={{width: 25, height: 25, margin: 2}}>
-						<Checkbox
-							ref='safeSearch'
-							checked={this.notSafeSearch ? true : false}
-							checkedIcon={<Visibility />}
-							uncheckedIcon={<VisibilityOff />}
-							iconStyle={{fill: this.state.safeSearchColor}}
-							onCheck={(ev, ch) => {
-								this.setState(this.setSafeSearch(ch));
-							}}
-							style={{paddingBottom: '0.8em'}}
-						/>
+						<Tooltip hint={__('enable/disable safe search (adult filter)')}>
+							<Checkbox
+								ref='safeSearch'
+								checked={this.notSafeSearch ? true : false}
+								checkedIcon={<Visibility />}
+								uncheckedIcon={<VisibilityOff />}
+								iconStyle={{fill: this.state.safeSearchColor}}
+								onCheck={(ev, ch) => {
+									this.setState(this.setSafeSearch(ch));
+								}}
+								style={{paddingBottom: '0.8em'}}
+							/>
+						</Tooltip>
 					</div>
 					<div style={{width: 25, height: 25, margin: 2}}>
-						<Checkbox
-							ref='advancedSearch'
-							checked={this.state.advancedSearch}
-							checkedIcon={<RemoveIcon />}
-							uncheckedIcon={<AddIcon />}
-							iconStyle={{fill: 'black'}}
-							onCheck={(ev, ch) => {
-								this.setState({advancedSearch: ch});
-							}}
-							style={{paddingBottom: '0.8em'}}
-						/>
+						<Tooltip hint={__('advanced search')}>
+							<Checkbox
+								ref='advancedSearch'
+								checked={this.state.advancedSearch}
+								checkedIcon={<RemoveIcon />}
+								uncheckedIcon={<AddIcon />}
+								iconStyle={{fill: 'black'}}
+								onCheck={(ev, ch) => {
+									this.setState({advancedSearch: ch});
+								}}
+								style={{paddingBottom: '0.8em'}}
+							/>
+						</Tooltip>
 					</div>
 
 					<RaisedButton style={{marginLeft: '10px'}} label={__('Search')} primary={true} onClick={() =>{

diff --git a/src/app/tooltip.js b/src/app/tooltip.js
@@ -0,0 +1,10 @@
+import React from 'react';
+
+export default (props) => {
+	return (
+		<div className='tooltip'>
+			{props.children}
+			<span class="tooltiptext">{props.hint}</span>
+		</div>
+	)
+}
diff --git a/translations/en.json b/translations/en.json
@@ -164,6 +164,11 @@
         "downloading": "downloading",
         "Cancel download": "Cancel download",
         "Back to previus": "Back to previus",
-        "Processing files": "Processing files"
+        "Processing files": "Processing files",
+        "main settings": "main settings",
+        "filters settings": "filters settings",
+        "enable/disable safe search (adult filter)": "enable/disable safe search (adult filter)",
+        "advanced search": "advanced search",
+        "display search results for current search request": "display search results for current search request"
     }
 }
diff --git a/translations/ru.json b/translations/ru.json
@@ -164,6 +164,11 @@
         "downloading": "скачивается",
         "Cancel download": "Отвенить закачку",
         "Back to previus": "Вернуться на предыдущую",
-        "Processing files": "Обработка файлов"
+        "Processing files": "Обработка файлов",
+        "main settings": "главные настройки",
+        "filters settings": "настройки фильтров",
+        "enable/disable safe search (adult filter)": "включить/выключить безопасный поиск (фильтр для взрослых)",
+        "advanced search": "расширенный поиск",
+        "display search results for current search request": "отобразить поисковые результаты для текущего поиского запроса"
     }
 }
diff --git a/translations/ua.json b/translations/ua.json
@@ -164,6 +164,11 @@
         "downloading": "downloading",
         "Cancel download": "Cancel download",
         "Back to previus": "Back to previus",
-        "Processing files": "Processing files"
+        "Processing files": "Processing files",
+        "main settings": "main settings",
+        "filters settings": "filters settings",
+        "enable/disable safe search (adult filter)": "enable/disable safe search (adult filter)",
+        "advanced search": "advanced search",
+        "display search results for current search request": "display search results for current search request"
     }
 }