Merge pull request elastic#11 from andreadelrio/dndControls-design-1

[Controls] dnd clone design improvements
andreadelrio · Sep 28, 2021 · 1aaae93 · 1aaae93
2 parents 6aba47e + 3fce9cf
commit 1aaae93
Show file tree

Hide file tree

Showing 4 changed files with 91 additions and 23 deletions.
diff --git a/...ns/presentation_util/public/components/controls/control_frame/control_frame_component.tsx b/...ns/presentation_util/public/components/controls/control_frame/control_frame_component.tsx
@@ -88,7 +88,9 @@ export const ControlFrame = ({
         <>
           {customPrepend ?? null}
           {usingTwoLineLayout ? undefined : (
-            <EuiFormLabel htmlFor={embeddableId}>{title}</EuiFormLabel>
+            <EuiFormLabel className="controlFrame--formControlLayout__label" htmlFor={embeddableId}>
+              {title}
+            </EuiFormLabel>
           )}
         </>
       }

diff --git a/...ation_util/public/components/controls/control_group/component/control_group_component.tsx b/...ation_util/public/components/controls/control_group/component/control_group_component.tsx
@@ -123,7 +123,11 @@ export const ControlGroup = ({ controlGroupContainer }: ControlGroupProps) => {
           </SortableContext>
           <DragOverlay>
             {draggingId ? (
-              <ControlClone embeddableId={draggingId} container={controlGroupContainer} />
+              <ControlClone
+                width={controlGroupContainer.getInput().panels[draggingId].width}
+                embeddableId={draggingId}
+                container={controlGroupContainer}
+              />
             ) : null}
           </DragOverlay>
         </DndContext>

diff --git a/...n_util/public/components/controls/control_group/component/control_group_sortable_item.tsx b/...n_util/public/components/controls/control_group/component/control_group_sortable_item.tsx
@@ -6,7 +6,13 @@
  * Side Public License, v 1.
  */
 
-import { EuiFlexItem, EuiFormControlLayout, EuiFormLabel, EuiIcon } from '@elastic/eui';
+import {
+  EuiFlexItem,
+  EuiFormControlLayout,
+  EuiFormLabel,
+  EuiIcon,
+  EuiFlexGroup,
+} from '@elastic/eui';
 import React, { forwardRef, HTMLAttributes } from 'react';
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
@@ -118,26 +124,34 @@ const SortableControlInner = forwardRef<
 export const ControlClone = ({
   embeddableId,
   container,
+  width,
 }: {
   embeddableId: string;
   container: ControlGroupContainer;
+  width: ControlWidth;
 }) => {
   const embeddable = useChildEmbeddable({ embeddableId, container });
-
+  const layout = container.getInput().controlStyle;
   return (
-    <EuiFlexItem className={'controlFrame--cloneWrapper'}>
-      <EuiFormControlLayout
-        className={'controlFrame--formControlLayout'}
-        fullWidth
-        prepend={
-          <>
-            <button className="controlFrame--dragHandle">
-              <EuiIcon type="grabHorizontal" />
-            </button>
-            <EuiFormLabel htmlFor={embeddableId}>{embeddable?.getInput().title}</EuiFormLabel>
-          </>
-        }
-      />
+    <EuiFlexItem
+      className={classNames('controlFrame--cloneWrapper', {
+        'controlFrame--cloneWrapper-small': width === 'small',
+        'controlFrame--cloneWrapper-medium': width === 'medium',
+        'controlFrame--cloneWrapper-large': width === 'large',
+        'controlFrame--cloneWrapper-twoLine': layout === 'twoLine',
+      })}
+    >
+      {layout === 'twoLine' ? (
+        <EuiFormLabel>{embeddable?.getInput().title}</EuiFormLabel>
+      ) : undefined}
+      <EuiFlexGroup gutterSize="none" className={'controlFrame--draggable'}>
+        <EuiFlexItem grow={false}>
+          <EuiIcon type="grabHorizontal" className="controlFrame--dragHandle" />
+        </EuiFlexItem>
+        {container.getInput().controlStyle === 'oneLine' ? (
+          <EuiFlexItem>{embeddable?.getInput().title}</EuiFlexItem>
+        ) : undefined}
+      </EuiFlexGroup>
     </EuiFlexItem>
   );
 };
diff --git a/src/plugins/presentation_util/public/components/controls/control_group/control_group.scss b/src/plugins/presentation_util/public/components/controls/control_group/control_group.scss
@@ -1,17 +1,57 @@
+$smallControl: $euiSize * 14;
+$mediumControl: $euiSize * 25;
+$largeControl: $euiSize * 50;
+$controlMinWidth: $euiSize * 14;
 
 .controlGroup {
   margin-left: $euiSizeXS;
   overflow-x: clip; // sometimes when using auto width, removing a control can cause a horizontal scrollbar to appear.
+  min-height: $euiSize * 4;
+  padding: $euiSize 0;
 }
 
 .controlFrame--cloneWrapper {
   width: max-content;
 
   .euiFormLabel {
+    padding-bottom: $euiSizeXS;
+  }
+
+  &-small {
+    width: $smallControl;
+  }
+
+  &-medium {
+    width: $mediumControl;
+  }
+
+  &-large {
+    width: $largeControl;
+  }
+
+  &-twoLine {
+    margin-top: -$euiSize * 1.25;
+  }
+
+  .euiFormLabel, div {
     cursor: grabbing !important; // prevents cursor flickering while dragging the clone
   }
 
-  .controlFrame--formControlLayout {
+  .controlFrame--draggable {
+    cursor: grabbing;
+    height: $euiButtonHeight;
+    align-items: center;
+    border-radius: 6px;
+    @include euiFontSizeS;
+    font-weight: $euiFontWeightSemiBold;
+    box-shadow:
+      #{$euiFormControlBoxShadow},
+      inset 0 0 0 1px $euiFormBorderColor;
+    background-color: $euiFormInputGroupLabelBackground;
+    min-width: $controlMinWidth;
+  }
+
+  .controlFrame--formControlLayout, .controlFrame--draggable {
     &-clone {
       box-shadow: 0 0 0 1px $euiShadowColor,
         0 1px 6px 0 $euiShadowColor;
@@ -31,9 +71,14 @@
 
   .controlFrame--formControlLayout {
     width: 100%;
-    min-width: $euiSize * 14;
+    min-width: $controlMinWidth;
     transition:background-color .1s, color .1s;
 
+    &__label {
+      @include euiTextTruncate;
+      max-width: 50%;
+    }
+
     &:not(.controlFrame--formControlLayout-clone) {
       .controlFrame--dragHandle {
         cursor: grab;
@@ -50,24 +95,26 @@
     }
   }
 
+
+
   &-small {
-    width: $euiSize * 14;
+    width: $smallControl;
   }
 
   &-medium {
-    width: $euiSize * 25;
+    width: $mediumControl;
   }
 
   &-large {
-    width: $euiSize * 50;
+    width: $largeControl;
   }
 
   &-insertBefore,
   &-insertAfter {
     .controlFrame--formControlLayout:after {
       content: '';
       position: absolute;
-      background-color: transparentize($euiColorSecondary, .5);
+      background-color: transparentize($euiColorPrimary, .5);
       border-radius: $euiBorderRadius;
       top: 0;
       bottom: 0;
@@ -127,6 +174,7 @@
     .controlFrame--formControlLayout {
       background-color: $euiColorEmptyShade !important;
       color: transparent !important;
+      box-shadow: none;
 
       .euiFormLabel {
         opacity: 0;