Skip to content

Commit 1b8c092

Browse files
stratoulakibanamachine
stratoula
and
kibanamachine
authored
[Timelion] Remove kui usage (#80287) (#80819)
* [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> Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
1 parent 7120827 commit 1b8c092

19 files changed

Lines changed: 217 additions & 67 deletions

‎src/plugins/timelion/public/_app.scss‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,69 @@
1515
margin: $euiSizeM;
1616
}
1717

18+
.timApp__title {
19+
display: flex;
20+
align-items: center;
21+
padding: $euiSizeM $euiSizeS;
22+
font-size: $euiSize;
23+
font-weight: $euiFontWeightBold;
24+
border-bottom: 1px solid $euiColorLightShade;
25+
flex-grow: 1;
26+
background-color: $euiColorEmptyShade;
27+
}
28+
1829
.timApp__stats {
1930
font-weight: $euiFontWeightRegular;
2031
color: $euiColorMediumShade;
2132
}
33+
34+
.timApp__form {
35+
display: flex;
36+
align-items: flex-start;
37+
margin-top: $euiSize;
38+
margin-bottom: $euiSize;
39+
}
40+
41+
.timApp__expression {
42+
display: flex;
43+
flex: 1;
44+
margin-right: $euiSizeS;
45+
}
46+
47+
.timApp__button {
48+
margin-top: $euiSizeS;
49+
padding: $euiSizeXS $euiSizeM;
50+
font-size: $euiSize;
51+
border: none;
52+
border-radius: $euiSizeXS;
53+
color: $euiColorEmptyShade;
54+
background-color: $euiColorPrimary;
55+
}
56+
57+
.timApp__button--secondary {
58+
margin-top: $euiSizeS;
59+
padding: $euiSizeXS $euiSizeM;
60+
font-size: $euiSize;
61+
border: 1px solid $euiColorPrimary;
62+
border-radius: $euiSizeXS;
63+
color: $euiColorPrimary;
64+
width: 100%;
65+
}
66+
67+
.timApp__sectionTitle {
68+
margin-bottom: $euiSizeM;
69+
font-size: 18px;
70+
color: $euiColorDarkestShade;
71+
}
72+
73+
.timApp__helpText {
74+
margin-bottom: $euiSize;
75+
font-size: 14px;
76+
color: $euiColorDarkShade;
77+
}
78+
79+
.timApp__label {
80+
font-size: $euiSize;
81+
line-height: 1.5;
82+
font-weight: $euiFontWeightBold;
83+
}

‎src/plugins/timelion/public/directives/_form.scss‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,3 +34,51 @@ select.form-control {
3434
.fullWidth {
3535
width: 100%;
3636
}
37+
38+
.timDropdownWarning {
39+
margin-bottom: $euiSize;
40+
padding: $euiSizeXS $euiSizeS;
41+
color: $euiColorDarkestShade;
42+
border-left: solid 2px $euiColorDanger;
43+
font-size: $euiSizeM;
44+
}
45+
46+
.timFormCheckbox {
47+
display: flex;
48+
align-items: center;
49+
line-height: 1.5;
50+
position: relative;
51+
}
52+
53+
.timFormCheckbox__input {
54+
appearance: none;
55+
background-color: $euiColorLightestShade;
56+
border: 1px solid $euiColorLightShade;
57+
border-radius: $euiSizeXS;
58+
width: $euiSize;
59+
height: $euiSize;
60+
font-size: $euiSizeM;
61+
transition: background-color .1s linear;
62+
}
63+
64+
.timFormCheckbox__input:checked {
65+
border-color: $euiColorPrimary;
66+
background-color: $euiColorPrimary;
67+
}
68+
69+
.timFormCheckbox__icon {
70+
position: absolute;
71+
top: 0;
72+
left: 2px;
73+
}
74+
75+
.timFormTextarea {
76+
padding: $euiSizeXS $euiSizeM;
77+
font-size: $euiSize;
78+
line-height: 1.5;
79+
color: $euiColorDarkestShade;
80+
background-color: $euiFormBackgroundColor;
81+
border: 1px solid $euiColorLightShade;
82+
border-radius: $euiSizeXS;
83+
transition: border-color .1s linear;
84+
}

‎src/plugins/timelion/public/directives/_saved_object_finder.scss‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,13 +27,50 @@
2727

2828
saved-object-finder {
2929

30+
.timSearchBar {
31+
display: flex;
32+
align-items: center;
33+
}
34+
35+
.timSearchBar__section {
36+
position: relative;
37+
margin-right: $euiSize;
38+
flex: 1;
39+
}
40+
41+
.timSearchBar__icon {
42+
position: absolute;
43+
top: $euiSizeS;
44+
left: $euiSizeS;
45+
font-size: $euiSize;
46+
color: $euiColorDarkShade;
47+
}
48+
49+
.timSearchBar__input {
50+
padding: $euiSizeS $euiSizeM;
51+
color: $euiColorDarkestShade;
52+
background-color: $euiColorEmptyShade;
53+
border: 1px solid $euiColorLightShade;
54+
border-radius: $euiSizeXS;
55+
transition: border-color .1s linear;
56+
padding-left: $euiSizeXL;
57+
width: 100%;
58+
font-size: $euiSize;
59+
}
60+
61+
.timSearchBar__pagecount {
62+
font-size: $euiSize;
63+
color: $euiColorDarkShade;
64+
}
65+
3066
.list-sort-button {
3167
border-top-left-radius: 0;
3268
border-top-right-radius: 0;
3369
border: none;
3470
padding: $euiSizeS $euiSize;
3571
font-weight: $euiFontWeightRegular;
3672
background-color: $euiColorLightestShade;
73+
margin-top: $euiSize;
3774
}
3875

3976
.li-striped {

‎src/plugins/timelion/public/directives/cells/_cells.scss‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,6 @@
3333
text-align: center;
3434
width: $euiSizeL;
3535
height: $euiSizeL;
36-
line-height: $euiSizeL;
3736
border-radius: $euiSizeL / 2;
3837
border: $euiBorderThin;
3938
background-color: $euiColorLightestShade;

‎src/plugins/timelion/public/directives/cells/cells.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
tooltip-append-to-body="1"
2626
aria-label="{{ ::'timelion.cells.actions.removeAriaLabel' | i18n: { defaultMessage: 'Remove chart' } }}"
2727
>
28-
<span class="fa fa-remove"></span>
28+
<icon type="'cross'"></icon>
2929
</button>
3030
<button
3131
class="timCell__action"
@@ -35,7 +35,7 @@
3535
aria-label="{{ ::'timelion.cells.actions.reorderAriaLabel' | i18n: { defaultMessage: 'Drag to reorder' } }}"
3636
tabindex="-1"
3737
>
38-
<span class="fa fa-arrows"></span>
38+
<icon type="'grab'"></icon>
3939
</button>
4040
<button
4141
class="timCell__action"
@@ -44,7 +44,7 @@
4444
tooltip-append-to-body="1"
4545
aria-label="{{ ::'timelion.cells.actions.fullscreenAriaLabel' | i18n: { defaultMessage: 'Full screen chart' } }}"
4646
>
47-
<span class="fa fa-expand"></span>
47+
<icon type="'expandMini'"></icon>
4848
</button>
4949
</div>
5050
</div>

‎src/plugins/timelion/public/directives/fullscreen/fullscreen.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
tooltip-append-to-body="1"
99
aria-label="{{ ::'timelion.fullscreen.exitAriaLabel' | i18n: { defaultMessage: 'Exit full screen' } }}"
1010
>
11-
<span class="fa fa-compress"></span>
11+
<icon type="'minimize'"></icon>
1212
</button>
1313
</div>
1414
</div>

‎src/plugins/timelion/public/directives/saved_object_finder.html‎

Lines changed: 13 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
11
<form
22
role="form"
3-
class="kuiVerticalRhythm"
43
>
5-
<div class="kuiBar">
6-
<div class="kuiBarSection">
7-
<div class="kuiSearchInput fullWidth">
8-
<div class="kuiSearchInput__icon kuiIcon fa-search"></div>
4+
<div class="timSearchBar">
5+
<div class="timSearchBar__section">
6+
<icon class="timSearchBar__icon" type="'search'"></icon>
97
<input
10-
class="kuiSearchInput__input"
8+
class="timSearchBar__input"
119
input-focus
1210
disable-input-focus="disableAutoFocus"
1311
ng-model="filter"
@@ -18,18 +16,17 @@
1816
autocomplete="off"
1917
data-test-subj="savedObjectFinderSearchInput"
2018
>
21-
</div>
2219
</div>
2320

24-
<div class="kuiBarSection">
25-
<p class="kuiText kuiSubduedText"
21+
<div>
22+
<p class="timSearchBar__pagecount"
2623
i18n-id="timelion.savedObjectFinder.pageItemsFromHitCountDescription"
2724
i18n-default-message="{pageFirstItem}-{pageLastItem} of {hitCount}"
2825
i18n-values="{pageFirstItem, pageLastItem, hitCount: finder.hitCount}"
2926
></p>
30-
<div class="kuiButtonGroup">
27+
<div>
3128
<button
32-
class="kuiButton kuiButton--primary"
29+
class="timApp__button"
3330
ng-if="onAddNew"
3431
ng-click="onAddNew()"
3532
data-test-subj="addNewSavedObjectLink"
@@ -40,7 +37,7 @@
4037
></button>
4138

4239
<button
43-
class="kuiButton kuiButton--secondary"
40+
class="timApp__button--secondary"
4441
ng-if="!useLocalManagement"
4542
ng-click="finder.manageObjects(finder.properties.name)"
4643
i18n-id="timelion.savedObjectFinder.manageItemsButtonLabel"
@@ -56,7 +53,6 @@
5653
<paginate
5754
list="finder.hits"
5855
per-page="20"
59-
class="kuiVerticalRhythm"
6056
>
6157
<button
6258
class="paginate-heading list-group-item list-sort-button"
@@ -71,10 +67,8 @@
7167
i18n-id="timelion.savedObjectFinder.sortByButtonLabel"
7268
i18n-default-message="Name"
7369
></span>
74-
<span
75-
class="fa"
76-
ng-class="finder.isAscending ? 'fa-caret-up' : 'fa-caret-down'"
77-
>
70+
<icon type="'sortUp'" ng-if="finder.isAscending"></icon>
71+
<icon type="'sortDown'" ng-if="!finder.isAscending"></icon>
7872
<span class="euiScreenReaderOnly"
7973
ng-if="finder.isAscending"
8074
i18n-id="timelion.savedObjectFinder.sortByButtonLabeAscendingScreenReaderOnly"
@@ -98,8 +92,8 @@
9892
<a ng-href="{{finder.makeUrl(hit)}}"
9993
ng-blur="finder.hitBlur($event)"
10094
ng-click="finder.preventClick($event)">
101-
<span aria-hidden="true" class="finder-type fa" ng-if="hit.icon" ng-class="hit.icon"></span>
102-
<div class="kuiIcon fa-flask ng-scope" ng-if="hit.type.shouldMarkAsExperimentalInUI()"></div>
95+
<icon aria-hidden="true" class="finder-type" ng-if="hit.icon" ng-class="hit.icon"></icon>
96+
<icon type="'beaker'" ng-if="hit.type.shouldMarkAsExperimentalInUI()"></icon>
10397
<span>{{hit.title}}</span>
10498
<p ng-if="hit.description" ng-bind="hit.description"></p>
10599
</a>

‎src/plugins/timelion/public/directives/saved_object_finder.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -168,7 +168,6 @@ export function initSavedObjectFinderDirective(app, savedSheetLoader, uiSettings
168168
switch (keyMap[$event.keyCode]) {
169169
case 'enter':
170170
if (self.hitCount !== 1) return;
171-
172171
const hit = self.hits[0];
173172
if (!hit) return;
174173

‎src/plugins/timelion/public/directives/saved_object_save_as_checkbox.html‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,25 @@
11
<div ng-hide="!savedObject.id || savedObject.isSaving">
22
<div
33
ng-hide="!savedObject.isTitleChanged() || savedObject.copyOnSave"
4-
class="kuiLocalDropdownWarning kuiVerticalRhythmSmall"
4+
class="timDropdownWarning"
55
i18n-id="timelion.savedObjects.howToSaveAsNewDescription"
66
i18n-default-message="In previous versions of Kibana, changing the name of a {savedObjectName} would make a copy with the new name. Use the 'Save as a new {savedObjectName}' checkbox to do this now."
77
i18n-values="{ savedObjectName: savedObject.getDisplayName() }"
88
i18n-description="'Save as a new {savedObjectName}' refers to timelion.savedObjects.saveAsNewLabel and should be the same text."
99
></div>
1010

11-
<label class="kuiCheckBoxLabel kuiVerticalRhythmSmall">
11+
<label class="timFormCheckbox">
1212
<input
13-
class="kuiCheckBox"
13+
class="timFormCheckbox__input"
1414
type="checkbox"
1515
data-test-subj="saveAsNewCheckbox"
1616
ng-model="savedObject.copyOnSave"
1717
ng-checked="savedObject.copyOnSave"
1818
>
19+
<icon type="'check'" class="timFormCheckbox__icon" color="'white'" size="'s'"></icon>
1920

2021
<span
21-
class="kuiCheckBoxLabel__text"
22+
style="margin-left: 8px;"
2223
i18n-id="timelion.savedObjects.saveAsNewLabel"
2324
i18n-default-message="Save as a new {savedObjectName}"
2425
i18n-values="{ savedObjectName: savedObject.getDisplayName() }"

‎src/plugins/timelion/public/directives/timelion_expression_input.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
data-expression-input
1313
role="textbox"
1414
rows="{{ rows }}"
15-
class="timExpressionInput kuiTextArea fullWidth"
15+
class="timExpressionInput timFormTextarea fullWidth"
1616
placeholder="{{ ::'timelion.expressionInputPlaceholder' | i18n: { defaultMessage: 'Try a query with {esQuery}', values: { esQuery: '.es(*)' } } }}"
1717
ng-model="sheet"
1818
ng-focus="onFocusInput()"

0 commit comments

Comments
 (0)