n-drawer(v-model:show='isShown', placement='right', :width='panelWidth')
n-drawer-content.agenda-settings
template(#header)
span Agenda Settings
.agenda-settings-actions.d-flex.justify-content-end
n-dropdown(
:options='actionOptions'
size='large'
:show-arrow='true'
trigger='click'
@select='actionClick'
)
n-button.me-2(
ghost
color='#6c757d'
strong
)
i.bi.bi-three-dots-vertical
n-button(
ghost
color='gray'
strong
@click='close'
)
i.bi.bi-x-lg.me-2
span Close
.agenda-settings-content
n-divider(title-placement='left')
i.bi.bi-globe.me-2
small Timezone
n-button-group.mt-2#agenda-settings-tz-btn(style='justify-content: stretch; width: 100%;')
n-button(
style='flex-grow: 1;'
:type='agendaStore.isTimezoneMeeting ? `primary` : `default`'
@click='setTimezone(`meeting`)'
) Meeting
n-button(
style='flex-grow: 1;'
:type='agendaStore.isTimezoneLocal ? `primary` : `default`'
@click='setTimezone(`local`)'
) Local
n-button(
style='flex-grow: 1;'
:type='agendaStore.timezone === `UTC` ? `primary` : `default`'
@click='setTimezone(`UTC`)'
) UTC
n-select.mt-2#agenda-settings-tz-ddn(
v-model:value='agendaStore.timezone'
:options='timezones'
placeholder='Select Time Zone'
filterable
@update:value='() => { agendaStore.persistMeetingPreferences() }'
)
n-divider(title-placement='left')
i.bi.bi-sliders.me-2
small Display
//- .d-flex.align-items-center.mt-3
//- n-switch.me-3(v-model:value='agendaStore.listDayCollapse', disabled)
//- span.small Collapse Days by Default
#agenda-settings-tgl-colorlgd.d-flex.align-items-center.mt-3
n-switch.me-3(
v-model:value='agendaStore.colorLegendShown'
aria-label='Display Color Legend'
)
span.small.me-2 Display Color Legend
n-popover
template(#trigger)
i.bi.bi-info-circle
span Only displayed when a color is assigned to at least 1 event.
#agenda-settings-tgl-infonote.d-flex.align-items-center.mt-3
n-switch.me-3(
v-model:value='agendaStore.infoNoteShown'
aria-label='Display Current Meeting Info Note'
)
span.small.me-2 Display Current Meeting Info Note
n-popover
template(#trigger)
i.bi.bi-info-circle
span Any update to the note will result in this setting being turned back on.
#agenda-settings-tgl-eventicons.d-flex.align-items-center.mt-3
n-switch.me-3(
v-model:value='agendaStore.eventIconsShown'
aria-label='Display Event Icons'
)
span.small Display Event Icons
#agenda-settings-tgl-floorind.d-flex.align-items-center.mt-3
n-switch.me-3(
v-model:value='agendaStore.floorIndicatorsShown'
aria-label='Display Floor Indicators'
)
span.small Display Floor Indicators
#agenda-settings-tgl-groupind.d-flex.align-items-center.mt-3
n-switch.me-3(
v-model:value='agendaStore.areaIndicatorsShown'
aria-label='Display Group Area Indicators'
)
span.small.me-2 Display Group Area Indicators
n-popover
template(#trigger)
i.bi.bi-info-circle
span Will not be shown on smaller screens, regardless of this setting.
#agenda-settings-tgl-redline.d-flex.align-items-center.mt-3
n-switch.me-3(
v-model:value='agendaStore.redhandShown'
aria-label='Display Realtime Red Line'
)
span.small.me-2 Display Realtime Red Line
n-popover
template(#trigger)
i.bi.bi-info-circle
span Only shown during live events. Updated every 5 seconds.
#agenda-settings-tgl-boldertxt.d-flex.align-items-center.mt-3
n-switch.me-3(
v-model:value='agendaStore.bolderText'
aria-label='Use Bolder Text'
)
span.small.me-2 Use Bolder Text
n-divider(title-placement='left')
i.bi.bi-calendar3.me-2
small Calendar View
span.small.me-2 Default View
n-button-group.mt-2(style='justify-content: stretch; width: 100%;')
n-button(
style='flex-grow: 1;'
:type='agendaStore.defaultCalendarView === `week` ? `primary` : `default`'
@click='agendaStore.defaultCalendarView = `week`'
) Week
n-button(
style='flex-grow: 1;'
:type='agendaStore.defaultCalendarView === `day` ? `primary` : `default`'
@click='agendaStore.defaultCalendarView = `day`'
) Day
n-divider#agenda-settings-colors-header(title-placement='left')
i.bi.bi-palette.me-2
small Custom Colors / Tags
.agenda-settings-colors-row.d-flex.align-items-center.mt-3(v-for='(cl, idx) of state.colors')
n-color-picker.me-3(
:modes='[`hex`]'
:render-label='() => {}'
:show-alpha='false'
size='small'
:swatches='swatches'
v-model:value='cl.hex'
:aria-label='"Color for " + cl.tag'
)
n-input(
type='text'
v-model:value='cl.tag'
:placeholder='"Color " + (idx + 1)'
:aria-label='"Color Name " + (idx + 1)'
)
.agenda-settings-note.mt-3 #[strong Note:] You can hide a color by entering an empty name.
.agenda-settings-debug(v-if='agendaStore.debugTools')
n-divider(title-placement='left')
i.bi.bi-clock-history.me-2
small Override Local DateTime
n-date-picker(
v-model:value='state.currentDateTime'
type='datetime'
style='width: 100%;'
aria-label='Override Local DateTime'
)
template(#date-icon)
i.bi.bi-calendar-check
.agenda-settings-calcoffset
span Calculated Offset: {{ calcOffset }}