Skip to content

Commit

Permalink
feat: Pinned/uploaded storage bar feedback (#1288)
Browse files Browse the repository at this point in the history 
* 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
  • Loading branch information
@svvimming
svvimming committed May 16, 2022
1 parent 2a270e4 commit d47962d
Show file tree
Hide file tree
Showing 3 changed files with 132 additions and 29 deletions.
54 changes: 42 additions & 12 deletions packages/website/components/account/storageManager/storageManager.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(() => {
Expand Down Expand Up @@ -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`,
};

Expand All @@ -112,7 +121,7 @@ const StorageManager = ({ className = '', content }) => {
{/* Used storage in GB */}
<span className="storage-label">{content.heading}</span>:{' '}
<span className="storage-number">
{filesz(usedStorage, {
{filesz(uploaded + pinned, {
base: 2,
standard: 'iec',
})}
Expand All @@ -128,7 +137,8 @@ const StorageManager = ({ className = '', content }) => {
<div className="storage-manager-meter-container">
<div className="storage-manager-meter">
{/* Mapping out tiers into labeled sections */}
<div className="storage-manager-meter-used" style={progressBarStyles} />
<div className="storage-manager-meter-pinned" style={pinnedStorageBarStyles} />
<div className="storage-manager-meter-uploaded" style={uploadedStorageBarStyles} />
<span className="storage-manager-meter-label">{maxSpaceLabel}</span>
</div>
{!!unlockLabel && (
Expand All @@ -140,6 +150,26 @@ const StorageManager = ({ className = '', content }) => {
</Button>
)}
</div>
<div className={clsx('storage-manager-legend', uploaded > 0 || pinned > 0 ? '' : 'no-margin')}>
{uploaded > 0 ? (
<div className="sml-uploaded">
<span className="legend-label">{content.legend.uploaded}&nbsp;</span>
{filesz(uploaded, {
base: 2,
standard: 'iec',
})}
</div>
) : null}
{pinned > 0 ? (
<div className="sml-pinned">
<span className="legend-label">{content.legend.pinned}&nbsp;</span>
{filesz(pinned, {
base: 2,
standard: 'iec',
})}
</div>
) : null}
</div>
<div className="storage-manager-info">
{content.prompt}&nbsp;
<a href={mailTo} target="_blank" rel="noreferrer">
Expand Down
103 changes: 86 additions & 17 deletions packages/website/components/account/storageManager/storageManager.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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));
}
}
}
Expand All @@ -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;
Expand All @@ -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 {
Expand All @@ -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%);
}
}
}
4 changes: 4 additions & 0 deletions packages/website/content/pages/app/account.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down

0 comments on commit d47962d

Please sign in to comment.