Skip to content

Commit

Permalink
fix(meeting): adjust styles and wording
Browse files Browse the repository at this point in the history 
Signed-off-by: Maksim Sukharev <[email protected]>
  • Loading branch information
@Antreesy
Antreesy committed Jan 16, 2025
1 parent 58fe0a5 commit 04fb3cd
Showing 1 changed file with 76 additions and 68 deletions.
144 changes: 76 additions & 68 deletions src/components/CalendarEventsDialog.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
<script setup lang="ts">
import { computed, onBeforeMount, provide, ref, watch } from 'vue'

import IconAccountPlus from 'vue-material-design-icons/AccountPlus.vue'
import IconAccountSearch from 'vue-material-design-icons/AccountSearch.vue'
import IconCalendarBlank from 'vue-material-design-icons/CalendarBlank.vue'
import IconCheck from 'vue-material-design-icons/Check.vue'
Expand Down Expand Up @@ -96,14 +97,14 @@ const invalidHint = computed(() => {
case null:
return ''
case 'calendar':
return t('spreed', 'Error: Invalid calendar selected')
return t('spreed', 'Invalid calendar selected')
case 'start':
return t('spreed', 'Error: Invalid start time selected')
return t('spreed', 'Invalid start time selected')
case 'end':
return t('spreed', 'Error: Invalid end time selected')
return t('spreed', 'Invalid end time selected')
case 'unknown':
default:
return t('spreed', 'Error: Unknown error occurred')
return t('spreed', 'Unknown error occurred')
}
})

Expand Down Expand Up @@ -289,59 +290,62 @@ async function submitNewMeeting() {
</NcPopover>

<NcDialog v-if="canScheduleMeeting"
id="calendar-meeting"
:open.sync="isFormOpen"
class="calendar-events"
class="calendar-meeting"
:name="t('spreed', 'Schedule a meeting')"
size="normal"
close-on-click-outside
:container="container">
<div id="calendar-meeting" class="calendar-meeting">
<NcTextField v-model="newMeetingTitle"
:label="t('spreed', 'Meeting title')"
label-visible />
<NcTextArea v-model="newMeetingDescription"
:label="t('spreed', 'Description')"
resize="vertical"
label-visible />
<div class="calendar-meeting__flex-wrapper">
<NcDateTimePickerNative id="schedule_meeting_input"
v-model="selectedDateTimeStart"
:class="{ 'invalid-time': invalid === 'start' }"
:min="new Date()"
:step="300"
:label="t('spreed', 'From')"
type="datetime-local" />
<NcDateTimePickerNative id="schedule_meeting_input"
v-model="selectedDateTimeEnd"
:class="{ 'invalid-time': invalid === 'end' }"
:min="new Date()"
:step="300"
:label="t('spreed', 'To')"
type="datetime-local" />
</div>
<NcSelect id="schedule_meeting_select"
v-model="selectedCalendar"
:options="calendarOptions"
:input-label="t('spreed', 'Calendar')">
<template #selected-option="option">
<span class="calendar-badge" :style="{ backgroundColor: option.color }" />
{{ option.label }}
</template>
<template #option="option">
<span class="calendar-badge" :style="{ backgroundColor: option.color }" />
{{ option.label }}
</template>
</NcSelect>
<NcCheckboxRadioSwitch v-model="selectAll" type="switch" @update:modelValue="toggleAll">
{{ t('spreed', 'Invite all users and email guests') }}
</NcCheckboxRadioSwitch>
<div class="calendar-meeting__flex-wrapper">
<p>{{ attendeeHint }}</p>
<NcButton @click="isSelectorOpen = true">
{{ t('spreed', 'Select attendees') }}
</NcButton>
</div>
<NcTextField v-model="newMeetingTitle"
:label="t('spreed', 'Meeting title')"
label-visible />
<NcTextArea v-model="newMeetingDescription"
:label="t('spreed', 'Description')"
resize="vertical"
label-visible />
<div class="calendar-meeting__flex-wrapper">
<NcDateTimePickerNative id="schedule_meeting_input"
v-model="selectedDateTimeStart"
:class="{ 'invalid-time': invalid === 'start' }"
:min="new Date()"
:step="300"
:label="t('spreed', 'From')"
type="datetime-local" />
<NcDateTimePickerNative id="schedule_meeting_input"
v-model="selectedDateTimeEnd"
:class="{ 'invalid-time': invalid === 'end' }"
:min="new Date()"
:step="300"
:label="t('spreed', 'To')"
type="datetime-local" />
</div>
<NcSelect id="schedule_meeting_select"
v-model="selectedCalendar"
:options="calendarOptions"
:input-label="t('spreed', 'Calendar')">
<template #selected-option="option">
<span class="calendar-badge" :style="{ backgroundColor: option.color }" />
{{ option.label }}
</template>
<template #option="option">
<span class="calendar-badge" :style="{ backgroundColor: option.color }" />
{{ option.label }}
</template>
</NcSelect>
<h5 class="calendar-meeting__header">
{{ t('spreed', 'Attendees') }}
</h5>
<NcCheckboxRadioSwitch v-model="selectAll" @update:modelValue="toggleAll">
{{ t('spreed', 'Invite all users and emails') }}
</NcCheckboxRadioSwitch>
<NcButton type="tertiary" @click="isSelectorOpen = true">
<template #icon>
<IconAccountPlus :size="20" />
</template>
{{ t('spreed', 'Add attendees') }}
</NcButton>
<p>{{ attendeeHint }}</p>

<template #actions>
<p v-if="invalidHint" class="calendar-meeting__invalid-hint">
Expand All @@ -361,7 +365,8 @@ async function submitNewMeeting() {

<NcDialog v-if="canScheduleMeeting"
:open.sync="isSelectorOpen"
:name="t('spreed', 'Select attendees')"
:name="t('spreed', 'Add attendees')"
class="calendar-meeting"
close-on-click-outside
container="#calendar-meeting">
<SearchBox class="calendar-meeting__searchbox"
Expand All @@ -381,22 +386,20 @@ async function submitNewMeeting() {
<IconAccountSearch />
</template>
</NcEmptyContent>
<template #actions>
<NcButton type="primary" @click="isSelectorOpen = false">
<template #icon>
<IconCheck :size="20" />
</template>
{{ t('spreed', 'Done') }}
</NcButton>
</template>
</NcDialog>
</div>
</template>

<style lang="scss" scoped>
.calendar-events {
margin-block-end: calc(var(--default-grid-baseline) * 2);

:deep(.dialog__content) {
padding-block-end: calc(var(--default-grid-baseline) * 3);
}

:deep(.dialog__actions) {
align-items: center;
}

&__list {
--item-height: calc(2lh + var(--default-grid-baseline) * 3);
display: flex;
Expand Down Expand Up @@ -468,14 +471,19 @@ async function submitNewMeeting() {
}

.calendar-meeting {
display: flex;
flex-direction: column;
margin: calc(var(--default-grid-baseline) / 2);
gap: var(--default-grid-baseline);
:deep(.dialog__content) {
display: flex;
flex-direction: column;
margin: calc(var(--default-grid-baseline) / 2);
gap: var(--default-grid-baseline);
}

:deep(.dialog__actions) {
align-items: center;
}

&__header {
margin-block: calc(var(--default-grid-baseline) * 3);
text-align: center;
margin-block: calc(var(--default-grid-baseline) * 2);
}

&__invalid-hint {
Expand Down

0 comments on commit 04fb3cd

Please sign in to comment.