feat: show a special color for availabilities without a known template

This commit is contained in:
Freek van de Ven 2024-07-09 21:51:15 +02:00 committed by Bart Ribbers
parent 4a9bd72eca
commit 172b3ff6a8
5 changed files with 43 additions and 9 deletions

View file

@ -91,6 +91,7 @@ class AvailabilityColors {
/// If a color is not provided the color will be taken from the theme /// If a color is not provided the color will be taken from the theme
const AvailabilityColors({ const AvailabilityColors({
this.selectedDayColor, this.selectedDayColor,
this.customAvailabilityColor,
this.blankDayColor, this.blankDayColor,
this.outsideMonthTextColor, this.outsideMonthTextColor,
this.textDarkColor, this.textDarkColor,
@ -111,6 +112,11 @@ class AvailabilityColors {
/// The background color of the days that are selected in the calendar /// The background color of the days that are selected in the calendar
final Color? selectedDayColor; final Color? selectedDayColor;
/// The background color of the days that have an availability without a
/// template. This color is also shown when a template has been deleted.
/// If not provided the color will be the theme's
final Color? customAvailabilityColor;
/// The background color of the days in the current month /// The background color of the days in the current month
/// that have no availability and are not selected /// that have no availability and are not selected
final Color? blankDayColor; final Color? blankDayColor;

View file

@ -15,6 +15,7 @@ class AvailabilityTranslations {
required this.editAvailabilityButton, required this.editAvailabilityButton,
required this.templateLegendTitle, required this.templateLegendTitle,
required this.templateSelectionLabel, required this.templateSelectionLabel,
required this.availabilityWithoutTemplateLabel,
required this.overviewScreenTitle, required this.overviewScreenTitle,
required this.createTemplateButton, required this.createTemplateButton,
required this.templateScreenTitle, required this.templateScreenTitle,
@ -51,6 +52,7 @@ class AvailabilityTranslations {
this.editAvailabilityButton = "Edit availability", this.editAvailabilityButton = "Edit availability",
this.templateLegendTitle = "Templates", this.templateLegendTitle = "Templates",
this.templateSelectionLabel = "Selected day(s)", this.templateSelectionLabel = "Selected day(s)",
this.availabilityWithoutTemplateLabel = "Availabilty without template",
this.createTemplateButton = "Create a new template", this.createTemplateButton = "Create a new template",
this.overviewScreenTitle = "Availability", this.overviewScreenTitle = "Availability",
this.templateScreenTitle = "Templates", this.templateScreenTitle = "Templates",
@ -94,6 +96,9 @@ class AvailabilityTranslations {
/// The text for the selected days in the template legend /// The text for the selected days in the template legend
final String templateSelectionLabel; final String templateSelectionLabel;
/// The label for the availabilities without a template in the template legend
final String availabilityWithoutTemplateLabel;
/// The title on the overview screen /// The title on the overview screen
final String overviewScreenTitle; final String overviewScreenTitle;

View file

@ -171,7 +171,9 @@ List<CalendarDay> _mapAvailabilitiesToCalendarDays(
); );
return CalendarDay( return CalendarDay(
date: availability.availabilityModel.startDate, date: availability.availabilityModel.startDate,
color: Color(availability.template?.color ?? 0), color: availability.template != null
? Color(availability.template!.color)
: null,
templateDeviation: templateIsDeviated, templateDeviation: templateIsDeviated,
isSelected: false, isSelected: false,
); );

View file

@ -76,10 +76,13 @@ class CalendarGrid extends StatelessWidget {
), ),
itemBuilder: (context, index) { itemBuilder: (context, index) {
var day = calendarDays[index]; var day = calendarDays[index];
var dayColor = day.color ??
colors.customAvailabilityColor ??
colorScheme.secondary;
var textColor = day.outsideMonth && !day.isSelected var textColor = day.outsideMonth && !day.isSelected
? colors.outsideMonthTextColor ?? colorScheme.onSurface ? colors.outsideMonthTextColor ?? colorScheme.onSurface
: _getTextColor( : _getTextColor(
day.color, dayColor,
colors.textLightColor ?? Colors.white, colors.textLightColor ?? Colors.white,
colors.textDarkColor, colors.textDarkColor,
); );
@ -89,7 +92,7 @@ class CalendarGrid extends StatelessWidget {
onTap: () => onDayTap(day.date), onTap: () => onDayTap(day.date),
child: DecoratedBox( child: DecoratedBox(
decoration: BoxDecoration( decoration: BoxDecoration(
color: day.color, color: dayColor,
borderRadius: BorderRadius.circular(5), borderRadius: BorderRadius.circular(5),
border: Border.all( border: Border.all(
color: day.isSelected && !day.outsideMonth color: day.isSelected && !day.outsideMonth
@ -137,7 +140,8 @@ class CalendarDay {
final bool isSelected; final bool isSelected;
/// The color of the day /// The color of the day
final Color color; /// If there is no template for an availability the color will be null
final Color? color;
/// Whether there is an availability on this day and it deviates from the /// Whether there is an availability on this day and it deviates from the
/// used template /// used template

View file

@ -41,6 +41,9 @@ class _TemplateLegendState extends State<TemplateLegend> {
var templatesAvailable = var templatesAvailable =
!templatesLoading && (widget.availabilities.data?.isNotEmpty ?? false); !templatesLoading && (widget.availabilities.data?.isNotEmpty ?? false);
var templates = widget.availabilities.data?.getUniqueTemplates() ?? []; var templates = widget.availabilities.data?.getUniqueTemplates() ?? [];
var existAvailabilitiesWithoutTemplate = widget.availabilities.data
?.any((element) => element.template == null) ??
false;
void onDrawerHeaderClick() { void onDrawerHeaderClick() {
if (!templatesAvailable && !_templateDrawerOpen) { if (!templatesAvailable && !_templateDrawerOpen) {
@ -125,11 +128,25 @@ class _TemplateLegendState extends State<TemplateLegend> {
itemCount: templates.length + 2, itemCount: templates.length + 2,
itemBuilder: (context, index) { itemBuilder: (context, index) {
if (index == 0) { if (index == 0) {
return _TemplateLegendItem( return Column(
name: translations.templateSelectionLabel, children: [
backgroundColor: colors.selectedDayColor ?? _TemplateLegendItem(
colorScheme.primaryFixedDim, name: translations.templateSelectionLabel,
borderColor: colorScheme.primary, backgroundColor:
colors.selectedDayColor ??
colorScheme.primaryFixedDim,
borderColor: colorScheme.primary,
),
if (existAvailabilitiesWithoutTemplate) ...[
_TemplateLegendItem(
name: translations
.availabilityWithoutTemplateLabel,
backgroundColor:
colors.customAvailabilityColor ??
colorScheme.secondary,
),
],
],
); );
} }
if (index == templates.length + 1) { if (index == templates.length + 1) {