Merge pull request #23135 from nextcloud/fix/user-status

Fix subline hint

apps/user_status/src/components/OnlineStatusSelect.vue

@@ -28,7 +28,8 @@
 			name="user-status-online"
 			@change="onChange">
 		<label :for="id" :class="icon" class="user-status-online-select__label">
-			<slot />
+			{{ label }}
+			<em class="user-status-online-select__subline">{{ subline }}</em>
 		</label>
 	</div>
 </template>
@@ -50,6 +51,14 @@ export default {
 			type: String,
 			required: true,
 		},
+		label: {
+			type: String,
+			required: true,
+		},
+		subline: {
+			type: String,
+			default: null,
+		},
 	},
 
 	computed: {
@@ -91,6 +100,11 @@ $label-padding: 8px;
 		background-color: var(--color-background-hover);
 		background-position: $label-padding center;
 		background-size: $icon-size;
+
+		span,
+		& {
+			cursor: pointer;
+		}
 	}
 
 	&__input:checked + &__label,
@@ -98,6 +112,11 @@ $label-padding: 8px;
 	&__label:hover {
 		border-color: var(--color-primary);
 	}
+
+	&__subline {
+		display: block;
+		color: var(--color-text-lighter);
+	}
 }
 
 </style>

apps/user_status/src/components/SetStatusModal.vue

@@ -34,10 +34,7 @@
 					:key="status.type"
 					v-bind="status"
 					:checked="status.type === statusType"
-					@select="changeStatus">
-					{{ status.label }}
-					<em class="subline">{{ status.subline }}</em>
-				</OnlineStatusSelect>
+					@select="changeStatus" />
 			</div>
 
 			<!-- Status message -->
@@ -248,10 +245,6 @@ export default {
 		// Space between the two sections
 		margin-bottom: 40px;
 		grid-template-columns: 1fr 1fr;
-
-		.subline {
-			display: block;
-		}
 	}
 
 	&__custom-input {

package-lock.json

@@ -1272,9 +1272,9 @@
       }
     },
     "@nextcloud/vue": {
-      "version": "2.6.7",
-      "resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-2.6.7.tgz",
-      "integrity": "sha512-ISu1ceEifRpQ7TiXykCnr/mPPtmlmGLW2hOOq3DBbpxueiEk8w6JCBB7SCwNbSg01T/vm01dlnT1ibHm1HjAIg==",
+      "version": "2.6.8",
+      "resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-2.6.8.tgz",
+      "integrity": "sha512-9yi9V4gX4Y1uxh2hNxCAlTHaS9zolzAy7x1sowII/WZfxMysF/yIGmEsnYGyz6CZ5eYCzxNUgrU5p/HQ21/09Q==",
       "requires": {
         "@nextcloud/auth": "^1.2.3",
         "@nextcloud/axios": "^1.3.2",

package.json

@@ -39,7 +39,7 @@
     "@nextcloud/password-confirmation": "^1.0.1",
     "@nextcloud/paths": "^1.1.2",
     "@nextcloud/router": "^1.1.0",
-    "@nextcloud/vue": "^2.6.7",
+    "@nextcloud/vue": "^2.6.8",
     "@nextcloud/vue-dashboard": "^1.0.1",
     "autosize": "^4.0.2",
     "backbone": "^1.4.0",