diff options
Diffstat (limited to 'apps/user_status/src/components/PredefinedStatus.vue')
| -rw-r--r-- | apps/user_status/src/components/PredefinedStatus.vue | 111 |
1 files changed, 111 insertions, 0 deletions
diff --git a/apps/user_status/src/components/PredefinedStatus.vue b/apps/user_status/src/components/PredefinedStatus.vue new file mode 100644 index 00000000000..c7fd4d63fed --- /dev/null +++ b/apps/user_status/src/components/PredefinedStatus.vue @@ -0,0 +1,111 @@ +<!-- + - @copyright Copyright (c) 2020 Georg Ehrke <oc.list@georgehrke.com> + - @author Georg Ehrke <oc.list@georgehrke.com> + - + - @license GNU AGPL version 3 or any later version + - + - This program is free software: you can redistribute it and/or modify + - it under the terms of the GNU Affero General Public License as + - published by the Free Software Foundation, either version 3 of the + - License, or (at your option) any later version. + - + - This program is distributed in the hope that it will be useful, + - but WITHOUT ANY WARRANTY; without even the implied warranty of + - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + - GNU Affero General Public License for more details. + - + - You should have received a copy of the GNU Affero General Public License + - along with this program. If not, see <http://www.gnu.org/licenses/>. + - + --> +<template> + <div + class="predefined-status" + tabindex="0" + @keyup.enter="select" + @keyup.space="select" + @click="select"> + <span class="predefined-status__icon"> + {{ icon }} + </span> + <span class="predefined-status__message"> + {{ message }} + </span> + <span class="predefined-status__clear-at"> + {{ clearAt | clearAtFilter }} + </span> + </div> +</template> + +<script> +import { clearAtFilter } from '../filters/clearAtFilter' + +export default { + name: 'PredefinedStatus', + filters: { + clearAtFilter, + }, + props: { + messageId: { + type: String, + required: true, + }, + icon: { + type: String, + required: true, + }, + message: { + type: String, + required: true, + }, + clearAt: { + type: Object, + required: false, + default: null, + }, + }, + methods: { + /** + * Emits an event when the user clicks the row + */ + select() { + this.$emit('select') + }, + }, +} +</script> + +<style lang="scss" scoped> +.predefined-status { + display: flex; + flex-wrap: nowrap; + justify-content: flex-start; + flex-basis: 100%; + border-radius: var(--border-radius); + align-items: center; + min-height: 44px; + + &:hover, + &:focus { + background-color: var(--color-background-hover); + } + + &__icon { + flex-basis: 40px; + text-align: center; + } + + &__message { + font-weight: bold; + padding: 0 6px; + } + + &__clear-at { + opacity: .7; + + &::before { + content: ' - '; + } + } +} +</style> |