Skip to content
This repository has been archived by the owner. It is now read-only.

Commit ddf522f

Browse files
antiboredomantiboredom
committed
styling for settings pane
2 parents 3999c55 + 845845a commit ddf522f

File tree

5 files changed

+306
-40
lines changed

5 files changed

+306
-40
lines changed

‎app/settings/style.scss‎

Lines changed: 227 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,242 @@
11
#settingsContainer {
22
position: absolute;
3-
background: rgba(70, 70, 70, 0.8);
3+
background-color: #959595;
44
left: 10px;
55
bottom: 10px;
66
z-index: 999;
77
box-shadow: 0px 0px 6px #999;
8-
border-radius: 6px;
98
color: #fff;
109
}
1110

1211
#settingsPane {
13-
padding: 50px;
12+
width: 178px;
13+
font-family: Karla;
14+
// -webkit-box-shadow: 0px 8px 17px -2px #58585b;
15+
16+
#titleBar {
17+
background-color: #58585b;
18+
padding: 4px 12px 2px;
19+
}
20+
21+
#optionsZone {
22+
padding: 0px 12px;
23+
24+
div {
25+
clear: both;
26+
padding-bottom: 14px;
27+
}
28+
}
29+
30+
.hiddenRadio {
31+
overflow: auto;
32+
33+
input[type="radio"] {
34+
display:none;
35+
}
36+
37+
input[type="radio"]:checked + label svg {
38+
fill: #e1dedc;
39+
}
40+
41+
label {
42+
display: block;
43+
}
44+
45+
label.left {
46+
float: left;
47+
}
48+
49+
label.right {
50+
float: right;
51+
}
52+
}
53+
54+
#consoleText {
55+
position: relative;
56+
top: 5px;
57+
}
58+
59+
.console {
60+
height: 40px;
61+
width: 70px;
62+
fill: #828384;
63+
transition: all 0.3s ease;
64+
65+
66+
&:hover {
67+
fill: #e1dedc;
68+
}
69+
}
70+
71+
#close {
72+
width: 24px;
73+
height: 24px;
74+
position: absolute;
75+
top: 2px;
76+
right: 4px;
77+
}
78+
79+
#x {
80+
fill: #2F2F30;
81+
transition: all 0.1s ease;
82+
83+
&:hover {
84+
fill: #e1dedc;
85+
}
86+
}
87+
88+
#consoleHorizontal {
89+
float: right;
90+
}
91+
92+
#libraryIcon {
93+
width: 30px;
94+
float: left;
95+
position: relative;
96+
/*top: 10px;*/
97+
}
98+
99+
#textAdjust {
100+
width: 30px;
101+
float: left;
102+
position: relative;
103+
top: 5px;
104+
left: 3px;
105+
}
106+
107+
#textAdjustInput {
108+
width: 105px;
109+
}
110+
111+
#indentation {
112+
padding-top: 14px;
113+
}
114+
115+
#libraries {
116+
transition: all 0.3s ease;
117+
118+
/*&:hover {*/
119+
/*background-color: #adacac;*/
120+
/*color: #828384;*/
121+
/*}*/
122+
}
123+
124+
.hiddenCheckbox {
125+
input[type="checkbox"] {
126+
display: none;
127+
}
128+
129+
input[type="checkbox"] + label {
130+
background-color: #adacac;
131+
color: #828384;
132+
}
133+
134+
input[type="checkbox"]:checked + label {
135+
background-color: #e1dedc;
136+
color: #58585b;
137+
}
138+
}
139+
140+
#tab {
141+
height: 10px;
142+
width: 15px;
143+
position: relative;
144+
top: 1px;
145+
left: -4px;
146+
fill: #828384;
147+
transition: all 0.3s ease;
148+
}
149+
150+
#space {
151+
height: 10px;
152+
width: 15px;
153+
float: left;
154+
position: relative;
155+
top: 5px;
156+
left: 3px;
157+
fill: #828384;
158+
transition: all 0.3s ease;
159+
}
160+
161+
#tabBox {
162+
float: right;
163+
/*&:hover{*/
164+
/*color: #828384;*/
165+
/*background-color: #adacac;*/
166+
/*}*/
167+
}
168+
169+
#spaceBox {
170+
float: left;
171+
172+
/*&:hover {*/
173+
/*color: #828384;*/
174+
/*background-color: #adacac;*/
175+
/*}*/
176+
}
177+
178+
#indentOptions {
179+
position: relative;
180+
/*top: -11px;*/
181+
182+
input[type="radio"]:checked + label {
183+
background-color: #e1dedc;
184+
}
185+
}
186+
187+
.indentSelection {
188+
color: #828384;
189+
background-color: #adacac;
190+
display: inline-block;
191+
border-radius: 4px;
192+
padding: 4px;
193+
// float: right;
194+
text-align: center;
195+
width: 67px;
196+
transition: all 0.3s ease;
197+
}
198+
199+
200+
201+
.highlight{
202+
background-color: #e1dedc;
203+
display: inline-block;
204+
border-radius: 4px;
205+
padding: 4px;
206+
float: right;
207+
width: 105px;
208+
text-align: center;
209+
}
14210

15211
h2 {
212+
font-size: 16px;
16213
margin-top: 0;
214+
font-weight: normal;
215+
-webkit-margin-after: 2px;
216+
}
217+
218+
p {
219+
font-size: 13px;
220+
color: #58585b;
221+
}
222+
223+
label {
224+
color: #58585b;
225+
font-size: 13px;
226+
position: relative;
227+
top: 5px;
228+
}
229+
230+
input[type="text"] {
231+
width: 25px;
232+
float: right;
233+
border-radius: 5px;
234+
border: none;
235+
background-color: #e1dedc;
236+
padding: 4px;
237+
outline: none;
238+
color: #58585b;
239+
font-family: Karla;
240+
font-size: 13px;
17241
}
18242
}

‎app/settings/template.html‎

Lines changed: 54 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,56 @@
11
<div id="settingsPane">
2-
<h2>Preferences</h2>
3-
<p>
4-
<label for="consoleOrientation">Console</label>
5-
<select id="consoleOrientation" v-model="consoleOrientation">
6-
<option value="horizontal">Horizontal</option>
7-
<option value="vertical">Vertical</option>
8-
</select>
9-
</p>
10-
11-
<p>
12-
<input id="showLibs" type="checkbox" v-model="showLibs">
13-
<label for="showLibs">Show library files</label>
14-
</p>
15-
16-
<p>
17-
<label for="fontSize">Editor Font Size</label>
18-
<input type="text" id="fontSize" v-model="fontSize" size=3>
19-
</p>
20-
21-
<p>
22-
<label for="tabSize">Indentation Size</label>
23-
<input type="text" id="tabSize" v-model="tabSize" size=3>
24-
</p>
25-
26-
<p>
27-
<label for="tabType">Indent With</label>
28-
<select id="tabType" v-model="tabType">
29-
<option value="spaces">Spaces</option>
30-
<option value="tabs">Tabs</option>
31-
</select>
32-
</p>
33-
34-
<p style="margin-bottom:0">
35-
<button v-on="click: $root.toggleSettingsPane()">Close</button>
36-
</p>
2+
<div id="titleBar">
3+
<h2>Preferences</h2><div id="close" v-on="click: $root.toggleSettingsPane()">
4+
5+
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="x" x="0" y="0" viewBox="111.98 169.64 388.04 407.06" enable-background="new 111.982048 169.6423035 388.0419922 407.0557861" xml:space="preserve"><path d="M326.08 360.51L392.7 293.88c6.42-6.42 6.42-16.81 0-23.23 -6.42-6.42-16.81-6.42-23.23 0l-66.63 66.63 -66.63-66.63c-6.42-6.42-16.81-6.42-23.23 0s-6.42 16.81 0 23.23l66.63 66.63 -66.63 66.63c-6.42 6.42-6.42 16.81 0 23.23 3.21 3.21 7.41 4.81 11.61 4.81 4.2 0 8.41-1.6 11.61-4.81l66.63-66.63 66.63 66.63c3.21 3.21 7.41 4.81 11.61 4.81 4.2 0 8.41-1.6 11.61-4.81 6.42-6.42 6.42-16.81 0-23.23L326.08 360.51z" ></svg></div>
6+
7+
</div>
8+
<div id="optionsZone">
9+
<div class="hiddenRadio">
10+
<p id="consoleText">Console Orientation</p>
11+
12+
<input type="radio" name="consoleOrientation" id="consoleH" v-model="consoleOrientation" value="horizontal" >
13+
<label for="consoleH" class="left">
14+
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" class="console" id="consoleHorizontal" x="0px" y="0px" viewBox="111.982048 169.6423035 388.0419922 220.7826385" xml:space="preserve"><g><path d="M487.5209656 339.6809998H124.4851151c-6.9052582 0-12.5030746-5.5978394-12.5030746-12.5030823V182.145401 c0-6.9052582 5.5978165-12.5030823 12.5030746-12.5030823h363.0358582c6.9052429 0 12.5 5.6 12.5 12.5 v145.0325165C500.0240173 334.1 494.4 339.7 487.5 339.6809998z"/><path d="M111.9820404 377.9217529v-18.2110291c0-6.9052429 5.5978165-12.5030518 12.5030746-12.5030518h363.0358582 c6.9052429 0 12.5 5.6 12.5 12.5030518v18.2110291c0 6.9052734-5.5978088 12.5030823-12.5030518 12.5 H124.4851151C117.5798569 390.4 112 384.8 112 377.9217529z"/></g></svg>
15+
</label>
16+
17+
<input type="radio" name="consoleOrientation" id="consoleV" v-model="consoleOrientation" value="vertical" >
18+
<label for="consoleV" class="right">
19+
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" class="console" id="consoleVertical" x="0" y="0" viewBox="111.98 169.64 388.04 220.78" enable-background="new 111.982048 169.6423035 388.0419922 220.7826385" xml:space="preserve"><path d="M400.55 390.42H124.49c-6.91 0-12.5-5.6-12.5-12.5V182.15c0-6.91 5.6-12.5 12.5-12.5H400.55c6.91 0 12.5 5.6 12.5 12.5V377.92C413.05 384.83 407.45 390.42 400.55 390.42z"/><path d="M487.52 390.42h-54.44c-6.91 0-12.5-5.6-12.5-12.5V182.15c0-6.91 5.6-12.5 12.5-12.5h54.44c6.91 0 12.5 5.6 12.5 12.5V377.92C500.02 384.83 494.43 390.42 487.52 390.42z"/></svg>
20+
</label>
21+
</div>
22+
23+
<div class="hiddenCheckbox">
24+
<img id="libraryIcon" src="images/library.svg">
25+
<input id="showLibs" type="checkbox" v-model="showLibs">
26+
<label class="highlight" id="libraries" for="showLibs">Show Libraries</label>
27+
</div>
28+
29+
<div>
30+
<img id="textAdjust" src="images/textAdjust.svg">
31+
<input id="textAdjustInput" class="highlight" type="text" v-model="fontSize" size=3>
32+
</div>
33+
34+
<div id="indentation">
35+
<label for="tabSize">Indentation Amout</label><input id="tabSize" class="highlight" type="text" v-model="tabSize" size=3>
36+
</div>
37+
38+
<div id="indentOptions" class="hiddenRadio">
39+
<input type="radio" name="tabType" value="spaces" id="tabTypeS" v-model="tabType">
40+
<label class="indentSelection" id="spaceBox" for="tabTypeS">
41+
<span>
42+
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="space" x="0" y="0" viewBox="111.98 169.64 394.28 116.59" enable-background="new 111.982048 169.6423035 394.276123 116.5872803" xml:space="preserve"><path d="M495.71 169.64h-50.1c-5.85 0-10.58 4.74-10.58 10.58v34.74H183.25v-34.74c0-5.84-4.74-10.58-10.58-10.58h-50.1c-5.84 0-10.58 4.74-10.58 10.58v45.32 50.1c0 5.84 4.74 10.58 10.58 10.58h50.1 272.95 36.41 13.69c5.85 0 10.58-4.74 10.58-10.58v-95.42C506.3 174.38 501.56 169.64 495.71 169.64z"/></svg>
43+
</span>
44+
spaces
45+
</label>
46+
<input type="radio" name="tabType" value="tabs" id="tabTypeT" v-model="tabType">
47+
<label class="indentSelection" id="tabBox" for="tabTypeT">
48+
<span>
49+
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="tab" x="0" y="0" viewBox="111.98 169.64 394.28 196.29" enable-background="new 111.982048 169.6423035 394.276123 196.2901306" xml:space="preserve"><path d="M292.69 348.7v-47.75H123.92c-6.53 0-11.94-5.41-11.94-11.94v-47.75c0-6.53 5.41-11.94 11.94-11.94h168.77v-47.75c0-4.85 2.98-9.14 7.46-11 4.29-1.87 9.51-0.94 12.86 2.61l83.56 83.56c2.43 2.23 3.55 5.41 3.55 8.39 0 2.98-1.12 6.16-3.55 8.39l-83.56 83.56c-3.35 3.55-8.58 4.48-12.86 2.61C295.67 357.84 292.69 353.55 292.69 348.7z"/><path d="M435 355.35v-175.13c0-5.84 4.74-10.58 10.58-10.58h50.09c5.84 0 10.58 4.74 10.58 10.58v175.13c0 5.84-4.74 10.58-10.58 10.58h-50.09C439.74 365.93 435 361.19 435 355.35z"/></svg>
50+
</span>
51+
tabs
52+
</label>
53+
54+
</div>
55+
</div>
3756
</div>

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"author": "Sam Lavigne",
33
"name": "p5",
44
"description": "Javascript IDE for beginners",
5-
"version": "0.1.2",
5+
"version": "0.1.3",
66
"devDependencies": {
77
"gulp-rename": "^1.2.0",
88
"partialify": "^3.1.1",

‎public/images/textAdjust.svg‎

Lines changed: 23 additions & 0 deletions
Loading

‎public/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "p5",
3-
"version": "0.1.2",
3+
"version": "0.1.3",
44
"main": "index.html",
55
"window": {
66
"title": "Untitled",

0 commit comments

Comments
 (0)