mirror of
https://github.com/IT4Change/gradido.git
synced 2025-12-13 07:45:54 +00:00
add lib vue-avatar
This commit is contained in:
ogerly
parent
83ab6b54ef
commit
579803d13b
@ -52,6 +52,7 @@
|
||||
"vee-validate": "^3.4.5",
|
||||
"vue": "2.6.12",
|
||||
"vue-apollo": "^3.0.7",
|
||||
"vue-avatar": "^2.3.3",
|
||||
"vue-flatpickr-component": "^8.1.2",
|
||||
"vue-focus": "^2.1.0",
|
||||
"vue-i18n": "^8.22.4",
|
||||
|
||||
@ -6,15 +6,12 @@
|
||||
>
|
||||
<b-row>
|
||||
<b-col cols="2">
|
||||
<b-avatar
|
||||
<avatar
|
||||
v-if="firstName"
|
||||
:text="avatarText"
|
||||
:badge-variant="variant"
|
||||
size="3em"
|
||||
:username="username"
|
||||
color="#fff"
|
||||
class="font-weight-bold"
|
||||
>
|
||||
<template #badge><b-icon :icon="icon"></b-icon></template>
|
||||
</b-avatar>
|
||||
></avatar>
|
||||
<b-avatar v-else :icon="icon" :variant="variant" size="3em"></b-avatar>
|
||||
</b-col>
|
||||
<b-col>
|
||||
@ -178,6 +175,7 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Avatar from 'vue-avatar'
|
||||
import CollapseIcon from '../TransactionRows/CollapseIcon'
|
||||
import ContributionMessagesList from '@/components/ContributionMessages/ContributionMessagesList.vue'
|
||||
import { listContributionMessages } from '../../graphql/queries.js'
|
||||
@ -185,6 +183,7 @@ import { listContributionMessages } from '../../graphql/queries.js'
|
||||
export default {
|
||||
name: 'ContributionListItem',
|
||||
components: {
|
||||
Avatar,
|
||||
CollapseIcon,
|
||||
ContributionMessagesList,
|
||||
},
|
||||
@ -269,8 +268,8 @@ export default {
|
||||
collapsId() {
|
||||
return 'collapse' + String(this.id)
|
||||
},
|
||||
avatarText() {
|
||||
return this.firstName[0] + this.lastName[0]
|
||||
username() {
|
||||
return `${this.firstName} ${this.lastName}`
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
|
||||
@ -45,14 +45,15 @@ describe('AuthNavbar', () => {
|
||||
expect(wrapper.find('div.navbar-brand').exists()).toBeTruthy()
|
||||
})
|
||||
|
||||
describe('.b-avatar element', () => {
|
||||
describe('.avatar element', () => {
|
||||
it('is rendered', () => {
|
||||
expect(wrapper.find('button.b-avatar').exists()).toBeTruthy()
|
||||
expect(wrapper.find('button.avatar').exists()).toBeTruthy()
|
||||
})
|
||||
|
||||
it("has the user's initials", () => {
|
||||
expect(
|
||||
wrapper.find('button.b-avatar').find('.b-avatar-text > span:nth-child(1)').text(),
|
||||
// wrapper.find('button.b-avatar').find('.b-avatar-text > span:nth-child(1)').text(),
|
||||
wrapper.find('.vue-avatar--wrapper').text(),
|
||||
).toBe(`${wrapper.vm.$store.state.firstName[0]}${wrapper.vm.$store.state.lastName[0]}`)
|
||||
})
|
||||
})
|
||||
|
||||
@ -21,15 +21,10 @@
|
||||
<div>
|
||||
<div class="d-flex">
|
||||
<div class="mr-3">
|
||||
<b-avatar
|
||||
button
|
||||
variant="gradido"
|
||||
:text="avatarShortName"
|
||||
class="align-baseline"
|
||||
></b-avatar>
|
||||
<avatar :username="username"></avatar>
|
||||
</div>
|
||||
<div>
|
||||
<div class="small" data-test="navbar-item-username">{{ avatarLongName }}</div>
|
||||
<div class="small" data-test="navbar-item-username">{{ username }}</div>
|
||||
|
||||
<div class="text-right small">
|
||||
<small>{{ $store.state.email }}</small>
|
||||
@ -51,8 +46,13 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Avatar from 'vue-avatar'
|
||||
|
||||
export default {
|
||||
name: 'Navbar',
|
||||
components: {
|
||||
Avatar,
|
||||
},
|
||||
props: {
|
||||
balance: { type: Number, required: true },
|
||||
},
|
||||
@ -63,10 +63,7 @@ export default {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
avatarShortName() {
|
||||
return this.$store.state.firstName[0] + this.$store.state.lastName[0]
|
||||
},
|
||||
avatarLongName() {
|
||||
username() {
|
||||
return `${this.$store.state.firstName} ${this.$store.state.lastName}`
|
||||
},
|
||||
},
|
||||
|
||||
@ -18,12 +18,10 @@
|
||||
"
|
||||
>
|
||||
<div class="d-flex align-items-center">
|
||||
<b-avatar
|
||||
:text="transaction.linkedUser.firstName[0] + transaction.linkedUser.lastName[0]"
|
||||
:variant="transaction.typeId === 'SEND' ? 'danger' : 'success'"
|
||||
class="mr-3"
|
||||
></b-avatar>
|
||||
<span class="mr-auto">
|
||||
<avatar
|
||||
:username="`${transaction.linkedUser.firstName} ${transaction.linkedUser.lastName}`"
|
||||
></avatar>
|
||||
<span>
|
||||
<name :linkedUser="transaction.linkedUser" @set-tunneled-email="setTunneledEmail" />
|
||||
</span>
|
||||
<b-badge>{{ transaction.amount | GDD }}</b-badge>
|
||||
@ -34,11 +32,13 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Avatar from 'vue-avatar'
|
||||
import Name from '@/components/TransactionRows/Name.vue'
|
||||
|
||||
export default {
|
||||
name: 'LastTransactions',
|
||||
components: {
|
||||
Avatar,
|
||||
Name,
|
||||
},
|
||||
props: {
|
||||
|
||||
@ -2,7 +2,8 @@
|
||||
<div class="transaction-slot-receive">
|
||||
<b-row @click="visible = !visible" class="">
|
||||
<b-col cols="2">
|
||||
<b-avatar :text="avatarText" variant="success" size="3em"></b-avatar>
|
||||
<!-- <b-avatar :text="avatarText" variant="success" size="3em"></b-avatar> -->
|
||||
<avatar :username="username"></avatar>
|
||||
</b-col>
|
||||
<b-col>
|
||||
<div>
|
||||
@ -40,6 +41,7 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Avatar from 'vue-avatar'
|
||||
import CollapseIcon from '../TransactionRows/CollapseIcon'
|
||||
// import TypeIcon from '../TransactionRows/TypeIcon'
|
||||
import Name from '../TransactionRows/Name'
|
||||
@ -51,6 +53,7 @@ import DecayInformation from '../DecayInformations/DecayInformation'
|
||||
export default {
|
||||
name: 'TransactionReceive',
|
||||
components: {
|
||||
Avatar,
|
||||
CollapseIcon,
|
||||
// TypeIcon,
|
||||
Name,
|
||||
@ -99,8 +102,8 @@ export default {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
avatarText() {
|
||||
return this.linkedUser.firstName[0] + this.linkedUser.lastName[0]
|
||||
username() {
|
||||
return `${this.linkedUser.firstName} ${this.linkedUser.lastName}`
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<div class="transaction-slot-send">
|
||||
<b-row @click="visible = !visible" class="">
|
||||
<b-col cols="2">
|
||||
<b-avatar :text="avatarText" variant="danger" size="3em"></b-avatar>
|
||||
<avatar :username="username"></avatar>
|
||||
</b-col>
|
||||
<b-col>
|
||||
<div>
|
||||
@ -40,6 +40,7 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Avatar from 'vue-avatar'
|
||||
import CollapseIcon from '../TransactionRows/CollapseIcon'
|
||||
// import TypeIcon from '../TransactionRows/TypeIcon'
|
||||
import Name from '../TransactionRows/Name'
|
||||
@ -51,6 +52,7 @@ import DecayInformation from '../DecayInformations/DecayInformation'
|
||||
export default {
|
||||
name: 'TransactionSend',
|
||||
components: {
|
||||
Avatar,
|
||||
CollapseIcon,
|
||||
// TypeIcon,
|
||||
Name,
|
||||
@ -100,8 +102,8 @@ export default {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
avatarText() {
|
||||
return this.linkedUser.firstName[0] + this.linkedUser.lastName[0]
|
||||
username() {
|
||||
return `${this.linkedUser.firstName} ${this.linkedUser.lastName}`
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
@ -14140,6 +14140,11 @@ vue-apollo@^3.0.7:
|
||||
serialize-javascript "^4.0.0"
|
||||
throttle-debounce "^2.1.0"
|
||||
|
||||
vue-avatar@^2.3.3:
|
||||
version "2.3.3"
|
||||
resolved "https://registry.yarnpkg.com/vue-avatar/-/vue-avatar-2.3.3.tgz#e125bf4f4a6f4f9480da0c522020266a8609d2a8"
|
||||
integrity sha512-Z57ILRTkFIAuCH9JiFBxX74C5zua5ub/jRDM/KZ+QKXNfscvmUOgWBs3kA2+wrpZMowIvfLHIT0gvQu1z+zpLg==
|
||||
|
||||
vue-cli-plugin-i18n@^1.0.1:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/vue-cli-plugin-i18n/-/vue-cli-plugin-i18n-1.0.1.tgz#5a3077de5d62c9b4068e486db1fc97fce9fa0072"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user