From e09fd451eb8fbc363b978367a0bffc695add970e Mon Sep 17 00:00:00 2001 From: Davey Holler Date: Tue, 26 Feb 2019 15:37:47 -0800 Subject: [PATCH 01/12] Initial go at light/dark mode compatability for the Monaco editor. --- x-pack/plugins/code/public/monaco/monaco.ts | 99 ++++++++++++++------- 1 file changed, 68 insertions(+), 31 deletions(-) diff --git a/x-pack/plugins/code/public/monaco/monaco.ts b/x-pack/plugins/code/public/monaco/monaco.ts index 9ba5dda2c5d8e..03947fb126423 100644 --- a/x-pack/plugins/code/public/monaco/monaco.ts +++ b/x-pack/plugins/code/public/monaco/monaco.ts @@ -94,6 +94,11 @@ import 'monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution' // import 'monaco-editor/esm/vs/basic-languages/pug/pug.contribution.js'; // import 'monaco-editor/esm/vs/basic-languages/python/python.contribution.js'; import 'monaco-editor/esm/vs/basic-languages/typescript/typescript.contribution'; +import chrome from '../../../../../src/legacy/ui/public/chrome'; +import darkTheme from '@elastic/eui/dist/eui_theme_dark.json'; +import lightTheme from '@elastic/eui/dist/eui_theme_light.json'; + +const IS_DARK_THEME = chrome.getUiSettingsClient().get('theme:darkMode'); // @ts-ignore /*self.MonacoEnvironment = { @@ -114,46 +119,78 @@ import 'monaco-editor/esm/vs/basic-languages/typescript/typescript.contribution' }, };*/ -const elasticLight = { - keyword: '#DD0A73', - comment: '#90A4AE', - delimeter: '#017F75', - string: '#0079A5', - number: '#E5830E', - regexp: '#0079A5', - types: '#909AA1', - annotation: '#D9D9D9', - tag: '#DD0A73', - symbol: '#A30000', - foreground: '#3F3F3F', - editorBackground: '#FFFFFF', - lineNumbers: '#D9D9D9', +function getTheme() { + if (IS_DARK_THEME) { + return darkTheme; + } else { + return lightTheme; + } +} + +function getHex(rgbString) { + const colorValues = rgbString.slice(4, -1); + const colorArray = colorValues.split(', '); + + const red = rgbToHex(colorArray[0]); + const green = rgbToHex(colorArray[1]); + const blue = rgbToHex(colorArray[2]); + + return '#' + red + green + blue; +} + +function rgbToHex(rgb) { + let hex = Number(rgb).toString(16); + if (hex.length < 2) { + hex = '0' + hex; + } + return hex; +} + +const syntaxTheme = { + keyword: getHex(getTheme().euiColorAccent), + comment: getHex(getTheme().euiColorMediumShade), + delimiter: getHex(getTheme().euiColorSecondary), + string: getHex(getTheme().euiColorPrimary), + number: getHex(getTheme().euiColorWarning), + regexp: getHex(getTheme().euiColorPrimary), + types: `${IS_DARK_THEME ? getHex(getTheme().euiColorVis5) : getHex(getTheme().euiColorVis9)}`, + annotation: getHex(getTheme().euiColorLightShade), + tag: getHex(getTheme().euiColorAccent), + symbol: getHex(getTheme().euiColorDanger), + foreground: getHex(getTheme().euiColorDarkestShade), + editorBackground: getHex(getTheme().euiColorLightestShade), + lineNumbers: getHex(getTheme().euiColorDarkShade), + editorIndentGuide: getHex(getTheme().euiColorLightShade), + selectionBackground: getHex(getTheme().euiColorLightShade), + editorWidgetBackground: getHex(getTheme().euiColorLightestShade), }; -monaco.editor.defineTheme('k6-colors-light', { +monaco.editor.defineTheme('euiColors', { base: 'vs', inherit: true, rules: [ - { token: 'keyword', foreground: elasticLight.keyword, fontStyle: 'bold' }, - { token: 'comment', foreground: elasticLight.comment }, - { token: 'delimiter', foreground: elasticLight.delimeter }, - { token: 'string', foreground: elasticLight.string }, - { token: 'number', foreground: elasticLight.number }, - { token: 'regexp', foreground: elasticLight.regexp }, - { token: 'type', foreground: elasticLight.types }, - { token: 'annotation', foreground: elasticLight.annotation }, - { token: 'tag', foreground: elasticLight.tag }, - { token: 'symbol', foreground: elasticLight.symbol }, + { token: 'keyword', foreground: syntaxTheme.keyword, fontStyle: 'bold' }, + { token: 'comment', foreground: syntaxTheme.comment }, + { token: 'delimiter', foreground: syntaxTheme.delimiter }, + { token: 'string', foreground: syntaxTheme.string }, + { token: 'number', foreground: syntaxTheme.number }, + { token: 'regexp', foreground: syntaxTheme.regexp }, + { token: 'type', foreground: syntaxTheme.types }, + { token: 'annotation', foreground: syntaxTheme.annotation }, + { token: 'tag', foreground: syntaxTheme.tag }, + { token: 'symbol', foreground: syntaxTheme.symbol }, // We provide an empty string fallback - { token: '', foreground: elasticLight.foreground }, + { token: '', foreground: syntaxTheme.foreground }, ], colors: { - 'editor.foreground': elasticLight.foreground, - 'editor.background': elasticLight.editorBackground, - 'editorLineNumber.foreground': elasticLight.lineNumbers, - 'editorLineNumber.activeForeground': elasticLight.lineNumbers, + 'editor.foreground': syntaxTheme.foreground, + 'editor.background': syntaxTheme.editorBackground, + 'editorLineNumber.foreground': syntaxTheme.lineNumbers, + 'editorLineNumber.activeForeground': syntaxTheme.lineNumbers, + 'editorIndentGuide.background': syntaxTheme.editorIndentGuide, + 'editor.selectionBackground': syntaxTheme.selectionBackground, }, }); -monaco.editor.setTheme('k6-colors-light'); +monaco.editor.setTheme('euiColors'); export { monaco }; From 7039fae53772b00ae39f0c81d7eae3b6ed5a97a7 Mon Sep 17 00:00:00 2001 From: Davey Holler Date: Wed, 27 Feb 2019 10:25:42 -0800 Subject: [PATCH 02/12] Alphebetizing the imports. --- x-pack/plugins/code/public/monaco/monaco.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/x-pack/plugins/code/public/monaco/monaco.ts b/x-pack/plugins/code/public/monaco/monaco.ts index 03947fb126423..0e484aafa9f08 100644 --- a/x-pack/plugins/code/public/monaco/monaco.ts +++ b/x-pack/plugins/code/public/monaco/monaco.ts @@ -49,6 +49,8 @@ import 'monaco-editor/esm/vs/editor/contrib/goToDefinition/goToDefinitionMouse'; // import 'monaco-editor/esm/vs/editor/standalone/browser/toggleHighContrast/toggleHighContrast.js'; import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js'; +import darkTheme from '@elastic/eui/dist/eui_theme_dark.json'; +import lightTheme from '@elastic/eui/dist/eui_theme_light.json'; // (2) Desired languages: // import 'monaco-editor/esm/vs/language/typescript/monaco.contribution'; // import 'monaco-editor/esm/vs/language/css/monaco.contribution'; @@ -95,8 +97,6 @@ import 'monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution' // import 'monaco-editor/esm/vs/basic-languages/python/python.contribution.js'; import 'monaco-editor/esm/vs/basic-languages/typescript/typescript.contribution'; import chrome from '../../../../../src/legacy/ui/public/chrome'; -import darkTheme from '@elastic/eui/dist/eui_theme_dark.json'; -import lightTheme from '@elastic/eui/dist/eui_theme_light.json'; const IS_DARK_THEME = chrome.getUiSettingsClient().get('theme:darkMode'); From 6dc4d0ec2f4fbbf460651e0f161bd4c7743cc88f Mon Sep 17 00:00:00 2001 From: Davey Holler Date: Wed, 27 Feb 2019 16:41:06 -0800 Subject: [PATCH 03/12] Using the color-convert package to convert rgb to hex values. Updating the monaco hover widget for dark mode. --- x-pack/package.json | 1 + x-pack/plugins/code/public/monaco/monaco.scss | 17 ++++++++--------- x-pack/plugins/code/public/monaco/monaco.ts | 18 +++--------------- 3 files changed, 12 insertions(+), 24 deletions(-) diff --git a/x-pack/package.json b/x-pack/package.json index 1b9ad8fd3fdac..2f2b9194db9df 100644 --- a/x-pack/package.json +++ b/x-pack/package.json @@ -192,6 +192,7 @@ "brace": "0.11.1", "chroma-js": "^1.3.6", "classnames": "2.2.5", + "color-convert": "^2.0.0", "concat-stream": "1.5.1", "constate": "^0.9.0", "content-disposition": "0.5.3", diff --git a/x-pack/plugins/code/public/monaco/monaco.scss b/x-pack/plugins/code/public/monaco/monaco.scss index 077ec5ce6811b..711f2b368f4c2 100644 --- a/x-pack/plugins/code/public/monaco/monaco.scss +++ b/x-pack/plugins/code/public/monaco/monaco.scss @@ -17,7 +17,7 @@ .monaco-editor-hover { min-width: 350px; - border: 1px solid #c8c8c8; + border: $euiBorderThin; cursor: default; position: absolute; overflow-y: auto; @@ -30,10 +30,9 @@ box-sizing: initial; animation: fadein .1s linear; line-height: 1.5em; - background: #FFFFFF; + background: $euiColorLightestShade; border-radius: 4px 4px 4px 4px; - box-shadow: 0 4px 8px 0 rgba(153,153,153,0.15), - 0 2px 3px -1px rgba(153,153,153,0.30); + @include euiBottomShadow; } .monaco-editor-hover .hover-row { @@ -41,14 +40,14 @@ } .monaco-editor-hover .button-group { - background: linear-gradient(-180deg, #FAFAFA 0%, #F8F8F8 100%); + background: linear-gradient(-180deg, $euiColorLightestShade 0%, $euiColorEmptyShade 100%); border-radius: 0 0 4px 4px; - box-shadow: 0 -1px 0 0 #D9D9D9; + box-shadow: 0 -1px 0 0 $euiBorderColor; height: 32px; } .monaco-editor-hover .button-group button:not(:first-child) { - border-left: 1px solid #D8D8D8; + border-left: 1px solid $euiBorderColor; } .monaco-editor-hover .button-group button{ @@ -71,8 +70,8 @@ animation-iteration-count: infinite; animation-name: placeHolderShimmer; animation-timing-function: linear; - background: #f6f7f8; - background: linear-gradient(to right, #eaeaea 8%, #f8f8f8 38%, #eaeaea 54%); + background: $euiColorLightestShade; + background: linear-gradient(to right, $euiColorLightShade 8%, $euiColorLightestShade 38%, $euiColorLightShade 54%); background-size: 1000px 640px; position: relative; diff --git a/x-pack/plugins/code/public/monaco/monaco.ts b/x-pack/plugins/code/public/monaco/monaco.ts index 0e484aafa9f08..fe2e18d00b63a 100644 --- a/x-pack/plugins/code/public/monaco/monaco.ts +++ b/x-pack/plugins/code/public/monaco/monaco.ts @@ -3,7 +3,7 @@ * or more contributor license agreements. Licensed under the Elastic License; * you may not use this file except in compliance with the Elastic License. */ - +import convert from 'color-convert'; // (1) Desired editor features: import 'monaco-editor/esm/vs/editor/browser/controller/coreCommands.js'; import 'monaco-editor/esm/vs/editor/browser/widget/codeEditorWidget.js'; @@ -127,23 +127,11 @@ function getTheme() { } } -function getHex(rgbString) { +function getHex(rgbString: string) { const colorValues = rgbString.slice(4, -1); const colorArray = colorValues.split(', '); - const red = rgbToHex(colorArray[0]); - const green = rgbToHex(colorArray[1]); - const blue = rgbToHex(colorArray[2]); - - return '#' + red + green + blue; -} - -function rgbToHex(rgb) { - let hex = Number(rgb).toString(16); - if (hex.length < 2) { - hex = '0' + hex; - } - return hex; + return '#' + convert.rgb.hex(Number(colorArray[0]), Number(colorArray[1]), Number(colorArray[2])); } const syntaxTheme = { From ec0729cd056c0f886387d0db83438c39e9f776f2 Mon Sep 17 00:00:00 2001 From: Davey Holler Date: Thu, 28 Feb 2019 10:16:04 -0800 Subject: [PATCH 04/12] Changes to highlight and selection colors. --- .../public/components/codeblock/codeblock.scss | 5 ++++- .../public/components/editor/references_panel.scss | 14 ++++++-------- x-pack/plugins/code/public/monaco/monaco.scss | 4 ++++ x-pack/plugins/code/public/monaco/monaco.ts | 5 +++++ 4 files changed, 19 insertions(+), 9 deletions(-) diff --git a/x-pack/plugins/code/public/components/codeblock/codeblock.scss b/x-pack/plugins/code/public/components/codeblock/codeblock.scss index ab1be3a467495..7666bd9648090 100644 --- a/x-pack/plugins/code/public/components/codeblock/codeblock.scss +++ b/x-pack/plugins/code/public/components/codeblock/codeblock.scss @@ -1,5 +1,8 @@ .code-search-highlight { - background-color: $euiColorHighlight !important; + background-color: $euiColorViz5; + color: $euiColorViz8 !important; + padding: $euiSizeXS / 2; + border-radius: $euiSizeXS / 2; font-weight: bold; font-style: oblique; } \ No newline at end of file diff --git a/x-pack/plugins/code/public/components/editor/references_panel.scss b/x-pack/plugins/code/public/components/editor/references_panel.scss index f8c9a97437762..4c9d09890ebf2 100644 --- a/x-pack/plugins/code/public/components/editor/references_panel.scss +++ b/x-pack/plugins/code/public/components/editor/references_panel.scss @@ -13,16 +13,14 @@ .expandButton { position: absolute; - top: -16px; - right: 17px; - background: #ffffff; - border: 1px solid #d3dae6; + top: -1 * $euiSize; + right: $euiSize + 1px; + background: $euiColorLightestShade; + border: $euiBorderThin; border-bottom: 0; height: 0; - min-height: 16px; + min-height: $euiSize; padding: 0; - box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.05), 0px -4px 4px rgba(0, 0, 0, 0.03), - 0px -6px 12px rgba(0, 0, 0, 0.05), 0px -12px 24px rgba(0, 0, 0, 0.05); - border-radius: 4px 4px 0px 0px; + border-radius: $euiSizeXS $euiSizeXS 0 0; } diff --git a/x-pack/plugins/code/public/monaco/monaco.scss b/x-pack/plugins/code/public/monaco/monaco.scss index 711f2b368f4c2..fb60a23a7e5e4 100644 --- a/x-pack/plugins/code/public/monaco/monaco.scss +++ b/x-pack/plugins/code/public/monaco/monaco.scss @@ -58,6 +58,10 @@ flex: 1; } +.code-mark-line-number, .code-monaco-highlight-line { + background-color: $euiColorLightShade; +} + .text-placeholder { width: 100%; height: 18px; diff --git a/x-pack/plugins/code/public/monaco/monaco.ts b/x-pack/plugins/code/public/monaco/monaco.ts index fe2e18d00b63a..a18144c5e669a 100644 --- a/x-pack/plugins/code/public/monaco/monaco.ts +++ b/x-pack/plugins/code/public/monaco/monaco.ts @@ -151,6 +151,9 @@ const syntaxTheme = { editorIndentGuide: getHex(getTheme().euiColorLightShade), selectionBackground: getHex(getTheme().euiColorLightShade), editorWidgetBackground: getHex(getTheme().euiColorLightestShade), + editorWidgetBorder: getHex(getTheme().euiColorLightShade), + findMatchBackground: getHex(getTheme().euiColorWarning), + findMatchHighlightBackground: getHex(getTheme().euiColorWarning), }; monaco.editor.defineTheme('euiColors', { @@ -177,6 +180,8 @@ monaco.editor.defineTheme('euiColors', { 'editorLineNumber.activeForeground': syntaxTheme.lineNumbers, 'editorIndentGuide.background': syntaxTheme.editorIndentGuide, 'editor.selectionBackground': syntaxTheme.selectionBackground, + 'editorWidget.border': syntaxTheme.editorWidgetBorder, + 'editorWidget.background': syntaxTheme.editorWidgetBackground, }, }); monaco.editor.setTheme('euiColors'); From 91df135ae6606afcbed41b4279b39f5fde3ae60c Mon Sep 17 00:00:00 2001 From: Davey Holler Date: Thu, 28 Feb 2019 10:19:34 -0800 Subject: [PATCH 05/12] Misspelled an EUI color variable name. --- .../plugins/code/public/components/codeblock/codeblock.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/x-pack/plugins/code/public/components/codeblock/codeblock.scss b/x-pack/plugins/code/public/components/codeblock/codeblock.scss index 7666bd9648090..43f223e42f4c9 100644 --- a/x-pack/plugins/code/public/components/codeblock/codeblock.scss +++ b/x-pack/plugins/code/public/components/codeblock/codeblock.scss @@ -1,6 +1,6 @@ .code-search-highlight { - background-color: $euiColorViz5; - color: $euiColorViz8 !important; + background-color: $euiColorVis5; + color: black !important; padding: $euiSizeXS / 2; border-radius: $euiSizeXS / 2; font-weight: bold; From d2e6ccdd593c5a088e949aed12198901b88cebaf Mon Sep 17 00:00:00 2001 From: Davey Holler Date: Thu, 28 Feb 2019 13:14:05 -0800 Subject: [PATCH 06/12] Dark mode for the search results page. --- .../components/search_page/code_result.tsx | 40 ++++++++++--------- .../components/search_page/scope_tabs.tsx | 1 - .../public/components/search_page/search.scss | 7 ++++ .../components/search_page/side_bar.tsx | 12 +----- x-pack/plugins/code/public/index.scss | 1 + 5 files changed, 32 insertions(+), 29 deletions(-) create mode 100644 x-pack/plugins/code/public/components/search_page/search.scss diff --git a/x-pack/plugins/code/public/components/search_page/code_result.tsx b/x-pack/plugins/code/public/components/search_page/code_result.tsx index f444555920cc5..4b05bc95866d7 100644 --- a/x-pack/plugins/code/public/components/search_page/code_result.tsx +++ b/x-pack/plugins/code/public/components/search_page/code_result.tsx @@ -4,26 +4,15 @@ * you may not use this file except in compliance with the Elastic License. */ -import { EuiBadge, EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; -import theme from '@elastic/eui/dist/eui_theme_light.json'; +import { EuiBadge, EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui'; import { IPosition } from 'monaco-editor'; import React from 'react'; import { Link } from 'react-router-dom'; -import styled from 'styled-components'; import { RepositoryUtils } from '../../../common/repository_utils'; import { history } from '../../utils/url'; import { CodeBlock } from '../codeblock/codeblock'; -const OrgName = styled.span` - color: ${theme.euiTextColor}; -`; - -const RepoName = styled.span` - color: ${theme.euiTextColor}; - font-weight: bold; -`; - interface Props { results: any[]; } @@ -43,8 +32,21 @@ export class CodeResult extends React.PureComponent {

- {RepositoryUtils.orgNameFromUri(uri)}/ - {RepositoryUtils.repoNameFromUri(uri)} + + + {RepositoryUtils.orgNameFromUri(uri)}/ + + + + {RepositoryUtils.repoNameFromUri(uri)} + + +

{ {hits} - hits from - - {filePath} - + +  hits from + +  {filePath} + + { }); return ( - +
@@ -142,7 +134,7 @@ export class SideBar extends React.PureComponent { {langStatsComp} - +
); } } diff --git a/x-pack/plugins/code/public/index.scss b/x-pack/plugins/code/public/index.scss index 3474301d5b85d..75fe50523a02c 100644 --- a/x-pack/plugins/code/public/index.scss +++ b/x-pack/plugins/code/public/index.scss @@ -9,5 +9,6 @@ @import "./monaco/override_monaco_styles.scss"; @import "./components/diff_page/diff.scss"; @import "./components/main/main.scss"; +@import "./components/search_page/search.scss"; @import "./components/admin_page/sidebar.scss"; \ No newline at end of file From d77618e5e36cc97192243564890e9c70101134e0 Mon Sep 17 00:00:00 2001 From: Davey Holler Date: Thu, 28 Feb 2019 13:15:45 -0800 Subject: [PATCH 07/12] Prettifying code_result.tsx. --- .../code/public/components/search_page/code_result.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/x-pack/plugins/code/public/components/search_page/code_result.tsx b/x-pack/plugins/code/public/components/search_page/code_result.tsx index 4b05bc95866d7..45afa9fc2b572 100644 --- a/x-pack/plugins/code/public/components/search_page/code_result.tsx +++ b/x-pack/plugins/code/public/components/search_page/code_result.tsx @@ -39,7 +39,9 @@ export class CodeResult extends React.PureComponent { gutterSize="none" > - {RepositoryUtils.orgNameFromUri(uri)}/ + + {RepositoryUtils.orgNameFromUri(uri)}/ + From 44d121562b855a86d414563406805999f63fbd15 Mon Sep 17 00:00:00 2001 From: Davey Holler Date: Thu, 28 Feb 2019 13:55:19 -0800 Subject: [PATCH 08/12] Removing the monaco scroll decorator from the editor. --- x-pack/plugins/code/public/monaco/monaco.scss | 4 ++++ yarn.lock | 9 ++++++++- 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/x-pack/plugins/code/public/monaco/monaco.scss b/x-pack/plugins/code/public/monaco/monaco.scss index fb60a23a7e5e4..1c14ee4fb8cf7 100644 --- a/x-pack/plugins/code/public/monaco/monaco.scss +++ b/x-pack/plugins/code/public/monaco/monaco.scss @@ -58,6 +58,10 @@ flex: 1; } +.monaco-editor .scroll-decoration { + display: none; +} + .code-mark-line-number, .code-monaco-highlight-line { background-color: $euiColorLightShade; } diff --git a/yarn.lock b/yarn.lock index 272634b702e77..bfa58b70bc056 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6748,12 +6748,19 @@ color-convert@^1.9.1: dependencies: color-name "1.1.3" +color-convert@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-2.0.0.tgz#9851ac61cc0d3898a8a3088650d5bf447bf69d97" + integrity sha512-hzTicsCJIHdxih9+2aLR1tNGZX5qSJGRHDPVwSY26tVrEf55XNajLOBWz2UuWSIergszA09/bqnOiHyqx9fxQg== + dependencies: + color-name "~1.1.4" + color-name@1.1.3: version "1.1.3" resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25" integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU= -color-name@^1.0.0, color-name@^1.1.1: +color-name@^1.0.0, color-name@^1.1.1, color-name@~1.1.4: version "1.1.4" resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2" integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA== From 0abac74f799e0ac1ba7a8f172d31f2db29b70ce7 Mon Sep 17 00:00:00 2001 From: Davey Holler Date: Fri, 1 Mar 2019 13:20:10 -0800 Subject: [PATCH 09/12] Fixing some type errors for color-convert --- x-pack/package.json | 3 ++- x-pack/plugins/code/public/monaco/monaco.ts | 1 + yarn.lock | 2 +- 3 files changed, 4 insertions(+), 2 deletions(-) diff --git a/x-pack/package.json b/x-pack/package.json index 2f2b9194db9df..609af0376f39c 100644 --- a/x-pack/package.json +++ b/x-pack/package.json @@ -39,6 +39,7 @@ "@types/angular": "1.6.50", "@types/boom": "^7.2.0", "@types/cheerio": "^0.22.10", + "@types/color-convert": "^1.9.0", "@types/d3-array": "^1.2.1", "@types/d3-scale": "^2.0.0", "@types/d3-shape": "^1.3.1", @@ -80,10 +81,10 @@ "@types/redux-actions": "^2.2.1", "@types/rimraf": "^2.0.2", "@types/sinon": "^7.0.0", - "@types/styled-components": "^3.0.1", "@types/storybook__addon-actions": "^3.4.1", "@types/storybook__addon-info": "^3.4.2", "@types/storybook__react": "^4.0.0", + "@types/styled-components": "^3.0.1", "@types/supertest": "^2.0.5", "@types/tar-fs": "^1.16.1", "@types/uuid": "^3.4.4", diff --git a/x-pack/plugins/code/public/monaco/monaco.ts b/x-pack/plugins/code/public/monaco/monaco.ts index a18144c5e669a..97e7b8ef6bba9 100644 --- a/x-pack/plugins/code/public/monaco/monaco.ts +++ b/x-pack/plugins/code/public/monaco/monaco.ts @@ -131,6 +131,7 @@ function getHex(rgbString: string) { const colorValues = rgbString.slice(4, -1); const colorArray = colorValues.split(', '); + // @ts-ignore return '#' + convert.rgb.hex(Number(colorArray[0]), Number(colorArray[1]), Number(colorArray[2])); } diff --git a/yarn.lock b/yarn.lock index bfa58b70bc056..935b66956aa27 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1692,7 +1692,7 @@ resolved "https://registry.yarnpkg.com/@types/cmd-shim/-/cmd-shim-2.0.0.tgz#c3d81d3c2a51af3c65c19b4f1d493a75abf07a5c" integrity sha512-WuV5bOQTGxqzewPnJbrDe51I5mnX2wTRYy+PduRuIvSuBWZlxDYD6Qt/f1m5sezxx1yyE9+1wHJ/0sRuNIoFaQ== -"@types/color-convert@*": +"@types/color-convert@*", "@types/color-convert@^1.9.0": version "1.9.0" resolved "https://registry.yarnpkg.com/@types/color-convert/-/color-convert-1.9.0.tgz#bfa8203e41e7c65471e9841d7e306a7cd8b5172d" integrity sha512-OKGEfULrvSL2VRbkl/gnjjgbbF7ycIlpSsX7Nkab4MOWi5XxmgBYvuiQ7lcCFY5cPDz7MUNaKgxte2VRmtr4Fg== From 0eb8b01355fe4dc87517a58df5ade8ef5136a0ae Mon Sep 17 00:00:00 2001 From: Davey Holler Date: Mon, 4 Mar 2019 12:13:47 -0800 Subject: [PATCH 10/12] Markdown styling for dark mode. --- x-pack/plugins/code/public/index.scss | 3 ++- x-pack/plugins/code/public/style/markdown.scss | 7 +++++++ 2 files changed, 9 insertions(+), 1 deletion(-) create mode 100644 x-pack/plugins/code/public/style/markdown.scss diff --git a/x-pack/plugins/code/public/index.scss b/x-pack/plugins/code/public/index.scss index 75fe50523a02c..2642114ea2b5e 100644 --- a/x-pack/plugins/code/public/index.scss +++ b/x-pack/plugins/code/public/index.scss @@ -11,4 +11,5 @@ @import "./components/main/main.scss"; @import "./components/search_page/search.scss"; -@import "./components/admin_page/sidebar.scss"; \ No newline at end of file +@import "./components/admin_page/sidebar.scss"; +@import "./style/markdown.scss"; \ No newline at end of file diff --git a/x-pack/plugins/code/public/style/markdown.scss b/x-pack/plugins/code/public/style/markdown.scss new file mode 100644 index 0000000000000..0e9d834738c9d --- /dev/null +++ b/x-pack/plugins/code/public/style/markdown.scss @@ -0,0 +1,7 @@ +.markdown-body { + color: $euiColorDarkestShade; + a, a:visited { + color: $euiColorPrimary; + text-decoration: underline; + } +} \ No newline at end of file From 415c93729bbb320dde8a1dadbd780e5e01689968 Mon Sep 17 00:00:00 2001 From: David Hubler Date: Mon, 4 Mar 2019 17:00:46 -0800 Subject: [PATCH 11/12] Changing the import location of 'chrome' in the monaco editor --- x-pack/plugins/code/public/monaco/monaco.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/x-pack/plugins/code/public/monaco/monaco.ts b/x-pack/plugins/code/public/monaco/monaco.ts index 97e7b8ef6bba9..cca90c0a38fde 100644 --- a/x-pack/plugins/code/public/monaco/monaco.ts +++ b/x-pack/plugins/code/public/monaco/monaco.ts @@ -96,7 +96,7 @@ import 'monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution' // import 'monaco-editor/esm/vs/basic-languages/pug/pug.contribution.js'; // import 'monaco-editor/esm/vs/basic-languages/python/python.contribution.js'; import 'monaco-editor/esm/vs/basic-languages/typescript/typescript.contribution'; -import chrome from '../../../../../src/legacy/ui/public/chrome'; +import chrome from 'ui/chrome'; const IS_DARK_THEME = chrome.getUiSettingsClient().get('theme:darkMode'); From 07adfa78331ac5b6df28b8a090e33af91d064b9e Mon Sep 17 00:00:00 2001 From: David Hubler Date: Tue, 5 Mar 2019 14:17:36 -0800 Subject: [PATCH 12/12] Adding a constant for the getTheme() method and adjusting blame view dark mode styles. --- .../code/public/components/main/blame.tsx | 17 ++++---- .../code/public/components/main/main.scss | 8 ++++ x-pack/plugins/code/public/monaco/monaco.ts | 40 ++++++++++--------- 3 files changed, 37 insertions(+), 28 deletions(-) diff --git a/x-pack/plugins/code/public/components/main/blame.tsx b/x-pack/plugins/code/public/components/main/blame.tsx index 8430e534f535a..782fbcb0d342f 100644 --- a/x-pack/plugins/code/public/components/main/blame.tsx +++ b/x-pack/plugins/code/public/components/main/blame.tsx @@ -23,32 +23,31 @@ const Avatar = styled(EuiAvatar)` margin: auto ${theme.euiSizeS} auto 0; `; -const Root = styled(EuiFlexGroup)<{ isFirstLine: boolean }>` - padding: ${theme.paddingSizes.xs} ${theme.paddingSizes.s}; - border-top: ${props => (props.isFirstLine ? 'none' : theme.euiBorderThick)}; -`; - export class Blame extends React.PureComponent<{ blame: GitBlame; isFirstLine: boolean }> { public render(): React.ReactNode { const { blame, isFirstLine } = this.props; return ( - + - {blame.commit.message} + {blame.commit.message} - + {moment(blame.commit.date).fromNow()} - + ); } } diff --git a/x-pack/plugins/code/public/components/main/main.scss b/x-pack/plugins/code/public/components/main/main.scss index 7f9109474e470..bf2e59468edcb 100644 --- a/x-pack/plugins/code/public/components/main/main.scss +++ b/x-pack/plugins/code/public/components/main/main.scss @@ -237,3 +237,11 @@ box-shadow: none; } } + +.codeBlame__item { + padding: $euiSizeXS $euiSizeS; + border-top: $euiBorderThin; + &.codeBlame__item--first{ + border-top: none; + } +} diff --git a/x-pack/plugins/code/public/monaco/monaco.ts b/x-pack/plugins/code/public/monaco/monaco.ts index cca90c0a38fde..6e082425d555c 100644 --- a/x-pack/plugins/code/public/monaco/monaco.ts +++ b/x-pack/plugins/code/public/monaco/monaco.ts @@ -127,6 +127,8 @@ function getTheme() { } } +const themeName = getTheme(); + function getHex(rgbString: string) { const colorValues = rgbString.slice(4, -1); const colorArray = colorValues.split(', '); @@ -136,25 +138,25 @@ function getHex(rgbString: string) { } const syntaxTheme = { - keyword: getHex(getTheme().euiColorAccent), - comment: getHex(getTheme().euiColorMediumShade), - delimiter: getHex(getTheme().euiColorSecondary), - string: getHex(getTheme().euiColorPrimary), - number: getHex(getTheme().euiColorWarning), - regexp: getHex(getTheme().euiColorPrimary), - types: `${IS_DARK_THEME ? getHex(getTheme().euiColorVis5) : getHex(getTheme().euiColorVis9)}`, - annotation: getHex(getTheme().euiColorLightShade), - tag: getHex(getTheme().euiColorAccent), - symbol: getHex(getTheme().euiColorDanger), - foreground: getHex(getTheme().euiColorDarkestShade), - editorBackground: getHex(getTheme().euiColorLightestShade), - lineNumbers: getHex(getTheme().euiColorDarkShade), - editorIndentGuide: getHex(getTheme().euiColorLightShade), - selectionBackground: getHex(getTheme().euiColorLightShade), - editorWidgetBackground: getHex(getTheme().euiColorLightestShade), - editorWidgetBorder: getHex(getTheme().euiColorLightShade), - findMatchBackground: getHex(getTheme().euiColorWarning), - findMatchHighlightBackground: getHex(getTheme().euiColorWarning), + keyword: getHex(themeName.euiColorAccent), + comment: getHex(themeName.euiColorMediumShade), + delimiter: getHex(themeName.euiColorSecondary), + string: getHex(themeName.euiColorPrimary), + number: getHex(themeName.euiColorWarning), + regexp: getHex(themeName.euiColorPrimary), + types: `${IS_DARK_THEME ? getHex(themeName.euiColorVis5) : getHex(themeName.euiColorVis9)}`, + annotation: getHex(themeName.euiColorLightShade), + tag: getHex(themeName.euiColorAccent), + symbol: getHex(themeName.euiColorDanger), + foreground: getHex(themeName.euiColorDarkestShade), + editorBackground: getHex(themeName.euiColorLightestShade), + lineNumbers: getHex(themeName.euiColorDarkShade), + editorIndentGuide: getHex(themeName.euiColorLightShade), + selectionBackground: getHex(themeName.euiColorLightShade), + editorWidgetBackground: getHex(themeName.euiColorLightestShade), + editorWidgetBorder: getHex(themeName.euiColorLightShade), + findMatchBackground: getHex(themeName.euiColorWarning), + findMatchHighlightBackground: getHex(themeName.euiColorWarning), }; monaco.editor.defineTheme('euiColors', {