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

Implement ToolboxItem features: disabled, tooltip with label

This commit is contained in:
Bettenbuk Zoltan 2018-06-28 15:25:58 +02:00 committed by Saúl Ibarra Corretgé
parent baa2c217de
commit e59761baa2
4 changed files with 31 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
css/_toolbars.scss
View File

@ -120,6 +120,12 @@
height: 22px; height: 22px;
padding: 5px 12px; padding: 5px 12px;
div {
display: flex;
flex-direction: row;
align-items: center;
}
&:hover { &:hover {
background: #313D52; background: #313D52;
} }

2
react/features/base/toolbox/components/AbstractButton.js
View File

@ -114,7 +114,7 @@ export default class AbstractButton<P: Props, S: *> extends Component<P, S> {
* *
* @abstract * @abstract
*/ */
tooltip: string; tooltip: ?string;
/** /**
* Initializes a new {@code AbstractButton} instance. * Initializes a new {@code AbstractButton} instance.

2
react/features/base/toolbox/components/AbstractToolboxItem.js
View File

@ -75,7 +75,7 @@ export type Props = {
/** /**
* The text to display in the tooltip. Used only on web. * The text to display in the tooltip. Used only on web.
*/ */
tooltip: string, tooltip: ?string,
/** /**
* From which direction the tooltip should appear, relative to the * From which direction the tooltip should appear, relative to the

41
react/features/base/toolbox/components/ToolboxItem.web.js
View File

@ -21,23 +21,40 @@ export default class ToolboxItem extends AbstractToolboxItem<Props> {
*/ */
_renderItem() { _renderItem() {
const { const {
disabled,
onClick, onClick,
showLabel showLabel,
tooltipPosition
} = this.props; } = this.props;
const className = showLabel ? 'overflow-menu-item' : 'toolbox-button';
const props = { const props = {
'aria-label': this.accessibilityLabel, 'aria-label': this.accessibilityLabel,
className: showLabel ? 'overflow-menu-item' : 'toolbox-button', className: className + (disabled ? ' disabled' : ''),
onClick onClick: disabled ? undefined : onClick
}; };
const elementType = showLabel ? 'li' : 'div'; const elementType = showLabel ? 'li' : 'div';
const useTooltip = this.tooltip && this.tooltip.length > 0;
// eslint-disable-next-line no-extra-parens // eslint-disable-next-line no-extra-parens
const children = ( let children = (
<Fragment> <Fragment>
{ this._renderIcon() } { this._renderIcon() }
{ showLabel && this.label } { showLabel && <span>
{ this.label }
</span> }
</Fragment> </Fragment>
); );
if (useTooltip) {
// eslint-disable-next-line no-extra-parens
children = (
<Tooltip
content = { this.tooltip }
position = { tooltipPosition }>
{ children }
</Tooltip>
);
}
return React.createElement(elementType, props, children); return React.createElement(elementType, props, children);
} }
@ -48,25 +65,13 @@ export default class ToolboxItem extends AbstractToolboxItem<Props> {
* @returns {ReactElement} * @returns {ReactElement}
*/ */
_renderIcon() { _renderIcon() {
const { iconName, tooltipPosition, showLabel } = this.props; const { iconName, showLabel } = this.props;
const icon = <i className = { iconName } />; const icon = <i className = { iconName } />;
const elementType = showLabel ? 'span' : 'div'; const elementType = showLabel ? 'span' : 'div';
const className const className
= showLabel ? 'overflow-menu-item-icon' : 'toolbox-icon'; = showLabel ? 'overflow-menu-item-icon' : 'toolbox-icon';
const iconWrapper const iconWrapper
= React.createElement(elementType, { className }, icon); = React.createElement(elementType, { className }, icon);
const tooltip = this.tooltip;
const useTooltip = !showLabel && tooltip && tooltip.length > 0;
if (useTooltip) {
return (
<Tooltip
content = { tooltip }
position = { tooltipPosition }>
{ iconWrapper }
</Tooltip>
);
}
return iconWrapper; return iconWrapper;
} }