From 2776f91f51fcc2afa936c45c33ed2e4cc856438a Mon Sep 17 00:00:00 2001 From: Nikola Metulev Date: Thu, 26 Mar 2020 15:43:29 -0700 Subject: [PATCH 1/5] changed monaco editor to light theme --- .storybook/addons/codeEditorAddon/editor.js | 40 ++++++++++----------- 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/.storybook/addons/codeEditorAddon/editor.js b/.storybook/addons/codeEditorAddon/editor.js index 057091a3ca..67cca7bcea 100644 --- a/.storybook/addons/codeEditorAddon/editor.js +++ b/.storybook/addons/codeEditorAddon/editor.js @@ -3,10 +3,10 @@ import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'; let debounce = (func, wait, immediate) => { var timeout; - return function() { + return function () { var context = this, args = arguments; - var later = function() { + var later = function () { timeout = null; if (!immediate) func.apply(context, args); }; @@ -29,30 +29,30 @@ export class EditorElement extends LitElement { height: 100%; display: flex; flex-direction: column; - background-color: rgb(37, 37, 38); + background-color: rgb(243, 243, 243); + border: 1px solid #e7e7e7; } - .tab-root { - height: 38px; - } + .editor-root { flex-basis: 100%; } .tab { - background-color: rgb(45, 45, 45); - color: rgba(255, 255, 255, 0.25); - font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, - 'Helvetica Neue', sans-serif; - font-size: 12px; - padding: 14px 18px; + background-color: rgb(236,236,236); + color: #616161; + font-family: -apple-system,BlinkMacSystemFont,sans-serif; + font-size: 10px; + padding: 8px 18px; display: inline-block; + cursor: pointer; + margin: 0px -2px 0px 0px; } .tab.selected { - background-color: rgb(30, 30, 30); - color: white; + background-color: white; + color: rgb(51, 51, 51); font-weight: 400; } `; @@ -94,7 +94,7 @@ export class EditorElement extends LitElement { this.files[this.currentType] = this.editor.getValue(); let event = new CustomEvent('fileUpdated'); this.dispatchEvent(event); - }, 500); + }, 1000); this.setupEditor(this.editorRoot); this.appendChild(this.editorRoot); @@ -123,11 +123,11 @@ export class EditorElement extends LitElement { this.editor = monaco.editor.create(htmlElement, { model: this.currentEditorState.model, - theme: 'vs-dark', scrollBeyondLastLine: false, minimap: { enabled: false - } + }, + fontSize: '12px' }); const changeViewZones = () => { @@ -189,8 +189,8 @@ export class EditorElement extends LitElement {
${this.fileTypes.map( - type => - html` + type => + html`
` - )} + )}
From 3341d4ced8ddc026247cb12af2659fe102aab045 Mon Sep 17 00:00:00 2001 From: Nikola Metulev Date: Fri, 27 Mar 2020 11:30:32 -0700 Subject: [PATCH 2/5] changed border to only one side --- .storybook/addons/codeEditorAddon/editor.js | 1 - .storybook/preview-body.html | 7 +++++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/.storybook/addons/codeEditorAddon/editor.js b/.storybook/addons/codeEditorAddon/editor.js index 67cca7bcea..236ca0593a 100644 --- a/.storybook/addons/codeEditorAddon/editor.js +++ b/.storybook/addons/codeEditorAddon/editor.js @@ -30,7 +30,6 @@ export class EditorElement extends LitElement { display: flex; flex-direction: column; background-color: rgb(243, 243, 243); - border: 1px solid #e7e7e7; } diff --git a/.storybook/preview-body.html b/.storybook/preview-body.html index 1bfd1384c3..73debe4067 100644 --- a/.storybook/preview-body.html +++ b/.storybook/preview-body.html @@ -30,11 +30,12 @@ } .story-mgt-editor { - width: 50%; + width: calc(50% - 1px); height: 100%; position: relative; float: left; overflow: hidden; + border-left: 1px solid #e7e7e7; } .story-mgt-separator { @@ -67,8 +68,10 @@ } .story-mgt-editor { - height: 50%; + height: calc(50% - 1px); width: 100%; + border-left: none; + border-top: 1px solid #e7e7e7; } .story-mgt-separator { From 933c2ca8638561555917949e0fde9802bb3ea8fa Mon Sep 17 00:00:00 2001 From: Nikola Metulev Date: Fri, 27 Mar 2020 14:44:02 -0700 Subject: [PATCH 3/5] fixed resize bug --- .storybook/addons/codeEditorAddon/codeAddon.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/.storybook/addons/codeEditorAddon/codeAddon.js b/.storybook/addons/codeEditorAddon/codeAddon.js index c1ee3d717d..41eb35415c 100644 --- a/.storybook/addons/codeEditorAddon/codeAddon.js +++ b/.storybook/addons/codeEditorAddon/codeAddon.js @@ -113,10 +113,10 @@ export const withCodeEditor = makeDecorator({ root.appendChild(editor); window.addEventListener('resize', () => { - storyElement.style.height = ''; - storyElement.style.width = ''; - editor.style.height = ''; - editor.style.width = ''; + storyElementWrapper.style.height = null; + storyElementWrapper.style.width = null; + editor.style.height = null; + editor.style.width = null; }); return root; From 6606bdae3623f15319b74e57ac1ebd7b3d92ebfa Mon Sep 17 00:00:00 2001 From: Nikola Metulev Date: Mon, 6 Apr 2020 08:50:14 -0700 Subject: [PATCH 4/5] Addressing pr comments --- .storybook/addons/codeEditorAddon/editor.js | 22 ++++++++------------- 1 file changed, 8 insertions(+), 14 deletions(-) diff --git a/.storybook/addons/codeEditorAddon/editor.js b/.storybook/addons/codeEditorAddon/editor.js index 236ca0593a..dbfd823434 100644 --- a/.storybook/addons/codeEditorAddon/editor.js +++ b/.storybook/addons/codeEditorAddon/editor.js @@ -42,10 +42,11 @@ export class EditorElement extends LitElement { background-color: rgb(236,236,236); color: #616161; font-family: -apple-system,BlinkMacSystemFont,sans-serif; - font-size: 10px; + font-size: 11px; padding: 8px 18px; display: inline-block; cursor: pointer; + user-select: none; margin: 0px -2px 0px 0px; } @@ -125,8 +126,7 @@ export class EditorElement extends LitElement { scrollBeyondLastLine: false, minimap: { enabled: false - }, - fontSize: '12px' + } }); const changeViewZones = () => { @@ -187,17 +187,11 @@ export class EditorElement extends LitElement { return html`
- ${this.fileTypes.map( - type => - html` -
- ${type} - - ` - )} + ${this.fileTypes.map(type => html` +
+ ${type} +
`)}
From 6cb5243f96c0600d8094290b90467f600b0f082e Mon Sep 17 00:00:00 2001 From: Nikola Metulev Date: Mon, 6 Apr 2020 11:51:44 -0700 Subject: [PATCH 5/5] using flex grid --- .storybook/preview-body.html | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/.storybook/preview-body.html b/.storybook/preview-body.html index 73debe4067..41f90e2787 100644 --- a/.storybook/preview-body.html +++ b/.storybook/preview-body.html @@ -14,6 +14,7 @@ height: 100%; width: 100%; position: relative; + display: flex; } .story-mgt-preview { @@ -62,6 +63,10 @@ } @media (max-width: 768px) { + .story-mgt-root { + flex-direction: column; + } + .story-mgt-preview-wrapper { height: 50%; width: 100%;