feat(gui): tips over some buttons
This commit is contained in:
@ -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;
|
||||
}
|
@ -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')}.
|
||||
|
@ -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
10
src/app/tooltip.js
Normal 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>
|
||||
)
|
||||
}
|
@ -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"
|
||||
}
|
||||
}
|
@ -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": "отобразить поисковые результаты для текущего поиского запроса"
|
||||
}
|
||||
}
|
@ -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"
|
||||
}
|
||||
}
|
Reference in New Issue
Block a user