Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

calendar menu: make weather optional #253

Merged
merged 6 commits into from
Oct 3, 2024
Merged

calendar menu: make weather optional #253

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
c4e8154
calendar menu: make weather optional
j-brn Sep 11, 2024
1c82608
Merge remote-tracking branch 'origin/master' into pr-253
Jas-SinghFSU Sep 16, 2024
d986320
Fix bottom margin of last child card.
Jas-SinghFSU Sep 16, 2024
791a4f4
Fix calendar dropdown merge linting and formatting errors.
Jas-SinghFSU Sep 16, 2024
444b4d0
Settings dialog formatting error fix.
Jas-SinghFSU Sep 16, 2024
e66ef98
Merge branch 'master' into optional_weather
Jas-SinghFSU Oct 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 12 additions & 7 deletions modules/menus/calendar/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,12 @@
import DropdownMenu from '../shared/dropdown/index.js';
import { TimeWidget } from './time/index.js';
import { CalendarWidget } from './calendar.js';
import { WeatherWidget } from './weather/index.js';
import Window from 'types/widgets/window.js';
import { Attribute, Child } from 'lib/types/widget.js';
import DropdownMenu from 'modules/menus/shared/dropdown/index';
import { TimeWidget } from './time/index';
import { CalendarWidget } from './calendar';
import { WeatherWidget } from './weather/index';
import options from 'options';
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({
Expand All @@ -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()] : [])];
}),
}),
],
}),
Expand Down
1 change: 1 addition & 0 deletions options.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'),
Expand Down
172 changes: 137 additions & 35 deletions scss/style/menus/calendar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
border: $bar-menus-border-size solid if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-clock-border-color);
background: if(
$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;
Expand All @@ -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 {
Expand All @@ -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),
inset -0.4em -0.3em 0 0 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);
box-shadow:
inset 0 -0.5em 0 0 if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-clock-calendar-currentday),
inset -0.4em -0.3em 0 0
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 {
Expand All @@ -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;
Expand All @@ -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 {
margin-bottom: 0.65em;
}

.calendar-menu-item-container.calendar {
.calendar-menu-item-container {
margin-bottom: 0.65em;
}

.calendar-menu-item-container.weather {
margin-bottom: 0em;
&:last-child {
margin-bottom: 0em;
}
}

.weather-container-box {
Expand All @@ -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;

Expand All @@ -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;
Expand All @@ -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 {
Expand Down
1 change: 1 addition & 0 deletions widget/settings/pages/config/menus/clock.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
Loading