evan/rats-search
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(gui): tips over some buttons

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/app/app.css
View File

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

69
src/app/header.js
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,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')}.

81
src/app/search.js
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,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={() =>{

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>
)
}

7
translations/en.json
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"
}
}

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

7
translations/ua.json
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"
}
}