BigBlueButton/bigbluebutton-Github
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix presentation toolbar tooltip positions

Browse Source
This commit is contained in:
KDSBrowne 2019-04-13 21:22:47 +00:00
parent 1e76a117cf
commit 8c1d9b6c50
5 changed files with 46 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/component.jsx
View File

@ -5,12 +5,12 @@ import browser from 'browser-detect';
import injectWbResizeEvent from '/imports/ui/components/presentation/resize-wrapper/component';
import Button from '/imports/ui/components/button/component';
import { HUNDRED_PERCENT, MAX_PERCENT, STEP } from '/imports/utils/slideCalcUtils';
import cx from 'classnames';
import { styles } from './styles.scss';
import ZoomTool from './zoom-tool/component';
import FullscreenButton from '../../video-provider/fullscreen-button/component';
import Tooltip from '/imports/ui/components/tooltip/component';
const intlMessages = defineMessages({
previousSlideLabel: {
id: 'app.presentation.presentationToolbar.prevSlideLabel',
@ -227,13 +227,14 @@ class PresentationToolbar extends Component {
onClick={actions.previousSlideHandler}
label={intl.formatMessage(intlMessages.previousSlideLabel)}
hideLabel
className={styles.prevSlide}
className={cx(styles.prevSlide, styles.presentationBtn)}
tooltipDistance={tooltipDistance}
/>
<Tooltip
tooltipDistance={tooltipDistance}
title={intl.formatMessage(intlMessages.selectLabel)}
className={styles.presentationBtn}
>
<select
role="button"
@ -264,7 +265,7 @@ class PresentationToolbar extends Component {
onClick={actions.nextSlideHandler}
label={intl.formatMessage(intlMessages.nextSlideLabel)}
hideLabel
className={styles.skipSlide}
className={cx(styles.skipSlide, styles.presentationBtn)}
tooltipDistance={tooltipDistance}
/>
</div>
@ -299,7 +300,7 @@ class PresentationToolbar extends Component {
: intl.formatMessage(intlMessages.fitToWidth)
}
hideLabel
className={styles.skipSlide}
className={cx(styles.skipSlide, styles.presentationBtn)}
tooltipDistance={tooltipDistance}
/>
{
@ -310,6 +311,7 @@ class PresentationToolbar extends Component {
elementName={intl.formatMessage(intlMessages.presentationLabel)}
tooltipDistance={tooltipDistance}
dark
className={styles.presentationBtn}
/>
)
}

4
bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/styles.scss
View File

@ -17,6 +17,10 @@
padding-right: .5rem;
}
.presentationBtn {
position: relative;
}
.presentationZoomControls {
justify-content: flex-end;
padding-right: .5rem;

7
bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/zoom-tool/component.jsx
View File

@ -2,6 +2,7 @@ import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
import Button from '/imports/ui/components/button/component';
import cx from 'classnames';
import { styles } from '../styles.scss';
import HoldButton from './holdButton/component';
@ -214,7 +215,7 @@ class ZoomTool extends Component {
icon="substract"
onClick={() => { }}
disabled={(zoomValue <= minBound)}
className={styles.prevSlide}
className={cx(styles.prevSlide, styles.presentationBtn)}
tooltipDistance={tooltipDistance}
hideLabel
/>
@ -230,7 +231,7 @@ class ZoomTool extends Component {
size="md"
onClick={() => this.resetZoom()}
label={intl.formatMessage(intlMessages.resetZoomLabel)}
className={styles.zoomPercentageDisplay}
className={cx(styles.zoomPercentageDisplay, styles.presentationBtn)}
tooltipDistance={tooltipDistance}
hideLabel
/>
@ -251,7 +252,7 @@ class ZoomTool extends Component {
icon="add"
onClick={() => { }}
disabled={(zoomValue >= maxBound)}
className={styles.skipSlide}
className={cx(styles.skipSlide, styles.presentationBtn)}
tooltipDistance={tooltipDistance}
hideLabel
/>

61
bigbluebutton-html5/imports/ui/components/tooltip/component.jsx
View File

@ -55,10 +55,6 @@ class Tooltip extends Component {
this.onShow = this.onShow.bind(this);
this.onHide = this.onHide.bind(this);
this.handleEscapeHide = this.handleEscapeHide.bind(this);
this.state = {
enableAnimation: Settings.application.animations,
};
}
componentDidMount() {
@ -67,11 +63,12 @@ class Tooltip extends Component {
title,
tooltipDistance,
} = this.props;
const { enableAnimation } = this.state;
const { animations } = Settings.application;
let distance = 0;
if (tooltipDistance < 0) {
if (enableAnimation) distance = 10;
if (animations) distance = 10;
else distance = 20;
} else {
distance = tooltipDistance;
@ -81,8 +78,8 @@ class Tooltip extends Component {
placement: position,
performance: true,
content: title,
delay: enableAnimation ? ANIMATION_DELAY : [ANIMATION_DELAY[0], 0],
duration: enableAnimation ? ANIMATION_DURATION : 0,
delay: animations ? ANIMATION_DELAY : [ANIMATION_DELAY[0], 0],
duration: animations ? ANIMATION_DURATION : 0,
onShow: this.onShow,
onHide: this.onHide,
wait: Tooltip.wait,
@ -92,41 +89,43 @@ class Tooltip extends Component {
arrow: true,
arrowType: 'sharp',
aria: null,
animation: enableAnimation ? DEFAULT_ANIMATION : ANIMATION_NONE,
animation: animations ? DEFAULT_ANIMATION : ANIMATION_NONE,
};
this.tooltip = Tippy(`#${this.tippySelectorId}`, options);
}
componentDidUpdate() {
const { enableAnimation } = this.state;
const { animations } = Settings.application;
const { title } = this.props;
const elements = document.querySelectorAll('[id^="tippy-"]');
if (animations !== enableAnimation) {
const elements = document.querySelectorAll('[id^="tippy-"]');
Array.from(elements).filter((e) => {
const instance = e._tippy;
Array.from(elements).filter((e) => {
const instance = e._tippy;
if (!instance) return false;
if (!instance) return false;
const animation = animations ? DEFAULT_ANIMATION : ANIMATION_NONE;
const animation = animations ? DEFAULT_ANIMATION : ANIMATION_NONE;
if (animation === instance.props.animation) return false;
if (animation === instance.props.animation) return false;
return true;
}).forEach((e) => {
const instance = e._tippy;
instance.set({
animation: animations
? DEFAULT_ANIMATION : ANIMATION_NONE,
distance: animations ? 10 : 20,
delay: animations ? ANIMATION_DELAY : [ANIMATION_DELAY[0], 0],
duration: animations ? ANIMATION_DURATION : 0,
});
return true;
}).forEach((e) => {
const instance = e._tippy;
instance.set({
animation: animations
? DEFAULT_ANIMATION : ANIMATION_NONE,
distance: animations ? 10 : 20,
delay: animations ? ANIMATION_DELAY : [ANIMATION_DELAY[0], 0],
duration: animations ? ANIMATION_DURATION : 0,
});
this.setEnableAnimation(animations);
}
// adjusts the distance for tooltips on the presentation toolbar
Object.entries(instance.reference.classList).reduce((acc, [key]) => {
if (!instance.reference.classList[key].match(/(presentationBtn)/)) return false;
instance.set({ distance: animations ? 35 : 45 });
return true;
});
});
const elem = document.getElementById(this.tippySelectorId);
if (elem._tippy) elem._tippy.set({ content: title });
@ -140,10 +139,6 @@ class Tooltip extends Component {
document.removeEventListener('keyup', this.handleEscapeHide);
}
setEnableAnimation(enableAnimation) {
this.setState({ enableAnimation });
}
handleEscapeHide(e) {
if (e.keyCode !== ESCAPE) return;
this.tooltip.tooltips[0].hide();

5
bigbluebutton-html5/imports/ui/components/video-provider/fullscreen-button/component.jsx
View File

@ -17,11 +17,13 @@ const propTypes = {
handleFullscreen: PropTypes.func.isRequired,
dark: PropTypes.bool,
elementName: PropTypes.string,
className: PropTypes.string,
};
const defaultProps = {
dark: false,
elementName: '',
className: '',
};
const FullscreenButtonComponent = ({
@ -30,6 +32,7 @@ const FullscreenButtonComponent = ({
dark,
elementName,
tooltipDistance,
className,
}) => {
const formattedLabel = intl.formatMessage(
intlMessages.fullscreenButton,
@ -51,7 +54,7 @@ const FullscreenButtonComponent = ({
onClick={handleFullscreen}
label={formattedLabel}
hideLabel
className={cx(styles.button, styles.fullScreenButton)}
className={cx(styles.button, styles.fullScreenButton, className)}
tooltipDistance={tooltipDistance}
/>
</div>