From a07d0c9c3db008f1eef86e3d5ccb95e3cc5b58af Mon Sep 17 00:00:00 2001 From: Asher Date: Tue, 26 Feb 2019 15:09:59 -0600 Subject: [PATCH] Fix file open overflow on Firefox --- packages/vscode/src/dialog.scss | 227 ++++++++++++++++---------------- packages/vscode/src/dialog.ts | 10 +- 2 files changed, 118 insertions(+), 119 deletions(-) diff --git a/packages/vscode/src/dialog.scss b/packages/vscode/src/dialog.scss index 936c28c3..46238d9b 100644 --- a/packages/vscode/src/dialog.scss +++ b/packages/vscode/src/dialog.scss @@ -1,87 +1,88 @@ .dialog { - --primary: #2A2E37; - --border: black; - --faded: #a0a1a5; - --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); - background-color: var(--primary); - display: flex; - flex-direction: column; - user-select: none; - overflow: hidden; + --primary: #2A2E37; + --border: black; + --faded: #a0a1a5; + --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); + background-color: var(--primary); + display: flex; + flex-direction: column; + user-select: none; + overflow: hidden; border-radius: 5px; - + .monaco-tl-twistie { display: none; } - .title { - background-color: var(--header-background); - color: var(--header-foreground); - padding: 1px; - font-size: 11px; - font-weight: normal; - text-transform: uppercase; - white-space: nowrap; - padding-left: 10px; - } + .title { + background-color: var(--header-background); + color: var(--header-foreground); + padding: 1px; + font-size: 11px; + font-weight: normal; + text-transform: uppercase; + white-space: nowrap; + padding-left: 10px; + } - .nav { - display: flex; - flex-direction: row; - padding: 4px; - padding-top: 8px; - padding-bottom: 8px; - border-bottom: 1px solid var(--border); - min-height: 32px; - } + .nav { + display: flex; + flex-direction: row; + padding: 4px; + padding-top: 8px; + padding-bottom: 8px; + border-bottom: 1px solid var(--border); + min-height: 32px; + } - .path { - display: flex; - flex-direction: row; + .path { + display: flex; + flex-direction: row; - .path-part { - padding: 5px; - border-radius: 3px; - font-size: 1.2em; - cursor: pointer; + .path-part { + padding: 5px; + border-radius: 3px; + font-size: 1.2em; + cursor: pointer; - &:not(:first-child) { - margin-left: 5px; - } + &:not(:first-child) { + margin-left: 5px; + } - &.active { - font-weight: bold; - color: var(--list-active-selection-foreground); - } - } - } + &.active { + font-weight: bold; + color: var(--list-active-selection-foreground); + } + } + } - .file-area { - flex: 1; - display: flex; - flex-direction: column; + .dialog-grid { + display: grid; + grid-template-columns: 2fr 0.2fr 0.8fr; + } - .dialog-grid { - display: grid; - grid-template-columns: 2fr 0.2fr 0.8fr; - } + .headings { + padding: 8px; + font-size: 12px; + } - .headings { - padding: 8px; - font-size: 12px; - } + .file-area { + flex: 1; + display: flex; + flex-direction: column; + overflow: hidden; - .dialog-entry { - cursor: pointer; - font-size: 1.2em; - padding: 0px; - padding-left: 8px; + .dialog-entry { + cursor: pointer; + font-size: 1.2em; + padding: 0px; + padding-left: 8px; padding-right: 8px; .dialog-entry-info { @@ -89,58 +90,56 @@ flex-direction: row; } - .dialog-entry-icon { - width: 16px; - height: 19px; - display: inline-block; - margin-right: 5px; - margin-bottom: -3px; - } + .dialog-entry-icon { + width: 16px; + height: 19px; + margin-right: 5px; + } - &:hover { - background-color: var(--list-hover-background); - } + &:hover { + background-color: var(--list-hover-background); + } - &.active { - background-color: var(--list-active-selection-background); - color: var(--list-active-selection-foreground); - } - } - } + &.active { + background-color: var(--list-active-selection-background); + color: var(--list-active-selection-foreground); + } + } + } - .buttons { - display: flex; - flex-direction: row; - padding: 10px; - position: relative; - background: var(--primary); - border-top: 1px solid var(--border); + .buttons { + display: flex; + flex-direction: row; + padding: 10px; + position: relative; + background: var(--primary); + border-top: 1px solid var(--border); - button:first-child { - margin-left: auto; - margin-right: 10px; - } + button:first-child { + margin-left: auto; + margin-right: 10px; + } - button { - background: transparent; - outline: none; - border: 0; - color: var(--faded); - padding: 10px; - padding-left: 18px; - padding-right: 18px; - transition: 150ms background ease, 150ms color ease; - cursor: pointer; - border-radius: 5px; + button { + background: transparent; + outline: none; + border: 0; + color: var(--faded); + padding: 10px; + padding-left: 18px; + padding-right: 18px; + transition: 150ms background ease, 150ms color ease; + cursor: pointer; + border-radius: 5px; - &:hover { - background: var(--titlebar); - color: white; - } - } - } + &:hover { + background: var(--titlebar); + color: white; + } + } + } } .monaco-shell .monaco-tree.focused.no-focused-item:focus:before, .monaco-shell .monaco-list:not(.element-focused):focus:before { display: none; -} \ No newline at end of file +} diff --git a/packages/vscode/src/dialog.ts b/packages/vscode/src/dialog.ts index 4f2e7bfb..1f7f5164 100644 --- a/packages/vscode/src/dialog.ts +++ b/packages/vscode/src/dialog.ts @@ -167,10 +167,6 @@ class Dialog { navItems.appendChild(this.pathNode); this.root.appendChild(navItems); - const fileAreaNode = document.createElement("div"); - fileAreaNode.classList.add("file-area"); - fileAreaNode.classList.add("show-file-icons"); - const headingsNode = document.createElement("div"); headingsNode.className = "headings dialog-grid"; ["Name", "Size", "Last Modified"].forEach(e => { @@ -178,10 +174,14 @@ class Dialog { header.innerText = e; headingsNode.appendChild(header); }); + this.root.appendChild(headingsNode); + + const fileAreaNode = document.createElement("div"); + fileAreaNode.classList.add("file-area"); + fileAreaNode.classList.add("show-file-icons"); this.filesNode = document.createElement("div"); this.filesNode.className = "files-list"; - fileAreaNode.appendChild(headingsNode); this.entryList = new ObjectTree(this.filesNode, { getHeight: (entry: DialogEntry): number => { return 20;