haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(Toolbox) Maintain overflow button visible at all times 

* fix(Toolbox) Maintain overflow button visible at all times

* Make changes only on desktop browser
This commit is contained in:
Mihai-Andrei Uscat 2020-11-11 16:11:51 +02:00 committed by GitHub
parent 101a40a8da
commit 9379bb3c5b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 127 additions and 127 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
css/_base.scss
View File

@ -201,3 +201,74 @@ form {
background: rgba(0, 0, 0, .5);
border-radius: 4px;
}
.desktop-browser {
@media only screen and (max-width: $smallScreen) {
.watermark {
width: 20%;
height: 20%;
}
.new-toolbox {
.toolbox-content {
.button-group-center, .button-group-left, .button-group-right {
.toolbox-button {
.toolbox-icon {
width: 28px;
height: 28px;
svg {
width: 18px;
height: 18px;
}
}
&:nth-child(2) {
.toolbox-icon {
width: 30px;
height: 30px;
}
}
}
}
}
}
}
@media only screen and (max-width: $verySmallScreen) {
#videoResolutionLabel {
display: none;
}
.vertical-filmstrip .filmstrip {
display: none;
}
.new-toolbox {
.toolbox-content {
.button-group-center, .button-group-left, .button-group-right {
.settings-button-small-icon {
display: none;
}
.toolbox-button {
.toolbox-icon {
width: 18px;
height: 18px;
svg {
width: 12px;
height: 12px;
}
}
&:nth-child(2) {
.toolbox-icon {
width: 20px;
height: 20px;
}
}
}
}
}
}
.chrome-extension-banner {
display: none;
}
}
}

169
css/_responsive.scss
View File

@ -1,136 +1,67 @@
@media only screen and (max-width: $smallScreen) {
.watermark {
width: 20%;
height: 20%;
}
@media only screen and (max-width: $verySmallScreen) {
.welcome {
display: block;
.new-toolbox {
.toolbox-content {
.button-group-center, .button-group-left, .button-group-right {
.toolbox-button {
.toolbox-icon {
width: 28px;
height: 28px;
svg {
width: 18px;
height: 18px;
}
}
#enter_room {
position: relative;
height: 42px;
&:nth-child(2) {
.toolbox-icon {
width: 30px;
height: 30px;
}
}
.welcome-page-button {
font-size: 16px;
left: 0;
position: absolute;
top: 68px;
text-align: center;
width: 100%;
}
}
.header {
background-color: #002637;
#enter_room {
.enter-room-input-container {
padding-right: 0;
}
.warning-without-link,
.warning-with-link {
top: 120px;
}
}
}
}
}
@media only screen and (max-width: $verySmallScreen) {
.welcome {
display: block;
#enter_room {
position: relative;
height: 42px;
.welcome-page-button {
font-size: 16px;
left: 0;
position: absolute;
top: 68px;
text-align: center;
width: 100%;
.welcome-tabs {
display: none;
}
}
.header {
background-color: #002637;
#enter_room {
.enter-room-input-container {
padding-right: 0;
}
.warning-without-link,
.warning-with-link {
top: 120px;
}
}
}
.welcome-tabs {
display: none;
}
.header-text-title {
text-align: center;
}
.welcome-cards-container {
padding: 0;
}
&.without-content {
.header {
height: 100%;
.header-text-title {
text-align: center;
}
}
#moderated-meetings {
display: none;
}
.welcome-cards-container {
padding: 0;
}
.welcome-footer-row-block {
display: block;
}
.welcome-badge {
margin-right: 16px;
}
&.without-content {
.header {
height: 100%;
}
}
.welcome-footer {
display: none;
}
}
#moderated-meetings {
display: none;
}
#videoResolutionLabel {
display: none;
}
.desktop-browser {
.vertical-filmstrip .filmstrip {
.welcome-footer-row-block {
display: block;
}
.welcome-badge {
margin-right: 16px;
}
.welcome-footer {
display: none;
}
}
.new-toolbox {
.toolbox-content {
.button-group-center, .button-group-left, .button-group-right {
.settings-button-small-icon {
display: none;
}
.toolbox-button {
.toolbox-icon {
width: 18px;
height: 18px;
svg {
width: 12px;
height: 12px;
}
}
&:nth-child(2) {
.toolbox-icon {
width: 20px;
height: 20px;
}
}
}
}
}
}
.chrome-extension-banner {
display: none;
}
}

14
react/features/toolbox/components/web/Toolbox.js
View File

@ -1221,7 +1221,7 @@ class Toolbox extends Component<Props, State> {
t
} = this.props;
const overflowMenuContent = this._renderOverflowMenuContent();
const overflowHasItems = Boolean(overflowMenuContent.filter(child => child).length);
const overflowHasItems = Boolean(overflowMenuContent.length);
const toolbarAccLabel = 'toolbar.accessibilityLabel.moreActionsMenu';
const buttonsLeft = [];
const buttonsRight = [];
@ -1232,10 +1232,10 @@ class Toolbox extends Component<Props, State> {
let minSpaceBetweenButtons = 48;
let widthPlusPaddingOfButton = 56;
if (this.state.windowWidth <= verySmallThreshold) {
if (this.state.windowWidth <= verySmallThreshold && !isMobileBrowser()) {
minSpaceBetweenButtons = 26;
widthPlusPaddingOfButton = 28;
} else if (this.state.windowWidth <= smallThreshold) {
} else if (this.state.windowWidth <= smallThreshold && !isMobileBrowser()) {
minSpaceBetweenButtons = 36;
widthPlusPaddingOfButton = 40;
}
@ -1250,8 +1250,6 @@ class Toolbox extends Component<Props, State> {
/ 2 // divide by the number of groups(left and right group)
);
const showOverflowMenu = this.state.windowWidth >= verySmallThreshold || isMobileBrowser();
if (this._shouldShowButton('chat')) {
buttonsLeft.push('chat');
}
@ -1265,7 +1263,7 @@ class Toolbox extends Component<Props, State> {
if (this._shouldShowButton('closedcaptions')) {
buttonsLeft.push('closedcaptions');
}
if (overflowHasItems && showOverflowMenu) {
if (overflowHasItems) {
buttonsRight.push('overflowmenu');
}
if (this._shouldShowButton('invite')) {
@ -1288,13 +1286,13 @@ class Toolbox extends Component<Props, State> {
movedButtons.push(...buttonsLeft.splice(
maxNumberOfButtonsPerGroup,
buttonsLeft.length - maxNumberOfButtonsPerGroup));
if (buttonsRight.indexOf('overflowmenu') === -1 && showOverflowMenu) {
if (buttonsRight.indexOf('overflowmenu') === -1) {
buttonsRight.unshift('overflowmenu');
}
}
if (buttonsRight.length > maxNumberOfButtonsPerGroup) {
if (buttonsRight.indexOf('overflowmenu') === -1 && showOverflowMenu) {
if (buttonsRight.indexOf('overflowmenu') === -1) {
buttonsRight.unshift('overflowmenu');
}