update jdenticon

add-admin-interface
adb 3 years ago
parent 035f30936e
commit c7c7d2c120

@ -1,17 +1,16 @@
<template> <template>
<img v-if="mxcURL" :src="thumbnailUrl()" class="userThumbnail image"/> <img v-if="mxcURL" :src="thumbnailUrl()" class="userThumbnail image"/>
<Identicon v-else :value="fallback" :theme="'jdenticon'" :size="this.getFontSize()*this.size" class="userThumbnail identicon"/> <div v-else v-html="getJdenticon()" class="userThumbnail identicon"/>
</template> </template>
<script> <script>
import parseMXC from '@modular-matrix/parse-mxc'; import parseMXC from '@modular-matrix/parse-mxc';
import {matrix} from "@/main"; import {matrix} from "@/main";
import Identicon from '@vue-polkadot/vue-identicon'; import {toSvg} from 'jdenticon';
export default { export default {
name: "userThumbnail.vue", name: "userThumbnail.vue",
components: { components: {
Identicon
}, },
props: { props: {
mxcURL: String, mxcURL: String,
@ -28,6 +27,9 @@ export default {
}, },
getFontSize(){ getFontSize(){
return window.getComputedStyle(document.body,null).fontSize.split("px", 1)||16; return window.getComputedStyle(document.body,null).fontSize.split("px", 1)||16;
},
getJdenticon(){
return toSvg(this.fallback, this.getFontSize()*this.size);
} }
}, },
data(){ data(){
@ -44,4 +46,8 @@ export default {
border-radius: 50%; border-radius: 50%;
background-color: unset; background-color: unset;
} }
.identicon {
clip-path: circle(49% at 50% 50%);
background-color: #111;
}
</style> </style>
Loading…
Cancel
Save