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

Merge pull request #16715 from KDSBrowne/bbb-style-focus

Browse Source 
Add Focus Ring To Items In Top Tldraw Toolbar
This commit is contained in:
Ramón Souza 2023-02-14 10:51:24 -03:00 committed by GitHub
commit 775c015d66
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 52 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
bigbluebutton-html5/imports/ui/components/app/component.jsx
View File

@ -537,6 +537,7 @@ class App extends Component {
isPresenter,
selectedLayout,
presentationIsOpen,
darkTheme,
} = this.props;
return (
@ -561,7 +562,7 @@ class App extends Component {
<SidebarContentContainer isSharedNotesPinned={shouldShowSharedNotes} />
<NavBarContainer main="new" />
<NewWebcamContainer isLayoutSwapped={!presentationIsOpen} />
{shouldShowPresentation ? <PresentationAreaContainer presentationIsOpen={presentationIsOpen} /> : null}
{shouldShowPresentation ? <PresentationAreaContainer darkTheme={darkTheme} presentationIsOpen={presentationIsOpen} /> : null}
{shouldShowScreenshare ? <ScreenshareContainer isLayoutSwapped={!presentationIsOpen} /> : null}
{
shouldShowExternalVideo

2
bigbluebutton-html5/imports/ui/components/presentation/component.jsx
View File

@ -918,6 +918,7 @@ class Presentation extends PureComponent {
fullscreenElementId,
layoutContextDispatch,
presentationIsOpen,
darkTheme,
} = this.props;
const {
@ -1041,6 +1042,7 @@ class Presentation extends PureComponent {
layoutContextDispatch={layoutContextDispatch}
fullscreenRef={this.refPresentationContainer}
presentationId={currentPresentation?.id}
darkTheme={darkTheme}
/>
{isFullscreen && <PollingContainer />}
</div>

3
bigbluebutton-html5/imports/ui/components/presentation/presentation-area/component.jsx
View File

@ -5,13 +5,14 @@ const PresentationArea = ({
width,
height,
presentationIsOpen,
darkTheme,
}) => {
const presentationAreaSize = {
presentationAreaWidth: width,
presentationAreaHeight: height,
};
return (
<PresentationPodsContainer {...{ presentationAreaSize, presentationIsOpen }} />
<PresentationPodsContainer {...{ presentationAreaSize, presentationIsOpen, darkTheme }} />
);
};

4
bigbluebutton-html5/imports/ui/components/presentation/presentation-area/container.jsx
View File

@ -2,10 +2,10 @@ import React from 'react';
import { layoutSelectOutput } from '../../layout/context';
import PresentationArea from './component';
const PresentationAreaContainer = ({ presentationIsOpen }) => {
const PresentationAreaContainer = ({ presentationIsOpen, darkTheme }) => {
const presentation = layoutSelectOutput((i) => i.presentation);
return <PresentationArea {...{ ...presentation, presentationIsOpen }} />;
return <PresentationArea {...{ ...presentation, presentationIsOpen, darkTheme }} />;
};
export default PresentationAreaContainer;

4
bigbluebutton-html5/imports/ui/components/presentation/presentation-menu/styles.js
View File

@ -41,15 +41,13 @@ const Right = styled.div`
z-index: 999;
box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.05);
border-bottom: 1px solid ${colorWhite};
height: ${presentationMenuHeight};
height: 44px;
> div {
padding: 2px 4px 2px 4px;
background-color: ${colorWhite};
width: 50px;
height: 100%;
margin-top: 1px;
}
button {

46
bigbluebutton-html5/imports/ui/components/whiteboard/component.jsx
View File

@ -8,7 +8,8 @@ import { Utils } from "@tldraw/core";
import Settings from '/imports/ui/services/settings';
import logger from '/imports/startup/client/logger';
import KEY_CODES from '/imports/utils/keyCodes';
import { presentationMenuHeight } from '/imports/ui/stylesheets/styled-components/general';
import { presentationMenuHeight, borderSize, borderSizeLarge } from '/imports/ui/stylesheets/styled-components/general';
import { colorWhite, colorBlack } from '/imports/ui/stylesheets/styled-components/palette';
function usePrevious(value) {
const ref = React.useRef();
@ -64,6 +65,9 @@ const TldrawGlobalStyle = createGlobalStyle`
[aria-expanded*="false"][aria-controls*="radix-"] {
display: none;
}
[class$="-side-right"] {
top: -1px;
}
${({ hasWBAccess, isPresenter, size }) => (hasWBAccess || isPresenter) && `
#TD-Tools-Dots {
height: ${size}px;
@ -80,7 +84,35 @@ const TldrawGlobalStyle = createGlobalStyle`
width: ${size}px;
}
#TD-Styles {
height: 100%;
border-width: ${borderSize};
}
#TD-TopPanel-Undo,
#TD-TopPanel-Redo,
#TD-Styles {
height: 92%;
border-radius: 7px;
&:hover {
border: solid ${borderSize} #ECECEC;
background-color: #ECECEC;
}
&:focus {
border: solid ${borderSize} ${colorBlack};
}
}
#TD-Styles,
#TD-TopPanel-Undo,
#TD-TopPanel-Redo {
margin: ${borderSize} ${borderSizeLarge} 0px ${borderSizeLarge};
}
`}
${({ darkTheme }) => darkTheme && `
#TD-TopPanel-Undo,
#TD-TopPanel-Redo,
#TD-Styles {
&:focus {
border: solid ${borderSize} ${colorWhite} !important;
}
}
`}
`;
@ -127,6 +159,7 @@ export default function Whiteboard(props) {
presentationAreaWidth,
maxNumberOfAnnotations,
notifyShapeNumberExceeded,
darkTheme,
} = props;
const { pages, pageStates } = initDefaultPages(curPres?.pages.length || 1);
@ -979,10 +1012,13 @@ export default function Whiteboard(props) {
>
{enable && (hasWBAccess || isPresenter) ? editableWB : readOnlyWB}
<TldrawGlobalStyle
hasWBAccess={hasWBAccess}
isPresenter={isPresenter}
hideContextMenu={!hasWBAccess && !isPresenter}
size={size}
{...{
hasWBAccess,
isPresenter,
size,
darkTheme
}}
/>
</Cursors>
</>

2
bigbluebutton-html5/imports/ui/components/whiteboard/container.jsx
View File

@ -85,6 +85,7 @@ export default withTracker(({
svgUri,
podId,
presentationId,
darkTheme,
}) => {
const shapes = getShapes(whiteboardId, curPageId, intl);
const curPres = getCurrentPres();
@ -131,5 +132,6 @@ export default withTracker(({
numberOfSlides: PresentationToolbarService.getNumberOfSlides(podId, presentationId),
notifyNotAllowedChange,
notifyShapeNumberExceeded,
darkTheme,
};
})(WhiteboardContainer);