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

Move online status into modal
This commit is contained in:
Roeland Jago Douma 2020-10-02 11:24:29 +02:00 committed by GitHub
commit 905e1918d2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
48 changed files with 407 additions and 220 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -20,70 +20,59 @@
--> -->
<template> <template>
<li :class="{ inline }"> <li>
<div id="user-status-menu-item"> <div class="user-status-menu-item">
<!-- Username display -->
<span <span
v-if="!inline" v-if="!inline"
id="user-status-menu-item__header" class="user-status-menu-item__header"
:title="displayName"> :title="displayName">
{{ displayName }} {{ displayName }}
</span> </span>
<Actions
id="user-status-menu-item__subheader" <!-- Status modal toggle -->
:default-icon="statusIcon" <toggle :is="inline ? 'button' : 'a'"
container="header" :class="{'user-status-menu-item__toggle--inline': inline}"
:menu-title="visibleMessage" class="user-status-menu-item__toggle"
:title="visibleMessage"> href="#"
<ActionButton @click.prevent.stop="openModal">
v-for="status in statuses" <span :class="statusIcon" class="user-status-menu-item__toggle-icon" />
:key="status.type" {{ visibleMessage }}
:icon="status.icon" </toggle>
:close-after-click="true"
:title="status.label"
@click.prevent.stop="changeStatus(status.type)">
{{ status.subline }}
</ActionButton>
<ActionButton
icon="icon-rename"
:close-after-click="true"
:title="$t('user_status', 'Set status message')"
@click.prevent.stop="openModal" />
</Actions>
<SetStatusModal
v-if="isModalOpen"
@close="closeModal" />
</div> </div>
<!-- Status management modal -->
<SetStatusModal
v-if="isModalOpen"
@close="closeModal" />
</li> </li>
</template> </template>
<script> <script>
import { getCurrentUser } from '@nextcloud/auth' import { getCurrentUser } from '@nextcloud/auth'
import SetStatusModal from './components/SetStatusModal'
import Actions from '@nextcloud/vue/dist/Components/Actions'
import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
import { mapState } from 'vuex'
import { showError } from '@nextcloud/dialogs'
import { getAllStatusOptions } from './services/statusOptionsService'
import { sendHeartbeat } from './services/heartbeatService'
import debounce from 'debounce' import debounce from 'debounce'
import { sendHeartbeat } from './services/heartbeatService'
import OnlineStatusMixin from './mixins/OnlineStatusMixin'
export default { export default {
name: 'App', name: 'UserStatus',
components: { components: {
Actions, SetStatusModal: () => import(/* webpackChunkName: 'user-status-modal' */'./components/SetStatusModal'),
ActionButton,
SetStatusModal,
}, },
mixins: [OnlineStatusMixin],
props: { props: {
inline: { inline: {
type: Boolean, type: Boolean,
default: false, default: false,
}, },
}, },
data() { data() {
return { return {
isModalOpen: false, isModalOpen: false,
statuses: getAllStatusOptions(),
heartbeatInterval: null, heartbeatInterval: null,
setAwayTimeout: null, setAwayTimeout: null,
mouseMoveListener: null, mouseMoveListener: null,
@ -91,12 +80,6 @@ export default {
} }
}, },
computed: { computed: {
...mapState({
statusType: state => state.userStatus.status,
statusIsUserDefined: state => state.userStatus.statusIsUserDefined,
customIcon: state => state.userStatus.icon,
customMessage: state => state.userStatus.message,
}),
/** /**
* The display-name of the current user * The display-name of the current user
* *
@ -105,64 +88,8 @@ export default {
displayName() { displayName() {
return getCurrentUser().displayName return getCurrentUser().displayName
}, },
/**
* The message displayed in the top right corner
*
* @returns {String}
*/
visibleMessage() {
if (this.customIcon && this.customMessage) {
return `${this.customIcon} ${this.customMessage}`
}
if (this.customMessage) {
return this.customMessage
}
if (this.statusIsUserDefined) {
switch (this.statusType) {
case 'online':
return this.$t('user_status', 'Online')
case 'away':
return this.$t('user_status', 'Away')
case 'dnd':
return this.$t('user_status', 'Do not disturb')
case 'invisible':
return this.$t('user_status', 'Invisible')
case 'offline':
return this.$t('user_status', 'Offline')
}
}
return this.$t('user_status', 'Set status')
},
/**
* The status indicator icon
*
* @returns {String|null}
*/
statusIcon() {
switch (this.statusType) {
case 'online':
return 'icon-user-status-online'
case 'away':
return 'icon-user-status-away'
case 'dnd':
return 'icon-user-status-dnd'
case 'invisible':
case 'offline':
return 'icon-user-status-invisible'
}
return ''
},
}, },
/** /**
* Loads the current user's status from initial state * Loads the current user's status from initial state
* and stores it in Vuex * and stores it in Vuex
@ -198,6 +125,7 @@ export default {
this._backgroundHeartbeat() this._backgroundHeartbeat()
} }
}, },
/** /**
* Some housekeeping before destroying the component * Some housekeeping before destroying the component
*/ */
@ -205,6 +133,7 @@ export default {
window.removeEventListener('mouseMove', this.mouseMoveListener) window.removeEventListener('mouseMove', this.mouseMoveListener)
clearInterval(this.heartbeatInterval) clearInterval(this.heartbeatInterval)
}, },
methods: { methods: {
/** /**
* Opens the modal to set a custom status * Opens the modal to set a custom status
@ -218,19 +147,7 @@ export default {
closeModal() { closeModal() {
this.isModalOpen = false this.isModalOpen = false
}, },
/**
* Changes the user-status
*
* @param {String} statusType (online / away / dnd / invisible)
*/
async changeStatus(statusType) {
try {
await this.$store.dispatch('setStatus', { statusType })
} catch (err) {
showError(this.$t('user_status', 'There was an error saving the new status'))
console.debug(err)
}
},
/** /**
* Sends the status heartbeat to the server * Sends the status heartbeat to the server
* *
@ -248,65 +165,55 @@ export default {
<style lang="scss"> <style lang="scss">
$max-width-user-status: 200px; $max-width-user-status: 200px;
li:not(.inline) #user-status-menu-item { .user-status-menu-item {
&__header { &__header {
display: block; display: block;
box-sizing: border-box;
color: var(--color-text-maxcontrast);
padding: 10px 12px 5px 38px;
opacity: 1;
white-space: nowrap;
text-align: left;
max-width: $max-width-user-status;
overflow: hidden; overflow: hidden;
box-sizing: border-box;
max-width: $max-width-user-status;
padding: 10px 12px 5px 38px;
text-align: left;
white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
opacity: 1;
color: var(--color-text-maxcontrast);
} }
&__subheader { &__toggle {
width: 100%; &-icon {
width: 16px;
button.action-item__menutoggle { height: 16px;
display: block; margin-right: 10px;
box-sizing: border-box; opacity: 1 !important;
background-color: var(--color-main-background);
background-position: 12px center;
background-size: 16px; background-size: 16px;
border: 0; }
border-radius: 0;
font-weight: normal;
padding-left: 38px;
opacity: 1;
max-width: $max-width-user-status;
overflow: hidden;
text-overflow: ellipsis;
// In dashboard
&--inline {
width: auto;
min-width: 44px;
height: 44px;
margin: 0;
border: 0;
border-radius: var(--border-radius-pill);
background-color: var(--color-background-translucent);
font-size: inherit;
font-weight: normal;
-webkit-backdrop-filter: var(--background-blur);
backdrop-filter: var(--background-blur);
&:active,
&:hover, &:hover,
&:focus { &:focus {
box-shadow: inset 4px 0 var(--color-primary-element); background-color: var(--color-background-hover);
} }
} }
} }
} }
.inline #user-status-menu-item__subheader { li {
width: 100%; list-style-type: none;
button.action-item__menutoggle {
background-size: 16px;
border: 0;
border-radius: var(--border-radius-pill);
font-weight: normal;
padding-left: 40px;
&.icon-loading-small {
&::after {
left: 21px;
}
}
}
} }
li {
list-style-type: none;
}
</style> </style>

View File

@ -0,0 +1,103 @@
<!--
- @copyright Copyright (c) 2020 John Molakvoæ <skjnldsv@protonmail.com>
-
- @author John Molakvoæ <skjnldsv@protonmail.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="user-status-online-select">
<input :id="id"
:checked="checked"
class="user-status-online-select__input"
type="radio"
name="user-status-online"
@change="onChange">
<label :for="id" :class="icon" class="user-status-online-select__label">
<slot />
</label>
</div>
</template>
<script>
export default {
name: 'OnlineStatusSelect',
props: {
checked: {
type: Boolean,
default: false,
},
icon: {
type: String,
required: true,
},
type: {
type: String,
required: true,
},
},
computed: {
id() {
return `user-status-online-status-${this.type}`
},
},
methods: {
onChange() {
this.$emit('select', this.type)
},
},
}
</script>
<style lang="scss" scoped>
$icon-size: 24px;
$label-padding: 8px;
.user-status-online-select {
// Inputs are here for keyboard navigation, they are not visually visible
&__input {
position: absolute;
top: auto;
left: -10000px;
overflow: hidden;
width: 1px;
height: 1px;
}
&__label {
display: block;
margin: $label-padding;
padding: $label-padding;
padding-left: $icon-size + $label-padding * 2;
border: 2px solid var(--color-main-background);
border-radius: var(--border-radius-large);
background-color: var(--color-background-hover);
background-position: $label-padding center;
background-size: $icon-size;
}
&__input:checked + &__label,
&__input:focus + &__label,
&__label:hover {
border-color: var(--color-primary);
}
}
</style>

View File

@ -22,11 +22,27 @@
<template> <template>
<Modal <Modal
size="normal" size="normal"
:title="$t('user_status', 'Set status message')" :title="$t('user_status', 'Set status')"
@close="closeModal"> @close="closeModal">
<div class="set-status-modal"> <div class="set-status-modal">
<!-- Status selector -->
<div class="set-status-modal__header"> <div class="set-status-modal__header">
<h3>{{ $t('user_status', 'Set status message') }}</h3> <h3>{{ $t('user_status', 'Online status') }}</h3>
</div>
<div class="set-status-modal__online-status">
<OnlineStatusSelect v-for="status in statuses"
:key="status.type"
v-bind="status"
:checked="status.type === statusType"
@select="changeStatus">
{{ status.label }}
<em class="subline">{{ status.subline }}</em>
</OnlineStatusSelect>
</div>
<!-- Status message -->
<div class="set-status-modal__header">
<h3>{{ $t('user_status', 'Status message') }}</h3>
</div> </div>
<div class="set-status-modal__custom-input"> <div class="set-status-modal__custom-input">
<EmojiPicker @select="setIcon"> <EmojiPicker @select="setIcon">
@ -57,27 +73,36 @@
</template> </template>
<script> <script>
import { showError } from '@nextcloud/dialogs'
import EmojiPicker from '@nextcloud/vue/dist/Components/EmojiPicker' import EmojiPicker from '@nextcloud/vue/dist/Components/EmojiPicker'
import Modal from '@nextcloud/vue/dist/Components/Modal' import Modal from '@nextcloud/vue/dist/Components/Modal'
import { getAllStatusOptions } from '../services/statusOptionsService'
import OnlineStatusMixin from '../mixins/OnlineStatusMixin'
import PredefinedStatusesList from './PredefinedStatusesList' import PredefinedStatusesList from './PredefinedStatusesList'
import CustomMessageInput from './CustomMessageInput' import CustomMessageInput from './CustomMessageInput'
import ClearAtSelect from './ClearAtSelect' import ClearAtSelect from './ClearAtSelect'
import { showError } from '@nextcloud/dialogs' import OnlineStatusSelect from './OnlineStatusSelect'
export default { export default {
name: 'SetStatusModal', name: 'SetStatusModal',
components: { components: {
ClearAtSelect,
CustomMessageInput,
EmojiPicker, EmojiPicker,
Modal, Modal,
CustomMessageInput, OnlineStatusSelect,
PredefinedStatusesList, PredefinedStatusesList,
ClearAtSelect,
}, },
mixins: [OnlineStatusMixin],
data() { data() {
return { return {
clearAt: null,
icon: null, icon: null,
message: null, message: null,
clearAt: null, statuses: getAllStatusOptions(),
} }
}, },
computed: { computed: {
@ -90,6 +115,7 @@ export default {
return this.icon || '😀' return this.icon || '😀'
}, },
}, },
/** /**
* Loads the current status when a user opens dialog * Loads the current status when a user opens dialog
*/ */
@ -208,6 +234,25 @@ export default {
min-width: 500px; min-width: 500px;
min-height: 200px; min-height: 200px;
padding: 8px 20px 20px 20px; padding: 8px 20px 20px 20px;
// Enable scrollbar for too long content, same way as in Dashboard customize
max-height: 70vh;
overflow: auto;
&__header {
text-align: center;
font-weight: bold;
}
&__online-status {
display: grid;
// Space between the two sections
margin-bottom: 40px;
grid-template-columns: 1fr 1fr;
.subline {
display: block;
}
}
&__custom-input { &__custom-input {
display: flex; display: flex;
@ -216,12 +261,12 @@ export default {
.custom-input__emoji-button { .custom-input__emoji-button {
flex-basis: 40px; flex-basis: 40px;
width: 40px;
flex-grow: 0; flex-grow: 0;
border-radius: var(--border-radius) 0 0 var(--border-radius); width: 40px;
height: 34px; height: 34px;
margin-right: 0; margin-right: 0;
border-right: none; border-right: none;
border-radius: var(--border-radius) 0 0 var(--border-radius);
} }
} }
@ -233,4 +278,5 @@ export default {
} }
} }
} }
</style> </style>

View File

@ -21,7 +21,7 @@
*/ */
import Vue from 'vue' import Vue from 'vue'
import { getRequestToken } from '@nextcloud/auth' import { getRequestToken } from '@nextcloud/auth'
import App from './App' import UserStatus from './UserStatus'
import store from './store' import store from './store'
// eslint-disable-next-line camelcase // eslint-disable-next-line camelcase
@ -36,18 +36,23 @@ __webpack_public_path__ = OC.linkTo('user_status', 'js/')
Vue.prototype.t = t Vue.prototype.t = t
Vue.prototype.$t = t Vue.prototype.$t = t
const app = new Vue({ // Register settings menu entry
render: h => h(App), export default new Vue({
el: 'li[data-id="user_status-menuitem"]',
// eslint-disable-next-line vue/match-component-file-name
name: 'UserStatusRoot',
render: h => h(UserStatus),
store, store,
}).$mount('li[data-id="user_status-menuitem"]') })
// Register dashboard status
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
if (!OCA.Dashboard) { if (!OCA.Dashboard) {
return return
} }
OCA.Dashboard.registerStatus('status', (el) => { OCA.Dashboard.registerStatus('status', (el) => {
const Dashboard = Vue.extend(App) const Dashboard = Vue.extend(UserStatus)
return new Dashboard({ return new Dashboard({
propsData: { propsData: {
inline: true, inline: true,
@ -56,5 +61,3 @@ document.addEventListener('DOMContentLoaded', function() {
}).$mount(el) }).$mount(el)
}) })
}) })
export { app }

View File

@ -0,0 +1,110 @@
/**
* @copyright Copyright (c) 2020 John Molakvoæ <skjnldsv@protonmail.com>
*
* @author John Molakvoæ <skjnldsv@protonmail.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/>.
*
*/
import { mapState } from 'vuex'
import { showError } from '@nextcloud/dialogs'
export default {
computed: {
...mapState({
statusType: state => state.userStatus.status,
statusIsUserDefined: state => state.userStatus.statusIsUserDefined,
customIcon: state => state.userStatus.icon,
customMessage: state => state.userStatus.message,
}),
/**
* The message displayed in the top right corner
*
* @returns {String}
*/
visibleMessage() {
if (this.customIcon && this.customMessage) {
return `${this.customIcon} ${this.customMessage}`
}
if (this.customMessage) {
return this.customMessage
}
if (this.statusIsUserDefined) {
switch (this.statusType) {
case 'online':
return this.$t('user_status', 'Online')
case 'away':
return this.$t('user_status', 'Away')
case 'dnd':
return this.$t('user_status', 'Do not disturb')
case 'invisible':
return this.$t('user_status', 'Invisible')
case 'offline':
return this.$t('user_status', 'Offline')
}
}
return this.$t('user_status', 'Set status')
},
/**
* The status indicator icon
*
* @returns {String|null}
*/
statusIcon() {
switch (this.statusType) {
case 'online':
return 'icon-user-status-online'
case 'away':
return 'icon-user-status-away'
case 'dnd':
return 'icon-user-status-dnd'
case 'invisible':
case 'offline':
return 'icon-user-status-invisible'
}
return ''
},
},
methods: {
/**
* Changes the user-status
*
* @param {String} statusType (online / away / dnd / invisible)
*/
async changeStatus(statusType) {
try {
await this.$store.dispatch('setStatus', { statusType })
} catch (err) {
showError(this.$t('user_status', 'There was an error saving the new status'))
console.debug(err)
}
},
},
}

View File

@ -44,6 +44,7 @@ const getAllStatusOptions = () => {
}, { }, {
type: 'invisible', type: 'invisible',
label: t('user_status', 'Invisible'), label: t('user_status', 'Invisible'),
subline: t('user_status', 'Appear offline'),
icon: 'icon-user-status-invisible', icon: 'icon-user-status-invisible',
}] }]
} }

View File

@ -2,18 +2,18 @@ const path = require('path')
module.exports = { module.exports = {
entry: { entry: {
'dashboard': path.join(__dirname, 'src', 'dashboard'), dashboard: path.join(__dirname, 'src', 'dashboard'),
'user-status-menu': path.join(__dirname, 'src', 'main-user-status-menu') 'user-status-menu': path.join(__dirname, 'src', 'main-user-status-menu'),
}, },
output: { output: {
path: path.resolve(__dirname, './js'), path: path.resolve(__dirname, './js'),
publicPath: '/js/', publicPath: '/js/',
filename: '[name].js?v=[chunkhash]', filename: '[name].js?v=[chunkhash]',
jsonpFunction: 'webpackJsonpUserStatus' jsonpFunction: 'webpackJsonpUserStatus',
}, },
optimization: { optimization: {
splitChunks: { splitChunks: {
automaticNameDelimiter: '-', automaticNameDelimiter: '-',
} },
} },
} }

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

6
package-lock.json generated
View File

@ -1272,9 +1272,9 @@
} }
}, },
"@nextcloud/vue": { "@nextcloud/vue": {
"version": "2.6.6", "version": "2.6.7",
"resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-2.6.6.tgz", "resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-2.6.7.tgz",
"integrity": "sha512-amlFNT5uDnz8ryFeD4birEXXx2K0KyV5nthYoIuz6A7liOxFwOF7BX7jNwhYkM21JvSloMCfm76BcK+DxtShOw==", "integrity": "sha512-ISu1ceEifRpQ7TiXykCnr/mPPtmlmGLW2hOOq3DBbpxueiEk8w6JCBB7SCwNbSg01T/vm01dlnT1ibHm1HjAIg==",
"requires": { "requires": {
"@nextcloud/auth": "^1.2.3", "@nextcloud/auth": "^1.2.3",
"@nextcloud/axios": "^1.3.2", "@nextcloud/axios": "^1.3.2",

View File

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

View File

@ -5,7 +5,8 @@ Feature: header
Given I am logged in as the admin Given I am logged in as the admin
When I open the Settings menu When I open the Settings menu
Then I see that the Settings menu is shown Then I see that the Settings menu is shown
And I see that the Settings menu has only 5 items And I see that the Settings menu has only 6 items
And I see that the "Set status" item in the Settings menu is shown
And I see that the "Settings" item in the Settings menu is shown And I see that the "Settings" item in the Settings menu is shown
And I see that the "Apps" item in the Settings menu is shown And I see that the "Apps" item in the Settings menu is shown
And I see that the "Users" item in the Settings menu is shown And I see that the "Users" item in the Settings menu is shown
@ -16,7 +17,8 @@ Feature: header
Given I am logged in Given I am logged in
When I open the Settings menu When I open the Settings menu
Then I see that the Settings menu is shown Then I see that the Settings menu is shown
And I see that the Settings menu has only 3 items And I see that the Settings menu has only 4 items
And I see that the "Set status" item in the Settings menu is shown
And I see that the "Settings" item in the Settings menu is shown And I see that the "Settings" item in the Settings menu is shown
And I see that the "Help" item in the Settings menu is shown And I see that the "Help" item in the Settings menu is shown
And I see that the "Log out" item in the Settings menu is shown And I see that the "Log out" item in the Settings menu is shown