diff --git a/css/modals/virtual-background/_virtual-background.scss b/css/modals/virtual-background/_virtual-background.scss index 074d970a1..aa3696b52 100644 --- a/css/modals/virtual-background/_virtual-background.scss +++ b/css/modals/virtual-background/_virtual-background.scss @@ -1,54 +1,118 @@ .virtual-background-dialog { + max-height: 300px; + color: white; display: inline-grid; - grid-template-columns: auto auto auto auto auto auto auto auto; - max-width: 370px; + grid-template-columns: auto auto auto auto auto; + column-gap: 8px; cursor: pointer; + .thumbnail:hover, .blur:hover, .slight-blur:hover, .virtual-background-none:hover{ + height: 56px; + width: 103px; + opacity: .5; + border: 2px solid #99bbf3; + @media (min-width: 432px) and (max-width: 632px) { + height: 56px; + width: 56px; + } + } .thumbnail { - border-radius: 10px; + margin-top: 8px; + border-radius: 6px; object-fit: cover; - padding: 5px; - height: 40px; - width: 40px; + height: 60px; + width: 107px; } .thumbnail:hover ~ .delete-image-icon { display: block; } .thumbnail-selected { - border-radius: 10px; + margin-top: 8px; + border-radius: 6px; object-fit: cover; - padding: 5px; - height: 40px; - width: 40px; - border: 2px solid #a4b8d1; + height: 60px; + width: 107px; + border: 2px solid #246FE5; + } + .blur{ + box-shadow: inset 0 0 12px #000000; + margin-top: 8px; + background: #7E8287; + font-weight: bold; + height: 60px; + width: 107px; + border-radius: 6px; + text-align: center; + vertical-align: middle; + line-height: 60px; } .blur-selected { - border-radius: 10px; - border: 2px solid #a4b8d1; + box-shadow: inset 0 0 12px #000000; + margin-top: 8px; + background: #7E8287; + font-weight: bold; + height: 60px; + width: 107px; + border-radius: 6px; + border: 2px solid #246FE5; + text-align: center; + vertical-align: middle; + line-height: 60px; + } + .slight-blur{ + box-shadow: inset 0 0 12px #000000; + margin-top: 8px; + background: #A4A4A4; + font-weight: bold; + height: 60px; + width: 107px; + border-radius: 6px; + text-align: center; + vertical-align: middle; + line-height: 60px; + } + .slight-blur-selected{ + box-shadow: inset 0 0 12px #000000; + margin-top: 8px; + background: #A4A4A4; + font-weight: bold; + height: 60px; + width: 107px; + border-radius: 6px; + border: 2px solid #246FE5; + text-align: center; + vertical-align: middle; + line-height: 60px; } .virtual-background-none { + margin-top: 8px; + background: #525252; font-weight: bold; - padding: 5px; - height: 34px; - width: 34px; - border-radius: 10px; - border: 1px solid #a4b8d1; + height: 60px; + width: 107px; + border-radius: 6px; text-align: center; vertical-align: middle; - line-height: 35px; - margin-right: 5px; + line-height: 60px; } .none-selected { + margin-top: 8px; + background: #525252; font-weight: bold; - padding: 5px; - height: 34px; - width: 34px; - border-radius: 10px; - border: 2px solid #a4b8d1; + height: 60px; + width: 107px; + border-radius: 6px; + border: 2px solid #246FE5; text-align: center; vertical-align: middle; - line-height: 35px; - margin-right: 5px; + line-height: 60px; + } + @media (min-width: 432px) and (max-width: 632px) { + font-size: 1.5vw; + .virtual-background-none, .thumbnail, .thumbnail-selected, .none-selected, .blur, .blur-selected, .slight-blur, .slight-blur-selected{ + height: 60px; + width: 60px; + } } } @@ -58,27 +122,25 @@ .file-upload-btn { display: none; } -.custom-file-upload { - font-size: x-large; - font-weight: bold; - display: inline-block; - padding: 4px; - height: 35px; - width: 35px; - border-radius: 10px; - border: 1px solid #a4b8d1; - text-align: center; - vertical-align: middle; - line-height: 35px; - margin-left: 5px; +.file-upload-label{ + font-size: 14px; + font-weight: 600; + line-height: 20px; + margin-bottom: 8px; + color: #669AEC; + display: inline-flex; cursor: pointer; } .delete-image-icon { + background: #3d3d3d; position: absolute; display: none; - left: 36; - bottom: 36; + left: 96; + bottom: 51; + @media (min-width: 432px) and (max-width: 632px) { + left: 51px + } } .delete-image-icon:hover { display: block; @@ -91,3 +153,7 @@ .loading-content-text{ margin-right: 15px; } + +.add-background{ + margin-right: 8px; +} diff --git a/images/virtual-background/background-1.jpg b/images/virtual-background/background-1.jpg index ce8ca50dc..03461c1b6 100644 Binary files a/images/virtual-background/background-1.jpg and b/images/virtual-background/background-1.jpg differ diff --git a/images/virtual-background/background-2.jpg b/images/virtual-background/background-2.jpg index 5d63c7a5e..a7716dfa1 100644 Binary files a/images/virtual-background/background-2.jpg and b/images/virtual-background/background-2.jpg differ diff --git a/images/virtual-background/background-3.jpg b/images/virtual-background/background-3.jpg index 42cfaa08b..d56ed0cf3 100644 Binary files a/images/virtual-background/background-3.jpg and b/images/virtual-background/background-3.jpg differ diff --git a/images/virtual-background/background-4.jpg b/images/virtual-background/background-4.jpg index 58912125d..e43c0e0c0 100644 Binary files a/images/virtual-background/background-4.jpg and b/images/virtual-background/background-4.jpg differ diff --git a/images/virtual-background/background-5.jpg b/images/virtual-background/background-5.jpg new file mode 100644 index 000000000..bdb2e00e7 Binary files /dev/null and b/images/virtual-background/background-5.jpg differ diff --git a/images/virtual-background/background-6.jpg b/images/virtual-background/background-6.jpg new file mode 100644 index 000000000..849e30cc5 Binary files /dev/null and b/images/virtual-background/background-6.jpg differ diff --git a/images/virtual-background/background-7.jpg b/images/virtual-background/background-7.jpg new file mode 100644 index 000000000..b781c150d Binary files /dev/null and b/images/virtual-background/background-7.jpg differ diff --git a/lang/main.json b/lang/main.json index 4bf888a49..196557fe9 100644 --- a/lang/main.json +++ b/lang/main.json @@ -338,11 +338,11 @@ "title": "Embed this meeting" }, "virtualBackground": { - "title": "Backgrounds", + "title": "Virtual backgrounds", "blur": "Blur", "slightBlur": "Slight Blur", "removeBackground": "Remove background", - "uploadImage": "Upload image", + "addBackground": "Add background", "pleaseWait": "Please wait...", "none": "None" }, diff --git a/react/features/base/icons/svg/blur-background.svg b/react/features/base/icons/svg/blur-background.svg deleted file mode 100755 index 1bed83ea0..000000000 --- a/react/features/base/icons/svg/blur-background.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/react/features/base/icons/svg/close-small.svg b/react/features/base/icons/svg/close-small.svg new file mode 100644 index 000000000..352ea30bb --- /dev/null +++ b/react/features/base/icons/svg/close-small.svg @@ -0,0 +1,3 @@ + + + diff --git a/react/features/base/icons/svg/index.js b/react/features/base/icons/svg/index.js index ec1b10f39..a8fc84912 100644 --- a/react/features/base/icons/svg/index.js +++ b/react/features/base/icons/svg/index.js @@ -14,8 +14,8 @@ export { default as IconArrowLeft } from './arrow-left.svg'; export { default as IconAudioOnly } from './visibility.svg'; export { default as IconAudioOnlyOff } from './visibility-off.svg'; export { default as IconAudioRoute } from './volume.svg'; -export { default as IconBlurBackground } from './blur-background.svg'; export { default as IconPlusCalendar } from './calendar-plus.svg'; +export { default as IconPlusCircle } from './plus-circle.svg'; export { default as IconCamera } from './camera.svg'; export { default as IconCameraDisabled } from './camera-disabled.svg'; export { default as IconCameraEmpty } from './camera-empty.svg'; @@ -29,6 +29,7 @@ export { default as IconCheck } from './check.svg'; export { default as IconClose } from './close.svg'; export { default as IconCloseX } from './close-x.svg'; export { default as IconClosedCaption } from './closed_caption.svg'; +export { default as IconCloseSmall } from './close-small.svg'; export { default as IconCodeBlock } from './code-block.svg'; export { default as IconConnectionActive } from './gsm-bars.svg'; export { default as IconConnectionInactive } from './ninja.svg'; diff --git a/react/features/base/icons/svg/plus-circle.svg b/react/features/base/icons/svg/plus-circle.svg new file mode 100644 index 000000000..e11749970 --- /dev/null +++ b/react/features/base/icons/svg/plus-circle.svg @@ -0,0 +1,3 @@ + + + diff --git a/react/features/virtual-background/components/VirtualBackgroundDialog.js b/react/features/virtual-background/components/VirtualBackgroundDialog.js index b27f07d4c..4a759b1ee 100644 --- a/react/features/virtual-background/components/VirtualBackgroundDialog.js +++ b/react/features/virtual-background/components/VirtualBackgroundDialog.js @@ -7,9 +7,8 @@ import uuid from 'uuid'; import { Dialog } from '../../base/dialog'; import { translate } from '../../base/i18n'; -import { Icon, IconBlurBackground, IconCancelSelection } from '../../base/icons'; +import { Icon, IconCloseSmall, IconPlusCircle } from '../../base/icons'; import { connect } from '../../base/redux'; -import { Tooltip } from '../../base/tooltip'; import { toggleBackgroundEffect } from '../actions'; import { resizeImage, toDataURL } from '../functions'; import logger from '../logger'; @@ -34,6 +33,18 @@ const images = [ { id: '4', src: 'images/virtual-background/background-4.jpg' + }, + { + id: '5', + src: 'images/virtual-background/background-5.jpg' + }, + { + id: '6', + src: 'images/virtual-background/background-6.jpg' + }, + { + id: '7', + src: 'images/virtual-background/background-7.jpg' } ]; type Props = { @@ -170,9 +181,9 @@ function VirtualBackground({ _selectedThumbnail, dispatch, t }: Props) { return ( + width = '640px'> {loading ? (
{t('virtualBackground.pleaseWait')} @@ -182,35 +193,38 @@ function VirtualBackground({ _selectedThumbnail, dispatch, t }: Props) {
) : (
+ + uploadImage(e.target.files) } + type = 'file' />
- -
- {t('virtualBackground.none')} -
- - - enableBlur(8, 'slight-blur') } - size = { 50 } - src = { IconBlurBackground } /> - - - enableBlur(25, 'blur') } - size = { 50 } - src = { IconBlurBackground } /> - +
+ {t('virtualBackground.none')} +
+
enableBlur(8, 'slight-blur') }> + {t('virtualBackground.slightBlur')} +
+
enableBlur(25, 'blur') }> + {t('virtualBackground.blur')} +
{images.map((image, index) => ( event.target.style.display = 'none' } src = { image.src } /> ))} - - - uploadImage(e.target.files) } - type = 'file' /> - -
- -
{storedImages.map((image, index) => (
deleteStoredImage(image) } size = { 15 } - src = { IconCancelSelection } /> + src = { IconCloseSmall } />
))}