Better alignments of the panel hearder contents

elastic · Sep 27, 2019 · b0e4cb4 · b0e4cb4
1 parent b331cd0
commit b0e4cb4
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 15 deletions.
diff --git a/src/plugins/embeddable/public/lib/panel/_embeddable_panel.scss b/src/plugins/embeddable/public/lib/panel/_embeddable_panel.scss
@@ -38,13 +38,27 @@
 }
 
 .embPanel__title {
-  @include euiTextTruncate;
   @include euiTitle('xxxs');
+  overflow: hidden;
   line-height: 1.5;
   flex-grow: 1;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
 
   &:not(:empty) {
-    padding: ($euiSizeXS * 1.5) $euiSizeS 0;
+    line-height: $euiSizeL;
+    padding-left: $euiSizeS;
+  }
+
+  .embPanel__titleInner {
+    overflow: hidden;
+    display: flex;
+    padding-right: $euiSizeS;
+  }
+
+  .embPanel__titleText {
+    @include euiTextTruncate;
   }
 }
 
@@ -69,7 +83,7 @@
   */
 
 .embPanel__optionsMenuButton {
-  background-color: transparentize($euiColorDarkestShade, .9);
+  background-color: transparentize($euiColorDarkestShade, 0.9);
   border-bottom-right-radius: 0;
   border-top-left-radius: 0;
 
@@ -78,17 +92,16 @@
   }
 }
 
-.embPanel
-.embPanel__optionsMenuButton {
+.embPanel .embPanel__optionsMenuButton {
   opacity: 0; /* 1 */
 
   &:focus {
     opacity: 1; /* 2 */
   }
 }
 
-.embPanel__optionsMenuPopover[class*="-isOpen"],
-.embPanel:hover  {
+.embPanel__optionsMenuPopover[class*='-isOpen'],
+.embPanel:hover {
   .embPanel__optionsMenuButton {
     opacity: 1;
   }
@@ -127,4 +140,4 @@
   overflow: auto;
   text-align: center;
   padding: $euiSizeS;
-}
+}
diff --git a/src/plugins/embeddable/public/lib/panel/panel_header/panel_header.tsx b/src/plugins/embeddable/public/lib/panel/panel_header/panel_header.tsx
@@ -38,6 +38,7 @@ function renderBadges(badges: IAction[], embeddable: IEmbeddable) {
   return badges.map(badge => (
     <EuiBadge
       key={badge.id}
+      className="embPanel__headerBadge"
       iconType={badge.getIconType({ embeddable })}
       onClick={() => badge.execute({ embeddable })}
       onClickAriaLabel={badge.getDisplayName({ embeddable })}
@@ -107,15 +108,20 @@ export function PanelHeader({
           }
         )}
       >
-        {showTitle ? `${title} ` : ''}
-        {renderBadges(badges, embeddable)}
-        {viewDescr !== '' ? (
-          <EuiToolTip content={viewDescr} delay="regular" position="right">
-            <EuiIcon type="iInCircle" />
-          </EuiToolTip>
+        {showTitle || viewDescr ? (
+          <span className="embPanel__titleInner">
+            <span className="embPanel__titleText">{title}</span>
+
+            {viewDescr !== '' && (
+              <EuiToolTip content={viewDescr} delay="regular" position="right">
+                <EuiIcon type="iInCircle" />
+              </EuiToolTip>
+            )}
+          </span>
         ) : (
-          ''
+          undefined
         )}
+        {renderBadges(badges, embeddable)}
       </div>
 
       <PanelOptionsMenu