cybrespace
/
pinafore
1
0
Fork 1
Code Issues Pull Requests Releases Wiki Activity

avatar should not have gray background (#237) 

fixes #233
This commit is contained in:
Nolan Lawson 2018-04-29 16:57:12 -07:00 committed by GitHub
parent 8089202977
commit de7bc7e43d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 36 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
routes/_components/Avatar.html
View File

@ -1,18 +1,25 @@
{{#if error}} {{#if error}}
<svg class="{{className || ''}} avatar size-{{size}}" aria-hidden="true"> <svg class="{{computedClass}}" aria-hidden="true">
<use xlink:href="#fa-user" /> <use xlink:href="#fa-user" />
</svg> </svg>
{{elseif $autoplayGifs}} {{elseif $autoplayGifs}}
<img class="{{className || ''}} avatar size-{{size}}" aria-hidden="true" alt="" <img
src="{{account.avatar}}" on:imgLoadError="set({error: true})" /> class="{{computedClass}}"
aria-hidden="true"
alt=""
src="{{account.avatar}}"
on:imgLoad="set({loaded: true})"
on:imgLoadError="set({error: true})" />
{{else}} {{else}}
<NonAutoplayImg className="{{className || ''}} avatar size-{{size}}" <NonAutoplayImg
ariaHidden="true" className="{{computedClass}}"
alt="" ariaHidden="true"
src="{{account.avatar}}" alt=""
staticSrc="{{account.avatar_static}}" src="{{account.avatar}}"
:isLink staticSrc="{{account.avatar_static}}"
on:imgLoadError="set({error: true})" :isLink
on:imgLoad="set({loaded: true})"
on:imgLoadError="set({error: true})"
/> />
{{/if}} {{/if}}
<style> <style>
@ -21,6 +28,10 @@
background: var(--loading-bg); background: var(--loading-bg);
} }
:global(.avatar.loaded) {
background: none;
}
:global(.avatar.size-extra-small) { :global(.avatar.size-extra-small) {
width: 24px; width: 24px;
height: 24px; height: 24px;
@ -53,15 +64,25 @@
} }
</style> </style>
<script> <script>
import { imgLoadError } from '../_utils/events' import { imgLoad, imgLoadError } from '../_utils/events'
import { store } from '../_store/store' import { store } from '../_store/store'
import NonAutoplayImg from './NonAutoplayImg.html' import NonAutoplayImg from './NonAutoplayImg.html'
import { classname } from '../_utils/classname'
export default { export default {
events: { events: {
imgLoad,
imgLoadError imgLoadError
}, },
store: () => store, store: () => store,
computed: {
computedClass: (className, loaded, size) => (classname(
'avatar',
className,
loaded && 'loaded',
`size-${size}`
))
},
components: { components: {
NonAutoplayImg NonAutoplayImg
} }

5
routes/_components/NonAutoplayImg.html
View File

@ -4,6 +4,7 @@
alt="{{alt || ''}}" alt="{{alt || ''}}"
title="{{alt || ''}}" title="{{alt || ''}}"
src="{{src}}" src="{{src}}"
on:imgLoad
on:imgLoadError /> on:imgLoadError />
{{else}} {{else}}
<img class="{{className || ''}} non-autoplay-zoom-in {{isLink ? 'is-link' : ''}}" <img class="{{className || ''}} non-autoplay-zoom-in {{isLink ? 'is-link' : ''}}"
@ -11,6 +12,7 @@
alt="{{alt || ''}}" alt="{{alt || ''}}"
title="{{alt || ''}}" title="{{alt || ''}}"
src="{{staticSrc}}" src="{{staticSrc}}"
on:imgLoad
on:imgLoadError on:imgLoadError
on:mouseover="onMouseOver(event)" on:mouseover="onMouseOver(event)"
ref:node /> ref:node />
@ -24,7 +26,7 @@
} }
</style> </style>
<script> <script>
import { imgLoadError, mouseover } from '../_utils/events' import { imgLoad, imgLoadError, mouseover } from '../_utils/events'
export default { export default {
methods: { methods: {
onMouseOver (mouseOver) { onMouseOver (mouseOver) {
@ -33,6 +35,7 @@
} }
}, },
events: { events: {
imgLoad,
imgLoadError, imgLoadError,
mouseover mouseover
} }