-
Notifications
You must be signed in to change notification settings - Fork 8.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Workplace Search] Migrate DisplaySettings tree (#84283)
* Initial copy/paste of components Changes for pre-commit hooks were: - Linting - Lodash imports - Fixed warnings for `jsx-a11y/mouse-events-have-key-events` with stubbed onFocus and onBlue events with FIXME comments * Add server routes * Remove reference to shared lib This one-liner appears only once in ent-search so adding it here in the logic file` * Fix paths * Add types and fix TypeScript issues * Replace FlashMessages with global component * More explicit Result type * Remove routes/http in favor of HttpLogic * Fix server routes `urlFieldIsLinkable` was missing and `detailFields` can either be an object or an array of objects * Add base styles These were ported from ent-search. Decided to use spacers where some global styles were missing. * Kibana prefers underscores in URLs Was only going to do display-settings and result-details but decided to YOLO all of them
- Loading branch information
1 parent
58297fa
commit 0fe8a65
Showing
17 changed files
with
1,747 additions
and
19 deletions.
There are no files selected for viewing
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
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
36 changes: 36 additions & 0 deletions
36
...workplace_search/views/content_sources/components/display_settings/custom_source_icon.tsx
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,36 @@ | ||
| /* | ||
| * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
| * or more contributor license agreements. Licensed under the Elastic License; | ||
| * you may not use this file except in compliance with the Elastic License. | ||
| */ | ||
|
|
||
| import React from 'react'; | ||
|
|
||
| const BLACK_RGB = '#000'; | ||
|
|
||
| interface CustomSourceIconProps { | ||
| color?: string; | ||
| } | ||
|
|
||
| export const CustomSourceIcon: React.FC<CustomSourceIconProps> = ({ color = BLACK_RGB }) => ( | ||
| <svg | ||
| className="euiIcon euiIcon--medium" | ||
| width="52" | ||
| height="52" | ||
| viewBox="0 0 52 52" | ||
| fill="none" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| style={{ fill: color }} | ||
| > | ||
| <path | ||
| fillRule="evenodd" | ||
| clipRule="evenodd" | ||
| d="M18 34H20.222C21.988 31.744 23 28.935 23 26C23 23.065 21.988 20.256 20.222 18H18C13.582 18 10 21.582 10 26C10 30.418 13.582 34 18 34Z" | ||
| /> | ||
| <path | ||
| fillRule="evenodd" | ||
| clipRule="evenodd" | ||
| d="M18 12.158C20.355 10.794 23.082 10 26 10C34.837 10 42 17.163 42 26C42 34.837 34.837 42 26 42C23.082 42 20.355 41.206 18 39.842C20.4228 38.4381 22.4459 36.4202 23.8515 34H23.848C25.1274 31.7962 25.898 29.2625 25.9906 26.5526C25.9936 26.4634 25.996 26.374 25.9975 26.2843C25.9992 26.1898 26 26.095 26 26C26 25.8613 25.9982 25.723 25.9947 25.5851C25.9937 25.5449 25.9925 25.5047 25.9912 25.4646C25.9013 22.7482 25.1301 20.2085 23.848 18H23.8515C22.4459 15.5798 20.4228 13.5619 18 12.158Z" | ||
| /> | ||
| </svg> | ||
| ); |
206 changes: 206 additions & 0 deletions
206
.../workplace_search/views/content_sources/components/display_settings/display_settings.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,206 @@ | ||
| /* | ||
| * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
| * or more contributor license agreements. Licensed under the Elastic License; | ||
| * you may not use this file except in compliance with the Elastic License. | ||
| */ | ||
|
|
||
| // -------------------------------------------------- | ||
| // Custom Source display settings | ||
| // -------------------------------------------------- | ||
|
|
||
| @mixin source_name { | ||
| font-size: .6875em; | ||
| text-transform: uppercase; | ||
| font-weight: 600; | ||
| letter-spacing: 0.06em; | ||
| } | ||
|
|
||
| @mixin example_result_box_shadow { | ||
| box-shadow: | ||
| 0 1px 3px rgba(black, 0.1), | ||
| 0 0 20px $euiColorLightestShade; | ||
| } | ||
|
|
||
| // Wrapper | ||
| .custom-source-display-settings { | ||
| font-size: 16px; | ||
| } | ||
|
|
||
| // Example result content | ||
| .example-result-content { | ||
| & > * { | ||
| line-height: 1.5em; | ||
| } | ||
|
|
||
| &__title { | ||
| font-size: 1em; | ||
| font-weight: 600; | ||
| color: $euiColorPrimary; | ||
|
|
||
| .example-result-detail-card & { | ||
| font-size: 20px; | ||
| } | ||
| } | ||
|
|
||
| &__subtitle, | ||
| &__description { | ||
| font-size: .875; | ||
| } | ||
|
|
||
| &__subtitle { | ||
| color: $euiColorDarkestShade; | ||
| } | ||
|
|
||
| &__description { | ||
| padding: .1rem 0 .125rem .35rem; | ||
| border-left: 3px solid $euiColorLightShade; | ||
| color: $euiColorDarkShade; | ||
| line-height: 1.8; | ||
| word-break: break-word; | ||
|
|
||
| @supports (display: -webkit-box) { | ||
| display: -webkit-box; | ||
| -webkit-box-orient: vertical; | ||
| -webkit-line-clamp: 3; | ||
| overflow: hidden; | ||
| text-overflow: ellipsis; | ||
| } | ||
| } | ||
|
|
||
| &__url { | ||
| .example-result-detail-card & { | ||
| color: $euiColorDarkShade; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .example-result-content-placeholder { | ||
| color: $euiColorMediumShade; | ||
| } | ||
|
|
||
| // Example standout result | ||
| .example-standout-result { | ||
| border-radius: 4px; | ||
| overflow: hidden; | ||
| @include example_result_box_shadow; | ||
|
|
||
| &__header, | ||
| &__content { | ||
| padding-left: 1em; | ||
| padding-right: 1em; | ||
| } | ||
|
|
||
| &__content { | ||
| padding-top: 1em; | ||
| padding-bottom: 1em; | ||
| } | ||
|
|
||
| &__source-name { | ||
| line-height: 34px; | ||
| @include source_name; | ||
| } | ||
| } | ||
|
|
||
| // Example result group | ||
| .example-result-group { | ||
| &__header { | ||
| padding: 0 .5em; | ||
| border-radius: 4px; | ||
| display: inline-flex; | ||
| align-items: center; | ||
|
|
||
| .euiIcon { | ||
| margin-right: .25rem; | ||
| } | ||
| } | ||
|
|
||
| &__source-name { | ||
| line-height: 1.75em; | ||
| @include source_name; | ||
| } | ||
|
|
||
| &__content { | ||
| display: flex; | ||
| align-items: stretch; | ||
| padding: .75em 0; | ||
| } | ||
|
|
||
| &__border { | ||
| width: 4px; | ||
| border-radius: 2px; | ||
| flex-shrink: 0; | ||
| margin-left: .875rem; | ||
| } | ||
|
|
||
| &__results { | ||
| flex: 1; | ||
| max-width: 100%; | ||
| } | ||
| } | ||
|
|
||
| .example-grouped-result { | ||
| padding: 1em; | ||
| } | ||
|
|
||
| .example-result-field-hover { | ||
| background: lighten($euiColorVis1_behindText, 30%); | ||
| position: relative; | ||
|
|
||
| &:before, | ||
| &:after { | ||
| content: ''; | ||
| position: absolute; | ||
| height: 100%; | ||
| width: 4px; | ||
| background: lighten($euiColorVis1_behindText, 30%); | ||
| } | ||
|
|
||
| &:before { | ||
| right: 100%; | ||
| border-radius: 2px 0 0 2px; | ||
| } | ||
|
|
||
| &:after { | ||
| left: 100%; | ||
| border-radius: 0 2px 2px 0; | ||
| } | ||
|
|
||
| .example-result-content-placeholder { | ||
| color: $euiColorFullShade; | ||
| } | ||
| } | ||
|
|
||
| .example-result-detail-card { | ||
| @include example_result_box_shadow; | ||
|
|
||
| &__header { | ||
| position: relative; | ||
| padding: 1.25em 1em 0; | ||
| } | ||
|
|
||
| &__border { | ||
| height: 4px; | ||
| position: absolute; | ||
| top: 0; | ||
| right: 0; | ||
| left: 0; | ||
| } | ||
|
|
||
| &__source-name { | ||
| margin-bottom: 1em; | ||
| font-weight: 500; | ||
| } | ||
|
|
||
| &__field { | ||
| padding: 1em; | ||
|
|
||
| & + & { | ||
| border-top: 1px solid $euiColorLightShade; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .visible-fields-container { | ||
| background: $euiColorLightestShade; | ||
| border-color: transparent; | ||
| } |
Oops, something went wrong.