-
Notifications
You must be signed in to change notification settings - Fork 8.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Maps] provide drag-n-drop support to order tooltip properties (#46631)
* [Maps] tooltip custom labels * add drag handlers for re-ordering tooltip property order * add trash button to remove property * add jest tests for AddTooltipFieldPopover * sort EMS file tooltip properties * update TooltipSelector jest test * clean up AddTooltipFieldPopover field sorting * remove console statements * add more styles when row is getting dragged * change reorder aria label * move css changes into seperate file * allow adding multiple fields before closing popover * clear checked state on Add * update jest snapshots * use FieldIcon to display field type as icon * add bottom border to tooltip field * avoid flash after drag and drop * Tooltip styles (#32) * update TooltipSelector snapshot * replace 24px with
- Loading branch information
Showing
14 changed files
with
757 additions
and
172 deletions.
There are no files selected for viewing
149 changes: 149 additions & 0 deletions
149
...egacy/plugins/maps/public/components/__snapshots__/add_tooltip_field_popover.test.js.snap
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
72 changes: 56 additions & 16 deletions
72
x-pack/legacy/plugins/maps/public/components/__snapshots__/tooltip_selector.test.js.snap
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,2 +1,3 @@ | ||
@import './metric_editors'; | ||
@import './geometry_filter'; | ||
@import './tooltip_selector'; |
59 changes: 59 additions & 0 deletions
59
x-pack/legacy/plugins/maps/public/components/_tooltip_selector.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,59 @@ | ||
.mapTooltipSelector__propertyRow { | ||
display: flex; | ||
|
||
padding: $euiSizeXS 0; | ||
border-bottom: 1px solid $euiColorLightShade; | ||
background-color: $euiColorEmptyShade; | ||
|
||
&:hover, | ||
&:focus, | ||
&:focus-within { | ||
.mapTooltipSelector__propertyIcons { | ||
display: block; | ||
animation: mapPropertyIconsBecomeVisible $euiAnimSpeedFast $euiAnimSlightResistance; | ||
} | ||
} | ||
|
||
.mapTooltipSelector__propertyIcons { | ||
&:hover, | ||
&:focus { | ||
display: block; | ||
animation: mapPropertyIconsBecomeVisible $euiAnimSpeedFast $euiAnimSlightResistance; | ||
} | ||
} | ||
} | ||
|
||
.mapTooltipSelector__propertyRow-isDragging { | ||
@include euiBottomShadowMedium; | ||
} | ||
|
||
.mapTooltipSelector__propertyRow-isDraggingOver { | ||
// Don't allow interaction events while layer is being re-ordered | ||
// sass-lint:disable-block no-important | ||
pointer-events: none !important; | ||
} | ||
|
||
.mapTooltipSelector__propertyContent { | ||
overflow: hidden; | ||
flex-grow: 1; | ||
min-height: $euiSizeL; | ||
} | ||
|
||
.mapTooltipSelector__propertyIcons { | ||
flex-shrink: 0; | ||
display: none; | ||
} | ||
|
||
.mapTooltipSelector__grab:hover { | ||
cursor: grab; | ||
} | ||
|
||
@keyframes mapPropertyIconsBecomeVisible { | ||
0% { | ||
opacity: 0; | ||
} | ||
|
||
100% { | ||
opacity: 1; | ||
} | ||
} |
Oops, something went wrong.