basic notify_push usage with session handling (rebased)

Signed-off-by: chandi Langecker <git@chandi.it>

src/components/SessionList.vue

@@ -0,0 +1,115 @@
+<!--
+ * @copyright Copyright (c) 2019 Julius Härtl <jus@bitgrid.net>
+ * @copyright Copyright (c) 2022, chandi Langecker (git@chandi.it)
+ *
+ * @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/>.
+ *
+ * -->
+
+<template>
+	<div class="session-list">
+		<button slot="trigger"
+			v-tooltip.bottom="t('text', 'Active people')"
+			class="avatar-list">
+			<div v-for="session in sessionsVisible"
+				:key="session"
+				class="avatar-wrapper"
+				:style="sessionAvatarStyle">
+				<Avatar :user="session"
+					:disable-menu="true"
+					:show-user-status="false"
+					:disable-tooltip="true"
+					:size="size" />
+			</div>
+		</button>
+	</div>
+</template>
+
+<script>
+import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
+import Avatar from '@nextcloud/vue/dist/Components/Avatar'
+
+export default {
+	name: 'SessionList',
+	components: {
+		Avatar,
+	},
+	directives: {
+		tooltip: Tooltip,
+	},
+	props: {
+		sessions: {
+			type: Array,
+			default: () => { return [] },
+		},
+		size: {
+			type: Number,
+			default: () => 32,
+		},
+	},
+	computed: {
+		sessionsVisible() {
+			if (!this.sessions) return []
+			return this.sessions.slice(0, 5)
+		},
+		sessionAvatarStyle() {
+			return {
+				'--size': this.size + 'px',
+				'--font-size': this.size / 2 + 'px',
+			}
+		},
+	},
+}
+</script>
+
+<style scoped lang="scss">
+.session-list {
+	padding-left: 0.5em;
+	padding-right: 0.5em;
+}
+.avatar-list {
+	border: none;
+	background-color: var(--color-main-background);
+	padding: 0;
+	margin: 0;
+	padding-left: 6px;
+	display: inline-flex;
+	flex-direction: row-reverse;
+
+	&:focus {
+		background-color: #eee;
+	}
+
+}
+
+.avatar-wrapper {
+	background-color: #b9b9b9;
+	border-radius: 50%;
+	border-width: 2px;
+	border-style: solid;
+	width: var(--size);
+	height: var(--size);
+	text-align: center;
+	color: #ffffff;
+	line-height: var(--size);
+	font-size: var(--font-size);
+	font-weight: normal;
+	z-index: 1;
+	overflow: hidden;
+	box-sizing: content-box !important;
+	margin-left: -8px;
+}
+</style>