Skip to content

Commit 1171473

Browse files
author
Julia Bakerink
committed
WIP typescript toggle functionality in nav bar setting dropdown
1 parent 63b6ed4 commit 1171473

File tree

3 files changed

+148
-19
lines changed

3 files changed

+148
-19
lines changed

‎src/components/file_system_interface/ExportProject.vue

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,11 @@ Description:
1111

1212
<template>
1313
<q-btn class="export-btn" color="secondary" label="Export">
14-
<q-menu>
14+
<q-menu class="dropdown">
1515
<div class="settings-dropdown column items-center">
16-
<q-btn class="menu-btn" no-caps color="secondary" label="Export Project" @click="exportProject"/>
17-
<!-- Export active component is incorrectly exporting the entire project. Need to also disable this button when no active component is selected
18-
-->
19-
<q-btn class="menu-btn" no-caps color="secondary" label="Export Active Component" @click="handleExportComponent"/>
16+
<p class="center">Export:</p>
17+
<q-btn class="menu-btn" no-caps color="secondary" label="Current Project" @click="exportProject"/>
18+
<q-btn class="menu-btn" no-caps color="secondary" label="Active Component" @click="handleExportComponent" :disabled="!activeComponent.trim()"/>
2019
</div>
2120
</q-menu>
2221

@@ -512,10 +511,20 @@ export default {
512511
<style>
513512
.export-btn {
514513
min-height: 10px !important;
514+
width: auto;
515515
font-size: 11px;
516516
text-transform: capitalize;
517517
padding: 3px 8px;
518518
}
519+
.center{
520+
display:inline-block;
521+
text-align: center;
522+
margin-top: 5px;
523+
font-weight: bold;
524+
background-color: rgb(100, 99, 99);
525+
color: white;
526+
box-sizing: border-box;
527+
}
519528
520529
521530
</style>

‎src/components/file_system_interface/OpenProjectComponent.vue

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,11 @@ Description:
66

77
<template>
88
<q-btn class="export-btn" color="secondary" label="Import">
9-
<q-menu>
9+
<q-menu class="dropdown">
1010
<div class="settings-dropdown column items-center">
11-
<q-btn class="menu-btn" no-caps color="secondary" label="Import Project" @click="openProjectJSON"/>
12-
<q-btn class="menu-btn" no-caps color="secondary" label="Import Component" @click="exportProject"/>
11+
<p class="center">Import:</p>
12+
<q-btn class="menu-btn" no-caps color="secondary" label="Project" @click="openProjectJSON"/>
13+
<q-btn class="menu-btn" no-caps color="secondary" label="Component" @click="exportProject"/>
1314
</div>
1415
</q-menu>
1516

‎src/layouts/MyLayout.vue

Lines changed: 130 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ Description:
2020
></i>
2121
</q-btn> -->
2222
<q-toolbar-title> OverVue </q-toolbar-title>
23-
<label for="typescript" style="margin-right: 10px">
23+
<!-- <label for="typescript" style="margin-right: 10px">
2424
<input
2525
type="checkbox"
2626
name="typescript"
@@ -29,8 +29,8 @@ Description:
2929
@change="syncTypescriptFlag"
3030
/>
3131
Use Typescript
32-
</label>
33-
<SlackLoginWindow />
32+
</label> -->
33+
<!-- <SlackLoginWindow /> -->
3434
<div></div>
3535
<!-- <i
3636
v-if="doneAction.length"
@@ -52,9 +52,13 @@ Description:
5252
></i>
5353
<i v-else class="fa fa-forward" id="unavailable" aria-hidden="true"></i> -->
5454
<!-- <q-btn-dropdown dense flat color="subaccent" round > -->
55+
<SaveProjectComponent />
56+
<OpenProjectComponent />
57+
<ExportProjectComponent />
58+
5559
<q-btn icon="fas fa-cog" size="sm">
5660
<!-- < fas => fontawesome, refers to icon style -->
57-
<q-menu>
61+
<q-menu class="dropdown">
5862

5963
<div class="settings-dropdown column items-center">
6064
<q-btn
@@ -68,6 +72,7 @@ Description:
6872
class="menu-btn"
6973
color="secondary"
7074
no-caps
75+
@click="openLogin"
7176
>
7277
<svg
7378
xmlns="http://www.w3.org/2000/svg"
@@ -93,15 +98,20 @@ Description:
9398
</svg>
9499
Connect to Slack
95100
</q-btn>
96-
<q-toggle v-model="exportAsTypescript" color="primary" label="Use TypeScript"/>
101+
<div>
102+
<label for="typescript" style="margin-right: 10px" class="switch">
103+
<input class="switch-input" type="checkbox" name="typescript" id="typescript" :value="exportAsTypescript" @change="syncTypescriptFlag" />
104+
Use Typescript
105+
<span class="switch-label" data-on="TypeScript" data-off="JavaScript"></span>
106+
<span class="switch-handle"></span>
107+
</label>
108+
</div>
97109
</div>
98110
<i id="btn"></i>
99-
</q-menu>
111+
</q-menu >
100112
</q-btn>
101113

102-
<SaveProjectComponent />
103-
<OpenProjectComponent />
104-
<ExportProjectComponent />
114+
105115
<!-- </div> -->
106116
<!-- this button will open the right drawer -->
107117
</q-toolbar>
@@ -404,11 +414,120 @@ q-btn > i {
404414
overflow: hidden;
405415
}
406416
.menu-btn{
407-
width: 90%;
417+
width: 85%;
408418
margin: 10px 0px;
409419
box-shadow:inset 0 -0.6em 0 -0.35em rgba(0,0,0,0.17);
410420
}
411421
.settings-dropdown {
412-
background-image: rgba(223, 218, 218, 0.886)
422+
background: #5c5e61;
423+
}
424+
.dropdown{
425+
width: 15%;
426+
height: auto;
427+
}
428+
.switch {
429+
position: relative;
430+
display: block;
431+
vertical-align: top;
432+
width: 100px;
433+
height: 30px;
434+
padding: 3px;
435+
margin: 0 10px 10px 0;
436+
background: linear-gradient(to bottom, #eeeeee, #FFFFFF 25px);
437+
background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);
438+
border-radius: 18px;
439+
box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
440+
cursor: pointer;
441+
box-sizing:content-box;
442+
}
443+
.switch-input {
444+
position: absolute;
445+
top: 0;
446+
left: 0;
447+
opacity: 0;
448+
box-sizing:content-box;
449+
}
450+
.switch-label {
451+
position: relative;
452+
display: block;
453+
height: inherit;
454+
font-size: 10px;
455+
text-transform: uppercase;
456+
background: #eceeef;
457+
border-radius: inherit;
458+
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
459+
box-sizing:content-box;
413460
}
461+
.switch-label:before, .switch-label:after {
462+
position: absolute;
463+
top: 50%;
464+
margin-top: -.5em;
465+
line-height: 1;
466+
-webkit-transition: inherit;
467+
-moz-transition: inherit;
468+
-o-transition: inherit;
469+
transition: inherit;
470+
box-sizing:content-box;
471+
}
472+
.switch-label:before {
473+
content: attr(data-off);
474+
right: 11px;
475+
color: #aaaaaa;
476+
text-shadow: 0 1px rgba(255, 255, 255, 0.5);
477+
}
478+
.switch-label:after {
479+
content: attr(data-on);
480+
left: 11px;
481+
color: #FFFFFF;
482+
text-shadow: 0 1px rgba(0, 0, 0, 0.2);
483+
opacity: 0;
484+
}
485+
.switch-input:checked ~ .switch-label {
486+
background: #26e23f;
487+
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
488+
}
489+
.switch-input:checked ~ .switch-label:before {
490+
opacity: 0;
491+
}
492+
.switch-input:checked ~ .switch-label:after {
493+
opacity: 1;
494+
}
495+
.switch-handle {
496+
position: absolute;
497+
top: 4px;
498+
left: 4px;
499+
width: 28px;
500+
height: 28px;
501+
background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
502+
background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
503+
border-radius: 100%;
504+
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
505+
}
506+
.switch-handle:before {
507+
content: "";
508+
position: absolute;
509+
top: 50%;
510+
left: 50%;
511+
margin: -6px 0 0 -6px;
512+
width: 12px;
513+
height: 12px;
514+
background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
515+
background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
516+
border-radius: 6px;
517+
box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
518+
}
519+
.switch-input:checked ~ .switch-handle {
520+
left: 74px;
521+
box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
522+
}
523+
524+
/* Transition
525+
========================== */
526+
.switch-label, .switch-handle {
527+
transition: All 0.3s ease;
528+
-webkit-transition: All 0.3s ease;
529+
-moz-transition: All 0.3s ease;
530+
-o-transition: All 0.3s ease;
531+
}
532+
414533
</style>

0 commit comments

Comments
 (0)