From 8868bae97d9f6fc6958bf06b714438319cddebcd Mon Sep 17 00:00:00 2001 From: Alexey Kasyanchuk Date: Sat, 23 Jun 2018 00:33:59 +0300 Subject: [PATCH] feat(gui): tips over some buttons --- src/app/app.css | 36 ++++++++++++++++++++ src/app/header.js | 69 ++++++++++++++++++++----------------- src/app/search.js | 81 ++++++++++++++++++++++++-------------------- src/app/tooltip.js | 10 ++++++ translations/en.json | 7 +++- translations/ru.json | 7 +++- translations/ua.json | 7 +++- 7 files changed, 145 insertions(+), 72 deletions(-) create mode 100644 src/app/tooltip.js diff --git a/src/app/app.css b/src/app/app.css index d6b411e..6142069 100644 --- 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; } \ No newline at end of file diff --git a/src/app/header.js b/src/app/header.js index 3d00faf..476bf13 100644 --- 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={
- { - window.router('/config') - }} - fill='white' style={{height: 45, margin: 4}} viewBox="0 0 932.179 932.179"> - - + + - - - - - { - window.router('/filters') - }} - fill='white' style={{height: 45, margin: 4}} viewBox="0 0 512 512"> - + + + + + { + window.router('/filters') + }} + fill='white' style={{height: 45, margin: 4}} viewBox="0 0 512 512"> - + - - - + - - - + - - - + - - - + - - + +
{__('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 index a5d28ab..b8c3ab8 100644 --- 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)) &&
- - - - - - } - iconStyle={{fill: '#27ce74'}} - onCheck={() => { - if(window.routerCurrent() !== '/search') - window.router('/search') - }} - style={{paddingTop: '0.6em', paddingLeft: '0.2em'}} - /> + + + + + + + } + iconStyle={{fill: '#27ce74'}} + onCheck={() => { + if(window.routerCurrent() !== '/search') + window.router('/search') + }} + style={{paddingTop: '0.6em', paddingLeft: '0.2em'}} + /> +
}
- } - uncheckedIcon={} - iconStyle={{fill: this.state.safeSearchColor}} - onCheck={(ev, ch) => { - this.setState(this.setSafeSearch(ch)); - }} - style={{paddingBottom: '0.8em'}} - /> + + } + uncheckedIcon={} + iconStyle={{fill: this.state.safeSearchColor}} + onCheck={(ev, ch) => { + this.setState(this.setSafeSearch(ch)); + }} + style={{paddingBottom: '0.8em'}} + /> +
- } - uncheckedIcon={} - iconStyle={{fill: 'black'}} - onCheck={(ev, ch) => { - this.setState({advancedSearch: ch}); - }} - style={{paddingBottom: '0.8em'}} - /> + + } + uncheckedIcon={} + iconStyle={{fill: 'black'}} + onCheck={(ev, ch) => { + this.setState({advancedSearch: ch}); + }} + style={{paddingBottom: '0.8em'}} + /> +
{ diff --git a/src/app/tooltip.js b/src/app/tooltip.js new file mode 100644 index 0000000..a8cff36 --- /dev/null +++ b/src/app/tooltip.js @@ -0,0 +1,10 @@ +import React from 'react'; + +export default (props) => { + return ( +
+ {props.children} + {props.hint} +
+ ) +} \ No newline at end of file diff --git a/translations/en.json b/translations/en.json index d407aa2..e8f7ce2 100644 --- 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" } } \ No newline at end of file diff --git a/translations/ru.json b/translations/ru.json index 7993a7d..7396368 100644 --- 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": "отобразить поисковые результаты для текущего поиского запроса" } } \ No newline at end of file diff --git a/translations/ua.json b/translations/ua.json index aac2252..6e02de1 100644 --- 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" } } \ No newline at end of file