From 172b3ff6a836a22155837f58ee42e6700e9ee38b Mon Sep 17 00:00:00 2001 From: Freek van de Ven Date: Tue, 9 Jul 2024 21:51:15 +0200 Subject: [PATCH] feat: show a special color for availabilities without a known template --- .../lib/src/config/availability_options.dart | 6 +++++ .../src/config/availability_translations.dart | 5 ++++ .../lib/src/ui/widgets/calendar.dart | 4 ++- .../lib/src/ui/widgets/calendar_grid.dart | 10 ++++--- .../lib/src/ui/widgets/template_legend.dart | 27 +++++++++++++++---- 5 files changed, 43 insertions(+), 9 deletions(-) diff --git a/packages/flutter_availability/lib/src/config/availability_options.dart b/packages/flutter_availability/lib/src/config/availability_options.dart index edc01df..0ba1dd5 100644 --- a/packages/flutter_availability/lib/src/config/availability_options.dart +++ b/packages/flutter_availability/lib/src/config/availability_options.dart @@ -91,6 +91,7 @@ class AvailabilityColors { /// If a color is not provided the color will be taken from the theme const AvailabilityColors({ this.selectedDayColor, + this.customAvailabilityColor, this.blankDayColor, this.outsideMonthTextColor, this.textDarkColor, @@ -111,6 +112,11 @@ class AvailabilityColors { /// The background color of the days that are selected in the calendar 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 /// that have no availability and are not selected final Color? blankDayColor; diff --git a/packages/flutter_availability/lib/src/config/availability_translations.dart b/packages/flutter_availability/lib/src/config/availability_translations.dart index e170d7d..e9717d9 100644 --- a/packages/flutter_availability/lib/src/config/availability_translations.dart +++ b/packages/flutter_availability/lib/src/config/availability_translations.dart @@ -15,6 +15,7 @@ class AvailabilityTranslations { required this.editAvailabilityButton, required this.templateLegendTitle, required this.templateSelectionLabel, + required this.availabilityWithoutTemplateLabel, required this.overviewScreenTitle, required this.createTemplateButton, required this.templateScreenTitle, @@ -51,6 +52,7 @@ class AvailabilityTranslations { this.editAvailabilityButton = "Edit availability", this.templateLegendTitle = "Templates", this.templateSelectionLabel = "Selected day(s)", + this.availabilityWithoutTemplateLabel = "Availabilty without template", this.createTemplateButton = "Create a new template", this.overviewScreenTitle = "Availability", this.templateScreenTitle = "Templates", @@ -94,6 +96,9 @@ class AvailabilityTranslations { /// The text for the selected days in the template legend final String templateSelectionLabel; + /// The label for the availabilities without a template in the template legend + final String availabilityWithoutTemplateLabel; + /// The title on the overview screen final String overviewScreenTitle; diff --git a/packages/flutter_availability/lib/src/ui/widgets/calendar.dart b/packages/flutter_availability/lib/src/ui/widgets/calendar.dart index 615291c..a5aa0d9 100644 --- a/packages/flutter_availability/lib/src/ui/widgets/calendar.dart +++ b/packages/flutter_availability/lib/src/ui/widgets/calendar.dart @@ -171,7 +171,9 @@ List _mapAvailabilitiesToCalendarDays( ); return CalendarDay( date: availability.availabilityModel.startDate, - color: Color(availability.template?.color ?? 0), + color: availability.template != null + ? Color(availability.template!.color) + : null, templateDeviation: templateIsDeviated, isSelected: false, ); diff --git a/packages/flutter_availability/lib/src/ui/widgets/calendar_grid.dart b/packages/flutter_availability/lib/src/ui/widgets/calendar_grid.dart index e21e055..ec1428b 100644 --- a/packages/flutter_availability/lib/src/ui/widgets/calendar_grid.dart +++ b/packages/flutter_availability/lib/src/ui/widgets/calendar_grid.dart @@ -76,10 +76,13 @@ class CalendarGrid extends StatelessWidget { ), itemBuilder: (context, index) { var day = calendarDays[index]; + var dayColor = day.color ?? + colors.customAvailabilityColor ?? + colorScheme.secondary; var textColor = day.outsideMonth && !day.isSelected ? colors.outsideMonthTextColor ?? colorScheme.onSurface : _getTextColor( - day.color, + dayColor, colors.textLightColor ?? Colors.white, colors.textDarkColor, ); @@ -89,7 +92,7 @@ class CalendarGrid extends StatelessWidget { onTap: () => onDayTap(day.date), child: DecoratedBox( decoration: BoxDecoration( - color: day.color, + color: dayColor, borderRadius: BorderRadius.circular(5), border: Border.all( color: day.isSelected && !day.outsideMonth @@ -137,7 +140,8 @@ class CalendarDay { final bool isSelected; /// 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 /// used template diff --git a/packages/flutter_availability/lib/src/ui/widgets/template_legend.dart b/packages/flutter_availability/lib/src/ui/widgets/template_legend.dart index a260a1e..6d02d6e 100644 --- a/packages/flutter_availability/lib/src/ui/widgets/template_legend.dart +++ b/packages/flutter_availability/lib/src/ui/widgets/template_legend.dart @@ -41,6 +41,9 @@ class _TemplateLegendState extends State { var templatesAvailable = !templatesLoading && (widget.availabilities.data?.isNotEmpty ?? false); var templates = widget.availabilities.data?.getUniqueTemplates() ?? []; + var existAvailabilitiesWithoutTemplate = widget.availabilities.data + ?.any((element) => element.template == null) ?? + false; void onDrawerHeaderClick() { if (!templatesAvailable && !_templateDrawerOpen) { @@ -125,11 +128,25 @@ class _TemplateLegendState extends State { itemCount: templates.length + 2, itemBuilder: (context, index) { if (index == 0) { - return _TemplateLegendItem( - name: translations.templateSelectionLabel, - backgroundColor: colors.selectedDayColor ?? - colorScheme.primaryFixedDim, - borderColor: colorScheme.primary, + return Column( + children: [ + _TemplateLegendItem( + name: translations.templateSelectionLabel, + backgroundColor: + colors.selectedDayColor ?? + colorScheme.primaryFixedDim, + borderColor: colorScheme.primary, + ), + if (existAvailabilitiesWithoutTemplate) ...[ + _TemplateLegendItem( + name: translations + .availabilityWithoutTemplateLabel, + backgroundColor: + colors.customAvailabilityColor ?? + colorScheme.secondary, + ), + ], + ], ); } if (index == templates.length + 1) {