Skip to content

Fix/redesign dialogs #629

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 15 commits into from
Closed

Fix/redesign dialogs #629

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
c90d631
Set theme CSS vars on service collection init during theme change, ma…
nol166 Apr 29, 2019
1f89316
Add documentation for method, add borders around breadcrumbs, add inp…
nol166 Apr 30, 2019
f323903
Toggle path bar while hiding breadcrumbs, check validity of path
nol166 May 1, 2019
71dc6a1
Various bug fixes
nol166 May 1, 2019
129ae51
Add logic to change path when clicking on folder, open files directly…
nol166 May 2, 2019
e613734
Styling tweaks
nol166 May 2, 2019
172ddda
Make lists scrollable, style fixes, alignment fixes, consistent font …
nol166 May 2, 2019
51b4a42
Header and input styling tweaks
nol166 May 2, 2019
db19f68
Add folder icons to open dialog
nol166 May 2, 2019
6080907
Handle file sizes of 0 bytes
nol166 May 2, 2019
78e936b
Buttom tweaks
nol166 May 2, 2019
1a213b3
Cleanup
nol166 May 2, 2019
20202ed
More cleanup
nol166 May 2, 2019
01aa8a4
More cleanup
nol166 May 2, 2019
a33db6a
Change header size
nol166 May 2, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 21 additions & 18 deletions packages/ide/src/fill/dialog.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,69 +1,72 @@
.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;
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);
}

.msgbox.input {
max-width: 500px;
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;
}

Expand All @@ -80,4 +83,4 @@
top: 0;
transition: 300ms opacity ease;
z-index: 15;
}
}
94 changes: 67 additions & 27 deletions packages/vscode/src/dialog.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -24,28 +15,57 @@
.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.5em;
font-weight: 200;
margin-bottom: 5px;
text-transform: unset;
white-space: nowrap;
padding: 5px 10px;
}

.nav {
display: flex;
// flex: 1;
flex-direction: row;
padding: 4px;
cursor: pointer;
border-bottom: 1px solid var(--border);
}

.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);
background-color: var(--header-background);
border-radius: 4px;
}

.path-div {
display: block;
flex-direction: row;
padding: 4px;
border: 1px solid var(--header-background);
}

.hidden {
display: none;
}

.path {
display: flex;
flex-direction: row;

.path-part {
padding: 5px;
list-style-type: none;
border: 1px solid var(--border);
border-radius: 3px;
margin-bottom: 5px;
font-size: 1.02em;
cursor: pointer;

Expand All @@ -58,11 +78,17 @@
color: var(--list-active-selection-foreground);
}
}

.path-btn {
align-content: right;
font-size: 1.02em;
border: 1px solid var(--border);
}
}

.dialog-grid {
display: grid;
grid-template-columns: 2fr 0.2fr 0.8fr;
grid-template-columns: 2fr 0.3fr 0.8fr;
}

.headings {
Expand All @@ -71,14 +97,14 @@
}

.file-area {
flex: 1;
flex: auto;
display: flex;
flex-direction: column;
overflow: hidden;

.dialog-entry {
cursor: pointer;
font-size: 1.02em;
font-size: 12px;
padding: 0px 8px;

.dialog-entry-info {
Expand All @@ -93,11 +119,11 @@
}

.dialog-entry-size {
text-align: right;
text-align: left;
}

.dialog-entry-mtime {
padding-left: 8px;
padding-left: 0px;
}

&:hover {
Expand All @@ -109,7 +135,8 @@
color: var(--list-active-selection-foreground);
}

&.disabled, &.disabled:hover {
&.disabled,
&.disabled:hover {
background-color: var(--primary);
color: var(--disabled);
cursor: initial;
Expand All @@ -132,29 +159,42 @@

button {
background: transparent;
font-size: 1.02em;
outline: none;
border: 0;
color: var(--faded);
padding: 10px;
color: var(--titlebar);
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);
color: white;
}
}

button[disabled], button[disabled]:hover {
button[disabled],
button[disabled]:hover {
color: var(--disabled);
cursor: initial;
}

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==);
}
Loading