maxmustermann/kibana
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

[Controls] Post integration design cleanup (#116511)

Browse source
This commit is contained in:
Andrea Del Rio 2021-10-29 13:52:39 -07:00 committed by GitHub
parent 285cd009a5
commit f32c334ad2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 68 additions and 59 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/plugins/presentation_util/public/components/controls/control_group/component/control_group_component.tsx
View file

@ -108,11 +108,15 @@ export const ControlGroup = () => {
return null;
}
let panelBg: 'subdued' | 'primary' | 'success' = 'subdued';
if (emptyState) panelBg = 'primary';
if (draggingId) panelBg = 'success';
return (
<EuiPanel
borderRadius="m"
color={emptyState ? 'subdued' : undefined}
paddingSize={emptyState ? 'none' : 's'}
color={panelBg}
paddingSize={emptyState ? 's' : 'none'}
className={classNames('controlsWrapper', {
'controlsWrapper--empty': emptyState,
'controlsWrapper--twoLine': controlStyle === 'twoLine',
@ -141,7 +145,7 @@ export const ControlGroup = () => {
<EuiFlexGroup
className={classNames('controlGroup', { 'controlGroup-isDragging': draggingId })}
alignItems="center"
gutterSize={'m'}
gutterSize="s"
wrap={true}
>
{idsInOrder.map(

8
src/plugins/presentation_util/public/components/controls/control_group/component/control_group_sortable_item.tsx
View file

@ -116,11 +116,15 @@ export const ControlClone = ({ draggingId }: { draggingId: string }) => {
})}
>
{controlStyle === 'twoLine' ? <EuiFormLabel>{title}</EuiFormLabel> : undefined}
<EuiFlexGroup gutterSize="none" className={'controlFrame__draggable'}>
<EuiFlexGroup responsive={false} gutterSize="none" className={'controlFrame__draggable'}>
<EuiFlexItem grow={false}>
<EuiIcon type="grabHorizontal" className="controlFrame__dragHandle" />
</EuiFlexItem>
{controlStyle === 'oneLine' ? <EuiFlexItem>{title}</EuiFlexItem> : undefined}
{controlStyle === 'oneLine' ? (
<EuiFlexItem>
<label className="controlFrameCloneWrapper__label">{title}</label>
</EuiFlexItem>
) : undefined}
</EuiFlexGroup>
</EuiFlexItem>
);

26
src/plugins/presentation_util/public/components/controls/control_group/control_group.scss
View file

@ -4,7 +4,6 @@ $largeControl: $euiSize * 50;
$controlMinWidth: $euiSize * 14;
.controlGroup {
overflow-x: clip; // sometimes when using auto width, removing a control can cause a horizontal scrollbar to appear.
min-height: $euiSize * 4;
}
@ -40,10 +39,6 @@ $controlMinWidth: $euiSize * 14;
.controlFrameCloneWrapper {
width: max-content;
.euiFormLabel {
padding-bottom: $euiSizeXS;
}
&--small {
width: $smallControl;
}
@ -60,7 +55,7 @@ $controlMinWidth: $euiSize * 14;
margin-top: -$euiSize * 1.25;
}
.euiFormLabel, div {
&__label {
cursor: grabbing !important; // prevents cursor flickering while dragging the clone
}
@ -69,20 +64,14 @@ $controlMinWidth: $euiSize * 14;
height: $euiButtonHeight;
align-items: center;
border-radius: $euiBorderRadius;
@include euiFontSizeS;
font-weight: $euiFontWeightSemiBold;
@include euiFormControlDefaultShadow;
background-color: $euiFormInputGroupLabelBackground;
min-width: $controlMinWidth;
@include euiFontSizeXS;
}
.controlFrame__formControlLayout, .controlFrame__draggable {
&-clone {
box-shadow: 0 0 0 1px $euiShadowColor,
0 1px 6px 0 $euiShadowColor;
cursor: grabbing !important;
}
.controlFrame__dragHandle {
cursor: grabbing;
}
@ -92,7 +81,6 @@ $controlMinWidth: $euiSize * 14;
.controlFrameWrapper {
flex-basis: auto;
position: relative;
display: block;
.controlFrame__formControlLayout {
width: 100%;
@ -102,6 +90,7 @@ $controlMinWidth: $euiSize * 14;
&Label {
@include euiTextTruncate;
max-width: 50%;
border-radius: $euiBorderRadius;
}
&:not(.controlFrame__formControlLayout-clone) {
@ -148,19 +137,20 @@ $controlMinWidth: $euiSize * 14;
border-radius: $euiBorderRadius;
top: 0;
bottom: 0;
width: 2px;
width: $euiSizeXS * .5;
}
}
&--insertBefore {
.controlFrame__formControlLayout:after {
left: -$euiSizeS;
left: -$euiSizeXS - 1;
}
}
&--insertAfter {
.controlFrame__formControlLayout:after {
right: -$euiSizeS;
right: -$euiSizeXS - 1;
}
}
@ -202,7 +192,7 @@ $controlMinWidth: $euiSize * 14;
opacity: 0;
}
.controlFrame__formControlLayout {
background-color: $euiColorEmptyShade !important;
background-color: tintOrShade($euiColorSuccess, 90%, 70%);
color: transparent !important;
box-shadow: none;

25
src/plugins/presentation_util/public/components/controls/control_group/editor/control_editor.tsx
View file

@ -88,19 +88,6 @@ export const ControlEditor = ({
</EuiFlyoutHeader>
<EuiFlyoutBody>
<EuiForm>
<EuiFormRow label={ControlGroupStrings.manageControl.getWidthInputTitle()}>
<EuiButtonGroup
color="primary"
legend={ControlGroupStrings.management.controlWidth.getWidthSwitchLegend()}
options={CONTROL_WIDTH_OPTIONS}
idSelected={currentWidth}
onChange={(newWidth: string) => {
setCurrentWidth(newWidth as ControlWidth);
updateWidth(newWidth as ControlWidth);
}}
/>
</EuiFormRow>
<EuiSpacer size="l" />
{ControlTypeEditor && (
<ControlTypeEditor
@ -126,6 +113,18 @@ export const ControlEditor = ({
}}
/>
</EuiFormRow>
<EuiFormRow label={ControlGroupStrings.manageControl.getWidthInputTitle()}>
<EuiButtonGroup
color="primary"
legend={ControlGroupStrings.management.controlWidth.getWidthSwitchLegend()}
options={CONTROL_WIDTH_OPTIONS}
idSelected={currentWidth}
onChange={(newWidth: string) => {
setCurrentWidth(newWidth as ControlWidth);
updateWidth(newWidth as ControlWidth);
}}
/>
</EuiFormRow>
<EuiSpacer size="l" />
{removeControl && (
<EuiButtonEmpty

15
src/plugins/presentation_util/public/components/controls/control_types/options_list/options_list.scss
View file

@ -1,13 +1,13 @@
.optionsList--anchorOverride {
.optionsList__anchorOverride {
display:block;
}
.optionsList--popoverOverride {
.optionsList__popoverOverride {
width: 100%;
height: 100%;
}
.optionsList--items {
.optionsList__items {
@include euiScrollBar;
overflow-y: auto;
@ -16,15 +16,18 @@
max-width: 100%;
}
.optionsList__actions {
padding: $euiSizeS;
border-bottom: $euiBorderThin;
border-color: darken($euiColorLightestShade, 2%);
}
.optionsList--filterBtn {
.euiFilterButton__text-hasNotification {
flex-grow: 1;
justify-content: space-between;
width: 0;
}
&.optionsList--filterBtnSingle {
width: 100%;
}
&.optionsList--filterBtnPlaceholder {
.euiFilterButton__textShift {
color: $euiTextSubduedColor;

4
src/plugins/presentation_util/public/components/controls/control_types/options_list/options_list_component.tsx
View file

@ -108,8 +108,8 @@ export const OptionsListComponent = ({
<EuiPopover
button={button}
isOpen={isPopoverOpen}
className="optionsList--popoverOverride"
anchorClassName="optionsList--anchorOverride"
className="optionsList__popoverOverride"
anchorClassName="optionsList__anchorOverride"
closePopover={() => setIsPopoverOpen(false)}
panelPaddingSize="none"
anchorPosition="downCenter"

2
src/plugins/presentation_util/public/components/controls/control_types/options_list/options_list_editor.tsx
View file

@ -70,7 +70,7 @@ export const OptionsListEditor = ({
const { dataView, fieldName } = state;
return (
<>
<EuiFormRow fullWidth label={OptionsListStrings.editor.getIndexPatternTitle()}>
<EuiFormRow fullWidth label={OptionsListStrings.editor.getDataViewTitle()}>
<DataViewPicker
dataViews={state.dataViewListItems}
selectedDataViewId={dataView?.id}

10
src/plugins/presentation_util/public/components/controls/control_types/options_list/options_list_popover_component.tsx
View file

@ -45,7 +45,7 @@ export const OptionsListPopover = ({
} = useReduxEmbeddableContext<OptionsListEmbeddableInput, typeof optionsListReducers>();
const dispatch = useEmbeddableDispatch();
const { selectedOptions, singleSelect } = useEmbeddableSelector((state) => state);
const { selectedOptions, singleSelect, title } = useEmbeddableSelector((state) => state);
// track selectedOptions in a set for more efficient lookup
const selectedOptionsSet = useMemo(() => new Set<string>(selectedOptions), [selectedOptions]);
@ -53,7 +53,8 @@ export const OptionsListPopover = ({
return (
<>
<EuiPopoverTitle paddingSize="s">
<EuiPopoverTitle paddingSize="s">{title}</EuiPopoverTitle>
<div className="optionsList__actions">
<EuiFormRow>
<EuiFlexGroup gutterSize="xs" direction="row" justifyContent="spaceBetween">
<EuiFlexItem>
@ -100,9 +101,8 @@ export const OptionsListPopover = ({
</EuiFlexItem>
</EuiFlexGroup>
</EuiFormRow>
</EuiPopoverTitle>
<div className="optionsList--items">
</div>
<div className="optionsList__items">
{!showOnlySelected && (
<>
{availableOptions?.map((availableOption, index) => (

4
src/plugins/presentation_util/public/components/controls/control_types/options_list/options_list_strings.ts
View file

@ -24,6 +24,10 @@ export const OptionsListStrings = {
i18n.translate('presentationUtil.controls.optionsList.editor.indexPatternTitle', {
defaultMessage: 'Index pattern',
}),
getDataViewTitle: () =>
i18n.translate('presentationUtil.controls.optionsList.editor.dataViewTitle', {
defaultMessage: 'Data view',
}),
getNoDataViewTitle: () =>
i18n.translate('presentationUtil.controls.optionsList.editor.noDataViewTitle', {
defaultMessage: 'Select data view',

2
src/plugins/presentation_util/public/components/data_view_picker/data_view_picker.tsx
View file

@ -67,7 +67,7 @@ export function DataViewPicker({
panelPaddingSize="s"
ownFocus
>
<div>
<div style={{ width: 368 }}>
<EuiPopoverTitle>
{i18n.translate('presentationUtil.dataViewPicker.changeDataViewTitle', {
defaultMessage: 'Data view',

4
src/plugins/presentation_util/public/components/field_picker/field_picker.scss
View file

@ -1,7 +1,5 @@
.presFieldPicker__fieldButton {
box-shadow: 0 .8px .8px rgba(0,0,0,.04),0 2.3px 2px rgba(0,0,0,.03);
background: #FFF;
border: 1px dashed transparent;
background: $euiColorEmptyShade;
}
.presFieldPickerFieldButtonActive {

17
src/plugins/presentation_util/public/components/field_picker/field_search.tsx
View file

@ -19,6 +19,7 @@ import {
EuiOutsideClickDetector,
EuiFilterButton,
EuiSpacer,
EuiPopoverTitle,
} from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n/react';
import { FieldIcon } from '../../../../kibana_react/public';
@ -87,7 +88,6 @@ export function FieldSearch({
<EuiPopover
panelClassName="euiFilterGroup__popoverPanel"
panelPaddingSize="none"
anchorPosition="rightUp"
display="block"
isOpen={isPopoverOpen}
closePopover={() => {
@ -95,6 +95,11 @@ export function FieldSearch({
}}
button={buttonContent}
>
<EuiPopoverTitle paddingSize="s">
{i18n.translate('presentationUtil.fieldSearch.filterByTypeLabel', {
defaultMessage: 'Filter by type',
})}
</EuiPopoverTitle>
<EuiContextMenuPanel
watchedItemProps={['icon', 'disabled']}
items={(availableFieldTypes as string[]).map((type) => (
@ -110,10 +115,12 @@ export function FieldSearch({
}
}}
>
<span>
<FieldIcon type={type} label={type} />
{type}
</span>
<EuiFlexGroup gutterSize="xs" responsive={false}>
<EuiFlexItem grow={false}>
<FieldIcon type={type} label={type} />
</EuiFlexItem>
<EuiFlexItem>{type}</EuiFlexItem>
</EuiFlexGroup>
</EuiContextMenuItem>
))}
/>