LESA/custum-hyprpanel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

calendar menu: make weather optional (#253)

Browse Source 
* 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>
This commit is contained in:
Jonas
2024-10-03 05:42:04 +02:00
committed by GitHub
parent f26330d89e
commit fe53b3ebf1
4 changed files with 151 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
modules/menus/calendar/index.ts
View File

@@ -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({
@@ -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()] : [])];
}),
}),
],
}),

1
options.ts
View File

@@ -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'),

170
scss/style/menus/calendar.scss
View File

@@ -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;
@@ -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),
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 {
@@ -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,28 +123,31 @@
.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;
}
.calendar-menu-item-container.calendar {
margin-bottom: 0.65em;
}
.calendar-menu-item-container.weather {
&:last-child {
margin-bottom: 0em;
}
}
.weather-container-box {
margin: 1.5em;
@@ -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 {

1
widget/settings/pages/config/menus/clock.ts
View File

@@ -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',