From 2f61c75f68998cc9f79464bd24ac524e522929a1 Mon Sep 17 00:00:00 2001 From: nikk gitanes Date: Sat, 27 May 2023 13:14:14 +0300 Subject: [PATCH 1/2] Added status indicator on main torrents list. --- web/src/components/TorrentCard/index.jsx | 40 ++++++++++++++++++++++-- web/src/components/TorrentCard/style.js | 24 +++++++++++--- 2 files changed, 57 insertions(+), 7 deletions(-) diff --git a/web/src/components/TorrentCard/index.jsx b/web/src/components/TorrentCard/index.jsx index 8d53e9f..f4dad28 100644 --- a/web/src/components/TorrentCard/index.jsx +++ b/web/src/components/TorrentCard/index.jsx @@ -18,8 +18,16 @@ import { useTranslation } from 'react-i18next' import AddDialog from 'components/Add/AddDialog' import { StyledDialog } from 'style/CustomMaterialUiStyles' import useOnStandaloneAppOutsideClick from 'utils/useOnStandaloneAppOutsideClick' +import { GETTING_INFO, IN_DB, CLOSED, PRELOAD, WORKING } from 'torrentStates' -import { StyledButton, TorrentCard, TorrentCardButtons, TorrentCardDescription, TorrentCardPoster } from './style' +import { + StatusIndicators, + StyledButton, + TorrentCard, + TorrentCardButtons, + TorrentCardDescription, + TorrentCardPoster, +} from './style' const Transition = forwardRef((props, ref) => ) @@ -36,7 +44,7 @@ const Torrent = ({ torrent }) => { const openDeleteTorrentAlert = () => setIsDeleteTorrentOpened(true) const closeDeleteTorrentAlert = () => setIsDeleteTorrentOpened(false) - const { title, name, poster, torrent_size: torrentSize, download_speed: downloadSpeed, hash } = torrent + const { title, name, poster, torrent_size: torrentSize, download_speed: downloadSpeed, hash, stat } = torrent const dropTorrent = () => axios.post(torrentsHost(), { action: 'drop', hash }) const deleteTorrent = () => axios.post(torrentsHost(), { action: 'rem', hash }) @@ -105,6 +113,8 @@ const Torrent = ({ torrent }) => {
+ +
{t('Size')}
{torrentSize > 0 && humanizeSize(torrentSize)}
@@ -165,4 +175,30 @@ const Torrent = ({ torrent }) => { ) } +export const StatusIndicator = ({ stat }) => { + const { t } = useTranslation() + + const values = { + [GETTING_INFO]: t('TorrentGettingInfo'), + [PRELOAD]: t('TorrentPreload'), + [WORKING]: t('TorrentWorking'), + [CLOSED]: t('TorrentClosed'), + [IN_DB]: t('TorrentInDb'), + } + + const colors = { + [GETTING_INFO]: '#2196F3', + [PRELOAD]: '#FFC107', + [WORKING]: '#CDDC39', + [CLOSED]: '#E57373', + [IN_DB]: '#9E9E9E', + } + + return ( +
+ +
+ ) +} + export default memo(Torrent) diff --git a/web/src/components/TorrentCard/style.js b/web/src/components/TorrentCard/style.js index 142d05b..1f2d2a1 100644 --- a/web/src/components/TorrentCard/style.js +++ b/web/src/components/TorrentCard/style.js @@ -134,20 +134,20 @@ export const TorrentCardDescription = styled.div` .description-statistics-wrapper { display: grid; - grid-template-columns: 80px 80px 1fr; + grid-template-columns: 24px 80px 80px 1fr; align-self: end; @media (max-width: 1260px), (max-height: 500px) { - grid-template-columns: 70px 70px 1fr; + grid-template-columns: 24px 70px 70px 1fr; } @media (max-width: 770px) { - grid-template-columns: 65px 65px 1fr; + grid-template-columns: 24px 65px 65px 1fr; } @media (max-width: 700px) { display: grid; - grid-template-columns: repeat(3, 1fr); + grid-template-columns: 24px repeat(3, 1fr); } } @@ -155,7 +155,7 @@ export const TorrentCardDescription = styled.div` } .description-statistics-element-value { - margin-left: 5px; + margin-left: 0px; margin-bottom: 10px; word-break: break-all; @@ -229,3 +229,17 @@ export const StyledButton = styled.button` } `} ` + +export const StatusIndicators = styled.div` + ${({ color }) => css` + height: 8px; + width: 8px; + background-color: ${color}; + border-radius: 50%; + position: relative; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); + `} +` From 49599f9d9a09c73330647244ea0bd5cf37772ec8 Mon Sep 17 00:00:00 2001 From: nikk gitanes Date: Sat, 27 May 2023 18:05:23 +0300 Subject: [PATCH 2/2] other status placement --- web/src/components/TorrentCard/index.jsx | 8 +++----- web/src/components/TorrentCard/style.js | 18 +++++++++++++----- 2 files changed, 16 insertions(+), 10 deletions(-) diff --git a/web/src/components/TorrentCard/index.jsx b/web/src/components/TorrentCard/index.jsx index f4dad28..7913c0b 100644 --- a/web/src/components/TorrentCard/index.jsx +++ b/web/src/components/TorrentCard/index.jsx @@ -113,10 +113,8 @@ const Torrent = ({ torrent }) => {
- -
-
{t('Size')}
+
{t('Size')}
{torrentSize > 0 && humanizeSize(torrentSize)}
@@ -195,9 +193,9 @@ export const StatusIndicator = ({ stat }) => { } return ( -
+ -
+ ) } diff --git a/web/src/components/TorrentCard/style.js b/web/src/components/TorrentCard/style.js index 1f2d2a1..2795cbc 100644 --- a/web/src/components/TorrentCard/style.js +++ b/web/src/components/TorrentCard/style.js @@ -127,6 +127,14 @@ export const TorrentCardDescription = styled.div` } } + .description-status-wrapper { + display: inline-block; + height: 8px; + margin-inline-end: 4px; + margin-bottom: 4px; + vertical-align: middle; + } + .description-torrent-title { overflow: auto; word-break: break-all; @@ -134,20 +142,20 @@ export const TorrentCardDescription = styled.div` .description-statistics-wrapper { display: grid; - grid-template-columns: 24px 80px 80px 1fr; + grid-template-columns: 80px 80px 1fr; align-self: end; @media (max-width: 1260px), (max-height: 500px) { - grid-template-columns: 24px 70px 70px 1fr; + grid-template-columns: 70px 70px 1fr; } @media (max-width: 770px) { - grid-template-columns: 24px 65px 65px 1fr; + grid-template-columns: 65px 65px 1fr; } @media (max-width: 700px) { display: grid; - grid-template-columns: 24px repeat(3, 1fr); + grid-template-columns: repeat(3, 1fr); } } @@ -155,7 +163,7 @@ export const TorrentCardDescription = styled.div` } .description-statistics-element-value { - margin-left: 0px; + margin-left: 5px; margin-bottom: 10px; word-break: break-all;