Skip to content

Commit 7b627cc

Browse files
code-ashercode-asher
committed
Fix file open overflow on Firefox
1 parent cf7e643 commit 7b627cc

File tree

2 files changed

+133
-134
lines changed

2 files changed

+133
-134
lines changed

‎packages/vscode/src/dialog.scss

Lines changed: 128 additions & 129 deletions
Original file line numberDiff line numberDiff line change
@@ -1,146 +1,145 @@
11
.dialog {
2-
--primary: #2A2E37;
3-
--border: black;
4-
--faded: #a0a1a5;
5-
--header-background: #161616;
6-
--header-foreground: white;
7-
--list-active-selection-background: rgb(0, 120, 160);
8-
--list-active-selection-foreground: white;
9-
--list-hover-background: rgb(36, 39, 46);
10-
font-family: inherit;
11-
box-shadow: 0 18px 80px 10px rgba(0, 0, 0, 0.1);
12-
background-color: var(--primary);
13-
display: flex;
14-
flex-direction: column;
15-
user-select: none;
16-
overflow: hidden;
2+
--primary: #2A2E37;
3+
--border: black;
4+
--faded: #a0a1a5;
5+
--header-background: #161616;
6+
--header-foreground: white;
7+
--list-active-selection-background: rgb(0, 120, 160);
8+
--list-active-selection-foreground: white;
9+
--list-hover-background: rgb(36, 39, 46);
10+
font-family: inherit;
11+
box-shadow: 0 18px 80px 10px rgba(0, 0, 0, 0.1);
12+
background-color: var(--primary);
13+
display: flex;
14+
flex-direction: column;
15+
user-select: none;
16+
overflow: hidden;
1717
border-radius: 5px;
18-
18+
1919
.monaco-tl-twistie {
2020
display: none;
2121
}
2222

23-
.title {
24-
background-color: var(--header-background);
25-
color: var(--header-foreground);
26-
padding: 1px;
27-
font-size: 11px;
28-
font-weight: normal;
29-
text-transform: uppercase;
30-
white-space: nowrap;
31-
padding-left: 10px;
32-
}
33-
34-
.nav {
35-
display: flex;
36-
flex-direction: row;
37-
padding: 4px;
38-
padding-top: 8px;
39-
padding-bottom: 8px;
40-
border-bottom: 1px solid var(--border);
41-
min-height: 32px;
42-
}
43-
44-
.path {
45-
display: flex;
46-
flex-direction: row;
47-
48-
.path-part {
49-
padding: 5px;
50-
border-radius: 3px;
51-
font-size: 1.2em;
52-
cursor: pointer;
53-
54-
&:not(:first-child) {
55-
margin-left: 5px;
56-
}
57-
58-
&.active {
59-
font-weight: bold;
60-
color: var(--list-active-selection-foreground);
61-
}
62-
}
63-
}
64-
65-
.file-area {
66-
flex: 1;
67-
display: flex;
68-
flex-direction: column;
69-
70-
.dialog-grid {
71-
display: grid;
72-
grid-template-columns: 2fr 0.2fr 0.8fr;
73-
}
74-
75-
.headings {
76-
padding: 8px;
77-
font-size: 12px;
78-
}
79-
80-
.dialog-entry {
81-
cursor: pointer;
82-
font-size: 1.2em;
83-
padding: 0px;
84-
padding-left: 8px;
23+
.title {
24+
background-color: var(--header-background);
25+
color: var(--header-foreground);
26+
padding: 1px;
27+
font-size: 11px;
28+
font-weight: normal;
29+
text-transform: uppercase;
30+
white-space: nowrap;
31+
padding-left: 10px;
32+
}
33+
34+
.nav {
35+
display: flex;
36+
flex-direction: row;
37+
padding: 4px;
38+
padding-top: 8px;
39+
padding-bottom: 8px;
40+
border-bottom: 1px solid var(--border);
41+
min-height: 32px;
42+
}
43+
44+
.path {
45+
display: flex;
46+
flex-direction: row;
47+
48+
.path-part {
49+
padding: 5px;
50+
border-radius: 3px;
51+
font-size: 1.2em;
52+
cursor: pointer;
53+
54+
&:not(:first-child) {
55+
margin-left: 5px;
56+
}
57+
58+
&.active {
59+
font-weight: bold;
60+
color: var(--list-active-selection-foreground);
61+
}
62+
}
63+
}
64+
65+
.dialog-grid {
66+
display: grid;
67+
grid-template-columns: 2fr 0.2fr 0.8fr;
68+
}
69+
70+
.headings {
71+
padding: 8px;
72+
font-size: 12px;
73+
}
74+
75+
.file-area {
76+
flex: 1;
77+
display: flex;
78+
flex-direction: column;
79+
overflow: hidden;
80+
81+
.dialog-entry {
82+
cursor: pointer;
83+
font-size: 1.2em;
84+
padding: 0px;
85+
padding-left: 8px;
8586
padding-right: 8px;
8687

8788
.dialog-entry-info {
8889
display: flex;
8990
flex-direction: row;
9091
}
9192

92-
.dialog-entry-icon {
93-
width: 16px;
94-
height: 19px;
95-
display: inline-block;
96-
margin-right: 5px;
97-
margin-bottom: -3px;
98-
}
99-
100-
&:hover {
101-
background-color: var(--list-hover-background);
102-
}
103-
104-
&.active {
105-
background-color: var(--list-active-selection-background);
106-
color: var(--list-active-selection-foreground);
107-
}
108-
}
109-
}
110-
111-
.buttons {
112-
display: flex;
113-
flex-direction: row;
114-
padding: 10px;
115-
position: relative;
116-
background: var(--primary);
117-
border-top: 1px solid var(--border);
118-
119-
button:first-child {
120-
margin-left: auto;
121-
margin-right: 10px;
122-
}
123-
124-
button {
125-
background: transparent;
126-
outline: none;
127-
border: 0;
128-
color: var(--faded);
129-
padding: 10px;
130-
padding-left: 18px;
131-
padding-right: 18px;
132-
transition: 150ms background ease, 150ms color ease;
133-
cursor: pointer;
134-
border-radius: 5px;
135-
136-
&:hover {
137-
background: var(--titlebar);
138-
color: white;
139-
}
140-
}
141-
}
93+
.dialog-entry-icon {
94+
width: 16px;
95+
height: 19px;
96+
margin-right: 5px;
97+
}
98+
99+
&:hover {
100+
background-color: var(--list-hover-background);
101+
}
102+
103+
&.active {
104+
background-color: var(--list-active-selection-background);
105+
color: var(--list-active-selection-foreground);
106+
}
107+
}
108+
}
109+
110+
.buttons {
111+
display: flex;
112+
flex-direction: row;
113+
padding: 10px;
114+
position: relative;
115+
background: var(--primary);
116+
border-top: 1px solid var(--border);
117+
118+
button:first-child {
119+
margin-left: auto;
120+
margin-right: 10px;
121+
}
122+
123+
button {
124+
background: transparent;
125+
outline: none;
126+
border: 0;
127+
color: var(--faded);
128+
padding: 10px;
129+
padding-left: 18px;
130+
padding-right: 18px;
131+
transition: 150ms background ease, 150ms color ease;
132+
cursor: pointer;
133+
border-radius: 5px;
134+
135+
&:hover {
136+
background: var(--titlebar);
137+
color: white;
138+
}
139+
}
140+
}
142141
}
143142

144143
.monaco-shell .monaco-tree.focused.no-focused-item:focus:before, .monaco-shell .monaco-list:not(.element-focused):focus:before {
145144
display: none;
146-
}
145+
}

‎packages/vscode/src/dialog.ts

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -167,21 +167,21 @@ class Dialog {
167167
navItems.appendChild(this.pathNode);
168168
this.root.appendChild(navItems);
169169

170-
const fileAreaNode = document.createElement("div");
171-
fileAreaNode.classList.add("file-area");
172-
fileAreaNode.classList.add("show-file-icons");
173-
174170
const headingsNode = document.createElement("div");
175171
headingsNode.className = "headings dialog-grid";
176172
["Name", "Size", "Last Modified"].forEach(e => {
177173
const header = document.createElement("div");
178174
header.innerText = e;
179175
headingsNode.appendChild(header);
180176
});
177+
this.root.appendChild(headingsNode);
178+
179+
const fileAreaNode = document.createElement("div");
180+
fileAreaNode.classList.add("file-area");
181+
fileAreaNode.classList.add("show-file-icons");
181182

182183
this.filesNode = document.createElement("div");
183184
this.filesNode.className = "files-list";
184-
fileAreaNode.appendChild(headingsNode);
185185
this.entryList = new ObjectTree<DialogEntry, string>(this.filesNode, {
186186
getHeight: (entry: DialogEntry): number => {
187187
return 20;

0 commit comments

Comments
 (0)