Merge pull request #1895 from nextcloud/enh/noid/counterbubble

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/AppNavigationItem/AppNavigationItem.vue

@@ -64,9 +64,9 @@ Just nest the counter into `<AppNavigationItem>` and add `slot="counter"` to it.
 
 ```
 <AppNavigationItem title="Item with counter" icon="icon-folder">
-	<AppNavigationCounter slot="counter">
+	<CounterBubble slot="counter">
 		99+
-	</AppNavigationCounter>
+	</CounterBubble>
 </AppNavigationItem>
 ```
 

src/components/CounterBubble/CounterBubble.vue

@@ -0,0 +1,82 @@
+<!--
+ - @copyright Copyright (c) 2019 Marco Ambrosini <marcoambrosini@pm.me>
+ -
+ - @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/ListItem/ListItem.vue

@@ -30,14 +30,14 @@
 		:counter-number="44"
 		:counter-highlighted="true">
 		<template #icon>
-			<avatar size="44" user="janedoe" display-name="Jane Doe" />
+			<avatar :size="44" user="janedoe" display-name="Jane Doe" />
 		</template>
 		<template #subtitle>
 			In this slot you can put both text and other components such as icons
 		</template>
-		<AppNavigationCounter #counter>
+		<CounterBubble #counter>
 			7
-		</AppNavigationCounter>
+		</CounterBubble>
 		<template #actions>
 			<ActionButton>
 				Button one
@@ -54,14 +54,14 @@
 		:title="'Title of the element'"
 		:bold="false">
 		<template #icon>
-			<avatar size="44" user="janedoe" display-name="Jane Doe" />
+			<avatar :size="44" user="janedoe" display-name="Jane Doe" />
 		</template>
 		<template #subtitle>
 			In this slot you can put both text and other components such as icons
 		</template>
-		<AppNavigationCounter #counter>
+		<CounterBubble #counter>
 			7
-		</AppNavigationCounter>
+		</CounterBubble>
 		<template #actions>
 			<ActionButton>
 				Button one
@@ -79,14 +79,14 @@
 		:bold="false"
 		:details="'One hour ago'">
 		<template #icon>
-			<avatar size="44" user="janedoe" display-name="Jane Doe" />
+			<avatar :size="44" user="janedoe" display-name="Jane Doe" />
 		</template>
 		<template #subtitle>
 			In this slot you can put both text and other components such as icons
 		</template>
-		<AppNavigationCounter #counter>
+		<CounterBubble #counter>
 			7
-		</AppNavigationCounter>
+		</CounterBubble>
 	</listItem>
 </ul>
 
@@ -145,11 +145,11 @@
 
 							<!-- Counter -->
 							<span v-if="!displayActions" class="line-two__counter">
-								<AppNavigationCounter
+								<CounterBubble
 									v-if="counterNumber != 0"
 									:highlighted="counterHighlighted">
 									{{ counterNumber }}
-								</AppNavigationCounter>
+								</CounterBubble>
 							</span>
 						</div>
 					</div>
@@ -182,14 +182,14 @@
 
 <script>
 import Actions from '../Actions'
-import AppNavigationCounter from '../AppNavigationCounter'
+import CounterBubble from '../CounterBubble'
 
 export default {
 	name: 'ListItem',
 
 	components: {
 		Actions,
-		AppNavigationCounter,
+		CounterBubble,
 	},
 
 	props: {
@@ -268,7 +268,7 @@ export default {
 
 		/**
 		 * If different from from 0 this component will display the
-		 * AppNavigationCounter component
+		 * CounterBubble component
 		 */
 		 counterNumber: {
 			 type: [Number, String],

src/components/index.js

@@ -54,6 +54,7 @@ import Breadcrumbs from './Breadcrumbs'
 import CheckboxRadioSwitch from './CheckboxRadioSwitch'
 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 {
 	CheckboxRadioSwitch,
 	ColorPicker,
 	Content,
+	CounterBubble,
 	DatetimePicker,
 	EmptyContent,
 	ListItem,