Sharkey/src/client/app/common/views/components/avatar.vue

117 lines
2.8 KiB
Vue
Raw Normal View History

2018-04-29 11:17:15 +03:00
<template>
<span class="mk-avatar" :style="style" :class="{ cat }" :title="user | acct" v-if="disableLink && !disablePreview" v-user-preview="user.id" @click="onClick" v-once>
2018-09-12 19:06:18 +03:00
<span class="inner" :style="icon"></span>
2018-08-12 21:36:42 +03:00
</span>
<span class="mk-avatar" :style="style" :class="{ cat }" :title="user | acct" v-else-if="disableLink && disablePreview" @click="onClick" v-once>
2018-09-12 19:06:18 +03:00
<span class="inner" :style="icon"></span>
2018-08-12 21:36:42 +03:00
</span>
<router-link class="mk-avatar" :style="style" :class="{ cat }" :to="user | userPage" :title="user | acct" :target="target" v-else-if="!disableLink && !disablePreview" v-user-preview="user.id" v-once>
2018-09-12 19:06:18 +03:00
<span class="inner" :style="icon"></span>
2018-08-12 21:36:42 +03:00
</router-link>
<router-link class="mk-avatar" :style="style" :class="{ cat }" :to="user | userPage" :title="user | acct" :target="target" v-else-if="!disableLink && disablePreview" v-once>
2018-09-12 19:06:18 +03:00
<span class="inner" :style="icon"></span>
2018-08-12 21:36:42 +03:00
</router-link>
2018-04-29 11:17:15 +03:00
</template>
<script lang="ts">
import Vue from 'vue';
import { getStaticImageUrl } from '../../../common/scripts/get-static-image-url';
2018-04-29 11:17:15 +03:00
export default Vue.extend({
props: {
user: {
type: Object,
2018-04-29 11:17:15 +03:00
required: true
},
target: {
required: false,
default: null
},
2018-08-09 18:51:40 +03:00
disableLink: {
required: false,
default: false
},
2018-04-29 11:17:15 +03:00
disablePreview: {
required: false,
default: false
}
},
computed: {
2018-05-20 11:37:30 +03:00
lightmode(): boolean {
2018-05-20 20:13:39 +03:00
return this.$store.state.device.lightmode;
2018-05-20 11:37:30 +03:00
},
2018-08-12 21:36:42 +03:00
cat(): boolean {
return this.user.isCat && this.$store.state.settings.circleIcons;
},
style(): any {
2018-09-12 19:06:18 +03:00
return {
borderRadius: this.$store.state.settings.circleIcons ? '100%' : null
};
},
url(): string {
2019-02-04 21:09:44 +02:00
return this.$store.state.device.disableShowingAnimatedImages
? getStaticImageUrl(this.user.avatarUrl)
: this.user.avatarUrl;
},
2018-09-12 19:06:18 +03:00
icon(): any {
return {
2019-04-08 13:56:42 +03:00
backgroundColor: this.user.avatarColor,
backgroundImage: this.lightmode ? null : `url(${this.url})`,
2018-05-27 07:49:09 +03:00
borderRadius: this.$store.state.settings.circleIcons ? '100%' : null
};
}
2018-08-09 18:51:40 +03:00
},
2018-09-26 19:54:10 +03:00
mounted() {
2018-09-28 18:01:11 +03:00
if (this.user.avatarColor) {
Use PostgreSQL instead of MongoDB (#4572) * wip * Update note.ts * Update timeline.ts * Update core.ts * wip * Update generate-visibility-query.ts * wip * wip * wip * wip * wip * Update global-timeline.ts * wip * wip * wip * Update vote.ts * wip * wip * Update create.ts * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * Update files.ts * wip * wip * Update CONTRIBUTING.md * wip * wip * wip * wip * wip * wip * wip * wip * Update read-notification.ts * wip * wip * wip * wip * wip * wip * wip * Update cancel.ts * wip * wip * wip * Update show.ts * wip * wip * Update gen-id.ts * Update create.ts * Update id.ts * wip * wip * wip * wip * wip * wip * wip * Docker: Update files about Docker (#4599) * Docker: Use cache if files used by `yarn install` was not updated This patch reduces the number of times to installing node_modules. For example, `yarn install` step will be skipped when only ".config/default.yml" is updated. * Docker: Migrate MongoDB to Postgresql Misskey uses Postgresql as a database instead of Mongodb since version 11. * Docker: Uncomment about data persistence This patch will save a lot of databases. * wip * wip * wip * Update activitypub.ts * wip * wip * wip * Update logs.ts * wip * Update drive-file.ts * Update register.ts * wip * wip * Update mentions.ts * wip * wip * wip * Update recommendation.ts * wip * Update index.ts * wip * Update recommendation.ts * Doc: Update docker.ja.md and docker.en.md (#1) (#4608) Update how to set up misskey. * wip * :v: * wip * Update note.ts * Update postgre.ts * wip * wip * wip * wip * Update add-file.ts * wip * wip * wip * Clean up * Update logs.ts * wip * :pizza: * wip * Ad notes * wip * Update api-visibility.ts * Update note.ts * Update add-file.ts * tests * tests * Update postgre.ts * Update utils.ts * wip * wip * Refactor * wip * Refactor * wip * wip * Update show-users.ts * Update update-instance.ts * wip * Update feed.ts * Update outbox.ts * Update outbox.ts * Update user.ts * wip * Update list.ts * Update update-hashtag.ts * wip * Update update-hashtag.ts * Refactor * Update update.ts * wip * wip * :v: * clean up * docs * Update push.ts * wip * Update api.ts * wip * :v: * Update make-pagination-query.ts * :v: * Delete hashtags.ts * Update instances.ts * Update instances.ts * Update create.ts * Update search.ts * Update reversi-game.ts * Update signup.ts * Update user.ts * id * Update example.yml * :art: * objectid * fix * reversi * reversi * Fix bug of chart engine * Add test of chart engine * Improve test * Better testing * Improve chart engine * Refactor * Add test of chart engine * Refactor * Add chart test * Fix bug * コミットし忘れ * Refactoring * :v: * Add tests * Add test * Extarct note tests * Refactor * 存在しないユーザーにメンションできなくなっていた問題を修正 * Fix bug * Update update-meta.ts * Fix bug * Update mention.vue * Fix bug * Update meta.ts * Update CONTRIBUTING.md * Fix bug * Fix bug * Fix bug * Clean up * Clean up * Update notification.ts * Clean up * Add mute tests * Add test * Refactor * Add test * Fix test * Refactor * Refactor * Add tests * Update utils.ts * Update utils.ts * Fix test * Update package.json * Update update.ts * Update manifest.ts * Fix bug * Fix bug * Add test * :art: * Update endpoint permissions * Updaye permisison * Update person.ts #4299 * データベースと同期しないように * Fix bug * Fix bug * Update reversi-game.ts * Use a feature of Node v11.7.0 to extract a public key (#4644) * wip * wip * :v: * Refactoring #1540 * test * test * test * test * test * test * test * Fix bug * Fix test * :sushi: * wip * #4471 * Add test for #4335 * Refactor * Fix test * Add tests * :clock4: * Fix bug * Add test * Add test * rename * Fix bug
2019-04-07 15:50:36 +03:00
this.$el.style.color = this.user.avatarColor;
2018-09-28 18:01:11 +03:00
}
2018-09-26 19:54:10 +03:00
},
2018-08-09 18:51:40 +03:00
methods: {
onClick(e) {
this.$emit('click', e);
}
2018-04-29 11:17:15 +03:00
}
});
</script>
<style lang="stylus" scoped>
2018-09-26 19:54:10 +03:00
.mk-avatar
2018-05-04 11:40:50 +03:00
display inline-block
2018-05-06 19:43:51 +03:00
vertical-align bottom
2019-04-24 04:02:31 +03:00
flex-shrink 0
2018-08-12 21:36:42 +03:00
2018-08-15 14:09:56 +03:00
&:not(.cat)
overflow hidden
border-radius 8px
2018-08-12 21:39:32 +03:00
&.cat::before,
&.cat::after
2018-08-12 21:36:42 +03:00
background #df548f
2018-09-26 19:54:10 +03:00
border solid 4px currentColor
2018-08-12 21:36:42 +03:00
box-sizing border-box
content ''
display inline-block
height 50%
width 50%
2018-08-12 21:39:32 +03:00
&.cat::before
2018-08-12 21:36:42 +03:00
border-radius 0 75% 75%
transform rotate(37.5deg) skew(30deg)
2018-08-12 21:39:32 +03:00
&.cat::after
2018-08-12 21:36:42 +03:00
border-radius 75% 0 75% 75%
transform rotate(-37.5deg) skew(-30deg)
.inner
background-position center center
background-size cover
bottom 0
left 0
position absolute
right 0
top 0
transition border-radius 1s ease
2018-08-12 21:42:12 +03:00
z-index 1
2018-08-13 23:24:51 +03:00
2018-04-29 11:17:15 +03:00
</style>