From cd404cac0510a107dbee107666a2c9e0d8382765 Mon Sep 17 00:00:00 2001 From: Stratoula Kalafateli Date: Tue, 13 Oct 2020 09:44:11 +0300 Subject: [PATCH 1/9] [Timelion] Remove kui usage --- src/plugins/timelion/public/_app.scss | 62 +++++++++++++++++++ .../timelion/public/directives/_form.scss | 43 +++++++++++++ .../directives/_saved_object_finder.scss | 31 ++++++++++ .../directives/saved_object_finder.html | 24 +++---- .../saved_object_save_as_checkbox.html | 8 +-- .../directives/timelion_expression_input.html | 2 +- .../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 | 7 +-- 14 files changed, 190 insertions(+), 55 deletions(-) diff --git a/src/plugins/timelion/public/_app.scss b/src/plugins/timelion/public/_app.scss index 8b9078caba5a8..044f2950bd933 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; + flex-basis: 100%; + background-color: $euiColorEmptyShade; +} + .timApp__stats { font-weight: $euiFontWeightRegular; color: $euiColorMediumShade; } + +.timApp__form { + display: flex; + align-items: flex-start; + margin-top: $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..60491e23e2192 100644 --- a/src/plugins/timelion/public/directives/_form.scss +++ b/src/plugins/timelion/public/directives/_form.scss @@ -1,3 +1,5 @@ +$warningColor: '#BD271E'; + .form-control { @include euiFontSizeS; display: block; @@ -34,3 +36,44 @@ select.form-control { .fullWidth { width: 100%; } + +.dropdownWarning { + margin-bottom: $euiSize; + padding: $euiSizeXS $euiSizeS; + color: $euiColorDarkestShade; + border-left: solid 2px $warningColor; + font-size: $euiSizeM; +} + +.form-checkbox { + display: flex; + align-items: center; + line-height: 1.5; +} + +.form-checkbox__input { + background-color: $euiColorLightestShade; + border: 1px solid $euiColorLightShade; + border-radius: $euiSizeXS; + width: $euiSize; + height: $euiSize; + font-size: $euiSizeM; + transition: background-color .1s linear; +} + +.form-checkbox__input:checked { + border-color: $euiColorPrimary; + background-color: $euiColorPrimary; +} + +.form-textarea { + padding: $euiSizeXS $euiSizeM; + font-size: $euiSize; + line-height: 1.5; + color: $euiColorDarkestShade; + background-color: $euiColorLightestShade; + border: 1px solid $euiColorLightShade; + border-radius: $euiSizeXS; + transition: border-color .1s linear; + margin-bottom: $euiSize; +} diff --git a/src/plugins/timelion/public/directives/_saved_object_finder.scss b/src/plugins/timelion/public/directives/_saved_object_finder.scss index e1a055a5f49e9..04e8ef075f758 100644 --- a/src/plugins/timelion/public/directives/_saved_object_finder.scss +++ b/src/plugins/timelion/public/directives/_saved_object_finder.scss @@ -27,6 +27,36 @@ saved-object-finder { + .search-bar { + display: flex; + align-items: center; + } + + .search-bar__icon { + position: absolute; + top: $euiSizeS; + left: $euiSizeS; + font-size: $euiSize; + color: $euiColorDarkShade; + } + + .search-bar__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; + } + + .search-bar__pagecount { + font-size: $euiSize; + color: $euiColorDarkShade; + } + .list-sort-button { border-top-left-radius: 0; border-top-right-radius: 0; @@ -34,6 +64,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/saved_object_finder.html b/src/plugins/timelion/public/directives/saved_object_finder.html index ad148801c03a4..1e2dc10f82166 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..289b40d8c7eed 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..f98ae2dbe1adb 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 7656a808dfb00..596fddd97df72 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'; @@ -133,9 +132,7 @@ export class TimelionPlugin implements Plugin { }); } - public start(core: CoreStart, { kibanaLegacy }: { kibanaLegacy: KibanaLegacyStart }) { - kibanaLegacy.loadFontAwesome(); - } + public start() {} public stop(): void { if (this.stopUrlTracking) { From ef088a66d8ba8deb743f8c77cf4e56b73d993f42 Mon Sep 17 00:00:00 2001 From: Stratoula Kalafateli Date: Tue, 13 Oct 2020 11:51:43 +0300 Subject: [PATCH 2/9] Fix custom checkbox --- src/plugins/timelion/public/_app.scss | 1 - src/plugins/timelion/public/directives/_form.scss | 8 ++++++++ .../timelion/public/directives/_saved_object_finder.scss | 6 ++++++ .../timelion/public/directives/saved_object_finder.html | 2 +- .../public/directives/saved_object_save_as_checkbox.html | 1 + 5 files changed, 16 insertions(+), 2 deletions(-) diff --git a/src/plugins/timelion/public/_app.scss b/src/plugins/timelion/public/_app.scss index 044f2950bd933..757c8497253e5 100644 --- a/src/plugins/timelion/public/_app.scss +++ b/src/plugins/timelion/public/_app.scss @@ -23,7 +23,6 @@ font-weight: $euiFontWeightBold; border-bottom: 1px solid $euiColorLightShade; flex-grow: 1; - flex-basis: 100%; background-color: $euiColorEmptyShade; } diff --git a/src/plugins/timelion/public/directives/_form.scss b/src/plugins/timelion/public/directives/_form.scss index 60491e23e2192..350fc5b948b5c 100644 --- a/src/plugins/timelion/public/directives/_form.scss +++ b/src/plugins/timelion/public/directives/_form.scss @@ -49,9 +49,11 @@ select.form-control { display: flex; align-items: center; line-height: 1.5; + position: relative; } .form-checkbox__input { + appearance: none; background-color: $euiColorLightestShade; border: 1px solid $euiColorLightShade; border-radius: $euiSizeXS; @@ -66,6 +68,12 @@ select.form-control { background-color: $euiColorPrimary; } +.form-checkbox__icon { + position: absolute; + top: 0; + left: 2px; +} + .form-textarea { padding: $euiSizeXS $euiSizeM; font-size: $euiSize; diff --git a/src/plugins/timelion/public/directives/_saved_object_finder.scss b/src/plugins/timelion/public/directives/_saved_object_finder.scss index 04e8ef075f758..9a3c855bd7b51 100644 --- a/src/plugins/timelion/public/directives/_saved_object_finder.scss +++ b/src/plugins/timelion/public/directives/_saved_object_finder.scss @@ -32,6 +32,12 @@ saved-object-finder { align-items: center; } + .search-bar__section { + position: relative; + margin-right: $euiSize; + flex: 1; + } + .search-bar__icon { position: absolute; top: $euiSizeS; diff --git a/src/plugins/timelion/public/directives/saved_object_finder.html b/src/plugins/timelion/public/directives/saved_object_finder.html index 1e2dc10f82166..fafc0a79e0c5c 100644 --- a/src/plugins/timelion/public/directives/saved_object_finder.html +++ b/src/plugins/timelion/public/directives/saved_object_finder.html @@ -2,7 +2,7 @@ role="form" >
-
+
+ Date: Wed, 14 Oct 2020 09:29:54 +0300 Subject: [PATCH 3/9] Add tim prefix to the new classes --- src/plugins/timelion/public/_app.scss | 4 ++-- src/plugins/timelion/public/directives/_form.scss | 12 ++++++------ .../public/directives/_saved_object_finder.scss | 10 +++++----- .../public/directives/saved_object_finder.html | 10 +++++----- .../directives/saved_object_save_as_checkbox.html | 8 ++++---- .../public/directives/timelion_expression_input.html | 2 +- .../directives/timelion_help/timelion_help.html | 2 +- src/plugins/timelion/public/index.html | 4 ++-- src/plugins/timelion/public/partials/load_sheet.html | 2 +- src/plugins/timelion/public/partials/save_sheet.html | 2 +- .../timelion/public/partials/sheet_options.html | 2 +- 11 files changed, 29 insertions(+), 29 deletions(-) diff --git a/src/plugins/timelion/public/_app.scss b/src/plugins/timelion/public/_app.scss index 757c8497253e5..3e6f4171c58e1 100644 --- a/src/plugins/timelion/public/_app.scss +++ b/src/plugins/timelion/public/_app.scss @@ -63,7 +63,7 @@ width: 100%; } -.timApp_sectionTitle { +.timApp__sectionTitle { margin-bottom: $euiSizeM; font-size: 18px; color: $euiColorDarkestShade; @@ -75,7 +75,7 @@ color: $euiColorDarkShade; } -.timApp_label { +.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 350fc5b948b5c..28319488dd335 100644 --- a/src/plugins/timelion/public/directives/_form.scss +++ b/src/plugins/timelion/public/directives/_form.scss @@ -37,7 +37,7 @@ select.form-control { width: 100%; } -.dropdownWarning { +.timDropdownWarning { margin-bottom: $euiSize; padding: $euiSizeXS $euiSizeS; color: $euiColorDarkestShade; @@ -45,14 +45,14 @@ select.form-control { font-size: $euiSizeM; } -.form-checkbox { +.timFormCheckbox { display: flex; align-items: center; line-height: 1.5; position: relative; } -.form-checkbox__input { +.timFormCheckbox__input { appearance: none; background-color: $euiColorLightestShade; border: 1px solid $euiColorLightShade; @@ -63,18 +63,18 @@ select.form-control { transition: background-color .1s linear; } -.form-checkbox__input:checked { +.timFormCheckbox__input:checked { border-color: $euiColorPrimary; background-color: $euiColorPrimary; } -.form-checkbox__icon { +.timFormCheckbox__icon { position: absolute; top: 0; left: 2px; } -.form-textarea { +.timFormTextarea { padding: $euiSizeXS $euiSizeM; font-size: $euiSize; line-height: 1.5; diff --git a/src/plugins/timelion/public/directives/_saved_object_finder.scss b/src/plugins/timelion/public/directives/_saved_object_finder.scss index 9a3c855bd7b51..3a2489afb5721 100644 --- a/src/plugins/timelion/public/directives/_saved_object_finder.scss +++ b/src/plugins/timelion/public/directives/_saved_object_finder.scss @@ -27,18 +27,18 @@ saved-object-finder { - .search-bar { + .timSearchBar { display: flex; align-items: center; } - .search-bar__section { + .timSearchBar__section { position: relative; margin-right: $euiSize; flex: 1; } - .search-bar__icon { + .timSearchBar__icon { position: absolute; top: $euiSizeS; left: $euiSizeS; @@ -46,7 +46,7 @@ saved-object-finder { color: $euiColorDarkShade; } - .search-bar__input { + .timSearchBar__input { padding: $euiSizeS $euiSizeM; color: $euiColorDarkestShade; background-color: $euiColorEmptyShade; @@ -58,7 +58,7 @@ saved-object-finder { font-size: $euiSize; } - .search-bar__pagecount { + .timSearchBar__pagecount { font-size: $euiSize; color: $euiColorDarkShade; } diff --git a/src/plugins/timelion/public/directives/saved_object_finder.html b/src/plugins/timelion/public/directives/saved_object_finder.html index fafc0a79e0c5c..6476ffc38dbd7 100644 --- a/src/plugins/timelion/public/directives/saved_object_finder.html +++ b/src/plugins/timelion/public/directives/saved_object_finder.html @@ -1,11 +1,11 @@ -
-
- +
+
+
-

-
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/timelion_help/timelion_help.html b/src/plugins/timelion/public/directives/timelion_help/timelion_help.html index 606125b090869..2b8706f1f2a81 100644 --- a/src/plugins/timelion/public/directives/timelion_help/timelion_help.html +++ b/src/plugins/timelion/public/directives/timelion_help/timelion_help.html @@ -37,7 +37,7 @@ @@ -596,7 +596,7 @@ From f9e548d7d3d753a3df9d5af69bb6206951607253 Mon Sep 17 00:00:00 2001 From: Stratoula Kalafateli Date: Thu, 15 Oct 2020 09:36:19 +0300 Subject: [PATCH 6/9] Fix type --- src/plugins/timelion/public/plugin.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/plugins/timelion/public/plugin.ts b/src/plugins/timelion/public/plugin.ts index 505ff150ad2e9..e5bfe7a27ad10 100644 --- a/src/plugins/timelion/public/plugin.ts +++ b/src/plugins/timelion/public/plugin.ts @@ -52,7 +52,6 @@ export interface TimelionPluginStartDependencies { visualizations: VisualizationsStart; visTypeTimelion: VisTypeTimelionPluginStart; savedObjects: SavedObjectsStart; - kibanaLegacy: KibanaLegacyStart; } /** @internal */ From ee614e81662869a82517423aeed75153a38df2e9 Mon Sep 17 00:00:00 2001 From: Stratoula Kalafateli Date: Thu, 15 Oct 2020 17:20:07 +0300 Subject: [PATCH 7/9] PR comments --- src/plugins/timelion/public/directives/_form.scss | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/src/plugins/timelion/public/directives/_form.scss b/src/plugins/timelion/public/directives/_form.scss index 0493b4eba6198..370dd25f8263f 100644 --- a/src/plugins/timelion/public/directives/_form.scss +++ b/src/plugins/timelion/public/directives/_form.scss @@ -1,6 +1,3 @@ -$timAppWarningColor: '#BD271E'; -$timAppTextAreaBgColor: #FBFCFD; - .form-control { @include euiFontSizeS; display: block; @@ -42,7 +39,7 @@ select.form-control { margin-bottom: $euiSize; padding: $euiSizeXS $euiSizeS; color: $euiColorDarkestShade; - border-left: solid 2px $timAppWarningColor; + border-left: solid 2px $euiColorDanger; font-size: $euiSizeM; } @@ -80,7 +77,7 @@ select.form-control { font-size: $euiSize; line-height: 1.5; color: $euiColorDarkestShade; - background-color: $timAppTextAreaBgColor; + background-color: $euiFormBackgroundColor; border: 1px solid $euiColorLightShade; border-radius: $euiSizeXS; transition: border-color .1s linear; From 2091533e24889e70df5532ea06e146ebb7765baf Mon Sep 17 00:00:00 2001 From: Stratoula Kalafateli Date: Fri, 16 Oct 2020 10:23:22 +0300 Subject: [PATCH 8/9] Remove the last fontawesome usages --- .../timelion/public/directives/saved_object_finder.html | 8 +++----- .../timelion/public/directives/saved_object_finder.js | 1 - 2 files changed, 3 insertions(+), 6 deletions(-) diff --git a/src/plugins/timelion/public/directives/saved_object_finder.html b/src/plugins/timelion/public/directives/saved_object_finder.html index 6476ffc38dbd7..1ce10efe4e0a8 100644 --- a/src/plugins/timelion/public/directives/saved_object_finder.html +++ b/src/plugins/timelion/public/directives/saved_object_finder.html @@ -67,10 +67,8 @@ i18n-id="timelion.savedObjectFinder.sortByButtonLabel" i18n-default-message="Name" > - + + - + {{hit.title}}

diff --git a/src/plugins/timelion/public/directives/saved_object_finder.js b/src/plugins/timelion/public/directives/saved_object_finder.js index 88f1b78cd3da5..29f546678e6aa 100644 --- a/src/plugins/timelion/public/directives/saved_object_finder.js +++ b/src/plugins/timelion/public/directives/saved_object_finder.js @@ -168,7 +168,6 @@ export function initSavedObjectFinderDirective(app, savedSheetLoader, uiSettings switch (keyMap[$event.keyCode]) { case 'enter': if (self.hitCount !== 1) return; - const hit = self.hits[0]; if (!hit) return; From 32028fd48433a881a89ba7236fca754ffa16408c Mon Sep 17 00:00:00 2001 From: Stratoula Kalafateli Date: Fri, 16 Oct 2020 12:58:27 +0300 Subject: [PATCH 9/9] fix timelion links --- .../public/directives/timelion_help/_timelion_help.scss | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/plugins/timelion/public/directives/timelion_help/_timelion_help.scss b/src/plugins/timelion/public/directives/timelion_help/_timelion_help.scss index 27d2311b62bde..1f8551116aab0 100644 --- a/src/plugins/timelion/public/directives/timelion_help/_timelion_help.scss +++ b/src/plugins/timelion/public/directives/timelion_help/_timelion_help.scss @@ -15,6 +15,14 @@ overflow-y: auto; } +.timHelp__links { + color: $euiColorPrimary; + + &:hover { + text-decoration: underline; + } +} + /** * 1. Override bootstrap .table styles. */