Skip to content

Commit c223cc5

Browse files
bebezzegbebezzeg
authored
Add selection colors to toolbar menu items (#1309)
1 parent 0e14a0c commit c223cc5

File tree

2 files changed

+102
-76
lines changed

2 files changed

+102
-76
lines changed

‎src/components/ZCLToolbar.vue‎

Lines changed: 95 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -32,10 +32,10 @@
3232
v-if="showDebugNavItems"
3333
id="generate"
3434
color="grey"
35+
class="navmenu-item"
3536
flat
3637
push
3738
no-caps
38-
class="cursor-pointer"
3939
@click="generateIntoDirectory(generationDirectory)"
4040
>
4141
<div class="text-center">
@@ -48,7 +48,6 @@
4848
color="grey"
4949
flat
5050
no-caps
51-
class="cursor-pointer"
5251
@click="saveChanges"
5352
v-if="
5453
this.$store.state.zap.saveButtonVisible && this.$store.state.zap.isDirty
@@ -75,62 +74,69 @@
7574
<div>Documentation</div>
7675
</div>
7776
</q-btn>
78-
<q-btn
79-
id="global_options"
80-
color="grey"
81-
flat
82-
no-caps
83-
class="cursor-pointer"
84-
to="/options"
85-
>
86-
<div class="text-center">
87-
<q-icon name="o_tune" />
88-
<div>Options</div>
89-
</div>
90-
</q-btn>
77+
<router-link v-slot="{ isActive, navigate }" to="/options">
78+
<q-btn
79+
id="global_options"
80+
class="navmenu-item"
81+
:class="{ 'navmenu-item--active': isActive }"
82+
color="grey"
83+
flat
84+
no-caps
85+
@click="navigate"
86+
>
87+
<div class="text-center">
88+
<q-icon name="o_tune" />
89+
<div>Options</div>
90+
</div>
91+
</q-btn>
92+
</router-link>
9193

92-
<q-btn
93-
class="cursor-pointer q-py-sm v-step-16"
94-
flat
95-
no-caps
96-
color="grey"
97-
to="/extensions"
98-
>
99-
<div class="text-center">
100-
<q-icon name="o_extension" />
101-
<div>Extensions</div>
102-
</div>
103-
</q-btn>
104-
<q-btn
105-
class="cursor-pointer"
106-
flat
107-
no-caps
108-
to="/notifications"
109-
id="Notifications"
110-
color="grey"
111-
>
112-
<div class="text-center">
113-
<q-icon name="o_assignment_late" />
114-
<div>
115-
Notifications
116-
<q-badge
117-
style="top: 5px; right: 5px"
118-
color="red"
119-
floating
120-
v-if="this.$store.state.zap.notificationCount > 0"
121-
>
122-
{{ this.$store.state.zap.notificationCount }}
123-
</q-badge>
94+
<router-link v-slot="{ isActive, navigate }" to="/extensions">
95+
<q-btn
96+
class="navmenu-item q-py-sm v-step-16"
97+
:class="{ 'navmenu-item--active': isActive }"
98+
flat
99+
no-caps
100+
@click="navigate"
101+
>
102+
<div class="text-center">
103+
<q-icon name="o_extension" />
104+
<div>Extensions</div>
124105
</div>
125-
</div>
126-
</q-btn>
106+
</q-btn>
107+
</router-link>
108+
<router-link v-slot="{ isActive, navigate }" to="/notifications">
109+
<q-btn
110+
class="navmenu-item"
111+
:class="{ 'navmenu-item--active': isActive }"
112+
flat
113+
no-caps
114+
id="Notifications"
115+
@click="navigate"
116+
>
117+
<div class="text-center">
118+
<q-icon name="o_assignment_late" />
119+
<div>
120+
Notifications
121+
<q-badge
122+
style="top: 5px; right: 5px"
123+
color="red"
124+
floating
125+
v-if="this.$store.state.zap.notificationCount > 0"
126+
>
127+
{{ this.$store.state.zap.notificationCount }}
128+
</q-badge>
129+
</div>
130+
</div>
131+
</q-btn>
132+
</router-link>
127133
<q-btn
128134
v-if="showDebugNavItems"
129-
class="cursor-pointer"
135+
class="navmenu-item"
136+
:class="{ 'navmenu-item--active': showPreviewTab }"
130137
flat
131138
no-caps
132139
id="Preview"
133-
color="grey"
134140
@click="
135141
() => {
136142
togglePreviewTab()
@@ -147,8 +153,8 @@
147153
flat
148154
push
149155
no-caps
150-
color="grey"
151-
class="cursor-pointer"
156+
class="navmenu-item"
157+
:class="{ 'navmenu-item--active': isTutorialRunning }"
152158
@click="startTour"
153159
data-cy="btn-tutorial"
154160
>
@@ -157,20 +163,22 @@
157163
<div>Tutorial</div>
158164
</div>
159165
</q-btn>
160-
<q-btn
161-
v-if="showDebugNavItems"
162-
class="cursor-pointer"
163-
flat
164-
no-caps
165-
to="/preferences/user"
166-
id="Settings"
167-
color="grey"
168-
>
169-
<div class="text-center">
170-
<q-icon name="o_settings" />
171-
<div>Settings</div>
172-
</div>
173-
</q-btn>
166+
<router-link v-slot="{ isActive, navigate }" to="/preferences/user">
167+
<q-btn
168+
v-if="showDebugNavItems"
169+
class="navmenu-item"
170+
:class="{ 'navmenu-item--active': isActive }"
171+
flat
172+
no-caps
173+
id="Settings"
174+
@click="navigate"
175+
>
176+
<div class="text-center">
177+
<q-icon name="o_settings" />
178+
<div>Settings</div>
179+
</div>
180+
</q-btn>
181+
</router-link>
174182
</q-toolbar>
175183
</template>
176184
<script>
@@ -195,6 +203,12 @@ export default {
195203
].length > 0
196204
)
197205
},
206+
isTutorialRunning: {
207+
get() {
208+
console.log('firebrava')
209+
return this.$store.state.zap.isTutorialRunning
210+
},
211+
},
198212
showPreviewTab: {
199213
get() {
200214
return this.$store.state.zap.showPreviewTab
@@ -342,6 +356,20 @@ export default {
342356
.logo-margin {
343357
margin-left: 75px;
344358
}
359+
.navmenu-item {
360+
font-size: 10px;
361+
padding: 15px 20px;
362+
font-weight: 400;
363+
color: $grey !important;
364+
}
365+
366+
.navmenu-item:hover {
367+
color: $primary !important;
368+
}
369+
.navmenu-item--active {
370+
color: $primary !important;
371+
background-color: $grey-4;
372+
}
345373
346374
.q-btn {
347375
font-size: 10px;
@@ -353,9 +381,6 @@ export default {
353381
&.disabled {
354382
opacity: 0.3 !important;
355383
}
356-
&.q-btn--active {
357-
color: var(--q-primary) !important;
358-
}
359384
}
360385
.slide-up-enter-active,
361386
.slide-up-leave-active {

‎src/tutorials/ZclTour.vue‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,7 @@ export default {
9191
},
9292
methods: {
9393
startTour() {
94+
this.$store.commit('zap/toggleTutorial', true)
9495
this.$refs['zcl-tour'].resetTour()
9596
},
9697
// This function will create a endpoint for tutorial
@@ -203,16 +204,16 @@ export default {
203204
this.tourEndpointId ? this.handleDeletionDialog() : ''
204205
this.$store.commit('zap/toggleEndpointModal', false)
205206
} else {
206-
this.$router
207-
.push('/')
208-
.then(() => {})
209-
.then(() => {
210-
this.tourEndpointId ? this.handleDeletionDialog() : ''
211-
})
207+
this.$router.push('/').then(() => {
208+
this.tourEndpointId ? this.handleDeletionDialog() : ''
209+
this.$store.commit('zap/toggleTutorial', false)
210+
this.$store.commit('zap/toggleEndpointModal', false)
211+
})
212212
}
213213
},
214214
// This function will set isTutorialRunning to true
215215
startTutorialAndCloseTheEndpointModal() {
216+
// Although its set to be called before the 0th step, its only getting called when coming back from the next step
216217
return new Promise((resolve) => {
217218
this.$store.commit('zap/toggleEndpointModal', false)
218219
this.$store.commit('zap/toggleTutorial', true)

0 commit comments

Comments
 (0)