r/p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull requests Releases 1 Wiki Activity

Use bar chart for current size of used assets

Browse source
This commit is contained in:
Andrew Nicolaou 2019-11-10 19:42:26 +01:00
parent e3949a7cbd
commit 9ac0cc1482
4 changed files with 58 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
client/modules/IDE/components/AssetSize.jsx
View file

@ -26,8 +26,11 @@ const AssetSize = ({ totalSize }) => {
const percent = formatPercent(totalSize / MAX_SIZE_B); const percent = formatPercent(totalSize / MAX_SIZE_B);
return ( return (
<div> <div className="asset-size" style={{ '--percent': percent }}>
<p className="">{`${currentSize} used / ${sizeLimit} max (${percent})`}</p> <div className="asset-size-bar">
<p className="asset-current">{currentSize} ({percent})</p>
<p className="asset-max">Max: {sizeLimit}</p>
</div>
</div> </div>
); );
}; };

9
client/styles/abstracts/_variables.scss
View file

@ -79,6 +79,9 @@ $themes: (
primary-button-color: #fff, primary-button-color: #fff,
primary-button-background-color: $p5js-pink, primary-button-background-color: $p5js-pink,
progress-bar-background-color: #979797,
progress-bar-active-color: #f10046,
form-title-color: rgba(51, 51, 51, 0.87), form-title-color: rgba(51, 51, 51, 0.87),
form-secondary-title-color: $middleGray, form-secondary-title-color: $middleGray,
form-input-text-color: $dark, form-input-text-color: $dark,
@ -148,6 +151,9 @@ $themes: (
primary-button-color: #fff, primary-button-color: #fff,
primary-button-background-color: $p5js-pink, primary-button-background-color: $p5js-pink,
progress-bar-background-color: #979797,
progress-bar-active-color: #f10046,
form-title-color: $white, form-title-color: $white,
form-secondary-title-color: #b5b5b5, form-secondary-title-color: #b5b5b5,
form-border-color: #b5b5b5, form-border-color: #b5b5b5,
@ -214,6 +220,9 @@ $themes: (
primary-button-color: #fff, primary-button-color: #fff,
primary-button-background-color: $p5js-pink, primary-button-background-color: $p5js-pink,
progress-bar-background-color: #979797,
progress-bar-active-color: #f10046,
form-title-color: $white, form-title-color: $white,
form-secondary-title-color: #b5b5b5, form-secondary-title-color: #b5b5b5,
form-border-color: #b5b5b5, form-border-color: #b5b5b5,

43
client/styles/components/_asset-size.scss Normal file
View file

@ -0,0 +1,43 @@
.asset-size {
font-size: #{14 / $base-font-size}rem;
}
.asset-size-bar {
position: relative;
content: ' ';
display: block;
width: 200px;
height: 20px;
@include themify() {
background-color: getThemifyVariable('progress-bar-background-color');
}
}
.asset-size-bar::before {
content: ' ';
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: var(--percent);
@include themify() {
background-color: getThemifyVariable('progress-bar-active-color');
}
}
.asset-current {
position: absolute;
top: 28px;
left: var(--percent);
margin-left: -8px;
}
.asset-max {
position: absolute;
right: 0;
transform: translate(100%);
padding-left: #{8 / $base-font-size}rem;
}

1
client/styles/main.scss
View file

@ -41,6 +41,7 @@
@import 'components/help-modal'; @import 'components/help-modal';
@import 'components/share'; @import 'components/share';
@import 'components/asset-list'; @import 'components/asset-list';
@import 'components/asset-size';
@import 'components/keyboard-shortcuts'; @import 'components/keyboard-shortcuts';
@import 'components/copyable-input'; @import 'components/copyable-input';
@import 'components/feedback'; @import 'components/feedback';