From c90d631914208762728b8df3dc11033fdebb9868 Mon Sep 17 00:00:00 2001 From: John McCambridge Date: Mon, 29 Apr 2019 17:56:09 -0500 Subject: [PATCH 01/15] Set theme CSS vars on service collection init during theme change, make delete dialog use theme vars --- packages/ide/src/fill/dialog.scss | 37 ++++++++++++++++--------------- packages/vscode/src/dialog.scss | 15 +++---------- packages/vscode/src/dialog.ts | 23 ------------------- packages/vscode/src/workbench.ts | 24 +++++++++++++++++++- 4 files changed, 45 insertions(+), 54 deletions(-) diff --git a/packages/ide/src/fill/dialog.scss b/packages/ide/src/fill/dialog.scss index ca5dc53b5e89..9a70499d1da1 100644 --- a/packages/ide/src/fill/dialog.scss +++ b/packages/ide/src/fill/dialog.scss @@ -3,11 +3,10 @@ padding-left: 40px; padding-right: 40px; padding-bottom: 25px; - background: #242424; - -webkit-box-shadow: 0px 0px 10px -3px rgba(0,0,0,0.75); - -moz-box-shadow: 0px 0px 10px -3px rgba(0,0,0,0.75); - box-shadow: 0px 0px 10px -3px rgba(0,0,0,0.75); - border-radius: 3px; + border-radius: 8px; + text-align: center; + background-color: var(--primary); + box-shadow: 0 12px 16px 0 rgba(29, 64, 126, 0.07); } .msgbox.input { @@ -15,55 +14,57 @@ width: 100%; } -.msgbox > .input { - background: #141414; +.msgbox>.input { + background: var(--list-active-selection-foreground); border: none; box-sizing: border-box; padding: 10px; width: 100%; } -.msgbox > .msg { +.msgbox>.msg { + color: var(--header-foreground); font-size: 16px; font-weight: bold; } -.msgbox > .detail { +.msgbox>.detail { font-size: 14px; margin: 5px 0; } -.msgbox > .errors { +.msgbox>.errors { margin-top: 20px; } -.msgbox > .errors { +.msgbox>.errors { color: #f44747; } -.msgbox > .button-wrapper { +.msgbox>.button-wrapper { display: flex; flex-direction: row; justify-content: space-between; margin-top: 20px; } -.msgbox > .button-wrapper > button { +.msgbox>.button-wrapper>button { flex: 1; - border-radius: 2px; + border-radius: px; padding: 10px; color: white; - background: #3d3d3d; + background: var(--list-active-selection-background); border: 0px; cursor: pointer; opacity: 0.8; + outline: none; } -.msgbox > .button-wrapper > button:hover { +.msgbox>.button-wrapper>button:hover { opacity: 1; } -.msgbox > .button-wrapper > button:not(:last-child) { +.msgbox>.button-wrapper>button:not(:last-child) { margin-right: 8px; } @@ -80,4 +81,4 @@ top: 0; transition: 300ms opacity ease; z-index: 15; -} +} \ No newline at end of file diff --git a/packages/vscode/src/dialog.scss b/packages/vscode/src/dialog.scss index b1ffb8462d48..7ee5344f6b78 100644 --- a/packages/vscode/src/dialog.scss +++ b/packages/vscode/src/dialog.scss @@ -1,21 +1,12 @@ .dialog { - --primary: #2A2E37; - --border: black; - --faded: #a0a1a5; - --disabled: #888; - --header-background: #161616; - --header-foreground: white; - --list-active-selection-background: rgb(0, 120, 160); - --list-active-selection-foreground: white; - --list-hover-background: rgb(36, 39, 46); font-family: inherit; - box-shadow: 0 18px 80px 10px rgba(0, 0, 0, 0.1); + box-shadow: 0 12px 16px 0 rgba(29,64,126,0.07); background-color: var(--primary); display: flex; flex-direction: column; user-select: none; overflow: hidden; - border-radius: 5px; + border-radius: 8px; .monaco-tl-twistie { display: none; @@ -55,7 +46,7 @@ &.active { font-weight: bold; - color: var(--list-active-selection-foreground); + color: var(--list-active-selection-background); } } } diff --git a/packages/vscode/src/dialog.ts b/packages/vscode/src/dialog.ts index 4ec06306e18d..7543c24235db 100644 --- a/packages/vscode/src/dialog.ts +++ b/packages/vscode/src/dialog.ts @@ -118,29 +118,6 @@ class Dialog { (document.querySelector(".monaco-workbench") || document.body).appendChild(this.background); this.root.classList.add("dialog"); - const setProperty = (vari: string, id: string): void => { - const getColor = (id: string): string | undefined => { - const ts = workbench.serviceCollection.get(IThemeService) as IThemeService; - const c = ts.getTheme().getColor(id); - if (!c) { - return; - } - - return c.toString(); - }; - const c = getColor(id); - if (c) { - this.root.style.setProperty(vari, c); - } - }; - setProperty("--primary", "sideBar.background"); - setProperty("--list-active-selection-background", "list.activeSelectionBackground"); - setProperty("--list-active-selection-foreground", "list.activeSelectionForeground"); - setProperty("--list-hover-background", "list.hoverBackground"); - setProperty("--header-background", "sideBarSectionHeader.background"); - setProperty("--header-foreground", "sideBarSectionHeader.foreground"); - setProperty("--border", "panel.border"); - this.background.addEventListener("contextmenu", (event) => { event.preventDefault(); }); diff --git a/packages/vscode/src/workbench.ts b/packages/vscode/src/workbench.ts index c2499e87a1f6..efd4d564ec1f 100644 --- a/packages/vscode/src/workbench.ts +++ b/packages/vscode/src/workbench.ts @@ -20,6 +20,7 @@ import { PasteAction } from "./fill/paste"; import { ExplorerItem, ExplorerModel } from "vs/workbench/contrib/files/common/explorerModel"; import { IEditorGroup } from "vs/workbench/services/editor/common/editorGroupsService"; +import { IThemeService, ITheme } from "vs/platform/theme/common/themeService"; import { IEditorService, IResourceEditor } from "vs/workbench/services/editor/common/editorService"; import { INotificationService } from "vs/platform/notification/common/notification"; import { IProgressService2, ProgressLocation } from "vs/platform/progress/common/progress"; @@ -128,9 +129,11 @@ export class Workbench { public set serviceCollection(collection: ServiceCollection) { this._serviceCollection = collection; - const contextKeys = this.serviceCollection.get(IContextKeyService) as IContextKeyService; const bounded = this.clipboardContextKey.bindTo(contextKeys); + const ts = this.serviceCollection.get(IThemeService) as IThemeService; + this.updateThemeVars(ts.getTheme()); // update CSS vars when page is loaded + ts.onThemeChange(this.updateThemeVars); // update CSS vars when theme is updated client.clipboard.onPermissionChange((enabled) => { bounded.set(enabled); }); @@ -235,6 +238,25 @@ export class Workbench { } } } + + private updateThemeVars(theme: ITheme): void { + const colorString = (id: any) => { + const colorObj = theme.getColor(id); + if (colorObj) { + return colorObj.toString(); + } else { + return; + } + }; + const root = document.documentElement; + root.style.setProperty("--primary", colorString("sideBar.background")!); + root.style.setProperty("--list-active-selection-background", colorString("list.activeSelectionBackground")!); + root.style.setProperty("--list-active-selection-foreground", colorString("list.activeSelectionForeground")!); + root.style.setProperty("--list-hover-background", colorString("list.hoverBackground")!); + root.style.setProperty("--header-background", colorString("sideBarSectionHeader.background")!); + root.style.setProperty("--header-foreground", colorString("sideBarSectionHeader.foreground")!); + root.style.setProperty("--border", colorString("panel.border")!); + } } export const workbench = new Workbench(); From 1f89316cc87e0662901fe1709f312931398979ff Mon Sep 17 00:00:00 2001 From: John McCambridge Date: Tue, 30 Apr 2019 16:23:28 -0500 Subject: [PATCH 02/15] Add documentation for method, add borders around breadcrumbs, add input for file path --- packages/vscode/src/dialog.scss | 15 ++++++++++++++- packages/vscode/src/dialog.ts | 11 +++++++++-- packages/vscode/src/workbench.ts | 4 +++- 3 files changed, 26 insertions(+), 4 deletions(-) diff --git a/packages/vscode/src/dialog.scss b/packages/vscode/src/dialog.scss index 7ee5344f6b78..c9f9439c4f18 100644 --- a/packages/vscode/src/dialog.scss +++ b/packages/vscode/src/dialog.scss @@ -29,6 +29,12 @@ padding: 4px; border-bottom: 1px solid var(--border); } + .path-bar { + display: none; + flex-direction: row; + padding: 4px; + border: 1px solid var(--header-background); + } .path { display: flex; @@ -36,6 +42,8 @@ .path-part { padding: 5px; + list-style-type: none; + border: 1px solid var(--border); border-radius: 3px; font-size: 1.02em; cursor: pointer; @@ -46,9 +54,14 @@ &.active { font-weight: bold; - color: var(--list-active-selection-background); + color: var(--list-active-selection-foreground); } } + .path-btn { + align-content: right; + font-size: 1.02em; + border: 1px solid var(--border); + } } .dialog-grid { diff --git a/packages/vscode/src/dialog.ts b/packages/vscode/src/dialog.ts index 7543c24235db..95f5ad424361 100644 --- a/packages/vscode/src/dialog.ts +++ b/packages/vscode/src/dialog.ts @@ -42,7 +42,6 @@ export interface OpenDialogOptions extends CommonDialogOptions { readonly openFile?: boolean; }; } - export interface SaveDialogOptions extends CommonDialogOptions { readonly type: DialogType.Save; readonly nameFieldLabel?: string; @@ -84,6 +83,8 @@ class Dialog { private readonly filesNode: HTMLElement; private readonly pathNode: HTMLElement; + private readonly barNode: HTMLElement; + private readonly pathBtn: HTMLButtonElement; private readonly entryList: ObjectTree; private readonly background: HTMLElement; @@ -143,11 +144,17 @@ class Dialog { const navItems = document.createElement("div"); navItems.classList.add("nav"); + const pathBar = document.createElement("input"); + pathBar.classList.add("path-bar"); this.pathNode = document.createElement("div"); this.pathNode.classList.add("path"); + this.barNode = document.createElement("div"); + this.barNode.classList.add("path-bar"); navItems.appendChild(this.pathNode); this.root.appendChild(navItems); + pathBar.appendChild(this.barNode); + this.root.appendChild(pathBar); const headingsNode = document.createElement("div"); headingsNode.className = "headings dialog-grid"; @@ -322,7 +329,7 @@ class Dialog { const pathParts = ["", ...this._path.split("/").filter((p) => p.length > 0)]; for (let i = 0; i < pathParts.length; i++) { - const pathPartNode = document.createElement("div"); + const pathPartNode = document.createElement("li"); pathPartNode.classList.add("path-part"); pathPartNode.innerText = pathParts[i].length > 0 ? pathParts[i] : "/"; diff --git a/packages/vscode/src/workbench.ts b/packages/vscode/src/workbench.ts index efd4d564ec1f..0cc16d50c6aa 100644 --- a/packages/vscode/src/workbench.ts +++ b/packages/vscode/src/workbench.ts @@ -238,7 +238,9 @@ export class Workbench { } } } - + /** + * Updates CSS vars on page load and when the theme is updated + */ private updateThemeVars(theme: ITheme): void { const colorString = (id: any) => { const colorObj = theme.getColor(id); From f323903eb01de6b7d3d377153de2a1a17919e47a Mon Sep 17 00:00:00 2001 From: John McCambridge Date: Wed, 1 May 2019 14:32:19 -0500 Subject: [PATCH 03/15] Toggle path bar while hiding breadcrumbs, check validity of path --- packages/vscode/src/dialog.scss | 18 +++++++++++++-- packages/vscode/src/dialog.ts | 39 +++++++++++++++++++++++++++++---- 2 files changed, 51 insertions(+), 6 deletions(-) diff --git a/packages/vscode/src/dialog.scss b/packages/vscode/src/dialog.scss index c9f9439c4f18..2e44867b2ec3 100644 --- a/packages/vscode/src/dialog.scss +++ b/packages/vscode/src/dialog.scss @@ -25,17 +25,31 @@ .nav { display: flex; + // flex: 1; flex-direction: row; padding: 4px; border-bottom: 1px solid var(--border); } - .path-bar { - display: none; + .path-editor { + display: block; + height: 30px; + flex-direction: row; + font-size: 1.02em; + border: 1px solid var(--border); + border-radius: 2px; + color: var(--primary) + } + .path-div { + display: block; flex-direction: row; padding: 4px; border: 1px solid var(--header-background); } + .hidden { + display: none; + } + .path { display: flex; flex-direction: row; diff --git a/packages/vscode/src/dialog.ts b/packages/vscode/src/dialog.ts index 95f5ad424361..c25004158ce5 100644 --- a/packages/vscode/src/dialog.ts +++ b/packages/vscode/src/dialog.ts @@ -15,6 +15,7 @@ import { FileKind } from "vs/platform/files/common/files"; import { IThemeService } from "vs/platform/theme/common/themeService"; import { workbench } from "./workbench"; import "./dialog.scss"; +import { dialog } from 'electron'; /** * Describes the type of dialog to show. @@ -84,7 +85,6 @@ class Dialog { private readonly filesNode: HTMLElement; private readonly pathNode: HTMLElement; private readonly barNode: HTMLElement; - private readonly pathBtn: HTMLButtonElement; private readonly entryList: ObjectTree; private readonly background: HTMLElement; @@ -145,16 +145,46 @@ class Dialog { const navItems = document.createElement("div"); navItems.classList.add("nav"); const pathBar = document.createElement("input"); - pathBar.classList.add("path-bar"); + pathBar.classList.add("path-editor", "hidden"); this.pathNode = document.createElement("div"); this.pathNode.classList.add("path"); this.barNode = document.createElement("div"); - this.barNode.classList.add("path-bar"); navItems.appendChild(this.pathNode); this.root.appendChild(navItems); pathBar.appendChild(this.barNode); this.root.appendChild(pathBar); + // event listener for pathBar + pathBar.addEventListener("keydown", async (e) => { + try { + if (e.key === "Enter") { + navItems.classList.remove("hidden"); + pathBar.classList.add("hidden"); + this.path = pathBar.value; + await util.promisify(fs.stat)(pathBar.value); + } else if (e.key === "Escape") { + navItems.classList.remove("hidden"); + pathBar.classList.add("hidden"); + } + } catch (err) { + throw new Error(`${err}`); + } + }); + + // open/close input field for path + const togglePathBar = () => { + if (pathBar.classList.contains("hidden")) { + this.barNode.classList.add("path-editor"); + pathBar.defaultValue = this._path!; + pathBar.addEventListener("submit", togglePathBar); + pathBar.classList.remove("hidden"); + navItems.classList.add("hidden"); + pathBar.select(); + } else { + pathBar.classList.add("hidden"); + } + }; + navItems.addEventListener("click", togglePathBar); const headingsNode = document.createElement("div"); headingsNode.className = "headings dialog-grid"; @@ -329,7 +359,7 @@ class Dialog { const pathParts = ["", ...this._path.split("/").filter((p) => p.length > 0)]; for (let i = 0; i < pathParts.length; i++) { - const pathPartNode = document.createElement("li"); + const pathPartNode = document.createElement("div"); pathPartNode.classList.add("path-part"); pathPartNode.innerText = pathParts[i].length > 0 ? pathParts[i] : "/"; @@ -346,6 +376,7 @@ class Dialog { } private set path(directory: string) { + console.log(directory); this.list(directory).then((value) => { this._path = directory; this.buildPath(); From 71dc6a17f45a5fda1da74ad320d8f779979747df Mon Sep 17 00:00:00 2001 From: John McCambridge Date: Wed, 1 May 2019 17:25:55 -0500 Subject: [PATCH 04/15] Various bug fixes --- packages/vscode/src/dialog.scss | 1 - packages/vscode/src/dialog.ts | 10 +++++----- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/packages/vscode/src/dialog.scss b/packages/vscode/src/dialog.scss index 2e44867b2ec3..b024bbe238a2 100644 --- a/packages/vscode/src/dialog.scss +++ b/packages/vscode/src/dialog.scss @@ -32,7 +32,6 @@ } .path-editor { display: block; - height: 30px; flex-direction: row; font-size: 1.02em; border: 1px solid var(--border); diff --git a/packages/vscode/src/dialog.ts b/packages/vscode/src/dialog.ts index c25004158ce5..5e1a184b27bf 100644 --- a/packages/vscode/src/dialog.ts +++ b/packages/vscode/src/dialog.ts @@ -15,7 +15,6 @@ import { FileKind } from "vs/platform/files/common/files"; import { IThemeService } from "vs/platform/theme/common/themeService"; import { workbench } from "./workbench"; import "./dialog.scss"; -import { dialog } from 'electron'; /** * Describes the type of dialog to show. @@ -160,14 +159,16 @@ class Dialog { if (e.key === "Enter") { navItems.classList.remove("hidden"); pathBar.classList.add("hidden"); - this.path = pathBar.value; - await util.promisify(fs.stat)(pathBar.value); + if (!pathBar.value.includes(".")) { + this.path = pathBar.value; + await util.promisify(fs.stat)(pathBar.value); + } } else if (e.key === "Escape") { navItems.classList.remove("hidden"); pathBar.classList.add("hidden"); } } catch (err) { - throw new Error(`${err}`); + this.errorEmitter.emit(new Error(`${err}`)); } }); @@ -376,7 +377,6 @@ class Dialog { } private set path(directory: string) { - console.log(directory); this.list(directory).then((value) => { this._path = directory; this.buildPath(); From 129ae51d8eef0cfe0ce1d05f0cc42b3af5a6fdb6 Mon Sep 17 00:00:00 2001 From: John McCambridge Date: Wed, 1 May 2019 19:17:38 -0500 Subject: [PATCH 05/15] Add logic to change path when clicking on folder, open files directly if entered, add accessability title and hover cursor --- packages/vscode/src/dialog.scss | 9 +++++---- packages/vscode/src/dialog.ts | 17 ++++++++++++----- 2 files changed, 17 insertions(+), 9 deletions(-) diff --git a/packages/vscode/src/dialog.scss b/packages/vscode/src/dialog.scss index b024bbe238a2..5dd36d192ba9 100644 --- a/packages/vscode/src/dialog.scss +++ b/packages/vscode/src/dialog.scss @@ -28,6 +28,7 @@ // flex: 1; flex-direction: row; padding: 4px; + cursor: pointer; border-bottom: 1px solid var(--border); } .path-editor { @@ -35,8 +36,8 @@ flex-direction: row; font-size: 1.02em; border: 1px solid var(--border); - border-radius: 2px; - color: var(--primary) + border-radius: 4px; + color: var(--primary); } .path-div { display: block; @@ -150,8 +151,8 @@ button { background: transparent; outline: none; - border: 0; - color: var(--faded); + border: 1px; + color: var(--border); padding: 10px; padding-left: 18px; padding-right: 18px; diff --git a/packages/vscode/src/dialog.ts b/packages/vscode/src/dialog.ts index 5e1a184b27bf..17559a921fac 100644 --- a/packages/vscode/src/dialog.ts +++ b/packages/vscode/src/dialog.ts @@ -73,6 +73,8 @@ interface DialogEntry { readonly isDisabled?: boolean; } +let currentPath; + /** * Open and save dialogs. */ @@ -143,6 +145,7 @@ class Dialog { const navItems = document.createElement("div"); navItems.classList.add("nav"); + navItems.setAttribute("title", "Click to edit"); const pathBar = document.createElement("input"); pathBar.classList.add("path-editor", "hidden"); @@ -159,16 +162,18 @@ class Dialog { if (e.key === "Enter") { navItems.classList.remove("hidden"); pathBar.classList.add("hidden"); - if (!pathBar.value.includes(".")) { + const stat = await util.promisify(fs.stat)(pathBar.value); + if (stat.isDirectory() && (this.options as OpenDialogOptions).properties.openFile) { this.path = pathBar.value; - await util.promisify(fs.stat)(pathBar.value); + } else { + this.selectEmitter.emit(pathBar.value); } } else if (e.key === "Escape") { navItems.classList.remove("hidden"); pathBar.classList.add("hidden"); } } catch (err) { - this.errorEmitter.emit(new Error(`${err}`)); + this.errorEmitter.emit(err); } }); @@ -349,6 +354,8 @@ class Dialog { * Build and insert the path shown at the top of the dialog. */ private buildPath(): void { + // @ts-ignore + document.querySelector(".path-editor")!.defaultValue = this._path; while (this.pathNode.lastChild) { this.pathNode.removeChild(this.pathNode.lastChild); } @@ -368,7 +375,8 @@ class Dialog { pathPartNode.classList.add("active"); } - pathPartNode.addEventListener("click", () => { + pathPartNode.addEventListener("click", (e) => { + e.stopPropagation(); this.path = "/" + pathParts.slice(0, i + 1).join("/"); }); @@ -380,7 +388,6 @@ class Dialog { this.list(directory).then((value) => { this._path = directory; this.buildPath(); - while (this.filesNode.lastChild) { this.filesNode.removeChild(this.filesNode.lastChild); } From e6137348f41403fc0b29efc3a4b24364a49f553d Mon Sep 17 00:00:00 2001 From: John McCambridge Date: Wed, 1 May 2019 19:32:21 -0500 Subject: [PATCH 06/15] Styling tweaks --- packages/vscode/src/dialog.scss | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/vscode/src/dialog.scss b/packages/vscode/src/dialog.scss index 5dd36d192ba9..e72ff6ad5717 100644 --- a/packages/vscode/src/dialog.scss +++ b/packages/vscode/src/dialog.scss @@ -36,8 +36,9 @@ flex-direction: row; font-size: 1.02em; border: 1px solid var(--border); + color: var(--header-foreground); + background-color: var(--header-background); border-radius: 4px; - color: var(--primary); } .path-div { display: block; @@ -151,8 +152,7 @@ button { background: transparent; outline: none; - border: 1px; - color: var(--border); + color: var(--titlebar); padding: 10px; padding-left: 18px; padding-right: 18px; @@ -170,6 +170,10 @@ color: var(--disabled); cursor: initial; } + button[ative], button[disabled]:hover { + color: var(--list-active-selection-background); + cursor: initial; + } } } From 172ddda30fc4a686c697d9740aefcd07422a5187 Mon Sep 17 00:00:00 2001 From: John McCambridge Date: Wed, 1 May 2019 19:45:10 -0500 Subject: [PATCH 07/15] Make lists scrollable, style fixes, alignment fixes, consistent font sizes for headers and lists --- packages/vscode/src/dialog.scss | 8 ++++---- packages/vscode/src/dialog.ts | 3 ++- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/packages/vscode/src/dialog.scss b/packages/vscode/src/dialog.scss index e72ff6ad5717..49ece1a07f4f 100644 --- a/packages/vscode/src/dialog.scss +++ b/packages/vscode/src/dialog.scss @@ -81,7 +81,7 @@ .dialog-grid { display: grid; - grid-template-columns: 2fr 0.2fr 0.8fr; + grid-template-columns: 2fr 0.3fr 0.8fr; } .headings { @@ -97,7 +97,7 @@ .dialog-entry { cursor: pointer; - font-size: 1.02em; + font-size: 12px; padding: 0px 8px; .dialog-entry-info { @@ -112,11 +112,11 @@ } .dialog-entry-size { - text-align: right; + text-align: left; } .dialog-entry-mtime { - padding-left: 8px; + padding-left: 0px; } &:hover { diff --git a/packages/vscode/src/dialog.ts b/packages/vscode/src/dialog.ts index 17559a921fac..afbb359b605a 100644 --- a/packages/vscode/src/dialog.ts +++ b/packages/vscode/src/dialog.ts @@ -115,7 +115,7 @@ class Dialog { this.root = document.createElement("div"); this.root.style.width = "850px"; - this.root.style.height = "600px"; + this.root.style.height = "450px"; this.background.appendChild(this.root); (document.querySelector(".monaco-workbench") || document.body).appendChild(this.background); this.root.classList.add("dialog"); @@ -380,6 +380,7 @@ class Dialog { this.path = "/" + pathParts.slice(0, i + 1).join("/"); }); + document.querySelector(".monaco-scrollable-element")!.setAttribute("overflow", "scroll"); this.pathNode.appendChild(pathPartNode); } } From 51b4a42dbec2d1699b1c7fb996a4cc44a27abc4f Mon Sep 17 00:00:00 2001 From: John McCambridge Date: Thu, 2 May 2019 11:42:40 -0500 Subject: [PATCH 08/15] Header and input styling tweaks --- packages/vscode/src/dialog.scss | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/packages/vscode/src/dialog.scss b/packages/vscode/src/dialog.scss index 49ece1a07f4f..2bd0c4937439 100644 --- a/packages/vscode/src/dialog.scss +++ b/packages/vscode/src/dialog.scss @@ -15,10 +15,11 @@ .title { background-color: var(--header-background); color: var(--header-foreground); - padding: 1px; - font-size: 11px; - font-weight: normal; - text-transform: uppercase; + line-height: initial; + font-size: 1.9em; + font-weight: 200; + margin-bottom: 5px; + text-transform: unset; white-space: nowrap; padding: 5px 10px; } @@ -34,6 +35,8 @@ .path-editor { display: block; flex-direction: row; + margin-top: 12px; + margin-bottom: 12px; font-size: 1.02em; border: 1px solid var(--border); color: var(--header-foreground); @@ -60,6 +63,7 @@ list-style-type: none; border: 1px solid var(--border); border-radius: 3px; + margin-bottom: 5px; font-size: 1.02em; cursor: pointer; @@ -170,8 +174,8 @@ color: var(--disabled); cursor: initial; } - button[ative], button[disabled]:hover { - color: var(--list-active-selection-background); + button[active], button[disabled]:hover { + color: var(--list-active-selection-foreground); cursor: initial; } } From db19f68f69845ce47d9bf3d0be368bfbf5804366 Mon Sep 17 00:00:00 2001 From: John McCambridge Date: Thu, 2 May 2019 14:04:07 -0500 Subject: [PATCH 09/15] Add folder icons to open dialog --- packages/vscode/src/dialog.scss | 26 +++++++++++++++++++------- packages/vscode/src/dialog.ts | 9 ++++++--- 2 files changed, 25 insertions(+), 10 deletions(-) diff --git a/packages/vscode/src/dialog.scss b/packages/vscode/src/dialog.scss index 2bd0c4937439..dcbbcdd15f1d 100644 --- a/packages/vscode/src/dialog.scss +++ b/packages/vscode/src/dialog.scss @@ -1,6 +1,6 @@ .dialog { font-family: inherit; - box-shadow: 0 12px 16px 0 rgba(29,64,126,0.07); + box-shadow: 0 12px 16px 0 rgba(29, 64, 126, 0.07); background-color: var(--primary); display: flex; flex-direction: column; @@ -32,6 +32,7 @@ cursor: pointer; border-bottom: 1px solid var(--border); } + .path-editor { display: block; flex-direction: row; @@ -43,6 +44,7 @@ background-color: var(--header-background); border-radius: 4px; } + .path-div { display: block; flex-direction: row; @@ -76,11 +78,12 @@ color: var(--list-active-selection-foreground); } } + .path-btn { align-content: right; font-size: 1.02em; border: 1px solid var(--border); - } + } } .dialog-grid { @@ -94,7 +97,7 @@ } .file-area { - flex: 1; + flex: auto; display: flex; flex-direction: column; overflow: hidden; @@ -132,7 +135,8 @@ color: var(--list-active-selection-foreground); } - &.disabled, &.disabled:hover { + &.disabled, + &.disabled:hover { background-color: var(--primary); color: var(--disabled); cursor: initial; @@ -170,17 +174,25 @@ } } - button[disabled], button[disabled]:hover { + button[disabled], + button[disabled]:hover { color: var(--disabled); cursor: initial; } - button[active], button[disabled]:hover { + + button[active], + button[disabled]:hover { color: var(--list-active-selection-foreground); cursor: initial; } } } -.monaco-shell .monaco-tree.focused.no-focused-item:focus:before, .monaco-shell .monaco-list:not(.element-focused):focus:before { +.monaco-shell .monaco-tree.focused.no-focused-item:focus:before, +.monaco-shell .monaco-list:not(.element-focused):focus:before { display: none; } + +.folder-icon-dialog { + background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZmlsbD0iI0U4RThFOCIgZD0iTTYgNHY4bDQtNC00LTR6bTEgMi40MTRMOC41ODYgOCA3IDkuNTg2VjYuNDE0eiIvPjwvc3ZnPg==); +} \ No newline at end of file diff --git a/packages/vscode/src/dialog.ts b/packages/vscode/src/dialog.ts index afbb359b605a..f63d83e7ddde 100644 --- a/packages/vscode/src/dialog.ts +++ b/packages/vscode/src/dialog.ts @@ -114,8 +114,8 @@ class Dialog { this.background.style.background = "rgba(0, 0, 0, 0.25)"; this.root = document.createElement("div"); - this.root.style.width = "850px"; - this.root.style.height = "450px"; + this.root.style.width = "750px"; + this.root.style.height = "500px"; this.background.appendChild(this.root); (document.querySelector(".monaco-workbench") || document.body).appendChild(this.background); this.root.classList.add("dialog"); @@ -491,9 +491,12 @@ class DialogEntryRenderer implements ITreeRenderer { try { + if (c === "folder-icon") { + c = "folder-icon-dialog"; + } templateData.icon.classList.add(c); } catch (ex) { // Nothin needed. Sometimes bad classes are given From 6080907b32498bcb8e5f8fb80af9689676166a77 Mon Sep 17 00:00:00 2001 From: John McCambridge Date: Thu, 2 May 2019 14:37:58 -0500 Subject: [PATCH 10/15] Handle file sizes of 0 bytes --- packages/vscode/src/dialog.ts | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/packages/vscode/src/dialog.ts b/packages/vscode/src/dialog.ts index f63d83e7ddde..b026b10f7e86 100644 --- a/packages/vscode/src/dialog.ts +++ b/packages/vscode/src/dialog.ts @@ -15,6 +15,7 @@ import { FileKind } from "vs/platform/files/common/files"; import { IThemeService } from "vs/platform/theme/common/themeService"; import { workbench } from "./workbench"; import "./dialog.scss"; +import { template } from 'vs/base/common/labels'; /** * Describes the type of dialog to show. @@ -506,6 +507,11 @@ class DialogEntryRenderer implements ITreeRenderer Date: Thu, 2 May 2019 14:45:38 -0500 Subject: [PATCH 11/15] Buttom tweaks --- packages/vscode/src/dialog.scss | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/vscode/src/dialog.scss b/packages/vscode/src/dialog.scss index dcbbcdd15f1d..d4f5f597d2f0 100644 --- a/packages/vscode/src/dialog.scss +++ b/packages/vscode/src/dialog.scss @@ -159,14 +159,16 @@ button { background: transparent; + font-size: 1.02em; outline: none; color: var(--titlebar); - padding: 10px; + padding: 6px; padding-left: 18px; padding-right: 18px; transition: 150ms background ease, 150ms color ease; cursor: pointer; - border-radius: 5px; + border: 1px solid var(--border); + border-radius: 3px; &:hover { background: var(--titlebar); From 1a213b34e1247d7a1f99f34fe5679b9093a1b3d9 Mon Sep 17 00:00:00 2001 From: John McCambridge Date: Thu, 2 May 2019 15:34:44 -0500 Subject: [PATCH 12/15] Cleanup --- packages/vscode/src/dialog.ts | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/packages/vscode/src/dialog.ts b/packages/vscode/src/dialog.ts index b026b10f7e86..1d4d5cb2413e 100644 --- a/packages/vscode/src/dialog.ts +++ b/packages/vscode/src/dialog.ts @@ -52,6 +52,7 @@ export type DialogOptions = OpenDialogOptions | SaveDialogOptions; export const showOpenDialog = (options: OpenDialogOptions): Promise => { return new Promise((resolve, reject): void => { + focus(); const dialog = new Dialog(DialogType.Open, options); dialog.onSelect((e) => { dialog.dispose(); @@ -492,7 +493,7 @@ class DialogEntryRenderer implements ITreeRenderer { try { if (c === "folder-icon") { @@ -507,11 +508,6 @@ class DialogEntryRenderer implements ITreeRenderer Date: Thu, 2 May 2019 15:45:28 -0500 Subject: [PATCH 13/15] More cleanup --- packages/vscode/src/dialog.ts | 4 ---- 1 file changed, 4 deletions(-) diff --git a/packages/vscode/src/dialog.ts b/packages/vscode/src/dialog.ts index 1d4d5cb2413e..87efe9eb9932 100644 --- a/packages/vscode/src/dialog.ts +++ b/packages/vscode/src/dialog.ts @@ -52,7 +52,6 @@ export type DialogOptions = OpenDialogOptions | SaveDialogOptions; export const showOpenDialog = (options: OpenDialogOptions): Promise => { return new Promise((resolve, reject): void => { - focus(); const dialog = new Dialog(DialogType.Open, options); dialog.onSelect((e) => { dialog.dispose(); @@ -74,9 +73,6 @@ interface DialogEntry { readonly lastModified: string; readonly isDisabled?: boolean; } - -let currentPath; - /** * Open and save dialogs. */ From 01aa8a41583309384d768a2f9968c967a0cf0fc6 Mon Sep 17 00:00:00 2001 From: John McCambridge Date: Thu, 2 May 2019 15:48:37 -0500 Subject: [PATCH 14/15] More cleanup --- packages/ide/src/fill/dialog.scss | 4 +++- packages/vscode/src/dialog.ts | 1 - 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/ide/src/fill/dialog.scss b/packages/ide/src/fill/dialog.scss index 9a70499d1da1..d75e2a60fc2e 100644 --- a/packages/ide/src/fill/dialog.scss +++ b/packages/ide/src/fill/dialog.scss @@ -1,4 +1,7 @@ .msgbox { + -webkit-box-shadow: 0px 0px 10px -3px rgba(0,0,0,0.75); + -moz-box-shadow: 0px 0px 10px -3px rgba(0,0,0,0.75); + box-shadow: 0 12px 16px 0 rgba(29, 64, 126, 0.07); padding-top: 25px; padding-left: 40px; padding-right: 40px; @@ -6,7 +9,6 @@ border-radius: 8px; text-align: center; background-color: var(--primary); - box-shadow: 0 12px 16px 0 rgba(29, 64, 126, 0.07); } .msgbox.input { diff --git a/packages/vscode/src/dialog.ts b/packages/vscode/src/dialog.ts index 87efe9eb9932..bee6fe005496 100644 --- a/packages/vscode/src/dialog.ts +++ b/packages/vscode/src/dialog.ts @@ -15,7 +15,6 @@ import { FileKind } from "vs/platform/files/common/files"; import { IThemeService } from "vs/platform/theme/common/themeService"; import { workbench } from "./workbench"; import "./dialog.scss"; -import { template } from 'vs/base/common/labels'; /** * Describes the type of dialog to show. From a33db6a8a35ccc18e7880399441af67ec79a783f Mon Sep 17 00:00:00 2001 From: John McCambridge Date: Thu, 2 May 2019 17:16:23 -0500 Subject: [PATCH 15/15] Change header size --- packages/vscode/src/dialog.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/vscode/src/dialog.scss b/packages/vscode/src/dialog.scss index d4f5f597d2f0..1bc41018b081 100644 --- a/packages/vscode/src/dialog.scss +++ b/packages/vscode/src/dialog.scss @@ -16,7 +16,7 @@ background-color: var(--header-background); color: var(--header-foreground); line-height: initial; - font-size: 1.9em; + font-size: 1.5em; font-weight: 200; margin-bottom: 5px; text-transform: unset;