diff --git a/src/bundle/Resources/public/scss/ui/modules/muti-file-upload/_drop.area.scss b/src/bundle/Resources/public/scss/ui/modules/muti-file-upload/_drop.area.scss index 0e17a75364..64eca49f59 100644 --- a/src/bundle/Resources/public/scss/ui/modules/muti-file-upload/_drop.area.scss +++ b/src/bundle/Resources/public/scss/ui/modules/muti-file-upload/_drop.area.scss @@ -9,7 +9,7 @@ &__message { color: $ibexa-color-dark; - margin-bottom: calculateRem(16px); + margin-bottom: calculateRem(12px); } &__message--main { diff --git a/src/bundle/Resources/public/scss/ui/modules/muti-file-upload/_upload.item.scss b/src/bundle/Resources/public/scss/ui/modules/muti-file-upload/_upload.item.scss index 5023133cfc..a921993067 100644 --- a/src/bundle/Resources/public/scss/ui/modules/muti-file-upload/_upload.item.scss +++ b/src/bundle/Resources/public/scss/ui/modules/muti-file-upload/_upload.item.scss @@ -3,7 +3,7 @@ flex-wrap: wrap; background: $ibexa-color-white; padding: 0; - margin: calculateRem(12px) 0; + margin: calculateRem(4px) 0; height: calculateRem(48px); &--errored { diff --git a/src/bundle/Resources/public/scss/ui/modules/muti-file-upload/_upload.list.scss b/src/bundle/Resources/public/scss/ui/modules/muti-file-upload/_upload.list.scss index 8d1813a068..a4e2f51df6 100644 --- a/src/bundle/Resources/public/scss/ui/modules/muti-file-upload/_upload.list.scss +++ b/src/bundle/Resources/public/scss/ui/modules/muti-file-upload/_upload.list.scss @@ -1,5 +1,5 @@ .c-upload-list { - height: 100%; + flex-grow: 1; overflow: auto; - margin-top: calculateRem(16px); + margin: calculateRem(16px) 0; } diff --git a/src/bundle/Resources/public/scss/ui/modules/muti-file-upload/_upload.popup.scss b/src/bundle/Resources/public/scss/ui/modules/muti-file-upload/_upload.popup.scss index 1f5ac3ac09..1d5b5a226b 100644 --- a/src/bundle/Resources/public/scss/ui/modules/muti-file-upload/_upload.popup.scss +++ b/src/bundle/Resources/public/scss/ui/modules/muti-file-upload/_upload.popup.scss @@ -17,7 +17,7 @@ .c-tooltip-popup { width: 100%; - max-height: 100vh; + max-height: 90vh; max-width: calculateRem(800px); position: absolute; z-index: 2; @@ -30,8 +30,8 @@ @include modal-header(); height: calculateRem(92px); - padding: calculateRem(32px) calculateRem(32px) 0; - margin-bottom: calculateRem(36px); + padding: calculateRem(24px) calculateRem(32px) 0; + margin-bottom: calculateRem(24px); } &__title { @@ -42,20 +42,29 @@ top: 0; } - &__subtitle { - margin-top: calculateRem(8px); - } - &__content { @include modal-body(); + display: flex; + flex-direction: column; padding: 0 calculateRem(32px); - max-height: calc(100vh - calculateRem(208px)); - overflow: auto; + max-height: calc(90vh - calculateRem(212px)); } &__footer { - padding: calculateRem(16px) calculateRem(32px) calculateRem(32px) calculateRem(32px); + padding: calculateRem(24px); + } + + .c-drop-area { + padding: calculateRem(24px); + } + + &--with-uploaded-items { + .c-tooltip-popup { + &__footer { + box-shadow: 0 0 calculateRem(16px) 0 rgba($ibexa-color-dark, 0.16); + } + } } } } diff --git a/src/bundle/ui-dev/src/modules/common/tooltip-popup/tooltip.popup.component.js b/src/bundle/ui-dev/src/modules/common/tooltip-popup/tooltip.popup.component.js index 49375760cc..b6635c7bc5 100644 --- a/src/bundle/ui-dev/src/modules/common/tooltip-popup/tooltip.popup.component.js +++ b/src/bundle/ui-dev/src/modules/common/tooltip-popup/tooltip.popup.component.js @@ -1,6 +1,8 @@ import React, { useRef } from 'react'; import PropTypes from 'prop-types'; +import { createCssClassNames } from '../helpers/css.class.names'; + const TooltipPopupComponent = ({ title, subtitle, @@ -12,10 +14,15 @@ const TooltipPopupComponent = ({ closeBtnAttrs, closeLabel, visible, + extraClasses, }) => { const contentRef = useRef(); + const className = createCssClassNames({ + 'c-tooltip-popup': true, + [extraClasses]: true, + }); const attrs = { - className: 'c-tooltip-popup', + className, hidden: !visible, }; @@ -55,6 +62,7 @@ TooltipPopupComponent.propTypes = { closeLabel: PropTypes.string, confirmBtnAttrs: PropTypes.object, closeBtnAttrs: PropTypes.object, + extraClasses: PropTypes.string, }; TooltipPopupComponent.defaultProps = { @@ -65,6 +73,7 @@ TooltipPopupComponent.defaultProps = { closeLabel: '', confirmBtnAttrs: {}, closeBtnAttrs: {}, + extraClasses: '', }; export default TooltipPopupComponent; diff --git a/src/bundle/ui-dev/src/modules/multi-file-upload/components/upload-popup/upload.popup.component.js b/src/bundle/ui-dev/src/modules/multi-file-upload/components/upload-popup/upload.popup.component.js index fde9ea02b8..fa3baa9721 100644 --- a/src/bundle/ui-dev/src/modules/multi-file-upload/components/upload-popup/upload.popup.component.js +++ b/src/bundle/ui-dev/src/modules/multi-file-upload/components/upload-popup/upload.popup.component.js @@ -115,6 +115,10 @@ export default class UploadPopupModule extends Component { enableUploadedItemEdit, }; + if (hasAnyUploadedItems || hasAnyItemsToUpload) { + tooltipAttrs.extraClasses = 'c-tooltip-popup--with-uploaded-items'; + } + return (