From 49df2deb31e7e030d7cb93d15c85ec57a2eab9fe Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Tue, 14 Jul 2020 18:56:59 +0300
Subject: [PATCH] Add badge for displating open reports count
---
src/views/layout/components/Sidebar/Item.vue | 35 +++++++++-----------
1 file changed, 16 insertions(+), 19 deletions(-)
diff --git a/src/views/layout/components/Sidebar/Item.vue b/src/views/layout/components/Sidebar/Item.vue
index 03e3b89f..a19a4288 100644
--- a/src/views/layout/components/Sidebar/Item.vue
+++ b/src/views/layout/components/Sidebar/Item.vue
@@ -1,7 +1,14 @@
+<template>
+ <span>
+ <svg-icon :icon-class="icon"/>
+ <span slot="title">{{ title }}</span>
+ <el-badge :value="count" type="primary" class="count-badge" />
+ </span>
+</template>
+
<script>
export default {
- name: 'MenuItem',
- functional: true,
+ name: 'Item',
props: {
count: {
type: String,
@@ -15,23 +22,13 @@ export default {
type: String,
default: ''
}
- },
- render(h, context) {
- const { count, icon, title } = context.props
- const vnodes = []
-
- if (icon) {
- vnodes.push(<svg-icon icon-class={icon}/>)
- }
-
- if (title) {
- vnodes.push(<span slot='title'>{(title)} </span>)
- }
-
- if (count) {
- vnodes.push(<span slot='title'>({(count)})</span>)
- }
- return vnodes
}
}
</script>
+
+<style rel='stylesheet/scss' lang='scss' scoped>
+.count-badge {
+ margin-left: 5px;
+ height: 48px;
+}
+</style>
--
GitLab