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
+80
-138
No files matched your search
@@ -1,98 +1,59 @@
|
|||||||
<template>
|
<template>
|
||||||
<v-app-bar class="header">
|
<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">
|
<div class="d-flex justify-space-between align-center w-100">
|
||||||
<h1 class="mr-md-4 route-name mb-5">{{ $route.name }}</h1>
|
<h1>{{ $route.name }}</h1>
|
||||||
|
|
||||||
<div class="d-flex justify-center align-center">
|
<div class="d-flex justify-end align-center w-100">
|
||||||
<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" />
|
||||||
<img
|
<input class="search-input mx-2" type="text" placeholder="Vyhľadávanie" />
|
||||||
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>
|
|
||||||
<template v-slot:activator="{ props }">
|
|
||||||
<v-btn v-bind="props" class="create-btn"
|
|
||||||
>+<span class="responsive-btn"
|
|
||||||
>Vytvoriť</span
|
|
||||||
></v-btn
|
|
||||||
>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<v-list class="text-left">
|
<v-menu>
|
||||||
<v-list-item class="dropdown-hover">
|
<template v-slot:activator="{ props }">
|
||||||
MASTER TASK
|
<v-btn v-bind="props" class="button mr-5">+<span class="responsive-btn">Vytvoriť</span></v-btn>
|
||||||
</v-list-item>
|
</template>
|
||||||
<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-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>
|
|
||||||
<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>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<v-list class="text-center">
|
<v-list>
|
||||||
<v-list-item class="dropdown-hover">
|
<v-list-item class="cursor-pointer hover-background">MASTER TASK</v-list-item>
|
||||||
Working hours
|
<v-list-item class="cursor-pointer hover-background">SUB TASK</v-list-item>
|
||||||
</v-list-item>
|
<v-list-item class="cursor-pointer hover-background" @click="createTeamDialog = true">TÍM</v-list-item>
|
||||||
<v-list-item>
|
<v-list-item class="cursor-pointer hover-background">BLOKER</v-list-item>
|
||||||
<v-btn class="logout-btn"
|
</v-list>
|
||||||
>Odhlásiť sa</v-btn
|
</v-menu>
|
||||||
>
|
|
||||||
</v-list-item>
|
<v-menu v-if="user">
|
||||||
</v-list>
|
<template v-slot:activator="{ props }">
|
||||||
</v-menu>
|
<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>
|
</div>
|
||||||
</div>
|
</v-btn>
|
||||||
</div>
|
</template>
|
||||||
|
|
||||||
|
<v-list class="text-center">
|
||||||
|
<v-list-item class="cursor-pointer hover-background">Working hours </v-list-item>
|
||||||
|
<v-list-item>
|
||||||
|
<v-btn class="button">Odhlásiť sa</v-btn>
|
||||||
|
</v-list-item>
|
||||||
|
</v-list>
|
||||||
|
</v-menu>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<A-team-modal :visible="createTeamDialog" @close="createTeamDialog = false" />
|
||||||
</v-app-bar>
|
</v-app-bar>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import ATeamModal from '../../../_components/a-team-modal.vue'
|
import ATeamModal from '@/plugins/app/_components/a-team-modal.vue'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
@@ -102,13 +63,13 @@ export default {
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
user: null,
|
user: null,
|
||||||
dialog: false
|
createTeamDialog: false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
async created() {
|
async created() {
|
||||||
try {
|
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) {
|
} catch (error) {
|
||||||
console.log(error)
|
console.log(error)
|
||||||
}
|
}
|
||||||
@@ -117,75 +78,53 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="sass" scoped>
|
<style lang="sass" scoped>
|
||||||
.route-name
|
|
||||||
font-size: 22px
|
|
||||||
|
|
||||||
.header
|
.header
|
||||||
position: relative !important
|
position: relative !important
|
||||||
box-shadow: none !important
|
box-shadow: none !important
|
||||||
border-bottom: 1px solid rgba(0, 0, 0, 0.2)
|
border-bottom: 1px solid rgba(0, 0, 0, 0.2)
|
||||||
padding: 25px 15px
|
padding: 25px 15px
|
||||||
|
|
||||||
@media (min-width: 992px)
|
.button
|
||||||
|
background: #7f39fb
|
||||||
|
border-radius: 4px
|
||||||
|
color: #fff
|
||||||
|
|
||||||
.menu-icon
|
.menu-icon
|
||||||
display: none
|
display: none
|
||||||
|
|
||||||
.create-btn
|
.search-input
|
||||||
background: #7f39fb
|
outline: none
|
||||||
border-radius: 4px
|
|
||||||
color: #fff
|
|
||||||
|
|
||||||
.logout-btn
|
.search-icon
|
||||||
background: #7f39fb
|
border: 2px solid #e0e0e0
|
||||||
border-radius: 4px
|
padding: 6px
|
||||||
color: #fff
|
border-radius: 6px
|
||||||
|
|
||||||
.text-transform
|
|
||||||
text-transform: capitalize
|
|
||||||
|
|
||||||
.search-input
|
.menu-dropdown
|
||||||
outline: none
|
border: 1px solid rgba(33, 33, 33, 0.08) !important
|
||||||
|
|
||||||
.search-icon
|
|
||||||
border: 2px solid #e0e0e0
|
|
||||||
padding: 6px
|
|
||||||
border-radius: 6px
|
|
||||||
|
|
||||||
.employee-section
|
|
||||||
border: 1px solid rgba(33, 33, 33, 0.08)
|
|
||||||
border-radius: 16px
|
border-radius: 16px
|
||||||
height: 70px
|
height: 70px
|
||||||
|
|
||||||
.employee-select
|
.employee-select-avatar
|
||||||
background: #6200EE
|
background: #6200EE
|
||||||
color: #fff
|
color: #fff
|
||||||
border-radius: 50%
|
border-radius: 50%
|
||||||
padding: 13px
|
padding: 13px
|
||||||
margin-left: 10px
|
height: 42px
|
||||||
|
width: 42px
|
||||||
@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
|
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
background: #F2E7FE
|
background-color: rgba(0, 0, 0, var(--v-hover-opacity))
|
||||||
font-weight: bolder
|
cursor: pointer
|
||||||
|
|
||||||
|
@media (max-width: 991px)
|
||||||
|
.menu-icon
|
||||||
|
display: block !important
|
||||||
|
|
||||||
|
h1
|
||||||
|
display: none
|
||||||
|
|
||||||
|
.employee-name
|
||||||
|
display: none
|
||||||
</style>
|
</style>
|
||||||
@@ -22,3 +22,6 @@ th
|
|||||||
|
|
||||||
.cursor-pointer:hover
|
.cursor-pointer:hover
|
||||||
cursor: pointer
|
cursor: pointer
|
||||||
|
|
||||||
|
.hover-background:hover
|
||||||
|
background-color: rgba(0, 0, 0, var(--v-hover-opacity))
|
||||||
Reference in new issue
Block a user