feat(gui): tips over some buttons

This commit is contained in:
Alexey Kasyanchuk
2018-06-23 00:33:59 +03:00
parent 16164c25d8
commit 8868bae97d
7 changed files with 145 additions and 72 deletions

View File

@ -39,3 +39,39 @@
.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;
}

View File

@ -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,6 +57,7 @@ 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}}>
<Tooltip hint={__('main settings')}>
<svg className='clickable'
onClick={() => {
window.router('/config')
@ -95,6 +97,8 @@ class Header extends React.Component {
C302.1,704.538,332,675.438,368.3,675.837z"/>
</g>
</svg>
</Tooltip>
<Tooltip hint={__('filters settings')}>
<svg className='clickable'
onClick={() => {
window.router('/filters')
@ -149,6 +153,7 @@ class Header extends React.Component {
</g>
</g>
</svg>
</Tooltip>
</div>
{__('Welcome to')} ROTB! {__('This is file search engine based on the torrents from the internet')}.

View File

@ -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,6 +262,7 @@ 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}}>
<Tooltip hint={__('display search results for current search request')}>
<Checkbox
checked={false}
uncheckedIcon={<svg viewBox="0 0 459 459">
@ -276,6 +278,7 @@ class Search extends Component {
}}
style={{paddingTop: '0.6em', paddingLeft: '0.2em'}}
/>
</Tooltip>
</div>
}
<TextField
@ -302,6 +305,7 @@ class Search extends Component {
/>
<div style={{width: 25, height: 25, margin: 2}}>
<Tooltip hint={__('enable/disable safe search (adult filter)')}>
<Checkbox
ref='safeSearch'
checked={this.notSafeSearch ? true : false}
@ -313,8 +317,10 @@ class Search extends Component {
}}
style={{paddingBottom: '0.8em'}}
/>
</Tooltip>
</div>
<div style={{width: 25, height: 25, margin: 2}}>
<Tooltip hint={__('advanced search')}>
<Checkbox
ref='advancedSearch'
checked={this.state.advancedSearch}
@ -326,6 +332,7 @@ class Search extends Component {
}}
style={{paddingBottom: '0.8em'}}
/>
</Tooltip>
</div>
<RaisedButton style={{marginLeft: '10px'}} label={__('Search')} primary={true} onClick={() =>{

10
src/app/tooltip.js Normal file
View File

@ -0,0 +1,10 @@
import React from 'react';
export default (props) => {
return (
<div className='tooltip'>
{props.children}
<span class="tooltiptext">{props.hint}</span>
</div>
)
}

View File

@ -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"
}
}

View File

@ -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": "отобразить поисковые результаты для текущего поиского запроса"
}
}

View File

@ -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"
}
}