feat(calendar): added inverted variant

This PR adds full inverted support to the calendar component. It also adds new metadata support for disabled/eventDates to supply new attributes inverted and variation. This way each cell tooltip can be adjusted on its own and makes it possible to have inverted or basic cell tooltips on non inverted calendars and vice versa
fomantic · Jul 23, 2020 · a8cd1b0 · a8cd1b0
1 parent 656dcfc
commit a8cd1b0
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 13 deletions.
diff --git a/src/definitions/modules/calendar.js b/src/definitions/modules/calendar.js
@@ -75,6 +75,7 @@ $.fn.calendar = function(parameters) {
 
         isTouch,
         isTouchDown = false,
+        isInverted = $module.hasClass(className.inverted),
         focusDateUsedForRange = false,
         module
       ;
@@ -141,6 +142,9 @@ $.fn.calendar = function(parameters) {
               $container = $('<div/>').addClass(className.popup)[domPositionFunction]($activatorParent);
             }
             $container.addClass(className.calendar);
+            if(isInverted){
+              $container.addClass(className.inverted);
+            }
             var onVisible = function () {
               module.refreshTooltips();
               return settings.onVisible.apply($container, arguments);
@@ -286,6 +290,9 @@ $.fn.calendar = function(parameters) {
                 tempMode += ' andweek';
               }
               var table = $('<table/>').addClass(className.table).addClass(tempMode).addClass(numberText[columns] + ' column').appendTo(container);
+              if(isInverted){
+                table.addClass(className.inverted);
+              }
               var textColumns = columns;
               //no header for time-only mode
               if (!isTimeOnly) {
@@ -355,15 +362,27 @@ $.fn.calendar = function(parameters) {
                     var disabledDate = module.helper.findDayAsObject(cellDate, mode, settings.disabledDates);
                     if (disabledDate !== null && disabledDate[metadata.message]) {
                       cell.attr("data-tooltip", disabledDate[metadata.message]);
-                      cell.attr("data-position", tooltipPosition);
+                      cell.attr("data-position", disabledDate[metadata.position] || tooltipPosition);
+                      if(disabledDate[metadata.inverted] || (isInverted && disabledDate[metadata.inverted] === undefined)) {
+                        cell.attr("data-inverted", '');
+                      }
+                      if(disabledDate[metadata.variation]) {
+                        cell.attr("data-variation", disabledDate[metadata.variation]);
+                      }
                     }
                   } else {
                     var eventDate = module.helper.findDayAsObject(cellDate, mode, settings.eventDates);
                     if (eventDate !== null) {
                       cell.addClass(eventDate[metadata.class] || settings.eventClass);
                       if (eventDate[metadata.message]) {
                         cell.attr("data-tooltip", eventDate[metadata.message]);
-                        cell.attr("data-position", tooltipPosition);
+                        cell.attr("data-position", eventDate[metadata.position] || tooltipPosition);
+                        if(eventDate[metadata.inverted] || (isInverted && eventDate[metadata.inverted] === undefined)) {
+                          cell.attr("data-inverted", '');
+                        }
+                        if(eventDate[metadata.variation]) {
+                          cell.attr("data-variation", eventDate[metadata.variation]);
+                        }
                       }
                     }
                   }
@@ -1639,6 +1658,7 @@ $.fn.calendar.settings = {
     grid: 'ui equal width grid',
     column: 'column',
     table: 'ui celled center aligned unstackable table',
+    inverted: 'inverted',
     prev: 'prev link',
     next: 'next link',
     prevIcon: 'chevron left icon',
@@ -1667,6 +1687,9 @@ $.fn.calendar.settings = {
     monthOffset: 'monthOffset',
     message: 'message',
     class: 'class',
+    inverted: 'inverted',
+    variation: 'variation',
+    position: 'position',
     month: 'month',
     year: 'year'
   },

diff --git a/src/definitions/modules/calendar.less b/src/definitions/modules/calendar.less
@@ -121,7 +121,7 @@
   right: 0;
 }
 
-.ui.calendar .ui.table tr .disabled {
+.ui.ui.calendar .ui.table tr .disabled {
   pointer-events: auto;
   cursor: default;
   color: @disabledTextColor;
@@ -146,22 +146,31 @@
   box-shadow: @rangeBoxShadow;
 }
 
-.ui.calendar .ui.table.inverted tr td.range {
-  background: @rangeInvertedBackground;
-  color: @rangeInvertedTextColor;
-  box-shadow: @rangeInvertedBoxShadow;
-}
-
 .ui.calendar:not(.disabled) .calendar:focus .ui.table tbody tr td.focus,
 .ui.calendar:not(.disabled) .calendar.active .ui.table tbody tr td.focus {
   box-shadow: @focusBoxShadow;
 }
 
-.ui.calendar:not(.disabled) .calendar:focus .ui.table.inverted tbody tr td.focus,
-.ui.calendar:not(.disabled) .calendar.active .ui.table.inverted tbody tr td.focus {
-  box-shadow: @focusInvertedBoxShadow;
-}
+& when (@variationCalendarInverted) {
+  .ui.inverted.calendar .ui.table.inverted tr td.range {
+    background: @rangeInvertedBackground;
+    color: @rangeInvertedTextColor;
+    box-shadow: @rangeInvertedBoxShadow;
+  }
 
+  .ui.inverted.calendar:not(.disabled) .calendar:focus .ui.table.inverted tbody tr td.focus,
+  .ui.inverted.calendar:not(.disabled) .calendar.active .ui.table.inverted tbody tr td.focus {
+    box-shadow: @focusInvertedBoxShadow;
+  }
+  .ui.inverted.calendar .ui.inverted.table tr .disabled {
+    color: @invertedDisabledTextColor;
+  }
+
+  .ui.inverted.calendar .ui.inverted.table tr .adjacent:not(.disabled) {
+    color: @adjacentInvertedTextColor;
+    background: @adjacentInvertedBackground;
+  }
+}
 
 /*******************************
             States

diff --git a/src/themes/default/globals/variation.variables b/src/themes/default/globals/variation.variables
@@ -367,6 +367,7 @@
 @variationAccordionFluid: true;
 
 /* Calendar */
+@variationCalendarInverted: true;
 @variationCalendarDisabled: true;
 
 /* Checkbox */

diff --git a/src/themes/default/modules/calendar.variables b/src/themes/default/modules/calendar.variables
@@ -16,3 +16,5 @@
 
 @adjacentTextColor: @mutedTextColor;
 @adjacentBackground: @subtleTransparentBlack;
+@adjacentInvertedTextColor: @invertedMutedTextColor;
+@adjacentInvertedBackground: @subtleTransparentWhite;