Merge pull request #34335 from nextcloud/backport/34321/stable25

[stable25] Fix invisible status
nextcloud · Sep 30, 2022 · f2d7d13 · f2d7d13
2 parents 4dea095 + 885b55b
commit f2d7d13
Show file tree

Hide file tree

Showing 8 changed files with 24 additions and 12 deletions.
diff --git a/apps/user_status/css/user-status-menu.css b/apps/user_status/css/user-status-menu.css
diff --git a/apps/user_status/css/user-status-menu.css.map b/apps/user_status/css/user-status-menu.css.map
diff --git a/apps/user_status/css/user-status-menu.scss b/apps/user_status/css/user-status-menu.scss
@@ -38,7 +38,7 @@
 	background-image: url('../img/user-status-dnd.svg');
 }
 
-// TODO: debug why icon-black-white does not work here
 .icon-user-status-invisible {
-	@include icon-color('user-status-invisible', 'user_status', variables.$color-black, 1);
+	background-image: url('../img/user-status-invisible.svg');
+	filter: var(--background-invert-if-dark);
 }
diff --git a/apps/user_status/src/components/OnlineStatusSelect.vue b/apps/user_status/src/components/OnlineStatusSelect.vue
@@ -27,8 +27,9 @@
 			type="radio"
 			name="user-status-online"
 			@change="onChange">
-		<label :for="id" :class="icon" class="user-status-online-select__label">
+		<label :for="id" class="user-status-online-select__label">
 			{{ label }}
+			<span :class="icon" role="img" />
 			<em class="user-status-online-select__subline">{{ subline }}</em>
 		</label>
 	</div>
@@ -76,6 +77,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@use 'sass:math';
 $icon-size: 24px;
 $label-padding: 8px;
 
@@ -91,6 +93,7 @@ $label-padding: 8px;
 	}
 
 	&__label {
+		position: relative;
 		display: block;
 		margin: $label-padding;
 		padding: $label-padding;
@@ -105,6 +108,15 @@ $label-padding: 8px;
 		& {
 			cursor: pointer;
 		}
+
+		span {
+			position: absolute;
+			top: calc(50% - math.div($icon-size, 2));
+			left: $label-padding;
+			display: block;
+			width: $icon-size;
+			height: $icon-size;
+		}
 	}
 
 	&__input:checked + &__label,

diff --git a/dist/user-status-modal-8299.js b/dist/user-status-modal-8299.js
diff --git a/dist/user-status-modal-8299.js.map b/dist/user-status-modal-8299.js.map
diff --git a/dist/user_status-menu.js b/dist/user_status-menu.js
diff --git a/dist/user_status-menu.js.map b/dist/user_status-menu.js.map