From f3a4f30b03704101bb6a0f83f2aef4adc6044090 Mon Sep 17 00:00:00 2001 From: Caroline Horn <549577+cchaos@users.noreply.github.com> Date: Thu, 27 Sep 2018 21:02:24 -0400 Subject: [PATCH] More Kibana plugin LESS 2 SASS (#23413) (#23591) This PR removes the LESS files for dev_tools, context, console, and inspector_views and replaces them with Sass. --- src/core_plugins/console/index.js | 1 + .../console/public/_ace_overrides.scss | 66 ++++++ src/core_plugins/console/public/_app.scss | 64 ++++++ src/core_plugins/console/public/console.js | 1 - .../console/public/css/sense.less | 207 ------------------ .../console/public/css/sense.light.less | 49 ----- src/core_plugins/console/public/index.html | 22 +- src/core_plugins/console/public/index.scss | 12 + .../src/controllers/sense_controller.js | 6 +- .../console/public/src/directives/_help.scss | 5 + .../public/src/directives/_history.scss | 33 +++ .../console/public/src/directives/_index.scss | 2 + .../console/public/src/directives/help.html | 8 +- .../public/src/directives/history.html | 14 +- .../console/public/src/input_resize.js | 2 +- .../console/public/tests/src/editor.test.js | 12 +- .../tests/src/input_tokenization.test.js | 14 +- .../public/tests/src/integration.test.js | 8 +- .../tests/src/output_tokenization.test.js | 2 +- src/core_plugins/inspector_views/index.js | 5 +- .../public/data/_data_table.scss | 8 + .../inspector_views/public/data/data_table.js | 7 +- .../public/data/data_table.less | 8 - .../inspector_views/public/index.scss | 11 + .../public/requests/_requests.scss | 20 ++ .../requests/details/req_details_stats.js | 2 +- .../public/requests/request_selector.js | 10 +- .../public/requests/requests_inspector.less | 27 --- .../public/requests/requests_view.js | 2 - .../kibana/public/context/_index.scss | 8 + .../components/size_picker/_index.scss | 1 + .../{size_picker.less => _size_picker.scss} | 4 +- .../components/size_picker/size_picker.html | 2 +- .../components/size_picker/size_picker.js | 1 - .../kibana/public/dev_tools/_index.scss | 18 ++ .../dev_tools/directives/dev_tools_app.js | 1 - .../dev_tools/partials/dev_tools_app.html | 4 +- .../dev_tools/styles/dev_tools_app.less | 10 - src/core_plugins/kibana/public/index.scss | 11 +- .../public/styles.less | 0 src/core_plugins/timelion/index.js | 2 +- src/ui/public/styles/_mixins.scss | 19 ++ .../public/vis/editors/default/_default.scss | 18 +- 43 files changed, 336 insertions(+), 391 deletions(-) create mode 100644 src/core_plugins/console/public/_ace_overrides.scss create mode 100644 src/core_plugins/console/public/_app.scss delete mode 100644 src/core_plugins/console/public/css/sense.less delete mode 100644 src/core_plugins/console/public/css/sense.light.less create mode 100644 src/core_plugins/console/public/index.scss create mode 100644 src/core_plugins/console/public/src/directives/_help.scss create mode 100644 src/core_plugins/console/public/src/directives/_history.scss create mode 100644 src/core_plugins/console/public/src/directives/_index.scss create mode 100644 src/core_plugins/inspector_views/public/data/_data_table.scss delete mode 100644 src/core_plugins/inspector_views/public/data/data_table.less create mode 100644 src/core_plugins/inspector_views/public/index.scss create mode 100644 src/core_plugins/inspector_views/public/requests/_requests.scss delete mode 100644 src/core_plugins/inspector_views/public/requests/requests_inspector.less create mode 100644 src/core_plugins/kibana/public/context/_index.scss create mode 100644 src/core_plugins/kibana/public/context/components/size_picker/_index.scss rename src/core_plugins/kibana/public/context/components/size_picker/{size_picker.less => _size_picker.scss} (86%) create mode 100644 src/core_plugins/kibana/public/dev_tools/_index.scss delete mode 100644 src/core_plugins/kibana/public/dev_tools/styles/dev_tools_app.less delete mode 100644 src/core_plugins/state_session_storage_redirect/public/styles.less diff --git a/src/core_plugins/console/index.js b/src/core_plugins/console/index.js index ec013116502f..a89d142e5fc7 100644 --- a/src/core_plugins/console/index.js +++ b/src/core_plugins/console/index.js @@ -137,6 +137,7 @@ export default function (kibana) { apps: apps, hacks: ['plugins/console/hacks/register'], devTools: ['plugins/console/console'], + styleSheetPaths: `${__dirname}/public/index.scss`, injectDefaultVars(server) { return { diff --git a/src/core_plugins/console/public/_ace_overrides.scss b/src/core_plugins/console/public/_ace_overrides.scss new file mode 100644 index 000000000000..f11979d18cca --- /dev/null +++ b/src/core_plugins/console/public/_ace_overrides.scss @@ -0,0 +1,66 @@ +.conApp, +.conHelp__example, +.conHistory__viewer { + + .ace-tm { + .ace_gutter { + background-color: $euiColorEmptyShade; + color: $euiColorMediumShade; + } + + .ace_gutter-active-line, + .ace_marker-layer .ace_active-line { + background-color: transparentize($euiColorLightShade, .3); + } + } + + .ace_snippet-marker { + width: 100%; + background-color: tintOrShade($euiColorLightShade, 50%, 0); + border: none; + } + + .ace_search { + z-index: $euiZLevel1 + 1; + } + + .ace_layer.ace_marker-layer { + overflow: visible; + } + + .ace_scroller { + border-left: $euiBorderThin; + } + + // SASSTODO: Coloring uses EUI code block variables. + // However, the naming does not currently line up (selector to variable). + // This is so that there is no drastic visual difference for the user. + // Eventually, we can update this to match all other editors. + + .ace_warning { + color: $euiColorDanger; + } + + .ace_method { + color: $euiCodeBlockStringColor; + } + + .ace_url, + .ace_start_triple_quote, + .ace_end_triple_quote { + color: $euiCodeBlockNumberColor; + } + + .ace_variable { + color: $euiCodeBlockTypeColor; + } + + .ace_string, + .ace_multi_string { + color: $euiCodeBlockRegexpColor; + } + + .ace_multi_string { + font-style: italic; + } +} diff --git a/src/core_plugins/console/public/_app.scss b/src/core_plugins/console/public/_app.scss new file mode 100644 index 000000000000..16e3bb33caa5 --- /dev/null +++ b/src/core_plugins/console/public/_app.scss @@ -0,0 +1,64 @@ +.conApp { + display: flex; + flex: 1 1 auto; + position: relative; + padding: $euiSizeS; + background-color: $euiColorLightestShade; + // Make sure the editor actions don't create scrollbars on this container + // SASSTODO: Uncomment when tooltips are EUI-ified (inside portals) + // overflow: hidden; +} + +.conApp__editor { + // Default size of left side is half the large breakpoint + // but this is inline overridden by the resizer + width: map-get($euiBreakpoints, "l") / 2; + display: flex; + flex: 0 0 auto; + position: relative; +} + +.conApp__output { + display: flex; + flex: 1 1 1px; +} + +.conApp__editorContent, +.conApp__outputContent { + flex: 1 1 1px; +} + +.conApp__editorActions { + position: absolute; + z-index: $euiZLevel1; + top: 0; + // Adjust for possible scrollbars + right: $euiSize; + line-height: 1; +} + +.conApp__editorActionButton { + padding: 0 $euiSizeXS; + appearance: none; + border: none; + background: none; +} + +.conApp__editorActionButton--success { + color: $euiColorSuccess; +} + +.conApp__resizer { + @include kibana-resizer; +} + +// SASSTODO: This component seems to not be used anymore? +// Possibly replaced by the Ace version +.conApp__autoComplete { + position: absolute; + left: -1000px; + visibility: hidden; + /* by pass any other element in ace and resize bar, but not modal popups */ + z-index: $euiZLevel1 + 2; + margin-top: 22px; +} diff --git a/src/core_plugins/console/public/console.js b/src/core_plugins/console/public/console.js index d6096d136abd..1b586162f450 100644 --- a/src/core_plugins/console/public/console.js +++ b/src/core_plugins/console/public/console.js @@ -27,7 +27,6 @@ require('ui/modules').get('kibana', ['sense.ui.bootstrap']); require('ui/tooltip'); require('ui/autoload/styles'); -require('./css/sense.less'); require('./src/controllers/sense_controller'); require('./src/directives/sense_history'); require('./src/directives/sense_settings'); diff --git a/src/core_plugins/console/public/css/sense.less b/src/core_plugins/console/public/css/sense.less deleted file mode 100644 index 61b6fecefae8..000000000000 --- a/src/core_plugins/console/public/css/sense.less +++ /dev/null @@ -1,207 +0,0 @@ -@import (reference) "~ui/styles/variables"; - -nav.navbar .logo.hidden-sm { - display: block !important; -} - -sense-help-example, -sense-history-viewer, -#editor_output_container { - @import "./sense.light.less"; -} - -#editor_output_container { - display: flex; - flex: 1 1 auto; - position: relative; - padding: 10px; - font-size: 16px; - - .ace-tm .ace_gutter { - background: @white; - color: #A0A0A0; - } - - .ace-tm .ace_gutter-active-line { - background-color: #e6e6e8; - } - - .ace-tm .ace_marker-layer .ace_active-line { - background-color: #dbdcdd; - } - - .ace_snippet-marker { - background-color: #e8e8e8; - border: 0; - } -} - -#editor_container { - display: flex; - flex: 0 0 auto; - width: 468px; - position: relative; - - #autocomplete { - position: absolute; - left: -1000px; - } - - #editor_actions { - position: absolute; - } - - #editor { - flex: 1 1 1px; - } - - .ace_search { - z-index: 1006; - } -} - -#editor_resizer { - display: flex; - flex: 0 0 13px; - cursor: ew-resize; - background-color: @globalColorLightestGray; - align-items: center; - margin: -10px 0; - - &:hover { - background-color: lighten(@globalColorBlue, 50%); - } - - &.active { - background-color: @globalColorBlue; - } -} - -#output_container { - display: flex; - flex: 1 1 1px; - - #output { - flex: 1 1 1px; - } -} - -#editor_actions { - position: absolute; - top: 0; - right: 0; - line-height: 1; - padding: 1px 3px 0 0; - /* by pass any other element in ace and resize bar, but not modal popups */ - z-index: 1005; - - .editor_action { - padding: 2px 4px; - appearance: none; - border: none; - background: none; - } - - .fa-wrench { - color: rgb(51, 51, 51); - } - - .fa-play { - color: rgb(112, 186, 86); - } -} - -#autocomplete { - visibility: hidden; - position: absolute; - /* by pass any other element in ace and resize bar, but not modal popups */ - z-index: 1003; - margin-top: 22px; - /*font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;*/ - /*font-size: 12px;*/ - /*max-height: 100px;*/ - /*overflow-y: auto;*/ - /* prevent horizontal scrollbar */ - /*overflow-x: hidden;*/ -} - -.ui-state-focus { - margin: auto !important; -} - -sense-help-example { - display: block; - height: 11em; - margin: 1em 0; -} - -.history-body { - display: flex; - height: 300px; - - .history-reqs, - .history-viewer { - flex: 0 0 50%; - } - - .history-reqs { - overflow: auto; - margin: 0 25px 0 0; - } - - .history-req { - display: flex; - - &.selected { - background-color: #DCDCDC; - } - - .history-req-icon { - flex: 1 0 auto; - text-align: right; - .fa-chevron-right { - opacity: .25; - } - } - } -} - -.history-footer { - text-align: right; - padding-top: 10px; -} - -.ui-autocomplete { - z-index: 400 !important; -} - -.ace_editor { - line-height: normal; -} - -.ace_layer.ace_marker-layer { - overflow: visible; -} - -.ace_snippet-marker { - position: absolute; - width: 100% !important; -} - -// .ui-resizable-e { -// cursor: ew-resize; -// width: 13px; -// right: -14px; -// top: -1px; -// bottom: -2px; -// background-color: transparent; -// position: absolute; -// } -// -// .ui-resizable-e:hover { -// background-color: #DCDCDC; -// } - -.ui-resizable-e.active { - background-color: rgba(194, 193, 208, 100); -} diff --git a/src/core_plugins/console/public/css/sense.light.less b/src/core_plugins/console/public/css/sense.light.less deleted file mode 100644 index 966198d21a16..000000000000 --- a/src/core_plugins/console/public/css/sense.light.less +++ /dev/null @@ -1,49 +0,0 @@ -.ace_method { - color: #E64A3A; -} - -.ace_url { - color: #40B0D3; -} - -.ace_variable { - color: #006E8A; -} - -.ace_string { - color: #166555; -} - -.ace_warning { - color: #E64A3A; -} - -.ace_scroller { - border-left: 1px solid @globalColorLightGray; -} - -.ace_multi_string { - color: #166555; - font-style: italic; -} - -.ace_start_triple_quote, .ace_end_triple_quote { - color: #40B0D3; -} - -.ace_snippet-marker { - background: rgba(194, 193, 208, 0.20); - border-top: dotted 1px rgba(194, 193, 208, 0.80); - border-bottom: dotted 1px rgba(194, 193, 208, 0.80); - margin-top: -1px; /* compensate for background */ -} - -.ui-menu { - background-color: white; - border: 1px solid #CCC; -} - -.ui-state-focus { - color: white; - background-color: #08C; -} diff --git a/src/core_plugins/console/public/index.html b/src/core_plugins/console/public/index.html index 31b02421a40d..a39750a38cd2 100644 --- a/src/core_plugins/console/public/index.html +++ b/src/core_plugins/console/public/index.html @@ -1,11 +1,11 @@ -
-
-
    -
    +
    +
    +
      +
      +
    • @@ -40,15 +40,15 @@
      • -
      GET _search +
      GET _search { "query": { "match_all": {} } }
      -
      ︙
      -
      -
      {}
      +
      ︙
      +
      +
      {}
      diff --git a/src/core_plugins/console/public/index.scss b/src/core_plugins/console/public/index.scss new file mode 100644 index 000000000000..6e3e8b0fcc9b --- /dev/null +++ b/src/core_plugins/console/public/index.scss @@ -0,0 +1,12 @@ +@import 'ui/public/styles/styling_constants'; + +// Prefix all styles with "con" to avoid conflicts. +// Examples +// conChart +// conChart__legend +// conChart__legend--small +// conChart__legend-isLoading + +@import './app'; +@import './ace_overrides'; +@import './src/directives/index'; diff --git a/src/core_plugins/console/public/src/controllers/sense_controller.js b/src/core_plugins/console/public/src/controllers/sense_controller.js index 760207eb9113..ce0e03880118 100644 --- a/src/core_plugins/console/public/src/controllers/sense_controller.js +++ b/src/core_plugins/console/public/src/controllers/sense_controller.js @@ -44,10 +44,10 @@ module.controller('SenseController', function SenseController(Private, $scope, $ let input; let output; $timeout(async () => { - output = initializeOutput($('#output')); - input = initializeInput($('#editor'), $('#editor_actions'), $('#copy_as_curl'), output, $scope.openDocumentation); + output = initializeOutput($('#ConAppOutput')); + input = initializeInput($('#ConAppEditor'), $('#ConAppEditorActions'), $('#ConCopyAsCurl'), output, $scope.openDocumentation); init(input, output, $location.search().load_from); - kbnUiAceKeyboardModeService.initialize($scope, $('#editor')); + kbnUiAceKeyboardModeService.initialize($scope, $('#ConAppEditor')); const session = input.getSession(); session.getSelection().on('changeCursor', () => { $scope.getDocumentation(); diff --git a/src/core_plugins/console/public/src/directives/_help.scss b/src/core_plugins/console/public/src/directives/_help.scss new file mode 100644 index 000000000000..594bcfd1db31 --- /dev/null +++ b/src/core_plugins/console/public/src/directives/_help.scss @@ -0,0 +1,5 @@ +.conHelp__example { + display: block; + height: $euiSize * 8; // 8 lines of code + margin: $euiSize 0; +} diff --git a/src/core_plugins/console/public/src/directives/_history.scss b/src/core_plugins/console/public/src/directives/_history.scss new file mode 100644 index 000000000000..982669b44656 --- /dev/null +++ b/src/core_plugins/console/public/src/directives/_history.scss @@ -0,0 +1,33 @@ +.conHistory__body { + display: flex; + height: $euiSizeXL * 10; +} + + +.conHistory__footer { + text-align: right; + padding-top: $euiSize; +} + +.conHistory__reqs, +.conHistory__viewer { + flex: 0 0 50%; +} + +.conHistory__reqs { + overflow: auto; + margin-right: $euiSizeL; +} + +.conHistory__req { + display: flex; + justify-content: space-between; + + &-selected { + background-color: $euiColorLightestShade; + } +} + +.conHistory__reqIcon { + color: $euiColorMediumShade; +} diff --git a/src/core_plugins/console/public/src/directives/_index.scss b/src/core_plugins/console/public/src/directives/_index.scss new file mode 100644 index 000000000000..56bd7ed20bda --- /dev/null +++ b/src/core_plugins/console/public/src/directives/_index.scss @@ -0,0 +1,2 @@ +@import './help'; +@import './history'; diff --git a/src/core_plugins/console/public/src/directives/help.html b/src/core_plugins/console/public/src/directives/help.html index 51d7e4761c29..5c39a4e88f8f 100644 --- a/src/core_plugins/console/public/src/directives/help.html +++ b/src/core_plugins/console/public/src/directives/help.html @@ -1,17 +1,17 @@ -

      Help

      +

      Help

      -

      Request format

      +

      Request format

      You can type one or more requests in the white editor. Console understands requests in a compact format: - +
      -

      Keyboard commands

      +

      Keyboard commands

      Ctrl/Cmd + I
      diff --git a/src/core_plugins/console/public/src/directives/history.html b/src/core_plugins/console/public/src/directives/history.html index 630ab2b26457..1fbc991ca23e 100644 --- a/src/core_plugins/console/public/src/directives/history.html +++ b/src/core_plugins/console/public/src/directives/history.html @@ -1,8 +1,8 @@

      History

      -
      +
        History aria-label="History of sent requests" >
      • {{ history.describeReq(req) }} - +
      - +
      -
      +