mirror of
https://github.com/Ocelot-Social-Community/Ocelot-Social.git
synced 2025-12-13 07:46:06 +00:00
d463312397
- there are several things to work on still - the upload sets the avatar as the background image of the previewElement, which means that you must refresh the page to upload a different avatar - the CSS is slightly different before and after successful upload - the CSS is slightly broken in that the avatar is not in the "ideal" place, it is entirely inside the card, instead of half in, half out on the top
69 lines
1.2 KiB
Vue
69 lines
1.2 KiB
Vue
<template>
|
|
<ds-space
|
|
class="hc-empty"
|
|
centered
|
|
:margin="margin"
|
|
>
|
|
<ds-text>
|
|
<img
|
|
:src="iconPath"
|
|
width="80"
|
|
class="hc-empty-icon"
|
|
style="margin-bottom: 5px"
|
|
alt="Empty"
|
|
><br>
|
|
<ds-text
|
|
v-show="message"
|
|
class="hc-empty-message"
|
|
color="softer"
|
|
>
|
|
{{ message }}
|
|
</ds-text>
|
|
</ds-text>
|
|
</ds-space>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'HcEmpty',
|
|
props: {
|
|
/**
|
|
* Icon that should be shown
|
|
* @options messages|events|alert|tasks|docs|file
|
|
*/
|
|
icon: {
|
|
type: String,
|
|
required: true,
|
|
validator: value => {
|
|
return value.match(/(messages|events|alert|tasks|docs|file)/)
|
|
}
|
|
},
|
|
/**
|
|
* Message that appears under the icon
|
|
*/
|
|
message: {
|
|
type: String,
|
|
default: null
|
|
},
|
|
/**
|
|
* Vertical spacing
|
|
*/
|
|
margin: {
|
|
type: [String, Object],
|
|
default: 'x-large'
|
|
}
|
|
},
|
|
computed: {
|
|
iconPath() {
|
|
return `/img/empty/${this.icon}.svg`
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.hc-empty-icon {
|
|
padding-bottom: $font-space-large;
|
|
}
|
|
</style>
|