Andreas/wekan
1
0
Fork 0
mirror of https://github.com/wekan/wekan.git synced 2026-02-26 01:44:07 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

Refine calendar toolbar labels and style create-card modal controls consistently

Browse source
This commit is contained in:
Harry Adel 2026-02-24 23:43:58 +02:00
parent 8dafc774d8
commit 7b443b7bfc
2 changed files with 59 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

25
client/components/boards/boardBody.js
View file

@ -911,6 +911,11 @@ BlazeComponent.extendComponent({
});
},
calendarOptions() {
const t = (key, fallback) => {
const translated = TAPi18n.__(key);
return translated && translated !== key ? translated : fallback;
};
return {
id: 'calendar-view',
initialView: 'dayGridMonth',
@ -930,18 +935,20 @@ BlazeComponent.extendComponent({
meridiem: 'short',
},
headerToolbar: {
left: 'title today prev,next',
left: 'title today prev,next',
center:
'timeGridDay,listDay timeGridWeek,listWeek dayGridMonth,listMonth',
right: '',
},
buttonIcons: false,
buttonText: {
prev: TAPi18n.__('calendar-previous-month-label'), // e.g. "Previous month"
next: TAPi18n.__('calendar-next-month-label'), // e.g. "Next month"
},
ariaLabel: {
prev: TAPi18n.__('calendar-previous-month-label'),
next: TAPi18n.__('calendar-next-month-label'),
prev: t('previous', 'Previous'),
next: t('next', 'Next'),
today: t('today', 'Today'),
day: t('day', 'Day'),
week: t('week', 'Week'),
month: t('month', 'Month'),
list: t('list', 'List'),
},
// height: 'parent', nope, doesn't work as the parent might be small
height: 'auto',
@ -1041,7 +1048,7 @@ BlazeComponent.extendComponent({
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">${TAPi18n.__('r-create-card')}</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<button type="button" class="close calendar-create-close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
@ -1049,7 +1056,7 @@ BlazeComponent.extendComponent({
<input type="text" class="form-control" id="card-title-input" placeholder="">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="create-card-button">${TAPi18n.__('add-card')}</button>
<button type="button" class="primary confirm" id="create-card-button">${TAPi18n.__('add-card')}</button>
</div>
</div>
</div>

43
client/components/boards/calendarView.css Normal file
View file

@ -0,0 +1,43 @@
.calendar-view .fc {
--fc-button-text-color: #333;
--fc-button-bg-color: #f5f5f5;
--fc-button-border-color: rgba(0, 0, 0, 0.2);
--fc-button-hover-bg-color: #e6e6e6;
--fc-button-hover-border-color: rgba(0, 0, 0, 0.25);
--fc-button-active-bg-color: #d9d9d9;
--fc-button-active-border-color: rgba(0, 0, 0, 0.3);
}
.calendar-view .fc .fc-button-primary {
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),
0 1px 2px rgba(0, 0, 0, 0.05);
background-image: linear-gradient(to bottom, #fff 0%, #e6e6e6 100%);
}
.calendar-view .fc .fc-button-primary:focus,
.calendar-view .fc .fc-button-primary:not(:disabled).fc-button-active,
.calendar-view .fc .fc-button-primary:not(:disabled):active {
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15),
0 1px 2px rgba(0, 0, 0, 0.05);
}
.calendar-create-close {
min-height: auto !important;
min-width: auto !important;
width: 32px;
height: 32px;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
color: #666 !important;
opacity: 0.8;
}
.calendar-create-close:hover,
.calendar-create-close:focus {
background: transparent !important;
color: #111 !important;
opacity: 1;
}