ref(toolbar): re-wrap buttons for torture tests

The inline classes for the toolbars were re-arranged
to fix non-rounded corners in the always-on-top window's
toolbar. However, those classes were also used by the
torture tests as a way to find stable elements that will
not get blown away by a react re-render. So re-wrap the
buttons with a div that will not get blown away,
add back the inline classes to those divs, and change
the CSS to round the corners in the always-on-top
window's toolbar.
pull/2337/merge jitsi-meet_2724
Leonard Kim 7 years ago committed by Дамян Минков
parent 6146c12533
commit e217c172f8
  1. 3
      css/_toolbars.scss
  2. 2
      react/features/toolbox/components/StatelessToolbarButton.js
  3. 6
      react/features/toolbox/components/ToolbarButton.web.js

@ -153,10 +153,13 @@
@include transform(translateX(-50%));
> a:first-child.button,
> div:first-child .button {
border-bottom-left-radius: 3px;
border-top-left-radius: 3px;
}
> a:last-child.button,
> div:last-child .button {
border-bottom-right-radius: 3px;
border-top-right-radius: 3px;

@ -96,7 +96,7 @@ export default class StatelessToolbarButton extends AbstractToolbarButton {
const attributes = getButtonAttributesByProps(button);
return (
<div className = { `toolbar-button-wrapper ${button.id}-wrapper` }>
<div className = 'toolbar-button'>
<a
{ ...attributes }
onClick = { this._onClick }>

@ -140,7 +140,11 @@ class ToolbarButton extends Component<*> {
);
}
return children;
return (
<div className = { `toolbar-button-wrapper ${button.id}-wrapper` }>
{ children }
</div>
);
}
/**

Loading…
Cancel
Save