Introduce CounterBubble component

Replaces AppNavigationCounter as a more generic component.

Signed-off-by: Vincent Petry <[email protected]>

src/components/AppNavigationCounter/AppNavigationCounter.vue

@@ -20,7 +20,7 @@
  -
  -->
 
- <docs>
+<docs>
 
 ### Normal Counter
 
@@ -46,6 +46,9 @@
 
 <script>
 
+/**
+ * @deprecated use [CounterBubble](#/Components/CounterBubble) instead
+ */
 export default {
 	name: 'AppNavigationCounter',
 

src/components/CounterBubble/CounterBubble.vue

@@ -0,0 +1,82 @@
+<!--
+ - @copyright Copyright (c) 2019 Marco Ambrosini <[email protected]>
+ -
+ - @author Marco Ambrosini <[email protected]>
+ -
+ - @license GNU AGPL version 3 or any later version
+ -
+ - This program is free software: you can redistribute it and/or modify
+ - it under the terms of the GNU Affero General Public License as
+ - published by the Free Software Foundation, either version 3 of the
+ - License, or (at your option) any later version.
+ -
+ - This program is distributed in the hope that it will be useful,
+ - but WITHOUT ANY WARRANTY; without even the implied warranty of
+ - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ - GNU Affero General Public License for more details.
+ -
+ - You should have received a copy of the GNU Affero General Public License
+ - along with this program. If not, see <http://www.gnu.org/licenses/>.
+ -
+ -->
+
+ <docs>
+
+### Normal Counter
+
+```
+<CounterBubble>314+</CounterBubble>
+```
+
+### Highlighted Counter (i.e. mentions)
+
+```
+<CounterBubble :highlighted="true">@admin</CounterBubble>
+<CounterBubble :highlighted="true">314+</CounterBubble>
+```
+
+</docs>
+
+<template>
+	<div :class="{ 'counter-bubble__counter--highlighted': highlighted }"
+		class="counter-bubble__counter">
+		<slot />
+	</div>
+</template>
+
+<script>
+
+export default {
+	name: 'CounterBubble',
+
+	props: {
+		highlighted: {
+			type: Boolean,
+			default: false,
+		},
+	},
+}
+
+</script>
+
+<style lang="scss" scoped>
+.counter-bubble__counter {
+	font-size: calc(var(--default-font-size) * .8);
+	overflow: hidden;
+	width: fit-content;
+	max-width: $clickable-area;
+	text-align: center;
+	text-overflow: ellipsis;
+	line-height: 1em;
+	padding: 4px 8px;
+	border-radius: var(--border-radius-pill);
+	background-color: var(--color-background-darker);
+
+	&--highlighted {
+		padding: 4px 6px;
+		color: var(--color-primary-text);
+		background-color: var(--color-primary);
+	}
+}
+
+</style>

src/components/CounterBubble/index.js

@@ -0,0 +1,25 @@
+/**
+ * @copyright Copyright (c) 2021 Vincent Petry <[email protected]>
+ *
+ * @author Vincent Petry <[email protected]>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+import CounterBubble from './CounterBubble'
+
+export default CounterBubble

src/components/index.js

@@ -54,6 +54,7 @@ import Breadcrumbs from './Breadcrumbs'
 import CheckboxRadio from './CheckboxRadio'
 import ColorPicker from './ColorPicker'
 import Content from './Content'
+import CounterBubble from './CounterBubble'
 import DatetimePicker from './DatetimePicker'
 import EmptyContent from './EmptyContent'
 import ListItem from './ListItem'
@@ -100,6 +101,7 @@ export {
 	CheckboxRadio,
 	ColorPicker,
 	Content,
+	CounterBubble,
 	DatetimePicker,
 	EmptyContent,
 	ListItem,