PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Add upload icon, fix cancel button, refresh styles

Browse source
This commit is contained in:
Travis Ralston 2021-03-05 14:42:15 -07:00
parent fa41489d5a
commit 08072aca9a
3 changed files with 38 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
res/css/structures/_UploadBar.scss
View file

@ -16,30 +16,44 @@ limitations under the License.
.mx_UploadBar { .mx_UploadBar {
padding-left: 65px; // line up with the shield area in the composer padding-left: 65px; // line up with the shield area in the composer
position: relative;
.mx_ProgressBar { .mx_ProgressBar {
width: calc(100% - 40px); // cheating at a right margin width: calc(100% - 40px); // cheating at a right margin
} }
} }
.mx_UploadBar_uploadFilename { .mx_UploadBar_filename {
margin-top: 5px; margin-top: 5px;
opacity: 0.5; color: $muted-fg-color;
color: $primary-fg-color;
}
.mx_UploadBar_uploadIcon {
float: left;
margin-top: 5px;
margin-left: 14px;
}
.mx_UploadBar_uploadCancel {
float: right;
margin-top: 5px;
margin-right: 10px;
position: relative; position: relative;
opacity: 0.6; padding-left: 22px; // 18px for icon, 4px for padding
cursor: pointer; font-size: $font-15px;
z-index: 1; vertical-align: middle;
&::before {
content: "";
height: 18px;
width: 18px;
position: absolute;
top: 0;
left: 0;
mask-repeat: no-repeat;
mask-position: center;
background-color: $muted-fg-color;
mask-image: url('$(res)/img/element-icons/upload.svg');
}
}
.mx_UploadBar_cancel {
position: absolute;
top: 0;
right: 0;
height: 16px;
width: 16px;
margin-right: 16px; // align over rightmost button in composer
mask-repeat: no-repeat;
mask-position: center;
background-color: $muted-fg-color;
mask-image: url('$(res)/img/icons-close.svg');
} }

4
res/img/element-icons/upload.svg Normal file
View file

@ -0,0 +1,4 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.99902 14L8.99902 4" stroke="black" stroke-width="1.5" stroke-linecap="round"/>
<path d="M12.5352 7.52441L8.99944 4.00012L5.46373 7.52441" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 336 B

4
src/components/structures/UploadBar.tsx
View file

@ -87,12 +87,12 @@ export default class UploadBar extends React.Component<IProps, IState> {
count: this.state.uploadsHere.length - 1, count: this.state.uploadsHere.length - 1,
}, },
); );
const uploadSize = filesize(this.state.currentUpload.total); const uploadSize = filesize(this.state.currentUpload.total);
return ( return (
<div className="mx_UploadBar"> <div className="mx_UploadBar">
<div className="mx_UploadBar_filename">{uploadText} ({uploadSize})</div>
<AccessibleButton onClick={this.onCancelClick} className='mx_UploadBar_cancel' /> <AccessibleButton onClick={this.onCancelClick} className='mx_UploadBar_cancel' />
<div className="mx_UploadBar_uploadFilename">{uploadText} ({uploadSize})</div>
<ProgressBar value={this.state.currentUpload.loaded} max={this.state.currentUpload.total} /> <ProgressBar value={this.state.currentUpload.loaded} max={this.state.currentUpload.total} />
</div> </div>
); );