TSVB less to sass - and some UI work (#24250)

Fixes #16483, Fixes #20115, Fixes #17852, Fixes #16768, Fixes #14348, Fixes #17842, closes #15580, closes #14938

src/core_plugins/metrics/index.js

@@ -27,7 +27,8 @@ export default function (kibana) {
     uiExports: {
       visTypes: [
         'plugins/metrics/kbn_vis_types'
-      ]
+      ],
+      styleSheetPaths: `${__dirname}/public/index.scss`,
     },
 
     config(Joi) {

src/core_plugins/metrics/public/_hacks.scss

@@ -0,0 +1,128 @@
+// EUITODO: Create our own Markdown styles
+.tvbMarkdown__content {
+  color: rgba(0,0,0,1);
+
+  pre, code, tt {
+    border-radius: 0;
+    font: 1em/1.5em 'Andale Mono', 'Lucida Console', monospace;
+  }
+
+  h1 { font-size: 30px; }
+  h2 { font-size: 26px; }
+  h3 { font-size: 22px; }
+  h4 { font-size: 18px; }
+  h5 { font-size: 16px; }
+  h6 { font-size: 16px; }
+
+  h1, h2, h3, h4, h5, h6, b, strong {
+    margin:0 0 15px 0;
+    font-weight: bold;
+  }
+  em, i, dfn {
+    font-style: italic;
+  }
+  dfn {
+    font-weight:bold;
+  }
+  p, code, pre, kbd {
+    margin:0 0 15px 0;
+  }
+  blockquote {
+    margin:0 15px 15px 15px;
+  }
+  cite {
+    font-style: italic;
+  }
+  li ul, li ol {
+    margin:0 15px;
+  }
+  ul, ol {
+    margin:0 15px 15px 15px;
+  }
+  ul {
+    list-style-type:disc;
+  }
+  ol {
+    list-style-type:decimal;
+  }
+  ol ol {
+    list-style: upper-alpha;
+  }
+  ol ol ol {
+    list-style: lower-roman;
+  }
+  ol ol ol ol {
+    list-style: lower-alpha;
+  }
+  dl {
+    margin:0 0 15px 0;
+  }
+  dl dt {
+    font-weight:bold;
+  }
+  dd {
+    margin-left:1.5em;
+  }
+  table {
+    margin-bottom:1.4em;
+    width:100%;
+  }
+  th {
+    font-weight:bold;
+  }
+  th, td, caption {
+    padding:4px 15px 4px 5px;
+  }
+  tfoot {
+    font-style:italic;
+  }
+  sup, sub {
+    line-height:0;
+  }
+  abbr, acronym {
+    border-bottom: 1px dotted;
+  }
+  address {
+    margin:0 0 15px;
+    font-style:italic;
+  }
+  del {
+    text-decoration: line-through;
+  }
+  pre {
+    margin: 15px 0;
+    white-space: pre;
+  }
+  img {
+    max-width: 100%;
+  }
+  pre, code, tt {
+    background-color: rgba(0,0,0,0.1);
+    color: red;
+    code {
+      color: rgba(0,0,0,1);
+      background-color: transparent;
+    }
+    border: none;
+  }
+
+  .tvbMarkdown.reversed & {
+    .table > thead > tr > th {
+      color: rgba(255,255,255,0.5);
+      border-bottom: 2px solid rgba(255,255,255,0.2);
+    }
+    .table > tbody > tr > td {
+      border-top: 1px solid rgba(255,255,255,0.2);
+    }
+    color: rgba(255,255,255,1);
+    pre, code, tt {
+      background-color: rgba(255,255,255,0.2);
+      color: #ffa5a8;
+      code {
+        color: rgba(255,255,255,1);
+        background-color: transparent;
+      }
+      border: none;
+    }
+  }
+}

src/core_plugins/metrics/public/_mixins.scss

@@ -0,0 +1,14 @@
+@import 'node_modules/@elastic/eui/src/components/form/variables';
+@import 'node_modules/@elastic/eui/src/components/form/mixins';
+
+@mixin tvbEditor__repeatingRow {
+  background-color: $euiColorLightestShade;
+  padding: $euiSizeS;
+  margin-bottom: $euiSizeS;
+}
+
+// SASSTODO: These need to be converted to EUI,
+// but they have type errors
+@mixin tvbEditor__input {
+  @include euiFormControlStyle($borderOnly: false, $includeStates: true, $includeSizes: false);
+}

src/core_plugins/metrics/public/_ui_sortable.scss

@@ -0,0 +1,41 @@
+// react-anything-sortable overrides
+// Scoped to just the TSVB editor
+
+.tvbEditor {
+
+  .ui-sortable {
+    display: block;
+    position: relative;
+    overflow: visible;
+    user-select: none;
+
+    &:before,
+    &:after {
+      content: " ";
+      display: table;
+    }
+
+    &:after {
+      clear: both;
+    }
+
+    .ui-sortable-item.ui-sortable-dragging {
+      position: absolute;
+      z-index: $euiZLevel2;
+    }
+
+    .ui-sortable-placeholder {
+      display: none;
+
+      &.visible {
+        display: block;
+        opacity: 0.5;
+        z-index: -1;
+      }
+    }
+  }
+
+}
+
+
+

src/core_plugins/metrics/public/_variables.scss

@@ -0,0 +1,11 @@
+$tvbLineColor: transparentize($euiColorFullShade,0.8);
+$tvbLineColorReversed: transparentize($euiColorEmptyShade,0.6);
+
+$tvbTextColor: transparentize($euiColorFullShade,0.6);
+$tvbTextColorReversed: transparentize($euiColorEmptyShade,0.4);
+
+$tvbValueColor: transparentize($euiColorFullShade,0.3);
+$tvbValueColorReversed: transparentize($euiColorEmptyShade,0.2);
+
+$tvbHoverBackgroundColor: transparentize($euiColorFullShade,0.9);
+$tvbHoverBackgroundColorReversed: transparentize($euiColorEmptyShade,0.9);

src/core_plugins/metrics/public/components/_annotations_editor.scss

@@ -0,0 +1,13 @@
+@import 'node_modules/@elastic/eui/src/components/panel/mixins';
+
+.tvbAnnotationsEditor__container {
+  padding: $euiSize;
+  background-color: $euiColorLightestShade;
+}
+
+@include euiPanel('tvbAnnotationsEditor');
+
+.tvbAnnotationsEditor {
+  margin-bottom: $euiSize;
+  padding: $euiSizeS;
+}

src/core_plugins/metrics/public/components/_color_picker.scss

@@ -0,0 +1,44 @@
+// EUITODO: Convert to EuiColorPicker
+
+@import 'node_modules/@elastic/eui/src/components/color_picker/index';
+
+.tvbColorPicker {
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+
+.tvbColorPicker__swatch-empty,
+.tvbColorPicker__swatch {
+  @extend .euiColorPicker__swatch;
+}
+
+.tvbColorPicker__swatch-empty {
+  background-color: transparent;
+  background-size: 22px 22px;
+  background-image: repeating-linear-gradient(
+    -45deg,
+    $euiColorDanger,
+    $euiColorDanger 2px,
+    transparent 2px,
+    transparent $euiSize
+  );
+}
+
+.tvbColorPicker__clear {
+  margin-left: $euiSizeXS;
+}
+
+.tvbColorPicker__popover {
+  position: absolute;
+  top: $euiSizeL;
+  z-index: 2;
+}
+
+.tvbColorPicker__cover {
+  position: fixed;
+  top: 0px;
+  right: 0px;
+  left: 0px;
+  bottom: 0px;
+}

src/core_plugins/metrics/public/components/_color_rules.scss

@@ -0,0 +1,3 @@
+.tvbColorRules__rule {
+  @include tvbEditor__repeatingRow;
+}

src/core_plugins/metrics/public/components/_custom_color_picker.scss

@@ -0,0 +1,97 @@
+// EUITODO: Convert to EuiColorPicker
+// with additional support for alpha, saturation, swatches
+
+// SASSTODO: This custom picker moved all styles from react-color inline styles
+// to SASS, but it should be in EUI.
+// Also, some pixel values were kept as is to match inline styles from react-color
+.tvbColorPickerPopUp {
+  @include euiBottomShadowMedium();
+  background-color: $euiColorEmptyShade;
+  border-radius: $euiBorderRadius;
+  box-sizing: initial;
+  width: 275px;
+  font-family: 'Menlo';
+}
+
+.tvbColorPickerPopUp__saturation {
+  width: 100%;
+  padding-bottom: 55%;
+  position: relative;
+  border-radius: $euiBorderRadius $euiBorderRadius 0 0;
+  overflow: hidden;
+}
+
+.tvbColorPickerPopUp__body {
+  padding: $euiSize;
+}
+
+.tvbColorPickerPopUp__controls {
+  display: flex;
+}
+
+.tvbColorPickerPopUp__color {
+  width: $euiSizeXL;
+
+  // The color indicator doesn't work, hiding it until it does
+  display: none;
+}
+
+.tvbColorPickerPopUp__color-disableAlpha {
+  width: $euiSizeL;
+}
+
+.tvbColorPickerPopUp__swatch {
+  margin-top: 6px;
+  width: $euiSize;
+  height: $euiSize;
+  border-radius: $euiSizeS;
+  position: relative;
+  overflow: hidden;
+}
+
+.tvbColorPickerPopUp__swatch-disableAlpha {
+  width: 10px;
+  height: 10px;
+  margin: 0px;
+}
+
+.tvbColorPickerPopUp__active {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  right: 0px;
+  bottom: 0px;
+  border-radius: $euiSizeS;
+  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1);
+  z-index: 2;
+}
+
+.tvbColorPickerPopUp__toggles {
+  flex: 1
+}
+
+.tvbColorPickerPopUp__hue {
+  height: 10px;
+  position: relative;
+  margin-bottom: $euiSizeS;
+}
+
+.tvbColorPickerPopUp__hue-disableAlpha {
+  margin-bottom: 0px;
+}
+
+.tvbColorPickerPopUp__alpha {
+  height: 10px;
+  position: relative;
+}
+
+.tvbColorPickerPopUp__alpha-disableAlpha {
+  display: none;
+}
+
+.tvbColorPickerPopUp__swatches {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  margin-top: $euiSize;
+}