Skip to content

Commit bd183e1

Browse files
author
Luke Pacholski
authored
Merge pull request #587 from flukeout/sidebar-styling
Sidebar styling
2 parents 3ea5fc4 + 6787e10 commit bd183e1

File tree

3 files changed

+225
-80
lines changed

3 files changed

+225
-80
lines changed

‎src/extensions/default/bramble/images/folder-arrow.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎src/extensions/default/bramble/stylesheets/sidebarTheme.css‎

Lines changed: 224 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,249 @@
1+
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600');
2+
13
/* Components to hide */
24
#working-set-list-container {
3-
display: none !important;
5+
display: none !important;
46
}
7+
58
span#project-title.title {
6-
display: none;
9+
display: none;
710
}
11+
812
div.working-set-option-btn[style] {
9-
display: none !important;
13+
display: none !important;
1014
}
1115

12-
/* Recoloring */
16+
/* Dark Theme Color */
17+
/* TODO - move this to the dark theme CSS later */
18+
1319
#sidebar {
14-
background-color: black;
15-
text-shadow: none;
16-
color: #333333;
20+
background-color: black;
21+
text-shadow: none;
22+
}
23+
24+
#project-files-container {
25+
padding-left: 0;
26+
font-weight: 400;
27+
font-family: "Open Sans", "Helvetica Neue", sans-serif;
1728
}
18-
li.jstree-leaf>a {
19-
padding: 5px;
29+
30+
#project-files-container ul {
31+
padding: 0;
32+
}
33+
34+
35+
/* File tree basic styles */
36+
37+
li.jstree-leaf a span,
38+
li.jstree-leaf span.extension {
39+
font-size: 15px;
40+
color: rgba(255,255,255,.5);
41+
}
42+
43+
li.jstree-closed > a span,
44+
li.jstree-open > a span {
45+
font-size: 15px;
46+
color: rgba(255,255,255,.7);
47+
}
48+
49+
50+
/* Overrides not needed margin */
51+
52+
.jstree-brackets li.jstree-leaf,
53+
.jstree-brackets li.jstree-closed,
54+
.jstree-brackets li.jstree-open {
55+
margin-left: 0;
56+
}
57+
58+
59+
/* Basic formatting of all items in file menu */
60+
61+
li.jstree-open a,
62+
li.jstree-closed a,
63+
li.jstree-leaf a {
64+
padding: 10px 10px 10px 30px;
65+
cursor: pointer !important;
66+
}
67+
68+
69+
/* Folders get bold text treatment */
70+
71+
li.jstree-open > a,
72+
li.jstree-closed > a {
73+
font-weight: 600;
74+
}
75+
76+
77+
/* Selected Item */
78+
79+
li.jstree-leaf a.selected-node,
80+
li.jstree-leaf a.selected-node span,
81+
li.jstree-leaf a.selected-node .extension {
82+
color: white !important;
83+
}
84+
85+
86+
/* Hover state for all items */
87+
88+
li.jstree-leaf a:not(.selected-node):hover,
89+
li.jstree-open a:first-of-type:hover,
90+
li.jstree-closed a:first-of-type:hover {
91+
background: rgba(255,255,255,.08);
92+
}
93+
94+
95+
/* Hover state item text */
96+
97+
li.jstree-leaf a:not(.selected-node):hover > span {
98+
color: rgba(255,255,255,.6);
99+
}
100+
101+
li.jstree-open > a span,
102+
li.jstree-closed > a span {
103+
color: rgba(255,255,255,.7);
104+
}
105+
106+
107+
/* Message for when there are no files in a folder */
108+
109+
li.jstree-open > ul:empty:after {
110+
content: "This folder is empty";
111+
color: rgba(255,255,255,.4);
112+
padding: 10px 10px 10px 30px;
113+
font-style: italic;
114+
display: block;
20115
}
21-
li.jstree-leaf>a>span {
22-
font-size: 15px;
23-
color: #666666;
116+
117+
118+
/* Right-clicked file */
119+
120+
li.jstree-closed a.context-node,
121+
li.jstree-open a.context-node,
122+
li.jstree-leaf a.context-node {
123+
background: rgba(255,255,255,0.08);
24124
}
25-
li.jstree-open>a>span {
26-
font-size: 15px;
27-
color: #666666;
125+
126+
127+
/* Currently selected (edited) file */
128+
129+
li.jstree-leaf a.selected-node,
130+
li.jstree-leaf a.selected-node:hover {
131+
background: #222;
28132
}
29-
li.jstree-closed>a>span {
30-
font-size: 15px;
31-
color: #666666;
133+
134+
135+
/* Adds icon for folders only icon */
136+
137+
.jstree-brackets li.jstree-closed > .jstree-icon,
138+
.jstree-brackets li.jstree-open > .jstree-icon {
139+
transition: transform .15s ease-out !important;
140+
top: 9px;
141+
left: 7px !important;
142+
margin: 0;
143+
background-image: url(../images/folder-arrow.svg);
144+
background-position: center;
145+
background-size: 7px;
146+
background-repeat: no-repeat;
147+
cursor: pointer;
148+
opacity: .8;
32149
}
33-
li.jstree-leaf>a>span.extension {
34-
color: #666666;
150+
151+
152+
/* Opened folder gets a lighter icon */
153+
154+
.jstree-brackets li.jstree-open > .jstree-icon {
155+
opacity: 1;
35156
}
36-
.filetree-selection {
37-
background-color: #333333;
38-
border: none;
39-
color: white;
40-
font-weight: bolder;
41-
padding: 13px;
42-
width: 100% !important;
157+
158+
159+
/* Hides file icon for non-folders */
160+
161+
.jstree-brackets li.jstree-leaf > .jstree-icon {
162+
display: none;
43163
}
44-
.filetree-selection-extension {
45-
opacity: 0;
164+
165+
166+
/* Indents files within a folder */
167+
168+
.jstree-open > ul {
169+
margin-left: 15px;
170+
border-left: solid 2px rgba(255,255,255,.1);
46171
}
47-
.filetree-context {
48-
background-color: rgba(255,255,255,0.12);
49-
height: 27px;
172+
173+
174+
/* Hides selected (and right-clicked) file overlay, not needed */
175+
/* Still keeping the DOM element in case it has a functional purpose */
176+
177+
.filetree-selection, .filetree-context {
178+
background: transparent;
179+
border: none;
180+
height: 37px;
50181
}
182+
183+
.filetree-selection-extension,
51184
.filetree-context-extension {
52-
opacity: 0;
185+
opacity: 0;
186+
}
187+
188+
/* File renaming UI */
189+
190+
#project-files-container .jstree-brackets .jstree-rename-input {
191+
padding: 18px 5px 19px 5px;
192+
font-size: 15px;
193+
line-height: 15px;
194+
margin-left: 22px;
195+
background: white;
196+
font-family: inherit;
197+
color: black;
198+
border-radius: 0;
199+
position: static;
200+
border: none !important;
201+
width: calc(100% - 40px) !important;
202+
box-sizing: border-box;
203+
}
204+
205+
/* Overrides for Folder rename UI */
206+
207+
#project-files-container .jstree-brackets .jstree-closed .jstree-rename-input,
208+
#project-files-container .jstree-brackets .jstree-open .jstree-rename-input {
209+
margin-left: 30px;
210+
}
211+
212+
#project-files-container .jstree-brackets .jstree-closed .jstree-rename-input + a,
213+
#project-files-container .jstree-brackets .jstree-open .jstree-rename-input + a {
214+
display: none;
215+
}
216+
217+
218+
/* Right-click File Menu */
219+
/* TODO - separate dark and light styles into separate theme CSS files. */
220+
221+
.context-menu .dropdown-menu {
222+
padding: 0;
223+
border-radius: 0;
224+
border: none;
53225
}
54-
.menu-name {
55-
font-size: 15px;
226+
227+
.context-menu .dropdown-menu li a {
228+
padding: 10px 12px;
229+
line-height: 16px;
230+
font-size: 16px;
231+
cursor: pointer;
56232
}
57-
.context {
58-
color: rgba(255,255,255,0.6);
233+
234+
.context-menu .dropdown-menu li a:before {
235+
display: none;
59236
}
60-
li.jstree-leaf>a.jstree-clicked>span {
61-
color: white;
237+
238+
.context-menu .dropdown-menu li a:hover {
239+
background: rgba(0,0,0,.1);
62240
}
63-
li.jstree-leaf>a.jstree-clicked>span.extension {
64-
color: white;
241+
242+
.dark .context-menu .dropdown-menu li a {
243+
color: rgba(255,255,255,.5);
65244
}
66-
a.jstree-clicked .extension {
67-
color: white !important;
245+
246+
.dark .context-menu .dropdown-menu li a:hover {
247+
background: rgba(255,255,255,.1);
248+
color: rgba(255,255,255,.8);
68249
}

‎src/styles/bramble_overrides.css‎

Lines changed: 0 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,6 @@
1010
}
1111
}
1212

13-
/* Make it obvious that files in the sidebar are something you can click. */
14-
li.jstree-leaf > a {
15-
cursor: pointer !important;
16-
}
17-
1813
/* Reduce the size of the code-folding gutter markers with our larger font size */
1914
.CodeMirror-foldgutter-open:after,
2015
.CodeMirror-foldgutter-folded:after {
@@ -76,35 +71,3 @@ li.jstree-leaf > a {
7671
.bramble-inspector-highlight {
7772
background: rgba(0, 135, 207, .3) !important;
7873
}
79-
80-
/* Right-click File Menu */
81-
82-
.context-menu .dropdown-menu {
83-
padding: 0;
84-
border-radius: 0;
85-
border: none;
86-
}
87-
88-
.context-menu .dropdown-menu li a {
89-
padding: 10px 12px;
90-
line-height: 16px;
91-
font-size: 16px;
92-
cursor: pointer;
93-
}
94-
95-
.context-menu .dropdown-menu li a:before {
96-
display: none;
97-
}
98-
99-
.context-menu .dropdown-menu li a:hover {
100-
background: rgba(0,0,0,.1);
101-
}
102-
103-
.dark .context-menu .dropdown-menu li a {
104-
color: rgba(255,255,255,.8);
105-
}
106-
107-
.dark .context-menu .dropdown-menu li a:hover {
108-
background: rgba(255,255,255,.1);
109-
color: rgba(255,255,255,1);
110-
}

0 commit comments

Comments
 (0)