From 149b63c9bd425878c9d66fd171d34e3b67b1dba3 Mon Sep 17 00:00:00 2001 From: Stratoula Kalafateli Date: Fri, 16 Oct 2020 14:58:07 +0300 Subject: [PATCH] [Timelion] Remove kui usage (#80287) * [Timelion] Remove kui usage * Fix custom checkbox * Add tim prefix to the new classes * Fix functional test * PR fixes * Fix type * PR comments * Remove the last fontawesome usages * fix timelion links Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> --- src/plugins/timelion/public/_app.scss | 62 +++++++++++++++++++ .../timelion/public/directives/_form.scss | 48 ++++++++++++++ .../directives/_saved_object_finder.scss | 37 +++++++++++ .../public/directives/cells/_cells.scss | 1 - .../public/directives/cells/cells.html | 6 +- .../directives/fullscreen/fullscreen.html | 2 +- .../directives/saved_object_finder.html | 32 ++++------ .../public/directives/saved_object_finder.js | 1 - .../saved_object_save_as_checkbox.html | 9 +-- .../directives/timelion_expression_input.html | 2 +- .../timelion_help/_timelion_help.scss | 8 +++ .../timelion_help/timelion_help.html | 30 ++++----- .../timelion_interval/_timelion_interval.scss | 6 ++ .../timelion_interval/timelion_interval.html | 2 +- src/plugins/timelion/public/index.html | 15 +++-- .../timelion/public/partials/load_sheet.html | 2 +- .../timelion/public/partials/save_sheet.html | 11 ++-- .../public/partials/sheet_options.html | 2 +- src/plugins/timelion/public/plugin.ts | 8 +-- 19 files changed, 217 insertions(+), 67 deletions(-) diff --git a/src/plugins/timelion/public/_app.scss b/src/plugins/timelion/public/_app.scss index 8b9078caba5a8..d8a6eb423a670 100644 --- a/src/plugins/timelion/public/_app.scss +++ b/src/plugins/timelion/public/_app.scss @@ -15,7 +15,69 @@ margin: $euiSizeM; } +.timApp__title { + display: flex; + align-items: center; + padding: $euiSizeM $euiSizeS; + font-size: $euiSize; + font-weight: $euiFontWeightBold; + border-bottom: 1px solid $euiColorLightShade; + flex-grow: 1; + background-color: $euiColorEmptyShade; +} + .timApp__stats { font-weight: $euiFontWeightRegular; color: $euiColorMediumShade; } + +.timApp__form { + display: flex; + align-items: flex-start; + margin-top: $euiSize; + margin-bottom: $euiSize; +} + +.timApp__expression { + display: flex; + flex: 1; + margin-right: $euiSizeS; +} + +.timApp__button { + margin-top: $euiSizeS; + padding: $euiSizeXS $euiSizeM; + font-size: $euiSize; + border: none; + border-radius: $euiSizeXS; + color: $euiColorEmptyShade; + background-color: $euiColorPrimary; +} + +.timApp__button--secondary { + margin-top: $euiSizeS; + padding: $euiSizeXS $euiSizeM; + font-size: $euiSize; + border: 1px solid $euiColorPrimary; + border-radius: $euiSizeXS; + color: $euiColorPrimary; + width: 100%; +} + +.timApp__sectionTitle { + margin-bottom: $euiSizeM; + font-size: 18px; + color: $euiColorDarkestShade; +} + +.timApp__helpText { + margin-bottom: $euiSize; + font-size: 14px; + color: $euiColorDarkShade; +} + +.timApp__label { + font-size: $euiSize; + line-height: 1.5; + font-weight: $euiFontWeightBold; +} diff --git a/src/plugins/timelion/public/directives/_form.scss b/src/plugins/timelion/public/directives/_form.scss index 3fcf70700a864..370dd25f8263f 100644 --- a/src/plugins/timelion/public/directives/_form.scss +++ b/src/plugins/timelion/public/directives/_form.scss @@ -34,3 +34,51 @@ select.form-control { .fullWidth { width: 100%; } + +.timDropdownWarning { + margin-bottom: $euiSize; + padding: $euiSizeXS $euiSizeS; + color: $euiColorDarkestShade; + border-left: solid 2px $euiColorDanger; + font-size: $euiSizeM; +} + +.timFormCheckbox { + display: flex; + align-items: center; + line-height: 1.5; + position: relative; +} + +.timFormCheckbox__input { + appearance: none; + background-color: $euiColorLightestShade; + border: 1px solid $euiColorLightShade; + border-radius: $euiSizeXS; + width: $euiSize; + height: $euiSize; + font-size: $euiSizeM; + transition: background-color .1s linear; +} + +.timFormCheckbox__input:checked { + border-color: $euiColorPrimary; + background-color: $euiColorPrimary; +} + +.timFormCheckbox__icon { + position: absolute; + top: 0; + left: 2px; +} + +.timFormTextarea { + padding: $euiSizeXS $euiSizeM; + font-size: $euiSize; + line-height: 1.5; + color: $euiColorDarkestShade; + background-color: $euiFormBackgroundColor; + border: 1px solid $euiColorLightShade; + border-radius: $euiSizeXS; + transition: border-color .1s linear; +} diff --git a/src/plugins/timelion/public/directives/_saved_object_finder.scss b/src/plugins/timelion/public/directives/_saved_object_finder.scss index e1a055a5f49e9..3a2489afb5721 100644 --- a/src/plugins/timelion/public/directives/_saved_object_finder.scss +++ b/src/plugins/timelion/public/directives/_saved_object_finder.scss @@ -27,6 +27,42 @@ saved-object-finder { + .timSearchBar { + display: flex; + align-items: center; + } + + .timSearchBar__section { + position: relative; + margin-right: $euiSize; + flex: 1; + } + + .timSearchBar__icon { + position: absolute; + top: $euiSizeS; + left: $euiSizeS; + font-size: $euiSize; + color: $euiColorDarkShade; + } + + .timSearchBar__input { + padding: $euiSizeS $euiSizeM; + color: $euiColorDarkestShade; + background-color: $euiColorEmptyShade; + border: 1px solid $euiColorLightShade; + border-radius: $euiSizeXS; + transition: border-color .1s linear; + padding-left: $euiSizeXL; + width: 100%; + font-size: $euiSize; + } + + .timSearchBar__pagecount { + font-size: $euiSize; + color: $euiColorDarkShade; + } + .list-sort-button { border-top-left-radius: 0; border-top-right-radius: 0; @@ -34,6 +70,7 @@ saved-object-finder { padding: $euiSizeS $euiSize; font-weight: $euiFontWeightRegular; background-color: $euiColorLightestShade; + margin-top: $euiSize; } .li-striped { diff --git a/src/plugins/timelion/public/directives/cells/_cells.scss b/src/plugins/timelion/public/directives/cells/_cells.scss index 899bf984e72c8..6cd71378a81de 100644 --- a/src/plugins/timelion/public/directives/cells/_cells.scss +++ b/src/plugins/timelion/public/directives/cells/_cells.scss @@ -33,7 +33,6 @@ text-align: center; width: $euiSizeL; height: $euiSizeL; - line-height: $euiSizeL; border-radius: $euiSizeL / 2; border: $euiBorderThin; background-color: $euiColorLightestShade; diff --git a/src/plugins/timelion/public/directives/cells/cells.html b/src/plugins/timelion/public/directives/cells/cells.html index 6be1b089d2deb..f90b85abaf920 100644 --- a/src/plugins/timelion/public/directives/cells/cells.html +++ b/src/plugins/timelion/public/directives/cells/cells.html @@ -25,7 +25,7 @@ tooltip-append-to-body="1" aria-label="{{ ::'timelion.cells.actions.removeAriaLabel' | i18n: { defaultMessage: 'Remove chart' } }}" > - + diff --git a/src/plugins/timelion/public/directives/fullscreen/fullscreen.html b/src/plugins/timelion/public/directives/fullscreen/fullscreen.html index 194596ba79d0e..1ed6aa82ea3b9 100644 --- a/src/plugins/timelion/public/directives/fullscreen/fullscreen.html +++ b/src/plugins/timelion/public/directives/fullscreen/fullscreen.html @@ -8,7 +8,7 @@ tooltip-append-to-body="1" aria-label="{{ ::'timelion.fullscreen.exitAriaLabel' | i18n: { defaultMessage: 'Exit full screen' } }}" > - + diff --git a/src/plugins/timelion/public/directives/saved_object_finder.html b/src/plugins/timelion/public/directives/saved_object_finder.html index ad148801c03a4..1ce10efe4e0a8 100644 --- a/src/plugins/timelion/public/directives/saved_object_finder.html +++ b/src/plugins/timelion/public/directives/saved_object_finder.html @@ -1,13 +1,11 @@
-
-
-
-
+
+
+ -
-
-

+

-
+
@@ -45,7 +45,7 @@ @@ -82,7 +82,7 @@ @@ -100,7 +100,7 @@ @@ -222,7 +222,7 @@ @@ -230,7 +230,7 @@ @@ -371,7 +371,7 @@ @@ -379,7 +379,7 @@ @@ -484,7 +484,7 @@ @@ -492,7 +492,7 @@ @@ -587,7 +587,7 @@ @@ -596,7 +596,7 @@ @@ -606,7 +606,7 @@

@@ -618,7 +618,7 @@
-
+
. diff --git a/src/plugins/timelion/public/directives/timelion_interval/_timelion_interval.scss b/src/plugins/timelion/public/directives/timelion_interval/_timelion_interval.scss index b371c4400a303..7ce09155cafd8 100644 --- a/src/plugins/timelion/public/directives/timelion_interval/_timelion_interval.scss +++ b/src/plugins/timelion/public/directives/timelion_interval/_timelion_interval.scss @@ -4,6 +4,12 @@ timelion-interval { .timInterval__input { width: $euiSizeXL * 2; + padding: $euiSizeXS $euiSizeM; + color: $euiColorDarkestShade; + border: 1px solid $euiColorLightShade; + border-radius: $euiSizeXS; + transition: border-color .1s linear; + font-size: 14px; } .timInterval__input--compact { diff --git a/src/plugins/timelion/public/directives/timelion_interval/timelion_interval.html b/src/plugins/timelion/public/directives/timelion_interval/timelion_interval.html index 11c79e6a16820..49009355e49f4 100644 --- a/src/plugins/timelion/public/directives/timelion_interval/timelion_interval.html +++ b/src/plugins/timelion/public/directives/timelion_interval/timelion_interval.html @@ -1,7 +1,7 @@ - + -
+
-
+
@@ -62,14 +61,14 @@
-
+

diff --git a/src/plugins/timelion/public/partials/save_sheet.html b/src/plugins/timelion/public/partials/save_sheet.html index a0e0727f3ec82..7773a9d25df71 100644 --- a/src/plugins/timelion/public/partials/save_sheet.html +++ b/src/plugins/timelion/public/partials/save_sheet.html @@ -19,7 +19,7 @@
@@ -28,20 +28,21 @@ id="savedSheet" ng-model="opts.savedSheet.title" input-focus="select" - class="form-control kuiVerticalRhythmSmall" + class="form-control" + style="margin-bottom: 4px;" placeholder="{{ ::'timelion.topNavMenu.save.saveEntireSheet.inputPlaceholder' | i18n: { defaultMessage: 'Name this sheet...' } }}" aria-label="{{ ::'timelion.topNavMenu.save.saveEntireSheet.inputAriaLabel' | i18n: { defaultMessage: 'Name' } }}" > diff --git a/src/plugins/timelion/public/partials/sheet_options.html b/src/plugins/timelion/public/partials/sheet_options.html index e882cfe52958e..eae5709331659 100644 --- a/src/plugins/timelion/public/partials/sheet_options.html +++ b/src/plugins/timelion/public/partials/sheet_options.html @@ -1,6 +1,6 @@

diff --git a/src/plugins/timelion/public/plugin.ts b/src/plugins/timelion/public/plugin.ts index b435cc6fd399b..e5bfe7a27ad10 100644 --- a/src/plugins/timelion/public/plugin.ts +++ b/src/plugins/timelion/public/plugin.ts @@ -21,7 +21,6 @@ import { BehaviorSubject } from 'rxjs'; import { filter, map } from 'rxjs/operators'; import { CoreSetup, - CoreStart, Plugin, PluginInitializerContext, DEFAULT_APP_CATEGORIES, @@ -31,7 +30,7 @@ import { AppNavLinkStatus, } from '../../../core/public'; import { Panel } from './panels/panel'; -import { initAngularBootstrap, KibanaLegacyStart } from '../../kibana_legacy/public'; +import { initAngularBootstrap } from '../../kibana_legacy/public'; import { createKbnUrlTracker } from '../../kibana_utils/public'; import { DataPublicPluginStart, esFilters, DataPublicPluginSetup } from '../../data/public'; import { NavigationPublicPluginStart } from '../../navigation/public'; @@ -53,7 +52,6 @@ export interface TimelionPluginStartDependencies { visualizations: VisualizationsStart; visTypeTimelion: VisTypeTimelionPluginStart; savedObjects: SavedObjectsStart; - kibanaLegacy: KibanaLegacyStart; } /** @internal */ @@ -142,9 +140,7 @@ export class TimelionPlugin }); } - public start(core: CoreStart, { kibanaLegacy }: { kibanaLegacy: KibanaLegacyStart }) { - kibanaLegacy.loadFontAwesome(); - } + public start() {} public stop(): void { if (this.stopUrlTracking) {