feat(downloading): tooltips on torrent element

src/app/app.css

@@ -61,6 +61,10 @@
   font-size: 0.9em;
 }
 
+.tooltip .tooltiptext.right {
+	margin-left: -100px;
+}
+
 .tooltip .tooltiptext::after {
   content: "";
   position: absolute;
@@ -72,6 +76,10 @@
   border-color: transparent transparent black transparent;
 }
 
+.tooltip .tooltiptext.right::after {
+  left: 80%;
+}
+
 .tooltip:hover .tooltiptext {
   visibility: visible;
 }
@@ -82,7 +90,7 @@
 	height: 24px;
 	position: relative;
 	top: 0;
-	left: -15px;
+	left: -26px;
 	right: 0;
 	bottom: 0;
 }

src/app/tooltip.js

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

src/app/torrent.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import formatBytes from './format-bytes'
 import {ListItem} from 'material-ui/List';
 import Divider from 'material-ui/Divider';
+import ToolTip from './tooltip';
 
 import PagesPie from './pages-pie.js';
 import TorrentPage from './torrent-page'
@@ -358,6 +359,7 @@ export default class Torrent extends Component {
   							// mark delete after finish
   							canDeleteDownloadAfterFinish
                               &&
+                              <ToolTip hint={__('Dont start to seed torrent after download finish')} right={true}>
                               	<a href={`magnet:?xt=urn:btih:${torrent.hash}`}>
                               		<svg style={{
                               			height: '24px',
@@ -393,10 +395,12 @@ export default class Torrent extends Component {
                               			</g>
                               		</svg>
                               	</a>
+                              </ToolTip>
   						}
   						{
   							!this.state.startingDownloading && !this.state.downloading && !this.state.downloaded
   								?
+  								<ToolTip hint={__('Download using built-in client')} right={true}>
   									<a href={`magnet:?xt=urn:btih:${torrent.hash}`}>
   										<svg style={{
   											height: '24px',
@@ -430,9 +434,11 @@ export default class Torrent extends Component {
                     
   										</svg>
   									</a>
+  								</ToolTip>
   								:
   								this.state.startingDownloading && !this.state.downloading
 									  ?
+									  <ToolTip hint={__('Serching metadata in progress... Click will delete this torrent.')} right={true}>
   									<div className="overlay-loader" onClick={(e) => {
   										e.preventDefault();
   										e.stopPropagation();
@@ -448,13 +454,16 @@ export default class Torrent extends Component {
   											<div></div>
   										</div>
   									</div>
+									  </ToolTip>
   									:
   									this.state.downloaded
   										?
+  										<ToolTip hint={__('Delete download (files saved)')} right={true}>
   											<a href={`magnet:?xt=urn:btih:${torrent.hash}`}>
   												<svg style={{
   													height: '24px',
-  												fill: '#00C853'
+  													fill: '#00C853',
+  													marginRight: 12
   												}} onClick={(e) => {
   													e.preventDefault();
   													e.stopPropagation();
@@ -462,12 +471,15 @@ export default class Torrent extends Component {
   													window.torrentSocket.emit('downloadCancel', torrent.hash)
   												}} viewBox="0 0 18 18"><path d="M9 1C4.58 1 1 4.58 1 9s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm4 10.87L11.87 13 9 10.13 6.13 13 5 11.87 7.87 9 5 6.13 6.13 5 9 7.87 11.87 5 13 6.13 10.13 9 13 11.87z"/></svg>
   											</a>
+  										</ToolTip>
   										:
   										this.state.downloading
                                             &&
+                                            <ToolTip hint={__('Delete download (files saved)')} right={true}>
                                             	<a href={`magnet:?xt=urn:btih:${torrent.hash}`}>
                                             		<svg style={{
                                             			height: '24px',
+                                            			marginRight: 12,
                                             			fill: torrent.contentCategory != 'xxx' ? (torrent.peer ? '#5643db' : 'black') : (torrent.peer ? '#9083e2' : 'grey')
                                             		}} onClick={(e) => {
                                             			e.preventDefault();
@@ -476,7 +488,9 @@ export default class Torrent extends Component {
                                             			window.torrentSocket.emit('downloadCancel', torrent.hash)
                                             		}} viewBox="0 0 18 18"><path d="M9 1C4.58 1 1 4.58 1 9s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm4 10.87L11.87 13 9 10.13 6.13 13 5 11.87 7.87 9 5 6.13 6.13 5 9 7.87 11.87 5 13 6.13 10.13 9 13 11.87z"/></svg>
                                             	</a>
+                                            </ToolTip>
   						}
+  						<ToolTip hint={__('Open torrent in external torrent client')} right={true}>
   							<a style={{float: 'right'}} href={`magnet:?xt=urn:btih:${torrent.hash}`}>
   								<svg style={{
   									height: '24px',
@@ -499,6 +513,7 @@ export default class Torrent extends Component {
                   2.449zm-7.292-7.186l4.916-1.667-1.356-1.022 2.448-2.006-4.991 1.712 
                   1.478 1.114-2.495 1.869z"/></svg>
   							</a>
+  						</ToolTip>
   					</div>
   				}
   			/>

translations/en.json

@@ -169,6 +169,11 @@
         "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"
+        "display search results for current search request": "display search results for current search request",
+        "Download using built-in client": "Download using built-in client",
+        "Open torrent in external torrent client": "Open torrent in external torrent client",
+        "Dont start to seed torrent after download finish": "Dont start to seed torrent after download finish",
+        "Delete download (files saved)": "Delete download (files saved)",
+        "Serching metadata in progress... Click will delete this torrent.": "Serching metadata in progress... Click will delete this torrent."
     }
 }

translations/ru.json

@@ -169,6 +169,11 @@
         "filters settings": "настройки фильтров",
         "enable/disable safe search (adult filter)": "включить/выключить безопасный поиск (фильтр для взрослых)",
         "advanced search": "расширенный поиск",
-        "display search results for current search request": "отобразить поисковые результаты для текущего поиского запроса"
+        "display search results for current search request": "отобразить поисковые результаты для текущего поиского запроса",
+        "Download using built-in client": "Скачать используя встроенный клиент",
+        "Open torrent in external torrent client": "Открыть торрент во внешнем торрент-клиенте",
+        "Dont start to seed torrent after download finish": "Не начинать сидировать торрент после окончания загрузки",
+        "Delete download (files saved)": "Удалить закачку (сохранив файлы)",
+        "Serching metadata in progress... Click will delete this torrent.": "Поиск методанных в процессе... Клик удалит этот торрент."
     }
 }

translations/ua.json

@@ -169,6 +169,11 @@
         "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"
+        "display search results for current search request": "display search results for current search request",
+        "Download using built-in client": "Download using built-in client",
+        "Open torrent in external torrent client": "Open torrent in external torrent client",
+        "Dont start to seed torrent after download finish": "Dont start to seed torrent after download finish",
+        "Delete download (files saved)": "Delete download (files saved)",
+        "Serching metadata in progress... Click will delete this torrent.": "Serching metadata in progress... Click will delete this torrent."
     }
 }