[Timelion] Remove kui usage

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;
+}

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;
+}

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

@@ -27,13 +27,50 @@
 
 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;
  border: none;
  padding: $euiSizeS $euiSize;
  font-weight: $euiFontWeightRegular;
  background-color: $euiColorLightestShade;
+ margin-top: $euiSize;
  }
 
  .li-striped {

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;

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' } }}"
  >
- <span class="fa fa-remove"></span>
+  <icon type="'cross'"></icon>
  </button>
  <button
  class="timCell__action"
@@ -35,7 +35,7 @@
  aria-label="{{ ::'timelion.cells.actions.reorderAriaLabel' | i18n: { defaultMessage: 'Drag to reorder' } }}"
  tabindex="-1"
  >
- <span class="fa fa-arrows"></span>
+ <icon type="'grab'"></icon>
  </button>
  <button
  class="timCell__action"
@@ -44,7 +44,7 @@
  tooltip-append-to-body="1"
  aria-label="{{ ::'timelion.cells.actions.fullscreenAriaLabel' | i18n: { defaultMessage: 'Full screen chart' } }}"
  >
- <span class="fa fa-expand"></span>
+ <icon type="'expandMini'"></icon>
  </button>
  </div>
  </div>

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' } }}"
  >
- <span class="fa fa-compress"></span>
+ <icon type="'minimize'"></icon>
  </button>
  </div>
 </div>

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

@@ -1,13 +1,11 @@
 <form
  role="form"
- class="kuiVerticalRhythm"
 >
- <div class="kuiBar">
- <div class="kuiBarSection">
- <div class="kuiSearchInput fullWidth">
- <div class="kuiSearchInput__icon kuiIcon fa-search"></div>
+ <div class="timSearchBar">
+ <div class="timSearchBar__section">
+ <icon class="timSearchBar__icon" type="'search'"></icon>
  <input
- class="kuiSearchInput__input"
+ class="timSearchBar__input"
  input-focus
  disable-input-focus="disableAutoFocus"
  ng-model="filter"
@@ -18,18 +16,17 @@
  autocomplete="off"
  data-test-subj="savedObjectFinderSearchInput"
  >
- </div>
  </div>
 
- <div class="kuiBarSection">
- <p class="kuiText kuiSubduedText"
+ <div>
+ <p class="timSearchBar__pagecount"
  i18n-id="timelion.savedObjectFinder.pageItemsFromHitCountDescription"
  i18n-default-message="{pageFirstItem}-{pageLastItem} of {hitCount}"
  i18n-values="{pageFirstItem, pageLastItem, hitCount: finder.hitCount}"
  ></p>
- <div class="kuiButtonGroup">
+ <div>
  <button
- class="kuiButton kuiButton--primary"
+ class="timApp__button"
  ng-if="onAddNew"
  ng-click="onAddNew()"
  data-test-subj="addNewSavedObjectLink"
@@ -40,7 +37,7 @@
  ></button>
 
  <button
- class="kuiButton kuiButton--secondary"
+ class="timApp__button--secondary"
  ng-if="!useLocalManagement"
  ng-click="finder.manageObjects(finder.properties.name)"
  i18n-id="timelion.savedObjectFinder.manageItemsButtonLabel"
@@ -56,7 +53,6 @@
 <paginate
  list="finder.hits"
  per-page="20"
- class="kuiVerticalRhythm"
 >
  <button
  class="paginate-heading list-group-item list-sort-button"
@@ -71,10 +67,8 @@
  i18n-id="timelion.savedObjectFinder.sortByButtonLabel"
  i18n-default-message="Name"
  ></span>
- <span
- class="fa"
- ng-class="finder.isAscending ? 'fa-caret-up' : 'fa-caret-down'"
- >
+ <icon type="'sortUp'" ng-if="finder.isAscending"></icon>
+ <icon type="'sortDown'" ng-if="!finder.isAscending"></icon>
  <span class="euiScreenReaderOnly"
  ng-if="finder.isAscending"
  i18n-id="timelion.savedObjectFinder.sortByButtonLabeAscendingScreenReaderOnly"
@@ -98,8 +92,8 @@
  <a ng-href="{{finder.makeUrl(hit)}}"
  ng-blur="finder.hitBlur($event)"
  ng-click="finder.preventClick($event)">
- <span aria-hidden="true" class="finder-type fa" ng-if="hit.icon" ng-class="hit.icon"></span>
- <div class="kuiIcon fa-flask ng-scope" ng-if="hit.type.shouldMarkAsExperimentalInUI()"></div>
+ <icon aria-hidden="true" class="finder-type" ng-if="hit.icon" ng-class="hit.icon"></icon>
+ <icon type="'beaker'" ng-if="hit.type.shouldMarkAsExperimentalInUI()"></icon>
  <span>{{hit.title}}</span>
  <p ng-if="hit.description" ng-bind="hit.description"></p>
  </a>

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;
 

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

@@ -1,24 +1,25 @@
 <div ng-hide="!savedObject.id || savedObject.isSaving">
  <div
  ng-hide="!savedObject.isTitleChanged() || savedObject.copyOnSave"
- class="kuiLocalDropdownWarning kuiVerticalRhythmSmall"
+ class="timDropdownWarning"
  i18n-id="timelion.savedObjects.howToSaveAsNewDescription"
  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."
  i18n-values="{ savedObjectName: savedObject.getDisplayName() }"
  i18n-description="'Save as a new {savedObjectName}' refers to timelion.savedObjects.saveAsNewLabel and should be the same text."
  ></div>
 
- <label class="kuiCheckBoxLabel kuiVerticalRhythmSmall">
+ <label class="timFormCheckbox">
  <input
- class="kuiCheckBox"
+ class="timFormCheckbox__input"
  type="checkbox"
  data-test-subj="saveAsNewCheckbox"
  ng-model="savedObject.copyOnSave"
  ng-checked="savedObject.copyOnSave"
  >
+ <icon type="'check'" class="timFormCheckbox__icon" color="'white'" size="'s'"></icon>
 
  <span
- class="kuiCheckBoxLabel__text"
+ style="margin-left: 8px;"
  i18n-id="timelion.savedObjects.saveAsNewLabel"
  i18n-default-message="Save as a new {savedObjectName}"
  i18n-values="{ savedObjectName: savedObject.getDisplayName() }"

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

@@ -12,7 +12,7 @@
  data-expression-input
  role="textbox"
  rows="{{ rows }}"
- class="timExpressionInput kuiTextArea fullWidth"
+ class="timExpressionInput timFormTextarea fullWidth"
  placeholder="{{ ::'timelion.expressionInputPlaceholder' | i18n: { defaultMessage: 'Try a query with {esQuery}', values: { esQuery: '.es(*)' } } }}"
  ng-model="sheet"
  ng-focus="onFocusInput()"

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.
  */