fix(FEC-10247): top bar element located in the middle instead of righ…

…t side (#522) 1. Align the top-bar style with the bottom-bar (revert 02ad5f2#diff-8603f12b92b47205f68a068e1207dc7aL2 as cannot reproduce its undocumented issue) 2. add to share the missing `controlButtonContainer` class (seems it removed incorrectly in 9358460#diff-10c74714b78c05c56abedc5895abdc5eL96)
kaltura · Jun 29, 2020 · b1af61a · b1af61a
1 parent bb4819f
commit b1af61a
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 23 deletions.
diff --git a/src/components/share/share.js b/src/components/share/share.js
@@ -92,27 +92,25 @@ class Share extends Component {
     }
     const shareConfig = this._getMergedShareConfig();
     const portalSelector = `#${this.props.player.config.targetId} .overlay-portal`;
-    return (
-      <div>
-        {this.state.overlay ? (
-          createPortal(
-            <ShareOverlay
-              shareUrl={shareUrl}
-              embedUrl={embedUrl}
-              enableTimeOffset={enableTimeOffset}
-              socialNetworks={shareConfig}
-              player={this.props.player}
-              onClose={() => this.toggleOverlay()}
-            />,
-            document.querySelector(portalSelector)
-          )
-        ) : (
-          <Tooltip label={this.props.shareTxt} type={ToolTipType.BottomLeft}>
-            <Button aria-haspopup="true" className={style.controlButton} onClick={() => this.toggleOverlay()} aria-label={this.props.shareTxt}>
-              <Icon type={IconType.Share} />
-            </Button>
-          </Tooltip>
-        )}
+    return this.state.overlay ? (
+      createPortal(
+        <ShareOverlay
+          shareUrl={shareUrl}
+          embedUrl={embedUrl}
+          enableTimeOffset={enableTimeOffset}
+          socialNetworks={shareConfig}
+          player={this.props.player}
+          onClose={() => this.toggleOverlay()}
+        />,
+        document.querySelector(portalSelector)
+      )
+    ) : (
+      <div className={style.controlButtonContainer}>
+        <Tooltip label={this.props.shareTxt} type={ToolTipType.BottomLeft}>
+          <Button aria-haspopup="true" className={style.controlButton} onClick={() => this.toggleOverlay()} aria-label={this.props.shareTxt}>
+            <Icon type={IconType.Share} />
+          </Button>
+        </Tooltip>
       </div>
     );
   }

diff --git a/src/components/top-bar/_top-bar.scss b/src/components/top-bar/_top-bar.scss
@@ -5,8 +5,6 @@
   opacity: 0;
   visibility: hidden;
   transition: 100ms opacity;
-  display: flex;
-  justify-content: space-between;
   width: 100%;
   position: absolute;
   top: 0;
@@ -21,10 +19,12 @@
   }
 
   .left-controls {
+    float: left;
     text-align: left;
     min-width: 0;
   }
   .right-controls {
+    float: right;
     text-align: left;
 
     .control-button-container {