From 0de5a828a09023a8dd766ea07196ab41e206a8c4 Mon Sep 17 00:00:00 2001 From: TolaMironcenko Date: Wed, 4 Sep 2024 15:03:28 +0700 Subject: [PATCH] ags weather widget fish --- ags/weather/Weather.js | 562 +++++++++++++++++++++++++++++++++++++-- ags/weather/config.js | 13 + ags/weather/style.css | 42 +++ ags/weather/weather.scss | 417 ----------------------------- 4 files changed, 594 insertions(+), 440 deletions(-) create mode 100644 ags/weather/config.js create mode 100644 ags/weather/style.css delete mode 100644 ags/weather/weather.scss diff --git a/ags/weather/Weather.js b/ags/weather/Weather.js index a229526..beb45d3 100644 --- a/ags/weather/Weather.js +++ b/ags/weather/Weather.js @@ -1,23 +1,539 @@ -import { PopupContent } from '../bar/buttons/Weather.js'; -import Widget from 'resource:///com/github/Aylur/ags/widget.js'; -import PopupWindow from '../misc/PopupWindow.js'; -import options from '../options.js'; - -export default () => PopupWindow({ - name: 'weather', - anchor: ['top'], - setup: self => self.hook(options.bar.position, () => { - self.anchor = [options.bar.position.value]; - if (options.bar.position.value === 'top') - self.transition = 'slide_down'; - - if (options.bar.position.value === 'bottom') - self.transition = 'slide_up'; - }), - child: Widget.Box({ - class_name: 'dashboard', - children: [ - PopupContent(), - ], - }), -}); \ No newline at end of file +export default () => Widget.Box( + { + class_name: "weather", + css: "min-height: 2px; min-width: 2px;", + }, + Widget.Box( + { class_name: "list" }, + Widget.Box( + { + class_name: "weater-box-yesterday", + vertical: true + }, + Widget.Box( + { + class_name: "horizontal", + css: "padding: 0 10px 10px 10px;" + }, + Widget.Label({ + class_name: "title", + wrap: false, + label: "  0.77mm ↑ 10°C ↓ 4°C THU" + }) + ), + Widget.Box( + { class_name: "horizontal" }, + Widget.Box( + { + class_name: "weather-box-hour", + vertical: true, + }, + Widget.Label({ + class_name: "title", + wrap: true, + hpack: "center", + label: "18h", + }), + Widget.Label({ + class_name: "title", + wrap: true, + hpack: "center", + label: "⛅️", + }), + Widget.Label({ + class_name: "title", + wrap: true, + hpack: "center", + label: "6°C", + }), + Widget.Label({ + class_name: "title", + wrap: true, + hpack: "center", + label: " 0.26mm", + }), + Widget.Label({ + class_name: "title", + wrap: true, + hpack: "center", + label: " 5 kph", + }), + ), + Widget.Box( + { + class_name: "weather-box-hour", + vertical: true, + }, + Widget.Label({ + class_name: "title", + wrap: true, + hpack: "center", + label: "18h", + }), + Widget.Label({ + class_name: "title", + wrap: true, + hpack: "center", + label: "⛅️", + }), + Widget.Label({ + class_name: "title", + wrap: true, + hpack: "center", + label: "6°C", + }), + Widget.Label({ + class_name: "title", + wrap: true, + hpack: "center", + label: " 0.26mm", + }), + Widget.Label({ + class_name: "title", + wrap: true, + hpack: "center", + label: " 5 kph", + }), + ), + Widget.Box( + { + class_name: "weather-box-hour", + vertical: true, + }, + Widget.Label({ + class_name: "title", + wrap: true, + hpack: "center", + label: "18h", + }), + Widget.Label({ + class_name: "title", + wrap: true, + hpack: "center", + label: "⛅️", + }), + Widget.Label({ + class_name: "title", + wrap: true, + hpack: "center", + label: "6°C", + }), + Widget.Label({ + class_name: "title", + wrap: true, + hpack: "center", + // label: " 0.26mm", + }), + Widget.Label({ + class_name: "title", + wrap: true, + hpack: "center", + label: " 5 kph", + }), + ), + ) + ), + Widget.Box( + { + class_name: "weather-box-today", + vertical: true, + }, + Widget.Box( + { + class_name: "horizontal", + css: "color: black;margin-top: 0;", + // space_evenly: true + }, + Widget.Label({ + class_name: "title", + css: "color: black;font-size: 20px;", + wrap: true, + label: "", + hpack: "start" + }), + Widget.Box({hexpand: true}), + Widget.Label({ + class_name: "title", + css: "color: black;margin-right: 10px;font-size: 20px;", + wrap: true, + label: "↑ 10 ↓ 4 FRI", + hpack: "end" + }) + ), + Widget.Box( + { + class_name: "horizontal", + css: "margin: 10px 0 10px 0;" + }, + Widget.Box( + { + class_name: "weather-box-hour", + vertical: true, + css: "color: black;" + }, + Widget.Label({ + class_name: "title", + wrap: true, + hpack: "center", + label: "18h", + }), + Widget.Label({ + class_name: "title", + wrap: true, + hpack: "center", + label: "", + }), + Widget.Label({ + class_name: "title", + wrap: true, + hpack: "center", + label: "6°C", + }), + Widget.Box({vexpand: true}), + Widget.Label({ + class_name: "title", + wrap: true, + hpack: "center", + label: " 5 kph", + }), + ), + Widget.Box( + { + class_name: "weather-box-hour", + vertical: true, + css: "color: black;" + }, + Widget.Label({ + class_name: "title", + wrap: true, + hpack: "center", + label: "18h", + }), + Widget.Label({ + class_name: "title", + wrap: true, + hpack: "center", + label: "", + }), + Widget.Label({ + class_name: "title", + wrap: true, + hpack: "center", + label: "6°C", + }), + Widget.Box({vexpand: true}), + Widget.Label({ + class_name: "title", + wrap: true, + hpack: "center", + label: " 5 kph", + }), + ), + Widget.Box( + { + class_name: "weather-box-hour", + vertical: true, + css: "color: black;" + }, + Widget.Label({ + class_name: "title", + wrap: true, + hpack: "center", + label: "18h", + }), + Widget.Label({ + class_name: "title", + wrap: true, + hpack: "center", + label: "", + }), + Widget.Label({ + class_name: "title", + wrap: true, + hpack: "center", + label: "6°C", + }), + Widget.Box({vexpand: true}), + Widget.Label({ + class_name: "title", + wrap: true, + hpack: "center", + label: " 5 kph", + }), + ), + Widget.Box( + { + class_name: "weather-box-hour", + vertical: true, + css: "color: black;" + }, + Widget.Label({ + class_name: "title", + wrap: true, + hpack: "center", + label: "18h", + }), + Widget.Label({ + class_name: "title", + wrap: true, + hpack: "center", + label: "", + }), + Widget.Label({ + class_name: "title", + wrap: true, + hpack: "center", + label: "6°C", + }), + Widget.Box({vexpand: true}), + Widget.Label({ + class_name: "title", + wrap: true, + hpack: "center", + label: " 5 kph", + }), + ), + Widget.Box( + { + class_name: "weather-box-hour", + vertical: true, + css: "color: black;" + }, + Widget.Label({ + class_name: "title", + wrap: true, + hpack: "center", + label: "18h", + }), + Widget.Label({ + class_name: "title", + wrap: true, + hpack: "center", + label: "", + }), + Widget.Label({ + class_name: "title", + wrap: true, + hpack: "center", + label: "6°C", + }), + Widget.Box({vexpand: true}), + Widget.Label({ + class_name: "title", + wrap: true, + hpack: "center", + label: " 5 kph", + }), + ), + Widget.Box( + { + class_name: "weather-box-hour", + vertical: true, + css: "color: black;" + }, + Widget.Label({ + class_name: "title", + wrap: true, + hpack: "center", + label: "18h", + }), + Widget.Label({ + class_name: "title", + wrap: true, + hpack: "center", + label: "", + }), + Widget.Label({ + class_name: "title", + wrap: true, + hpack: "center", + label: "6°C", + }), + Widget.Box({vexpand: true}), + Widget.Label({ + class_name: "title", + wrap: true, + hpack: "center", + label: " 5 kph", + }), + ), + Widget.Box( + { + class_name: "weather-box-hour", + vertical: true, + css: "color: black;" + }, + Widget.Label({ + class_name: "title", + wrap: true, + hpack: "center", + label: "18h", + }), + Widget.Label({ + class_name: "title", + wrap: true, + hpack: "center", + label: "", + }), + Widget.Label({ + class_name: "title", + wrap: true, + hpack: "center", + label: "6°C", + }), + Widget.Box({vexpand: true}), + Widget.Label({ + class_name: "title", + wrap: true, + hpack: "center", + label: " 5 kph", + }), + ), + ) + ), + Widget.Box( + { + class_name: "weather-box", + vertical: true, + }, + Widget.Label({ + class_name: "title", + wrap: true, + hpack: "center", + label: "MON", + }), + Widget.Label({ + class_name: "title", + wrap: true, + hpack: "center", + label: "10h", + }), + Widget.Label({ + class_name: "title", + wrap: true, + hpack: "center", + label: "⛅️", + }), + Widget.Label({ + class_name: "title", + wrap: true, + hpack: "center", + label: "10°C", + }), + Widget.Label({ + class_name: "title", + wrap: true, + hpack: "center", + // label: " 0.26mm", + }), + Widget.Label({ + class_name: "title", + wrap: true, + hpack: "center", + label: "↑ 10°C", + }), + Widget.Label({ + class_name: "title", + wrap: true, + hpack: "center", + label: "↓ 4°C", + }) + ), + Widget.Box( + { + class_name: "weather-box", + vertical: true, + }, + Widget.Label({ + class_name: "title", + wrap: true, + hpack: "center", + label: "TUE", + }), + Widget.Label({ + class_name: "title", + wrap: true, + hpack: "center", + label: "10h", + }), + Widget.Label({ + class_name: "title", + wrap: true, + hpack: "center", + label: "⛅️", + }), + Widget.Label({ + class_name: "title", + wrap: true, + hpack: "center", + label: "10°C", + }), + Widget.Label({ + class_name: "title", + wrap: true, + hpack: "center", + // label: " 0.26mm", + }), + Widget.Label({ + class_name: "title", + wrap: true, + hpack: "center", + label: "↑ 10°C", + }), + Widget.Label({ + class_name: "title", + wrap: true, + hpack: "center", + label: "↓ 4°C", + }) + ), + Widget.Box( + { + class_name: "weather-box", + vertical: true, + }, + Widget.Label({ + class_name: "title", + wrap: true, + hpack: "center", + label: "WED", + }), + Widget.Label({ + class_name: "title", + wrap: true, + hpack: "center", + label: "10h", + }), + Widget.Label({ + class_name: "title", + wrap: true, + hpack: "center", + label: "⛅️", + }), + Widget.Label({ + class_name: "title", + wrap: true, + hpack: "center", + label: "10°C", + }), + Widget.Label({ + class_name: "title", + wrap: true, + hpack: "center", + // label: " 0.26mm", + }), + Widget.Label({ + class_name: "title", + wrap: true, + hpack: "center", + label: "↑ 10°C", + }), + Widget.Label({ + class_name: "title", + wrap: true, + hpack: "center", + label: "↓ 4°C", + }) + ), + ) +) \ No newline at end of file diff --git a/ags/weather/config.js b/ags/weather/config.js new file mode 100644 index 0000000..8986d09 --- /dev/null +++ b/ags/weather/config.js @@ -0,0 +1,13 @@ +import Weather from "./Weather.js" + +const win = Widget.Window({ + name: "weather", + css: "background: transparent", + anchor: ["top", "left"], + child: Weather(), +}) + +App.config({ + style: "./style.css", + window: [win], +}) diff --git a/ags/weather/style.css b/ags/weather/style.css new file mode 100644 index 0000000..171b198 --- /dev/null +++ b/ags/weather/style.css @@ -0,0 +1,42 @@ +.weather { + min-width: 600px; + min-height: 160px; + background-color: #11120E; + border-radius: 16px; + padding: 0 0 0 10px; + margin: 10px; +} + +.weather-box { + min-width: 80px; + background: linear-gradient(to right bottom, black, #171e6e); + border-radius: 13px; + margin: 10px 10px 10px 0; + padding: 10px; +} + +.weater-box-yesterday { + min-width: 270px; + margin: 10px 10px 10px 0; + background: linear-gradient(to right bottom, black, #171e6e); + border-radius: 13px; + padding: 10px 0px 0px 10px; +} + +.horizontal { + margin: 5px 0 0 0; +} + +.weather-box-hour { + min-width: 80px; + margin: 0 10px 0 0; + background: transparent; +} + +.weather-box-today { + min-width: 400px; + background: linear-gradient(to right bottom, gray, white); + margin: 10px 10px 10px 0; + border-radius: 13px; + padding: 10px 0px 0px 10px; +} diff --git a/ags/weather/weather.scss b/ags/weather/weather.scss deleted file mode 100644 index cb2a0b7..0000000 --- a/ags/weather/weather.scss +++ /dev/null @@ -1,417 +0,0 @@ -@mixin calendar { - @include widget; - padding: $padding*2 $padding*2 0; - - calendar{ - // all: unset; - .view { - all:unset; - } - - &.button{ - @include button($flat: true); - } - - &:selected{ - box-shadow: inset 0 -8px 0 0 transparentize($accent, 0.5), - inset 0 0 0 1px $accent; - border-radius: $radii*0.6; - } - - &.header{ - background-color: transparent; - border: none; - color: transparentize($fg-color, 0.5); - } - - &.highlight{ - background-color: transparent; - color: transparentize($accent, 0.5); - } - - &:indeterminate { - color: transparentize($fg-color, 0.9); - } - font-size: 1.1em; - padding: .2em; - color: $fg_color; - } -} - -window#notification .dashboard, -window#weather .weather, -window#dashboard .window-content { - @include floating-widget; - - .notifications { - min-width: $notifications-width; - - .header { - margin-bottom: $spacing; - margin-right: $spacing; - - > label { margin-left: $radii / 2; } - - button { - @include button; - padding: $padding/2 $padding; - } - } - - .notification-scrollable { - @include scrollable; - } - - .notification-list { - //fixes weird spacing bug on notification panel - release4 - // margin-right: $spacing; - } - - .notification { - @include notification; - - > box { - @include widget; - padding: $padding; - margin-bottom: $spacing; - } - } - - .placeholder { - image { font-size: 7em; } - label { font-size: 1.2em; } - } - } - - separator { - background-color: $popover-border-color; - min-width: 2px; - border-radius: $radii; - margin-right: $spacing; - } - - .datemenu, .system-info { - @include spacing; - } - - .clock-box { - padding: $padding; - - .clock { - font-size: 5em; - } - - .uptime { - color: transparentize($fg-color, 0.2); - } - } - - .calendar { - @include calendar; - } - - //weather popup - .weather-info { - .weather-icon{ - font-size: 1.5em; - margin-top: 0.3em; - margin-bottom: 0.15em; - } - - .weather-temperature { - all: unset; - font-size: 1.2em; - margin-left: 0.5em; - } - } -} - -// height of the notification popup -window#notification .dashboard { - min-height: 32em; -} - -// weather popup -.weather-refresh { - all: unset; - border: none; - margin: 0; - padding: 0; -} - -.weather-refresh:hover { - color: gray; -} - -.weather-refresh:active { - color: black; -} - -.weather-refresh:focus { - color: $accent; -} - -.weather-info { - background-color: rgba(81, 164, 231, 0.76); - border-radius: 16px; - padding: 0.55em; - // margin: 0 5px; - - min-width: 5em; - min-height: 10em; -} - -.weather-temperature { - margin-bottom: 0.6em; -} - -.weather-day { - padding: 2px; -} - -.weather-day:first-child { - padding: 0; -} - -window#dashboard .dashboard, -window#quicksettings .window-content { - .circular-progress-box { - @include widget; - padding: $padding; - - .circular-progress { - min-height: $sys-info-size; - min-width: $sys-info-size; - margin: $padding/2; - font-size: $padding; - background-color: $bg-color; - color: $accent; - - image { - font-size: 1.8em; - } - } - } -} - -// weather window width of the weather widget -window#weather .weather .tooltip { - .weather-spacing { - padding-left: $spacing; - } - - .qsweather-widget { - margin: 0; - } - - .qs-weather-box-child { - min-width: 5em; - - .weather-icon { - font-size: 1.5em; - } - } - - .qs-weather-box-main { - min-width: 16.5em; - } -} - -// shared logic for weather widget, first one only goes to qs -window#quicksettings .window-content, -window#weather .tooltip { - .qsweather-widget { - margin: 0; - padding: 0; - margin-top: $padding / 2; - border-radius: $radii; - } - - .qs-weather-box-main { - margin: 0.5em; - - .weather-icon { - font-size: 2.42em; - margin-left: 0.5em; - } - - .weather-temperature { - all: unset; - font-size: 1.6em; - } - - .weather-rain { - margin-left: 1.2em; - } - - .weather-hour { - margin-right: 1em; - } - } - - .qs-weather-box-child { - padding-bottom: 0.7em; - - .weather-icon { - margin-top: 0.3em; - font-size: 24px; - } - - .weather-temperature { - all: unset; - margin-bottom: 0.2em; - font-size: 20px; - } - } - - // .weather-max { - // color: #FF8C00; - // } - - // .weather-min { - // color: #87ceeb; - // } -} - -// fix to keep topbar on the correct height - 29 (hyprctl layers), new on release4 -.weather.panel-button label{ - font-size: 16px; -} - -$sliderVolumeMinHeight: 2em; -$sliderTroughMinWidth: 2em; - -window#dashboard .datemenu .sub-menu { - all:unset; - - &:focus, - &:hover{ - color: $accent; - } -} - -.led-light-color-switcher { - .on, - .off { - min-width: 1.8em; - min-height: 3.8em; - background-color: #fff; - border: 1px solid black; - border-radius: 5px; - color: black; - margin-top: 0.5em; - - &:focus, - &:hover{ - box-shadow: inset 0 0 4px 2px $accent, - inset 0 0 0 99px $widget_bg; - } - } - - .on { - box-shadow: inset 0px -20px 2px 2px rgba(0, 0, 0, 0.2); - margin-right: 0.5em; - } - - .off { - box-shadow: inset 0px 20px 2px 2px rgba(0, 0, 0, 0.2); - } - - .slider { - min-width: 21.3em; - margin: 0 0.5em; - padding: 0; - margin-top: 1em; - - slider { - all: unset; - } - - trough{ - min-height: $sliderVolumeMinHeight; - border-radius: $radii; - } - - highlight, - progress { - background: transparent; - border-radius: $radii; - min-width: $sliderTroughMinWidth; - } - } - - .color-temp.slider, - .hue.slider, - .brightness.slider { - highlight, - progress { - &:focus, - &:hover{ - box-shadow: inset 0 0 3px 3px $accent, - inset 0 0 0 99px $widget_bg; - - border: $accent; - } - } - } - - .color-temp.slider { - trough{ - box-shadow: - inset 700px 0 10px rgba(98, 159, 255, 0.8), /* 6500K */ - inset 600px 0 10px rgba(144, 196, 255, 0.8), /* 6000K */ - inset 500px 0 10px rgba(200, 232, 255, 0.8), /* 5000K */ - inset 400px 0 10px rgba(255, 255, 255, 0.8), /* 4000K */ - inset 300px 0 10px rgba(255, 249, 200, 0.8), /* 3000K */ - inset 200px 0 10px rgba(255, 232, 156, 0.8), /* 2000K */ - inset 100px 0 10px rgba(255, 184, 104, 0.8), /* 1700K */ - ; - } - - highlight, - progress { - box-shadow: inset 0px 0px 2px 1px black; - } - } - - .hue.slider { - trough{ - box-shadow: - inset 350px 0 10px rgba(255, 0, 0, 0.8), /* Red */ - inset 300px 0 10px rgba(255, 0, 255, 0.8), /* Magenta */ - inset 250px 0 10px rgba(0, 0, 255, 0.8), /* Blue */ - inset 200px 0 10px rgba(0, 255, 255, 0.8), /* Cyan */ - inset 150px 0 10px rgba(0, 255, 0, 0.8), /* Green */ - inset 100px 0 10px rgba(255, 255, 0, 0.8), /* Yellow */ - inset 50px 0 10px rgba(255, 0, 0, 0.8), /* Red */ - ; - } - - highlight, - progress { - box-shadow: inset 0px 0px 2px 1px black; - } - } - - .brightness.slider { - trough{ - box-shadow: - inset 500px 0 10px rgba(255, 255, 255, 0.5), - inset 450px 0 10px rgba(220, 220, 220, 0.5), - inset 400px 0 10px rgba(190, 190, 190, 0.5), - inset 350px 0 10px rgba(160, 160, 160, 0.5), - inset 300px 0 10px rgba(130, 130, 130, 0.5), - inset 250px 0 10px rgba(100, 100, 100, 0.5), - inset 200px 0 10px rgba(70, 70, 70, 0.5), - inset 150px 0 10px rgba(40, 40, 40, 0.5), - inset 100px 0 10px rgba(10, 10, 10, 0.5), - inset 50px 0 10px rgba(0, 0, 0, 0.5) - ; - - highlight, - progress { - box-shadow: inset 0px 0px 2px 1px white; - } - } - } -} \ No newline at end of file