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

fix styles menu overlap on whiteboard toolbar

Browse Source
This commit is contained in:
KDSBrowne 2022-10-27 13:15:09 +00:00
parent a9fe2cf18d
commit 6c4797e814
2 changed files with 24 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,6 +7,7 @@ import {
colorGrayDark,
colorSuccess,
colorGrayLightest,
colorWhite,
} from '/imports/ui/stylesheets/styled-components/palette';
import {
borderSizeLarge,
@ -35,10 +36,19 @@ const Right = styled.div`
cursor: pointer;
position: absolute;
left: auto;
top: .5rem;
right: .5rem;
right: 0px;
z-index: 999;
> div {
background-color: ${colorWhite};
width: 50px;
height: 41px;
}
button {
margin-top: .45rem;
}
[dir="rtl"] & {
right: auto;
left : ${borderSize};

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

@ -292,6 +292,7 @@ export default function Whiteboard(props) {
const tdDelete = document.getElementById("TD-Delete");
const tdPrimaryTools = document.getElementById("TD-PrimaryTools");
const tdTools = document.getElementById("TD-Tools");
if (tdToolsDots && tdDelete && tdPrimaryTools) {
const size = props.height < SMALL_HEIGHT ? TOOLBAR_SMALL : TOOLBAR_LARGE;
tdToolsDots.style.height = `${size}px`;
@ -327,6 +328,15 @@ export default function Whiteboard(props) {
}, [isPanning]);
const onMount = (app) => {
const menu = document.getElementById("TD-Styles")?.parentElement;
if (menu) {
menu.style.position = `relative`;
menu.style.right = `48px`;
[...menu.children]
.sort((a,b)=> a?.id>b?.id?-1:1)
.forEach(n=> menu.appendChild(n));
}
app.setSetting('language', document.getElementsByTagName('html')[0]?.lang || 'en');
setTLDrawAPI(app);
props.setTldrawAPI(app);
@ -376,6 +386,8 @@ export default function Whiteboard(props) {
};
const onPatch = (e, t, reason) => {
if (reason && isPresenter && (reason.includes("zoomed") || reason.includes("panned"))) {
const camera = tldrawAPI.getPageState()?.camera;