finished the action bar
NoisyBoy-9
parent
b1650bee08
commit
1a644deb73
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
|
|
@ -0,0 +1,37 @@
|
|||
<template>
|
||||
<span class="badge__container">
|
||||
<p class="badge__number">
|
||||
<slot></slot>
|
||||
</p>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Badge'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="sass" scoped>
|
||||
.badge
|
||||
&__container
|
||||
// base styles
|
||||
width: 1rem
|
||||
height: 1rem
|
||||
background-color: #336cfb
|
||||
display: flex
|
||||
justify-content: center
|
||||
align-items: center
|
||||
border-radius: 50%
|
||||
border: 2px solid white
|
||||
// positioning according to the the notification icon
|
||||
position: absolute
|
||||
top: -0.2rem
|
||||
right: -.3rem
|
||||
&__number
|
||||
font-size: .8rem
|
||||
color: white
|
||||
font-weight: 600
|
||||
padding: 0
|
||||
display: inline-block
|
||||
</style>
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<template>
|
||||
<div class="search__container">
|
||||
<input type="search" class="search__input" v-bind="query" :placeholder="placeholder">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'BaseInput',
|
||||
data () {
|
||||
return {
|
||||
query: null
|
||||
}
|
||||
},
|
||||
props: ['placeholder']
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="sass" scoped>
|
||||
.search
|
||||
&__container
|
||||
padding: 0
|
||||
diplay: flex
|
||||
justify-content: center
|
||||
width: 40%
|
||||
|
||||
&__input
|
||||
width: 90%
|
||||
height: 100%
|
||||
border-radius: 15px
|
||||
padding: .4rem 1.5rem
|
||||
color: lighten(black, 30)
|
||||
border: 1px solid lighten(grey, 40)
|
||||
margin-right: -2rem
|
||||
background-color: #f9f9f9
|
||||
transition: all .2s ease-in-out
|
||||
|
||||
&::placeholder
|
||||
color: #a8abb3
|
||||
|
||||
&:focus
|
||||
outline: none
|
||||
width: 100%
|
||||
|
||||
&__icon
|
||||
width: 1.2rem
|
||||
height: 1.2rem
|
||||
cursor: pointer
|
||||
fill: #3b3c3d
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<template>
|
||||
<div class="history__container">
|
||||
<svg class="history__icon" version="1.1" xmlns="http://www.w3.org/2000/svg" height="64" viewBox="0 0 64 64" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 64 64">
|
||||
<g>
|
||||
<g fill="#1D1D1B">
|
||||
<path d="m34.688,3.315c-15.887,0-28.812,12.924-28.81,28.729-0.012,0.251-0.157,4.435 1.034,8.941l-3.881-2.262c-0.964-0.56-2.192-0.235-2.758,0.727-0.558,0.96-0.234,2.195 0.727,2.755l9.095,5.302c0.019,0.01 0.038,0.013 0.056,0.022 0.097,0.052 0.196,0.09 0.301,0.126 0.071,0.025 0.14,0.051 0.211,0.068 0.087,0.019 0.173,0.025 0.262,0.033 0.062,0.006 0.124,0.025 0.186,0.025 0.035,0 0.068-0.012 0.104-0.014 0.034-0.001 0.063,0.007 0.097,0.004 0.05-0.005 0.095-0.026 0.144-0.034 0.097-0.017 0.189-0.038 0.282-0.068 0.078-0.026 0.155-0.057 0.23-0.093 0.084-0.04 0.163-0.084 0.241-0.136 0.071-0.046 0.139-0.096 0.203-0.15 0.071-0.06 0.134-0.125 0.197-0.195 0.059-0.065 0.11-0.133 0.159-0.205 0.027-0.04 0.063-0.069 0.087-0.11 0.018-0.031 0.018-0.067 0.033-0.098 0.027-0.055 0.069-0.103 0.093-0.162l3.618-8.958c0.417-1.032-0.081-2.207-1.112-2.624-1.033-0.414-2.207,0.082-2.624,1.114l-1.858,4.6c-1.24-4.147-1.099-8.408-1.095-8.525 0-13.664 11.117-24.78 24.779-24.78 13.663,0 24.779,11.116 24.779,24.78 0,13.662-11.116,24.778-24.779,24.778-1.114,0-2.016,0.903-2.016,2.016s0.901,2.016 2.016,2.016c15.888,0 28.812-12.924 28.812-28.81-0.002-15.888-12.926-28.812-28.813-28.812z"/>
|
||||
<path d="m33.916,36.002c0.203,0.084 0.417,0.114 0.634,0.129 0.045,0.003 0.089,0.027 0.134,0.027 0.236,0 0.465-0.054 0.684-0.134 0.061-0.022 0.118-0.054 0.177-0.083 0.167-0.08 0.321-0.182 0.463-0.307 0.031-0.027 0.072-0.037 0.103-0.068l12.587-12.587c0.788-0.788 0.788-2.063 0-2.851-0.787-0.788-2.062-0.788-2.851,0l-11.632,11.631-10.439-4.372c-1.033-0.431-2.209,0.053-2.64,1.081-0.43,1.027 0.055,2.208 1.08,2.638l11.688,4.894c0.004,0.001 0.008,0.001 0.012,0.002z"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'History'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="sass" scoped>
|
||||
.history
|
||||
&__container
|
||||
padding: 0
|
||||
margin-left: 1.5rem
|
||||
cursor: pointer
|
||||
&__icon
|
||||
width: 2rem
|
||||
height: 2rem
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<template>
|
||||
<div class="notification__container">
|
||||
<svg version="1.1" class="notification__icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
|
||||
<g>
|
||||
<g>
|
||||
<path d="M467.812,431.851l-36.629-61.056c-16.917-28.181-25.856-60.459-25.856-93.312V224c0-67.52-45.056-124.629-106.667-143.04
|
||||
V42.667C298.66,19.136,279.524,0,255.993,0s-42.667,19.136-42.667,42.667V80.96C151.716,99.371,106.66,156.48,106.66,224v53.483
|
||||
c0,32.853-8.939,65.109-25.835,93.291l-36.629,61.056c-1.984,3.307-2.027,7.403-0.128,10.752c1.899,3.349,5.419,5.419,9.259,5.419
|
||||
H458.66c3.84,0,7.381-2.069,9.28-5.397C469.839,439.275,469.775,435.136,467.812,431.851z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path d="M188.815,469.333C200.847,494.464,226.319,512,255.993,512s55.147-17.536,67.179-42.667H188.815z"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
<Badge>{{BadgeNumber}}</Badge>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Badge from './Badge'
|
||||
|
||||
export default {
|
||||
name: 'Notifcation',
|
||||
components: { Badge },
|
||||
props: ['BadgeNumber']
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="sass" scoped>
|
||||
.notification
|
||||
&__container
|
||||
margin-left: auto
|
||||
padding: 0
|
||||
position: relative
|
||||
cursor: pointer
|
||||
|
||||
&__icon
|
||||
width: 2rem
|
||||
height: 2rem
|
||||
padding: 0
|
||||
fill: #bbbcbc
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<template>
|
||||
<div class="profile__container">
|
||||
<img src="../assets/profile.jpg" alt="PROFILE" class="profile__image">
|
||||
<svg version="1.1" class="profile__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 129 129" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 129 129">
|
||||
<g>
|
||||
<path d="m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z"/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Profile'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="sass" scoped>
|
||||
.profile
|
||||
&__container
|
||||
padding: 0
|
||||
margin-left: 1.5rem
|
||||
display: flex
|
||||
flex-direction: row
|
||||
cursor: pointer
|
||||
|
||||
&__image
|
||||
width: 2rem
|
||||
height: 2rem
|
||||
border-radius: 50%
|
||||
|
||||
&__icon
|
||||
width: .7rem
|
||||
height: .7rem
|
||||
margin-left: .313rem // 5px
|
||||
</style>
|
||||
|
|
@ -1,15 +1,39 @@
|
|||
<template>
|
||||
<div>
|
||||
ActionBar
|
||||
<BaseInput placeholder="Search">
|
||||
<svg version="1.1" class="search__icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 52.966 52.966" style="enable-background:new 0 0 52.966 52.966;" xml:space="preserve">
|
||||
<path d="M51.704,51.273L36.845,35.82c3.79-3.801,6.138-9.041,6.138-14.82c0-11.58-9.42-21-21-21s-21,9.42-21,21s9.42,21,21,21
|
||||
c5.083,0,9.748-1.817,13.384-4.832l14.895,15.491c0.196,0.205,0.458,0.307,0.721,0.307c0.25,0,0.499-0.093,0.693-0.279
|
||||
C52.074,52.304,52.086,51.671,51.704,51.273z M21.983,40c-10.477,0-19-8.523-19-19s8.523-19,19-19s19,8.523,19,19
|
||||
S32.459,40,21.983,40z"/>
|
||||
<g></g>
|
||||
</svg>
|
||||
</BaseInput>
|
||||
|
||||
<Notification :BadgeNumber="5"></Notification>
|
||||
|
||||
<Profile></Profile>
|
||||
|
||||
<History></History>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BaseInput from '../components/BaseInput'
|
||||
import Notification from '../components/Notification'
|
||||
import Profile from '../components/Profile'
|
||||
import History from '../components/History'
|
||||
|
||||
export default {
|
||||
name: 'ActionBar'
|
||||
name: 'ActionBar',
|
||||
components: { BaseInput, Notification, Profile, History }
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
<style lang="sass" scoped>
|
||||
div
|
||||
display: flex
|
||||
padding: 1rem 2.5rem
|
||||
align-items: center
|
||||
</style>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue