Skip to content

Commit 966c573

Browse files
MrBeeAreWhyMrBeeAreWhy
authored
Merge pull request #26 from oslabs-beta/navBarTypescript
Nav bar typescript
2 parents bb5f714 + cd219dc commit 966c573

File tree

9 files changed

+92
-85
lines changed

9 files changed

+92
-85
lines changed

‎src/components/dashboard_items/ComponentDetails.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -141,7 +141,6 @@ i {
141141
142142
.q-tab-panel {
143143
height: 100%;
144-
// matchs the code editor bg
145144
background: $subprimary;
146145
padding-top: 20px;
147146
}
@@ -158,6 +157,7 @@ i {
158157
159158
.toolbar-background {
160159
background: black;
160+
161161
}
162162
163163
#store-cards {

‎src/components/file_system_interface/ExportProject.vue

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,11 @@ Description:
1010
-->
1111

1212
<template>
13-
<q-btn class="export-btn" color="secondary" label="Export">
14-
<q-menu class="dropdown">
13+
<q-btn class="nav-btn" color="secondary" label="Export">
14+
<q-menu class="dropdown" :offset="[0, 15]">
1515
<div class="settings-dropdown column items-center">
1616
<p class="center">Export:</p>
17-
<q-btn class="menu-btn" no-caps color="secondary" label="Current Project" @click="exportProject"/>
17+
<q-btn class="menu-btn" no-caps color="secondary" label="Project" @click="exportProject"/>
1818
<q-btn class="menu-btn" no-caps color="secondary" label="Active Component" @click="handleExportComponent" :disabled="!activeComponent.trim()"/>
1919
</div>
2020
</q-menu>
@@ -523,19 +523,16 @@ export default {
523523
</script>
524524
525525
<style>
526-
.export-btn {
527-
min-height: 10px !important;
528-
width: auto;
529-
font-size: 11px;
526+
.nav-btn {
527+
min-height: 30px !important;
530528
text-transform: capitalize;
531-
padding: 3px 8px;
532529
}
533530
.center{
534531
display:inline-block;
535532
text-align: center;
536-
margin-top: 5px;
533+
margin-top: 10px;
534+
margin-bottom: 5px;
537535
font-weight: bold;
538-
background-color: rgb(100, 99, 99);
539536
color: white;
540537
box-sizing: border-box;
541538
}

‎src/components/file_system_interface/OpenProjectComponent.vue

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,12 @@ Description:
55
-->
66

77
<template>
8-
<q-btn class="export-btn" color="secondary" label="Import">
9-
<q-menu class="dropdown">
8+
<q-btn class="nav-btn" color="secondary" label="Import">
9+
<q-menu :offset="[0, 15]" class="dropdown">
1010
<div class="settings-dropdown column items-center">
1111
<p class="center">Import:</p>
1212
<q-btn class="menu-btn" no-caps color="secondary" label="Project" @click="openProjectJSON"/>
13-
<!-- <ImportComponent title="Component"/> -->
13+
<ImportComponent class="import-comp" no-caps title="Component"/>
1414
<!-- <q-btn class="menu-btn" no-caps color="secondary" label="Component" @click="exportProject"/> -->
1515
</div>
1616
</q-menu>
@@ -70,8 +70,12 @@ export default {
7070
margin-right: 0.2rem;
7171
}
7272
.menu-btn{
73-
width: 85%;
73+
width: 80%;
74+
margin: 10px 0px;
75+
}
76+
77+
.import-comp{
78+
width: 80% !important;
7479
margin: 10px 0px;
75-
box-shadow:inset 0 -0.6em 0 -0.35em rgba(0,0,0,0.17);
7680
}
7781
</style>

‎src/components/file_system_interface/SaveProjectComponent.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ Description:
77

88
<template>
99
<q-btn
10-
class="export-btn"
10+
class="nav-btn"
1111
color="secondary"
1212
label="Save"
1313
@click="saveProjectJSON"

‎src/components/home_sidebar_items/ComponentTab/CreateComponent.vue

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -180,7 +180,6 @@ export default {
180180
flex-direction: column;
181181
justify-content: flex-start;
182182
align-items: stretch;
183-
margin: 4px;
184183
}
185184
.create-component-form {
186185
display: flex;

‎src/components/home_sidebar_items/ComponentTab/ImportComponent.vue

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -257,9 +257,8 @@ export default {
257257

258258
<style scoped>
259259
#import-component-btn{
260-
width: 85%;
260+
width: 100%;
261261
margin: 10px 0px;
262-
box-shadow:inset 0 -0.6em 0 -0.35em rgba(0,0,0,0.17);
263262
}
264263
</style>
265264

‎src/components/slack_login/SlackLoginWindow.vue

Lines changed: 15 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,15 @@
11
<!--<template v-if="show">-->
22
<template>
3+
<q-btn class="menu-btn" color= "purple" no-caps @click="openLogin">
4+
<!-- Slack logo -->
5+
<svg xmlns="http://www.w3.org/2000/svg" style="height: 20px; width: 20px; margin-right: 12px" viewBox="0 0 122.8 122.8">
6+
<path d="M25.8 77.6c0 7.1-5.8 12.9-12.9 12.9S0 84.7 0 77.6s5.8-12.9 12.9-12.9h12.9v12.9zm6.5 0c0-7.1 5.8-12.9 12.9-12.9s12.9 5.8 12.9 12.9v32.3c0 7.1-5.8 12.9-12.9 12.9s-12.9-5.8-12.9-12.9V77.6z" fill="#e01e5a" ></path>
7+
<path d="M45.2 25.8c-7.1 0-12.9-5.8-12.9-12.9S38.1 0 45.2 0s12.9 5.8 12.9 12.9v12.9H45.2zm0 6.5c7.1 0 12.9 5.8 12.9 12.9s-5.8 12.9-12.9 12.9H12.9C5.8 58.1 0 52.3 0 45.2s5.8-12.9 12.9-12.9h32.3z" fill="#36c5f0"></path>
8+
<path d="M97 45.2c0-7.1 5.8-12.9 12.9-12.9s12.9 5.8 12.9 12.9-5.8 12.9-12.9 12.9H97V45.2zm-6.5 0c0 7.1-5.8 12.9-12.9 12.9s-12.9-5.8-12.9-12.9V12.9C64.7 5.8 70.5 0 77.6 0s12.9 5.8 12.9 12.9v32.3z" fill="#2eb67d"></path>
9+
<path d="M77.6 97c7.1 0 12.9 5.8 12.9 12.9s-5.8 12.9-12.9 12.9-12.9-5.8-12.9-12.9V97h12.9zm0-6.5c-7.1 0-12.9-5.8-12.9-12.9s5.8-12.9 12.9-12.9h32.3c7.1 0 12.9 5.8 12.9 12.9s-5.8 12.9-12.9 12.9H77.6z" fill="#ecb22e" ></path>
10+
</svg>
11+
Slack Login
12+
</q-btn>
313
<div>
414
<!-- <div>
515
<q-btn class="glossy bg-black openModalBtn" size="5px" @click="openLogin">
@@ -13,36 +23,7 @@
1323
<!--
1424
Skip button:
1525
-->
16-
<q-btn
17-
class="menu-btn"
18-
color= "purple"
19-
no-caps
20-
@click="openLogin"
21-
>
22-
<svg
23-
xmlns="http://www.w3.org/2000/svg"
24-
style="height: 20px; width: 20px; margin-right: 12px"
25-
viewBox="0 0 122.8 122.8"
26-
>
27-
<path
28-
d="M25.8 77.6c0 7.1-5.8 12.9-12.9 12.9S0 84.7 0 77.6s5.8-12.9 12.9-12.9h12.9v12.9zm6.5 0c0-7.1 5.8-12.9 12.9-12.9s12.9 5.8 12.9 12.9v32.3c0 7.1-5.8 12.9-12.9 12.9s-12.9-5.8-12.9-12.9V77.6z"
29-
fill="#e01e5a"
30-
></path>
31-
<path
32-
d="M45.2 25.8c-7.1 0-12.9-5.8-12.9-12.9S38.1 0 45.2 0s12.9 5.8 12.9 12.9v12.9H45.2zm0 6.5c7.1 0 12.9 5.8 12.9 12.9s-5.8 12.9-12.9 12.9H12.9C5.8 58.1 0 52.3 0 45.2s5.8-12.9 12.9-12.9h32.3z"
33-
fill="#36c5f0"
34-
></path>
35-
<path
36-
d="M97 45.2c0-7.1 5.8-12.9 12.9-12.9s12.9 5.8 12.9 12.9-5.8 12.9-12.9 12.9H97V45.2zm-6.5 0c0 7.1-5.8 12.9-12.9 12.9s-12.9-5.8-12.9-12.9V12.9C64.7 5.8 70.5 0 77.6 0s12.9 5.8 12.9 12.9v32.3z"
37-
fill="#2eb67d"
38-
></path>
39-
<path
40-
d="M77.6 97c7.1 0 12.9 5.8 12.9 12.9s-5.8 12.9-12.9 12.9-12.9-5.8-12.9-12.9V97h12.9zm0-6.5c-7.1 0-12.9-5.8-12.9-12.9s5.8-12.9 12.9-12.9h32.3c7.1 0 12.9 5.8 12.9 12.9s-5.8 12.9-12.9 12.9H77.6z"
41-
fill="#ecb22e"
42-
></path>
43-
</svg>
44-
Slack Login
45-
</q-btn>
26+
4627

4728
<q-dialog
4829
v-model="showLogin"
@@ -181,6 +162,7 @@ export default {
181162
color: $menutext;
182163
background-color: purple;
183164
margin-bottom: 10px;
165+
width: 100%
184166
185167
}
186168
@@ -189,7 +171,7 @@ export default {
189171
background-color: $subprimary;
190172
border: 1px solid $subprimary;
191173
text-decoration: underline;
192-
margin-top: 30px;
174+
margin-top: 20px;
193175
}
194176
195177
#skipButton:hover {
@@ -211,8 +193,8 @@ export default {
211193
border: 1px solid #289ead;
212194
}
213195
.menu-btn{
214-
width: 100%;
215-
margin-bottom:20px;
196+
width: 80%;
197+
margin: 10px 0px;
216198
}
217199
218200

‎src/css/app.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,8 @@ main {
2525
}
2626
.q-btn {
2727
align-items: center;
28-
height: 42px;
28+
height: 20px;
29+
width: 65px;
2930
}
3031
.q-item {
3132
background: $subsecondary;

‎src/layouts/MyLayout.vue

Lines changed: 56 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -44,13 +44,13 @@ Description:
4444
<OpenProjectComponent />
4545
<ExportProjectComponent />
4646

47-
<q-btn icon="fas fa-cog" size="sm">
47+
<q-btn class="nav-btn" icon="fas fa-cog" size="sm">
4848
<!-- < fas => fontawesome, refers to icon style -->
49-
<q-menu class="dropdown">
49+
<q-menu :offset="[0, 15]" class="dropdown">
5050

5151
<div class="settings-dropdown column items-center">
5252
<q-btn
53-
class="menu-btn"
53+
class="tut-btn"
5454
color="secondary"
5555
label="Getting Started"
5656
no-caps
@@ -59,13 +59,15 @@ Description:
5959

6060
<SlackLoginWindow />
6161
<div class="typescript">
62-
<p> <b>TypeScript: </b> </p>
63-
<label for="typescript" class="switch">
64-
<input class="switch-input" type="checkbox" name="typescript" id="typescript" :value="exportAsTypescript" @change="syncTypescriptFlag" />
65-
<span class="switch-label" data-on="On" data-off="Off"></span>
66-
<span class="switch-handle"></span>
62+
<p class="typescript-text"> <b>TypeScript: </b> </p>
63+
<label for="typescript" class="switch" >
64+
<input v-if="this.exportAsTypescript === 'on'" class="switch-input" type="checkbox" name="typescript" id="typescript" :value="this.exportAsTypescript" @change="syncTypescriptFlag" checked/>
65+
<input v-else class="switch-input" type="checkbox" name="typescript" id="typescript" :value="this.exportAsTypescript" @change="syncTypescriptFlag"/>
66+
<span class="switch-label" :value="this.exportAsTypescript" data-on="on" data-off="off"></span>
67+
<span class="switch-handle" :value="this.exportAsTypescript"></span>
6768
</label>
6869
</div>
70+
6971
</div>
7072
<i id="btn"></i>
7173
</q-menu >
@@ -230,6 +232,8 @@ export default {
230232
// this.$emit("redo");
231233
// },
232234
syncTypescriptFlag(e) {
235+
console.log("Test")
236+
console.log(e.target.value)
233237
let checkboxValue;
234238
if (e.target.value === "off") {
235239
checkboxValue = "on";
@@ -240,6 +244,13 @@ export default {
240244
}
241245
},
242246
};
247+
248+
function check (a){
249+
if(a === true){
250+
return checked
251+
}
252+
return
253+
}
243254
</script>
244255

245256
<style lang="scss">
@@ -334,11 +345,11 @@ q-btn > i {
334345
background-color: rgba(255, 255, 255, 0.301);
335346
}
336347
337-
.fa-backward:hover,
338-
.fa-forward:hover {
339-
cursor: pointer;
340-
color: $secondary;
341-
}
348+
// .fa-backward:hover,
349+
// .fa-forward:hover {
350+
// cursor: pointer;
351+
// color: $secondary;
352+
// }
342353
343354
#unavailable {
344355
color: grey;
@@ -355,8 +366,9 @@ q-btn > i {
355366
transition-timing-function: ease-in;
356367
}
357368
358-
.export-btn {
359-
margin-left: 0.3rem;
369+
.nav-btn {
370+
margin-left: 0.5rem;
371+
// height: 25px
360372
}
361373
362374
.q-toolbar {
@@ -412,26 +424,37 @@ q-btn > i {
412424
height: 100%;
413425
}
414426
415-
.scroll {
416-
// overflow: hidden;
417-
}
418427
.menu-btn{
419-
width: 85%;
428+
width: 80%;
420429
margin: 10px 0px;
421-
box-shadow:inset 0 -0.6em 0 -0.35em rgba(0,0,0,0.17);
422430
}
423-
.settings-dropdown {
424-
background: #5c5e61;
431+
432+
.tut-btn{
433+
width: 80%;
434+
margin: 20px 0px 10px;
435+
425436
}
437+
438+
.menu-btn:disabled{
439+
background: #437962 !important;
440+
opacity: 100% !important;
441+
color: #959a98 !important;
442+
}
443+
426444
.dropdown{
427-
width: 15%;
445+
width: 200px;
428446
height: auto;
447+
overflow:visible;
448+
background: rgba(#000000, .8);
429449
}
450+
/* Typescript toggle
451+
========================== */
452+
430453
.switch {
431454
position: relative;
432455
display: block;
433456
vertical-align: top;
434-
width: 100%;
457+
width: 65px;
435458
height: 30px;
436459
padding: 3px;
437460
margin: 0 10px 10px 0;
@@ -462,8 +485,8 @@ background: #5c5e61;
462485
}
463486
.switch-label:before, .switch-label:after {
464487
position: absolute;
465-
top: 50%;
466-
margin-top: -.5em;
488+
top: 20px;
489+
margin-top: -.8em;
467490
line-height: 1;
468491
-webkit-transition: inherit;
469492
-moz-transition: inherit;
@@ -508,8 +531,8 @@ background: #5c5e61;
508531
.switch-handle:before {
509532
content: "";
510533
position: absolute;
511-
top: 50%;
512-
left: 50%;
534+
top: 20px;
535+
left: 20px;
513536
margin: -6px 0 0 -6px;
514537
width: 12px;
515538
height: 12px ;
@@ -519,7 +542,7 @@ background: #5c5e61;
519542
box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
520543
}
521544
.switch-input:checked ~ .switch-handle {
522-
left: 56%;
545+
left: 40px;
523546
box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
524547
}
525548
@@ -533,9 +556,11 @@ background: #5c5e61;
533556
}
534557
.typescript{
535558
display: flex;
536-
justify-content: space-around;
537559
align-items: flex-end;
538-
width: 90%;
560+
margin: 10px;
539561
flex-direction: row;
540562
}
563+
.typescript-text{
564+
margin-right: 10px;
565+
}
541566
</style>

0 commit comments

Comments
 (0)