From 96edb582f7b7cfe1838b4831b3fd957c41a7823b Mon Sep 17 00:00:00 2001
From: Ramon Souza <contato@ramonsouza.com>
Date: Tue, 1 Jun 2021 14:45:16 -0300
Subject: [PATCH] different navbar height for large fonts
---
bigbluebutton-html5/imports/startup/client/intl.jsx | 3 +++
.../imports/ui/components/app/component.jsx | 8 +++++---
.../ui/components/layout/layout-manager/component.jsx | 11 ++++++++---
3 files changed, 16 insertions(+), 6 deletions(-)
diff --git a/bigbluebutton-html5/imports/startup/client/intl.jsx b/bigbluebutton-html5/imports/startup/client/intl.jsx
index 235671f081..e80ac40338 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,7 @@ 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)));
Settings.save();
}
diff --git a/bigbluebutton-html5/imports/ui/components/app/component.jsx b/bigbluebutton-html5/imports/ui/components/app/component.jsx
index 5414528214..66f9c1d896 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;
@@ -268,14 +268,16 @@ class App extends Component {
renderNavBar() {
const { navbar } = this.props;
-
if (!navbar) return null;
+ const isLargeFont = Session.get('isLargeFont');
+ 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/layout/layout-manager/component.jsx b/bigbluebutton-html5/imports/ui/components/layout/layout-manager/component.jsx
index 0a446b2df6..ebc158930b 100644
--- a/bigbluebutton-html5/imports/ui/components/layout/layout-manager/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/layout/layout-manager/component.jsx
@@ -24,7 +24,8 @@ const NOTE_MIN_WIDTH = 340;
const NOTE_MAX_WIDTH = 800;
const WAITING_MIN_WIDTH = 340;
const WAITING_MAX_WIDTH = 800;
-const NAVBAR_HEIGHT = 170;
+const LARGE_NAVBAR_HEIGHT = 170;
+const NAVBAR_HEIGHT = 112;
const ACTIONSBAR_HEIGHT = isMobile ? 50 : 42;
const BREAKOUT_MIN_WIDTH = 320;
const BREAKOUT_MAX_WIDTH = 400;
@@ -763,12 +764,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 +842,7 @@ export {
WAITING_MIN_WIDTH,
WAITING_MAX_WIDTH,
NAVBAR_HEIGHT,
+ LARGE_NAVBAR_HEIGHT,
ACTIONSBAR_HEIGHT,
WEBCAMSAREA_MIN_PERCENT,
WEBCAMSAREA_MAX_PERCENT,
--
GitLab