add browser/os class to <body> / center indicator icons in edge
This commit is contained in:
KDSBrowne
parent
a1cac0bfb9
commit
addcb86b12
@ -5,7 +5,7 @@ import { defineMessages, injectIntl, intlShape } from 'react-intl';
|
||||
import Modal from 'react-modal';
|
||||
import cx from 'classnames';
|
||||
import Resizable from 're-resizable';
|
||||
|
||||
import browser from 'browser-detect';
|
||||
import ToastContainer from '../toast/container';
|
||||
import ModalContainer from '../modal/container';
|
||||
import NotificationsBarContainer from '../notifications-bar/container';
|
||||
@ -79,6 +79,11 @@ class App extends Component {
|
||||
document.getElementsByTagName('html')[0].lang = locale;
|
||||
document.getElementsByTagName('html')[0].style.fontSize = this.props.fontSize;
|
||||
|
||||
const BROWSER_RESULTS = browser();
|
||||
const body = document.getElementsByTagName('body')[0];
|
||||
body.classList.add(`browser-${BROWSER_RESULTS.name}`);
|
||||
body.classList.add(`os-${BROWSER_RESULTS.os.split(' ')[0].toLowerCase()}`);
|
||||
|
||||
this.handleWindowResize();
|
||||
window.addEventListener('resize', this.handleWindowResize, false);
|
||||
}
|
||||
@ -90,7 +95,7 @@ class App extends Component {
|
||||
handleWindowResize() {
|
||||
const { enableResize } = this.state;
|
||||
const shouldEnableResize = !window.matchMedia(MOBILE_MEDIA).matches;
|
||||
if(enableResize === shouldEnableResize) return;
|
||||
if (enableResize === shouldEnableResize) return;
|
||||
|
||||
this.setState({ enableResize: shouldEnableResize });
|
||||
}
|
||||
@ -166,8 +171,16 @@ class App extends Component {
|
||||
maxWidth="20%"
|
||||
ref={(node) => { this.resizableUserList = node; }}
|
||||
className={styles.resizableUserList}
|
||||
enable={{ top: false, right: true, bottom: false, left: false, topRight: false,
|
||||
bottomRight: false, bottomLeft: false, topLeft: false }}
|
||||
enable={{
|
||||
top: false,
|
||||
right: true,
|
||||
bottom: false,
|
||||
left: false,
|
||||
topRight: false,
|
||||
bottomRight: false,
|
||||
bottomLeft: false,
|
||||
topLeft: false,
|
||||
}}
|
||||
onResize={(e, direction, ref) => {
|
||||
const { compactUserList } = this.state;
|
||||
const shouldBeCompact = ref.clientWidth <= USERLIST_COMPACT_WIDTH;
|
||||
@ -202,13 +215,21 @@ class App extends Component {
|
||||
|
||||
return (
|
||||
<Resizable
|
||||
defaultSize={{width: "22.5%"}}
|
||||
defaultSize={{ width: '22.5%' }}
|
||||
minWidth="15%"
|
||||
maxWidth="30%"
|
||||
ref={(node) => { this.resizableChat = node; }}
|
||||
className={styles.resizableChat}
|
||||
enable={{ top: false, right: true, bottom: false, left: false, topRight: false,
|
||||
bottomRight: false, bottomLeft: false, topLeft: false }}
|
||||
enable={{
|
||||
top: false,
|
||||
right: true,
|
||||
bottom: false,
|
||||
left: false,
|
||||
topRight: false,
|
||||
bottomRight: false,
|
||||
bottomLeft: false,
|
||||
topLeft: false,
|
||||
}}
|
||||
>
|
||||
{this.renderChat()}
|
||||
</Resizable>
|
||||
|
||||
@ -11,6 +11,15 @@ $user-indicator-voice-bg: $color-success;
|
||||
$user-indicator-muted-bg: $color-danger;
|
||||
$user-list-bg: $color-off-white;
|
||||
|
||||
//used to center indicator icon in Chrome / Firefox
|
||||
$indicator-padding: .425rem;
|
||||
|
||||
//used to center indicator icon in Edge
|
||||
$indicator-padding-right: 1.2em;
|
||||
$indicator-padding-left: 0.175em;
|
||||
$indicator-padding-top: 0.7em;
|
||||
$indicator-padding-bottom: 0.6em;
|
||||
|
||||
.avatar {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
@ -66,7 +75,7 @@ $user-list-bg: $color-off-white;
|
||||
right: auto;
|
||||
border-radius: 5px;
|
||||
background-color: $user-indicator-presenter-bg;
|
||||
padding: .425rem;
|
||||
padding: $indicator-padding;
|
||||
}
|
||||
}
|
||||
|
||||
@ -94,7 +103,15 @@ $user-list-bg: $color-off-white;
|
||||
&:after {
|
||||
content: "\00a0\e90c\00a0";
|
||||
opacity: 1;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.listenOnly .muted .voice .presenter {
|
||||
:global(.browser-edge) &:before {
|
||||
padding-top: $indicator-padding-top;
|
||||
padding-bottom: $indicator-padding-bottom;
|
||||
padding-left: $indicator-padding-left;
|
||||
padding-right: $indicator-padding-right;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
15
bigbluebutton-html5/package-lock.json
generated
15
bigbluebutton-html5/package-lock.json
generated
@ -401,6 +401,21 @@
|
||||
"concat-map": "0.0.1"
|
||||
}
|
||||
},
|
||||
"browser-detect": {
|
||||
"version": "0.2.27",
|
||||
"resolved": "https://registry.npmjs.org/browser-detect/-/browser-detect-0.2.27.tgz",
|
||||
"integrity": "sha512-qjOSrFROblMbGhFbS1U7DkszptdRxAH7O9I3zZPT6oIbZKjhrudj+ZRuiQkuVtXs1/HEgMv+2zJuxZIsn/bLhQ==",
|
||||
"requires": {
|
||||
"core-js": "2.5.7"
|
||||
},
|
||||
"dependencies": {
|
||||
"core-js": {
|
||||
"version": "2.5.7",
|
||||
"resolved": "https://registry.npmjs.org/core-js/-/core-js-2.5.7.tgz",
|
||||
"integrity": "sha512-RszJCAxg/PP6uzXVXL6BsxSXx/B05oJAQ2vkJRjyjrEcNVycaqOmNb5OTxZPE3xa5gwZduqza6L9JOCenh/Ecw=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"browserslist": {
|
||||
"version": "2.11.3",
|
||||
"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-2.11.3.tgz",
|
||||
|
||||
@ -29,6 +29,7 @@
|
||||
"need to investigate"
|
||||
],
|
||||
"babel-runtime": "~6.26.0",
|
||||
"browser-detect": "^0.2.27",
|
||||
"classnames": "~2.2.5",
|
||||
"clipboard": "~1.7.1",
|
||||
"core-js": "~2.5.3",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user