BigBlueButton/bigbluebutton-Github
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: sidebar content panel UI polishing

Browse Source
This commit is contained in:
Joao Victor 2022-05-19 14:28:58 -03:00
parent 464fa7a8ab
commit 2a09629698
21 changed files with 344 additions and 540 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
bigbluebutton-html5/imports/ui/components/breakout-room/breakout-dropdown/component.jsx
View File

@ -1,7 +1,7 @@
import React, { PureComponent } from 'react';
import { defineMessages, injectIntl } from 'react-intl';
import BBBMenu from "/imports/ui/components/common/menu/component";
import Button from '/imports/ui/components/common/button/component';
import Trigger from "/imports/ui/components/common/control-header/right/component";
const intlMessages = defineMessages({
options: {
@ -72,14 +72,9 @@ class BreakoutDropdown extends PureComponent {
<>
<BBBMenu
trigger={
<Button
<Trigger
data-test="breakoutOptionsMenu"
icon="more"
size="sm"
ghost
circle
hideLabel
color="dark"
label={intl.formatMessage(intlMessages.options)}
aria-label={intl.formatMessage(intlMessages.options)}
onClick={() => null}

23
bigbluebutton-html5/imports/ui/components/breakout-room/component.jsx
View File

@ -1,7 +1,6 @@
import React, { PureComponent } from 'react';
import { defineMessages, injectIntl } from 'react-intl';
import _ from 'lodash';
import Button from '/imports/ui/components/common/button/component';
import { Session } from 'meteor/session';
import logger from '/imports/startup/client/logger';
import Styled from './styles';
@ -16,6 +15,7 @@ import Settings from '/imports/ui/services/settings';
import BreakoutDropdown from '/imports/ui/components/breakout-room/breakout-dropdown/component';
import Users from '/imports/api/users';
import Auth from '/imports/ui/services/auth';
import Header from '/imports/ui/components/common/control-header/component';
const intlMessages = defineMessages({
breakoutTitle: {
@ -551,16 +551,15 @@ class BreakoutRoom extends PureComponent {
} = this.props;
return (
<Styled.Panel ref={(n) => this.panel = n}>
<Styled.Header>
<Styled.HeaderButton
icon="left_arrow"
label={intl.formatMessage(intlMessages.breakoutTitle)}
aria-label={intl.formatMessage(intlMessages.breakoutAriaTitle)}
onClick={() => {
<Header
leftButtonProps={{
'aria-label': intl.formatMessage(intlMessages.breakoutAriaTitle),
label: intl.formatMessage(intlMessages.breakoutTitle),
onClick: () => {
this.closePanel();
}}
/>
{ amIModerator && (
},
}}
customRightButton={amIModerator && (
<BreakoutDropdown
openBreakoutTimeManager={this.showSetTimeForm}
endAllBreakouts={() => {
@ -571,8 +570,8 @@ class BreakoutRoom extends PureComponent {
amIModerator={amIModerator}
isRTL={isRTL}
/>
) }
</Styled.Header>
)}
/>
{this.renderDuration()}
{amIModerator
? (

38
bigbluebutton-html5/imports/ui/components/breakout-room/styles.js
View File

@ -1,6 +1,5 @@
import styled, { css, keyframes } from 'styled-components';
import {
systemMessageBorderColor,
mdPaddingX,
borderSize,
listItemBgHover, borderSizeSmall,
@ -11,7 +10,6 @@ import {
colorPrimary,
colorGray,
colorDanger,
colorGrayDark,
userListBg,
colorWhite,
colorGrayLighter,
@ -229,33 +227,6 @@ const Panel = styled(ScrollboxVertical)`
height: 100%;
`;
const HeaderButton = styled(Button)`
display: flex;
flex-direction: row;
justify-content: space-between;
position: relative;
padding-left: 0;
padding-right: inherit;
background: none !important;
[dir="rtl"] & {
margin: 0 0 2rem auto;
padding-left: inherit;
padding-right: 0;
}
& > i {
color: ${colorGrayDark};
[dir="rtl"] & {
-webkit-transform: scale(-1, 1);
-moz-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
transform: scale(-1, 1);
}
}`;
const Separator = styled.div`
position: relative;
width: 100%;
@ -265,13 +236,6 @@ const Separator = styled.div`
margin: 30px 0px;
`;
const Header = styled.div`
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: ${jumboPaddingY};
`;
const FlexRow = styled.div`
display: flex;
flex-wrap: nowrap;
@ -297,8 +261,6 @@ export default {
EndButton,
Duration,
Panel,
HeaderButton,
Separator,
Header,
FlexRow,
};

89
bigbluebutton-html5/imports/ui/components/captions/component.jsx
View File

@ -8,6 +8,7 @@ import Service from '/imports/ui/components/captions/service';
import Styled from './styles';
import { PANELS, ACTIONS } from '/imports/ui/components/layout/enums';
import browserInfo from '/imports/utils/browserInfo';
import Header from '/imports/ui/components/common/control-header/component';
const intlMessages = defineMessages({
hide: {
@ -71,54 +72,50 @@ const Captions = ({
return (
<Styled.Captions isChrome={isChrome}>
<Styled.Header>
<Styled.Title>
<Styled.HideBtn
onClick={() => {
layoutContextDispatch({
type: ACTIONS.SET_SIDEBAR_CONTENT_IS_OPEN,
value: false,
});
layoutContextDispatch({
type: ACTIONS.SET_SIDEBAR_CONTENT_PANEL,
value: PANELS.NONE,
});
}}
aria-label={intl.formatMessage(intlMessages.hide)}
label={name}
icon={isRTL ? 'right_arrow' : 'left_arrow'}
/>
</Styled.Title>
{Service.amICaptionsOwner(ownerId)
? (
<span>
<Button
onClick={dictating
? () => Service.stopDictation(locale)
: () => Service.startDictation(locale)}
label={dictating
? intl.formatMessage(intlMessages.dictationStop)
: intl.formatMessage(intlMessages.dictationStart)}
aria-describedby="dictationBtnDesc"
color={dictating ? 'danger' : 'primary'}
disabled={!dictation}
/>
<div id="dictationBtnDesc" hidden>
{dictating
? intl.formatMessage(intlMessages.dictationOffDesc)
: intl.formatMessage(intlMessages.dictationOnDesc)}
</div>
</span>
) : (
<Header
leftButtonProps={{
onClick: () => {
layoutContextDispatch({
type: ACTIONS.SET_SIDEBAR_CONTENT_IS_OPEN,
value: false,
});
layoutContextDispatch({
type: ACTIONS.SET_SIDEBAR_CONTENT_PANEL,
value: PANELS.NONE,
});
},
'aria-label': intl.formatMessage(intlMessages.hide),
label: name,
}}
customRightButton={Service.amICaptionsOwner(ownerId) ? (
<span>
<Button
color="primary"
tooltipLabel={intl.formatMessage(intlMessages.takeOwnershipTooltip, { 0: name })}
onClick={() => Service.updateCaptionsOwner(locale, name)}
aria-label={intl.formatMessage(intlMessages.takeOwnership)}
label={intl.formatMessage(intlMessages.takeOwnership)}
onClick={dictating
? () => Service.stopDictation(locale)
: () => Service.startDictation(locale)}
label={dictating
? intl.formatMessage(intlMessages.dictationStop)
: intl.formatMessage(intlMessages.dictationStart)}
aria-describedby="dictationBtnDesc"
color={dictating ? 'danger' : 'primary'}
disabled={!dictation}
/>
)}
</Styled.Header>
<div id="dictationBtnDesc" hidden>
{dictating
? intl.formatMessage(intlMessages.dictationOffDesc)
: intl.formatMessage(intlMessages.dictationOnDesc)}
</div>
</span>
) : (
<Button
color="primary"
tooltipLabel={intl.formatMessage(intlMessages.takeOwnershipTooltip, { 0: name })}
onClick={() => Service.updateCaptionsOwner(locale, name)}
aria-label={intl.formatMessage(intlMessages.takeOwnership)}
label={intl.formatMessage(intlMessages.takeOwnership)}
/>
)}
/>
<PadContainer
externalId={locale}
hasPermission={hasPermission}

69
bigbluebutton-html5/imports/ui/components/captions/styles.js
View File

@ -1,23 +1,14 @@
import styled from 'styled-components';
import {
colorWhite,
colorGrayDark,
} from '/imports/ui/stylesheets/styled-components/palette';
import { colorWhite } from '/imports/ui/stylesheets/styled-components/palette';
import {
mdPaddingX,
mdPaddingY,
pollHeaderOffset,
toastContentWidth,
borderSize,
borderSizeLarge,
} from '/imports/ui/stylesheets/styled-components/general';
import { smallOnly } from '/imports/ui/stylesheets/styled-components/breakpoints';
import { DivElipsis } from '/imports/ui/stylesheets/styled-components/placeholders';
import Button from '/imports/ui/components/common/button/component';
const Captions = styled.div`
background-color: ${colorWhite};
padding: ${mdPaddingX} ${mdPaddingY} ${mdPaddingX} ${mdPaddingX};
padding: ${mdPaddingY} ${mdPaddingY} ${mdPaddingX} ${mdPaddingX};
display: flex;
flex-grow: 1;
flex-direction: column;
@ -33,58 +24,4 @@ const Captions = styled.div`
}
`;
const Header = styled.header`
position: relative;
top: ${pollHeaderOffset};
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
`;
const Title = styled(DivElipsis)`
flex: 1;
& > button, & > button:hover {
max-width: ${toastContentWidth};
}
`;
const HideBtn = styled(Button)`
position: relative;
background-color: ${colorWhite};
display: block;
margin: ${borderSizeLarge};
margin-bottom: ${borderSize};
padding-left: 0;
padding-right: inherit;
[dir="rtl"] & {
padding-left: inherit;
padding-right: 0;
}
& > i {
color: ${colorGrayDark};
font-size: smaller;
[dir="rtl"] & {
-webkit-transform: scale(-1, 1);
-moz-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
transform: scale(-1, 1);
}
}
&:hover {
background-color: ${colorWhite};
}
`;
export default {
Captions,
Header,
Title,
HideBtn,
};
export default { Captions };

10
bigbluebutton-html5/imports/ui/components/chat/chat-dropdown/component.jsx
View File

@ -3,8 +3,9 @@ import { defineMessages, injectIntl } from 'react-intl';
import { withModalMounter } from '/imports/ui/components/common/modal/service';
import _ from 'lodash';
import BBBMenu from "/imports/ui/components/common/menu/component";
import Button from '/imports/ui/components/common/button/component';
import { getDateString } from '/imports/utils/string-utils';
import Trigger from "/imports/ui/components/common/control-header/right/component";
import { alertScreenReader } from '/imports/utils/dom-utils';
import ChatService from '../service';
@ -135,14 +136,9 @@ class ChatDropdown extends PureComponent {
<>
<BBBMenu
trigger={
<Button
<Trigger
data-test="chatOptionsMenu"
icon="more"
size="sm"
ghost
circle
hideLabel
color="dark"
label={intl.formatMessage(intlMessages.options)}
aria-label={intl.formatMessage(intlMessages.options)}
onClick={() => null}

112
bigbluebutton-html5/imports/ui/components/chat/component.jsx
View File

@ -2,7 +2,6 @@ import React, { memo } from 'react';
import PropTypes from 'prop-types';
import { defineMessages, injectIntl } from 'react-intl';
import injectWbResizeEvent from '/imports/ui/components/presentation/resize-wrapper/component';
import Button from '/imports/ui/components/common/button/component';
import withShortcutHelper from '/imports/ui/components/shortcut-help/service';
import { Meteor } from 'meteor/meteor';
import ChatLogger from '/imports/ui/components/chat/chat-logger/ChatLogger';
@ -14,6 +13,7 @@ import { PANELS, ACTIONS } from '../layout/enums';
import { UserSentMessageCollection } from './service';
import Auth from '/imports/ui/services/auth';
import browserInfo from '/imports/utils/browserInfo';
import Header from '/imports/ui/components/common/control-header/component';
const CHAT_CONFIG = Meteor.settings.public.chat;
const PUBLIC_CHAT_ID = CHAT_CONFIG.public_id;
@ -67,68 +67,56 @@ const Chat = (props) => {
isChrome={isChrome}
data-test={isPublicChat ? 'publicChat' : 'privateChat'}
>
<Styled.Header>
<Styled.Title data-test="chatTitle">
<Styled.HideChatButton
onClick={() => {
layoutContextDispatch({
type: ACTIONS.SET_SIDEBAR_CONTENT_IS_OPEN,
value: false,
});
layoutContextDispatch({
type: ACTIONS.SET_ID_CHAT_OPEN,
value: '',
});
layoutContextDispatch({
type: ACTIONS.SET_SIDEBAR_CONTENT_PANEL,
value: PANELS.NONE,
});
}}
aria-label={intl.formatMessage(intlMessages.hideChatLabel, { 0: title })}
accessKey={chatID !== 'public' ? HIDE_CHAT_AK : null}
data-test={isPublicChat ? 'hidePublicChat' : 'hidePrivateChat'}
label={title}
icon="left_arrow"
<Header
leftButtonProps={{
accessKey: chatID !== 'public' ? HIDE_CHAT_AK : null,
'aria-label': intl.formatMessage(intlMessages.hideChatLabel, { 0: title }),
'data-test': isPublicChat ? 'hidePublicChat' : 'hidePrivateChat',
label: title,
onClick: () => {
layoutContextDispatch({
type: ACTIONS.SET_SIDEBAR_CONTENT_IS_OPEN,
value: false,
});
layoutContextDispatch({
type: ACTIONS.SET_ID_CHAT_OPEN,
value: '',
});
layoutContextDispatch({
type: ACTIONS.SET_SIDEBAR_CONTENT_PANEL,
value: PANELS.NONE,
});
},
}}
rightButtonProps={{
accessKey: CLOSE_CHAT_AK,
'aria-label': intl.formatMessage(intlMessages.closeChatLabel, { 0: title }),
'data-test': "closePrivateChat",
icon: "close",
label: intl.formatMessage(intlMessages.closeChatLabel, { 0: title }),
onClick: () => {
actions.handleClosePrivateChat(chatID);
layoutContextDispatch({
type: ACTIONS.SET_SIDEBAR_CONTENT_IS_OPEN,
value: false,
});
layoutContextDispatch({
type: ACTIONS.SET_ID_CHAT_OPEN,
value: '',
});
layoutContextDispatch({
type: ACTIONS.SET_SIDEBAR_CONTENT_PANEL,
value: PANELS.NONE,
});
},
}}
customRightButton={isPublicChat && (
<ChatDropdownContainer {...{
meetingIsBreakout, isMeteorConnected, amIModerator, timeWindowsValues,
}}
/>
</Styled.Title>
{
!isPublicChat
? (
<Button
icon="close"
size="sm"
ghost
color="dark"
hideLabel
onClick={() => {
actions.handleClosePrivateChat(chatID);
layoutContextDispatch({
type: ACTIONS.SET_SIDEBAR_CONTENT_IS_OPEN,
value: false,
});
layoutContextDispatch({
type: ACTIONS.SET_ID_CHAT_OPEN,
value: '',
});
layoutContextDispatch({
type: ACTIONS.SET_SIDEBAR_CONTENT_PANEL,
value: PANELS.NONE,
});
}}
aria-label={intl.formatMessage(intlMessages.closeChatLabel, { 0: title })}
label={intl.formatMessage(intlMessages.closeChatLabel, { 0: title })}
accessKey={CLOSE_CHAT_AK}
data-test="closePrivateChat"
/>
)
: (
<ChatDropdownContainer {...{
meetingIsBreakout, isMeteorConnected, amIModerator, timeWindowsValues,
}}
/>
)
}
</Styled.Header>
)}
/>
<TimeWindowList
id={ELEMENT_ID}
chatId={chatID}

74
bigbluebutton-html5/imports/ui/components/chat/styles.js
View File

@ -1,22 +1,11 @@
import styled from 'styled-components';
import {
colorWhite,
colorGrayDark,
} from '/imports/ui/stylesheets/styled-components/palette';
import { colorWhite } from '/imports/ui/stylesheets/styled-components/palette';
import { smallOnly } from '/imports/ui/stylesheets/styled-components/breakpoints';
import Button from '/imports/ui/components/common/button/component';
import {
mdPaddingX,
mdPaddingY,
pollHeaderOffset,
borderSizeLarge,
borderSize,
} from '/imports/ui/stylesheets/styled-components/general';
import { DivElipsis } from '/imports/ui/stylesheets/styled-components/placeholders';
import { mdPaddingX } from '/imports/ui/stylesheets/styled-components/general';
const Chat = styled.div`
background-color: ${colorWhite};
padding: ${mdPaddingX} ${mdPaddingY} ${mdPaddingX} ${mdPaddingX};
padding: ${mdPaddingX};
display: flex;
flex-grow: 1;
@ -34,59 +23,4 @@ const Chat = styled.div`
}
`;
const Header = styled.header`
position: relative;
top: ${pollHeaderOffset};
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
`;
const Title = styled(DivElipsis)`
flex: 1;
& > button, button:hover {
max-width: 98%;
}
`;
const HideChatButton = styled(Button)`
position: relative;
background-color: ${colorWhite};
display: block;
margin: ${borderSizeLarge};
margin-bottom: ${borderSize};
padding-left: 0;
padding-right: inherit;
z-index: 3;
[dir="rtl"] & {
padding-left: inherit;
padding-right: 0;
}
& > i {
color: ${colorGrayDark};
font-size: smaller;
[dir="rtl"] & {
-webkit-transform: scale(-1, 1);
-moz-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
transform: scale(-1, 1);
}
}
&:hover {
background-color: ${colorWhite};
}
`;
export default {
Chat,
Header,
Title,
HideChatButton,
};
export default { Chat };

7
bigbluebutton-html5/imports/ui/components/common/button/styles.js
View File

@ -63,7 +63,7 @@ const ButtonIcon = styled(Icon)`
}
}
.buttonWrapper:hover & {
opacity: .75;
opacity: .5;
}
`;
@ -85,7 +85,8 @@ const ButtonLabel = styled.span`
margin: 0 ${btnSpacing} 0 0;
}
}
&:hover {
&:hover,
.buttonWrapper:hover & {
opacity: .5;
}
@ -259,7 +260,7 @@ const ButtonSpan = styled.span`
border: ${borderSizeLarge} solid transparent;
&:focus,
&:focus:not([aria-disabled="true"]) & {
.buttonWrapper:focus:not([aria-disabled="true"]) & {
color: ${btnDefaultColor};
background-color: ${btnDefaultBg};
background-clip: padding-box;

40
bigbluebutton-html5/imports/ui/components/common/control-header/component.jsx Normal file
View File

@ -0,0 +1,40 @@
import React from 'react';
import PropTypes from 'prop-types';
import Styled from './styles';
import Left from './left/component';
import Right from './right/component';
const Header = ({
leftButtonProps,
rightButtonProps,
customRightButton,
}) => {
const renderCloseButton = () => (
<Right {...rightButtonProps} />
);
const renderCustomRightButton = () => (
<Styled.RightWrapper>
{customRightButton}
</Styled.RightWrapper>
);
return (
<Styled.Header>
<Left {...leftButtonProps} />
{customRightButton
? renderCustomRightButton()
: rightButtonProps
? renderCloseButton()
: null}
</Styled.Header>
);
}
Header.propTypes = {
leftButtonProps: PropTypes.object,
rightButtonProps: PropTypes.object,
customRightButton: PropTypes.element,
};
export default Header;

30
bigbluebutton-html5/imports/ui/components/common/control-header/left/component.jsx Normal file
View File

@ -0,0 +1,30 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Styled from './styles';
class Left extends Component {
constructor(props) {
super(props);
}
render() {
return (
<Styled.HideButton
className="buttonWrapper"
icon="left_arrow"
tabindex={0}
{...this.props}
/>
);
}
}
Left.propTypes = {
accessKey: PropTypes.any,
'aria-label': PropTypes.string,
'data-test': PropTypes.string,
label: PropTypes.string,
onClick: PropTypes.func,
};
export default Left;

31
bigbluebutton-html5/imports/ui/components/common/control-header/left/styles.js Normal file
View File

@ -0,0 +1,31 @@
import styled from 'styled-components';
import Button from '/imports/ui/components/common/button/component';
import { fontSizeBase } from '/imports/ui/stylesheets/styled-components/typography';
const HideButton = styled(Button)`
padding: 0;
margin: 0;
line-height: normal;
display: flex;
align-items: center;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
& > i,
& > i::before {
width: auto;
font-size: ${fontSizeBase} !important;
[dir="rtl"] & {
-webkit-transform: scale(-1, 1);
-moz-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
transform: scale(-1, 1);
}
}
`;
export default { HideButton };

31
bigbluebutton-html5/imports/ui/components/common/control-header/right/component.jsx Normal file
View File

@ -0,0 +1,31 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Styled from './styles';
class Right extends Component {
constructor(props) {
super(props);
}
render() {
return (
<Styled.CloseButton
size="sm"
hideLabel
circle
{...this.props}
/>
);
}
}
Right.propTypes = {
accessKey: PropTypes.any,
'aria-label': PropTypes.string,
'data-test': PropTypes.string,
icon: PropTypes.string,
label: PropTypes.string,
onClick: PropTypes.func,
};
export default Right;

26
bigbluebutton-html5/imports/ui/components/common/control-header/right/styles.js Normal file
View File

@ -0,0 +1,26 @@
import styled from 'styled-components';
import Button from '/imports/ui/components/common/button/component';
import { fontSizeBase } from '/imports/ui/stylesheets/styled-components/typography';
import { colorWhite } from '/imports/ui/stylesheets/styled-components/palette';
const CloseButton = styled(Button)`
span:first-of-type {
padding: 0;
margin: 0;
& > i,
& > i::before {
width: auto;
font-size: ${fontSizeBase};
}
&:hover,
&:focus,
.buttonWrapper:hover &,
.buttonWrapper:focus & {
background-color: ${colorWhite} !important;
}
}
`;
export default { CloseButton };

20
bigbluebutton-html5/imports/ui/components/common/control-header/styles.js Normal file
View File

@ -0,0 +1,20 @@
import styled from 'styled-components';
import { jumboPaddingY } from '/imports/ui/stylesheets/styled-components/general';
const Header = styled.header`
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: ${jumboPaddingY};
`;
const RightWrapper = styled.div`
& > div {
display: flex;
}
`;
export default {
Header,
RightWrapper,
};

38
bigbluebutton-html5/imports/ui/components/notes/component.jsx
View File

@ -7,6 +7,7 @@ import PadContainer from '/imports/ui/components/pads/container';
import Styled from './styles';
import { PANELS, ACTIONS } from '../layout/enums';
import browserInfo from '/imports/utils/browserInfo';
import Header from '/imports/ui/components/common/control-header/component';
const intlMessages = defineMessages({
hide: {
@ -41,26 +42,23 @@ const Notes = ({
return (
<Styled.Notes data-test="notes" isChrome={isChrome}>
<Styled.Header>
<Styled.Title data-test="notesTitle">
<Styled.HideButton
onClick={() => {
layoutContextDispatch({
type: ACTIONS.SET_SIDEBAR_CONTENT_IS_OPEN,
value: false,
});
layoutContextDispatch({
type: ACTIONS.SET_SIDEBAR_CONTENT_PANEL,
value: PANELS.NONE,
});
}}
data-test="hideNotesLabel"
aria-label={intl.formatMessage(intlMessages.hide)}
label={intl.formatMessage(intlMessages.title)}
icon={isRTL ? 'right_arrow' : 'left_arrow'}
/>
</Styled.Title>
</Styled.Header>
<Header
leftButtonProps={{
onClick: () => {
layoutContextDispatch({
type: ACTIONS.SET_SIDEBAR_CONTENT_IS_OPEN,
value: false,
});
layoutContextDispatch({
type: ACTIONS.SET_SIDEBAR_CONTENT_PANEL,
value: PANELS.NONE,
});
},
'data-test': 'hideNotesLabel',
'aria-label': intl.formatMessage(intlMessages.hide),
label: intl.formatMessage(intlMessages.title),
}}
/>
<PadContainer
externalId={Service.ID}
hasPermission={hasPermission}

67
bigbluebutton-html5/imports/ui/components/notes/styles.js
View File

@ -2,18 +2,9 @@ import styled from 'styled-components';
import {
mdPaddingX,
mdPaddingY,
pollHeaderOffset,
toastContentWidth,
borderSizeLarge,
borderSize,
} from '/imports/ui/stylesheets/styled-components/general';
import {
colorWhite,
colorGrayDark,
} from '/imports/ui/stylesheets/styled-components/palette';
import { colorWhite } from '/imports/ui/stylesheets/styled-components/palette';
import { smallOnly } from '/imports/ui/stylesheets/styled-components/breakpoints';
import { DivElipsis } from '/imports/ui/stylesheets/styled-components/placeholders';
import Button from '/imports/ui/components/common/button/component';
const Notes = styled.div`
background-color: ${colorWhite};
@ -33,58 +24,4 @@ const Notes = styled.div`
}
`;
const Header = styled.header`
position: relative;
top: ${pollHeaderOffset};
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
`;
const Title = styled(DivElipsis)`
flex: 1;
& > button, button:hover {
max-width: ${toastContentWidth};
}
`;
const HideButton = styled(Button)`
position: relative;
background-color: ${colorWhite};
display: block;
margin: ${borderSizeLarge};
margin-bottom: ${borderSize};
padding-left: 0;
padding-right: inherit;
[dir="rtl"] & {
padding-left: inherit;
padding-right: 0;
}
& > i {
color: ${colorGrayDark};
font-size: smaller;
[dir="rtl"] & {
-webkit-transform: scale(-1, 1);
-moz-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
transform: scale(-1, 1);
}
}
&:hover {
background-color: ${colorWhite};
}
`;
export default {
Notes,
Header,
Title,
HideButton,
};
export default { Notes };

41
bigbluebutton-html5/imports/ui/components/poll/component.jsx
View File

@ -11,6 +11,7 @@ import Styled from './styles';
import { PANELS, ACTIONS } from '../layout/enums';
import DragAndDrop from './dragAndDrop/component';
import { alertScreenReader } from '/imports/utils/dom-utils';
import Header from '/imports/ui/components/common/control-header/component';
const intlMessages = defineMessages({
pollPaneTitle: {
@ -780,15 +781,12 @@ class Poll extends Component {
return (
<div>
<Styled.Header>
<Styled.PollHideButton
ref={(node) => { this.hideBtn = node; }}
data-test="hidePollDesc"
tabIndex={0}
label={intl.formatMessage(intlMessages.pollPaneTitle)}
icon="left_arrow"
aria-label={intl.formatMessage(intlMessages.hidePollDesc)}
onClick={() => {
<Header
leftButtonProps={{
'aria-label': intl.formatMessage(intlMessages.hidePollDesc),
'data-test': "hidePollDesc",
label: intl.formatMessage(intlMessages.pollPaneTitle),
onClick: () => {
layoutContextDispatch({
type: ACTIONS.SET_SIDEBAR_CONTENT_IS_OPEN,
value: false,
@ -797,12 +795,15 @@ class Poll extends Component {
type: ACTIONS.SET_SIDEBAR_CONTENT_PANEL,
value: PANELS.NONE,
});
}}
/>
<Styled.PollCloseButton
label={intl.formatMessage(intlMessages.closeLabel)}
aria-label={`${intl.formatMessage(intlMessages.closeLabel)} ${intl.formatMessage(intlMessages.pollPaneTitle)}`}
onClick={() => {
},
ref: (node) => { this.hideBtn = node; },
}}
rightButtonProps={{
'aria-label': `${intl.formatMessage(intlMessages.closeLabel)} ${intl.formatMessage(intlMessages.pollPaneTitle)}`,
'data-test': "closePolling",
icon: "close",
label: intl.formatMessage(intlMessages.closeLabel),
onClick: () => {
if (currentPoll) stopPoll();
layoutContextDispatch({
type: ACTIONS.SET_SIDEBAR_CONTENT_IS_OPEN,
@ -814,13 +815,9 @@ class Poll extends Component {
});
Session.set('forcePollOpen', false);
Session.set('pollInitiated', false);
}}
icon="close"
size="sm"
hideLabel
data-test="closePolling"
/>
</Styled.Header>
},
}}
/>
{this.renderPollPanel()}
<span className="sr-only" id="poll-config-button">{intl.formatMessage(intlMessages.showRespDesc)}</span>
<span className="sr-only" id="add-item-button">{intl.formatMessage(intlMessages.addRespDesc)}</span>

56
bigbluebutton-html5/imports/ui/components/poll/styles.js
View File

@ -5,13 +5,10 @@ import {
smPaddingY,
lgPaddingX,
borderRadius,
mdPaddingY,
borderSize,
borderSizeLarge,
pollInputHeight,
pollSmMargin,
pollMdMargin,
pollHeaderOffset,
} from '/imports/ui/stylesheets/styled-components/general';
import {
colorText,
@ -324,56 +321,6 @@ const DragAndDropPollContainer = styled.div`
height: 200px !important;
`;
const Header = styled.header`
position: relative;
top: ${pollHeaderOffset};
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
margin-bottom: ${mdPaddingY};
`;
const PollHideButton = styled(Button)`
position: relative;
background-color: ${colorWhite};
display: block;
margin: ${borderSizeLarge};
margin-bottom: ${borderSize};
padding-left: 0;
padding-right: inherit;
[dir="rtl"] & {
padding-left: inherit;
padding-right: 0;
}
> i {
color: ${colorGrayDark};
font-size: smaller;
[dir="rtl"] & {
-webkit-transform: scale(-1, 1);
-moz-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
transform: scale(-1, 1);
}
}
&:hover {
background-color: ${colorWhite};
}
`;
const PollCloseButton = styled(Button)`
font-size: ${fontSizeBase};
position: relative;
& > i {
color: ${colorText};
}
`;
export default {
ToggleLabel,
PollOptionInput,
@ -396,7 +343,4 @@ export default {
NoSlidePanelContainer,
PollButton,
DragAndDropPollContainer,
Header,
PollHideButton,
PollCloseButton,
};

16
bigbluebutton-html5/imports/ui/components/waiting-users/component.jsx
View File

@ -8,6 +8,7 @@ import Styled from './styles';
import { PANELS, ACTIONS } from '../layout/enums';
import Settings from '/imports/ui/services/settings';
import browserInfo from '/imports/utils/browserInfo';
import Header from '/imports/ui/components/common/control-header/component';
const intlMessages = defineMessages({
waitingUsersTitle: {
@ -314,15 +315,12 @@ const WaitingUsers = (props) => {
return (
<Styled.Panel data-test="note" isChrome={isChrome}>
<Styled.Header>
<Styled.Title data-test="noteTitle">
<Styled.HideButton
onClick={() => closePanel()}
label={intl.formatMessage(intlMessages.title)}
icon="left_arrow"
/>
</Styled.Title>
</Styled.Header>
<Header
leftButtonProps={{
onClick: () => closePanel(),
label: intl.formatMessage(intlMessages.title),
}}
/>
<Styled.ScrollableArea>
{isGuestLobbyMessageEnabled ? (
<Styled.LobbyMessage>

57
bigbluebutton-html5/imports/ui/components/waiting-users/styles.js
View File

@ -5,21 +5,16 @@ import {
itemFocusBorder,
colorGray,
colorWhite,
colorGrayDark,
colorGrayLightest,
colorOffWhite,
} from '/imports/ui/stylesheets/styled-components/palette';
import {
borderSize,
borderSizeLarge,
mdPaddingX,
mdPaddingY,
pollHeaderOffset,
toastContentWidth,
} from '/imports/ui/stylesheets/styled-components/general';
import { fontSizeBase } from '/imports/ui/stylesheets/styled-components/typography';
import { smallOnly } from '/imports/ui/stylesheets/styled-components/breakpoints';
import { DivElipsis } from '/imports/ui/stylesheets/styled-components/placeholders';
import Button from '/imports/ui/components/common/button/component';
import { ScrollboxVertical } from '/imports/ui/stylesheets/styled-components/scrollable';
@ -150,55 +145,6 @@ const Panel = styled.div`
}
`;
const Header = styled.header`
position: relative;
top: ${pollHeaderOffset};
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
`;
const Title = styled(DivElipsis)`
flex: 1;
& > button, & > button:hover {
max-width: ${toastContentWidth};
}
`;
const HideButton = styled(Button)`
position: relative;
background-color: ${colorWhite};
display: block;
margin: ${borderSizeLarge};
margin-bottom: ${borderSize};
padding-left: 0;
padding-right: inherit;
[dir="rtl"] & {
padding-left: inherit;
padding-right: 0;
}
& > i {
color: ${colorGrayDark};
font-size: smaller;
[dir="rtl"] & {
-webkit-transform: scale(-1, 1);
-moz-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
transform: scale(-1, 1);
}
}
&:hover {
background-color: ${colorWhite};
}
`;
const LobbyMessage = styled.div`
border-bottom: 1px solid ${colorGrayLightest};
margin: 2px 2px 0 2px;
@ -266,9 +212,6 @@ export default {
Users,
CustomButton,
Panel,
Header,
Title,
HideButton,
LobbyMessage,
RememberContainer,
ScrollableArea,