105 lines
1.9 KiB
Vue
105 lines
1.9 KiB
Vue
<template>
|
|
<view class="oa-app-icon" :class="'oa-app-icon--' + size" :style="boxStyle">
|
|
<image
|
|
v-if="resolved.kind === 'ep'"
|
|
class="oa-app-icon__glyph"
|
|
:src="epSrc"
|
|
mode="aspectFit"
|
|
/>
|
|
<image
|
|
v-else
|
|
class="oa-app-icon__photo"
|
|
:src="resolved.src"
|
|
mode="aspectFit"
|
|
/>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { resolveOaAppIcon, epIconDataUri } from '../utils/oa-app-icons.js'
|
|
|
|
export default {
|
|
name: 'OaAppIcon',
|
|
props: {
|
|
iconUrl: { type: String, default: '' },
|
|
/** xs=28, sm=32, card=36, md=40, lg=48 */
|
|
size: { type: String, default: 'sm' }
|
|
},
|
|
computed: {
|
|
resolved() {
|
|
return resolveOaAppIcon(this.iconUrl)
|
|
},
|
|
boxStyle() {
|
|
if (this.resolved.kind === 'ep') {
|
|
return { background: this.resolved.bg }
|
|
}
|
|
return {}
|
|
},
|
|
epSrc() {
|
|
if (this.resolved.kind !== 'ep') return ''
|
|
return epIconDataUri(this.resolved.icon, this.resolved.fg)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.oa-app-icon {
|
|
flex-shrink: 0;
|
|
overflow: hidden;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.oa-app-icon--xs {
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: 7px;
|
|
}
|
|
.oa-app-icon--sm {
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 8px;
|
|
}
|
|
.oa-app-icon--card {
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 8px;
|
|
}
|
|
.oa-app-icon--md {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 10px;
|
|
}
|
|
.oa-app-icon--lg {
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: 12px;
|
|
}
|
|
.oa-app-icon__glyph {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
.oa-app-icon--xs .oa-app-icon__glyph {
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
.oa-app-icon--card .oa-app-icon__glyph {
|
|
width: 18px;
|
|
height: 18px;
|
|
}
|
|
.oa-app-icon--md .oa-app-icon__glyph {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
.oa-app-icon--lg .oa-app-icon__glyph {
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
.oa-app-icon__photo {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
}
|
|
</style>
|