Add a little arrow to indicate that the list can be opened

Signed-off-by: Joas Schilling <coding@schilljs.com>

apps/updatenotification/css/admin.css

@@ -21,7 +21,12 @@
 	margin-top: 0;
 }
 
-#updatenotification .icon-loading-small {
+#updatenotification .icon {
 	display: inline-block;
 	margin-bottom: -3px;
 }
+
+#updatenotification .icon-triangle-s,
+#updatenotification .icon-triangle-n {
+	opacity: 0.5;
+}

apps/updatenotification/js-src/components/root.vue

@@ -9,14 +9,22 @@
 				</p>
 
 				<template v-if="missingAppUpdates.length">
-					<h3 @click="toggleHideMissingUpdates">{{ t('updatenotification', 'Apps missing updates') }}</h3>
+					<h3 @click="toggleHideMissingUpdates">
+						{{ t('updatenotification', 'Apps missing updates') }}
+						<span v-if="!hideMissingUpdates" class="icon icon-triangle-n"></span>
+						<span v-if="hideMissingUpdates" class="icon icon-triangle-s"></span>
+					</h3>
 					<ul class="applist" v-if="!hideMissingUpdates">
 						<li v-for="app in missingAppUpdates"><a :href="'https://apps.nextcloud.com/apps/' + app.appId" :title="t('settings', 'View in store')">{{app.appName}} ↗</a></li>
 					</ul>
 				</template>
 
 				<template v-if="availableAppUpdates.length">
-					<h3 @click="toggleHideAvailableUpdates">{{ t('updatenotification', 'Apps with available updates') }}</h3>
+					<h3 @click="toggleHideAvailableUpdates">
+						{{ t('updatenotification', 'Apps with available updates') }}
+						<span v-if="!hideAvailableUpdates" class="icon icon-triangle-n"></span>
+						<span v-if="hideAvailableUpdates" class="icon icon-triangle-s"></span>
+					</h3>
 					<ul class="applist">
 						<li v-for="app in availableAppUpdates" v-if="!hideAvailableUpdates"><a :href="'https://apps.nextcloud.com/apps/' + app.appId" :title="t('settings', 'View in store')">{{app.appName}} ↗</a></li>
 					</ul>