Merge #2182

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

@@ -1,8 +1,16 @@
 <template>
-	<span class="mk-avatar" :title="user | acct" :style="style" v-if="disableLink && !disablePreview" v-user-preview="user.id" @click="onClick"></span>
+	<span class="mk-avatar" :class="{ cat }" :title="user | acct" v-if="disableLink && !disablePreview" v-user-preview="user.id" @click="onClick">
-	<span class="mk-avatar" :title="user | acct" :style="style" v-else-if="disableLink && disablePreview" @click="onClick"></span>
+		<span class="inner" :style="style"></span>
-	<router-link class="mk-avatar" :to="user | userPage" :title="user | acct" :target="target" :style="style" v-else-if="!disableLink && !disablePreview" v-user-preview="user.id"></router-link>
+	</span>
-	<router-link class="mk-avatar" :to="user | userPage" :title="user | acct" :target="target" :style="style" v-else-if="!disableLink && disablePreview"></router-link>
+	<span class="mk-avatar" :class="{ cat }" :title="user | acct" v-else-if="disableLink && disablePreview" @click="onClick">
+		<span class="inner" :style="style"></span>
+	</span>
+	<router-link class="mk-avatar" :class="{ cat }" :to="user | userPage" :title="user | acct" :target="target" v-else-if="!disableLink && !disablePreview" v-user-preview="user.id">
+		<span class="inner" :style="style"></span>
+	</router-link>
+	<router-link class="mk-avatar" :class="{ cat }" :to="user | userPage" :title="user | acct" :target="target" v-else-if="!disableLink && disablePreview">
+		<span class="inner" :style="style"></span>
+	</router-link>
 </template>
 
 <script lang="ts">
@@ -30,14 +38,17 @@ export default Vue.extend({
 		lightmode(): boolean {
 			return this.$store.state.device.lightmode;
 		},
+		cat(): boolean {
+			return this.user.isCat && this.$store.state.settings.circleIcons;
+		},
 		style(): any {
 			return {
 				backgroundColor: this.lightmode
-					? `rgb(${ this.user.avatarColor.slice(0, 3).join(',') })`
+					? `rgb(${this.user.avatarColor.slice(0, 3).join(',')})`
 					: this.user.avatarColor && this.user.avatarColor.length == 3
-						? `rgb(${ this.user.avatarColor.join(',') })`
+						? `rgb(${this.user.avatarColor.join(',')})`
 						: null,
-				backgroundImage: this.lightmode ? null : `url(${ this.user.avatarUrl })`,
+				backgroundImage: this.lightmode ? null : `url(${this.user.avatarUrl})`,
 				borderRadius: this.$store.state.settings.circleIcons ? '100%' : null
 			};
 		}
@@ -51,10 +62,43 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-.mk-avatar
+
+root(isDark)
 	display inline-block
 	vertical-align bottom
-	background-size cover
+
-	background-position center center
+	&.cat::before,
-	transition border-radius 1s ease
+	&.cat::after
+		background #df548f
+		border solid 4px isDark ? #e0eefd : #202224
+		box-sizing border-box
+		content ''
+		display inline-block
+		height 50%
+		width 50%
+
+	&.cat::before
+		border-radius 0 75% 75%
+		transform rotate(37.5deg) skew(30deg)
+
+	&.cat::after
+		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
+		z-index 1
+
+.mk-avatar[data-darkmode]
+	root(true)
+
+.mk-avatar:not([data-darkmode])
+	root(false)
 </style>

src/client/app/desktop/views/pages/user/user.header.vue

@@ -176,6 +176,10 @@ root(isDark)
 		height 120px
 		box-shadow 1px 1px 3px rgba(#000, 0.2)
 
+		> &.cat::before,
+		> &.cat::after
+			border-width 8px
+
 	> .body
 		padding 16px 16px 16px 154px
 		color isDark ? #c5ced6 : #555