[Embeddables] Time range per panel design fixes (#46630) (#46877)

* Fix loading state * Fix modal’s footer button spacing * Better alignments of the panel header contents * Fix alignment of badge if title doesn’t exist
elastic · Sep 28, 2019 · 187e213 · 187e213
1 parent 9eeeb24
commit 187e213
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 44 deletions.
diff --git a/src/plugins/embeddable/public/lib/containers/embeddable_child_panel.tsx b/src/plugins/embeddable/public/lib/containers/embeddable_child_panel.tsx
@@ -86,8 +86,8 @@ export class EmbeddableChildPanel extends React.Component<EmbeddableChildPanelPr
   }
 
   public render() {
-    const classes = classNames('embPanel embPanel__content', {
-      'embPanel__content-isLoading': this.state.loading,
+    const classes = classNames('embPanel', {
+      'embPanel-isLoading': this.state.loading,
     });
 
     return (

diff --git a/src/plugins/embeddable/public/lib/panel/_embeddable_panel.scss b/src/plugins/embeddable/public/lib/panel/_embeddable_panel.scss
@@ -7,6 +7,12 @@
   min-height: $euiSizeL + 2px; // + 2px to account for border
   position: relative;
 
+  &-isLoading {
+    // completely center the loading indicator
+    justify-content: center;
+    align-items: center;
+  }
+
   // SASSTODO: The inheritence factor stemming from embeddables makes this class hard to change
   .embPanel__content {
     display: flex;
@@ -20,12 +26,6 @@
   .embPanel__content--fullWidth {
     width: 100%;
   }
-
-  .embPanel__content-isLoading {
-    // completely center the loading indicator
-    justify-content: center;
-    align-items: center;
-  }
 }
 
 // HEADER
@@ -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: center;
 
   &: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 })}
@@ -60,13 +61,13 @@ export function PanelHeader({
   badges,
   embeddable,
 }: PanelHeaderProps) {
-  const classes = classNames('embPanel__header', {
-    'embPanel__header--floater': !title || hidePanelTitles,
-  });
-
   const showTitle = !isViewMode || (title && !hidePanelTitles);
   const showPanelBar = badges.length > 0 || showTitle;
 
+  const classes = classNames('embPanel__header', {
+    'embPanel__header--floater': !showPanelBar,
+  });
+
   if (!showPanelBar) {
     return (
       <div className={classes}>
@@ -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

diff --git a/.../legacy/plugins/advanced_ui_actions/public/np_ready/public/customize_time_range_modal.tsx b/.../legacy/plugins/advanced_ui_actions/public/np_ready/public/customize_time_range_modal.tsx
@@ -130,23 +130,26 @@ export class CustomizeTimeRangeModal extends Component<CustomizeTimeRangeProps,
           </EuiFormRow>
         </EuiModalBody>
         <EuiModalFooter>
-          <EuiFlexGroup gutterSize="s" responsive={false}>
-            <EuiFlexItem>
-              <EuiButtonEmpty
-                onClick={this.inheritFromParent}
-                color="danger"
-                data-test-subj="removePerPanelTimeRangeButton"
-                disabled={this.state.inheritTimeRange}
-              >
-                {i18n.translate(
-                  'xpack.advancedUiActions.customizePanelTimeRange.modal.removeButtonTitle',
-                  {
-                    defaultMessage: 'Remove',
-                  }
-                )}
-              </EuiButtonEmpty>
+          <EuiFlexGroup gutterSize="s" responsive={false} justifyContent="spaceBetween">
+            <EuiFlexItem grow={true}>
+              <div>
+                <EuiButtonEmpty
+                  onClick={this.inheritFromParent}
+                  color="danger"
+                  data-test-subj="removePerPanelTimeRangeButton"
+                  disabled={this.state.inheritTimeRange}
+                  flush="left"
+                >
+                  {i18n.translate(
+                    'xpack.advancedUiActions.customizePanelTimeRange.modal.removeButtonTitle',
+                    {
+                      defaultMessage: 'Remove',
+                    }
+                  )}
+                </EuiButtonEmpty>
+              </div>
             </EuiFlexItem>
-            <EuiFlexItem>
+            <EuiFlexItem grow={false}>
               <EuiButtonEmpty onClick={this.cancel} data-test-subj="cancelPerPanelTimeRangeButton">
                 {i18n.translate(
                   'xpack.advancedUiActions.customizePanelTimeRange.modal.cancelButtonTitle',
@@ -156,7 +159,7 @@ export class CustomizeTimeRangeModal extends Component<CustomizeTimeRangeProps,
                 )}
               </EuiButtonEmpty>
             </EuiFlexItem>
-            <EuiFlexItem>
+            <EuiFlexItem grow={false}>
               <EuiButton data-test-subj="addPerPanelTimeRangeButton" onClick={this.addToPanel} fill>
                 {this.state.inheritTimeRange
                   ? i18n.translate(