upstream/nextcloud
1
0
Fork 0
mirror of https://github.com/nextcloud/server.git synced 2026-06-13 18:50:47 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 8

Merge pull request #29590 from nextcloud/enhanc/availibility_settings_polishing

Browse source 
Polish availibility settings
This commit is contained in:
Christoph Wurst 2021-11-09 18:06:24 +01:00 committed by GitHub
commit 52f8f4a399
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 60 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
apps/dav/js/settings-personal-availability.js
View file

File diff suppressed because one or more lines are too long

2
apps/dav/js/settings-personal-availability.js.map
View file

File diff suppressed because one or more lines are too long

72
apps/dav/src/views/Availability.vue
View file

@ -6,9 +6,11 @@
</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">
@ -16,15 +18,17 @@
{{ 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"
@ -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>
@ -187,8 +195,14 @@ 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;
}
@ -196,7 +210,7 @@ export default {
width: 85px;
}
::v-deep .mx-datepicker {
width: 110px;
width: 97px;
}
::v-deep .multiselect {
border: 1px solid var(--color-border-dark);
@ -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>