LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Update CSS

Browse source
This commit is contained in:
bluerabbit001 2021-10-08 13:27:12 -07:00
parent a6cac05a66
commit 542253c8a0
2 changed files with 44 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
ui/component/downloadProgress/view.jsx
View file

@ -32,8 +32,6 @@ function DownloadProgress({ byOutpoint, primary, playing, currentTheme, stopDown
cancelHash[hash] = value; cancelHash[hash] = value;
}; };
useEffect(() => {}, []);
const handleStopDownload = (outpoint) => { const handleStopDownload = (outpoint) => {
const updated = [...downloading]; const updated = [...downloading];
removeItem(updated, outpoint); removeItem(updated, outpoint);
@ -42,7 +40,7 @@ function DownloadProgress({ byOutpoint, primary, playing, currentTheme, stopDown
}; };
const runningByOutpoint = {}; const runningByOutpoint = {};
const updateDownloading = [...downloading]; const currentDownloading = [...downloading];
for (const key in byOutpoint) { for (const key in byOutpoint) {
const item = byOutpoint[key]; const item = byOutpoint[key];
@ -53,18 +51,18 @@ function DownloadProgress({ byOutpoint, primary, playing, currentTheme, stopDown
.filter((outpoint) => downloading.indexOf(outpoint) === -1) .filter((outpoint) => downloading.indexOf(outpoint) === -1)
.map((outpoint) => { .map((outpoint) => {
if (primary.outpoint !== outpoint && playing.outpoint !== outpoint) { if (primary.outpoint !== outpoint && playing.outpoint !== outpoint) {
updateDownloading.push(outpoint); currentDownloading.push(outpoint);
} }
}); });
downloading downloading
.filter((outpoint) => (byOutpoint[outpoint] && byOutpoint[outpoint].status !== 'running') || !byOutpoint[outpoint]) .filter((outpoint) => (byOutpoint[outpoint] && byOutpoint[outpoint].status !== 'running') || !byOutpoint[outpoint])
.map((outpoint) => { .map((outpoint) => {
removeItem(updateDownloading, outpoint); removeItem(currentDownloading, outpoint);
}); });
if (!areEqual(downloading, updateDownloading)) setDownloading(updateDownloading); if (!areEqual(downloading, currentDownloading)) setDownloading(currentDownloading);
if (updateDownloading.length === 0) return null; if (currentDownloading.length === 0) return null;
if (playing.outpoint !== prevPlaying.outpoint) { if (playing.outpoint !== prevPlaying.outpoint) {
if (downloading.includes(prevPlaying.outpoint)) { if (downloading.includes(prevPlaying.outpoint)) {
@ -84,7 +82,7 @@ function DownloadProgress({ byOutpoint, primary, playing, currentTheme, stopDown
setPrevPrimary(primary); setPrevPrimary(primary);
} }
updateDownloading.map((outpoint) => { currentDownloading.map((outpoint) => {
if (!initDownloadingHash[outpoint]) { if (!initDownloadingHash[outpoint]) {
initDownloadingHash[outpoint] = true; initDownloadingHash[outpoint] = true;
doContinueDownloading(outpoint, false); doContinueDownloading(outpoint, false);
@ -102,7 +100,7 @@ function DownloadProgress({ byOutpoint, primary, playing, currentTheme, stopDown
> >
<div className="download-progress__current-downloading"> <div className="download-progress__current-downloading">
<span className="notification__bubble"> <span className="notification__bubble">
<span className="notification__count">{updateDownloading.length}</span> <span className="notification__count">{currentDownloading.length}</span>
</span> </span>
</div> </div>
</Button> </Button>
@ -116,7 +114,7 @@ function DownloadProgress({ byOutpoint, primary, playing, currentTheme, stopDown
<div /> <div />
</Button> </Button>
{updateDownloading.map((outpoint, index) => { {currentDownloading.map((outpoint, index) => {
const item = runningByOutpoint[outpoint]; const item = runningByOutpoint[outpoint];
let releaseTime = ''; let releaseTime = '';
let isPlaying = false; let isPlaying = false;

45
ui/scss/component/_download-progress.scss
View file

@ -7,8 +7,8 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background-color: var(--color-header-background); //var(--color-gray-9):dark-mode background-color: var(--color-header-background); //var(--color-gray-9):dark-mode
border-radius: 10px; border-radius: var(--border-radius);
border: 1px solid var(--color-gray-3); // border: 1px solid var(--color-gray-3);
z-index: 9999; z-index: 9999;
} }
.download-progress__top-close-button { .download-progress__top-close-button {
@ -23,7 +23,7 @@
height: 2px; height: 2px;
width: 13px; width: 13px;
background-color: var(--color-gray-4); background-color: var(--color-gray-4);
border-radius: 3px; border-radius: var(--border-radius);
} }
} }
.download-progress__state-container { .download-progress__state-container {
@ -76,10 +76,10 @@
width: 100%; width: 100%;
background-color: var(--color-gray-5); background-color: var(--color-gray-5);
height: 6px; height: 6px;
border-radius: 10px; border-radius: var(--border-radius);
} }
.download-progress__bar-content { .download-progress__bar-content {
border-radius: 10px; border-radius: var(--border-radius);
height: 100%; height: 100%;
background-color: var(--color-primary); background-color: var(--color-primary);
} }
@ -92,8 +92,8 @@
.download-progress__playing-button { .download-progress__playing-button {
flex-shrink: 0; flex-shrink: 0;
margin-left: auto; margin-left: auto;
width: 25px; width: 29.6px;
height: 25px; height: 29.6px;
} }
.download-progress__count-time { .download-progress__count-time {
font-size: 11px; font-size: 11px;
@ -144,7 +144,7 @@
right: 10px; right: 10px;
width: 400px; width: 400px;
height: 300px; height: 300px;
border-radius: 10px; border-radius: var(--border-radius);
box-shadow: 2px 2px 5px var(--color-gray-4); box-shadow: 2px 2px 5px var(--color-gray-4);
background-color: var(--color-white); background-color: var(--color-white);
transition: width 2s; transition: width 2s;
@ -158,7 +158,7 @@
color: var(--color-gray-6); color: var(--color-gray-6);
width: 50px; width: 50px;
height: 50px; height: 50px;
border-radius: 10px; border-radius: var(--border-radius);
box-shadow: 0px 5px 4px var(--color-gray-4); box-shadow: 0px 5px 4px var(--color-gray-4);
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -183,6 +183,33 @@
animation-name: downloadcount; animation-name: downloadcount;
animation-duration: 1.3s; animation-duration: 1.3s;
animation-iteration-count: infinite; animation-iteration-count: infinite;
.notification__bubble {
height: 1.5rem;
width: 1.5rem;
border-radius: 50%;
background-color: var(--color-editor-tag);
position: absolute;
top: -0.5rem;
right: -0.5rem;
color: white;
font-size: var(--font-small);
font-weight: bold;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
}
.notification__bubble--small {
font-size: var(--font-xsmall);
}
.notification__bubble--inline {
@extend .notification__bubble;
top: 0.75rem;
right: 1rem;
}
} }
@keyframes downloadcount { @keyframes downloadcount {
0% { 0% {