fix: restore client-level progress indicators (#5083)
This commit is contained in:
Derek Reiff
GitHub
parent
5ada8c46d4
commit
451dd952f8
|
|
@ -5,23 +5,19 @@
|
|||
$blue-100: #dbedff;
|
||||
$blue-200: #c8e1ff;
|
||||
$blue-300: #79b8ff;
|
||||
$blue-700: #044289;
|
||||
$green-100: #dcffe4;
|
||||
$green-200: #bef5cb;
|
||||
$green-300: #85e89d;
|
||||
$green-500: #28a745;
|
||||
$green-700: #176f2c;
|
||||
$grey-200: #e1e4e8;
|
||||
$grey-500: #828282;
|
||||
$grey-700: #373737;
|
||||
$grey-800: #292929;
|
||||
$grey-900: #191919;
|
||||
$pink-300: #f692ce;
|
||||
$pink-700: #b93a86;
|
||||
$red-500: #d73a49;
|
||||
$white: #fff;
|
||||
$yellow-300: #ffea7f;
|
||||
$yellow-700: #dbab09;
|
||||
|
||||
$grey-40: #666;
|
||||
$nice-grey: #f8f8f8;
|
||||
$nice-grey-darker: #f0f0f0;
|
||||
|
|
@ -30,6 +26,7 @@ $default-accent-color: #fff8c5;
|
|||
$default-accent-color-dark: #2e2e2e;
|
||||
$default-border-dark: #575757;
|
||||
$default-border-light: #aeaeae;
|
||||
|
||||
// Z-INDEX ENUM
|
||||
// $z-index-progressbar: 1;
|
||||
$z-index-popup: 2;
|
||||
|
|
@ -55,6 +52,7 @@ $image-play-circle-idle: '../img/play-circle-idle.svg';
|
|||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin for-tablet-portrait-up {
|
||||
@media (min-width: 600px) {
|
||||
@content;
|
||||
|
|
@ -72,33 +70,27 @@ $image-play-circle-idle: '../img/play-circle-idle.svg';
|
|||
/// GLOBAL
|
||||
|
||||
:root {
|
||||
--progress: 100%;
|
||||
--color-fg-error: #{$red-500};
|
||||
--color-fg-port-closed: #{$red-500};
|
||||
--color-fg-port-open: #{$green-500};
|
||||
--color-progressbar-background-2: #{$grey-500};
|
||||
--color-progressbar-verify-1: #{$pink-300};
|
||||
--color-progressbar-verify-2: #{$pink-700};
|
||||
--color-progressbar-magnet-1: #{$yellow-300};
|
||||
--color-progressbar-magnet-2: #{$yellow-700};
|
||||
--color-progressbar-magnet-paused-1: #{$default-accent-color};
|
||||
--color-progressbar-magnet-paused-2: #{$grey-500};
|
||||
--color-progressbar-leech-paused-1: #{$blue-200};
|
||||
--color-progressbar-leech-paused-2: #{$grey-500};
|
||||
--color-progressbar-leech-queued-1: #{$blue-100};
|
||||
--color-progressbar-leech-queued-2: #{$blue-300};
|
||||
--color-progressbar-leech-1: #{$blue-300};
|
||||
--color-progressbar-leech-2: #{$blue-700};
|
||||
--color-progressbar-seed-paused-1: #{$green-200};
|
||||
--color-progressbar-seed-paused-2: #{$grey-500};
|
||||
--color-progressbar-seed-paused-1: #{$grey-200};
|
||||
--color-progressbar-seed-queued-1: #{$green-100};
|
||||
--color-progressbar-seed-queued-2: #{$green-300};
|
||||
--color-progressbar-seed-1: #{$green-300};
|
||||
--color-progressbar-seed-2: #{$green-700};
|
||||
|
||||
color-scheme: light dark;
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
--color-bg-hover: #{$grey-40};
|
||||
--color-fg-primary: #fff;
|
||||
--color-bg-primary: #{$grey-800};
|
||||
--color-bg-primary-hover: #{$grey-700};
|
||||
--color-bg-odd: #{$grey-900};
|
||||
--color-bg-even: #{$grey-800};
|
||||
--color-bg-menu: #{$grey-800};
|
||||
|
|
@ -118,6 +110,8 @@ $image-play-circle-idle: '../img/play-circle-idle.svg';
|
|||
--color-bg-tabs: #{$grey-700};
|
||||
--color-progressbar-background-1: #426389;
|
||||
--color-default-border: #{$default-border-dark};
|
||||
--color-progressbar-seed-1: #{$green-500};
|
||||
--color-progressbar-seed-2: #{$green-300};
|
||||
}
|
||||
@media (prefers-color-scheme: light) {
|
||||
--color-bg-hover: #{$nice-grey};
|
||||
|
|
@ -143,6 +137,8 @@ $image-play-circle-idle: '../img/play-circle-idle.svg';
|
|||
--color-progressbar-background-1: #{$nice-grey};
|
||||
--color-default-border: #{$default-border-light};
|
||||
--color-dialog-border: #{$nice-grey};
|
||||
--color-progressbar-seed-1: #{$green-300};
|
||||
--color-progressbar-seed-2: #{$green-200};
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -328,8 +324,8 @@ $speed-icon-size: 12px;
|
|||
|
||||
$pauseresume-size-number: 20;
|
||||
$pauseresume-size: $pauseresume-size-number * 1px;
|
||||
$progressbar-border-number: 1;
|
||||
$progressbar-height-number: 14;
|
||||
$progressbar-border: 1;
|
||||
$progressbar-height: 14;
|
||||
$popup-top: 61px; // TODO: ugly that this is hardcoded
|
||||
|
||||
.flex {
|
||||
|
|
@ -433,6 +429,50 @@ $video-image: '../img/film.svg';
|
|||
}
|
||||
}
|
||||
|
||||
.torrent-name {
|
||||
font-weight: bold;
|
||||
margin-bottom: 2px;
|
||||
margin-top: 2px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
&.compact {
|
||||
font-size: 1em;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
&:not(.paused) {
|
||||
color: var(--color-fg-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.torrent-labels {
|
||||
font-size: x-small;
|
||||
font-weight: normal;
|
||||
margin-bottom: 2px;
|
||||
margin-top: 2px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
&.compact {
|
||||
flex: 1;
|
||||
font-size: x-small;
|
||||
}
|
||||
}
|
||||
|
||||
.torrent-progress-details.error,
|
||||
.torrent-peer-details.error {
|
||||
color: var(--color-fg-error);
|
||||
}
|
||||
|
||||
.torrent-progress-details,
|
||||
.torrent-peer-details {
|
||||
color: var(--color-fg-primary);
|
||||
font-size: x-small;
|
||||
}
|
||||
|
||||
&.compact {
|
||||
$icon-size-num: 16;
|
||||
$icon-size: $icon-size-num * 1px;
|
||||
|
|
@ -547,58 +587,13 @@ $video-image: '../img/film.svg';
|
|||
}
|
||||
}
|
||||
|
||||
.torrent-progress-details.error,
|
||||
.torrent-peer-details.error {
|
||||
color: var(--color-fg-error);
|
||||
}
|
||||
|
||||
.torrent-name {
|
||||
font-weight: bold;
|
||||
margin-bottom: 2px;
|
||||
margin-top: 2px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
&.compact {
|
||||
font-size: 1em;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
&:not(.paused) {
|
||||
color: var(--color-fg-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.torrent-labels {
|
||||
font-size: x-small;
|
||||
font-weight: normal;
|
||||
margin-bottom: 2px;
|
||||
margin-top: 2px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
&.compact {
|
||||
flex: 1;
|
||||
font-size: x-small;
|
||||
}
|
||||
}
|
||||
|
||||
.torrent-progress-details,
|
||||
.torrent-peer-details {
|
||||
color: var(--color-fg-primary);
|
||||
font-size: x-small;
|
||||
}
|
||||
|
||||
.torrent-progress-bar {
|
||||
background-repeat: no-repeat;
|
||||
border-color: var(--color-border-selected);
|
||||
border-radius: 3px;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
height: ($progressbar-height-number - ($progressbar-border-number * 2)) *
|
||||
1px;
|
||||
height: ($progressbar-height - ($progressbar-border * 2)) * 1px;
|
||||
|
||||
&.full {
|
||||
flex-grow: 1;
|
||||
|
|
@ -610,80 +605,50 @@ $video-image: '../img/film.svg';
|
|||
width: 50px;
|
||||
}
|
||||
|
||||
@function progressbar-gradient($color1, $color2) {
|
||||
@return linear-gradient(to bottom, $color1, $color2 80%);
|
||||
}
|
||||
|
||||
@mixin progressbar-background($color1, $color2) {
|
||||
background: progressbar-gradient($color1, $color2),
|
||||
progressbar-gradient(
|
||||
var(--color-progressbar-background-1),
|
||||
var(--color-progressbar-background-1)
|
||||
);
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
&.leech.paused {
|
||||
@include progressbar-background(
|
||||
var(--color-progressbar-leech-paused-1),
|
||||
var(--color-progressbar-leech-paused-1)
|
||||
);
|
||||
background-color: var(--color-progressbar-leech-paused-1);
|
||||
}
|
||||
|
||||
&.leech.queued {
|
||||
@include progressbar-background(
|
||||
var(--color-progressbar-leech-queued-1),
|
||||
var(--color-progressbar-leech-queued-1)
|
||||
);
|
||||
background-color: var(--color-progressbar-leech-queued-1);
|
||||
}
|
||||
|
||||
&.leech {
|
||||
@include progressbar-background(
|
||||
var(--color-progressbar-leech-1),
|
||||
var(--color-progressbar-leech-1)
|
||||
);
|
||||
background-color: var(--color-progressbar-leech-1);
|
||||
}
|
||||
|
||||
&.magnet.paused {
|
||||
@include progressbar-background(
|
||||
var(--color-progressbar-magnet-paused-1),
|
||||
var(--color-progressbar-magnet-paused-1)
|
||||
);
|
||||
background-color: var(--color-progressbar-magnet-paused-1);
|
||||
}
|
||||
|
||||
&.magnet {
|
||||
@include progressbar-background(
|
||||
var(--color-progressbar-magnet-1),
|
||||
var(--color-progressbar-magnet-1)
|
||||
);
|
||||
background-color: var(--color-progressbar-magnet-1);
|
||||
}
|
||||
|
||||
&.seed.paused {
|
||||
@include progressbar-background(
|
||||
var(--color-progressbar-seed-paused-1),
|
||||
var(--color-progressbar-seed-paused-1)
|
||||
);
|
||||
background-color: var(--color-progressbar-seed-paused-1);
|
||||
}
|
||||
|
||||
&.seed.queued {
|
||||
@include progressbar-background(
|
||||
var(--color-progressbar-seed-queued-1),
|
||||
var(--color-progressbar-seed-queued-1)
|
||||
);
|
||||
background-color: var(--color-progressbar-seed-queued-1);
|
||||
}
|
||||
|
||||
&.seed {
|
||||
@include progressbar-background(
|
||||
var(--color-progressbar-seed-1),
|
||||
var(--color-progressbar-seed-1)
|
||||
);
|
||||
background-color: var(--color-progressbar-seed-1);
|
||||
}
|
||||
|
||||
&.seed.full:not(.paused) {
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
var(--color-progressbar-seed-1) 0,
|
||||
var(--color-progressbar-seed-1) var(--progress, 30%),
|
||||
var(--color-progressbar-seed-2) var(--progress, 30%)
|
||||
),
|
||||
no-repeat;
|
||||
}
|
||||
|
||||
&.verify {
|
||||
@include progressbar-background(
|
||||
var(--color-progressbar-verify-1),
|
||||
var(--color-progressbar-verify-1)
|
||||
);
|
||||
background-color: var(--color-progressbar-verify-1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -66,7 +66,7 @@ const TorrentRendererHelper = {
|
|||
renderProgressbar: (controller, t, progressbar) => {
|
||||
const info = TorrentRendererHelper.getProgressInfo(controller, t);
|
||||
progressbar.className = info.classList.join(' ');
|
||||
progressbar.style['background-size'] = `${info.percent}% 100%, 100% 100%`;
|
||||
progressbar.style.setProperty('--progress', `${info.percent.toFixed(2)}%`);
|
||||
},
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue