Skip to content

Commit ef13cb6

Browse files
GVodyanovGVodyanov
committed
feat(Settings): redesign to new vue components
Signed-off-by: Grigory V <[email protected]> # Conflicts: # package-lock.json
1 parent 390732b commit ef13cb6

File tree

5 files changed

+193
-249
lines changed

5 files changed

+193
-249
lines changed

‎css/app-settings.scss‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,7 @@
55

66
#app-settings-modal {
77
.settings-fieldset-interior-item {
8-
max-width: calc(var(--default-grid-baseline) * 68);
98
align-items: stretch;
10-
padding: 5px 0;
119
}
1210

1311
.button-content-with-icon {

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@
5858
"@nextcloud/notify_push": "^1.3.1",
5959
"@nextcloud/router": "^3.0.1",
6060
"@nextcloud/timezones": "^1.0.2",
61-
"@nextcloud/vue": "^8.33.0",
61+
"@nextcloud/vue": "^8.34.0",
6262
"autosize": "^6.0.1",
6363
"color-convert": "^3.1.2",
6464
"color-string": "^2.1.2",

‎src/components/AppNavigation/Settings.vue‎

Lines changed: 118 additions & 145 deletions
Original file line numberDiff line numberDiff line change
@@ -17,92 +17,76 @@
1717
id="app-settings-modal"
1818
class="app-settings-modal"
1919
:name="t('mail', 'Calendar settings')"
20+
:legacy="false"
2021
:show-navigation="true"
2122
:additional-trap-elements="[]"
2223
:open="showSettingsModal"
2324
@update:open="(val) => showSettingsModal = val">
2425
<NcAppSettingsSection
2526
id="settings-modal-general"
26-
class="calendar-settings-modal-section"
2727
:name="t('calendar', 'General')">
28-
<SettingsImportSection
29-
class="settings-fieldset-interior-item"
28+
<SettingsTimezoneSelect
3029
:is-disabled="loadingCalendars" />
31-
<NcButton
32-
variant="tertiary"
33-
target="_blank"
34-
:href="availabilitySettingsUrl">
35-
<template #icon>
36-
<CalendarClockIcon :size="20" decorative />
37-
</template>
38-
<span class="button-content-with-icon">
30+
<NcFormBox>
31+
<NcFormBoxButton
32+
target="_blank"
33+
:href="availabilitySettingsUrl">
3934
{{ $t('calendar', 'Availability settings') }}
40-
<OpenInNewIcon :size="20" decorative />
41-
</span>
42-
</NcButton>
43-
<h4>{{ t('calendar', 'CalDAV') }}</h4>
44-
<span>{{ t('calendar', 'Access Nextcloud calendars from other apps and devices') }}</span>
45-
<NcButton
46-
variant="tertiary"
47-
@click.prevent.stop="copyPrimaryCalDAV">
48-
<template #icon>
49-
<ContentCopy :size="20" decorative />
50-
</template>
51-
{{ $t('calendar', 'CalDAV URL') }}
52-
</NcButton>
53-
<NcButton
54-
variant="tertiary"
55-
@click.prevent.stop="copyAppleCalDAV">
56-
<template #icon>
57-
<ContentCopy :size="20" decorative />
58-
</template>
59-
{{ $t('calendar', 'Copy iOS/macOS CalDAV address') }}
60-
</NcButton>
35+
</NcFormBoxButton>
36+
</NcFormBox>
37+
<SettingsImportSection
38+
:is-disabled="loadingCalendars" />
39+
<NcFormGroup :label="t('calendar', 'CalDAV')" :description="t('calendar', 'Access Nextcloud calendars from other apps and devices')">
40+
<NcFormBox>
41+
<NcFormBoxCopyButton :label="t('calendar', 'CalDAV URL')" :value="primaryCalDAV" />
42+
<NcFormBoxCopyButton :label="t('calendar', 'Server Address for iOS and macOS')" :value="appleCalDAV" />
43+
</NcFormBox>
44+
</NcFormGroup>
6145
</NcAppSettingsSection>
6246
<NcAppSettingsSection
63-
id="app-settings-modal-view"
64-
class="calendar-settings-modal-section"
47+
id="settings-modal-appearance"
6548
:name="t('calendar', 'Appearance')">
66-
<SettingsTimezoneSelect
67-
class="settings-fieldset-interior-item"
68-
:is-disabled="loadingCalendars" />
69-
<NcCheckboxRadioSwitch
70-
class="settings-fieldset-interior-item"
71-
:model-value="hasBirthdayCalendar"
72-
:disabled="isBirthdayCalendarDisabled"
73-
@update:model-value="toggleBirthdayEnabled">
74-
{{ $t('calendar', 'Birthday calendar') }}
75-
</NcCheckboxRadioSwitch>
76-
<NcCheckboxRadioSwitch
77-
class="settings-fieldset-interior-item"
78-
:model-value="showTasks"
79-
:disabled="savingTasks"
80-
@update:model-value="toggleTasksEnabled">
81-
{{ $t('calendar', 'Tasks in calendar') }}
82-
</NcCheckboxRadioSwitch>
83-
<NcCheckboxRadioSwitch
84-
class="settings-fieldset-interior-item"
85-
:model-value="showWeekends"
86-
:disabled="savingWeekend"
87-
@update:model-value="toggleWeekendsEnabled">
88-
{{ $t('calendar', 'Weekends') }}
89-
</NcCheckboxRadioSwitch>
90-
<NcCheckboxRadioSwitch
91-
class="settings-fieldset-interior-item"
92-
:model-value="showWeekNumbers"
93-
:disabled="savingWeekNumber"
94-
@update:model-value="toggleWeekNumberEnabled">
95-
{{ $t('calendar', 'Week numbers') }}
96-
</NcCheckboxRadioSwitch>
97-
<NcCheckboxRadioSwitch
98-
class="settings-fieldset-interior-item"
99-
:model-value="eventLimit"
100-
:disabled="savingEventLimit"
101-
@update:model-value="toggleEventLimitEnabled">
102-
<span class="no-wrap-label">
49+
<NcFormBox>
50+
<NcFormBoxSwitch
51+
v-model="hasBirthdayCalendarBinding"
52+
:disabled="isBirthdayCalendarDisabled"
53+
@enable="toggleBirthdayEnabled"
54+
@disable="toggleBirthdayEnabled">
55+
{{ $t('calendar', 'Birthday calendar') }}
56+
</NcFormBoxSwitch>
57+
<NcFormBoxSwitch
58+
v-model="showTasksBinding"
59+
:disabled="savingTasks"
60+
@enable="toggleTasksEnabled"
61+
@disable="toggleTasksEnabled">
62+
{{ $t('calendar', 'Tasks in calendar') }}
63+
</NcFormBoxSwitch>
64+
<NcFormBoxSwitch
65+
v-model="showWeekendsBinding"
66+
:disabled="savingWeekend"
67+
@enable="toggleWeekendsEnabled"
68+
@disable="toggleWeekendsEnabled">
69+
{{ $t('calendar', 'Weekends') }}
70+
</NcFormBoxSwitch>
71+
<NcFormBoxSwitch
72+
v-model="showWeekNumbersBinding"
73+
:disabled="savingWeekNumber"
74+
@enable="toggleWeekNumberEnabled"
75+
@disable="toggleWeekNumberEnabled">
76+
{{ $t('calendar', 'Week numbers') }}
77+
</NcFormBoxSwitch>
78+
</NcFormBox>
79+
80+
<NcFormBox>
81+
<NcFormBoxSwitch
82+
v-model="eventLimitBinding"
83+
:disabled="savingEventLimit"
84+
@enable="toggleEventLimitEnabled"
85+
@disable="toggleEventLimitEnabled">
10386
{{ $t('calendar', 'Limit number of events shown in Month view') }}
104-
</span>
105-
</NcCheckboxRadioSwitch>
87+
</NcFormBoxSwitch>
88+
</NcFormBox>
89+
10690
<NcSelect
10791
:id="slotDuration"
10892
:options="slotDurationOptions"
@@ -116,18 +100,30 @@
116100
</NcAppSettingsSection>
117101
<NcAppSettingsSection
118102
id="app-settings-modal-editing"
119-
class="calendar-settings-modal-section"
120103
:name="t('calendar', 'Editing')">
121-
<NcCheckboxRadioSwitch
122-
class="settings-fieldset-interior-item"
123-
:model-value="!skipPopover"
124-
:disabled="savingPopover"
125-
@update:model-value="togglePopoverEnabled">
126-
{{ $t('calendar', 'Simple event editor') }}<br>
127-
{{ $t('calendar', '"More details" opens the detailed editor') }}
128-
</NcCheckboxRadioSwitch>
104+
<NcSelect
105+
:options="defaultReminderOptions"
106+
:value="selectedDefaultReminderOption"
107+
:disabled="savingDefaultReminder"
108+
:clearable="false"
109+
:input-label="$t('calendar', 'Default reminder')"
110+
input-id="value"
111+
label="label"
112+
@option:selected="changeDefaultReminder" />
113+
<NcFormBox>
114+
<NcFormBoxSwitch
115+
v-model="simpleEventEditorBinding"
116+
:disabled="savingPopover"
117+
:label="t('calendar', 'Simple event editor')"
118+
@enable="togglePopoverEnabled"
119+
@disable="togglePopoverEnabled">
120+
<template #description>
121+
{{ $t('calendar', '"More details" opens the detailed editor') }}
122+
</template>
123+
</NcFormBoxSwitch>
124+
</NcFormBox>
129125
<!-- Hidden: default calendar picker -->
130-
<div v-if="false" class="settings-fieldset-interior-item">
126+
<div v-if="false">
131127
<CalendarPicker
132128
:value="defaultCalendar"
133129
:calendars="defaultCalendarOptions"
@@ -136,27 +132,11 @@
136132
:clearable="false"
137133
@select-calendar="changeDefaultCalendar" />
138134
</div>
139-
<div class="settings-fieldset-interior-item">
140-
<NcSelect
141-
:options="defaultReminderOptions"
142-
:value="selectedDefaultReminderOption"
143-
:disabled="savingDefaultReminder"
144-
:clearable="false"
145-
:input-label="$t('calendar', 'Default reminder')"
146-
input-id="value"
147-
label="label"
148-
@option:selected="changeDefaultReminder" />
149-
</div>
150-
<div class="settings-fieldset-interior-item">
135+
<NcFormGroup :label="t('calendar', 'Files')">
151136
<SettingsAttachmentsFolder />
152-
</div>
153-
</NcAppSettingsSection>
154-
<NcAppSettingsSection
155-
id="app-settings-modal-keyboard"
156-
class="calendar-settings-modal-section"
157-
:name="t('calendar', 'Keyboard shortcuts')">
158-
<ShortcutOverview />
137+
</NcFormGroup>
159138
</NcAppSettingsSection>
139+
<ShortcutOverview />
160140
</NcAppSettingsDialog>
161141
</template>
162142
</NcAppNavigationItem>
@@ -165,7 +145,6 @@
165145
<script>
166146
import {
167147
showError,
168-
showSuccess,
169148
} from '@nextcloud/dialogs'
170149
import moment from '@nextcloud/moment'
171150
import {
@@ -176,15 +155,15 @@ import {
176155
NcAppNavigationItem,
177156
NcAppSettingsDialog,
178157
NcAppSettingsSection,
179-
NcButton,
180-
NcCheckboxRadioSwitch,
158+
NcFormBox,
159+
NcFormBoxButton,
160+
NcFormBoxCopyButton,
161+
NcFormBoxSwitch,
162+
NcFormGroup,
181163
NcSelect,
182164
} from '@nextcloud/vue'
183165
import { mapState, mapStores } from 'pinia'
184-
import CalendarClockIcon from 'vue-material-design-icons/CalendarClock.vue'
185166
import CogIcon from 'vue-material-design-icons/CogOutline.vue'
186-
import ContentCopy from 'vue-material-design-icons/ContentCopy.vue'
187-
import OpenInNewIcon from 'vue-material-design-icons/OpenInNew.vue'
188167
import CalendarPicker from '../Shared/CalendarPicker.vue'
189168
import SettingsAttachmentsFolder from './Settings/SettingsAttachmentsFolder.vue'
190169
import SettingsImportSection from './Settings/SettingsImportSection.vue'
@@ -206,21 +185,21 @@ import logger from '../../utils/logger.js'
206185
export default {
207186
name: 'Settings',
208187
components: {
209-
NcButton,
210-
NcCheckboxRadioSwitch,
211188
NcAppNavigationItem,
212189
NcAppSettingsDialog,
213190
NcAppSettingsSection,
214191
NcSelect,
215192
SettingsImportSection,
216193
SettingsTimezoneSelect,
217194
SettingsAttachmentsFolder,
218-
ContentCopy,
219195
CalendarPicker,
220196
ShortcutOverview,
221197
CogIcon,
222-
OpenInNewIcon,
223-
CalendarClockIcon,
198+
NcFormBox,
199+
NcFormBoxButton,
200+
NcFormGroup,
201+
NcFormBoxCopyButton,
202+
NcFormBoxSwitch,
224203
},
225204
226205
props: {
@@ -243,6 +222,12 @@ export default {
243222
savingWeekend: false,
244223
savingWeekNumber: false,
245224
savingDefaultCalendar: false,
225+
hasBirthdayCalendarBinding: false,
226+
showTasksBinding: false,
227+
showWeekendsBinding: false,
228+
showWeekNumbersBinding: false,
229+
eventLimitBinding: false,
230+
simpleEventEditorBinding: false,
246231
}
247232
},
248233
@@ -355,7 +340,7 @@ export default {
355340
},
356341
357342
/**
358-
* The default calendar for incoming inivitations
343+
* The default calendarci for incoming inivitations
359344
*
360345
* @return {object|undefined} The default calendar or undefined if none is available
361346
*/
@@ -372,6 +357,23 @@ export default {
372357
373358
return calendar
374359
},
360+
361+
primaryCalDAV() {
362+
return generateRemoteUrl('dav')
363+
},
364+
365+
appleCalDAV() {
366+
return new URL(getCurrentUserPrincipal().principalUrl, this.primaryCalDAV)
367+
},
368+
},
369+
370+
async created() {
371+
this.hasBirthdayCalendarBinding = this.hasBirthdayCalendar
372+
this.showTasksBinding = this.showTasks
373+
this.showWeekendsBinding = this.showWeekends
374+
this.showWeekNumbersBinding = this.showWeekNumbers
375+
this.eventLimitBinding = this.eventLimit
376+
this.simpleEventEditorBinding = !this.skipPopover
375377
},
376378
377379
methods: {
@@ -536,41 +538,12 @@ export default {
536538
this.savingDefaultCalendar = false
537539
}
538540
},
539-
540-
/**
541-
* Copies the primary CalDAV url to the user's clipboard.
542-
*/
543-
async copyPrimaryCalDAV() {
544-
try {
545-
await navigator.clipboard.writeText(generateRemoteUrl('dav'))
546-
showSuccess(this.$t('calendar', 'CalDAV link copied to clipboard.'))
547-
} catch (error) {
548-
console.debug(error)
549-
showError(this.$t('calendar', 'CalDAV link could not be copied to clipboard.'))
550-
}
551-
},
552-
553-
/**
554-
* Copies the macOS / iOS specific CalDAV url to the user's clipboard.
555-
* This url is user-specific.
556-
*/
557-
async copyAppleCalDAV() {
558-
const rootURL = generateRemoteUrl('dav')
559-
const url = new URL(getCurrentUserPrincipal().principalUrl, rootURL)
560-
561-
try {
562-
await navigator.clipboard.writeText(url)
563-
showSuccess(this.$t('calendar', 'CalDAV link copied to clipboard.'))
564-
} catch (error) {
565-
console.debug(error)
566-
showError(this.$t('calendar', 'CalDAV link could not be copied to clipboard.'))
567-
}
568-
},
569541
},
570542
}
571543
</script>
572544

573-
<style lang="scss">
545+
<style lang="scss" scoped>
546+
// Needed for the cog icon the navigation sidebar to be aligned
574547
.navigation-calendar-settings {
575548
padding-inline-start: calc(var(--default-grid-baseline) * 2);
576549
padding-bottom: calc(var(--default-grid-baseline) * 2);

0 commit comments

Comments
 (0)