From fa4baa036aa4c0c4f9d67909c948cc98e2af0ca0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ram=C3=B3n=20Souza?= Date: Thu, 6 Jul 2023 10:27:52 -0300 Subject: [PATCH 1/8] change layout icons --- .../resources/images/layouts/custom.svg | 73 +++++-------------- .../images/layouts/presentationFocus.svg | 46 +++++------- .../public/resources/images/layouts/smart.svg | 58 ++++----------- .../resources/images/layouts/videoFocus.svg | 48 +++++------- 4 files changed, 72 insertions(+), 153 deletions(-) diff --git a/bigbluebutton-html5/public/resources/images/layouts/custom.svg b/bigbluebutton-html5/public/resources/images/layouts/custom.svg index 67e6f11154..08bdfa65cc 100644 --- a/bigbluebutton-html5/public/resources/images/layouts/custom.svg +++ b/bigbluebutton-html5/public/resources/images/layouts/custom.svg @@ -1,53 +1,20 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + diff --git a/bigbluebutton-html5/public/resources/images/layouts/presentationFocus.svg b/bigbluebutton-html5/public/resources/images/layouts/presentationFocus.svg index b65bdc654b..a5a746870b 100644 --- a/bigbluebutton-html5/public/resources/images/layouts/presentationFocus.svg +++ b/bigbluebutton-html5/public/resources/images/layouts/presentationFocus.svg @@ -1,28 +1,18 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + diff --git a/bigbluebutton-html5/public/resources/images/layouts/smart.svg b/bigbluebutton-html5/public/resources/images/layouts/smart.svg index 1f1bc2be08..fed8a4fd8a 100644 --- a/bigbluebutton-html5/public/resources/images/layouts/smart.svg +++ b/bigbluebutton-html5/public/resources/images/layouts/smart.svg @@ -1,42 +1,16 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + diff --git a/bigbluebutton-html5/public/resources/images/layouts/videoFocus.svg b/bigbluebutton-html5/public/resources/images/layouts/videoFocus.svg index ce4ce8306f..cae37cecf1 100644 --- a/bigbluebutton-html5/public/resources/images/layouts/videoFocus.svg +++ b/bigbluebutton-html5/public/resources/images/layouts/videoFocus.svg @@ -1,30 +1,18 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + From 67d9cc423a19d1ca2f976ac354d23400c565a547 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ram=C3=B3n=20Souza?= Date: Thu, 6 Jul 2023 11:00:44 -0300 Subject: [PATCH 2/8] move labels below the images --- .../imports/ui/components/layout/modal/component.jsx | 2 +- .../imports/ui/components/layout/modal/styles.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/bigbluebutton-html5/imports/ui/components/layout/modal/component.jsx b/bigbluebutton-html5/imports/ui/components/layout/modal/component.jsx index 718274e7ca..228386da21 100644 --- a/bigbluebutton-html5/imports/ui/components/layout/modal/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/layout/modal/component.jsx @@ -129,7 +129,6 @@ const LayoutModalComponent = (props) => { {Object.values(LAYOUT_TYPE) .map((layout) => ( - {intl.formatMessage(intlMessages[`${layout}Layout`])} { aria-describedby="layout-btn-desc" data-test={`${layout}Layout`} /> + {intl.formatMessage(intlMessages[`${layout}Layout`])} ))} diff --git a/bigbluebutton-html5/imports/ui/components/layout/modal/styles.js b/bigbluebutton-html5/imports/ui/components/layout/modal/styles.js index 5a3d9e7d09..b9bf9c81a1 100644 --- a/bigbluebutton-html5/imports/ui/components/layout/modal/styles.js +++ b/bigbluebutton-html5/imports/ui/components/layout/modal/styles.js @@ -64,7 +64,7 @@ const LayoutBtn = styled(Button)` align-items: center; flex-direction: column; padding: 0 !important; - margin: 0.5rem 1rem 1rem 1rem; + margin: 1rem 1rem 0.5rem 1rem; width: fit-content; @media ${smallOnly} { From 91c509458891836dd1964863e88a2b3d330ea1d6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ram=C3=B3n=20Souza?= Date: Thu, 6 Jul 2023 17:31:26 -0300 Subject: [PATCH 3/8] add checkmark to active layout --- .../ui/components/layout/modal/styles.js | 21 +++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/bigbluebutton-html5/imports/ui/components/layout/modal/styles.js b/bigbluebutton-html5/imports/ui/components/layout/modal/styles.js index b9bf9c81a1..51a6af4854 100644 --- a/bigbluebutton-html5/imports/ui/components/layout/modal/styles.js +++ b/bigbluebutton-html5/imports/ui/components/layout/modal/styles.js @@ -88,6 +88,27 @@ const LayoutBtn = styled(Button)` border: ${colorPrimary} solid 4px; border-radius: 5px; } + + &:before { + font-family: 'bbb-icons'; + color: ${colorWhite}; + position: fixed; + content: "\\e946"; + background-color: ${colorPrimary}; + margin-left: 13.1rem; + padding: 0.3rem 0.2rem 0 0.6rem; + border-radius: 0 0 0 .3rem; + + [dir="rtl"] & { + left: auto; + margin-right: 13.1rem; + margin-left: unset; + padding: 0.3rem 0.6rem 0 0.2rem; + border-radius: 0 0 .3rem 0; + } + width: 1.8rem; + height: 1.8rem; + } `}; `; From 804d7e859c6d825fe4f7b5652428fe5e3f55c4a4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ram=C3=B3n=20Souza?= Date: Fri, 7 Jul 2023 09:53:58 -0300 Subject: [PATCH 4/8] change labels, update push layout experience --- .../actions-dropdown/component.jsx | 12 +---- .../ui/components/layout/modal/component.jsx | 51 ++++++------------- bigbluebutton-html5/public/locales/en.json | 16 +++--- 3 files changed, 24 insertions(+), 55 deletions(-) diff --git a/bigbluebutton-html5/imports/ui/components/actions-bar/actions-dropdown/component.jsx b/bigbluebutton-html5/imports/ui/components/actions-bar/actions-dropdown/component.jsx index ad7353378d..ce57e99123 100755 --- a/bigbluebutton-html5/imports/ui/components/actions-bar/actions-dropdown/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/actions-bar/actions-dropdown/component.jsx @@ -274,19 +274,9 @@ class ActionsDropdown extends PureComponent { }); } - if (amIPresenter && showPushLayout && isLayoutsEnabled()) { - actions.push({ - icon: 'send', - label: intl.formatMessage(intlMessages.propagateLayoutLabel), - key: 'propagate layout', - onClick: amIPresenter ? setMeetingLayout : setPushLayout, - dataTest: 'propagateLayout', - }); - } - if (isLayoutsEnabled()) { actions.push({ - icon: 'send', + icon: 'manage_layout', label: intl.formatMessage(intlMessages.layoutModal), key: 'layoutModal', onClick: () => this.setLayoutModalIsOpen(true), diff --git a/bigbluebutton-html5/imports/ui/components/layout/modal/component.jsx b/bigbluebutton-html5/imports/ui/components/layout/modal/component.jsx index 228386da21..9e6a988fa5 100644 --- a/bigbluebutton-html5/imports/ui/components/layout/modal/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/layout/modal/component.jsx @@ -4,7 +4,6 @@ import { defineMessages, injectIntl } from 'react-intl'; import { LAYOUT_TYPE } from '/imports/ui/components/layout/enums'; import SettingsService from '/imports/ui/components/settings/service'; import deviceInfo from '/imports/utils/deviceInfo'; -import Toggle from '/imports/ui/components/common/switch/component'; import Button from '/imports/ui/components/common/button/component'; import Styled from './styles'; @@ -14,7 +13,6 @@ const LayoutModalComponent = (props) => { setIsOpen, isModerator, isPresenter, - showToggleLabel, application, updateSettings, onRequestClose, @@ -22,8 +20,6 @@ const LayoutModalComponent = (props) => { } = props; const [selectedLayout, setSelectedLayout] = useState(application.selectedLayout); - // eslint-disable-next-line react/prop-types - const [isKeepPushingLayout, setIsKeepPushingLayout] = useState(application.pushLayout); const BASE_NAME = Meteor.settings.public.app.basename; @@ -35,13 +31,13 @@ const LayoutModalComponent = (props) => { id: 'app.layout.modal.title', description: 'Modal title', }, - confirm: { - id: 'app.layout.modal.confirm', + update: { + id: 'app.layout.modal.update', description: 'Modal confirm button', }, - cancel: { - id: 'app.layout.modal.cancel', - description: 'Modal cancel button', + updateAll: { + id: 'app.layout.modal.updateAll', + description: 'Modal updateAll button', }, layoutLabel: { id: 'app.layout.modal.layoutLabel', @@ -85,14 +81,10 @@ const LayoutModalComponent = (props) => { setSelectedLayout(e); }; - const handleKeepPushingLayout = () => { - setIsKeepPushingLayout((newValue) => !newValue); - }; - - const handleCloseModal = () => { + const handleUpdateLayout = (updateAll) => { const obj = { application: - { ...application, selectedLayout, pushLayout: isKeepPushingLayout }, + { ...application, selectedLayout, pushLayout: updateAll }, }; updateSettings(obj, intlMessages.layoutToastLabel); @@ -106,19 +98,11 @@ const LayoutModalComponent = (props) => { if (isKeepPushingLayoutEnabled) { return ( - - - {intl.formatMessage(intlMessages.keepPushingLayoutLabel)} - - - + handleUpdateLayout(true)} + color="secondary" + /> ); } return null; @@ -165,19 +149,14 @@ const LayoutModalComponent = (props) => { {renderLayoutButtons()} - {renderPushLayoutsOptions()} - setIsOpen(false)} - color="secondary" - /> + {renderPushLayoutsOptions()}