Skip to content

calendar/issue/4128 : Feature: added between calendars patterns on events #5912

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
arublov wants to merge 2 commits into
base: main
Choose a base branch
from
Draft

calendar/issue/4128 : Feature: added between calendars patterns on events #5912

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c39970e
calendar/issue/4128 : Feature: added between calendars patterns on ev…
arublov Apr 5, 2024
bbfd6b4
refactor code
arublov Apr 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 44 additions & 0 deletions css/fullcalendar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -225,6 +225,50 @@
display: none;
}
}

&--diagonal-lines {
background-image: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(0,0,0,.2) 5px, rgba(0,0,0,.2) 10px);
}

&--horizontal-lines {
background-image: repeating-linear-gradient(to right, transparent, transparent 5px, rgba(0,0,0,.2) 5px, rgba(0,0,0,.2) 10px);
}

&--vertical-lines {
background-image: repeating-linear-gradient(to bottom, transparent, transparent 5px, rgba(0,0,0,.2) 5px, rgba(0,0,0,.2) 10px);
}

&--dots {
background-image: radial-gradient(circle, rgba(0,0,0,.2) 4px, transparent 4px);
background-size: 14px 14px;
}

&--hexagons {
background-image: repeating-linear-gradient(45deg,
transparent 10%,
rgba(0, 0, 0, 0.2) 10%,
rgba(0, 0, 0, 0.2) 20%,
transparent 20%,
transparent 30%,
rgba(0, 0, 0, 0.2) 30%,
rgba(0, 0, 0, 0.2) 50%,
transparent 40%);
}

&--triangles {
background-size: 15px 15px;
background-image:
linear-gradient(45deg, transparent 50%, rgba(0, 0, 0, 0.2) 50%),
linear-gradient(-45deg, transparent 50%, rgba(0, 0, 0, 0.2) 50%);
}

&--checkered {
background-image:
linear-gradient(45deg, rgba(0, 0, 0, .2) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, .2) 75%, rgba(0, 0, 0, .2)),
linear-gradient(45deg, rgba(0, 0, 0, .2) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, .2) 75%, rgba(0, 0, 0, .2));
background-size: 20px 20px;
background-position: 0 0, 10px 10px;
}
}

.fc-list-empty {
Expand Down
89 changes: 88 additions & 1 deletion src/components/AppNavigation/EditCalendarModal.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,15 @@
</NcColorPicker>
</div>

<div class="edit-calendar-modal__name-and-color__pattern">
<NcPatternPicker v-model="calendarPattern"
:advanced-fields="true"
@update:value="calendarPatternChanged = true">
<div class="edit-calendar-modal__name-and-color__pattern__dot"
:class="'edit-calendar-modal__name-and-color__pattern__dot--'+calendarPattern" />
</NcPatternPicker>
</div>

<input v-model="calendarName"
class="edit-calendar-modal__name-and-color__name"
type="text"
Expand Down Expand Up @@ -89,7 +98,7 @@
</template>

<script>
import { NcModal, NcColorPicker, NcButton } from '@nextcloud/vue'
import { NcModal, NcColorPicker, NcPatternPicker, NcButton } from '@nextcloud/vue'
import PublishCalendar from './EditCalendarModal/PublishCalendar.vue'
import SharingSearch from './EditCalendarModal/SharingSearch.vue'
import ShareItem from './EditCalendarModal/ShareItem.vue'
Expand All @@ -107,6 +116,7 @@ export default {
components: {
NcModal,
NcColorPicker,
NcPatternPicker,
NcButton,
PublishCalendar,
SharingSearch,
Expand All @@ -121,6 +131,8 @@ export default {
return {
calendarColor: undefined,
calendarColorChanged: false,
calendarPattern: undefined,
calendarPatternChanged: false,
calendarName: undefined,
calendarNameChanged: false,
}
Expand Down Expand Up @@ -177,8 +189,10 @@ export default {

this.calendarName = this.calendar.displayName
this.calendarColor = this.calendar.color
this.calendarPattern = this.calendar.pattern
this.calendarNameChanged = false
this.calendarColorChanged = false
this.calendarPatternChanged = false
},
},
methods: {
Expand Down Expand Up @@ -207,6 +221,24 @@ export default {
}
},

/**
* Save the calendar pattern.
*/
async savePattern() {
try {
await this.$store.dispatch('changeCalendarPattern', {
calendar: this.calendar,
newPattern: this.calendarPattern,
})
} catch (error) {
logger.error('Failed to save calendar pattern', {
calendar: this.calendar,
newPattern: this.calendarPattern,
})
throw error
}
},

/**
* Save the calendar name.
*/
Expand Down Expand Up @@ -235,6 +267,9 @@ export default {
if (this.calendarColorChanged) {
await this.saveColor()
}
if (this.calendarPatternChanged) {
await this.savePattern()
}
if (this.calendarNameChanged) {
await this.saveName()
}
Expand Down Expand Up @@ -278,6 +313,58 @@ export default {
}
}

&__pattern {
::v-deep &__dot {
width: 24px;
height: 24px;
border-radius: 12px;

&--diagonal-lines {
background-image: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(0,0,0,.2) 5px, rgba(0,0,0,.2) 10px);
}

&--horizontal-lines {
background-image: repeating-linear-gradient(to right, transparent, transparent 5px, rgba(0,0,0,.2) 5px, rgba(0,0,0,.2) 10px);
}

&--vertical-lines {
background-image: repeating-linear-gradient(to bottom, transparent, transparent 5px, rgba(0,0,0,.2) 5px, rgba(0,0,0,.2) 10px);
}

&--dots {
background-image: radial-gradient(circle, rgba(0,0,0,.2) 4px, transparent 4px);
background-size: 14px 14px;
}

&--hexagons {
background-image: repeating-linear-gradient(45deg,
transparent 10%,
rgba(0, 0, 0, 0.2) 10%,
rgba(0, 0, 0, 0.2) 20%,
transparent 20%,
transparent 30%,
rgba(0, 0, 0, 0.2) 30%,
rgba(0, 0, 0, 0.2) 50%,
transparent 40%);
}

&--triangles {
background-size: 15px 15px;
background-image:
linear-gradient(45deg, transparent 50%, rgba(0, 0, 0, 0.2) 50%),
linear-gradient(-45deg, transparent 50%, rgba(0, 0, 0, 0.2) 50%);
}

&--checkered {
background-image:
linear-gradient(45deg, rgba(0, 0, 0, .2) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, .2) 75%, rgba(0, 0, 0, .2)),
linear-gradient(45deg, rgba(0, 0, 0, .2) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, .2) 75%, rgba(0, 0, 0, .2));
background-size: 20px 20px;
background-position: 0 0, 10px 10px;
}
}
}

&__name {
flex: 1 auto;
}
Expand Down
1 change: 1 addition & 0 deletions src/fullcalendar/eventSources/eventSource.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ export default function(store) {
id: calendar.id,
// coloring
backgroundColor: calendar.color,
className: 'fc-event--'+calendar.pattern,
borderColor: calendar.color,
textColor: generateTextColorForHex(calendar.color),
// html foo
Expand Down
8 changes: 8 additions & 0 deletions src/models/calendar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,8 @@ const getDefaultCalendarObject = (props = {}) => Object.assign({}, {
displayName: '',
// Color of the calendar
color: uidToHexColor(''),
// Pattern of the calendar
pattern: '',
// Whether or not the calendar is visible in the grid
enabled: true,
// Whether or not the calendar is loading events at the moment
Expand Down Expand Up @@ -92,6 +94,11 @@ const mapDavCollectionToCalendar = (calendar, currentUserPrincipal) => {
color = uidToHexColor(displayName)
}

let pattern = calendar.pattern
if (!pattern) {
pattern = 'diagonal-lines'
}

const supportsEvents = calendar.components.includes('VEVENT')
const supportsJournals = calendar.components.includes('VJOURNAL')
const supportsTasks = calendar.components.includes('VTODO')
Expand Down Expand Up @@ -143,6 +150,7 @@ const mapDavCollectionToCalendar = (calendar, currentUserPrincipal) => {
id,
displayName,
color,
pattern,
order,
url,
enabled,
Expand Down
28 changes: 28 additions & 0 deletions src/store/calendars.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -215,6 +215,18 @@ const mutations = {
state.calendarsById[calendar.id].color = newColor
},

/**
* Changes calendar's pattern
*
* @param {object} state the store mutations
* @param {object} data destructuring object
* @param {object} data.calendar the calendar to rename
* @param {string} data.newPattern the new pattern of the calendar
*/
changeCalendarPattern(state, { calendar, newPattern }) {
state.calendarsById[calendar.id].pattern = newPattern
},

/**
* Changes calendar's order
*
Expand Down Expand Up @@ -936,6 +948,22 @@ const actions = {
await calendar.dav.update()
context.commit('changeCalendarColor', { calendar, newColor })
},

/**
* Change a calendar's pattern
*
* @param {object} context the store mutations Current context
* @param {object} data destructuring object
* @param {object} data.calendar the calendar to modify
* @param {string} data.newPattern the new pattern of the calendar
* @return {Promise}
*/
async changeCalendarPattern(context, { calendar, newPattern }) {
calendar.dav.pattern = newPattern

await calendar.dav.update()
context.commit('changeCalendarPattern', { calendar, newPattern })
},

/**
* Share calendar with User or Group
Expand Down