diff options
| author | John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com> | 2022-09-29 10:52:54 +0200 |
|---|---|---|
| committer | Simon L. (Rebase PR Action) <szaimen@e.mail.de> | 2022-09-29 17:55:44 +0000 |
| commit | 009700f16e65ec38aeb9639aee1ad86cfb8ccb93 (patch) | |
| tree | 381c3e6208f6b504913adacd7dba2beed586bbc0 /apps | |
| parent | fba6f2597a3c4ddb20efbba04430f770eb53ff55 (diff) | |
| download | nextcloud-server-009700f16e65ec38aeb9639aee1ad86cfb8ccb93.tar.gz nextcloud-server-009700f16e65ec38aeb9639aee1ad86cfb8ccb93.zip | |
Fix invisible status
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
Diffstat (limited to 'apps')
| -rw-r--r-- | apps/user_status/css/user-status-menu.css | 3 | ||||
| -rw-r--r-- | apps/user_status/css/user-status-menu.css.map | 2 | ||||
| -rw-r--r-- | apps/user_status/css/user-status-menu.scss | 4 | ||||
| -rw-r--r-- | apps/user_status/src/components/OnlineStatusSelect.vue | 14 |
4 files changed, 17 insertions, 6 deletions
diff --git a/apps/user_status/css/user-status-menu.css b/apps/user_status/css/user-status-menu.css index 9966be2f4ff..88b456f4800 100644 --- a/apps/user_status/css/user-status-menu.css +++ b/apps/user_status/css/user-status-menu.css @@ -94,8 +94,7 @@ } .icon-user-status-invisible { - /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ - background-image: var(--icon-user-status-invisible-dark); + background-image: url("../img/user-status-invisible.svg"); } /*# sourceMappingURL=user-status-menu.css.map */ diff --git a/apps/user_status/css/user-status-menu.css.map b/apps/user_status/css/user-status-menu.css.map index 0363c914a41..6380d5dd687 100644 --- a/apps/user_status/css/user-status-menu.css.map +++ b/apps/user_status/css/user-status-menu.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../../../core/css/variables.scss","user-status-menu.scss","../../../core/css/functions.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsBA;AAAA;AAAA;AA4BA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AD1BA;ACuCC;EAEA;;;ADrCD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAID;ACsBC;EAEA","file":"user-status-menu.css"}
\ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../../../core/css/variables.scss","user-status-menu.scss","../../../core/css/functions.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsBA;AAAA;AAAA;AA4BA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AD1BA;ACuCC;EAEA;;;ADrCD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC","file":"user-status-menu.css"}
\ No newline at end of file diff --git a/apps/user_status/css/user-status-menu.scss b/apps/user_status/css/user-status-menu.scss index 6dc681c1448..1a2066436f0 100644 --- 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 index d9ce249ad13..f920189fce1 100644 --- 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, |