アイコンのレンダリングを改善

This commit is contained in:
syuilo 2018-05-06 18:04:37 +09:00
parent 332af15e3c
commit 3f2a7a561e
5 changed files with 110 additions and 16 deletions

69
migration/2.4.0.js Normal file
View file

@ -0,0 +1,69 @@
// for Node.js interpret
const chalk = require('chalk');
const sequential = require('promise-sequential');
const { default: User } = require('../built/models/user');
const { default: DriveFile } = require('../built/models/drive-file');
async function main() {
const promiseGens = [];
const count = await User.count({});
let prev;
for (let i = 0; i < count; i++) {
promiseGens.push(() => {
const promise = new Promise(async (res, rej) => {
const user = await User.findOne(prev ? {
_id: { $gt: prev._id }
} : {}, {
sort: {
_id: 1
}
});
prev = user;
const set = {};
if (user.avatarId != null) {
const file = await DriveFile.findOne({ _id: user.avatarId });
if (file && file.metadata.properties.avgColor) {
set.avatarColor = file.metadata.properties.avgColor;
}
}
if (user.bannerId != null) {
const file = await DriveFile.findOne({ _id: user.bannerId });
if (file && file.metadata.properties.avgColor) {
set.bannerColor = file.metadata.properties.avgColor;
}
}
User.update({
_id: user._id
}, {
$set: set
}).then(() => {
res([i, user]);
}).catch(rej);
});
promise.then(([i, user]) => {
console.log(chalk`{gray ${i}} {green done: {bold ${user._id}} @${user.username}}`);
});
return promise;
});
}
return await sequential(promiseGens);
}
main().then(() => {
console.log('ALL DONE');
}).catch(console.error);

View file

@ -1,8 +1,8 @@
{ {
"name": "misskey", "name": "misskey",
"author": "syuilo <i@syuilo.com>", "author": "syuilo <i@syuilo.com>",
"version": "2.3.1", "version": "2.4.0",
"clientVersion": "1.0.5207", "clientVersion": "1.0.5215",
"codename": "nighthike", "codename": "nighthike",
"main": "./built/index.js", "main": "./built/index.js",
"private": true, "private": true,

View file

@ -1,8 +1,6 @@
<template> <template>
<router-link class="mk-avatar" :to="user | userPage" :title="user | acct" :target="target" :style="{ borderRadius: clientSettings.circleIcons ? '100%' : null }"> <router-link class="mk-avatar" :to="user | userPage" :title="user | acct" :target="target" :style="style" v-if="disablePreview"></router-link>
<img v-if="disablePreview" :src="`${user.avatarUrl}?thumbnail&size=128`" alt=""/> <router-link class="mk-avatar" :to="user | userPage" :title="user | acct" :target="target" :style="style" v-else v-user-preview="user.id"></router-link>
<img v-else :src="`${user.avatarUrl}?thumbnail&size=128`" alt="" v-user-preview="user.id"/>
</router-link>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -10,6 +8,7 @@ import Vue from 'vue';
export default Vue.extend({ export default Vue.extend({
props: { props: {
user: { user: {
type: Object,
required: true required: true
}, },
target: { target: {
@ -20,6 +19,15 @@ export default Vue.extend({
required: false, required: false,
default: false default: false
} }
},
computed: {
style(): any {
return {
backgroundColor: this.user.avatarColor ? `rgb(${ this.user.avatarColor.join(',') })` : null,
backgroundImage: `url(${ this.user.avatarUrl }?thumbnail)`,
borderRadius: (this as any).clientSettings.circleIcons ? '100%' : null
};
}
} }
}); });
</script> </script>
@ -27,13 +35,7 @@ export default Vue.extend({
<style lang="stylus" scoped> <style lang="stylus" scoped>
.mk-avatar .mk-avatar
display inline-block display inline-block
background-size cover
> img background-position center center
display inline-block transition border-radius 1s ease
width 100%
height 100%
margin 0
border-radius inherit
vertical-align bottom
transition border-radius 1s ease
</style> </style>

View file

@ -9,7 +9,7 @@
<div class="body"> <div class="body">
<div class="top"> <div class="top">
<a class="avatar"> <a class="avatar">
<img :src="`${user.avatarUrl}?thumbnail&size=200`" alt="avatar"/> <img :src="user.avatarUrl" alt="avatar"/>
</a> </a>
<mk-follow-button v-if="os.isSignedIn && os.i.id != user.id" :user="user"/> <mk-follow-button v-if="os.isSignedIn && os.i.id != user.id" :user="user"/>
</div> </div>

View file

@ -4,6 +4,7 @@
import $ from 'cafy'; import ID from '../../../../cafy-id'; import $ from 'cafy'; import ID from '../../../../cafy-id';
import User, { isValidName, isValidDescription, isValidLocation, isValidBirthday, pack } from '../../../../models/user'; import User, { isValidName, isValidDescription, isValidLocation, isValidBirthday, pack } from '../../../../models/user';
import event from '../../../../publishers/stream'; import event from '../../../../publishers/stream';
import DriveFile from '../../../../models/drive-file';
/** /**
* Update myself * Update myself
@ -51,12 +52,34 @@ module.exports = async (params, user, app) => new Promise(async (res, rej) => {
if (autoWatchErr) return rej('invalid autoWatch param'); if (autoWatchErr) return rej('invalid autoWatch param');
if (autoWatch != null) user.settings.autoWatch = autoWatch; if (autoWatch != null) user.settings.autoWatch = autoWatch;
if (avatarId) {
const avatar = await DriveFile.findOne({
_id: avatarId
});
if (avatar != null && avatar.metadata.properties.avgColor) {
user.avatarColor = avatar.metadata.properties.avgColor;
}
}
if (bannerId) {
const banner = await DriveFile.findOne({
_id: bannerId
});
if (banner != null && banner.metadata.properties.avgColor) {
user.bannerColor = banner.metadata.properties.avgColor;
}
}
await User.update(user._id, { await User.update(user._id, {
$set: { $set: {
name: user.name, name: user.name,
description: user.description, description: user.description,
avatarId: user.avatarId, avatarId: user.avatarId,
avatarColor: user.avatarColor,
bannerId: user.bannerId, bannerId: user.bannerId,
bannerColor: user.bannerColor,
profile: user.profile, profile: user.profile,
isBot: user.isBot, isBot: user.isBot,
settings: user.settings settings: user.settings