Merge pull request #12 from andreadelrio/dndFlyouts

Clean up flyouts

Author: ThomThomson

src/plugins/presentation_util/public/components/controls/control_group/control_group_strings.ts

@@ -52,6 +52,10 @@ export const ControlGroupStrings = {
       i18n.translate('presentationUtil.inputControls.controlGroup.management.designTitle', {
         defaultMessage: 'Design',
       }),
+    getWidthTitle: () =>
+      i18n.translate('presentationUtil.inputControls.controlGroup.management.widthTitle', {
+        defaultMessage: 'Width',
+      }),
     getLayoutTitle: () =>
       i18n.translate('presentationUtil.inputControls.controlGroup.management.layoutTitle', {
         defaultMessage: 'Layout',

src/plugins/presentation_util/public/components/controls/control_group/editor/manage_control.tsx

@@ -86,7 +86,7 @@ export const ManageControlComponent = ({
           </EuiFormRow>
           <EuiFormRow label={ControlGroupStrings.manageControl.getWidthInputTitle()}>
             <EuiButtonGroup
-              buttonSize="compressed"
+              color="primary"
               legend={ControlGroupStrings.management.controlWidth.getWidthSwitchLegend()}
               options={CONTROL_WIDTH_OPTIONS}
               idSelected={currentWidth}
@@ -102,17 +102,18 @@ export const ManageControlComponent = ({
             controlEditorComponent({ setValidState: setControlEditorValid })}
           <EuiSpacer size="l" />
           {removeControl && (
-            <EuiButton
+            <EuiButtonEmpty
               aria-label={`delete-${title}`}
               iconType="trash"
+              flush="left"
               color="danger"
               onClick={() => {
                 onCancel();
                 removeControl();
               }}
             >
               {ControlGroupStrings.management.getDeleteButtonTitle()}
-            </EuiButton>
+            </EuiButtonEmpty>
           )}
         </EuiForm>
       </EuiFlyoutBody>

src/plugins/presentation_util/public/components/controls/control_group/editor/manage_control_group_component.tsx

@@ -13,11 +13,12 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiButtonGroup,
-  EuiFormLabel,
+  EuiFormRow,
   EuiFlyoutHeader,
   EuiTitle,
   EuiFlyoutBody,
   EuiSpacer,
+  EuiSwitch,
 } from '@elastic/eui';
 
 import { ControlsPanels } from '../types';
@@ -29,6 +30,7 @@ interface ManageControlGroupProps {
   panels: ControlsPanels;
   controlStyle: ControlStyle;
   deleteAllEmbeddables: () => void;
+  onClose: () => void;
   setControlStyle: (style: ControlStyle) => void;
   setAllPanelWidths: (newWidth: ControlWidth) => void;
 }
@@ -37,11 +39,13 @@ export const ManageControlGroup = ({
   panels,
   controlStyle,
   setControlStyle,
+  onClose,
   setAllPanelWidths,
   deleteAllEmbeddables,
 }: ManageControlGroupProps) => {
   const [currentControlStyle, setCurrentControlStyle] = useState<ControlStyle>(controlStyle);
   const [selectedWidth, setSelectedWidth] = useState<ControlWidth>();
+  const [selectionDisplay, setSelectionDisplay] = useState(false);
 
   useMount(() => {
     if (!panels || Object.keys(panels).length === 0) return;
@@ -59,55 +63,54 @@ export const ManageControlGroup = ({
         </EuiTitle>
       </EuiFlyoutHeader>
       <EuiFlyoutBody>
-        <EuiTitle size="s">
-          <h3>{ControlGroupStrings.management.getDesignTitle()}</h3>
-        </EuiTitle>
-        <EuiSpacer size="s" />
-        <EuiButtonGroup
-          legend={ControlGroupStrings.management.controlStyle.getDesignSwitchLegend()}
-          options={CONTROL_LAYOUT_OPTIONS}
-          idSelected={currentControlStyle}
-          onChange={(newControlStyle) => {
-            setControlStyle(newControlStyle as ControlStyle);
-            setCurrentControlStyle(newControlStyle as ControlStyle);
-          }}
-        />
+        <EuiFormRow label={ControlGroupStrings.management.getLayoutTitle()}>
+          <EuiButtonGroup
+            color="primary"
+            legend={ControlGroupStrings.management.controlStyle.getDesignSwitchLegend()}
+            options={CONTROL_LAYOUT_OPTIONS}
+            idSelected={currentControlStyle}
+            onChange={(newControlStyle) => {
+              setControlStyle(newControlStyle as ControlStyle);
+              setCurrentControlStyle(newControlStyle as ControlStyle);
+            }}
+          />
+        </EuiFormRow>
         <EuiSpacer size="m" />
-        <EuiTitle size="s">
-          <h3>{ControlGroupStrings.management.getLayoutTitle()}</h3>
-        </EuiTitle>
-        <EuiSpacer size="s" />
-
-        <EuiFlexGroup alignItems="center" justifyContent="flexEnd">
-          <EuiFlexItem grow={false}>
-            <EuiFormLabel>
-              {ControlGroupStrings.management.controlWidth.getChangeAllControlWidthsTitle()}
-            </EuiFormLabel>
-          </EuiFlexItem>
-          <EuiFlexItem grow={false}>
+        <EuiFormRow label={ControlGroupStrings.management.getWidthTitle()}>
+          <EuiSwitch
+            label={ControlGroupStrings.management.controlWidth.getChangeAllControlWidthsTitle()}
+            checked={selectionDisplay}
+            onChange={() => setSelectionDisplay(!selectionDisplay)}
+          />
+        </EuiFormRow>
+        {selectionDisplay ? (
+          <>
+            <EuiSpacer size="s" />
             <EuiButtonGroup
+              color="primary"
               idSelected={selectedWidth ?? ''}
-              buttonSize="compressed"
               legend={ControlGroupStrings.management.controlWidth.getWidthSwitchLegend()}
               options={CONTROL_WIDTH_OPTIONS}
               onChange={(newWidth: string) => {
                 setAllPanelWidths(newWidth as ControlWidth);
                 setSelectedWidth(newWidth as ControlWidth);
               }}
             />
-          </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <EuiButtonEmpty
-              onClick={deleteAllEmbeddables}
-              aria-label={'delete-all'}
-              iconType="trash"
-              color="danger"
-              size="s"
-            >
-              {ControlGroupStrings.management.getDeleteAllButtonTitle()}
-            </EuiButtonEmpty>
-          </EuiFlexItem>
-        </EuiFlexGroup>
+          </>
+        ) : undefined}
+
+        <EuiSpacer size="xl" />
+
+        <EuiButtonEmpty
+          onClick={deleteAllEmbeddables}
+          aria-label={'delete-all'}
+          iconType="trash"
+          flush="left"
+          color="danger"
+          size="s"
+        >
+          {ControlGroupStrings.management.getDeleteAllButtonTitle()}
+        </EuiButtonEmpty>
       </EuiFlyoutBody>
     </>
   );