Skip to content

Commit

Permalink
Merge pull request #39073 from nextcloud/fix/setting_migrate-from-dep…
Browse files Browse the repository at this point in the history
…recated-ncpopovermenu
  • Loading branch information
Pytal authored Jun 30, 2023
2 parents d76f398 + e36fc97 commit cb118d5
Show file tree
Hide file tree
Showing 16 changed files with 389 additions and 209 deletions.
2 changes: 1 addition & 1 deletion apps/settings/css/settings.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion apps/settings/css/settings.css.map

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

52 changes: 8 additions & 44 deletions apps/settings/css/settings.scss
Original file line number Diff line number Diff line change
Expand Up @@ -1386,7 +1386,7 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
// Scroll if too much groups
&:not(.row--editable) {
.groups,
.subadmins,
.subadmins,
.subAdminsGroups {
overflow: auto;
max-height: 100%;
Expand All @@ -1395,7 +1395,7 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {

.managers,
.groups,
.subadmins,
.subadmins,
.subAdminsGroups,
.quota {
min-width: $grid-col-min-width;
Expand Down Expand Up @@ -1569,50 +1569,14 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {

&.userActions {
display: flex;
align-items: center;
justify-content: flex-end;

#newsubmit {
width: 100%;
}

.toggleUserActions {
position: relative;
display: flex;
align-items: center;
background-color: var(--color-main-background);

.icon-more {
width: 44px;
height: 44px;
opacity: .5;
cursor: pointer;

&:focus,
&:hover,
&:active {
opacity: .7;
background-color: var(--color-background-dark)
}
}
}

.feedback {
display: flex;
align-items: center;
white-space: nowrap;
transition: opacity 200ms ease-in-out;

.icon-checkmark {
opacity: .5;
margin-right: 5px;
}
}
}

/* Fill the grid cell */
.v-select.select-vue {
min-width: 100%;
width: 100%;
// Make sure to cover whole row
height: 100%;
width: fit-content;
padding-inline: 12px;
background-color: var(--color-main-background);
}
}
}
Expand Down
78 changes: 30 additions & 48 deletions apps/settings/src/components/Users/UserRow.vue
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,6 @@
<!-- User full data -->
<UserRowSimple v-else-if="!editing"
:editing.sync="editing"
:feedback-message="feedbackMessage"
:groups="groups"
:languages="languages"
:loading="loading"
Expand Down Expand Up @@ -222,59 +221,41 @@
</div>

<div class="userActions">
<div v-if="!loading.all"
class="toggleUserActions">
<NcActions>
<NcActionButton icon="icon-checkmark"
:title="t('settings', 'Done')"
:aria-label="t('settings', 'Done')"
@click="handleDoneButton" />
</NcActions>
<div v-click-outside="hideMenu" class="userPopoverMenuWrapper">
<button class="icon-more"
:aria-expanded="openedMenu"
:aria-label="t('settings', 'Toggle user actions menu')"
@click.prevent="toggleMenu" />
<div :class="{ 'open': openedMenu }" class="popovermenu">
<NcPopoverMenu :menu="userActions" />
</div>
</div>
</div>
<div :style="{opacity: feedbackMessage !== '' ? 1 : 0}"
class="feedback">
<div class="icon-checkmark" />
{{ feedbackMessage }}
</div>
<UserRowActions v-if="!loading.all"
:actions="userActions"
:edit="true"
@update:edit="toggleEdit" />
</div>
</div>
</template>

<script>
import ClickOutside from 'vue-click-outside'
import { showSuccess, showError } from '@nextcloud/dialogs'
import NcPopoverMenu from '@nextcloud/vue/dist/Components/NcPopoverMenu.js'
import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js'
import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
import ClickOutside from 'vue-click-outside'
import UserRowActions from './UserRowActions.vue'
import UserRowSimple from './UserRowSimple.vue'
import UserRowMixin from '../../mixins/UserRowMixin.js'
import { showSuccess, showError } from '@nextcloud/dialogs'
export default {
name: 'UserRow',
components: {
UserRowSimple,
NcPopoverMenu,
NcActions,
NcActionButton,
NcSelect,
NcTextField,
UserRowActions,
UserRowSimple,
},
directives: {
ClickOutside,
},
mixins: [UserRowMixin],
props: {
users: {
type: Array,
Expand Down Expand Up @@ -325,7 +306,6 @@ export default {
selectedQuota: false,
rand: parseInt(Math.random() * 1000),
openedMenu: false,
feedbackMessage: '',
possibleManagers: [],
currentManager: '',
editing: false,
Expand All @@ -348,8 +328,8 @@ export default {
editedMail: this.user.email ?? '',
}
},
computed: {
computed: {
/* USER POPOVERMENU ACTIONS */
userActions() {
const actions = [
Expand Down Expand Up @@ -400,8 +380,10 @@ export default {
return this.languages[0].languages.concat(this.languages[1].languages)
},
},
async beforeMount() {
await this.searchUserManager()
if (this.user.manager) {
await this.initManager(this.user.manager)
}
Expand Down Expand Up @@ -432,13 +414,14 @@ export default {
this.loading.wipe = true
this.loading.all = true
this.$store.dispatch('wipeUserDevices', userid)
.then(() => {
.then(() => showSuccess(t('settings', 'Wiped {userid}\'s devices', { userid })), { timeout: 2000 })
.finally(() => {
this.loading.wipe = false
this.loading.all = false
})
}
},
true
true,
)
},
Expand Down Expand Up @@ -500,7 +483,7 @@ export default {
})
}
},
true
true,
)
},
Expand Down Expand Up @@ -778,19 +761,13 @@ export default {
sendWelcomeMail() {
this.loading.all = true
this.$store.dispatch('sendWelcomeMail', this.user.id)
.then(success => {
if (success) {
// Show feedback to indicate the success
this.feedbackMessage = t('setting', 'Welcome mail sent!')
setTimeout(() => {
this.feedbackMessage = ''
}, 2000)
}
.then(() => showSuccess(t('setting', 'Welcome mail sent!'), { timeout: 2000 }))
.finally(() => {
this.loading.all = false
})
},
handleDoneButton() {
toggleEdit() {
this.editing = false
if (this.editedDisplayName !== this.user.displayname) {
this.editedDisplayName = this.user.displayname
Expand All @@ -807,7 +784,12 @@ export default {
z-index: 1 !important;
}
.row :deep() {
.row :deep() {
.v-select.select {
// reset min width to 100% instead of X px
min-width: 100%;
}
.mailAddress,
.password,
.displayName {
Expand Down
78 changes: 78 additions & 0 deletions apps/settings/src/components/Users/UserRowActions.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
<template>
<NcActions :aria-label="t('settings', 'Toggle user actions menu')"
:inline="1">
<NcActionButton @click="toggleEdit">
{{ edit ? t('settings', 'Done') : t('settings', 'Edit') }}
<template #icon>
<NcIconSvgWrapper :svg="editSvg" aria-hidden="true" />
</template>
</NcActionButton>
<NcActionButton v-for="(action, index) in actions"
:key="index"
:aria-label="action.text"
:icon="action.icon"
@click="action.action">
{{ action.text }}
</NcActionButton>
</NcActions>
</template>

<script lang="ts">
import { PropType, defineComponent } from 'vue'
import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js'
import SvgCheck from '@mdi/svg/svg/check.svg?raw'
import SvgPencil from '@mdi/svg/svg/pencil.svg?raw'
interface UserAction {
action: (event: MouseEvent) => void,
icon: string,
text: string
}
export default defineComponent({
components: {
NcActionButton,
NcActions,
NcIconSvgWrapper,
},
props: {
/**
* Array of user actions
*/
actions: {
type: Array as PropType<readonly UserAction[]>,
required: true,
},
/**
* The state whether the row is currently edited
*/
edit: {
type: Boolean,
required: true,
},
},
computed: {
/**
* Current MDI logo to show for edit toggle
*/
editSvg() {
return this.edit ? SvgCheck : SvgPencil
},
},
methods: {
/**
* Toggle edit mode by emitting the update event
*/
toggleEdit() {
this.$emit('update:edit', !this.edit)
},
},
})
</script>
43 changes: 10 additions & 33 deletions apps/settings/src/components/Users/UserRowSimple.vue
Original file line number Diff line number Diff line change
Expand Up @@ -59,45 +59,26 @@
{{ user.manager }}
</div>
<div class="userActions">
<div v-if="canEdit && !loading.all" class="toggleUserActions">
<NcActions>
<NcActionButton icon="icon-rename"
:title="t('settings', 'Edit User')"
:aria-label="t('settings', 'Edit User')"
@click="toggleEdit" />
</NcActions>
<div class="userPopoverMenuWrapper">
<button v-click-outside="hideMenu"
class="icon-more"
:aria-expanded="openedMenu"
:aria-label="t('settings', 'Toggle user actions menu')"
@click.prevent="toggleMenu" />
<div class="popovermenu" :class="{ 'open': openedMenu }">
<NcPopoverMenu :menu="userActions" />
</div>
</div>
</div>
<div class="feedback" :style="{opacity: feedbackMessage !== '' ? 1 : 0}">
<div class="icon-checkmark" />
{{ feedbackMessage }}
</div>
<UserRowActions v-if="canEdit && !loading.all"
:actions="userActions"
:edit="false"
@update:edit="toggleEdit" />
</div>
</div>
</template>

<script>
import NcPopoverMenu from '@nextcloud/vue/dist/Components/NcPopoverMenu.js'
import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
import ClickOutside from 'vue-click-outside'
import { getCurrentUser } from '@nextcloud/auth'
import ClickOutside from 'vue-click-outside'
import UserRowActions from './UserRowActions.vue'
import UserRowMixin from '../../mixins/UserRowMixin.js'
export default {
name: 'UserRowSimple',
components: {
NcPopoverMenu,
NcActionButton,
NcActions,
UserRowActions,
},
directives: {
ClickOutside,
Expand All @@ -124,10 +105,6 @@ export default {
type: Boolean,
required: true,
},
feedbackMessage: {
type: String,
required: true,
},
subAdminsGroups: {
type: Array,
required: true,
Expand Down
Loading

0 comments on commit cb118d5

Please sign in to comment.