|
2 | 2 | <v-app-bar |
3 | 3 | app |
4 | 4 | clipped-left |
5 | | - extension-height="46" |
| 5 | + :extension-height="46 * (isMobileViewport ? 3 : 2)" |
6 | 6 | :color="$vuetify.theme.currentTheme.appbar" |
7 | 7 | :height="$globals.HEADER_HEIGHT" |
8 | 8 | > |
|
117 | 117 | v-if="inLayout" |
118 | 118 | #extension |
119 | 119 | > |
120 | | - <app-btn |
121 | | - small |
122 | | - class="mx-2" |
123 | | - color="primary" |
124 | | - @click.stop="handleExitLayout" |
125 | | - > |
126 | | - {{ $t('app.general.btn.exit_layout') }} |
127 | | - </app-btn> |
128 | | - <app-btn |
129 | | - small |
130 | | - class="mx-2" |
131 | | - color="primary" |
132 | | - @click.stop="handleResetLayout" |
133 | | - > |
134 | | - {{ $t('app.general.btn.reset_layout') }} |
135 | | - </app-btn> |
136 | | - <template v-if="isDashboard"> |
137 | | - <v-divider |
138 | | - vertical |
139 | | - class="mx-2" |
140 | | - /> |
141 | | - <app-btn |
142 | | - small |
143 | | - class="mx-2" |
144 | | - color="primary" |
145 | | - @click.stop="handleSetDefaultLayout" |
146 | | - > |
147 | | - {{ $t('app.general.btn.set_default_layout') }} |
148 | | - </app-btn> |
149 | | - <app-btn |
150 | | - small |
151 | | - class="mx-2" |
152 | | - color="primary" |
153 | | - @click.stop="handleResetDefaultLayout" |
154 | | - > |
155 | | - {{ $t('app.general.btn.reset_default_layout') }} |
156 | | - </app-btn> |
157 | | - </template> |
| 120 | + <v-container> |
| 121 | + <div class="d-flex justify-center ma-2"> |
| 122 | + <v-chip |
| 123 | + v-if="currentUser" |
| 124 | + class="mx-1" |
| 125 | + label |
| 126 | + > |
| 127 | + <v-icon left> |
| 128 | + $account |
| 129 | + </v-icon> |
| 130 | + {{ currentUser.username }} |
| 131 | + </v-chip> |
| 132 | + <v-chip |
| 133 | + class="mx-1" |
| 134 | + label |
| 135 | + > |
| 136 | + <v-icon left> |
| 137 | + $screenshot |
| 138 | + </v-icon> |
| 139 | + {{ currentBreakpoint.toUpperCase() }} |
| 140 | + </v-chip> |
| 141 | + </div> |
| 142 | + <div class="d-flex justify-center ma-2"> |
| 143 | + <app-btn-group class="mx-1"> |
| 144 | + <v-tooltip bottom> |
| 145 | + <template #activator="{ on, attrs }"> |
| 146 | + <app-btn |
| 147 | + small |
| 148 | + v-bind="attrs" |
| 149 | + color="primary" |
| 150 | + @click.stop="handleExitLayout" |
| 151 | + v-on="on" |
| 152 | + > |
| 153 | + <v-icon left> |
| 154 | + $close |
| 155 | + </v-icon> |
| 156 | + {{ $t('app.general.btn.exit_layout') }} |
| 157 | + </app-btn> |
| 158 | + </template> |
| 159 | + <span>{{ $t('app.general.tooltip.exit_layout') }}</span> |
| 160 | + </v-tooltip> |
| 161 | + <v-tooltip bottom> |
| 162 | + <template #activator="{ on, attrs }"> |
| 163 | + <app-btn |
| 164 | + small |
| 165 | + v-bind="attrs" |
| 166 | + color="primary" |
| 167 | + @click.stop="handleResetLayout" |
| 168 | + v-on="on" |
| 169 | + > |
| 170 | + <v-icon left> |
| 171 | + $accountSettings |
| 172 | + </v-icon> |
| 173 | + {{ $t('app.general.btn.reset_layout') }} |
| 174 | + </app-btn> |
| 175 | + </template> |
| 176 | + <span>{{ $t('app.general.tooltip.reset_layout') }}</span> |
| 177 | + </v-tooltip> |
| 178 | + </app-btn-group> |
| 179 | + |
| 180 | + <app-btn-group |
| 181 | + v-if="isDashboard" |
| 182 | + class="mx-1" |
| 183 | + > |
| 184 | + <v-tooltip bottom> |
| 185 | + <template #activator="{ on, attrs }"> |
| 186 | + <app-btn |
| 187 | + small |
| 188 | + v-bind="attrs" |
| 189 | + color="primary" |
| 190 | + @click.stop="handleSetDefaultLayout" |
| 191 | + v-on="on" |
| 192 | + > |
| 193 | + <v-icon left> |
| 194 | + $saveDefault |
| 195 | + </v-icon> |
| 196 | + {{ $t('app.general.btn.set_default_layout') }} |
| 197 | + </app-btn> |
| 198 | + </template> |
| 199 | + <span>{{ $t('app.general.tooltip.set_default_layout') }}</span> |
| 200 | + </v-tooltip> |
| 201 | + |
| 202 | + <v-tooltip bottom> |
| 203 | + <template #activator="{ on, attrs }"> |
| 204 | + <app-btn |
| 205 | + small |
| 206 | + v-bind="attrs" |
| 207 | + color="primary" |
| 208 | + @click.stop="handleResetDefaultLayout" |
| 209 | + v-on="on" |
| 210 | + > |
| 211 | + <v-icon left> |
| 212 | + $resetDefaults |
| 213 | + </v-icon> |
| 214 | + {{ $t('app.general.btn.reset_default_layout') }} |
| 215 | + </app-btn> |
| 216 | + </template> |
| 217 | + <span>{{ $t('app.general.tooltip.reset_default_layout') }}</span> |
| 218 | + </v-tooltip> |
| 219 | + </app-btn-group> |
| 220 | + </div> |
| 221 | + </v-container> |
158 | 222 | </template> |
159 | 223 |
|
160 | 224 | <user-password-dialog |
@@ -185,6 +249,8 @@ import { SocketActions } from '@/api/socketActions' |
185 | 249 | import type { KlipperPrinterConfig, OutputPin } from '@/store/printer/types' |
186 | 250 | import type { Device } from '@/store/power/types' |
187 | 251 | import { encodeGcodeParamValue } from '@/util/gcode-helpers' |
| 252 | +import vuetify from '@/plugins/vuetify' |
| 253 | +import type { AppUser } from '@/store/auth/types' |
188 | 254 |
|
189 | 255 | @Component({ |
190 | 256 | components: { |
@@ -352,11 +418,22 @@ export default class AppBar extends Mixins(StateMixin, ServicesMixin, FilesMixin |
352 | 418 | }) |
353 | 419 | } |
354 | 420 |
|
| 421 | + get currentLayoutName () { |
| 422 | + return this.$store.getters['layout/getSpecificLayoutName'] |
| 423 | + } |
| 424 | +
|
| 425 | + get currentUser (): AppUser | null { |
| 426 | + return this.$store.state.auth.currentUser |
| 427 | + } |
| 428 | +
|
| 429 | + get currentBreakpoint () { |
| 430 | + return vuetify.framework.breakpoint.name |
| 431 | + } |
| 432 | +
|
355 | 433 | handleSetDefaultLayout () { |
356 | | - const currentLayoutName = this.$store.getters['layout/getSpecificLayoutName'] |
357 | 434 | this.$store.dispatch('layout/onLayoutChange', { |
358 | 435 | name: 'dashboard', |
359 | | - value: this.$store.getters['layout/getLayout'](currentLayoutName) |
| 436 | + value: this.$store.getters['layout/getLayout'](this.currentLayoutName) |
360 | 437 | }) |
361 | 438 | } |
362 | 439 |
|
|
0 commit comments