diff --git a/bigbluebutton-html5/client/stylesheets/toggleSwitch.css b/bigbluebutton-html5/client/stylesheets/toggleSwitch.css
index ee3766cb2e55e989f40cf39c5a06873a0b684d70..afb10cd298a5b146f17e02231ebd5828bdc92548 100644
--- a/bigbluebutton-html5/client/stylesheets/toggleSwitch.css
+++ b/bigbluebutton-html5/client/stylesheets/toggleSwitch.css
@@ -44,6 +44,10 @@
transition: all calc(var(--enableAnimation) * 0.2s) ease;
}
+.react-toggle-track:dir(rtl) {
+ width: 4rem;
+}
+
.react-toggle--checked .react-toggle-track {
background-color: #008081;
}
@@ -59,6 +63,10 @@
transition: opacity calc(var(--enableAnimation) * 0.25s) ease;
}
+.react-toggle-track-check:dir(rtl) {
+ left: 0.8rem;
+}
+
.react-toggle--checked .react-toggle-track-check {
opacity: 1;
transition: opacity calc(var(--enableAnimation) * 0.25s) ease;
@@ -75,6 +83,10 @@
transition: opacity calc(var(--enableAnimation) * 0.25s) ease;
}
+.react-toggle-track-x:dir(rtl) {
+ left: 2.2rem;
+}
+
.react-toggle--checked .react-toggle-track-x {
opacity: 0;
}
@@ -98,6 +110,10 @@
box-shadow: -2px 0px 10px -1px rgba(0,0,0,0.4);
}
+.react-toggle--checked:dir(rtl) .react-toggle-thumb:dir(rtl) {
+ left: 2.6rem;
+}
+
.react-toggle--focus .react-toggle-thumb {
box-shadow: 0px 0px 2px 3px #0F70D7;
}
diff --git a/bigbluebutton-html5/imports/startup/client/intl.jsx b/bigbluebutton-html5/imports/startup/client/intl.jsx
index 0918cfa8d2b9fcbbec51496136df40b3419abd06..37bc4600f0a6695aa86efc4e56813e1237c77ad5 100644
--- a/bigbluebutton-html5/imports/startup/client/intl.jsx
+++ b/bigbluebutton-html5/imports/startup/client/intl.jsx
@@ -63,6 +63,8 @@ const propTypes = {
const DEFAULT_LANGUAGE = Meteor.settings.public.app.defaultSettings.application.locale;
+const RTL_LANGUAGES = ['ar', 'he', 'fa'];
+
const defaultProps = {
locale: DEFAULT_LANGUAGE,
};
@@ -111,19 +113,29 @@ class IntlStartup extends Component {
.then(({ messages, normalizedLocale }) => {
const dasherizedLocale = normalizedLocale.replace('_', '-');
this.setState({ messages, fetching: false, normalizedLocale: dasherizedLocale }, () => {
- Settings.application.locale = dasherizedLocale;
- Settings.save();
+ this.saveLocale(dasherizedLocale);
});
})
.catch(() => {
this.setState({ fetching: false, normalizedLocale: null }, () => {
- Settings.application.locale = DEFAULT_LANGUAGE;
- Settings.save();
+ this.saveLocale(DEFAULT_LANGUAGE);
});
});
});
}
+ saveLocale(localeName) {
+ Settings.application.locale = localeName;
+ if (RTL_LANGUAGES.includes(localeName.substring(0,2))) {
+ document.body.parentNode.setAttribute('dir', 'rtl');
+ Settings.application.isRTL = true;
+ } else {
+ document.body.parentNode.setAttribute('dir', 'ltr');
+ Settings.application.isRTL = false;
+ }
+ Settings.save();
+ }
+
render() {
const { fetching, normalizedLocale, messages } = this.state;
const { children } = this.props;
diff --git a/bigbluebutton-html5/imports/ui/components/actions-bar/create-breakout-room/styles.scss b/bigbluebutton-html5/imports/ui/components/actions-bar/create-breakout-room/styles.scss
index 40030e5469c47e2c094c63f56856039808f0452c..1c19356f41634c6ec203bbcf84ffcd68fe0ee008 100644
--- a/bigbluebutton-html5/imports/ui/components/actions-bar/create-breakout-room/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/actions-bar/create-breakout-room/styles.scss
@@ -73,7 +73,10 @@ input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-i
font-size: var(--font-size-large);
@include mq($small-only) {
font-size: 2rem;
- margin-left: .5rem;
+ margin: 0 0 0 .5rem;
+ [dir="rtl"] & {
+ margin: 0 .5rem 0 0;
+ }
}
}
@@ -87,8 +90,12 @@ input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-i
color: var(--color-primary);
font-size: var(--font-size-small);
white-space: nowrap;
- margin-right: auto;
+ margin: 0 auto 0 0;
align-self: flex-end;
+
+ [dir="rtl"] & {
+ margin: 0 0 0 auto;
+ }
}
.freeJoinCheckbox {
@@ -101,7 +108,11 @@ input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-i
align-items: center;
font-size: var(--font-size-small);
& > * {
- margin-right: .5rem;
+ margin: 0 .5rem 0 0;
+
+ [dir="rtl"] & {
+ margin: 0 0 0 .5rem;
+ }
}
}
@@ -151,14 +162,15 @@ input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-i
.roomUserItem {
width: 11rem;
margin: 0;
- padding-top: .25rem;
- padding-bottom: .25rem;
- padding-left: .25rem;
- margin-right: 0;
+ padding: .25rem 0 .25rem .25rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
+
+ [dir="rtl"] & {
+ padding: .25rem .25rem .25rem 0;
+ }
}
.selectedItem {
@@ -254,15 +266,29 @@ input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-i
cursor: pointer;
height: 28px;
left: 0;
+ right : auto;
position: absolute;
top: 0;
width: 28px;
+
+ [dir="rtl"] & {
+ left : auto;
+ right: 0;
+ }
}
& label:after {
- border: 2px solid #fff;
- border-top: none;
- border-right: none;
+ border: {
+ style: solid;
+ color: #fff;
+ width: 2px;
+ right: {
+ style : none;
+ }
+ top: {
+ style: none;
+ }
+ }
content: "";
height: 6px;
left: 7px;
@@ -271,6 +297,20 @@ input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-i
top: 8px;
transform: rotate(-45deg);
width: 12px;
+
+ [dir="rtl"] & {
+ border: {
+ style: solid;
+ color: #fff;
+ width: 2px;
+ left: {
+ style : none;
+ }
+ top: {
+ style: none;
+ }
+ }
+ }
}
& input[type="checkbox"] {
diff --git a/bigbluebutton-html5/imports/ui/components/actions-bar/styles.scss b/bigbluebutton-html5/imports/ui/components/actions-bar/styles.scss
index 8dc4421e38db088ffc9fcc2434efdb0f4568acfd..2238f885d12646c179b8100351a5e93fac80885d 100755
--- a/bigbluebutton-html5/imports/ui/components/actions-bar/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/actions-bar/styles.scss
@@ -28,6 +28,12 @@
@include mq($small-only) {
bottom: var(--sm-padding-x);
left: var(--sm-padding-x);
+ right: auto;
+
+ [dir="rtl"] & {
+ left: auto;
+ right: var(--sm-padding-x);
+ }
}
}
@@ -35,6 +41,12 @@
position: absolute;
bottom: var(--sm-padding-x);
right: var(--sm-padding-x);
+ left: auto;
+
+ [dir="rtl"] & {
+ right: auto;
+ left: var(--sm-padding-x);
+ }
}
.centerWithActions {
diff --git a/bigbluebutton-html5/imports/ui/components/app/component.jsx b/bigbluebutton-html5/imports/ui/components/app/component.jsx
index fd5621054dd19bd12cea263454a4544d5cdf975b..9d57d5bc770118eb97bec012357c1563557c215b 100755
--- a/bigbluebutton-html5/imports/ui/components/app/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/app/component.jsx
@@ -258,7 +258,7 @@ class App extends Component {
<PollingContainer />
<ModalContainer />
<AudioContainer />
- <ToastContainer />
+ <ToastContainer rtl />
<ChatAlertContainer />
<WaitingNotifierContainer />
<LockNotifier />
diff --git a/bigbluebutton-html5/imports/ui/components/app/styles.scss b/bigbluebutton-html5/imports/ui/components/app/styles.scss
index e552643630ee0598e82f5c1ffaf46a7f8578052b..cf92fd45a82ef5b70227c3fef124762ea305aca2 100755
--- a/bigbluebutton-html5/imports/ui/components/app/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/app/styles.scss
@@ -95,7 +95,11 @@
}
.content{
- margin-left: var(--panel-margin-left);
+ margin:0 0 0 var(--panel-margin-left);
+
+ [dir="rtl"] & {
+ margin:0 var(--panel-margin-left) 0 0;
+ }
}
.userList {
@@ -187,7 +191,12 @@
order: 2;
flex-direction: row;
position: relative;
- margin-left: var(--panel-margin-right);
+ margin: 0 0 0 var(--panel-margin-right);
+
+ [dir="rtl"] & {
+ margin: 0 var(--panel-margin-right) 0 0;
+ }
+
@include mq($portrait) {
flex-direction: column;
}
diff --git a/bigbluebutton-html5/imports/ui/components/audio/audio-controls/styles.scss b/bigbluebutton-html5/imports/ui/components/audio/audio-controls/styles.scss
index 9742498e4bf5fab181189c7674a2aceed6320e66..702f765146bfd25adb75f2b88c60bb9a0c21877a 100755
--- a/bigbluebutton-html5/imports/ui/components/audio/audio-controls/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/audio/audio-controls/styles.scss
@@ -15,10 +15,22 @@
> :first-child {
margin-left: 0;
+ margin-right: inherit;
+
+ [dir="rtl"] & {
+ margin-left: inherit;
+ margin-right: 0;
+ }
}
> :last-child {
- margin-right: 0;
+ margin-left: inherit;
+ margin-right: 0;
+
+ [dir="rtl"] & {
+ margin-left: 0;
+ margin-right: inherit;
+ }
}
}
diff --git a/bigbluebutton-html5/imports/ui/components/audio/audio-modal/styles.scss b/bigbluebutton-html5/imports/ui/components/audio/audio-modal/styles.scss
index 3a5255305d0a954983413fd0a1f0fc1112ec25df..bbbefe01c00a664cd1f02f4f82f9d5a6b5abd097 100755
--- a/bigbluebutton-html5/imports/ui/components/audio/audio-modal/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/audio/audio-modal/styles.scss
@@ -2,7 +2,7 @@
@import "/imports/ui/components/modal/simple/styles";
:root {
- --audioDial-margin-left: 2rem;
+ --audioDial-margin-left: 2rem;
}
.header {
@@ -22,14 +22,27 @@
padding: 0.5rem 0;
.audioBtn:first-child {
- margin-right: 3rem;
+ margin: 0 3rem 0 0;
+
+ [dir="rtl"] & {
+ margin: 0 0 0 3rem;
+ }
@include mq($small-only) {
- margin-right: 1rem;
+ margin: 0 1rem 0 0;
+
+ [dir="rtl"] & {
+ margin: 0 0 0 1rem;
+ }
}
}
+
.audioBtn:only-child {
- margin-right: 0;
+ margin: inherit 0 inherit inherit;
+
+ [dir="rtl"] & {
+ margin: inherit!important inherit!important inherit!important 0;
+ }
}
}
@@ -107,7 +120,7 @@
color: #1b3c4b;
background-color: #f1f8ff;
box-shadow: none;
- border: 5px solid #f1f8ff;
+ border: 5px solid #f1f8ff;
font-size: 3.5rem;
@include mq($small-only) {
@@ -155,10 +168,11 @@
vertical-align: bottom;
content: "\2026"; /* ascii code for the ellipsis character */
width: 0;
- margin-right: 1.25em;
+ margin-right: 0.75em;
+ margin-left: 0.75em;
:global(.animationsEnabled) & {
- animation: ellipsis steps(4,end) 900ms infinite;
+ animation: ellipsis steps(4, end) 900ms infinite;
}
}
}
@@ -167,6 +181,7 @@
to {
width: 1.25em;
margin-right: 0;
+ margin-left: 0;
}
}
diff --git a/bigbluebutton-html5/imports/ui/components/audio/audio-settings/styles.scss b/bigbluebutton-html5/imports/ui/components/audio/audio-settings/styles.scss
index 62983124d14549ffec3b1f252b13681bab00a7d4..5b28ea63cb417ea7cce594ac739b2854cf171edb 100644
--- a/bigbluebutton-html5/imports/ui/components/audio/audio-settings/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/audio/audio-settings/styles.scss
@@ -29,12 +29,22 @@
display: flex;
flex-grow: 1;
flex-basis: 0;
- margin-right: 1rem;
+ margin: 0 1rem 0 0;
+
+ [dir="rtl"] & {
+ margin: 0 0 0 1rem;
+ }
&:last-child {
margin-right: 0;
- padding-right: 0.1rem;
- padding-left: 4rem;
+ margin-left: inherit;
+ padding: 0 0.1rem 0 4rem;
+
+ [dir="rtl"] & {
+ margin-right: inherit;
+ margin-left: 0;
+ padding: 0 4rem 0 0.1rem;
+ }
}
&.spacedLeft {
@@ -42,8 +52,14 @@
flex-grow: 1;
flex-basis: 0;
margin-right: 0;
- padding-right: 0.1rem;
- padding-left: 4rem;
+ margin-left: inherit;
+ padding: 0 0.1rem 0 4rem;
+
+ [dir="rtl"] & {
+ margin-right: inherit;
+ margin-left: 0;
+ padding: 0 4rem 0 0.1rem;
+ }
}
&:before {
@@ -52,12 +68,24 @@
flex-grow: 1;
flex-basis: 0;
margin-right: 1rem;
+ margin-left: inherit;
+
+ [dir="rtl"] & {
+ margin-right: inherit;
+ margin-left: 1rem;
+ }
}
&:last-child {
margin-right: 0;
+ margin-left: inherit;
padding-right: 0;
padding-left: 0;
+
+ [dir="rtl"] & {
+ margin-right: 0;
+ margin-left: inherit;
+ }
}
}
}
@@ -113,15 +141,29 @@
.verticalLine {
color: #f3f6f9;
border-left: 1px solid;
+ border-right: none;
height: 5rem;
+
+ [dir="rtl"] & {
+ border-left: none;
+ border-right: 1px solid;
+ }
}
.backBtn {
- margin-right: 0.5rem;
+ margin: 0 0.5rem 0 0;
border: none;
+ [dir="rtl"] & {
+ margin: 0 0 0 0.5rem;
+ }
+
@include mq($small-only) {
- margin-right: auto;
+ margin:0 auto 0 0;
+
+ [dir="rtl"] & {
+ margin:0 0 0 auto;
+ }
}
}
diff --git a/bigbluebutton-html5/imports/ui/components/audio/echo-test/styles.scss b/bigbluebutton-html5/imports/ui/components/audio/echo-test/styles.scss
index a4762035ba616b4a267b9749e4028e8ee3bf26fe..dd266f725f456ffd0d21a039ad534112de36f624 100644
--- a/bigbluebutton-html5/imports/ui/components/audio/echo-test/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/audio/echo-test/styles.scss
@@ -11,10 +11,18 @@
}
&:first-child {
- margin-right: 3rem;
+ margin: 0 3rem 0 0;
+
+ [dir="rtl"] & {
+ margin: 0 0 0 3rem;
+ }
@include mq($small-only) {
- margin-right: 1rem;
+ margin: 0 1rem 0 0;
+
+ [dir="rtl"] & {
+ margin: 0 0 0 1rem;
+ }
}
}
diff --git a/bigbluebutton-html5/imports/ui/components/audio/help/styles.scss b/bigbluebutton-html5/imports/ui/components/audio/help/styles.scss
index 43f81fcff866e9ab7d51edf7a596354f920a8593..97e7b5202eb2c275fa18c7c19cc44b389ee3082c 100644
--- a/bigbluebutton-html5/imports/ui/components/audio/help/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/audio/help/styles.scss
@@ -13,10 +13,22 @@
.backBtn {
margin-right: 0.5rem;
+ margin-left: inherit;
border: none;
+ [dir="rtl"] & {
+ margin-right: inherit;
+ margin-left: 0.5rem;
+ }
+
@include mq($small-only) {
margin-right: auto;
+ margin-left: inherit;
+
+ [dir="rtl"] & {
+ margin-right: inherit;
+ margin-left: auto;
+ }
}
}
diff --git a/bigbluebutton-html5/imports/ui/components/audio/permissions-overlay/styles.scss b/bigbluebutton-html5/imports/ui/components/audio/permissions-overlay/styles.scss
index d629d4f29404737c26d7b9e0be6a15e267cc6816..e6fe67e30a4d8d56e867da0ee13053a4832080df 100644
--- a/bigbluebutton-html5/imports/ui/components/audio/permissions-overlay/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/audio/permissions-overlay/styles.scss
@@ -22,12 +22,18 @@
&:after {
top: var(--arrow-top);
left: var(--arrow-left);
+ right: auto;
font-size: 20px;
display: block;
font-family: 'bbb-icons';
content: "\E906";
position: relative;
+ [dir="rtl"] & {
+ left: auto;
+ right: var(--arrow-left);
+ }
+
:global(.animationsEnabled) & {
animation: bounce 2s infinite;
}
@@ -36,39 +42,87 @@
:global(.browser-edge) &:after {
top: var(--arrow-top-edge);
left: var(--arrow-left-edge);
+ right: auto;
font-size: 20px;
:global(.animationsEnabled) & {
animation: bounceRotate 2s infinite;
}
+
+ [dir="rtl"] & {
+ left: auto;
+ right: var(--arrow-left-edge);
+ }
}
}
@mixin positionHint() {
:global(.browser-edge) & {
left: var(--position-left-edge);
+ right: auto;
bottom: var(--position-bottom-edge);
+
+ [dir="rtl"] & {
+ left: auto;
+ right: var(--position-left-edge);
+ }
}
:global(.browser-firefox) & {
top: var(--position-top-firefox);
left: var(--position-left-firefox);
+ right: auto;
+
+ [dir="rtl"] & {
+ right: var(--position-left-firefox-left-edge);
+ left: auto;
+ }
}
:global(.browser-chrome) & {
top: var(--position-top-chrome);
left: var(--position-left-chrome);
+ right: auto;
+
+ [dir="rtl"] & {
+ left: auto;
+ right: var(--position-left-chrome);
+ }
}
:global(.browser-safari) & {
top: var(--position-top-safari);
@include mq($safari1280) {
left: var(--position-left-safari-1280);
+ right: auto;
+
+ [dir="rtl"] & {
+ left: auto;
+ right: var(--position-left-safari-1280);
+ }
}
@include mq($safari1440) {
left: var(--position-left-safari-1440);
+ right: auto;
+
+ [dir="rtl"] & {
+ right: var(--position-left-safari-1440);
+ left: auto;
+ }
}
@include mq($safari1680) {
left: var(--position-left-safari-1680);
+ right: auto;
+
+ [dir="rtl"] & {
+ right: var(--position-left-safari-1680);
+ left: auto;
+ }
}
@include mq($safari1920) {
left: var(--position-left-safari-1920);
+ right: auto;
+
+ [dir="rtl"] & {
+ right: var(--position-left-safari-1920);
+ left: auto;
+ }
}
}
}
@@ -99,10 +153,14 @@
color: #fff;
font-size: 16px;
font-weight: 400;
- padding-left: var(--jumbo-padding-x);
+ padding: 0 0 0 var(--jumbo-padding-x);
line-height: 18px;
width: 340px;
+ [dir="rtl"] & {
+ padding-right: 0 var(--jumbo-padding-x) 0 0;
+ }
+
small {
display: block;
font-size: 12px;
diff --git a/bigbluebutton-html5/imports/ui/components/breakout-room/styles.scss b/bigbluebutton-html5/imports/ui/components/breakout-room/styles.scss
index 470a6076d36f15529b5c6946f76b0fbbdd89e162..c51c62b65f728df2626bf745477fe9f75222d513 100644
--- a/bigbluebutton-html5/imports/ui/components/breakout-room/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/breakout-room/styles.scss
@@ -24,12 +24,26 @@
.header {
position: relative;
- margin-bottom: 2rem;
- margin-right: auto;
+ margin: 0 auto 2rem 0;
padding-left: 0;
+ padding-right: inherit;
+
+ [dir="rtl"] & {
+ margin: 0 0 2rem auto;
+ padding-left: inherit;
+ padding-right: 0;
+ }
> i {
color: var(--color-gray-dark);
+
+ [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);
+ }
}
}
@@ -73,6 +87,7 @@
position: fixed;
top: 0;
left: 0;
+ right: auto;
z-index: 100;
display: flex;
justify-content: center;
@@ -80,6 +95,11 @@
height: 100%;
width: 100%;
color: var(--color-gray);
+
+ [dir="rtl"] & {
+ left: auto;
+ right: 0;
+ }
}
.connectingAnimation{
@@ -89,7 +109,11 @@
vertical-align: bottom;
content: "\2026"; /* ascii code for the ellipsis character */
width: 0;
- margin-right: 1.25em;
+ margin: 0 1.25em 0 0;
+
+ [dir="rtl"] & {
+ margin: 0 0 0 1.25em;
+ }
:global(.animationsEnabled) & {
animation: ellipsis steps(4,end) 900ms infinite;
@@ -101,6 +125,7 @@
to {
width: 1.25em;
margin-right: 0;
+ margin-left: 0;
}
}
@@ -111,5 +136,9 @@
}
.usersAssignedNumberLabel {
- margin-left: .25rem;
+ margin: 0 0 0 .25rem;
+
+ [dir="rtl"] & {
+ margin: 0 .25em 0 0;
+ }
}
\ No newline at end of file
diff --git a/bigbluebutton-html5/imports/ui/components/button/styles.scss b/bigbluebutton-html5/imports/ui/components/button/styles.scss
index f4d8fa85810979d68d11fba5d3170ccda5da9ae3..31063b282ceb34eec443b9e2009878e2b48ff1fd 100755
--- a/bigbluebutton-html5/imports/ui/components/button/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/button/styles.scss
@@ -150,13 +150,20 @@
.buttonWrapper.sm & {
display: inline-block;
- margin-top: 0;
- margin-left: var(--btn-spacing);
+ margin: 0 0 0var(--btn-spacing);
+
+ [dir="rtl"] & {
+ margin:0 var(--btn-spacing) 0 0;
+ }
}
& + .icon,
& + .button {
- margin-left: var(--btn-spacing);
+ margin: 0 0 0 var(--btn-spacing);
+
+ [dir="rtl"] & {
+ margin: 0 var(--btn-spacing) 0 0;
+ }
}
&:hover {
opacity: .5;
@@ -183,7 +190,11 @@
}
& + .label {
- margin-left: var(--btn-spacing);
+ margin: 0 0 0 var(--btn-spacing);
+
+ [dir="rtl"] & {
+ margin: 0 var(--btn-spacing) 0 0;
+ }
}
.buttonWrapper:hover & {
opacity: .75;
diff --git a/bigbluebutton-html5/imports/ui/components/chat/component.jsx b/bigbluebutton-html5/imports/ui/components/chat/component.jsx
index a243df8eab02c83daddc1d953c79bd317bbac1ce..f49c1451ab79bf2e54d411cd348c4d7c938880bc 100755
--- a/bigbluebutton-html5/imports/ui/components/chat/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/chat/component.jsx
@@ -5,7 +5,7 @@ import injectWbResizeEvent from '/imports/ui/components/presentation/resize-wrap
import Button from '/imports/ui/components/button/component';
import { Session } from 'meteor/session';
import withShortcutHelper from '/imports/ui/components/shortcut-help/service';
-import { styles } from './styles';
+import { styles } from './styles.scss';
import MessageForm from './message-form/component';
import MessageList from './message-list/component';
import ChatDropdown from './chat-dropdown/component';
diff --git a/bigbluebutton-html5/imports/ui/components/chat/message-form/component.jsx b/bigbluebutton-html5/imports/ui/components/chat/message-form/component.jsx
index 120ef17a7168af1818a79f5b2d718acf2334956c..682cf6451a837ee7f6e0f5f0b852b013a2b36612 100755
--- a/bigbluebutton-html5/imports/ui/components/chat/message-form/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/chat/message-form/component.jsx
@@ -3,7 +3,7 @@ import { defineMessages, injectIntl } from 'react-intl';
import cx from 'classnames';
import TextareaAutosize from 'react-autosize-textarea';
import browser from 'browser-detect';
-import { styles } from './styles';
+import { styles } from './styles.scss';
import Button from '../../button/component';
const propTypes = {
diff --git a/bigbluebutton-html5/imports/ui/components/chat/message-form/styles.scss b/bigbluebutton-html5/imports/ui/components/chat/message-form/styles.scss
index 0efaa5db080d159f916ce3875a43e8ab2ffd24d0..af446e7709680d8b4bd1a9e49d0577e460ed4243 100755
--- a/bigbluebutton-html5/imports/ui/components/chat/message-form/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/chat/message-form/styles.scss
@@ -86,9 +86,18 @@
}
.sendButton {
- margin-left: var(--sm-padding-x);
+ margin:0 0 0 var(--sm-padding-x);
align-self: center;
font-size: 0.9rem;
+
+ [dir="rtl"] & {
+ margin: 0 var(--sm-padding-x) 0 0;
+ -webkit-transform: scale(-1, 1);
+ -moz-transform: scale(-1, 1);
+ -ms-transform: scale(-1, 1);
+ -o-transform: scale(-1, 1);
+ transform: scale(-1, 1);
+ }
}
.info {
@@ -97,6 +106,10 @@
text-align: right;
padding: var(--border-size) 0;
+ [dir="rtl"] & {
+ text-align: left;
+ }
+
&:before {
content: "\00a0"; // non-breaking space
}
diff --git a/bigbluebutton-html5/imports/ui/components/chat/message-list/message-list-item/styles.scss b/bigbluebutton-html5/imports/ui/components/chat/message-list/message-list-item/styles.scss
index 6b1d169defb39895638c02366ced58fd9b3038c8..7c63422e8057c0b78780070fe93a96044fbceeb9 100755
--- a/bigbluebutton-html5/imports/ui/components/chat/message-list/message-list-item/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/chat/message-list/message-list-item/styles.scss
@@ -19,8 +19,11 @@
flex-flow: row;
flex: 1;
position: relative;
- margin-left: var(--border-size);
- margin-top: var(--border-size);
+ margin:var(--border-size) 0 0 var(--border-size);
+
+ [dir="rtl"] & {
+ margin: var(--border-size) var(--border-size) 0 0;
+ }
}
.systemMessage {
@@ -35,7 +38,11 @@
flex-basis: 2.25rem;
flex-shrink: 0;
flex-grow: 0;
- margin-right: calc(var(--line-height-computed) / 2);
+ margin: 0 calc(var(--line-height-computed) / 2) 0 0;
+
+ [dir="rtl"] & {
+ margin: 0 0 0 calc(var(--line-height-computed) / 2);
+ }
}
.avatar {
@@ -83,9 +90,15 @@
.logout {
text-transform: capitalize;
font-style: italic;
+
& > span {
text-align: right;
- padding-right: .1rem;
+ padding: 0 .1rem 0 0;
+
+ [dir="rtl"] & {
+ text-align: left;
+ padding: 0 0 0 .1rem;
+ }
}
}
@@ -106,7 +119,11 @@
color: var(--color-gray-light);
text-transform: uppercase;
font-size: 75%;
- margin-left: calc(var(--line-height-computed) / 2);
+ margin: 0 0 0 calc(var(--line-height-computed) / 2);
+
+ [dir="rtl"] & {
+ margin: 0 calc(var(--line-height-computed) / 2) 0 0;
+ }
> span {
vertical-align: sub;
diff --git a/bigbluebutton-html5/imports/ui/components/chat/message-list/styles.scss b/bigbluebutton-html5/imports/ui/components/chat/message-list/styles.scss
index 41b19036093c469528d7859cd47686a8b7efad57..6cd21c3684ceadd47676d57fd65bbfdfc6d889af 100644
--- a/bigbluebutton-html5/imports/ui/components/chat/message-list/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/chat/message-list/styles.scss
@@ -15,6 +15,13 @@
margin-right: calc(-1 * var(--md-padding-x));
padding-bottom: var(--md-padding-x);
margin-bottom: calc(-1 * var(--md-padding-x));
+
+ [dir="rtl"] & {
+ padding-right: var(--md-padding-x);
+ margin-right: calc(-1 * var(--md-padding-x));
+ padding-left: var(--sm-padding-y);
+ margin-left: calc(-1 * var(--md-padding-x));
+ }
}
.messageList {
@@ -22,10 +29,16 @@
flex-flow: column;
flex-grow: 1;
flex-shrink: 1;
- margin-right: auto;
- padding-right: var(--md-padding-x);
+ margin: 0 auto 0 0;
+ right: 0 var(--md-padding-x) 0 0;
padding-top: 0;
width: 100%;
+
+ [dir="rtl"] & {
+ margin: 0 0 0 auto;
+ padding: 0 0 0 var(--md-padding-x);
+ }
+
&:after {
content: "";
display: block;
diff --git a/bigbluebutton-html5/imports/ui/components/chat/styles.scss b/bigbluebutton-html5/imports/ui/components/chat/styles.scss
index 08ffa1f092e41f2272b5d6c7699e78739cc989ec..0883508cf25f4e64987e8789f97392a07745ef7a 100755
--- a/bigbluebutton-html5/imports/ui/components/chat/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/chat/styles.scss
@@ -53,11 +53,25 @@
display: block;
margin: var(--border-size-large);
margin-bottom: var(--border-size);
- padding-left: 0px;
+ padding-left: 0;
+ padding-right: inherit;
+
+ [dir="rtl"] & {
+ padding-left: inherit;
+ padding-right: 0;
+ }
> i {
color: var(--color-gray-dark);
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 {
diff --git a/bigbluebutton-html5/imports/ui/components/closed-captions/styles.scss b/bigbluebutton-html5/imports/ui/components/closed-captions/styles.scss
index 2ce5b6a4fb2393c8e3a0ff4cc67bea88b8b4ba29..53f4371003caefa37f9ef98592e25a4bf2f12371 100644
--- a/bigbluebutton-html5/imports/ui/components/closed-captions/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/closed-captions/styles.scss
@@ -25,5 +25,9 @@
height: 20px;
margin-top: 0px;
margin-bottom: 0px;
- padding-left: 20px;
+ padding: 0 0 0 20px;
+
+ [dir="rtl"] & {
+ padding: 0 20px 0 0;
+ }
}
diff --git a/bigbluebutton-html5/imports/ui/components/dropdown/list/styles.scss b/bigbluebutton-html5/imports/ui/components/dropdown/list/styles.scss
index 01682827335f7615c7fa952f2de930742b3da1ba..c4caf291afa428e0958a6b7230f6d4a3c107ad2c 100755
--- a/bigbluebutton-html5/imports/ui/components/dropdown/list/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/dropdown/list/styles.scss
@@ -12,6 +12,10 @@
overflow-wrap: break-word;
white-space: pre-line;
+ [dir="rtl"] & {
+ text-align: right;
+ }
+
@include mq($small-only) {
font-size: calc(var(--font-size-large) * 1.1);
padding: var(--line-height-computed);
@@ -86,6 +90,13 @@
margin-right: -.25rem;
padding-left: .25rem;
padding-right: .25rem;
+
+ [dir="rtl"] & {
+ margin-right: -.25rem;
+ margin-left: -.25rem;
+ padding-right: .25rem;
+ padding-left: .25rem;
+ }
}
.horizontalList & {
@@ -123,9 +134,13 @@
.iconRight,
.itemIcon {
- margin-right: calc(var(--line-height-computed) / 2);
+ margin: 0 calc(var(--line-height-computed) / 2) 0 0;
color: var(--color-text);
flex: 0 0;
+
+ [dir="rtl"] & {
+ margin: 0 0 0 calc(var(--line-height-computed) / 2);
+ }
}
.iconRight {
@@ -133,6 +148,16 @@
margin-left: 1rem;
font-size: 12px;
line-height: 16px;
+
+ [dir="rtl"] & {
+ margin-left: 0;
+ margin-right: 1rem;
+ -webkit-transform: scale(-1, 1);
+ -moz-transform: scale(-1, 1);
+ -ms-transform: scale(-1, 1);
+ -o-transform: scale(-1, 1);
+ transform: scale(-1, 1);
+ }
}
.itemLabel {
diff --git a/bigbluebutton-html5/imports/ui/components/dropdown/styles.scss b/bigbluebutton-html5/imports/ui/components/dropdown/styles.scss
index b7db62dbf66d90c062ea4536738f64873a24d82b..1a6e4ba70413a9fd09706223d7d89357205678f3 100755
--- a/bigbluebutton-html5/imports/ui/components/dropdown/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/dropdown/styles.scss
@@ -9,6 +9,9 @@
--dropdown-caret-width: 12px;
--dropdown-caret-height: 8px;
+
+ --rtl-caret-offset: -0.4375rem;
+ --rtl-content-offset: 10.75rem;
}
.dropdown {
@@ -30,6 +33,10 @@
border: 0;
padding: calc(var(--line-height-computed) / 2);
+ [dir="rtl"] & {
+ right: var(--rtl-content-offset);
+ }
+
&:after,
&:before {
content: '';
@@ -136,6 +143,11 @@
border-bottom: var(--dropdown-caret-height) solid var(--dropdown-bg);
margin-top: calc(var(--dropdown-caret-height) * -1);
top: 0;
+
+ [dir="rtl"] & {
+ right: 50%;
+ transform: translateX(-150%);
+ }
}
&:before {
@@ -156,10 +168,26 @@
margin-right: calc(var(--dropdown-caret-height) * -1);
top: 50%;
right: 0;
+
+ [dir="rtl"] & {
+ left: 0;
+ border-left: 0;
+ border-right: var(--dropdown-caret-height) solid var(--dropdown-bg);
+ margin-left: calc(var(--dropdown-caret-height) * -1);
+ }
}
&:before {
+
+
border-left: var(--dropdown-caret-height) solid var(--caret-shadow-color);
+ border-right: 0;
+
+ [dir="rtl"] & {
+ transform: rotate(180deg);
+ border-left: 0;
+ border-right: var(--dropdown-caret-height) solid var(--caret-shadow-color);
+ }
}
}
@@ -176,10 +204,23 @@
margin-left: calc(var(--dropdown-caret-height) * -1);
top: 50%;
left: 0;
+
+ [dir="rtl"] & {
+ transform: rotate(180deg);
+ margin-right: calc(var(--dropdown-caret-height) * -1);
+ right: 1px;
+ }
}
&:before {
border-right: var(--dropdown-caret-height) solid var(--caret-shadow-color);
+ border-left: 0;
+
+ [dir="rtl"] & {
+ right: var(--rtl-caret-offset);
+ border: none;
+ margin: 0;
+ }
}
}
@@ -188,6 +229,10 @@
&:before {
left: 50%;
margin-left: calc(var(--dropdown-caret-width) * -1);
+
+ [dir="rtl"] & {
+ margin-right: calc(var(--dropdown-caret-width) * -1);
+ }
}
}
@@ -195,6 +240,10 @@
transform: translateX(-100%);
left: 100%;
+ [dir="rtl"] & {
+ right: 100%;
+ }
+
&:after,
&:before {
right: calc(var(--dropdown-caret-width) / 2);
@@ -237,6 +286,11 @@
&:before {
top: auto;
bottom: calc(var(--dropdown-caret-width) / 2);
+
+ [dir="rtl"] & {
+ top: calc(var(--dropdown-caret-width) / 2);
+ bottom: auto;
+ }
}
}
@@ -245,7 +299,7 @@
@extend %horz-center-caret;
}
-.top-left {
+.top-left, [dir="rtl"] .top-right {
@extend %down-caret;
@extend %horz-right-caret;
min-width: 11.5rem;
@@ -260,17 +314,23 @@
@extend %horz-left-caret;
}
+[dir="rtl"] .top-left {
+ @extend %down-caret;
+ @extend %horz-left-caret;
+ transform: translateX(25%);
+}
+
.bottom {
@extend %up-caret;
@extend %horz-center-caret;
}
-.bottom-left {
+.bottom-left, [dir="rtl"] .bottom-right {
@extend %up-caret;
@extend %horz-right-caret;
}
-.bottom-right {
+.bottom-right, [dir="rtl"] .bottom-left {
@extend %up-caret;
@extend %horz-left-caret;
min-width: 10rem;
@@ -280,12 +340,12 @@
}
}
-.left {
+.left, [dir="rtl"] .right {
@extend %right-caret;
@extend %vert-center-caret;
}
-.left-top {
+.left-top, [dir="rtl"] .right-top {
@extend %right-caret;
@extend %vert-top-caret;
transform: translateX(-100%) translateY(0);
@@ -297,18 +357,34 @@
transform: translateX(-100%) translateY(0);
}
-.right {
+[dir="rtl"] .right-bottom {
+ @extend %right-caret;
+ @extend %vert-bottom-caret;
+ transform: translateX(-110%) translateY(0);
+}
+
+.right, [dir="rtl"] .left {
@extend %left-caret;
@extend %vert-center-caret;
}
-.right-top {
+.right-top {
@extend %left-caret;
@extend %vert-top-caret;
transform: translateX(100%) translateY(0);
}
-.right-bottom {
+[dir="rtl"] .right-top {
+ transform: translateX(-25%) translateY(0%);
+}
+
+[dir="rtl"] .left-top {
+ @extend %left-caret;
+ @extend %vert-top-caret;
+ transform: translateX(125%) translateY(-25%);
+}
+
+.right-bottom, [dir="rtl"] .left-bottom {
@extend %left-caret;
@extend %vert-bottom-caret;
transform: translateX(100%) translateY(0);
diff --git a/bigbluebutton-html5/imports/ui/components/end-meeting-confirmation/styles.scss b/bigbluebutton-html5/imports/ui/components/end-meeting-confirmation/styles.scss
index 494cec75407419aa87ced1ee8b589e9d5dd28683..0b008cd872b20e369b8edab227c5f8342e630936 100755
--- a/bigbluebutton-html5/imports/ui/components/end-meeting-confirmation/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/end-meeting-confirmation/styles.scss
@@ -30,7 +30,11 @@
.button {
padding-right: var(--jumbo-padding-y);
padding-left: var(--jumbo-padding-y);
- margin-right: var(--sm-padding-x);
+ margin: 0 var(--sm-padding-x) 0 0;
+
+ [dir="rtl"] & {
+ margin: 0 0 0 var(--sm-padding-x);
+ }
}
.description {
diff --git a/bigbluebutton-html5/imports/ui/components/external-video-player/styles.scss b/bigbluebutton-html5/imports/ui/components/external-video-player/styles.scss
index e278d6d4208f811c8abf5a5e47c19cbb29f199a2..5bb369f6e5cf3772faba2e0595a05f75f2a579ae 100644
--- a/bigbluebutton-html5/imports/ui/components/external-video-player/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/external-video-player/styles.scss
@@ -23,10 +23,13 @@ $icon-offset: -.4em;
a {
@include elementFocus(var(--color-primary));
- padding-bottom: var(--sm-padding-y);
- padding-left: var(--sm-padding-y);
+ padding: 0 0 var(--sm-padding-y) var(--sm-padding-y);
text-decoration: none;
display: block;
+
+ [dir="rtl"] & {
+ padding: 0 var(--sm-padding-y) var(--sm-padding-y) 0;
+ }
}
[class^="icon-bbb-"],
diff --git a/bigbluebutton-html5/imports/ui/components/lock-viewers/styles.scss b/bigbluebutton-html5/imports/ui/components/lock-viewers/styles.scss
index d853bc994fa7b827e4f86b8cac0465c61c0b3b7d..04eed241c25f952915b718069900c9dc01ee3d70 100755
--- a/bigbluebutton-html5/imports/ui/components/lock-viewers/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/lock-viewers/styles.scss
@@ -10,10 +10,16 @@
.title {
left: var(--title-position-left);
+ right: auto;
color: var(--color-gray-dark);
font-weight: bold;
font-size: var(--font-size-large);
text-align: center;
+
+ [dir="rtl"] & {
+ left: auto;
+ right: var(--title-position-left);
+ }
}
.form {
@@ -64,7 +70,11 @@
display: flex;
flex-grow: 1;
flex-basis: 0;
- margin-right: var(--md-padding-x);
+ margin: 0 var(--md-padding-x) 0 0;
+
+ [dir="rtl"] & {
+ margin: 0 0 0 var(--md-padding-x);
+ }
}
.label {
@@ -94,12 +104,18 @@
position: relative;
background-color: var(--color-white);
left: var(--closeBtn-position-left);
+ right: auto;
bottom: var(--closeBtn-position-left);
+ [dir="rtl"] & {
+ left: auto;
+ right: var(--closeBtn-position-left);
+ }
+
i {
color: var(--color-gray-light);
}
-
+
&:focus,
&:hover {
background-color: var(--color-gray-lighter);
diff --git a/bigbluebutton-html5/imports/ui/components/media/styles.scss b/bigbluebutton-html5/imports/ui/components/media/styles.scss
index 32e9171f0d6b71792bb00600d711f11ee9fa661e..333bc57b9819f0fd08f42abacc6243ec3680f4bb 100644
--- a/bigbluebutton-html5/imports/ui/components/media/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/media/styles.scss
@@ -54,6 +54,7 @@
position: fixed;
margin: 0;
bottom: .8rem;
+ left: auto;
right: .8rem;
width: var(--overlay-width);
min-width: var(--overlay-min-width);
@@ -61,5 +62,10 @@
height: calc(var(--overlay-width) / var(--overlay-ratio));
min-height: calc(var(--overlay-min-width) / var(--overlay-ratio));
max-height: calc(var(--overlay-max-width) / var(--overlay-ratio));
+
+ [dir="rtl"] & {
+ right: auto;
+ left: .8rem;
+ }
}
}
diff --git a/bigbluebutton-html5/imports/ui/components/meeting-ended/rating/styles.scss b/bigbluebutton-html5/imports/ui/components/meeting-ended/rating/styles.scss
index e411231c031350f16ffbfead1187708e878742bd..c972fafa90394076b400049685232cd644923475 100755
--- a/bigbluebutton-html5/imports/ui/components/meeting-ended/rating/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/meeting-ended/rating/styles.scss
@@ -16,15 +16,18 @@
> label {
float: right;
width: 1em;
- padding: 0 .05em;
+ padding: 0 .05em 0 .1rem;
overflow: hidden;
white-space: nowrap;
cursor: pointer;
font-size: 2.5rem;
- padding-left: .1rem;
color: black;
font-weight: 100;
+ [dir="rtl"] & {
+ padding: 0 .1rem 0 .05em;
+ }
+
@include mq($small-only) {
font-size: 2rem;
}
diff --git a/bigbluebutton-html5/imports/ui/components/modal/fullscreen/component.jsx b/bigbluebutton-html5/imports/ui/components/modal/fullscreen/component.jsx
index db4fc67d5b92a9ba61599a068a5d16ef2edd35fd..8eed87d99674b257d6b4c8a6b400cbbd6640a662 100644
--- a/bigbluebutton-html5/imports/ui/components/modal/fullscreen/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/modal/fullscreen/component.jsx
@@ -2,21 +2,37 @@ import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import Button from '/imports/ui/components/button/component';
import cx from 'classnames';
+import { defineMessages, injectIntl } from 'react-intl';
import ModalBase, { withModalState } from '../base/component';
import { styles } from './styles.scss';
+const intlMessages = defineMessages({
+ modalClose: {
+ id: 'app.modal.close',
+ description: 'Close',
+ },
+ modalCloseDescription: {
+ id: 'app.modal.close.description',
+ description: 'Disregards changes and closes the modal',
+ },
+ modalDone: {
+ id: 'app.modal.confirm',
+ description: 'Close',
+ },
+ modalDoneDescription: {
+ id: 'app.modal.confirm.description',
+ description: 'Disregards changes and closes the modal',
+ },
+});
+
const propTypes = {
title: PropTypes.string.isRequired,
confirm: PropTypes.shape({
callback: PropTypes.func.isRequired,
- label: PropTypes.string.isRequired,
- description: PropTypes.string,
disabled: PropTypes.bool,
}),
dismiss: PropTypes.shape({
callback: PropTypes.func,
- label: PropTypes.string.isRequired,
- description: PropTypes.string,
disabled: PropTypes.bool,
}),
preventClosing: PropTypes.bool,
@@ -25,13 +41,9 @@ const propTypes = {
const defaultProps = {
shouldCloseOnOverlayClick: false,
confirm: {
- label: 'Done',
- description: 'Saves changes and closes the modal',
disabled: false,
},
dismiss: {
- label: 'Cancel',
- description: 'Disregards changes and closes the modal',
disabled: false,
},
preventClosing: false,
@@ -45,6 +57,7 @@ class ModalFullscreen extends PureComponent {
render() {
const {
+ intl,
title,
confirm,
dismiss,
@@ -67,8 +80,8 @@ class ModalFullscreen extends PureComponent {
<Button
data-test="modalDismissButton"
className={styles.dismiss}
- label={dismiss.label}
- aria-label={`${dismiss.label} ${title}`}
+ label={intl.formatMessage(intlMessages.modalClose)}
+ aria-label={`${intl.formatMessage(intlMessages.modalClose)} ${title}`}
disabled={dismiss.disabled}
onClick={this.handleAction.bind(this, 'dismiss')}
aria-describedby="modalDismissDescription"
@@ -77,8 +90,8 @@ class ModalFullscreen extends PureComponent {
data-test="modalConfirmButton"
color="primary"
className={styles.confirm}
- label={confirm.label}
- aria-label={`${confirm.label} ${title}`}
+ label={intl.formatMessage(intlMessages.modalDone)}
+ aria-label={`${intl.formatMessage(intlMessages.modalDone)} ${title}`}
disabled={confirm.disabled}
onClick={this.handleAction.bind(this, 'confirm')}
aria-describedby="modalConfirmDescription"
@@ -88,8 +101,8 @@ class ModalFullscreen extends PureComponent {
<div className={styles.content}>
{this.props.children}
</div>
- <div id="modalDismissDescription" hidden>{dismiss.description}</div>
- <div id="modalConfirmDescription" hidden>{confirm.description}</div>
+ <div id="modalDismissDescription" hidden>{intl.formatMessage(intlMessages.modalCloseDescription)}</div>
+ <div id="modalConfirmDescription" hidden>{intl.formatMessage(intlMessages.modalDoneDescription)}</div>
</ModalBase>
);
}
@@ -98,4 +111,4 @@ class ModalFullscreen extends PureComponent {
ModalFullscreen.propTypes = propTypes;
ModalFullscreen.defaultProps = defaultProps;
-export default withModalState(ModalFullscreen);
+export default withModalState(injectIntl(ModalFullscreen));
diff --git a/bigbluebutton-html5/imports/ui/components/modal/simple/component.jsx b/bigbluebutton-html5/imports/ui/components/modal/simple/component.jsx
index 37f63a5abdf1d0aad868445cb4e1e5257df33d89..37b0592fb007d7bf8f0f9e2c9062c229b2e8e1af 100755
--- a/bigbluebutton-html5/imports/ui/components/modal/simple/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/modal/simple/component.jsx
@@ -2,15 +2,25 @@ import React, { Component } from 'react';
import PropTypes from 'prop-types';
import cx from 'classnames';
import Button from '/imports/ui/components/button/component';
+import { defineMessages, injectIntl } from 'react-intl';
import ModalBase, { withModalState } from '../base/component';
import { styles } from './styles';
+const intlMessages = defineMessages({
+ modalClose: {
+ id: 'app.modal.close',
+ description: 'Close',
+ },
+ modalCloseDescription: {
+ id: 'app.modal.close.description',
+ description: 'Disregards changes and closes the modal',
+ },
+});
+
const propTypes = {
title: PropTypes.string,
dismiss: PropTypes.shape({
- callback: PropTypes.func,
- label: PropTypes.string.isRequired,
- description: PropTypes.string,
+ callback: PropTypes.func
}),
};
@@ -18,10 +28,6 @@ const defaultProps = {
shouldCloseOnOverlayClick: true,
shouldShowCloseButton: true,
overlayClassName: styles.overlay,
- dismiss: {
- label: 'Cancel',
- description: 'Disregards changes and closes the modal',
- },
};
class ModalSimple extends Component {
@@ -36,6 +42,7 @@ class ModalSimple extends Component {
render() {
const {
+ intl,
title,
hideBorder,
dismiss,
@@ -62,8 +69,8 @@ class ModalSimple extends Component {
{shouldShowCloseButton ? (
<Button
className={styles.dismiss}
- label={dismiss.label}
- aria-label={`${dismiss.label} ${title || contentLabel}`}
+ label={intl.formatMessage(intlMessages.modalClose)}
+ aria-label={`${intl.formatMessage(intlMessages.modalClose)} ${title || contentLabel}`}
icon="close"
circle
hideLabel
@@ -75,7 +82,7 @@ class ModalSimple extends Component {
<div className={styles.content}>
{this.props.children}
</div>
- <div id="modalDismissDescription" hidden>{confirm.description}</div>
+ <div id="modalDismissDescription" hidden>{intl.formatMessage(intlMessages.modalCloseDescription)}</div>
</ModalBase>
);
}
@@ -84,4 +91,4 @@ class ModalSimple extends Component {
ModalSimple.propTypes = propTypes;
ModalSimple.defaultProps = defaultProps;
-export default withModalState(ModalSimple);
+export default withModalState(injectIntl(ModalSimple));
diff --git a/bigbluebutton-html5/imports/ui/components/nav-bar/recording-indicator/styles.scss b/bigbluebutton-html5/imports/ui/components/nav-bar/recording-indicator/styles.scss
index e43e8a7015304b1f14005896a9e3f6317cd3e02a..df74708ba018243476241121f951bf6e864850f4 100755
--- a/bigbluebutton-html5/imports/ui/components/nav-bar/recording-indicator/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/nav-bar/recording-indicator/styles.scss
@@ -66,12 +66,18 @@
color: var(--color-white);
font-size: var(--font-size-base);
padding: 0;
- margin: 0 0 0 var(--sm-padding-x);
+ margin-left: var(--sm-padding-x);
+ margin-right: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 30vw;
+ [dir="rtl"] & {
+ margin-left: 0;
+ margin-right: var(--sm-padding-x);
+ }
+
> [class^="icon-bbb-"] {
font-size: 75%;
}
diff --git a/bigbluebutton-html5/imports/ui/components/note/styles.scss b/bigbluebutton-html5/imports/ui/components/note/styles.scss
index 63f8f336873b438546134f040fb13fc19f74145a..7186bf114f0863b3167f03604a345af67c5b2bf3 100644
--- a/bigbluebutton-html5/imports/ui/components/note/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/note/styles.scss
@@ -21,10 +21,13 @@
a {
@include elementFocus(var(--color-primary));
- padding-bottom: var(--sm-padding-y);
- padding-left: var(--sm-padding-y);
+ padding: 0 0 var(--sm-padding-y) var(--sm-padding-y);
text-decoration: none;
display: block;
+
+ [dir="rtl"] & {
+ padding: 0 var(--sm-padding-y) var(--sm-padding-y) 0;
+ }
}
[class^="icon-bbb-"],
@@ -50,7 +53,11 @@
display: block;
margin: 4px;
margin-bottom: 2px;
- padding-left: 0px;
+ padding: inherit inherit inherit 0;
+
+ [dir="rtl"] & {
+ padding: inherit 0 inherit inherit;
+ }
> i {
color: black;
@@ -71,9 +78,13 @@
color: var(--color-gray);
font-size: var(--font-size-small);
font-style: italic;
- padding-top: var(--sm-padding-x);
- padding-left: var(--lg-padding-y);
+ padding: var(--sm-padding-x) 0 0 var(--sm-padding-x);
text-align: left;
+
+ [dir="rtl"] & {
+ padding-right: var(--lg-padding-y) var(--lg-padding-y) 0 0;
+ text-align: right;
+ }
}
}
diff --git a/bigbluebutton-html5/imports/ui/components/poll/live-result/styles.scss b/bigbluebutton-html5/imports/ui/components/poll/live-result/styles.scss
index dda3147bd45bf603fa76e5ff6a203e43d1e824b2..442e4cfbfdee2d18988d313878f82e2273796426 100644
--- a/bigbluebutton-html5/imports/ui/components/poll/live-result/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/poll/live-result/styles.scss
@@ -26,8 +26,14 @@
position: relative;
flex: 1 1 auto;
border-left: 1px solid var(--color-gray-lighter);
+ border-right : none;
width: 100%;
height: 100%;
+
+ [dir="rtl"] & {
+ border-left: none;
+ border-right: 1px solid var(--color-gray-lighter);
+ }
}
.left {
@@ -41,6 +47,10 @@
text-align: right;
max-width: var(--poll-stats-element-width);
min-width: var(--poll-stats-element-width);
+
+ [dir="rtl"] & {
+ text-align: left;
+ }
}
.left,
@@ -101,11 +111,19 @@
.theading {
text-align: left;
+
+ [dir="rtl"] & {
+ text-align: right;
+ }
}
.resultLeft {
- padding-right: .5rem;
+ padding: 0 .5rem 0 0;
border-bottom: 1px solid var(--color-gray-lightest);
+
+ [dir="rtl"] & {
+ padding: 0 0 0 .5rem;
+ }
}
.resultRight,
@@ -126,7 +144,11 @@
vertical-align: bottom;
content: "\2026"; /* ascii code for the ellipsis character */
width: 0;
- margin-right: 1.25em;
+ margin: 0 1.25em 0 0;
+
+ [dir="rtl"] & {
+ margin: 0 0 0 1.25em;
+ }
:global(.animationsEnabled) & {
animation: ellipsis steps(4,end) 900ms infinite;
@@ -138,5 +160,6 @@
to {
width: 1.25em;
margin-right: 0;
+ margin-left: 0;
}
}
diff --git a/bigbluebutton-html5/imports/ui/components/poll/styles.scss b/bigbluebutton-html5/imports/ui/components/poll/styles.scss
index c513b9680e8e8ca881c3ebb809dcacac0a1dce15..d9c5c029a2e950dcb6a37715fe938b5ae78d5e4b 100644
--- a/bigbluebutton-html5/imports/ui/components/poll/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/poll/styles.scss
@@ -11,7 +11,7 @@
.closeBtn {
position: relative;
> i {
- color: var(--color-text);
+ color: var(--color-text);
}
}
@@ -26,11 +26,25 @@
display: block;
margin: var(--border-size-large);
margin-bottom: var(--border-size);
- padding-left: 0px;
+ padding-left: 0;
+ padding-right: inherit;
+
+ [dir="rtl"] & {
+ padding-left: inherit;
+ padding-right: 0;
+ }
> i {
color: var(--color-gray-dark);
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 {
@@ -91,11 +105,23 @@
}
.pollBtn:nth-child(even) {
+ margin-right: inherit;
margin-left: var(--sm-padding-y);
+
+ [dir="rtl"] & {
+ margin-right: var(--sm-padding-y);
+ margin-left: inherit;
+ }
}
.pollBtn:nth-child(odd) {
margin-right: var(--sm-padding-y);
+ margin-left: inherit;
+
+ [dir="rtl"] & {
+ margin-right: inherit;
+ margin-left: var(--sm-padding-y);
+ }
}
.customBtn:hover,
@@ -172,6 +198,11 @@
border-radius: var(--border-radius);
padding: .3rem * 1 .3rem * 0.25;
padding-left: var(--lg-padding-y);
+
+ [dir="rtl"] & {
+ padding: .3rem * 1 .3rem * 0.25;
+ padding-right:var(--lg-padding-y);
+ }
}
.noSlidePanelContainer {
diff --git a/bigbluebutton-html5/imports/ui/components/polling/styles.scss b/bigbluebutton-html5/imports/ui/components/polling/styles.scss
index 6add4b11f4c9247628b856f8378327cdef6aee23..d1282c6fb8029779e1b665368a5b95b1706b8872 100644
--- a/bigbluebutton-html5/imports/ui/components/polling/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/polling/styles.scss
@@ -49,8 +49,12 @@
right: auto;
top: 50%;
left: 50%;
- margin-right: -50%;
+ margin:0 -50% 0 0;
transform: translate(-50%, -50%);
+
+ [dir="rtl"] & {
+ margin: 0 -50% 0 0;
+ }
}
}
diff --git a/bigbluebutton-html5/imports/ui/components/presentation/download-presentation-button/styles.scss b/bigbluebutton-html5/imports/ui/components/presentation/download-presentation-button/styles.scss
index 84afff7093dbf9eaea532eef2063ad3f7e31ddfd..2387f0bab9df2163a711a20490cce04a833a333c 100644
--- a/bigbluebutton-html5/imports/ui/components/presentation/download-presentation-button/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/presentation/download-presentation-button/styles.scss
@@ -9,9 +9,15 @@
.wrapper {
position: absolute;
left: 0;
+ right: auto;
background-color: var(--color-transparent);
cursor: pointer;
border: none !important;
+
+ [dir="rtl"] & {
+ left: auto;
+ right: 0;
+ }
}
.button {
diff --git a/bigbluebutton-html5/imports/ui/components/presentation/presentation-close-button/styles.scss b/bigbluebutton-html5/imports/ui/components/presentation/presentation-close-button/styles.scss
index 9764bcfb537e14ccb12daef35f191952056d8561..3ea4463d2dd635b694fe9d0266ae078f1773114b 100644
--- a/bigbluebutton-html5/imports/ui/components/presentation/presentation-close-button/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/presentation/presentation-close-button/styles.scss
@@ -4,5 +4,11 @@
position: absolute;
top: 0;
right: 0;
+ left: auto;
cursor: pointer;
+
+ [dir="rtl"] & {
+ right: auto;
+ left :0;
+ }
}
diff --git a/bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/styles.scss b/bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/styles.scss
index 24e23c5a2e98e376e41141c22408e410f4cb45f3..a250c30cc09f28a5e295ed3222d256e4cb6fa6da 100644
--- a/bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/styles.scss
@@ -30,7 +30,11 @@
.presentationZoomControls {
justify-content: flex-end;
- padding-right: var(--whiteboard-toolbar-padding);
+ padding: 0 var(--whiteboard-toolbar-padding) 0 0;
+
+ [dir="rtl"] & {
+ padding: 0 0 0 var(--whiteboard-toolbar-padding);
+ }
}
.presentationSlideControls,
@@ -66,10 +70,16 @@
outline: none;
}
- margin-right: var(--whiteboard-toolbar-margin);
+ margin: 0 var(--whiteboard-toolbar-margin) 0 0;
padding: var(--whiteboard-toolbar-padding);
padding-left: var(--whiteboard-toolbar-padding-sm);
+ [dir="rtl"] & {
+ margin: 0 0 0 var(--whiteboard-toolbar-margin);
+ padding: var(--whiteboard-toolbar-padding);
+ padding-right: var(--whiteboard-toolbar-padding-sm);
+ }
+
option {
color: var(--toolbar-button-color);
background-color: var(--color-off-white);
@@ -81,9 +91,6 @@
>div {
color: var(--toolbar-button-color);
background-color: var(--color-off-white);
- border-top: 0;
- border-bottom: 0;
- border-left: 0;
border-radius: 0;
box-shadow: none !important;
border: 0;
@@ -118,6 +125,14 @@
i {
font-size: 1rem;
+
+ [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);
+ }
}
}
@@ -141,6 +156,11 @@
margin: var(--border-size);
margin-left: var(--whiteboard-toolbar-margin);
+ [dir="rtl"] & {
+ margin: var(--border-size);
+ margin-right: var(--whiteboard-toolbar-margin);
+ }
+
&:-moz-focusring {
outline: none;
}
diff --git a/bigbluebutton-html5/imports/ui/components/presentation/presentation-uploader/styles.scss b/bigbluebutton-html5/imports/ui/components/presentation/presentation-uploader/styles.scss
index 3bfcc63bbe370363242beb05f3fc38d83f40c56a..e61b23e13273ab48d57ccb48e28c18d60da28370 100644
--- a/bigbluebutton-html5/imports/ui/components/presentation/presentation-uploader/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/presentation/presentation-uploader/styles.scss
@@ -30,6 +30,10 @@
> tbody {
text-align: left;
+ [dir="rtl"] & {
+ text-align: right;
+ }
+
> tr {
border-bottom: 1px solid var(--color-gray-light);
@@ -69,6 +73,10 @@
.tableItemActions {
min-width: 68px; // size of the 2 icons (check/trash)
text-align: left;
+
+ [dir="rtl"] & {
+ text-align: right;
+ }
}
.tableItemIcon > i {
@@ -95,10 +103,20 @@
.tableItemCurrent {
padding-left: 0;
+ padding-right: inherit;
+
+ [dir="rtl"] & {
+ padding-left: inherit;
+ padding-right: 0;
+ }
}
.tableItemStatus {
text-align: right;
+
+ [dir="rtl"] & {
+ text-align: left;
+ }
}
.tableItemNew {
diff --git a/bigbluebutton-html5/imports/ui/components/recording/styles.scss b/bigbluebutton-html5/imports/ui/components/recording/styles.scss
index 494cec75407419aa87ced1ee8b589e9d5dd28683..0b008cd872b20e369b8edab227c5f8342e630936 100755
--- a/bigbluebutton-html5/imports/ui/components/recording/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/recording/styles.scss
@@ -30,7 +30,11 @@
.button {
padding-right: var(--jumbo-padding-y);
padding-left: var(--jumbo-padding-y);
- margin-right: var(--sm-padding-x);
+ margin: 0 var(--sm-padding-x) 0 0;
+
+ [dir="rtl"] & {
+ margin: 0 0 0 var(--sm-padding-x);
+ }
}
.description {
diff --git a/bigbluebutton-html5/imports/ui/components/settings/styles.scss b/bigbluebutton-html5/imports/ui/components/settings/styles.scss
index 49722b765171260ae7e967ef98fb452e64ce196f..1c13b8f053705f2aff2e4dab23745a7b4fe6ebe3 100644
--- a/bigbluebutton-html5/imports/ui/components/settings/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/settings/styles.scss
@@ -27,8 +27,12 @@
}
.icon {
- margin-right: .5rem;
+ margin: 0 .5rem 0 0;
font-size: var(--font-size-large);
+
+ [dir="rtl"] & {
+ margin: 0 0 0 .5rem;
+ }
}
.tabSelector {
@@ -52,10 +56,14 @@
@include mq($small-only) {
max-width: 100%;
- margin-right: var(--sm-padding-x);
+ margin: 0 var(--sm-padding-x) 0 0;
& > .icon {
display: none;
}
+
+ [dir="rtl"] & {
+ margin: 0 0 0 var(--sm-padding-x);
+ }
}
}
@@ -71,13 +79,23 @@
.tabPanel {
display: none;
- margin-left: 1rem;
+ margin: 0 0 0 1rem;
width: calc(100% / 3 * 2);
+ [dir="rtl"] & {
+ margin: 0 1rem 0 0;
+ }
+
@include mq($small-only) {
width: 100%;
- margin-left: 0;
- margin-top: 1rem;
+ margin-left: 1rem;
+ margin-right: inherit;
+
+ [dir="rtl"] & {
+ margin-left: inherit;
+ margin-right: 1rem;
+ }
+
}
}
diff --git a/bigbluebutton-html5/imports/ui/components/settings/submenus/styles.scss b/bigbluebutton-html5/imports/ui/components/settings/submenus/styles.scss
index 3f11c890dd671be9d86298cb22ec247ad1926efe..801aff676be85f8c7534c2c71fb430c1b706ce62 100644
--- a/bigbluebutton-html5/imports/ui/components/settings/submenus/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/settings/submenus/styles.scss
@@ -31,11 +31,15 @@
display: flex;
flex-grow: 1;
flex-basis: 0;
- margin-right: 1rem;
&:last-child {
- margin-right: 0;
- padding-right: 0.1rem;
+ padding-right: 0;
+ padding-left: 1rem;
+
+ [dir="rtl"] & {
+ padding-right: 0.1rem;
+ padding-left: 0;
+ }
}
}
@@ -103,7 +107,11 @@
}
.spacedLeft {
- margin-left: 1rem;
+ margin: 0 0 0 1rem;
+
+ [dir="rtl"] & {
+ margin: 0 1rem 0 0;
+ }
}
.swatch {
diff --git a/bigbluebutton-html5/imports/ui/components/shortcut-help/styles.scss b/bigbluebutton-html5/imports/ui/components/shortcut-help/styles.scss
index 53ad63c01c1f102f5e7bf1d7ffd02ed708f92854..553affbff1d4140b4e608f22ff3858fe6c1a9ddd 100644
--- a/bigbluebutton-html5/imports/ui/components/shortcut-help/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/shortcut-help/styles.scss
@@ -12,7 +12,11 @@
}
.descCell {
- padding-right: var(--jumbo-padding-x) !important;
+ padding: 0 var(--jumbo-padding-x) !important 0 0;
+
+ [dir="rtl"] & {
+ padding: 0 0 0 var(--jumbo-padding-x) !important;
+ }
}
.keyCell,
diff --git a/bigbluebutton-html5/imports/ui/components/toast/styles.scss b/bigbluebutton-html5/imports/ui/components/toast/styles.scss
index d1c231283b870bf2c71a2f287abd015226407025..87c738630089ef47fab7fc5aea4cac98fef1ca6e 100755
--- a/bigbluebutton-html5/imports/ui/components/toast/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/toast/styles.scss
@@ -52,14 +52,17 @@
.icon {
align-self: flex-start;
- margin-bottom: auto;
- margin-right: var(--sm-padding-x);
+ margin: 0 var(--sm-padding-x) auto 0;
width: var(--toast-icon-md);
height: var(--toast-icon-md);
border-radius: 50%;
position: relative;
flex-shrink: 0;
+ [dir="rtl"] & {
+ margin: 0 0 auto var(--sm-padding-x);
+ }
+
> i {
line-height: 0;
color: inherit;
@@ -126,10 +129,16 @@
max-width: var(--toast-container-max-width);
box-sizing: border-box;
right: var(--jumbo-padding-y);
+ left: auto;
top: var(--toast-offset);
max-height: 75vh;
overflow: hidden;
+ [dir="rtl"] & {
+ right: auto;
+ left: var(--jumbo-padding-y);
+ }
+
@include mq($small-only) {
width: var(--toast-mobile-width);
}
@@ -175,13 +184,22 @@
position: relative;
font-size: 70%;
left: var(--toast-offset-sm);
+
+ [dir="rtl"] & {
+ left: auto;
+ right: var(--toast-offset-sm);
+ }
:global(.animationsEnabled) & {
transition: .3s ease;
}
&:before {
- margin-left: -.4rem;
+ margin: inherit inherit inherit -.4rem;
+
+ [dir="rtl"] & {
+ margin: inherit -.4rem inherit inherit;
+ }
}
&:hover,
@@ -212,10 +230,17 @@
position: absolute;
bottom: 0;
left: 0;
+ right: auto;
width: 0;
height: 5px;
z-index: 9999;
animation: track-progress linear 1;
background-color: var(--color-gray-lighter);
border-radius: var(--border-radius);
+
+
+ [dir="rtl"] & {
+ left: auto;
+ right: 0;
+ }
}
diff --git a/bigbluebutton-html5/imports/ui/components/user-avatar/styles.scss b/bigbluebutton-html5/imports/ui/components/user-avatar/styles.scss
index 0f3a6938be9cc12dd5e6911824a001f371831872..b4ffcd80f635c581cce8ce1639b23fa8c4da8c81 100755
--- a/bigbluebutton-html5/imports/ui/components/user-avatar/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/user-avatar/styles.scss
@@ -32,7 +32,10 @@
position: absolute;
width: 0;
height: 0;
- padding: .5rem;
+ padding-top: .5rem;
+ padding-right: 0;
+ padding-left: 0;
+ padding-bottom: 0;
color: inherit;
top: auto;
left: auto;
@@ -51,6 +54,13 @@
letter-spacing: -.65rem;
z-index: 1;
+ [dir="rtl"] & {
+ left: var(--user-indicators-offset);
+ right: auto;
+ padding-right: .65rem;
+ padding-left: 0;
+ }
+
:global(.animationsEnabled) & {
transition: .3s ease-in-out;
}
@@ -114,6 +124,12 @@
background-color: var(--user-indicator-voice-bg);
top: 1.375rem;
left: 1.375rem;
+ right: auto;
+
+ [dir="rtl"] & {
+ left: auto;
+ right: 1.375rem;
+ }
}
}
diff --git a/bigbluebutton-html5/imports/ui/components/user-list/chat-list-item/styles.scss b/bigbluebutton-html5/imports/ui/components/user-list/chat-list-item/styles.scss
index 172b30a282a6561430406ef0e916faa55fd151b3..3e38d3e900d1a727fa66214ebead257b230986d2 100755
--- a/bigbluebutton-html5/imports/ui/components/user-list/chat-list-item/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/user-list/chat-list-item/styles.scss
@@ -14,9 +14,18 @@
padding-top: var(--lg-padding-y);
padding-bottom: var(--lg-padding-y);
padding-left: var(--lg-padding-y);
+ padding-right: 0;
margin-left: var(--border-size);
margin-top: var(--border-size);
margin-bottom: var(--border-size);
+ margin-right: 0;
+
+ [dir="rtl"] & {
+ padding-left: 0;
+ padding-right: var(--lg-padding-y);
+ margin-left: 0;
+ margin-right: var(--border-size);
+ }
}
.chatListItemLink {
@@ -47,8 +56,13 @@
flex-grow: 1;
line-height: 2;
text-align: left;
- padding-left: var(--lg-padding-y);
+ padding: 0 0 0 var(--lg-padding-y);
text-overflow: ellipsis;
+
+ [dir="rtl"] & {
+ text-align: right;
+ padding: 0 var(--lg-padding-y) 0 0;
+ }
}
.active {
diff --git a/bigbluebutton-html5/imports/ui/components/user-list/component.jsx b/bigbluebutton-html5/imports/ui/components/user-list/component.jsx
index d472c9e752415ef35a03956b4d23348de42b2bc0..16bc754db8e57698189f5b0b6ce8e5428d1ff4d7 100755
--- a/bigbluebutton-html5/imports/ui/components/user-list/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/user-list/component.jsx
@@ -2,7 +2,7 @@ import React, { PureComponent } from 'react';
import { injectIntl } from 'react-intl';
import PropTypes from 'prop-types';
import injectWbResizeEvent from '/imports/ui/components/presentation/resize-wrapper/component';
-import { styles } from './styles';
+import { styles } from './styles.scss';
import CustomLogo from './custom-logo/component';
import UserContentContainer from './user-list-content/container';
diff --git a/bigbluebutton-html5/imports/ui/components/user-list/styles.scss b/bigbluebutton-html5/imports/ui/components/user-list/styles.scss
index 0be8600bad348689df36e18c144759cd812b6ced..bda4101dee35211df649652d1cc840ba3b19110b 100755
--- a/bigbluebutton-html5/imports/ui/components/user-list/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/user-list/styles.scss
@@ -47,8 +47,17 @@
flex-flow: row;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
cursor: pointer;
+ [dir="rtl"] & {
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+ border-top-right-radius: 5px;
+ border-bottom-right-radius: 5px;
+ }
+
&:first-child {
margin-top: 0;
}
@@ -89,8 +98,11 @@
}
.participantsList {
- padding-left: var(--border-size);
- padding-bottom: var(--border-size);
+ padding: 0 0 var(--border-size) var(--border-size);
+
+ [dir="rtl"] & {
+ padding: 0 var(--border-size) var(--border-size) 0;
+ }
}
.participantsList,
diff --git a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/breakout-room/styles.scss b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/breakout-room/styles.scss
index 28a68ff40115562ef10189c28c464250c52518df..6f36c918df222a76cb5253ac5ada74056f865297 100644
--- a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/breakout-room/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/breakout-room/styles.scss
@@ -26,6 +26,11 @@
font-size: 175%;
flex-shrink: 1;
color: var(--user-icons-color);
+
+ [dir="rtl"] & {
+ text-align: left;
+ margin-right: var(--sm-padding-x) / 2;
+ }
}
.BreakoutRoomsText {
@@ -40,6 +45,11 @@
text-align: left;
padding-left: var(--lg-padding-y);
text-overflow: ellipsis;
+
+ [dir="rtl"] & {
+ text-align: right;
+ padding-right: var(--lg-padding-y);
+ }
}
.BreakoutRoomsItem {
@@ -48,6 +58,11 @@
padding-top: var(--lg-padding-y);
padding-bottom: var(--lg-padding-y);
padding-left: var(--lg-padding-y);
+
+ [dir="rtl"] & {
+ margin-right: var(--md-padding-y);
+ padding-right: var(--lg-padding-y);
+ }
}
.link {
diff --git a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/styles.scss b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/styles.scss
index b1d2a7a5610be945cc6ca12e94a028d9bf2c98a0..5f91bb9d2ddb67975a278a29553f53da3c15237c 100755
--- a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/styles.scss
@@ -37,8 +37,11 @@
}
.list {
- margin-left: var(--md-padding-y);
- margin-bottom: 1px;
+ margin: 0 0 1px var(--md-padding-y);
+
+ [dir="rtl"] & {
+ margin: 0 var(--md-padding-y) 1px 0;
+ }
}
.smallTitle {
diff --git a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-notes/styles.scss b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-notes/styles.scss
index 90e5e416b93f1b8d284feed40562c64fd7cc73c3..1d75013085d9fa74e41c6faa28ffab7320d5b446 100644
--- a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-notes/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-notes/styles.scss
@@ -13,7 +13,11 @@
}
.scrollableList {
- margin-left: var(--md-padding-y);
+ margin: 0 0 0 var(--md-padding-y);
+
+ [dir="rtl"] & {
+ margin: 0 var(--md-padding-y) 0 0;
+ }
}
.noteLink {
@@ -27,11 +31,17 @@
padding-top: var(--lg-padding-y);
padding-bottom: var(--lg-padding-y);
padding-left: var(--lg-padding-y);
+ padding-right: 0;
text-decoration: none;
width: 100%;
color: var(--color-gray-dark);
background-color: var(--color-off-white);
+ [dir="rtl"] & {
+ padding-left: 0;
+ padding-right: var(--lg-padding-y);
+ }
+
> i {
display: flex;
font-size: 175%;
@@ -40,15 +50,22 @@
}
> span {
- font-weight: 400;
- font-size: var(--font-size-small);
- color: var(--color-gray-dark);
- position: relative;
- flex-grow: 1;
- line-height: 2;
- text-align: left;
- padding-left: var(--lg-padding-y);
- text-overflow: ellipsis;
+ font-weight: 400;
+ font-size: var(--font-size-small);
+ color: var(--color-gray-dark);
+ position: relative;
+ flex-grow: 1;
+ line-height: 2;
+ text-align: left;
+ padding-left: var(--lg-padding-y);
+ padding-right: 0;
+ text-overflow: ellipsis;
+
+ [dir="rtl"] & {
+ text-align: right;
+ padding-left: 0;
+ padding-right: var(--lg-padding-y);
+ }
}
&:active {
diff --git a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-list-item/user-dropdown/styles.scss b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-list-item/user-dropdown/styles.scss
index aaa87e897034a19702bff89fa90cac6c956a8aa1..7cd8f4fb93eb6a2ae31e1fd05e3384ef8deab57f 100644
--- a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-list-item/user-dropdown/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-list-item/user-dropdown/styles.scss
@@ -109,9 +109,11 @@
display: flex;
flex-flow: row;
- padding-top: var(--lg-padding-y);
- padding-bottom: var(--lg-padding-y);
- padding-left: var(--lg-padding-y);
+ padding: var(--lg-padding-y) 0 var(--lg-padding-y) var(--lg-padding-y);
+
+ [dir="rtl"] & {
+ padding: var(--lg-padding-y) var(--lg-padding-y) var(--lg-padding-y) 0;
+ }
}
.dropdown {
diff --git a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-list-item/user-icons/styles.scss b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-list-item/user-icons/styles.scss
index 7d7c4ec5cd5134583bfa6c0022de0c989c1eb31a..523bac770a748dce6ce7688bd36c8d902545f08b 100644
--- a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-list-item/user-icons/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-list-item/user-icons/styles.scss
@@ -5,7 +5,11 @@
text-align: center;
flex-basis: 1rem;
justify-content: center;
- margin-left: var(--sm-padding-x) / 2;
+ margin: 0 0 0 var(--sm-padding-x) / 2;
+
+ [dir="rtl"] & {
+ margin: 0 var(--sm-padding-x) / 2 0 0;
+ }
:global(.animationsEnabled) & {
transition: .3s all;
@@ -16,9 +20,14 @@
display: flex;
flex-flow: row;
justify-content: space-between;
- margin-left: var(--sm-padding-x) / 2;
+ margin: 0 0 0 var(--sm-padding-x)/2;
text-align: right;
font-size: 1rem;
flex-shrink: 1;
color: var(--user-icons-color);
+
+ [dir="rtl"] & {
+ margin: 0 var(--sm-padding-x)/2 0 0;
+ text-align: left;
+ }
}
diff --git a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-list-item/user-name/styles.scss b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-list-item/user-name/styles.scss
index 94d8cecc2b9aaf16196ac0165ba94907ea120d78..74bc71c0dede67bab96be8a4f3e404c7d42e9891 100755
--- a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-list-item/user-name/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-list-item/user-name/styles.scss
@@ -4,9 +4,13 @@
@extend %flex-column;
min-width: 0;
flex-grow: 1;
- margin-left: var(--sm-padding-x);
+ margin: 0 0 0 var(--sm-padding-x);
justify-content: center;
font-size: 0.95rem;
+
+ [dir="rtl"] & {
+ margin: 0 var(--sm-padding-x) 0 0;
+ }
}
.userNameMain {
diff --git a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-options/styles.scss b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-options/styles.scss
index 9f8d1d3afdf4796084e0ae9d340040e348d82778..2f7a0dc89bacdbf9e24365c057bb151cd6c65362 100755
--- a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-options/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-options/styles.scss
@@ -9,13 +9,25 @@
.dropdown {
position: absolute;
right: 0;
+ left: auto;
+
+ [dir="rtl"] & {
+ left: 0;
+ right: auto;
+ }
}
.dropdownContent {
top: var(--user-manage-menu-top);
right: var(--user-manage-menu-right);
+ left: auto;
width: var(--user-manage-menu-width);
+ [dir="rtl"] & {
+ top: var(--user-manage-menu-top);
+ right: -1rem;
+ }
+
@include mq($small-only) {
width: 100vw;
}
diff --git a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-polls/styles.scss b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-polls/styles.scss
index 556abad6d604fc374725a85639c851f461323a7e..cf4b74743f3e82b83efb8e3d25ed47ce10245b0e 100644
--- a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-polls/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-polls/styles.scss
@@ -15,8 +15,11 @@ $item-focus-border: #92BCEA;
}
.scrollableList {
- margin-left: 0.45rem;
- margin-bottom: 1px;
+ margin: 0 0 1px 0.45rem;
+
+ [dir="rtl"] & {
+ margin: 0 0.45rem 1px 0;
+ }
}
.pollLink {
@@ -29,11 +32,17 @@ $item-focus-border: #92BCEA;
padding-top: var(--lg-padding-y);
padding-bottom: var(--lg-padding-y);
padding-left: var(--lg-padding-y);
+ padding-right: 0;
text-decoration: none;
width: 100%;
color: var(--color-gray-dark);
background-color: var(--color-off-white);
+ [dir="rtl"] & {
+ padding-left: 0;
+ padding-right: var(--lg-padding-y);
+ }
+
> i {
display: flex;
font-size: 175%;
@@ -49,8 +58,13 @@ $item-focus-border: #92BCEA;
flex-grow: 1;
line-height: 2;
text-align: left;
- padding-left: var(--lg-padding-y);
+ padding: 0 0 0 var(--lg-padding-y);
text-overflow: ellipsis;
+
+ [dir="rtl"] & {
+ text-align: right;
+ padding: 0 var(--lg-padding-y) 0 0;
+ }
}
&:active {
diff --git a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/waiting-users/styles.scss b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/waiting-users/styles.scss
index e169ad43151610deec5767056ecd9194be388e16..703a77bb77c3c9781b21722efef20a56b7dbbc99 100644
--- a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/waiting-users/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/waiting-users/styles.scss
@@ -21,9 +21,12 @@
}
.scrollableList {
- margin-left: 0.45rem;
- margin-bottom: 1px;
+ margin: 0 0 1px 0.45rem;
outline: none;
+
+ [dir="rtl"] & {
+ margin: 0 0.45rem 1px 0;
+ }
}
.noteLink {
@@ -37,11 +40,17 @@
padding-top: var(--lg-padding-y);
padding-bottom: var(--lg-padding-y);
padding-left: var(--lg-padding-y);
+ padding-right: 0;
text-decoration: none;
width: 100%;
color: var(--color-gray-dark);
background-color: var(--color-off-white);
+ [dir="rtl"] & {
+ padding-left: 0;
+ padding-right: var(--lg-padding-y);
+ }
+
> i {
display: flex;
font-size: 175%;
@@ -50,15 +59,20 @@
}
> span {
- font-size: 0.9rem;
- font-weight: 400;
- color: black;
- position: relative;
- flex-grow: 1;
- line-height: 2;
- text-align: left;
- padding-left: var(--lg-padding-y);
- text-overflow: ellipsis;
+ font-size: 0.9rem;
+ font-weight: 400;
+ color: black;
+ position: relative;
+ flex-grow: 1;
+ line-height: 2;
+ text-align: left;
+ padding: 0 0 0 var(--lg-padding-y);
+ text-overflow: ellipsis;
+
+ [dir="rtl"] & {
+ text-align: right;
+ padding: 0 var(--lg-padding-y) 0 0;
+ }
}
&:active {
diff --git a/bigbluebutton-html5/imports/ui/components/video-preview/styles.scss b/bigbluebutton-html5/imports/ui/components/video-preview/styles.scss
index e77914ac4790e2bca7234b546da36ad9f1365103..061c3e6aa05e6c8df3a96874d2c072368160a402 100755
--- a/bigbluebutton-html5/imports/ui/components/video-preview/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/video-preview/styles.scss
@@ -6,8 +6,20 @@
margin-left: auto;
margin-right: 3px;
+
+ [dir="rtl"] & {
+ margin-right: auto;
+ margin-left: 3px;
+ }
+
:first-child {
margin-right: 3px;
+ margin-left: inherit;
+
+ [dir="rtl"] & {
+ margin-right: inherit;
+ margin-left: 3px;
+ }
}
}
@@ -15,16 +27,27 @@
i {
color: var(--color-gray-light);
}
+
margin-left: auto;
+ margin-right: 0;
+
+ [dir="rtl"] & {
+ margin-left: 0;
+ margin-right: auto;
+ }
}
.col {
display: flex;
flex-direction: column;
height: 100%;
- margin-right: 1.5rem;
+ margin: 0 1.5rem 0 0;
justify-content: center;
+ [dir="rtl"] & {
+ margin: 0 0 0 1.5rem;
+ }
+
//width: 50%;
@include mq($small-only) {
width: 100%;
diff --git a/bigbluebutton-html5/imports/ui/components/video-provider/fullscreen-button/styles.scss b/bigbluebutton-html5/imports/ui/components/video-provider/fullscreen-button/styles.scss
index e73901640e385eaa78973258c39238e5af9e19e9..c86eda215b58b3cddb9d4dfea1196562a2939c2c 100644
--- a/bigbluebutton-html5/imports/ui/components/video-provider/fullscreen-button/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/video-provider/fullscreen-button/styles.scss
@@ -9,10 +9,16 @@
.wrapper {
position: absolute;
right: 0;
+ left: auto;
background-color: var(--color-transparent);
cursor: pointer;
border: none !important;
+ [dir="rtl"] & {
+ right: auto;
+ left :0;
+ }
+
[class*="presentationZoomControls"] & {
position: relative !important;
}
diff --git a/bigbluebutton-html5/imports/ui/components/video-provider/video-list/styles.scss b/bigbluebutton-html5/imports/ui/components/video-provider/video-list/styles.scss
index 0333ed376ae69e7554c832faaa9bb00ea465bcf8..4527df146ab4aa409963a400bc589529b4483e35 100755
--- a/bigbluebutton-html5/imports/ui/components/video-provider/video-list/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/video-provider/video-list/styles.scss
@@ -94,7 +94,11 @@
display: inline-block;
height: 100%;
vertical-align: middle;
- margin-right: -0.25em;
+ margin:0 -0.25em 0 0;
+
+ [dir="rtl"] & {
+ margin: 0 0 0 -0.25em
+ }
}
&::before {
@@ -172,6 +176,10 @@
.dropdownContent {
min-width: 8.5rem;
+
+ [dir="rtl"] & {
+ right: 2rem;
+ }
}
.dropdownList {
diff --git a/bigbluebutton-html5/imports/ui/components/waiting-users/styles.scss b/bigbluebutton-html5/imports/ui/components/waiting-users/styles.scss
index f2ce795605e8867820b06f31f5c57fbb35c4203a..c5980f39186ed7d2318ffa28d027df83eda6ad19 100644
--- a/bigbluebutton-html5/imports/ui/components/waiting-users/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/waiting-users/styles.scss
@@ -19,10 +19,13 @@
a {
@include elementFocus(var(--color-primary));
- padding-bottom: var(--sm-padding-y);
- padding-left: var(--sm-padding-y);
+ padding: 0 0 var(--sm-padding-y) var(--sm-padding-y);
text-decoration: none;
display: block;
+
+ [dir="rtl"] & {
+ padding: 0 var(--sm-padding-y) var(--sm-padding-y) 0;
+ }
}
[class^="icon-bbb-"],
@@ -48,7 +51,13 @@
display: block;
margin: 4px;
margin-bottom: 2px;
- padding-left: 0px;
+ padding-left: 0;
+ padding-right: inherit;
+
+ [dir="rtl"] & {
+ padding-left: inherit;
+ padding-right: 0;
+ }
> i {
color: black;
@@ -154,5 +163,10 @@
padding: 0;
margin: 0;
margin-left: .5rem;
+
+ [dir="rtl"] & {
+ margin: 0;
+ margin-right: .5rem;
+ }
}
}
\ No newline at end of file
diff --git a/bigbluebutton-html5/imports/ui/components/whiteboard/whiteboard-toolbar/styles.scss b/bigbluebutton-html5/imports/ui/components/whiteboard/whiteboard-toolbar/styles.scss
index 367d5355e4f3333904c115c70076ce8cb308620b..f15472d921727addede5aabda9e4448e414fcc1f 100644
--- a/bigbluebutton-html5/imports/ui/components/whiteboard/whiteboard-toolbar/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/whiteboard/whiteboard-toolbar/styles.scss
@@ -4,7 +4,7 @@
--toolbar-margin: .8rem;
--toolbar-box-shadow: 0 0 10px -2px rgba(0, 0, 0, .25);
--toolbar-button-color: var(--btn-default-color);
- --toolbar-button-bg: var(--btn-default-bg);
+ --toolbar-button-bg: var(--btn-default-bg);
--toolbar-button-width: 3rem;
--toolbar-button-height: 3rem;
--toolbar-button-font-size: 1.75rem;
@@ -21,13 +21,20 @@
display: flex;
flex-direction: column;
justify-content: center;
- margin-right: var(--toolbar-margin);
+ margin: 0 var(--toolbar-margin) 0 0;
position: absolute;
top: 0;
right: 0;
+ left: auto;
bottom: 0;
pointer-events: none;
+ [dir="rtl"] & {
+ margin: 0 0 0 var(--toolbar-margin);
+ right: auto;
+ left: 0;
+ }
+
@include mq("#{$landscape} and (max-height:#{upper-bound($small-range)}), #{$small-only}") {
transform: scale(.75);
transform-origin: right;
@@ -55,6 +62,12 @@
&.toolbarActive {
border-top-left-radius: 0;
+ border-top-right-radius: var(--toolbar-button-border-radius);
+
+ [dir="rtl"] & {
+ border-top-left-radius: var(--toolbar-button-border-radius);
+ border-top-right-radius: 0;
+ }
}
}
@@ -65,6 +78,12 @@
&.toolbarActive {
border-bottom-left-radius: 0;
+ border-top-right-radius: var(--toolbar-button-border-radius);
+
+ [dir="rtl"] & {
+ border-bottom-left-radius: var(--toolbar-button-border-radius);
+ border-top-right-radius: 0;
+ }
}
}
}
@@ -85,7 +104,7 @@
display: flex;
flex-direction: row;
align-items: center !important;
- justify-content: center !important;
+ justify-content: center !important;
position: relative;
border-radius: 0;
box-shadow: none !important;
@@ -121,12 +140,27 @@
height: var(--toolbar-button-height);
position: absolute;
right: var(--toolbar-button-height);
+ left: auto;
top: 0;
box-shadow: var(--toolbar-box-shadow);
+ [dir="rtl"] & {
+ right: auto;
+ left: var(--toolbar-button-height);
+ }
+
.buttonWrapper:first-child > .toolbarListButton {
border-top-left-radius: var(--toolbar-button-border-radius);
border-bottom-left-radius: var(--toolbar-button-border-radius);
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+
+ [dir="rtl"] & {
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+ border-top-right-radius: var(--toolbar-button-border-radius);
+ border-bottom-right-radius: var(--toolbar-button-border-radius);
+ }
}
}
diff --git a/bigbluebutton-html5/imports/ui/stylesheets/mixins/_indicators.scss b/bigbluebutton-html5/imports/ui/stylesheets/mixins/_indicators.scss
index cc81582d7aa09fe0a25521c53203d316642c847e..b57a542eb42a4399ee595d4676077efee9dfede1 100644
--- a/bigbluebutton-html5/imports/ui/stylesheets/mixins/_indicators.scss
+++ b/bigbluebutton-html5/imports/ui/stylesheets/mixins/_indicators.scss
@@ -10,6 +10,12 @@
right: auto;
border-radius: 5px;
background-color: var(--color-primary);
+
+ [dir="rtl"] & {
+ left: auto;
+ right: var(--user-indicators-offset);
+ letter-spacing: -.33rem;
+ }
}
:global(.browser-chrome) &:before,
@@ -22,6 +28,11 @@
padding-left: var(--indicator-padding-left);
padding-right: var(--indicator-padding-right);
padding-bottom: var(--indicator-padding-bottom);
+
+ [dir="rtl"] & {
+ padding-right: var(--indicator-padding-left);
+ padding-left: var(--indicator-padding-right);
+ }
}
}
diff --git a/bigbluebutton-html5/private/locales/ar.json b/bigbluebutton-html5/private/locales/ar.json
index a36090e26df4862e38bfc7a8b1f3f5809f7899cc..de45d08e1a1fb6352fb4fe435ed21a4bbfe74bcc 100644
--- a/bigbluebutton-html5/private/locales/ar.json
+++ b/bigbluebutton-html5/private/locales/ar.json
@@ -596,6 +596,4 @@
"app.iOSWarning.label": "يرجى الترقية إلى iOS 12.2 أو اعلى",
"app.legacy.unsupportedBrowser": "يبدو انك تستخدم مستعرضا غير معتمد. الرجاء استخدام {0} أو {1} للØصول علي الدعم الكامل.",
"app.legacy.upgradeBrowser": "يبدو انك تستخدم إصدارا قديما من مستعرض معتمد. الرجاء ترقيه المتصÙØ Ù„Ù„Øصول علي الدعم الكامل."
-
}
-
diff --git a/bigbluebutton-html5/private/locales/en.json b/bigbluebutton-html5/private/locales/en.json
index 0f061cecc4a1a1a10279e40e8c0f231402ebf920..d2271284eb152e39fa32219049c6ea392acce563 100755
--- a/bigbluebutton-html5/private/locales/en.json
+++ b/bigbluebutton-html5/private/locales/en.json
@@ -401,6 +401,10 @@
"app.meeting.logout.userInactivityEjectReason": "User inactive for too long",
"app.meeting-ended.rating.legendLabel": "Feedback rating",
"app.meeting-ended.rating.starLabel": "Star",
+ "app.modal.close": "Close",
+ "app.modal.close.description": "Disregards changes and closes the modal",
+ "app.modal.confirm": "Done",
+ "app.modal.confirm.description": "Saves changes and closes the modal",
"app.dropdown.close": "Close",
"app.error.400": "Bad Request",
"app.error.401": "Unauthorized",