diff options
Diffstat (limited to 'plugins/CoreHome/vue/src/Progressbar')
3 files changed, 74 insertions, 0 deletions
diff --git a/plugins/CoreHome/vue/src/Progressbar/Progressbar.adapter.ts b/plugins/CoreHome/vue/src/Progressbar/Progressbar.adapter.ts new file mode 100644 index 0000000000..79cb2049b3 --- /dev/null +++ b/plugins/CoreHome/vue/src/Progressbar/Progressbar.adapter.ts @@ -0,0 +1,22 @@ +/*! + * Matomo - free/libre analytics platform + * + * @link https://matomo.org + * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later + */ + +import createAngularJsAdapter from '../createAngularJsAdapter'; +import Progressbar from './Progressbar.vue'; + +export default createAngularJsAdapter({ + component: Progressbar, + scope: { + progress: { + angularJsBind: '=', + }, + label: { + angularJsBind: '=', + }, + }, + directiveName: 'piwikProgressbar', +}); diff --git a/plugins/CoreHome/vue/src/Progressbar/Progressbar.less b/plugins/CoreHome/vue/src/Progressbar/Progressbar.less new file mode 100644 index 0000000000..36e7ddef0a --- /dev/null +++ b/plugins/CoreHome/vue/src/Progressbar/Progressbar.less @@ -0,0 +1,7 @@ +.progressbar { + margin: 22px 24px; + + span.label { + margin-left: 4.5px; + } +}
\ No newline at end of file diff --git a/plugins/CoreHome/vue/src/Progressbar/Progressbar.vue b/plugins/CoreHome/vue/src/Progressbar/Progressbar.vue new file mode 100644 index 0000000000..ea0166589c --- /dev/null +++ b/plugins/CoreHome/vue/src/Progressbar/Progressbar.vue @@ -0,0 +1,45 @@ +<!-- + Matomo - free/libre analytics platform + @link https://matomo.org + @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later +--> + +<template> + <div class="progressbar"> + <div class="progress"> + <div + class="determinate" + style="width: 0" + :style="{ width: `${actualProgress}%` }" + /> + </div> + <span v-show="!!label"> + <img src="plugins/Morpheus/images/loading-blue.gif" /> + <span class="label" v-html="$sanitize(label)" /> + </span> + </div> +</template> + +<script lang="ts"> +import { defineComponent } from 'vue'; + +export default defineComponent({ + props: { + progress: Number, + label: String, + }, + computed: { + actualProgress() { + if (this.progress > 100) { + return 100; + } + + if (this.progress < 0) { + return 0; + } + + return this.progress; + }, + }, +}); +</script> |