Skip to content

Commit

Permalink
Polish availibility settings
Browse files Browse the repository at this point in the history
Signed-off-by: greta <gretadoci@gmail.com>
Signed-off-by: nextcloud-command <nextcloud-command@users.noreply.github.com>
  • Loading branch information
GretaD authored and ChristophWurst committed Nov 9, 2021
1 parent 81b60c1 commit 3b22d19
Show file tree
Hide file tree
Showing 3 changed files with 60 additions and 18 deletions.
4 changes: 2 additions & 2 deletions apps/dav/js/settings-personal-availability.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion apps/dav/js/settings-personal-availability.js.map

Large diffs are not rendered by default.

72 changes: 57 additions & 15 deletions apps/dav/src/views/Availability.vue
Original file line number Diff line number Diff line change
Expand Up @@ -6,25 +6,29 @@
</p>
<div class="time-zone">
<strong>
{{ $t('calendar', 'Please select a time zone:') }}
{{ $t('calendar', 'Time zone:') }}
</strong>
<TimezonePicker v-model="timezone" />
<span class="time-zone-text">
<TimezonePicker v-model="timezone" />
</span>
</div>
<div class="grid-table">
<template v-for="day in daysOfTheWeek">
<div :key="`day-label-${day.id}`" class="label-weekday">
{{ day.displayName }}
</div>
<div :key="`day-slots-${day.id}`" class="availability-slots">
<div class="availability-slot">
<div class="availability-slot-group">
<template v-for="(slot, idx) in day.slots">
<div :key="`slot-${day.id}-${idx}`">
<div :key="`slot-${day.id}-${idx}`" class="availability-slot">
<DatetimePicker
v-model="slot.start"
type="time"
class="start-date"
format="H:mm" />
{{ $t('dav', 'to') }}
<span class="to-text">
{{ $t('dav', 'to') }}
</span>
<DatetimePicker
v-model="slot.end"
type="time"
Expand All @@ -37,16 +41,20 @@
</div>
</template>
</div>
<button :disabled="loading"
class="add-another button"
@click="addSlot(day)">
{{ $t('dav', 'Add slot') }}
</button>
<span v-if="day.slots.length === 0"
class="empty-content">
{{ $t('dav', 'No working hours set') }}
</span>
</div>
<button :key="`add-slot-${day.id}`"
:disabled="loading"
class="icon-add add-another button"
:title="$t('dav', 'Add slot')"
@click="addSlot(day)" />
</template>
</div>
<button :disabled="loading || saving"
class="button"
class="button primary"
@click="save">
{{ $t('dav', 'Save') }}
</button>
Expand Down Expand Up @@ -187,16 +195,22 @@ export default {
}
.availability-slots {
display: flex;
padding-left: 8px;
}
.availability-slot {
display: flex;
flex-direction: row;
align-items: center;
}
.availability-slot-group {
display: flex;
flex-direction: column;
}
::v-deep .mx-input-wrapper {
width: 85px;
}
::v-deep .mx-datepicker {
width: 110px;
width: 97px;
}
::v-deep .multiselect {
border: 1px solid var(--color-border-dark);
Expand All @@ -207,20 +221,48 @@ export default {
}
.grid-table {
display: grid;
grid-template-columns: min-content auto;
grid-column-gap: 20px;
grid-row-gap: 20px;
grid-template-columns: min-content min-content min-content;
}
.button {
align-self: flex-end;
}
.label-weekday {
padding: 8px 23px 14px 0;
position: relative;
display: inline-flex;
padding-top: 7px;
}
.delete-slot {
background-color: transparent;
border: none;
padding: 15px;
padding-bottom: 12px;
opacity: .5;
&:hover {
opacity: 1;
}
}
.add-another {
background-color: transparent;
border: none;
opacity: .5;
display: inline-flex;
padding: 0;
&:hover {
opacity: 1;
}
}
.to-text {
padding-right: 12px;
}
.time-zone-text{
padding-left: 22px;
}
.empty-content {
color: var(--color-text-lighter);
align-self: center;
}
</style>

0 comments on commit 3b22d19

Please sign in to comment.