diff options
author | Marco <marcoambrosini@icloud.com> | 2023-01-23 15:13:25 +0000 |
---|---|---|
committer | Marco <marcoambrosini@icloud.com> | 2023-01-24 15:10:55 +0000 |
commit | 68170691b1f65509790cc72d8d581a2898dd6365 (patch) | |
tree | 8e445b4a61856eb5420c37a529ab5ad8e86b7b28 | |
parent | 4030e9660c54091c2fefbf07a0ab3bfef7a466f1 (diff) |
Improve layout
3 files changed, 96 insertions, 58 deletions
diff --git a/src/components/BreakoutRoomsEditor/BreakoutRoomsEditor.vue b/src/components/BreakoutRoomsEditor/BreakoutRoomsEditor.vue index ceb99549c..a2cdd20b9 100644 --- a/src/components/BreakoutRoomsEditor/BreakoutRoomsEditor.vue +++ b/src/components/BreakoutRoomsEditor/BreakoutRoomsEditor.vue @@ -25,7 +25,6 @@ <div class="breakout-rooms-editor"> <h2>{{ modalTitle }}</h2> <template v-if="!isEditingParticipants"> - <h2>{{ t('spreed', 'Create rooms') }}</h2> <NcInputField :label="t('spreed', 'Number of breakout rooms')" type="number" :value.sync="amount" /> <NcCheckboxRadioSwitch :checked.sync="mode" value="1" @@ -45,15 +44,15 @@ type="radio"> {{ t('spreed', 'Allow participants to choose') }} </NcCheckboxRadioSwitch> + <div class="breakout-rooms-editor__buttons"> + <NcButton type="primary" @click="handleCreateRooms"> + {{ t('spreed', 'Create rooms') }} + </NcButton> + </div> </template> <template v-else> <BreakoutRoomsParticipantsEditor :token="token" /> </template> - <div class="breakout-rooms-editor__buttons"> - <NcButton @click="handleCreateRooms"> - {{ t('spreed', 'Create rooms') }} - </NcButton> - </div> </div> </ncmodal> </template> @@ -120,5 +119,11 @@ export default { padding: 20px; justify-content: flex-start; align-items: flex-start; + height: calc(100% - 80px); +} + +::v-deep .modal-container { + overflow: hidden !important; + height: 100%; } </style> diff --git a/src/components/BreakoutRoomsEditor/BreakoutRoomsParticipantsEditor.vue b/src/components/BreakoutRoomsEditor/BreakoutRoomsParticipantsEditor.vue index a1b8dbb24..e9d51f42b 100644 --- a/src/components/BreakoutRoomsEditor/BreakoutRoomsParticipantsEditor.vue +++ b/src/components/BreakoutRoomsEditor/BreakoutRoomsParticipantsEditor.vue @@ -21,52 +21,63 @@ <template> <div class="participants-editor"> - <NcActions v-if="hasSelected" :menu-title="t('spreed', 'Assign participants to room')"> - <NcActionButton v-for="(item, index) in assignments" :key="index" @click="assignAttendees(index)"> - <template #icon> - <!-- TODO: choose final icon --> - <GoogleCircles :size="20" /> - </template> - {{ roomName(index) }} - </NcActionButton> - <NcActionButton> - <template #icon> - <Reload :size="20" /> - </template> - {{ t('spreed', 'Reset all assignments') }} - </NcActionButton> - </NcActions> - <NcAppNavigationItem key="unassigned" - :title="t('spreed', 'Unassigned participants')" - :allow-collapse="true" - :open="true"> - <template #icon> - <GoogleCircles :size="20" /> - </template> - <SelectableParticipant v-for="participant in unassignedParticipants" - :key="participant.attendeeId" - :value="participant.attendeeId" - :checked.sync="selectedParticipants" - :participant="participant" /> - </NcAppNavigationItem> - <template v-for="(item, index) in assignments"> - <NcAppNavigationItem :key="index" - :title="roomName(index)" + <div class="participants-editor__scroller"> + <NcAppNavigationItem v-if="hasUnassigned" + key="unassigned" + class="participants-editor__section" + :title="t('spreed', 'Unassigned participants')" :allow-collapse="true" :open="true"> <template #icon> <GoogleCircles :size="20" /> </template> - <!-- Template should be simple, declarative, without calling methods when possible --> - <!-- A method is call each time on each re-render for each loop iteration --> - <!-- Not cool for perf as well --> - <SelectableParticipant v-for="attendeeId in item" - :key="attendeeId" - :value="assignments" + <SelectableParticipant v-for="participant in unassignedParticipants" + :key="participant.attendeeId" + :value="participant.attendeeId" :checked.sync="selectedParticipants" - :participant="attendeesById[attendeeId]" /> + :participant="participant" /> </NcAppNavigationItem> - </template> + <template v-for="(item, index) in assignments"> + <NcAppNavigationItem :key="index" + class="participants-editor__section" + :title="roomName(index)" + :allow-collapse="true" + :open="true"> + <template #icon> + <GoogleCircles :size="20" /> + </template> + <SelectableParticipant v-for="attendeeId in item" + :key="attendeeId" + :value="assignments" + :checked.sync="selectedParticipants" + :participant="attendeesById[attendeeId]" /> + </NcAppNavigationItem> + </template> + </div> + <div class="participants-editor__buttons"> + <NcButton v-if="hasAssigned" type="tertiary" @click="resetAssignments"> + <template #icon> + <Reload :size="20" /> + </template> + {{ t('spreed', 'Reset') }} + </NcButton> + <NcActions v-if="hasUnassigned" + :menu-title="t('spreed', 'Assign participants to room')"> + <NcActionButton v-for="(item, index) in assignments" + :key="index" + :close-after-click="true" + @click="assignAttendees(index)"> + <template #icon> + <!-- TODO: choose final icon --> + <GoogleCircles :size="20" /> + </template> + {{ roomName(index) }} + </NcActionButton> + </NcActions> + <NcButton type="primary" @click="handleCreateRooms"> + {{ t('spreed', 'Create rooms') }} + </NcButton> + </div> </div> </template> @@ -77,6 +88,7 @@ import GoogleCircles from 'vue-material-design-icons/GoogleCircles.vue' import Reload from 'vue-material-design-icons/Reload.vue' import NcAppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem.js' import SelectableParticipant from './SelectableParticipant.vue' +import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' export default { name: 'BreakoutRoomsParticipantsEditor', @@ -88,6 +100,7 @@ export default { Reload, NcAppNavigationItem, SelectableParticipant, + NcButton, }, props: { @@ -118,7 +131,7 @@ export default { attendeesById() { // Just get all attendees for this conversation without mapping to an array // Like participants, but object, not array - return this.$store.state.participants.attendees[this.token] + return this.$store.state.participantsStore.attendees[this.token] }, unassignedParticipants() { @@ -133,9 +146,12 @@ export default { }, hasSelected() { - return this.selectedParticipants.length !== 0 + return this.selectedParticipants.length > 0 }, + hasAssigned() { + return this.assignments.flat().length > 0 + }, }, created() { @@ -144,14 +160,6 @@ export default { methods: { initialiseAssignments() { - // let count = 0 - // while (count < this.roomNumber) { - // this.assignments.push([]) - // count++ - // } - - // Just more clean for me - // If it looks complex - then I'd prefer "for" instead of "while". It's fixed this.assignments = Array.from(Array(this.roomNumber), () => []) }, @@ -180,13 +188,38 @@ export default { <style lang="scss" scoped> .participants-editor { display: flex; + width: 100%; flex-direction: column; gap: var(--default-grid-baseline); + height: 100%; + + &__section { + margin: calc(var(--default-grid-baseline) * 2) 0 var(--default-grid-baseline) 0; + + } + &__participant { display: flex; align-items: center; gap: var(--default-grid-baseline); margin-left: 14px; } + + &__scroller { + height: 100%; + overflow: auto; + } + + &__buttons { + display: flex; + justify-content: flex-end; + gap: calc(var(--default-grid-baseline) * 2); + } +} + +// TODO: upsteream collapse icon position fix +::v-deep .icon-collapse { + position: absolute !important; + left: 0; } </style> diff --git a/src/components/RightSidebar/BreakoutRooms/BreakoutRoomsTab.vue b/src/components/RightSidebar/BreakoutRooms/BreakoutRoomsTab.vue index 822b89ddf..f7783e6b3 100644 --- a/src/components/RightSidebar/BreakoutRooms/BreakoutRoomsTab.vue +++ b/src/components/RightSidebar/BreakoutRooms/BreakoutRoomsTab.vue @@ -236,9 +236,9 @@ export default { font-weight: bold !important; } -// TODO: upsteream collapse icon position fix +// TODO: upstream collapse icon position fix ::v-deep .icon-collapse { - position: absolute !important; - left: 0; +position: absolute !important; +left: 0; } </style> |