From 3ba15a83dd8e1ea1760b850b7eff2ca7350c52e0 Mon Sep 17 00:00:00 2001
From: Ramon Souza <contato@ramonsouza.com>
Date: Fri, 4 Jun 2021 10:44:50 -0300
Subject: [PATCH] different navbar height for large fonts
---
bigbluebutton-html5/imports/startup/client/intl.jsx | 4 ++++
.../imports/ui/components/app/component.jsx | 8 +++++---
.../imports/ui/components/app/container.jsx | 1 +
.../components/layout/layout-manager/component.jsx | 13 +++++++++++--
4 files changed, 21 insertions(+), 5 deletions(-)
diff --git a/bigbluebutton-html5/imports/startup/client/intl.jsx b/bigbluebutton-html5/imports/startup/client/intl.jsx
index 235671f081..cb2d127b92 100644
--- a/bigbluebutton-html5/imports/startup/client/intl.jsx
+++ b/bigbluebutton-html5/imports/startup/client/intl.jsx
@@ -6,6 +6,7 @@ import Settings from '/imports/ui/services/settings';
import LoadingScreen from '/imports/ui/components/loading-screen/component';
import getFromUserSettings from '/imports/ui/services/users-settings';
import _ from 'lodash';
+import { Session } from 'meteor/session';
const propTypes = {
locale: PropTypes.string,
@@ -15,6 +16,7 @@ const propTypes = {
const DEFAULT_LANGUAGE = Meteor.settings.public.app.defaultSettings.application.fallbackLocale;
const RTL_LANGUAGES = ['ar', 'he', 'fa'];
+const LARGE_FONT_LANGUAGES = ['te', 'km'];
const defaultProps = {
locale: DEFAULT_LANGUAGE,
@@ -30,6 +32,8 @@ class IntlStartup extends Component {
document.body.parentNode.setAttribute('dir', 'ltr');
Settings.application.isRTL = false;
}
+ Session.set('isLargeFont', LARGE_FONT_LANGUAGES.includes(localeName.substring(0, 2)));
+ window.dispatchEvent(new Event('localeChanged'));
Settings.save();
}
diff --git a/bigbluebutton-html5/imports/ui/components/app/component.jsx b/bigbluebutton-html5/imports/ui/components/app/component.jsx
index 5414528214..d8aaa0d486 100755
--- a/bigbluebutton-html5/imports/ui/components/app/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/app/component.jsx
@@ -28,7 +28,7 @@ import { withDraggableContext } from '../media/webcam-draggable-overlay/context'
import { styles } from './styles';
import { makeCall } from '/imports/ui/services/api';
import ConnectionStatusService from '/imports/ui/components/connection-status/service';
-import { NAVBAR_HEIGHT } from '/imports/ui/components/layout/layout-manager/component';
+import { NAVBAR_HEIGHT, LARGE_NAVBAR_HEIGHT } from '/imports/ui/components/layout/layout-manager/component';
const MOBILE_MEDIA = 'only screen and (max-width: 40em)';
const APP_CONFIG = Meteor.settings.public.app;
@@ -267,15 +267,17 @@ class App extends Component {
}
renderNavBar() {
- const { navbar } = this.props;
+ const { navbar, isLargeFont } = this.props;
if (!navbar) return null;
+ const realNavbarHeight = isLargeFont ? LARGE_NAVBAR_HEIGHT : NAVBAR_HEIGHT;
+
return (
<header
className={styles.navbar}
style={{
- height: NAVBAR_HEIGHT,
+ height: realNavbarHeight,
}}
>
{navbar}
diff --git a/bigbluebutton-html5/imports/ui/components/app/container.jsx b/bigbluebutton-html5/imports/ui/components/app/container.jsx
index ede6446121..204a6c26e7 100755
--- a/bigbluebutton-html5/imports/ui/components/app/container.jsx
+++ b/bigbluebutton-html5/imports/ui/components/app/container.jsx
@@ -124,6 +124,7 @@ export default injectIntl(withModalMounter(withTracker(({ intl, baseControls })
randomlySelectedUser,
currentUserId: currentUser.userId,
isPresenter: currentUser.presenter,
+ isLargeFont: Session.get('isLargeFont')
};
})(AppContainer)));
diff --git a/bigbluebutton-html5/imports/ui/components/layout/layout-manager/component.jsx b/bigbluebutton-html5/imports/ui/components/layout/layout-manager/component.jsx
index 8ba2e9e276..d90d6ea385 100644
--- a/bigbluebutton-html5/imports/ui/components/layout/layout-manager/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/layout/layout-manager/component.jsx
@@ -25,6 +25,7 @@ const NOTE_MAX_WIDTH = 800;
const WAITING_MIN_WIDTH = 340;
const WAITING_MAX_WIDTH = 800;
const NAVBAR_HEIGHT = 112;
+const LARGE_NAVBAR_HEIGHT = 170;
const ACTIONSBAR_HEIGHT = isMobile ? 50 : 42;
const BREAKOUT_MIN_WIDTH = 320;
const BREAKOUT_MAX_WIDTH = 400;
@@ -109,6 +110,10 @@ class LayoutManagerComponent extends Component {
window.addEventListener('fullscreenchange', () => {
setTimeout(() => this.setLayoutSizes(), 200);
});
+
+ window.addEventListener('localeChanged', () => {
+ setTimeout(() => this.setLayoutSizes(), 200);
+ });
}
componentDidUpdate(prevProps) {
@@ -763,12 +768,15 @@ class LayoutManagerComponent extends Component {
secondPanel = newBreakoutRoomSize;
}
- const mediaAreaHeight = windowHeight() - (NAVBAR_HEIGHT + ACTIONSBAR_HEIGHT) - 10;
+ const isLargeFont = Session.get('isLargeFont');
+ const realNavbarHeight = isLargeFont ? LARGE_NAVBAR_HEIGHT : NAVBAR_HEIGHT;
+
+ const mediaAreaHeight = windowHeight() - (realNavbarHeight + ACTIONSBAR_HEIGHT) - 10;
const mediaAreaWidth = windowWidth() - (firstPanel.width + secondPanel.width);
const newMediaBounds = {
width: mediaAreaWidth,
height: mediaAreaHeight,
- top: NAVBAR_HEIGHT,
+ top: realNavbarHeight,
left: firstPanel.width + secondPanel.width,
};
@@ -838,6 +846,7 @@ export {
WAITING_MIN_WIDTH,
WAITING_MAX_WIDTH,
NAVBAR_HEIGHT,
+ LARGE_NAVBAR_HEIGHT,
ACTIONSBAR_HEIGHT,
WEBCAMSAREA_MIN_PERCENT,
WEBCAMSAREA_MAX_PERCENT,
--
GitLab