From d47962df7a51bbfd15c3efa5564c676b0228876b Mon Sep 17 00:00:00 2001 From: svvimming <53056774+svvimming@users.noreply.github.com> Date: Mon, 16 May 2022 12:22:03 -0400 Subject: [PATCH] feat: Pinned/uploaded storage bar feedback (#1288) * feat: Storage bar split into uploaded and pinned displays with legend * style: Overflow hidden on storage bar meter * style: Responsive styling on storage bar progress feedback * feat: Hide unused legend items in storage manager --- .../account/storageManager/storageManager.js | 54 +++++++-- .../storageManager/storageManager.scss | 103 +++++++++++++++--- .../website/content/pages/app/account.json | 4 + 3 files changed, 132 insertions(+), 29 deletions(-) diff --git a/packages/website/components/account/storageManager/storageManager.js b/packages/website/components/account/storageManager/storageManager.js index 4400c52da0..4402a4367d 100644 --- a/packages/website/components/account/storageManager/storageManager.js +++ b/packages/website/components/account/storageManager/storageManager.js @@ -40,31 +40,33 @@ const StorageManager = ({ className = '', content }) => { } = useUser(); const uploaded = useMemo(() => data?.usedStorage?.uploaded || 0, [data]); const pinned = useMemo(() => data?.usedStorage?.pinned || 0, [data]); - const usedStorage = uploaded + pinned; const [componentInViewport, setComponentInViewport] = useState(false); const storageManagerRef = useRef(/** @type {HTMLDivElement | null} */ (null)); - const { maxSpaceLabel, unlockLabel, usedSpacePercentage } = useMemo( + const { maxSpaceLabel, unlockLabel, percentUploaded, percentPinned } = useMemo( () => // Storage information by tier ({ [StorageTiers.TIER_1]: { maxSpaceLabel: content.tiers[0].max_space_label, unlockLabel: content.tiers[0].unlock_label, - usedSpacePercentage: (usedStorage / tebibyte) * 100, + percentUploaded: (uploaded / tebibyte) * 100, + percentPinned: (pinned / tebibyte) * 100, }, [StorageTiers.TIER_2]: { maxSpaceLabel: content.tiers[1].max_space_label, unlockLabel: content.tiers[1].unlock_label, - usedSpacePercentage: (usedStorage / (tebibyte * 10)) * 100, + percentUploaded: (uploaded / (tebibyte * 10)) * 100, + percentPinned: (pinned / (tebibyte * 10)) * 100, }, [StorageTiers.TIER_3]: { - maxSpaceLabel: `${Math.floor(usedStorage / (tebibyte * 10) + 1) + content.tiers[2].max_space_label}`, + maxSpaceLabel: `${Math.floor(uploaded + pinned / (tebibyte * 10) + 1) + content.tiers[2].max_space_label}`, // every increment of 10 changes the amount of space used - usedSpacePercentage: ((usedStorage % (tebibyte * 10)) / (tebibyte * 10)) * 100, + percentUploaded: ((uploaded % (tebibyte * 10)) / (tebibyte * 10)) * 100, + percentPinned: ((pinned % (tebibyte * 10)) / (tebibyte * 10)) * 100, }, }[storageTier]), - [storageTier, usedStorage, content.tiers] + [storageTier, uploaded, pinned, content.tiers] ); useEffect(() => { @@ -95,9 +97,16 @@ const StorageManager = ({ className = '', content }) => { container.scrollIntoView(true); }, []); - const progressBarStyles = { - width: !componentInViewport ? '0' : `${Math.min(usedSpacePercentage, 100)}%`, - transition: `${usedSpacePercentage * 25}ms ease-out`, + const uploadedStorageBarStyles = { + width: !componentInViewport ? '0' : `${Math.min(percentUploaded, 100)}%`, + transition: `${percentUploaded * 25}ms ease-out`, + backgroundPosition: !componentInViewport ? '50% 0' : `0% 0`, + }; + + const pinnedStorageBarStyles = { + width: !componentInViewport ? '0' : `calc(${Math.min(percentPinned, 100)}% + 2rem)`, + left: `calc(${percentUploaded}% - 2rem)`, + transition: `${percentPinned * 25}ms ease-out ${percentUploaded * 25}ms`, backgroundPosition: !componentInViewport ? '50% 0' : `0% 0`, }; @@ -112,7 +121,7 @@ const StorageManager = ({ className = '', content }) => { {/* Used storage in GB */} {content.heading}:{' '} - {filesz(usedStorage, { + {filesz(uploaded + pinned, { base: 2, standard: 'iec', })} @@ -128,7 +137,8 @@ const StorageManager = ({ className = '', content }) => {
{/* Mapping out tiers into labeled sections */} -
+
+
{maxSpaceLabel}
{!!unlockLabel && ( @@ -140,6 +150,26 @@ const StorageManager = ({ className = '', content }) => { )}
+
0 || pinned > 0 ? '' : 'no-margin')}> + {uploaded > 0 ? ( +
+ {content.legend.uploaded}  + {filesz(uploaded, { + base: 2, + standard: 'iec', + })} +
+ ) : null} + {pinned > 0 ? ( +
+ {content.legend.pinned}  + {filesz(pinned, { + base: 2, + standard: 'iec', + })} +
+ ) : null} +
{content.prompt}  diff --git a/packages/website/components/account/storageManager/storageManager.scss b/packages/website/components/account/storageManager/storageManager.scss index ede9cce4d7..6f9e7febde 100644 --- a/packages/website/components/account/storageManager/storageManager.scss +++ b/packages/website/components/account/storageManager/storageManager.scss @@ -100,10 +100,14 @@ } } @include medium { - flex-direction: column; + display: block; padding-right: 0; + position: relative; .button { - align-self: flex-end; + position: absolute; + right: 0; + top: 0; + transform: translateY(calc(-100% - 0.625rem)); } } } @@ -117,6 +121,8 @@ background: rgba($vulcan, 0.15); border: 0.078125rem solid rgba($waterloo, 0.15); flex: 1; + overflow: hidden; + z-index: 1; &:only-child { flex: 1; max-width: 44.375rem; @@ -127,6 +133,17 @@ right: 0.9375rem; text-shadow: 0 0 0.15625rem rgba(0, 0, 0, 0.94); } + &:before { + content: ''; + position: absolute; + width: 100%; + height: 100%; + left: 0; + top: 0; + border-radius: inherit; + border: 0.0625rem solid rgba($waterloo, 0.15); + box-sizing: border-box; + } } .storage-manager-used { @@ -139,24 +156,76 @@ } } -.storage-manager-meter-used { - background: linear-gradient( - 45deg, - $cyan 0%, - $royalBlue 12.5%, - $heliotrope 25%, - $cyan 37.5%, - $royalBlue 50%, - $heliotrope 62.5%, - $cyan 75%, - $royalBlue 87.5%, - $heliotrope 100% - ); - background-size: 410%; - background-position: 50% 0; +.storage-manager-meter-uploaded, +.storage-manager-meter-pinned { + position: absolute; + z-index: 10; @include borderRadius_UltraLarge; height: 1.875rem; top: 0; left: 0; transition: 250ms ease-out; + filter: drop-shadow(0 2px 8px rgba(#210f55, 0.33)); +} + +.storage-manager-meter-uploaded { + background: linear-gradient(45deg, #275fdc 0%, #0fb1fd 25%, #275fdc 50%, #0fb1fd 75%, #275fdc 100%); + background-size: 410%; + background-position: 50% 0; +} + +.storage-manager-meter-pinned { + background: linear-gradient(45deg, #8722ff 0%, #ca46ff 25%, #8722ff 50%, #ca46ff 75%, #8722ff 100%); + background-size: 410%; + background-position: 50% 0; +} + +.storage-manager-legend { + display: flex; + flex-direction: row; + justify-content: flex-start; + margin-top: 1rem; + + &.no-margin { + margin: 0; + } + + @include small { + flex-direction: column; + margin-bottom: 0.5rem; + } + + .sml-uploaded, + .sml-pinned { + position: relative; + margin: 0 2rem; + @include fontSize_Tiny; + line-height: leading(20, 13); + .legend-label { + @include fontWeight_Semibold; + } + &:before { + content: ''; + position: absolute; + top: 50%; + left: -1.8125rem; + width: 0.9375rem; + height: 0.9375rem; + transform: translateY(-50%); + border-radius: 50%; + } + @include small { + margin: 0.3125rem 2rem; + } + } + .sml-uploaded { + &:before { + background: linear-gradient(90deg, #275fdc 0%, #0fb1fd 100%); + } + } + .sml-pinned { + &:before { + background: linear-gradient(90deg, #8722ff 0%, #ca46ff 100%); + } + } } diff --git a/packages/website/content/pages/app/account.json b/packages/website/content/pages/app/account.json index deb1a535d3..6037007fcb 100644 --- a/packages/website/content/pages/app/account.json +++ b/packages/website/content/pages/app/account.json @@ -63,6 +63,10 @@ }, "storage_manager": { "heading": "Storage", + "legend": { + "uploaded": "Stored files", + "pinned": "Pinned files" + }, "prompt": "Need more free storage?", "buttons": { "search": "Search my files",