From 4db3acccc2d1512b410c79266077b34799a85df5 Mon Sep 17 00:00:00 2001 From: e-schneid <99349687+e-schneid@users.noreply.github.com> Date: Wed, 17 Aug 2022 10:58:20 -0700 Subject: [PATCH] feat: remove status column from uploads table (#1761) --- .../account/filesManager/fileRowItem.js | 34 ------------------- .../account/filesManager/fileRowItem.scss | 29 ++++++---------- .../account/filesManager/filesManager.js | 8 +---- 3 files changed, 11 insertions(+), 60 deletions(-) diff --git a/packages/website/components/account/filesManager/fileRowItem.js b/packages/website/components/account/filesManager/fileRowItem.js index 64bd3832b2..940840692f 100644 --- a/packages/website/components/account/filesManager/fileRowItem.js +++ b/packages/website/components/account/filesManager/fileRowItem.js @@ -1,7 +1,6 @@ import clsx from 'clsx'; import { useMemo, useRef } from 'react'; import { renderToString } from 'react-dom/server'; -import { BsFillInfoCircleFill } from 'react-icons/bs'; import CheckIcon from '../../../assets/icons/check'; import CopyIcon from '../../../assets/icons/copy'; @@ -10,20 +9,12 @@ import { addTextToClipboard, formatTimestamp, formatTimestampFull, truncateStrin import Tooltip from '../../../modules/zero/components/tooltip/tooltip'; import AppData from '../../../content/pages/app/account.json'; -export const PinStatus = { - PINNED: 'Pinned', - PINNING: 'Pinning', - PIN_QUEUED: 'PinQueued', - QUEUING: 'Queuing...', -}; - /** * @typedef {Object} FileRowItemProps * @property {string} [className] * @property {string} date * @property {string} name * @property {string} cid - * @property {string} status * @property {string} size * @property {string} linkPrefix * @property {string | import('react').ReactNode[] | null} storageProviders @@ -50,12 +41,10 @@ const FileRowItem = props => { date, name, cid, - status, storageProviders, size, linkPrefix, onSelect, - numberOfPins, isHeader = false, isSelected, onDelete, @@ -75,20 +64,9 @@ const FileRowItem = props => { }, [props]); const fileRowLabels = AppData.page_content.file_manager.table.file_row_labels; - const statusMessages = fileRowLabels.status.tooltip; /** @type {import('react').RefObject} */ const editingNameRef = useRef(null); const truncatedCID = useMemo(() => truncateString(cid, 5, '...', 'double'), [cid]); - const statusTooltip = useMemo( - () => - ({ - [PinStatus.QUEUING]: statusMessages.queuing, - [PinStatus.PIN_QUEUED]: statusMessages.pin_queued, - [PinStatus.PINNING]: statusMessages.pinning, - [PinStatus.PINNED]: statusMessages.pinned.replace('*numberOfPins*', `${numberOfPins}`), - }[status]), - [numberOfPins, status, statusMessages] - ); return (
{ {fileRowLabels.available.label} {isHeader ? 'Availability' : 'Available'} */} - - - {fileRowLabels.status.label} - - - {status} - {isHeader ? ( - - ) : ( - statusTooltip && } content={statusTooltip} /> - )} - {storageProviders && ( diff --git a/packages/website/components/account/filesManager/fileRowItem.scss b/packages/website/components/account/filesManager/fileRowItem.scss index cd6a580893..51b222e4c1 100644 --- a/packages/website/components/account/filesManager/fileRowItem.scss +++ b/packages/website/components/account/filesManager/fileRowItem.scss @@ -3,10 +3,9 @@ $base-row-width: 75.125rem; $file-select: calculateWidthPercentage(3.5rem, $base-row-width); $file-name: calculateWidthPercentage(23rem, $base-row-width); -$file-cid: calculateWidthPercentage(16rem, $base-row-width); +$file-cid: calculateWidthPercentage(20rem, $base-row-width); $file-availability: calculateWidthPercentage(0rem, $base-row-width); -$file-pin-status: calculateWidthPercentage(8rem, $base-row-width); -$file-storage-providers: calculateWidthPercentage(10rem, $base-row-width); +$file-storage-providers: calculateWidthPercentage(14rem, $base-row-width); $file-size: calculateWidthPercentage(8rem, $base-row-width); $file-date: auto; @@ -17,10 +16,10 @@ $file-date: auto; letter-spacing: 0; display: grid; position: relative; - grid-template-columns: $file-select $file-name $file-cid $file-pin-status $file-storage-providers $file-size $file-date ; + grid-template-columns: $file-select $file-name $file-cid $file-storage-providers $file-size $file-date; align-items: flex-start; - padding: .75rem 2rem; - transition: all .2s ease-in-out; + padding: 0.75rem 2rem; + transition: all 0.2s ease-in-out; border-bottom: 0.078125rem solid rgba(white, 0.05); &:nth-child(even) { @@ -53,7 +52,7 @@ $file-date: auto; word-break: break-word; @include fontWeight_Regular; @include medium { - padding: .5rem .75rem .5rem 1.5rem; + padding: 0.5rem 0.75rem 0.5rem 1.5rem; justify-content: flex-start; border-bottom: 0.078125rem solid rgba(white, 0.05); &.file-name { @@ -179,7 +178,7 @@ $file-date: auto; } svg.pencil-icon { flex-shrink: 0; - margin: 4px 0px 0px .5rem; + margin: 4px 0px 0px 0.5rem; @include hoverSvg; @include medium { display: none; @@ -211,7 +210,7 @@ $file-date: auto; } &-cid { padding-right: 2rem; - margin-top: -.1rem; + margin-top: -0.1rem; justify-content: flex-start; align-items: center; .cid-truncate, @@ -237,14 +236,6 @@ $file-date: auto; padding-right: 1.25rem; } } - &-pin-status { - justify-content: flex-start; - align-items: center; - gap: 0.625rem; - @include medium { - gap: 0; - } - } &-storage-providers { justify-content: flex-start; align-items: center; @@ -255,7 +246,7 @@ $file-date: auto; gap: 0; } - a[href*="filfox"] { + a[href*='filfox'] { @include monospace_Text; } @@ -317,7 +308,7 @@ $file-date: auto; } &.files-manager-row-active { - background: rgba(0,0,0,0.25); + background: rgba(0, 0, 0, 0.25); } // Header overrides diff --git a/packages/website/components/account/filesManager/filesManager.js b/packages/website/components/account/filesManager/filesManager.js index 4a72416c79..f64573f444 100644 --- a/packages/website/components/account/filesManager/filesManager.js +++ b/packages/website/components/account/filesManager/filesManager.js @@ -18,7 +18,7 @@ import { useTokens } from 'components/contexts/tokensContext'; import CheckIcon from 'assets/icons/check'; import SearchIcon from 'assets/icons/search'; import RefreshIcon from 'assets/icons/refresh'; -import FileRowItem, { PinStatus } from './fileRowItem'; +import FileRowItem from './fileRowItem'; import GradientBackground from '../../gradientbackground/gradientbackground.js'; const defaultQueryOrder = 'newest'; @@ -363,7 +363,6 @@ const FilesManager = ({ className, content, onFileUpload }) => { date={fileRowLabels.date.label} name={fileRowLabels.name.label} cid={fileRowLabels.cid.label} - status={fileRowLabels.status.label} storageProviders={currentTab === 'uploaded' ? fileRowLabels.storage_providers.label : null} size={fileRowLabels.size.label} linkPrefix={linkPrefix} @@ -404,10 +403,6 @@ const FilesManager = ({ className, content, onFileUpload }) => { date={item.created} name={item.name} cid={item.cid} - status={ - Object.values(PinStatus).find(status => item.pins.some(pin => status === pin.status)) || - PinStatus.QUEUING - } storageProviders={ Array.isArray(item.deals) ? item.deals @@ -432,7 +427,6 @@ const FilesManager = ({ className, content, onFileUpload }) => { } linkPrefix={linkPrefix} highlight={{ target: 'name', text: keyword?.toString() || '' }} - numberOfPins={item.pins.length} isSelected={!!selectedFiles.find(fileSelected => fileSelected === item)} onDelete={() => onDeleteSingle(item.cid)} isEditingName={item.cid === nameEditingId}