mirror of
https://bitbucket.org/studiotem/jandl-taskmanager-app.git
synced 2026-10-21 14:29:34 +00:00
[Header] Refactoring
This commit is contained in:
Matej Glasnák committed
1 parent
e881020f86
commit
7a336d5d1f
2 files changed
+60
-118
No files matched your search
@@ -1,98 +1,59 @@
|
||||
<template>
|
||||
<v-app-bar class="header">
|
||||
<v-app-bar-nav-icon autoHide @click="eventBus.emit('toggle-menu')" class="menu-icon"></v-app-bar-nav-icon>
|
||||
<v-app-bar-nav-icon @click="eventBus.emit('toggle-menu')" class="menu-icon"></v-app-bar-nav-icon>
|
||||
|
||||
<div class="d-flex align-center justify-space-between w-100 responsive-position">
|
||||
<h1 class="mr-md-4 route-name mb-5">{{ $route.name }}</h1>
|
||||
<div class="d-flex justify-space-between align-center w-100">
|
||||
<h1>{{ $route.name }}</h1>
|
||||
|
||||
<div class="d-flex justify-center align-center">
|
||||
<div class="d-flex justify-center align-center pos-col">
|
||||
<img
|
||||
class="search-icon mx-3"
|
||||
:src="
|
||||
require('@/plugins/app/_layout/app/_img/search-icon.svg')
|
||||
"
|
||||
alt="search-icon"
|
||||
/>
|
||||
<input
|
||||
class="search-input mx-2"
|
||||
type="text"
|
||||
placeholder="Vyhľadávanie"
|
||||
/>
|
||||
<v-menu open-on-hover>
|
||||
<div class="d-flex justify-end align-center w-100">
|
||||
<img class="search-icon mx-3" :src="require('@/plugins/app/_layout/app/_img/search-icon.svg')" alt="search-icon" />
|
||||
<input class="search-input mx-2" type="text" placeholder="Vyhľadávanie" />
|
||||
|
||||
<v-menu>
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn v-bind="props" class="create-btn"
|
||||
>+<span class="responsive-btn"
|
||||
>Vytvoriť</span
|
||||
></v-btn
|
||||
>
|
||||
<v-btn v-bind="props" class="button mr-5">+<span class="responsive-btn">Vytvoriť</span></v-btn>
|
||||
</template>
|
||||
|
||||
<v-list class="text-left">
|
||||
<v-list-item class="dropdown-hover">
|
||||
MASTER TASK
|
||||
</v-list-item>
|
||||
<v-list-item class="dropdown-hover">
|
||||
SUB TASK
|
||||
</v-list-item>
|
||||
<v-list-item class="dropdown-hover" @click.stop="dialog=true" >
|
||||
TÍM
|
||||
<A-team-modal :visible="dialog" @close="dialog=false" />
|
||||
</v-list-item>
|
||||
<v-list-item class="dropdown-hover">
|
||||
BLOKER
|
||||
</v-list-item>
|
||||
<v-list>
|
||||
<v-list-item class="cursor-pointer hover-background">MASTER TASK</v-list-item>
|
||||
<v-list-item class="cursor-pointer hover-background">SUB TASK</v-list-item>
|
||||
<v-list-item class="cursor-pointer hover-background" @click="createTeamDialog = true">TÍM</v-list-item>
|
||||
<v-list-item class="cursor-pointer hover-background">BLOKER</v-list-item>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
<div
|
||||
class="d-flex justify-center align-center employee-section mx-1"
|
||||
>
|
||||
<p v-if="user" class="employee-select">
|
||||
{{
|
||||
user.user.name.charAt(0) +
|
||||
user.user.surname.charAt(0)
|
||||
}}
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<v-menu open-on-hover>
|
||||
|
||||
<v-menu v-if="user">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn
|
||||
class="text-transform"
|
||||
v-if="user"
|
||||
v-bind="props"
|
||||
>
|
||||
{{
|
||||
`${user.user.name} ${user.user.surname}`
|
||||
}}
|
||||
<v-icon
|
||||
class="pl-5"
|
||||
icon="mdi-chevron-down"
|
||||
size="x-small"
|
||||
></v-icon>
|
||||
<v-btn class="menu-dropdown" v-bind="props">
|
||||
<div class="d-flex justify-between align-center">
|
||||
<p class="employee-select-avatar d-flex justify-center align-center">
|
||||
{{ user.user.name.charAt(0) + user.user.surname.charAt(0) }}
|
||||
</p>
|
||||
|
||||
<div>
|
||||
<span class="employee-name ml-4">{{ `${user.user.name} ${user.user.surname}` }}</span>
|
||||
<v-icon class="ml-3" icon="mdi-chevron-down" size="x-small"></v-icon>
|
||||
</div>
|
||||
</div>
|
||||
</v-btn>
|
||||
</template>
|
||||
|
||||
<v-list class="text-center">
|
||||
<v-list-item class="dropdown-hover">
|
||||
Working hours
|
||||
</v-list-item>
|
||||
<v-list-item class="cursor-pointer hover-background">Working hours </v-list-item>
|
||||
<v-list-item>
|
||||
<v-btn class="logout-btn"
|
||||
>Odhlásiť sa</v-btn
|
||||
>
|
||||
<v-btn class="button">Odhlásiť sa</v-btn>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<A-team-modal :visible="createTeamDialog" @close="createTeamDialog = false" />
|
||||
</v-app-bar>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ATeamModal from '../../../_components/a-team-modal.vue'
|
||||
import ATeamModal from '@/plugins/app/_components/a-team-modal.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
@@ -102,13 +63,13 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
user: null,
|
||||
dialog: false
|
||||
createTeamDialog: false
|
||||
}
|
||||
},
|
||||
|
||||
async created() {
|
||||
try {
|
||||
this.user = await this.$axios.get_auth_data("v1/auth/info");
|
||||
this.user = await this.$axios.get_auth_data('v1/auth/info')
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
@@ -117,32 +78,20 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="sass" scoped>
|
||||
.route-name
|
||||
font-size: 22px
|
||||
|
||||
.header
|
||||
position: relative !important
|
||||
box-shadow: none !important
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.2)
|
||||
padding: 25px 15px
|
||||
|
||||
@media (min-width: 992px)
|
||||
.button
|
||||
background: #7f39fb
|
||||
border-radius: 4px
|
||||
color: #fff
|
||||
|
||||
.menu-icon
|
||||
display: none
|
||||
|
||||
.create-btn
|
||||
background: #7f39fb
|
||||
border-radius: 4px
|
||||
color: #fff
|
||||
|
||||
.logout-btn
|
||||
background: #7f39fb
|
||||
border-radius: 4px
|
||||
color: #fff
|
||||
|
||||
.text-transform
|
||||
text-transform: capitalize
|
||||
|
||||
.search-input
|
||||
outline: none
|
||||
|
||||
@@ -151,41 +100,31 @@ export default {
|
||||
padding: 6px
|
||||
border-radius: 6px
|
||||
|
||||
.employee-section
|
||||
border: 1px solid rgba(33, 33, 33, 0.08)
|
||||
|
||||
.menu-dropdown
|
||||
border: 1px solid rgba(33, 33, 33, 0.08) !important
|
||||
border-radius: 16px
|
||||
height: 70px
|
||||
|
||||
.employee-select
|
||||
.employee-select-avatar
|
||||
background: #6200EE
|
||||
color: #fff
|
||||
border-radius: 50%
|
||||
padding: 13px
|
||||
margin-left: 10px
|
||||
|
||||
@media screen and (max-width: 772px)
|
||||
.route-name, .search-icon
|
||||
display: none
|
||||
|
||||
@media screen and (max-width: 617px)
|
||||
.responsive-position
|
||||
justify-content: center !important
|
||||
.pos-col
|
||||
display: flex
|
||||
flex-direction: column-reverse
|
||||
justify-content: center
|
||||
margin: auto
|
||||
|
||||
.employee-section, .create-btn, .search-input
|
||||
margin-top: 20px
|
||||
|
||||
.header
|
||||
padding: 75px 0
|
||||
|
||||
.dropdown-hover
|
||||
cursor: pointer !important
|
||||
height: 42px
|
||||
width: 42px
|
||||
|
||||
&:hover
|
||||
background: #F2E7FE
|
||||
font-weight: bolder
|
||||
background-color: rgba(0, 0, 0, var(--v-hover-opacity))
|
||||
cursor: pointer
|
||||
|
||||
@media (max-width: 991px)
|
||||
.menu-icon
|
||||
display: block !important
|
||||
|
||||
h1
|
||||
display: none
|
||||
|
||||
.employee-name
|
||||
display: none
|
||||
</style>
|
||||
@@ -22,3 +22,6 @@ th
|
||||
|
||||
.cursor-pointer:hover
|
||||
cursor: pointer
|
||||
|
||||
.hover-background:hover
|
||||
background-color: rgba(0, 0, 0, var(--v-hover-opacity))
|
||||
Reference in new issue
Block a user