Skip to content

Commit 6be5061

Browse files
lamerson28lamerson28
committed
Adding ComponentDetails before changing crlf to input
1 parent 51963fd commit 6be5061

File tree

5 files changed

+331
-187
lines changed

5 files changed

+331
-187
lines changed

‎amplify/.config/.project-config.json.icloud‎

169 Bytes
Binary file not shown.

‎amplify/backend/.backend-config.json.icloud‎

169 Bytes
Binary file not shown.

‎public/icons/.favicon-16x16.png.icloud‎

167 Bytes
Binary file not shown.

‎src/components/dashboard_items/ComponentDetails.vue‎

Lines changed: 187 additions & 187 deletions
Original file line numberDiff line numberDiff line change
@@ -1,187 +1,187 @@
1-
<!--
2-
Description:
3-
Located in the Dashboard
4-
Contains the Code Snippet, HTMLQueue Components, and the Component state, actions, and props as well
5-
Functionality includes: Contains the Code Snippet and HTMLQueue Components,
6-
as well as tabs to show the Component state, actions, and props
7-
8-
-->
9-
10-
<template>
11-
<div class="inner-div">
12-
<q-card id="store-cards" v-if="this.activeComponentObj">
13-
<q-tabs
14-
v-model="tab"
15-
dense
16-
class="bg-subaccent text-white"
17-
active-color="secondary"
18-
indicator-color="secondary"
19-
align="left"
20-
>
21-
<q-tab name="code" label="Code Snippet" id="label-text" />
22-
<q-tab name="html" label="HTML Elements" id="label-text" />
23-
<q-tab name="state" label="Component State" id="label-text" />
24-
<q-tab name="actions" label="Component Actions" id="label-text" />
25-
<q-tab name="props" label="Component Props" id="label-text" />
26-
</q-tabs>
27-
<q-tab-panels v-model="tab" animated class="html-bg text-white">
28-
<q-tab-panel name="code">
29-
<CodeSnippet />
30-
</q-tab-panel>
31-
<q-tab-panel name="html">
32-
<HTMLQueue />
33-
</q-tab-panel>
34-
<q-tab-panel name="state">
35-
<p v-if="!this.activeComponentObj.state.length">
36-
No state in component
37-
</p>
38-
<ul id="stateList">
39-
<li v-for="comp in compObj.state" :key="comp">
40-
{{ comp }}
41-
</li>
42-
</ul>
43-
</q-tab-panel>
44-
<q-tab-panel name="actions">
45-
<p v-if="!this.activeComponentObj.actions.length">
46-
No actions in component
47-
</p>
48-
<ul id="actionList">
49-
<li v-for="comp in compObj.actions" :key="comp">
50-
{{ comp }}
51-
</li>
52-
</ul>
53-
</q-tab-panel>
54-
<q-tab-panel name="props">
55-
<p v-if="!this.activeComponentObj.props.length">
56-
No props in component
57-
</p>
58-
<ul id="propsList">
59-
<li v-for="comp in compObj.props" :key="comp">
60-
{{ comp }}
61-
</li>
62-
</ul>
63-
</q-tab-panel>
64-
</q-tab-panels>
65-
</q-card>
66-
<q-card id="blank-card" v-else>Select a component to show details</q-card>
67-
</div>
68-
</template>
69-
70-
<script>
71-
import { mapState } from "vuex";
72-
import HTMLQueue from "./HTMLQueue";
73-
import CodeSnippet from "./CodeSnippet";
74-
75-
export default {
76-
name: "ComponentDetails",
77-
components: {
78-
HTMLQueue,
79-
CodeSnippet
80-
},
81-
computed: {
82-
...mapState(["activeComponentObj"]),
83-
compObj: {
84-
get() {
85-
return this.activeComponentObj;
86-
}
87-
}
88-
},
89-
data() {
90-
return {
91-
tab: "code"
92-
};
93-
}
94-
};
95-
</script>
96-
97-
<style lang="scss" scoped>
98-
i {
99-
font-size: 11px;
100-
}
101-
102-
103-
.q-btn {
104-
font-size: 8px;
105-
margin: 5px;
106-
}
107-
108-
109-
// styling for the entire dashboard
110-
.q-footer {
111-
transition-timing-function: ease-in;
112-
transition: .2s;
113-
background: $subsecondary;
114-
}
115-
116-
// changes the dashboard toolbar height
117-
.q-toolbar {
118-
min-height: 25px !important;
119-
padding: 0 6px !important;
120-
}
121-
122-
.q-toolbar__title {
123-
font-size: 14px;
124-
text-transform: uppercase;
125-
padding: 5px;
126-
}
127-
128-
// this class selector does not change anything
129-
.q-tab__label {
130-
// font-size not changing
131-
font-size: 10px !important;
132-
line-height: 1.718em;
133-
font-weight: 500;
134-
}
135-
136-
// changes the tab label styling
137-
#label-text {
138-
font-size: 4px !important;
139-
text-transform: capitalize;
140-
}
141-
142-
.q-tab-panel {
143-
height: 100%;
144-
// matchs the code editor bg
145-
background: $subprimary;
146-
}
147-
148-
// changes the length of the tab panels
149-
.q-tab-panels {
150-
height: 100%;
151-
padding: 0 !important;
152-
}
153-
154-
.q-tabs {
155-
background: #11120F;
156-
}
157-
158-
.toolbar-background {
159-
background: black;
160-
}
161-
162-
#store-cards {
163-
height: 100%;
164-
border-radius: 0;
165-
background: #737578;
166-
}
167-
168-
#blank-card {
169-
height: 100%;
170-
border-radius: 0;
171-
background-color: #202122;
172-
}
173-
174-
.html-bg {
175-
// give html background color of grey
176-
background-color: #202122;
177-
}
178-
179-
180-
.inner-div {
181-
display: flex;
182-
flex-direction: column;
183-
justify-content: flex-start;
184-
align-content: stretch;
185-
height: 100%;
186-
}
187-
</style>
1+
<!--
2+
Description:
3+
Located in the Dashboard
4+
Contains the Code Snippet, HTMLQueue Components, and the Component state, actions, and props as well
5+
Functionality includes: Contains the Code Snippet and HTMLQueue Components,
6+
as well as tabs to show the Component state, actions, and props
7+
8+
-->
9+
10+
<template>
11+
<div class="inner-div">
12+
<q-card id="store-cards" v-if="this.activeComponentObj">
13+
<q-tabs
14+
v-model="tab"
15+
dense
16+
class="bg-subaccent text-white"
17+
active-color="secondary"
18+
indicator-color="secondary"
19+
align="left"
20+
>
21+
<q-tab name="code" label="Code Snippet" id="label-text" />
22+
<q-tab name="html" label="HTML Elements" id="label-text" />
23+
<q-tab name="state" label="Component State" id="label-text" />
24+
<q-tab name="actions" label="Component Actions" id="label-text" />
25+
<q-tab name="props" label="Component Props" id="label-text" />
26+
</q-tabs>
27+
<q-tab-panels v-model="tab" animated class="html-bg text-white">
28+
<q-tab-panel name="code">
29+
<CodeSnippet />
30+
</q-tab-panel>
31+
<q-tab-panel name="html">
32+
<HTMLQueue />
33+
</q-tab-panel>
34+
<q-tab-panel name="state">
35+
<p v-if="!this.activeComponentObj.state.length">
36+
No state in component
37+
</p>
38+
<ul id="stateList">
39+
<li v-for="comp in compObj.state" :key="comp">
40+
{{ comp }}
41+
</li>
42+
</ul>
43+
</q-tab-panel>
44+
<q-tab-panel name="actions">
45+
<p v-if="!this.activeComponentObj.actions.length">
46+
No actions in component
47+
</p>
48+
<ul id="actionList">
49+
<li v-for="comp in compObj.actions" :key="comp">
50+
{{ comp }}
51+
</li>
52+
</ul>
53+
</q-tab-panel>
54+
<q-tab-panel name="props">
55+
<p v-if="!this.activeComponentObj.props.length">
56+
No props in component
57+
</p>
58+
<ul id="propsList">
59+
<li v-for="comp in compObj.props" :key="comp">
60+
{{ comp }}
61+
</li>
62+
</ul>
63+
</q-tab-panel>
64+
</q-tab-panels>
65+
</q-card>
66+
<q-card id="blank-card" v-else>Select a component to show details</q-card>
67+
</div>
68+
</template>
69+
70+
<script>
71+
import { mapState } from "vuex";
72+
import HTMLQueue from "./HTMLQueue";
73+
import CodeSnippet from "./CodeSnippet";
74+
75+
export default {
76+
name: "ComponentDetails",
77+
components: {
78+
HTMLQueue,
79+
CodeSnippet
80+
},
81+
computed: {
82+
...mapState(["activeComponentObj"]),
83+
compObj: {
84+
get() {
85+
return this.activeComponentObj;
86+
}
87+
}
88+
},
89+
data() {
90+
return {
91+
tab: "code"
92+
};
93+
}
94+
};
95+
</script>
96+
97+
<style lang="scss" scoped>
98+
i {
99+
font-size: 11px;
100+
}
101+
102+
103+
.q-btn {
104+
font-size: 8px;
105+
margin: 5px;
106+
}
107+
108+
109+
// styling for the entire dashboard
110+
.q-footer {
111+
transition-timing-function: ease-in;
112+
transition: .2s;
113+
background: $subsecondary;
114+
}
115+
116+
// changes the dashboard toolbar height
117+
.q-toolbar {
118+
min-height: 25px !important;
119+
padding: 0 6px !important;
120+
}
121+
122+
.q-toolbar__title {
123+
font-size: 14px;
124+
text-transform: uppercase;
125+
padding: 5px;
126+
}
127+
128+
// this class selector does not change anything
129+
.q-tab__label {
130+
// font-size not changing
131+
font-size: 10px !important;
132+
line-height: 1.718em;
133+
font-weight: 500;
134+
}
135+
136+
// changes the tab label styling
137+
#label-text {
138+
font-size: 4px !important;
139+
text-transform: capitalize;
140+
}
141+
142+
.q-tab-panel {
143+
height: 100%;
144+
// matchs the code editor bg
145+
background: $subprimary;
146+
}
147+
148+
// changes the length of the tab panels
149+
.q-tab-panels {
150+
height: 100%;
151+
padding: 0 !important;
152+
}
153+
154+
.q-tabs {
155+
background: #11120F;
156+
}
157+
158+
.toolbar-background {
159+
background: black;
160+
}
161+
162+
#store-cards {
163+
height: 100%;
164+
border-radius: 0;
165+
background: #737578;
166+
}
167+
168+
#blank-card {
169+
height: 100%;
170+
border-radius: 0;
171+
background-color: #202122;
172+
}
173+
174+
.html-bg {
175+
// give html background color of grey
176+
background-color: #202122;
177+
}
178+
179+
180+
.inner-div {
181+
display: flex;
182+
flex-direction: column;
183+
justify-content: flex-start;
184+
align-content: stretch;
185+
height: 100%;
186+
}
187+
</style>

0 commit comments

Comments
 (0)