Skip to content

Commit a334f66

Browse files
MrBeeAreWhyMrBeeAreWhy
authored
Merge pull request #27 from oslabs-beta/megan/htmlQueueLayerNav
HTML Queue Navigation Improvements
2 parents 966c573 + 96e9f57 commit a334f66

File tree

11 files changed

+146
-93
lines changed

11 files changed

+146
-93
lines changed

‎src/components/ComponentDisplay.vue

Lines changed: 65 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -33,85 +33,76 @@
3333
:onResizeStart="recordInitialSize"
3434
>
3535
<div class="component-title">
36-
<p style="color: black">{{ componentData.componentName }}</p>
36+
<p>{{ componentData.componentName }}</p>
3737
</div>
3838
<q-icon v-if="this.componentMap[componentData.componentName]?.noteList?.length > 0"
39-
color="red"
4039
size="30px"
4140
z-layer="0"
4241
name="edit_note"
4342
class="compNoteLogo"
4443
@click="handleAddNotes" />
4544
<q-icon v-else
46-
color="white"
4745
size="30px"
4846
z-layer="0"
4947
name="edit_note"
50-
class="compNoteLogo"
48+
class="compNoteLogoEmpty"
5149
@click="handleAddNotes" />
5250
<q-menu context-menu>
5351
<q-list color="black" class="menu">
54-
<q-item clickable v-ripple v-close-popup @click="handleExportComponent">
55-
<q-item-section style="color: menutext"
56-
>Export Component</q-item-section
57-
>
58-
<q-item-section avatar>
59-
<q-icon color="primary" name="upload" />
60-
</q-item-section>
61-
</q-item>
62-
<q-item clickable v-ripple v-close-popup @click="handleAddNotes">
63-
<q-item-section style="color: white"
64-
>Component Notes</q-item-section
65-
>
66-
<q-item-section avatar>
67-
<q-icon color="primary" name="edit_note" />
68-
</q-item-section>
69-
</q-item>
70-
<q-item clickable v-ripple v-close-popup @click="handleAddChild">
71-
<q-item-section style="color: menutext"
72-
>Update Children</q-item-section
73-
>
74-
<q-item-section avatar>
75-
<q-icon color="primary" name="add" />
76-
</q-item-section>
77-
</q-item>
78-
<q-item clickable v-ripple v-close-popup>
79-
<q-item-section class="layer" style="color: menutext"
80-
>Layer</q-item-section
81-
>
52+
<q-item clickable v-ripple v-close-popup id="layer-item">
53+
<q-item-section class="layer">Layer</q-item-section>
8254
<q-btn
83-
class="btn"
55+
class="minorAction"
8456
color="transparent"
8557
text-color="primary"
86-
label="-"
58+
label="&ndash;"
8759
@click="(e) => handleLayer(e)"
8860
/>
89-
<p id="counter" style="color: menutext">{{ componentData.z }}</p>
61+
<p id="counter">{{ componentData.z }}</p>
9062
<q-btn
91-
class="btn"
63+
class="minorAction"
9264
color="transparent"
9365
text-color="primary"
9466
label="+"
9567
@click="(e) => handleLayer(e)"
9668
/>
9769
</q-item>
70+
<q-item clickable v-ripple v-close-popup @click="handleAddChild">
71+
<q-item-section>Update Children</q-item-section>
72+
<q-item-section avatar>
73+
<q-icon color="primary" name="add" />
74+
</q-item-section>
75+
</q-item>
76+
<q-item clickable v-ripple v-close-popup @click="handleAddNotes">
77+
<q-item-section>Component Notes</q-item-section>
78+
<q-item-section avatar>
79+
<q-icon color="primary" name="edit_note" />
80+
</q-item-section>
81+
</q-item>
82+
<q-item clickable v-ripple v-close-popup @click="handleExportComponent">
83+
<q-item-section>Export Component</q-item-section>
84+
<q-item-section avatar>
85+
<q-icon color="primary" name="upload" />
86+
</q-item-section>
87+
</q-item>
9888
</q-list>
9989
</q-menu>
10090

10191
</vue-draggable-resizable>
10292
<div>
103-
<q-dialog v-model="modalOpen" persistent>
93+
<q-dialog v-model="modalOpen">
10494
<q-select
10595
@select="handleSelect"
106-
id="dropdown"
96+
id="childrenDropdown"
10797
filled
10898
v-model="testModel"
10999
multiple
110100
:options="options"
111101
use-chips
112102
stack-label
103+
dark
113104
label="Select children"
114-
style="width: 250px; background-color: #fd5f00"
105+
style="width: 250px; background-color: #201221;"
115106
/>
116107
</q-dialog>
117108

@@ -555,7 +546,7 @@ li:hover{
555546
font-size: 16px;
556547
top: -18px;
557548
left: 2px;
558-
color: black;
549+
color: $subprimary;
559550
-webkit-text-stroke: 0.4px $menutext;
560551
font-weight: 800;
561552
line-height: 1.2;
@@ -613,15 +604,30 @@ li:hover{
613604
}
614605
615606
.compNoteLogo{
616-
background: $subprimary;
617-
opacity: 90%;
607+
background: rgba($subprimary, .9);
608+
color: $secondary;
609+
border-radius: 4px;
610+
position: absolute;
611+
top: 4px;
612+
left: 4px;
613+
}
614+
615+
.compNoteLogoEmpty{
616+
background: rgba($subprimary, .9);
617+
color: rgba($primary, 1);
618618
border-radius: 4px;
619619
position: absolute;
620620
top: 4px;
621621
left: 4px;
622622
}
623623
.compNoteLogo:hover{
624-
background: $primary;
624+
background: rgba($subprimary, .6);
625+
color: rgba($secondary, .8);
626+
}
627+
628+
.compNoteLogoEmpty:hover{
629+
background: rgba($subprimary, .6);
630+
color: rgba($menutext, .4);
625631
}
626632
627633
.component-box {
@@ -637,11 +643,10 @@ li:hover{
637643
background-color: $accent;
638644
border: 1px dashed $accent;
639645
}
640-
.btn {
641-
font-size: 25px;
642-
padding: 0 20px;
646+
.minorAction {
647+
font-weight: bolder !important;
643648
width: 10px;
644-
height: 10px;
649+
height: 30px !important;
645650
transition: none;
646651
}
647652
.btn:hover,
@@ -650,8 +655,20 @@ li:hover{
650655
color: $menutext;
651656
background-color: transparent;
652657
}
658+
659+
#layer-item {
660+
align-items: center;
661+
}
662+
653663
#counter {
654-
margin-top: 20px;
664+
margin: 0 10px 0;
665+
color: $menutext;
666+
}
667+
668+
#childrenDropdown {
669+
width: 250px;
670+
background: $subprimary;
671+
color: $menutext;
655672
}
656673
.title {
657674
font-size: 20px;

‎src/components/dashboard_items/Dashboard.vue

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -17,23 +17,19 @@ Description:
1717
dense
1818
breakpoint="1050"
1919
>
20-
<q-tab name="detail" label="Component Details" id="label-text"
21-
></q-tab>
22-
<q-tab name="tree" label="Project Tree" id="label-text"
23-
></q-tab>
24-
<q-tab name="routes" label="Routes" id="label-text"
25-
></q-tab>
20+
<q-tab name="routes" label="Routes" id="label-text"></q-tab>
21+
<q-tab name="tree" label="Project Tree" id="label-text"></q-tab>
22+
<q-tab name="detail" label="Component Details" id="label-text"></q-tab>
2623
</q-tabs>
2724
<q-tab-panels v-model="tab" animated>
28-
<q-tab-panel name="detail">
29-
<ComponentDetails />
25+
<q-tab-panel name="routes">
26+
<RouteDisplay />
3027
</q-tab-panel>
3128
<q-tab-panel name="tree">
3229
<Tree />
3330
</q-tab-panel>
34-
<!-- added Routes to the right side -->
35-
<q-tab-panel name="routes">
36-
<RouteDisplay />
31+
<q-tab-panel name="detail">
32+
<ComponentDetails />
3733
</q-tab-panel>
3834
</q-tab-panels>
3935
</q-card>

‎src/components/dashboard_items/GetStarted.vue

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<q-card id="dashboard-cards" class="sidebar-border" >
2+
<q-card id="dashboard-cards">
33
<q-tabs
44
v-model="tutorialPage"
55
class="bg-subaccent text-white"
@@ -107,7 +107,4 @@ export default {
107107
height: 100%;
108108
}
109109
110-
.sidebar-border {
111-
border-left: 3px solid black;
112-
}
113110
</style>

‎src/components/dashboard_items/HTMLQueue.vue

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

77
<template>
88
<section class="html-queue">
9-
<i v-if='!this.activeLayer.id' class="fas fa fa-chevron-up fa-md" @click="setParentLayer"></i>
10-
<span class='list-title' v-if='this.activeLayer.id !== ""'> Viewing Elements in '{{ depth }}' </span>
9+
<span class='list-title' v-if='this.activeLayer.id !== ""'>
10+
<i class="fas fa fa-chevron-up fa-md" @click="setParentLayer"></i>
11+
<!-- <button v-if='this.activeLayer.id' @click="upOneLayer">Up</button> -->
12+
&nbsp; &nbsp; Viewing Elements in '{{ depth }}'
13+
</span>
1114
<span class='list-title' v-else-if='!this.activeComponent'></span>
1215
<hr>
1316
<div
@@ -74,11 +77,11 @@ export default {
7477
}
7578
},
7679
depth: function () {
77-
let newTitle = ''
80+
let newTitle = '';
7881
this.activeLayer.lineage.forEach(el => {
7982
newTitle += ` > ${el}`
8083
})
81-
return newTitle
84+
return newTitle;
8285
}
8386
8487
},

‎src/components/dashboard_items/RouteDisplay.vue

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,18 +30,22 @@ Includes functionality to:
3030
</template>
3131
</q-input>
3232
<Routes></Routes>
33+
<UploadImage></UploadImage>
3334
</div>
35+
3436
</template>
3537

3638
<script>
3739
import Routes from "./Routes";
3840
import { mapState, mapActions } from "vuex";
41+
import UploadImage from "../home_sidebar_items/ComponentTab/UploadImage.vue";
3942
4043
export default {
4144
name: "RouteDisplay",
4245
components: {
4346
Routes,
44-
},
47+
UploadImage
48+
},
4549
computed: {
4650
...mapState(["routes", "componentMap"]),
4751
},

‎src/components/dashboard_items/Routes.vue

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,12 @@ Description:
88
<div>
99
<p>Click to view route</p>
1010
<a
11-
:class="route === activeRoute ? 'panel-block is-active' : 'panel-block'"
1211
v-for="route in Object.keys(routes)"
1312
:key="route"
1413
@click="selectRoute(route)"
1514
>
1615
<q-list bordered separator class="list-item">
17-
<q-item clickable v-ripple class="list-item">
16+
<q-item clickable v-ripple :class="route === activeRoute ? 'panel-block is-active list-item' : 'panel-block list-item'">
1817
<q-item-section>{{route}}</q-item-section>
1918
<span v-if="route !== 'HomeView'">
2019
<q-btn round flat icon="highlight_off" v-on:click.stop="deleteSelectedRoute(route)" />
@@ -47,6 +46,14 @@ export default {
4746
}
4847
</script>
4948

50-
<style scoped>
51-
49+
<style lang="scss" scoped>
50+
.panel-block {
51+
background: $secondary !important;
52+
color: $menutext !important;;
53+
}
54+
.is-active {
55+
background: $secondary !important;
56+
color: $menutext !important;
57+
border: 2px solid $menutext !important;
58+
}
5259
</style>

‎src/components/dashboard_items/Tree.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!--
22
Description:
33
Displays project tree in Dashboard
4-
Functionality includes: formating componentMap object to displaying in tree form
4+
Functionality includes: formatting componentMap object to displaying in tree form
55
-->
66

77
<template>

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
Functionality includes: if active component is selected, will switch view to editing mode. If not, it will be in create mode -->
33
<template>
44
<q-card id="store-cards">
5-
<UploadImage />
65
<CreateComponent v-if="activeComponent === ''"/>
76
<EditDeleteComponents v-if="activeComponent !== ''"/>
87
</q-card>

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -211,7 +211,6 @@ export default {
211211
}
212212
.q-expansion-item {
213213
margin-bottom: 10px;
214-
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 3px 6px 0 rgba(0, 0, 0, 0.13);
215214
}
216215
217216
</style>

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

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

77
<template>
8-
<div class="home-sidebar drawer-menu">
8+
<div id="uploadImgMenuItem">
99
<q-list>
10-
<q-expansion-item expand-separator label="Upload Mockup Image">
10+
<q-expansion-item expand-separator :label="this.activeRoute">
1111
<div class="upload">
1212
<q-btn
1313
class="upload-btn"
@@ -126,14 +126,18 @@ export default {
126126
</script>
127127

128128
<style lang="scss">
129-
.home-sidebar {
130-
margin: 1rem;
131-
justify-content: center;
132-
border-radius: 5px;
133-
padding: 0px;
134-
background: $subsecondary;
129+
#uploadImgMenuItem {
130+
display: flex;
131+
flex-direction: column;
132+
justify-content: flex-start;
133+
align-items: stretch;
134+
margin-top: 30px;
135135
}
136136
137+
.q-expansion-item {
138+
margin-bottom: 10px;
139+
}
140+
137141
.upload-btn {
138142
text-transform: capitalize;
139143
font-size: 12px;

0 commit comments

Comments
 (0)