Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Clean up flyouts #12

Merged
merged 1 commit into from
Oct 4, 2021
Merged

Clean up flyouts #12

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions ...ugins/presentation_util/public/components/controls/control_group/control_group_strings.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
7 changes: 4 additions & 3 deletions ...gins/presentation_util/public/components/controls/control_group/editor/manage_control.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand All @@ -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>
Expand Down
83 changes: 43 additions & 40 deletions ...n_util/public/components/controls/control_group/editor/manage_control_group_component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,12 @@ import {
EuiFlexGroup,
EuiFlexItem,
EuiButtonGroup,
EuiFormLabel,
EuiFormRow,
EuiFlyoutHeader,
EuiTitle,
EuiFlyoutBody,
EuiSpacer,
EuiSwitch,
} from '@elastic/eui';

import { ControlsPanels } from '../types';
Expand All @@ -29,6 +30,7 @@ interface ManageControlGroupProps {
panels: ControlsPanels;
controlStyle: ControlStyle;
deleteAllEmbeddables: () => void;
onClose: () => void;
setControlStyle: (style: ControlStyle) => void;
setAllPanelWidths: (newWidth: ControlWidth) => void;
}
Expand All @@ -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;
Expand All @@ -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>
</>
);
Expand Down