fix(gui): padding on some long torrent names

DEgITx · Jun 26, 2018 · e1f83a6 · e1f83a6
1 parent f262af6
commit e1f83a6
Show file tree

Hide file tree

Showing 4 changed files with 163 additions and 5 deletions.
diff --git a/src/app/app.css b/src/app/app.css
@@ -74,4 +74,153 @@
 
 .tooltip:hover .tooltiptext {
   visibility: visible;
+}
+
+.overlay-loader {
+	display: inline-block;
+	width: 24px;
+	height: 24px;
+	position: relative;
+	top: 0;
+	left: -15px;
+	right: 0;
+	bottom: 0;
+}
+.overlay-loader .loader {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	margin: auto;
+	width: 62px;
+	height: 62px;
+	animation-name: rotateAnim;
+		-o-animation-name: rotateAnim;
+		-ms-animation-name: rotateAnim;
+		-webkit-animation-name: rotateAnim;
+		-moz-animation-name: rotateAnim;
+	animation-duration: 0.98s;
+		-o-animation-duration: 0.98s;
+		-ms-animation-duration: 0.98s;
+		-webkit-animation-duration: 0.98s;
+		-moz-animation-duration: 0.98s;
+	animation-iteration-count: infinite;
+		-o-animation-iteration-count: infinite;
+		-ms-animation-iteration-count: infinite;
+		-webkit-animation-iteration-count: infinite;
+		-moz-animation-iteration-count: infinite;
+	animation-timing-function: linear;
+		-o-animation-timing-function: linear;
+		-ms-animation-timing-function: linear;
+		-webkit-animation-timing-function: linear;
+		-moz-animation-timing-function: linear;
+}
+.overlay-loader .loader div {
+	width: 5px;
+	height: 5px;
+	border-radius: 50%;
+	border: 1px solid rgb(0,0,0);
+	position: absolute;
+	top: 1px;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	margin: auto;
+}
+.overlay-loader .loader div:nth-child(odd) {
+	border-top: none;
+	border-left: none;
+}
+.overlay-loader .loader div:nth-child(even) {
+	border-bottom: none;
+	border-right: none;
+}
+.overlay-loader .loader div:nth-child(2) {
+	border-width: 1px;
+	left: 0px;
+	top: -2px;
+	width: 7px;
+	height: 7px;
+}
+.overlay-loader .loader div:nth-child(3) {
+	border-width: 1px;
+	left: -1px;
+	top: 2px;
+	width: 11px;
+	height: 11px;
+}
+.overlay-loader .loader div:nth-child(4) {
+	border-width: 2px;
+	left: -1px;
+	top: -2px;
+	width: 15px;
+	height: 15px;
+}
+.overlay-loader .loader div:nth-child(5) {
+	border-width: 2px;
+	left: -1px;
+	top: 2px;
+	width: 20px;
+	height: 20px;
+}
+.overlay-loader .loader div:nth-child(6) {
+	border-width: 2px;
+	left: 0px;
+	top: -2px;
+	width: 25px;
+	height: 25px;
+}
+.overlay-loader .loader div:nth-child(7) {
+	border-width: 2px;
+	left: 0px;
+	top: 4px;
+	width: 31px;
+	height: 31px;
+}
+
+
+@keyframes rotateAnim {
+	from {
+		transform: rotate(360deg);
+	}
+	to {
+		transform: rotate(0deg);
+	}
+}
+
+@-o-keyframes rotateAnim {
+	from {
+		-o-transform: rotate(360deg);
+	}
+	to {
+		-o-transform: rotate(0deg);
+	}
+}
+
+@-ms-keyframes rotateAnim {
+	from {
+		-ms-transform: rotate(360deg);
+	}
+	to {
+		-ms-transform: rotate(0deg);
+	}
+}
+
+@-webkit-keyframes rotateAnim {
+	from {
+		-webkit-transform: rotate(360deg);
+	}
+	to {
+		-webkit-transform: rotate(0deg);
+	}
+}
+
+@-moz-keyframes rotateAnim {
+	from {
+		-moz-transform: rotate(360deg);
+	}
+	to {
+		-moz-transform: rotate(0deg);
+	}
 }
diff --git a/src/app/torrent-page.js b/src/app/torrent-page.js
@@ -4,11 +4,9 @@ import formatBytes from './format-bytes'
 
 import {List, ListItem} from 'material-ui/List';
 import Subheader from 'material-ui/Subheader';
-import Divider from 'material-ui/Divider';
 import {Tabs, Tab} from 'material-ui/Tabs';
 import ActionInfo from 'material-ui/svg-icons/action/info';
 import RaisedButton from 'material-ui/RaisedButton';
-import FontIcon from 'material-ui/FontIcon';
 
 import FileFolder from 'material-ui/svg-icons/file/folder';
 import NoImage from './images/no-image-icon.png'

diff --git a/src/app/torrent.js b/src/app/torrent.js
@@ -6,7 +6,6 @@ import Divider from 'material-ui/Divider';
 import PagesPie from './pages-pie.js';
 import TorrentPage from './torrent-page'
 
-import Spinner24 from './images/spinner_24.gif'
 import LinearProgress from 'material-ui/LinearProgress';
 let rating = require('./rating');
 
@@ -229,6 +228,7 @@ export default class Torrent extends Component {
   	return (
   		<div>
   			<ListItem 
+  				innerDivStyle={{paddingRight: 84}}
   				onClick={(e) => {
   					const link = '/torrent/' + torrent.hash;
   					if(e.button === 1)
@@ -356,7 +356,17 @@ export default class Torrent extends Component {
   								:
   								this.state.askDownloading && !this.state.downloading
   									?
-  									<img src={Spinner24} />
+  									<div className="overlay-loader">
+  										<div className="loader">
+  											<div></div>
+  											<div></div>
+  											<div></div>
+  											<div></div>
+  											<div></div>
+  											<div></div>
+  											<div></div>
+  										</div>
+  									</div>
   									:
   									this.state.askDownloading && this.state.downloading
               &&

diff --git a/src/background/api.js b/src/background/api.js
@@ -607,7 +607,8 @@ module.exports = async ({
 					received: bytes,
 					downloaded: torrent.downloaded,
 					speed: torrent.downloadSpeed,
-					progress: torrent.progress
+					progress: torrent.progress,
+					timeRemaining: torrent.timeRemaining
 				})
 			})
 		})