45 lines
968 B
Vue
45 lines
968 B
Vue
|
<template>
|
||
|
|
<v-img class="image-with-progress" v-bind="{...$props, ...$attrs}">
|
||
|
|
<LoadProgress class="image-with-progress__progress" v-if="loadingProgress >= 0 && loadingProgress < 100" :percentage="loadingProgress" />
|
||
|
|
</v-img>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import User from "../models/user";
|
||
|
|
import util from "../plugins/utils";
|
||
|
|
import rememberMeMixin from "./rememberMeMixin";
|
||
|
|
import * as sdk from "matrix-js-sdk";
|
||
|
|
import logoMixin from "./logoMixin";
|
||
|
|
import LoadProgress
|
||
|
|
from "./LoadProgress.vue";
|
||
|
|
export default {
|
||
|
|
name: "ImageWithProgress",
|
||
|
|
components: { LoadProgress },
|
||
|
|
props: {
|
||
|
|
loadingProgress: {
|
||
|
|
type: Number,
|
||
|
|
default: function () {
|
||
|
|
return -1;
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {};
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
.image-with-progress {
|
||
|
|
position: relative;
|
||
|
|
.image-with-progress__progress {
|
||
|
|
position: absolute;
|
||
|
|
top: 4px;
|
||
|
|
right: 4px;
|
||
|
|
color: white;
|
||
|
|
width: 32px;
|
||
|
|
height: 32px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|