Skip to content

Commit

Permalink
IBX-1333: Redesigned multi file upload (#68)
Browse files Browse the repository at this point in the history
  • Loading branch information
@dew326
dew326 authored Nov 26, 2021
1 parent 652ad46 commit 5941cba
Show file tree
Hide file tree
Showing 13 changed files with 171 additions and 153 deletions.
9 changes: 3 additions & 6 deletions src/bundle/Resources/public/scss/mixins/_modals.scss
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
@mixin modal-main() {
background: $ibexa-white;
box-shadow: 0 0 calculateRem(30px) 0 rgba($ibexa-black, 0.35);
background: $ibexa-color-white;
box-shadow: 0 0 calculateRem(30px) 0 rgba($ibexa-color-black, 0.35);
position: relative;
border-radius: calculateRem(4px);
border-radius: $ibexa-border-radius;
overflow: hidden;
}

Expand Down Expand Up @@ -42,10 +42,7 @@
border: none;

.ibexa-icon {
width: calculateRem(20px);
height: calculateRem(20px);
margin: 0;
fill: $ibexa-color-danger;
opacity: 1;
}
}
Expand Down
21 changes: 13 additions & 8 deletions src/bundle/Resources/public/scss/ui/modules/muti-file-upload/_drop.area.scss
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,28 @@
.c-drop-area {
border: calculateRem(1px) dashed $ibexa-color-dark-300;
border-radius: $ibexa-border-radius;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

&__message {
margin-bottom: calculateRem(24px);
color: $ibexa-color-dark-400;
margin-bottom: calculateRem(12px);

&--main {
cursor: auto;
font-size: calculateRem(16px);
font-weight: bold;
margin-top: calculateRem(44px);
}

&--filesize {
color: $ibexa-color-font-pale;
font-size: calculateRem(14px);
margin-bottom: calculateRem(64px);
font-size: $ibexa-text-font-size-medium;
margin: calculateRem(12px) 0 calculateRem(44px);
}
}

&__btn-select {
margin-bottom: calculateRem(16px);
}

&__input--hidden {
display: none;
}
Expand Down
49 changes: 23 additions & 26 deletions src/bundle/Resources/public/scss/ui/modules/muti-file-upload/_progress.bar.scss
View file
Original file line number Diff line number Diff line change
@@ -1,38 +1,35 @@
.c-progress-bar {
background: #d8d8d8;
height: calculateRem(6px);
width: 100%;
border-radius: calculateRem(4px);
position: relative;
display: flex;
justify-content: space-between;
align-items: center;

&__value {
height: 100%;
background: $ibexa-color-primary;
background: linear-gradient(90deg, $ibexa-color-warning 0%, $ibexa-color-accent 44.95%, $ibexa-color-success 100%);
border-radius: calculateRem(4px);
transition: width 0.2s linear;
}
height: calculateRem(8px);
width: 10vw;
position: relative;

&__label,
&__uploaded {
position: absolute;
top: 0;
left: 50%;
font-weight: bold;
font-size: calculateRem(12px);
padding: 0 calculateRem(6px);
line-height: 1;
text-align: center;
width: 100%;
&::after {
content: '';
width: calc(100% - var(--progress));
height: calculateRem(10px);
border-radius: calculateRem(4px);
position: absolute;
right: 0;
top: calculateRem(-1px);
background: radial-gradient(
circle at 0 50%,
rgba($ibexa-color-light, 0) calculateRem(4px),
$ibexa-color-light calculateRem(0px)
);
}
}

&__label {
transform: translate(-50%, -100%);
}

&__uploaded {
margin-top: calculateRem(-7px);
transform: translate(-50%, 150%);
font-weight: normal;
font-size: calculateRem(10px);
font-size: $ibexa-text-font-size-small;
color: $ibexa-color-dark-400;
}
}
85 changes: 37 additions & 48 deletions src/bundle/Resources/public/scss/ui/modules/muti-file-upload/_upload.item.scss
View file
Original file line number Diff line number Diff line change
@@ -1,59 +1,83 @@
.c-upload-list-item {
display: flex;
background: $ibexa-white;
padding: calculateRem(8px) calculateRem(32px);
padding: calculateRem(8px) 0;
min-height: calculateRem(60px);

&:first-child {
margin-top: calculateRem(16px);
&--errored {
background: $ibexa-color-danger-100;
color: $ibexa-color-danger;
border-radius: $ibexa-border-radius;

.ibexa-icon {
fill: $ibexa-color-danger;
}

.c-upload-list-item__size {
color: $ibexa-color-danger;
}
}

&__icon-wrapper {
flex: 0 0 calculateRem(20px);
display: flex;
justify-content: center;
align-items: center;
}

&__meta {
padding: 0 calculateRem(16px);
line-height: 1.4;
max-width: 25vw;
display: flex;
justify-content: center;
align-items: center;
}

&__name {
font-size: calculateRem(16px);
width: 100%;
text-overflow: ellipsis;
margin-right: calculateRem(8px);
max-width: 15vw;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

&__size {
color: $ibexa-color-base-dark;
font-size: calculateRem(14px);
font-size: $ibexa-text-font-size-medium;
}

&__info {
flex: 1 1 auto;
display: flex;
justify-content: flex-end;
align-items: center;
}

&__message {
font-style: italic;
font-size: calculateRem(12px);
font-size: $ibexa-text-font-size-small;

&--error {
padding-top: calculateRem(3px);
color: $ibexa-color-warning-dark;
font-weight: bold;
.ibexa-icon {
margin-right: calculateRem(4px);
}

&--success {
color: $ibexa-color-positive;

.ibexa-icon {
fill: $ibexa-color-positive;
}
}
}

&__actions {
flex: 1 1 calculateRem(44px);
max-width: calculateRem(88px);
text-align: right;

.ibexa-btn {
margin: 0;
}
}

&__action {
Expand All @@ -68,40 +92,5 @@
&:last-child {
margin-right: 0;
}

&--edit {
fill: $ibexa-color-primary;
transition: all 0.3s $ibexa-admin-transition;
width: calculateRem(20px);
height: calculateRem(20px);
}

&--edit:hover,
&--edit:focus {
fill: $ibexa-color-primary-hover;
}

&--delete {
fill: $ibexa-color-danger;
}

&--delete:hover,
&--delete:focus {
fill: darken($ibexa-color-danger, 15%);
}

&--abort {
fill: $ibexa-color-base-dark;
}

&--abort:hover,
&--abort:focus {
fill: darken($ibexa-color-base-dark, 15%);
}
}

.c-progress-bar {
max-width: calculateRem(200px);
float: right;
}
}
16 changes: 7 additions & 9 deletions src/bundle/Resources/public/scss/ui/modules/muti-file-upload/_upload.list.scss
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,11 @@
.c-upload-list {
&__title {
padding: calculateRem(12px) calculateRem(32px);
color: $ibexa-color-base-dark;
background: $ibexa-white;
border-top: calculateRem(1px) solid $ibexa-color-base;
border-bottom: calculateRem(1px) solid $ibexa-color-base;
}
&__items {
border-top: calculateRem(1px) solid $ibexa-color-light-500;
margin-top: calculateRem(32px);
padding: calculateRem(16px) 0;

.c-upload-list-item + .c-upload-list-item {
border-top: calculateRem(1px) solid $ibexa-white;
&:last-child {
padding-bottom: 0;
}
}
}
10 changes: 5 additions & 5 deletions src/bundle/Resources/public/scss/ui/modules/muti-file-upload/_upload.popup.scss
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
.c-upload-popup {
background: rgba($ibexa-black, 0.35);
background: rgba($ibexa-color-black, 0.35);
position: fixed;
z-index: 99999;
top: 0;
Expand All @@ -25,15 +25,15 @@
border-bottom: $modal-header-border-width solid $modal-header-border-color;
}

&__title {
@include modal-title();
}

&__content {
@include modal-body();

padding: $modal-inner-padding;
}

&__footer {
border-top: calculateRem(1px) solid $ibexa-color-light-500;
}
}

.c-upload-list {
Expand Down
5 changes: 0 additions & 5 deletions src/bundle/Resources/translations/messages.en.xliff
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,6 @@
<note>The source node in most cases contains the sample message as written by the developer. If it looks like a dot-delimitted string such as "form.label.firstname", then the developer has not provided a default message.</note>
</header>
<body>
<trans-unit id="bb7c5bc498a649c6ec116abc12e7b8be1d4f7b92" resname="alert.close">
<source>Close</source>
<target state="new">Close</target>
<note>key: alert.close</note>
</trans-unit>
<trans-unit id="9177237415bf4199961eb8de9353011a5b22a039" resname="anchor_navigation.close">
<source>Close</source>
<target state="new">Close</target>
Expand Down
22 changes: 16 additions & 6 deletions src/bundle/Resources/translations/multi_file_upload.en.xliff
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,10 +37,15 @@
<note>key: disallowed_type.message</note>
</trans-unit>
<trans-unit id="694f61c4eb35d09307bcf40e14159061c6ba1f35" resname="drop_action.message">
<source>Drag your files to the browser window or select them</source>
<target state="new">Drag your files to the browser window or select them</target>
<source>Drag and drop file</source>
<target state="new">Drag and drop file</target>
<note>key: drop_action.message</note>
</trans-unit>
<trans-unit id="731fcd17e28af2907a63b974bab9c1dfa96aad54" resname="drop_action.separator">
<source>or</source>
<target state="new">or</target>
<note>key: drop_action.separator</note>
</trans-unit>
<trans-unit id="ec408ab37730af3a79d49ee278f3b215ce89057c" resname="edit.label">
<source>Edit</source>
<target state="new">Edit</target>
Expand All @@ -56,14 +61,19 @@
<target state="new">Upload</target>
<note>key: multi_file_upload_open_btn.label</note>
</trans-unit>
<trans-unit id="b23e0c9a0c723cb5fc100bbf270a045cb6c895da" resname="upload.progress_bar.uploading">
<source>Uploading...</source>
<target state="new">Uploading...</target>
<note>key: upload.progress_bar.uploading</note>
</trans-unit>
<trans-unit id="76d7ffabd7e8c5d27a9b732dd5f15d1da68ff00c" resname="upload.success.message">
<source>Uploaded</source>
<target state="new">Uploaded</target>
<source>100% Uploaded</source>
<target state="new">100% Uploaded</target>
<note>key: upload.success.message</note>
</trans-unit>
<trans-unit id="13ad49603f42b4ec5f9328d94f90e4f6d7ba6203" resname="upload_btn.label">
<source>Upload sub-items</source>
<target state="new">Upload sub-items</target>
<source>Upload file</source>
<target state="new">Upload file</target>
<note>key: upload_btn.label</note>
</trans-unit>
<trans-unit id="6b2bc429ffc374b49b5de9e3563d3d5a7668e4b2" resname="upload_popup.close">
Expand Down
14 changes: 7 additions & 7 deletions src/bundle/ui-dev/src/modules/common/tooltip-popup/tooltip.popup.component.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,21 +28,21 @@ const TooltipPopupComponent = (props) => {
maxHeight === INITIAL_HEIGHT
? {}
: {
maxHeight,
overflowY: 'scroll',
};
maxHeight,
overflowY: 'scroll',
};
const closeLabel = Translator.trans(/*@Desc("Close")*/ 'tooltip.close_label', {}, 'content');
return (
<div {...attrs}>
<div className="c-tooltip-popup__header">
<div className="c-tooltip-popup__title">{props.title}</div>
<h1 className="c-tooltip-popup__title">{props.title}</h1>
<div
className="c-tooltip-popup__close"
className="btn ibexa-btn ibexa-btn--ghost ibexa-btn--no-text ibexa-btn--small c-tooltip-popup__close"
title={closeLabel}
onClick={props.onClose}
tabIndex="-1"
data-tooltip-container-selector=".c-tooltip-popup__header">
<Icon name="discard" extraClasses="ibexa-icon--small" />
<Icon name="discard" extraClasses="ibexa-icon--small-medium" />
</div>
</div>
<div className="c-tooltip-popup__content" ref={contentRef} style={contentStyle}>
Expand All @@ -65,7 +65,7 @@ TooltipPopupComponent.propTypes = {
};

TooltipPopupComponent.defaultProps = {
onClose: () => { },
onClose: () => {},
};

export default TooltipPopupComponent;
Loading

0 comments on commit 5941cba

Please sign in to comment.