Skip to content

Commit cf12b6c

Browse files
sn163sn163
committed
updated right drawer
1 parent 02f3c0e commit cf12b6c

File tree

7 files changed

+181
-104
lines changed

7 files changed

+181
-104
lines changed

‎.eslintrc.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,9 @@ module.exports = {
3535
// allow paren-less arrow functions
3636
'arrow-parens': 'off',
3737
'one-var': 'off',
38-
38+
'semi': 'off',
39+
'quotes': 'off',
40+
'space-before-function-paren': 'off',
3941
'import/first': 'off',
4042
'import/named': 'error',
4143
'import/namespace': 'error',

‎src/components/ComponentDisplay.vue

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,13 @@ Description:
55
-->
66

77
<template>
8+
<!-- the background canvas grid -->
89
<div
910
class="component-display grid-bg"
1011
:style="mockBg"
1112
v-on:click="handleClick"
1213
>
14+
<!-- This is the actual component box -->
1315
<VueDraggableResizable
1416
class-name="component-box"
1517
v-for="componentData in activeRouteArray"

‎src/components/dashboard_items/CodeSnippet.vue

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,7 @@ Description:
1616
v-model="code"
1717
language="js"
1818
:line-numbers="lineNumbers"
19-
class="code-editor"
20-
:style="{ height: `${height}vh` }"
19+
class="code-editor fill"
2120
:readonly="true"
2221
/>
2322
</div>

‎src/components/dashboard_items/ComponentDetails.vue

Lines changed: 24 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -26,29 +26,35 @@ Description:
2626
</q-tabs>
2727
<q-tab-panels v-model="tab" animated class="html-bg text-white">
2828
<q-tab-panel name="code">
29-
<CodeSnippet/>
29+
<CodeSnippet />
3030
</q-tab-panel>
31-
<q-tab-panel name="html">
31+
<q-tab-panel name="html">
3232
<HTMLQueue />
3333
</q-tab-panel>
3434
<q-tab-panel name="state">
35-
<p v-if='!this.activeComponentObj.state.length'>No state in component</p>
35+
<p v-if="!this.activeComponentObj.state.length">
36+
No state in component
37+
</p>
3638
<ul id="stateList">
3739
<li v-for="comp in compObj.state" :key="comp">
3840
{{ comp }}
3941
</li>
4042
</ul>
4143
</q-tab-panel>
4244
<q-tab-panel name="actions">
43-
<p v-if='!this.activeComponentObj.actions.length'>No actions in component</p>
45+
<p v-if="!this.activeComponentObj.actions.length">
46+
No actions in component
47+
</p>
4448
<ul id="actionList">
4549
<li v-for="comp in compObj.actions" :key="comp">
4650
{{ comp }}
4751
</li>
4852
</ul>
4953
</q-tab-panel>
5054
<q-tab-panel name="props">
51-
<p v-if='!this.activeComponentObj.props.length'>No props in component</p>
55+
<p v-if="!this.activeComponentObj.props.length">
56+
No props in component
57+
</p>
5258
<ul id="propsList">
5359
<li v-for="comp in compObj.props" :key="comp">
5460
{{ comp }}
@@ -62,30 +68,30 @@ Description:
6268
</template>
6369

6470
<script>
65-
import { mapState } from 'vuex'
66-
import HTMLQueue from './HTMLQueue'
67-
import CodeSnippet from './CodeSnippet'
71+
import { mapState } from "vuex";
72+
import HTMLQueue from "./HTMLQueue";
73+
import CodeSnippet from "./CodeSnippet";
6874
6975
export default {
70-
name: 'ComponentDetails',
76+
name: "ComponentDetails",
7177
components: {
7278
HTMLQueue,
7379
CodeSnippet
7480
},
7581
computed: {
76-
...mapState(['activeComponentObj']),
82+
...mapState(["activeComponentObj"]),
7783
compObj: {
78-
get () {
79-
return this.activeComponentObj
84+
get() {
85+
return this.activeComponentObj;
8086
}
8187
}
8288
},
83-
data () {
89+
data() {
8490
return {
85-
tab: 'code'
86-
}
91+
tab: "code"
92+
};
8793
}
88-
}
94+
};
8995
</script>
9096

9197
<style lang="stylus" scoped>
@@ -125,13 +131,13 @@ i
125131
text-transform capitalize
126132
127133
.q-tab-panel
128-
height 80%
134+
height 100%
129135
// matchs the code editor bg
130136
background $subprimary
131137
132138
// changes the length of the tab panels
133139
.q-tab-panels
134-
height 80%
140+
height 100%
135141
padding 0 !important
136142
137143
.q-tabs

‎src/components/dashboard_items/Dashboard.vue

Lines changed: 69 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,11 @@ Description:
55
As of now, no default tab selected when not selecting anything, but might change to Project Tree in the future if we want
66
-->
77

8-
<template>
9-
<q-footer reveal class="gradient text-white" :style="{ height: `${height}vh` }" v-on:click="handleHtmlDeselection">
10-
<q-toolbar class="toolbar-background">
11-
<q-btn flat color="subaccent" round @click="openBottomDrawer">
12-
<i :class="[open ? down : up]" id="btn"></i>
13-
</q-btn>
14-
<q-toolbar-title>Dashboard</q-toolbar-title>
15-
</q-toolbar>
16-
<q-card id="dashboard-cards">
8+
<template>
9+
10+
<div class="home-sidebar drawer-menu">
11+
12+
<q-card id="dashboard-cards" style="fill">
1713
<q-tabs
1814
v-model="tab"
1915
dense
@@ -22,30 +18,31 @@ Description:
2218
indicator-color="secondary"
2319
align="left"
2420
>
25-
<q-tab name="detail" label="Component Details" id="label-text" />
26-
<q-tab name="tree" label="Project Tree" id="label-text" />
27-
<q-tab name="store" label="Vuex Store" id="label-text" />
21+
<q-tab name="detail" id="label-text"><i class="fas fa-code"></i></q-tab>
22+
<q-tab name="tree" id="label-text"><i class="fas fa-code-branch fa-flip-vertical" /></q-tab>
23+
<q-tab name="store" id="label-text" ><i class="fas fa-store-alt"></i></q-tab>
2824
</q-tabs>
29-
<q-tab-panels v-model="tab" animated class="html-bg text-white" >
25+
<q-tab-panels v-model="tab" animated class="html-bg text-white ">
3026
<q-tab-panel name="detail">
31-
<ComponentDetails/>
27+
<ComponentDetails />
3228
</q-tab-panel>
33-
<q-tab-panel name="tree">
29+
<q-tab-panel name="tree" >
3430
<Tree />
3531
</q-tab-panel>
3632
<q-tab-panel name="store">
37-
<VuexStore/>
33+
<VuexStore />
3834
</q-tab-panel>
3935
</q-tab-panels>
4036
</q-card>
41-
</q-footer>
37+
</div>
38+
4239
</template>
4340

4441
<script>
45-
import { mapState, mapActions } from 'vuex'
46-
import Tree from './Tree'
47-
import VuexStore from './DashboardVuexStore.vue'
48-
import ComponentDetails from './ComponentDetails'
42+
import { mapState, mapActions } from "vuex";
43+
import Tree from "./Tree";
44+
import VuexStore from "./DashboardVuexStore.vue";
45+
import ComponentDetails from "./ComponentDetails";
4946
5047
export default {
5148
components: {
@@ -54,34 +51,39 @@ export default {
5451
ComponentDetails
5552
},
5653
computed: {
57-
...mapState(['activeComponent', 'componentNameInputValue', 'selectedElementList', 'activeHTML'])
54+
...mapState([
55+
"activeComponent",
56+
"componentNameInputValue",
57+
"selectedElementList",
58+
"activeHTML"
59+
])
5860
},
59-
data () {
61+
data() {
6062
return {
61-
tab: 'code',
63+
tab: "code",
6264
open: true,
6365
height: 40,
64-
up: 'fas fa-chevron-up',
65-
down: 'fas fa-chevron-down'
66-
}
66+
up: "fas fa-chevron-up",
67+
down: "fas fa-chevron-down"
68+
};
6769
},
6870
methods: {
69-
...mapActions(['setActiveHTML']),
71+
...mapActions(["setActiveHTML"]),
7072
// toggles open/close action of dashboard drawer
71-
openBottomDrawer () {
73+
openBottomDrawer() {
7274
// 15in mb pro - 1027 px 3.75
7375
// big screens 2.5
7476
let minHeight =
75-
window.outerHeight < 900 ? 4.5 : window.outerHeight < 1035 ? 3.75 : 2.5
76-
this.height === 40 ? (this.height = minHeight) : (this.height = 40)
77-
this.open === true ? (this.open = false) : (this.open = true)
77+
window.outerHeight < 900 ? 4.5 : window.outerHeight < 1035 ? 3.75 : 2.5;
78+
this.height === 40 ? (this.height = minHeight) : (this.height = 40);
79+
this.open === true ? (this.open = false) : (this.open = true);
7880
},
7981
// function that will handle deselection from active HTML element
80-
handleHtmlDeselection (event) {
82+
handleHtmlDeselection(event) {
8183
// console.log('target html element: ', event.target)
82-
if (event.target.className !== 'list-group-item') {
84+
if (event.target.className !== "list-group-item") {
8385
// if html element classname is not equal to this string that all html elements have
84-
if (!(this.activeHTML === '')) this.setActiveHTML(['']) // if activeHtml is not already deselected, do so
86+
if (!(this.activeHTML === "")) this.setActiveHTML([""]); // if activeHtml is not already deselected, do so
8587
}
8688
}
8789
},
@@ -97,45 +99,57 @@ export default {
9799
// },
98100
// otherwise toggle dashboard to 'Project Tree' tab if no component is selected or the
99101
// user is in the process of creating a component
100-
componentNameInputValue: function () {
101-
if (this.componentNameInputValue !== '' && this.activeComponent === '') {
102-
this.tab = 'tree'
102+
componentNameInputValue: function() {
103+
if (this.componentNameInputValue !== "" && this.activeComponent === "") {
104+
this.tab = "tree";
103105
}
104106
},
105107
// // toggles dashboard to "Project Tree" tab if:
106108
// // no component is selected and either:
107109
// // elements are being added to component or name is being typed
108-
selectedElementList: function () {
109-
if (this.activeComponent === '' && this.selectedElementList.length !== 0) {
110-
this.tab = 'tree'
110+
selectedElementList: function() {
111+
if (
112+
this.activeComponent === "" &&
113+
this.selectedElementList.length !== 0
114+
) {
115+
this.tab = "tree";
111116
}
112117
}
113118
}
114-
}
119+
};
115120
</script>
116121

117122
<style lang="stylus" scoped>
118123
i {
119124
font-size: 11px;
120125
}
121126
127+
.home-sidebar {
128+
margin: 1rem;
129+
justify-content: center;
130+
border-radius: 5px;
131+
padding: 0px;
132+
background: $subsecondary;
133+
}
134+
135+
122136
.q-btn {
123137
font-size: 8px;
124138
margin: 5px;
125139
}
126140
127141
// styling for the entire dashboard
128-
.q-footer {
129-
transition-timing-function: ease-in;
130-
transition: 0.2s;
131-
background: $subsecondary;
132-
}
142+
// .q-footer {
143+
// transition-timing-function: ease-in;
144+
// transition: 0.2s;
145+
// background: $subsecondary;
146+
// }
133147
134-
// changes the dashboard toolbar height
135-
.q-toolbar {
136-
min-height: 25px !important;
137-
padding: 0 6px !important;
138-
}
148+
// // changes the dashboard toolbar height
149+
// .q-toolbar {
150+
// min-height: 25px !important;
151+
// padding: 0 6px !important;
152+
// }
139153
140154
.q-toolbar__title {
141155
font-size: 14px;
@@ -159,12 +173,13 @@ i {
159173
160174
.q-tab-panel {
161175
// matchs the code editor bg
176+
162177
background: $subprimary;
163178
}
164179
165180
// changes the length of the tab panels
166181
.q-tab-panels {
167-
height: 90%;
182+
height: 80vh;
168183
padding: 0px !important;
169184
}
170185
@@ -177,7 +192,7 @@ i {
177192
}
178193
179194
#dashboard-cards {
180-
height: 100%;
195+
height: 80%;
181196
border-radius: 0px;
182197
background: #737578;
183198
}

‎src/components/dashboard_items/DashboardVuexStore.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -99,13 +99,13 @@ i
9999
text-transform capitalize
100100
101101
.q-tab-panel
102-
height 80%
102+
height 100%
103103
// matchs the code editor bg
104104
background $subprimary
105105
106106
// changes the length of the tab panels
107107
.q-tab-panels
108-
height 80%
108+
height 100%
109109
padding 0 !important
110110
111111
.q-tabs

0 commit comments

Comments
 (0)