diff options
Diffstat (limited to 'apps/user_status/src')
7 files changed, 58 insertions, 39 deletions
diff --git a/apps/user_status/src/components/ClearAtSelect.vue b/apps/user_status/src/components/ClearAtSelect.vue index c685e77daa8..91b816dc04a 100644 --- a/apps/user_status/src/components/ClearAtSelect.vue +++ b/apps/user_status/src/components/ClearAtSelect.vue @@ -14,6 +14,7 @@ :value="option" :clearable="false" placement="top" + label-outside @option:selected="select" /> </div> </template> @@ -72,12 +73,9 @@ export default { <style lang="scss" scoped> .clear-at-select { display: flex; - margin-bottom: 10px; + gap: calc(2 * var(--default-grid-baseline)); align-items: center; - - &__label { - margin-inline-end: 12px; - } + margin-block: 0 calc(2 * var(--default-grid-baseline)); &__select { flex-grow: 1; diff --git a/apps/user_status/src/components/OnlineStatusSelect.vue b/apps/user_status/src/components/OnlineStatusSelect.vue index cf34aefef53..0abcc8d68e6 100644 --- a/apps/user_status/src/components/OnlineStatusSelect.vue +++ b/apps/user_status/src/components/OnlineStatusSelect.vue @@ -11,9 +11,10 @@ name="user-status-online" @change="onChange"> <label :for="id" class="user-status-online-select__label"> - {{ label }} <NcUserStatusIcon :status="type" + class="user-status-online-select__icon" aria-hidden="true" /> + {{ label }} <em class="user-status-online-select__subline">{{ subline }}</em> </label> </div> @@ -63,45 +64,42 @@ export default { </script> <style lang="scss" scoped> -@use 'sass:math'; -$icon-size: 24px; -$label-padding: 8px; - .user-status-online-select { &__label { - position: relative; - display: block; - margin: $label-padding; - padding: $label-padding; - padding-inline-start: $icon-size + $label-padding * 2; - border: 2px solid var(--color-main-background); + box-sizing: inherit; + display: grid; + grid-template-columns: var(--default-clickable-area) 1fr 2fr; + align-items: center; + gap: var(--default-grid-baseline); + min-height: var(--default-clickable-area); + padding: var(--default-grid-baseline); border-radius: var(--border-radius-large); background-color: var(--color-background-hover); - background-position: $label-padding center; - background-size: $icon-size; - span, - & { + &, & * { cursor: pointer; } - span { - position: absolute; - top: calc(50% - 10px); - inset-inline-start: 10px; - display: block; - width: $icon-size; - height: $icon-size; + &:hover { + background-color: var(--color-background-dark); } } + &__icon { + flex-shrink: 0; + max-width: 34px; + max-height: 100%; + } + &__input:checked + &__label { outline: 2px solid var(--color-main-text); + background-color: var(--color-background-dark); box-shadow: 0 0 0 4px var(--color-main-background); } &__input:focus-visible + &__label { outline: 2px solid var(--color-primary-element) !important; + background-color: var(--color-background-dark); } &__subline { diff --git a/apps/user_status/src/components/PredefinedStatus.vue b/apps/user_status/src/components/PredefinedStatus.vue index 8ce1acd0411..b12892d4add 100644 --- a/apps/user_status/src/components/PredefinedStatus.vue +++ b/apps/user_status/src/components/PredefinedStatus.vue @@ -81,10 +81,19 @@ export default { flex-basis: 100%; border-radius: var(--border-radius); align-items: center; - min-height: 44px; + min-height: var(--default-clickable-area); + padding-inline: var(--default-grid-baseline); + + &, & * { + cursor: pointer; + } + + &:hover { + background-color: var(--color-background-dark); + } &--icon { - flex-basis: 40px; + flex-basis: var(--default-clickable-area); text-align: center; } @@ -106,11 +115,13 @@ export default { &__label:active { outline: 2px solid var(--color-main-text); box-shadow: 0 0 0 4px var(--color-main-background); + background-color: var(--color-background-dark); border-radius: var(--border-radius-large); } &__input:focus-visible + &__label { outline: 2px solid var(--color-primary-element) !important; + background-color: var(--color-background-dark); border-radius: var(--border-radius-large); } } diff --git a/apps/user_status/src/components/PredefinedStatusesList.vue b/apps/user_status/src/components/PredefinedStatusesList.vue index 0632d13d52c..cdf359dce76 100644 --- a/apps/user_status/src/components/PredefinedStatusesList.vue +++ b/apps/user_status/src/components/PredefinedStatusesList.vue @@ -78,6 +78,7 @@ export default { .predefined-statuses-list { display: flex; flex-direction: column; - margin-bottom: 10px; + gap: var(--default-grid-baseline); + margin-block: 0 calc(2 * var(--default-grid-baseline)); } </style> diff --git a/apps/user_status/src/components/PreviousStatus.vue b/apps/user_status/src/components/PreviousStatus.vue index 221498ed2a2..58d6ebd294b 100644 --- a/apps/user_status/src/components/PreviousStatus.vue +++ b/apps/user_status/src/components/PreviousStatus.vue @@ -65,7 +65,8 @@ export default { flex-basis: 100%; border-radius: var(--border-radius); align-items: center; - min-height: 44px; + min-height: var(--default-clickable-area); + padding-inline: var(--default-grid-baseline); &:hover, &:focus { @@ -77,7 +78,7 @@ export default { } &__icon { - flex-basis: 40px; + flex-basis: var(--default-clickable-area); text-align: center; } diff --git a/apps/user_status/src/components/SetStatusModal.vue b/apps/user_status/src/components/SetStatusModal.vue index bafa9b193a5..8624ed19e94 100644 --- a/apps/user_status/src/components/SetStatusModal.vue +++ b/apps/user_status/src/components/SetStatusModal.vue @@ -5,8 +5,8 @@ <template> <NcModal size="normal" - :name="$t('user_status', 'Set status')" - aria-labelledby="user_status-set-dialog" + label-id="user_status-set-dialog" + dark :set-return-focus="setReturnFocus" @close="closeModal"> <div class="set-status-modal"> @@ -336,6 +336,10 @@ export default { .set-status-modal { padding: 8px 20px 20px 20px; + &, & * { + box-sizing: border-box; + } + &__header { font-size: 21px; text-align: center; @@ -343,12 +347,14 @@ export default { min-height: var(--default-clickable-area); line-height: var(--default-clickable-area); overflow-wrap: break-word; - margin-block: 0 12px; + margin-block: 0 calc(2 * var(--default-grid-baseline)); } &__online-status { - display: grid; - grid-template-columns: 1fr 1fr; + display: flex; + flex-direction: column; + gap: calc(2 * var(--default-grid-baseline)); + margin-block: 0 calc(2 * var(--default-grid-baseline)); } &__custom-input { @@ -357,13 +363,14 @@ export default { align-items: center; gap: var(--default-grid-baseline); width: 100%; - margin-bottom: 10px; + padding-inline-start: var(--default-grid-baseline); + margin-block: 0 calc(2 * var(--default-grid-baseline)); } &__automation-hint { display: flex; width: 100%; - margin-bottom: 10px; + margin-block: 0 calc(2 * var(--default-grid-baseline)); color: var(--color-text-maxcontrast); } diff --git a/apps/user_status/src/services/statusOptionsService.js b/apps/user_status/src/services/statusOptionsService.js index 7280e58ec75..6c23645e5be 100644 --- a/apps/user_status/src/services/statusOptionsService.js +++ b/apps/user_status/src/services/statusOptionsService.js @@ -18,6 +18,9 @@ const getAllStatusOptions = () => { type: 'away', label: t('user_status', 'Away'), }, { + type: 'busy', + label: t('user_status', 'Busy'), + }, { type: 'dnd', label: t('user_status', 'Do not disturb'), subline: t('user_status', 'Mute all notifications'), |