calendar menu: make weather optional (#253)

* calendar menu: make weather optional

adds a setting to enable or disable the weather widget in the calendar
menu.

* Fix bottom margin of last child card.

* Fix calendar dropdown merge linting and formatting errors.

* Settings dialog formatting error fix.

---------

Co-authored-by: Jas Singh <jaskiratpal.singh@outlook.com>

modules/menus/calendar/index.ts

@@ -1,9 +1,12 @@
-import DropdownMenu from '../shared/dropdown/index.js';
+import DropdownMenu from 'modules/menus/shared/dropdown/index';
-import { TimeWidget } from './time/index.js';
+import { TimeWidget } from './time/index';
-import { CalendarWidget } from './calendar.js';
+import { CalendarWidget } from './calendar';
-import { WeatherWidget } from './weather/index.js';
+import { WeatherWidget } from './weather/index';
-import Window from 'types/widgets/window.js';
+import options from 'options';
-import { Attribute, Child } from 'lib/types/widget.js';
+import Window from 'types/widgets/window';
+import { Attribute, Child } from 'lib/types/widget';
+
+const { enabled: weatherEnabled } = options.menus.clock.weather;
 
 export default (): Window<Child, Attribute> => {
     return DropdownMenu({
@@ -21,7 +24,9 @@ export default (): Window<Child, Attribute> => {
                         Widget.Box({
                             class_name: 'calendar-content-items',
                             vertical: true,
-                            children: [TimeWidget(), CalendarWidget(), WeatherWidget()],
+                            children: weatherEnabled.bind('value').as((isWeatherEnabled) => {
+                                return [TimeWidget(), CalendarWidget(), ...(isWeatherEnabled ? [WeatherWidget()] : [])];
+                            }),
                         }),
                     ],
                 }),

options.ts

@@ -1134,6 +1134,7 @@ const options = mkOptions(OPTIONS, {
                 military: opt(false),
             },
             weather: {
+                enabled: opt(true),
                 interval: opt(60000),
                 unit: opt<UnitType>('imperial'),
                 location: opt('Los Angeles'),

scss/style/menus/calendar.scss

@@ -6,8 +6,17 @@
   margin-top: 0em;
   min-width: 27em;
   min-height: 6em;
-  background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-clock-background-color);
+  background: if(
-  border: $bar-menus-border-size solid if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-clock-border-color);
+    $bar-menus-monochrome,
+    $bar-menus-background,
+    $bar-menus-menu-clock-background-color
+  );
+  border: $bar-menus-border-size solid
+    if(
+      $bar-menus-monochrome,
+      $bar-menus-border-color,
+      $bar-menus-menu-clock-border-color
+    );
   border-radius: $bar-menus-border-radius;
   margin-right: 0.5em;
   opacity: $bar-menus-opacity * 0.01;
@@ -16,7 +25,11 @@
 .calendar-menu-item-container {
   border-radius: $bar-menus-card_radius;
   margin-bottom: 1.35em;
-  background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-clock-card-color);
+  background: if(
+    $bar-menus-monochrome,
+    $bar-menus-cards,
+    $bar-menus-menu-clock-card-color
+  );
 }
 
 .calendar-content-items {
@@ -30,19 +43,42 @@
 
 .calendar-menu-widget {
   border-radius: 0.4em;
-  color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-clock-calendar-days);
+  color: if(
+    $bar-menus-monochrome,
+    $bar-menus-text,
+    $bar-menus-menu-clock-calendar-days
+  );
 
   &:selected {
-    box-shadow: inset 0 -0.5em 0 0 if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-clock-calendar-currentday),
+    box-shadow:
-      inset -0.4em -0.3em 0 0 if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-clock-card-color),
+      inset 0 -0.5em 0 0 if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-clock-calendar-currentday),
-      inset 0.4em 0 0 0.01em if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-clock-card-color);
+      inset -0.4em -0.3em 0 0
-    color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-clock-calendar-currentday);
+        if(
+          $bar-menus-monochrome,
+          $bar-menus-cards,
+          $bar-menus-menu-clock-card-color
+        ),
+      inset 0.4em 0 0 0.01em
+        if(
+          $bar-menus-monochrome,
+          $bar-menus-cards,
+          $bar-menus-menu-clock-card-color
+        );
+    color: if(
+      $bar-menus-monochrome,
+      $bar-menus-label,
+      $bar-menus-menu-clock-calendar-currentday
+    );
     border-radius: 0em;
   }
 
   &.header {
     background-color: transparent;
-    color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-clock-calendar-yearmonth);
+    color: if(
+      $bar-menus-monochrome,
+      $bar-menus-label,
+      $bar-menus-menu-clock-calendar-yearmonth
+    );
   }
 
   &.button {
@@ -52,15 +88,30 @@
   }
 
   &:hover {
-    color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-calendar-paginator);
+    color: if(
+      $bar-menus-monochrome,
+      $bar-menus-icons-active,
+      $bar-menus-menu-clock-calendar-paginator
+    );
   }
 
   &.highlight {
-    color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-calendar-weekdays);
+    color: if(
+      $bar-menus-monochrome,
+      $bar-menus-icons-active,
+      $bar-menus-menu-clock-calendar-weekdays
+    );
   }
 
   &:indeterminate {
-    color: transparentize(if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-clock-calendar-days), 0.65);
+    color: transparentize(
+      if(
+        $bar-menus-monochrome,
+        $bar-menus-text,
+        $bar-menus-menu-clock-calendar-days
+      ),
+      0.65
+    );
   }
 
   font-size: 1.1em;
@@ -72,27 +123,30 @@
 
   .clock-content-time {
     font-size: 4em;
-    color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-clock-time-time);
+    color: if(
+      $bar-menus-monochrome,
+      $bar-menus-label,
+      $bar-menus-menu-clock-time-time
+    );
   }
 
   .clock-content-period {
     font-size: 1.75em;
     margin-bottom: 1.35em;
     margin-right: -0.875em;
-    color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-clock-time-timeperiod);
+    color: if(
+      $bar-menus-monochrome,
+      $bar-menus-label,
+      $bar-menus-menu-clock-time-timeperiod
+    );
   }
 }
 
-.calendar-menu-item-container.clock {
+.calendar-menu-item-container {
   margin-bottom: 0.65em;
-}
+  &:last-child {
-
+    margin-bottom: 0em;
-.calendar-menu-item-container.calendar {
+  }
-  margin-bottom: 0.65em;
-}
-
-.calendar-menu-item-container.weather {
-  margin-bottom: 0em;
 }
 
 .weather-container-box {
@@ -102,13 +156,21 @@
 
   .calendar-menu-weather.today.icon {
     label {
-      color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-weather-icon);
+      color: if(
+        $bar-menus-monochrome,
+        $bar-menus-icons-active,
+        $bar-menus-menu-clock-weather-icon
+      );
       font-size: 5em;
     }
   }
 
   .calendar-menu-weather.today.temp.label {
-    color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-clock-weather-temperature);
+    color: if(
+      $bar-menus-monochrome,
+      $bar-menus-text,
+      $bar-menus-menu-clock-weather-temperature
+    );
     margin-left: 0.2em;
     font-size: 2.5em;
 
@@ -118,35 +180,63 @@
   }
 
   .calendar-menu-weather.today.condition.label {
-    color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-clock-weather-status);
+    color: if(
+      $bar-menus-monochrome,
+      $bar-menus-label,
+      $bar-menus-menu-clock-weather-status
+    );
     font-size: 1.5em;
     margin-bottom: 0.4em;
   }
 
   .calendar-menu-weather.today.temp.label.icon.weather-color.red {
-    color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-weather-thermometer-extremelyhot);
+    color: if(
+      $bar-menus-monochrome,
+      $bar-menus-icons-active,
+      $bar-menus-menu-clock-weather-thermometer-extremelyhot
+    );
   }
 
   .calendar-menu-weather.today.temp.label.icon.weather-color.orange {
-    color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-weather-thermometer-hot);
+    color: if(
+      $bar-menus-monochrome,
+      $bar-menus-icons-active,
+      $bar-menus-menu-clock-weather-thermometer-hot
+    );
   }
 
   .calendar-menu-weather.today.temp.label.icon.weather-color.lavender {
-    color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-weather-thermometer-moderate);
+    color: if(
+      $bar-menus-monochrome,
+      $bar-menus-icons-active,
+      $bar-menus-menu-clock-weather-thermometer-moderate
+    );
   }
 
   .calendar-menu-weather.today.temp.label.icon.weather-color.blue {
-    color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-weather-thermometer-cold);
+    color: if(
+      $bar-menus-monochrome,
+      $bar-menus-icons-active,
+      $bar-menus-menu-clock-weather-thermometer-cold
+    );
   }
 
   .calendar-menu-weather.today.temp.label.icon.weather-color.sky {
-    color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-weather-thermometer-extremelycold);
+    color: if(
+      $bar-menus-monochrome,
+      $bar-menus-icons-active,
+      $bar-menus-menu-clock-weather-thermometer-extremelycold
+    );
   }
 }
 
 .calendar-menu-weather.today.stats.container {
   margin-bottom: 0.75em;
-  color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-clock-weather-stats);
+  color: if(
+    $bar-menus-monochrome,
+    $bar-menus-label,
+    $bar-menus-menu-clock-weather-stats
+  );
 
   .weather.label {
     margin-left: 0.35em;
@@ -158,18 +248,30 @@
 }
 
 .hourly-weather-time {
-  color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-clock-weather-hourly-time);
+  color: if(
+    $bar-menus-monochrome,
+    $bar-menus-label,
+    $bar-menus-menu-clock-weather-hourly-time
+  );
   margin-bottom: 0.5em;
 }
 
 .hourly-weather-icon {
-  color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-weather-hourly-icon);
+  color: if(
+    $bar-menus-monochrome,
+    $bar-menus-icons-active,
+    $bar-menus-menu-clock-weather-hourly-icon
+  );
   margin-bottom: 0.25em;
   font-size: 1.8em;
 }
 
 .hourly-weather-temp {
-  color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-clock-weather-hourly-temperature);
+  color: if(
+    $bar-menus-monochrome,
+    $bar-menus-label,
+    $bar-menus-menu-clock-weather-hourly-temperature
+  );
 }
 
 .weather.precip.icon {

widget/settings/pages/config/menus/clock.ts

@@ -16,6 +16,7 @@ export const ClockMenuSettings = (): Scrollable<Child, Attribute> => {
                 Option({ opt: options.menus.clock.time.military, title: 'Use 24hr time', type: 'boolean' }),
 
                 Header('Weather'),
+                Option({ opt: options.menus.clock.weather.enabled, title: 'Enabled', type: 'boolean' }),
                 Option({
                     opt: options.menus.clock.weather.location,
                     title: 'Location',