feat(ags binto): add calendar widget
All checks were successful
Discord / discord commits (push) Has been skipped

This commit is contained in:
matt1432 2024-07-24 11:45:28 -04:00
parent 5ad37a0439
commit 18d42f406e
34 changed files with 1703 additions and 1541 deletions

View file

@ -5,6 +5,7 @@ import Pointers from './services/pointers.ts';
import AppLauncher from './ts/applauncher/main.ts'; import AppLauncher from './ts/applauncher/main.ts';
import Bar from './ts/bar/binto.ts'; import Bar from './ts/bar/binto.ts';
import Clipboard from './ts/clipboard/main.ts'; import Clipboard from './ts/clipboard/main.ts';
import Calendar from './ts/date/binto.ts';
import { NotifPopups, NotifCenter } from './ts/notifications/binto.ts'; import { NotifPopups, NotifCenter } from './ts/notifications/binto.ts';
import OSD from './ts/osd/main.ts'; import OSD from './ts/osd/main.ts';
import Powermenu from './ts/powermenu.ts'; import Powermenu from './ts/powermenu.ts';
@ -26,6 +27,7 @@ App.config({
windows: () => [ windows: () => [
AppLauncher(), AppLauncher(),
Calendar(),
Clipboard(), Clipboard(),
NotifCenter(), NotifCenter(),
Powermenu(), Powermenu(),

View file

@ -9,7 +9,8 @@
font-size: 16px; font-size: 16px;
} }
list, row { list,
row {
all: unset; all: unset;
} }
@ -17,7 +18,8 @@
margin: 16.2px; margin: 16.2px;
margin-bottom: 0; margin-bottom: 0;
image, entry { image,
entry {
all: unset; all: unset;
border-radius: 9px; border-radius: 9px;
color: #f8f8f2; color: #f8f8f2;
@ -75,7 +77,9 @@
} }
} }
*:selected, .app:hover, .app:focus { *:selected,
.app:hover,
.app:focus {
* { * {
font-weight: unset; font-weight: unset;
} }

View file

@ -2,11 +2,14 @@
.clock, .clock,
.notif-panel { .notif-panel {
border: 2px solid $contrast-bg;
padding: 4.5px 7px; padding: 4.5px 7px;
background-color: $bgfull; background-color: $bgfull;
} }
.sys-tray { .sys-tray {
border: 2px solid $contrast-bg;
menubar { menubar {
background-color: $bgfull; background-color: $bgfull;
padding: 2.5px; padding: 2.5px;
@ -30,6 +33,8 @@
} }
.current-window { .current-window {
border: 2px solid $contrast-bg;
font-size: 18px;
padding-right: 7px; padding-right: 7px;
background-color: $bgfull; background-color: $bgfull;
} }

View file

@ -9,7 +9,8 @@
font-size: 16px; font-size: 16px;
} }
list, row { list,
row {
all: unset; all: unset;
} }
@ -17,7 +18,8 @@
margin: 16.2px; margin: 16.2px;
margin-bottom: 0; margin-bottom: 0;
image, entry { image,
entry {
all: unset; all: unset;
border-radius: 9px; border-radius: 9px;
color: #f8f8f2; color: #f8f8f2;
@ -50,7 +52,9 @@
} }
} }
*:selected .item, .item:hover, .item:focus { *:selected .item,
.item:hover,
.item:focus {
background-color: #363449; background-color: #363449;
} }
} }

View file

@ -0,0 +1,74 @@
.date {
background-color: $bg;
color: $fg;
border: 2px solid $contrast-bg;
}
.timebox {
margin: 30px 0;
.time-container {
.content {
font-weight: bolder;
font-size: 60px;
}
.divider {
margin: 8px 15px;
padding: 0 1px;
background: linear-gradient($red, $magenta, $blue, $cyan);
}
}
.date-container {
margin-top: 2px;
}
}
.cal-box {
border-radius: 30px;
padding: 0 1rem .2rem;
color: $fg;
background-color: $bgfull;
border-bottom: 2px solid $contrast-bg;
border-top: 2px solid $contrast-bg;
margin: 0 12px 18px;
.cal {
font-size: 20px;
background-color: inherit;
padding: .5rem .10rem 0;
margin-left: 10px;
border-radius: 30px;
&>* {
border: solid 0 transparent;
}
&.highlight {
padding: 10rem;
}
}
}
calendar:selected {
color: $cyan;
}
calendar.header {
color: $cyan;
font-weight: bold;
}
calendar.button {
color: $cyan;
}
calendar.highlight {
color: $green;
font-weight: bold;
}
calendar:indeterminate {
color: $lightblack;
}

View file

@ -1,4 +1,5 @@
.notification-center { .notification-center {
border: 2px solid $contrast-bg;
min-height: 700px; min-height: 700px;
min-width: 524px; min-width: 524px;
background: $bg; background: $bg;
@ -48,6 +49,7 @@
.notification-list-box { .notification-list-box {
background: $bgfull; background: $bgfull;
padding: 0 12px; padding: 0 12px;
border-top: 2px solid $contrast-bg;
scrollbar { scrollbar {
all: unset; all: unset;

View file

@ -22,6 +22,7 @@ $background-color-10: rgba(238, 238, 238, 0.5);
margin: 9px 9px 0; margin: 9px 9px 0;
background-color: $bg; background-color: $bg;
padding: 16.2px; padding: 16.2px;
border: 2px solid $contrast-bg;
* { * {
font-size: 16px; font-size: 16px;

View file

@ -4,7 +4,6 @@
padding: 10px; padding: 10px;
font-family: "MesloLGS NF"; font-family: "MesloLGS NF";
/* font-family: Iosevka Nerd Font; */
font-size: 70px; font-size: 70px;
border: 2px solid $contrast-bg; border: 2px solid $contrast-bg;
@ -17,16 +16,31 @@
margin: 5px 10px; margin: 5px 10px;
min-width: 80px; min-width: 80px;
transition: all ease .2s; transition: all ease .2s;
&:hover { background-color: $bg-secondary; }
&:active { background-color: $bg-secondary; } &:hover {
background-color: $bg-secondary;
}
&:active {
background-color: $bg-secondary;
}
.content { .content {
padding: 0 15px; padding: 0 15px;
} }
} }
.shutdown { color: $red; }
.reboot { color: $magenta; } .shutdown {
.logout { color: $yellow; } color: $red;
}
.reboot {
color: $magenta;
}
.logout {
color: $yellow;
}
} }
.powermenu-clickhandler { .powermenu-clickhandler {

View file

@ -11,9 +11,10 @@ undershoot {
@import './common'; @import './common';
@import './binto-widgets/applauncher'; @import './binto-widgets/applauncher';
@import './binto-widgets/bar'; @import './binto-widgets/bar';
@import './binto-widgets/clipboard';
@import './binto-widgets/date';
@import './binto-widgets/notification'; @import './binto-widgets/notification';
@import './binto-widgets/notification-center'; @import './binto-widgets/notification-center';
@import './binto-widgets/osd'; @import './binto-widgets/osd';
@import './binto-widgets/powermenu'; @import './binto-widgets/powermenu';
@import './binto-widgets/clipboard';
@import './binto-widgets/screenshot'; @import './binto-widgets/screenshot';

View file

@ -34,7 +34,9 @@ $javacafe-blue: #86aaec;
scrolledwindow { scrolledwindow {
scrollbar, scrollbar * {
scrollbar,
scrollbar * {
all: unset; all: unset;
} }

View file

@ -10,7 +10,8 @@
font-size: 16px; font-size: 16px;
} }
list, row { list,
row {
all: unset; all: unset;
} }
@ -18,7 +19,8 @@
margin: 16.2px; margin: 16.2px;
margin-bottom: 0; margin-bottom: 0;
image, entry { image,
entry {
all: unset; all: unset;
border-radius: 9px; border-radius: 9px;
color: #f8f8f2; color: #f8f8f2;
@ -75,7 +77,9 @@
} }
} }
*:selected, .app:hover, .app:focus { *:selected,
.app:hover,
.app:focus {
* { * {
font-weight: unset; font-weight: unset;
} }

View file

@ -10,7 +10,8 @@
font-size: 16px; font-size: 16px;
} }
list, row { list,
row {
all: unset; all: unset;
} }
@ -18,7 +19,8 @@
margin: 16.2px; margin: 16.2px;
margin-bottom: 0; margin-bottom: 0;
image, entry { image,
entry {
all: unset; all: unset;
border-radius: 9px; border-radius: 9px;
color: #f8f8f2; color: #f8f8f2;
@ -51,7 +53,9 @@
} }
} }
*:selected .item, .item:hover, .item:focus { *:selected .item,
.item:hover,
.item:focus {
background-color: #363449; background-color: #363449;
} }
} }

View file

@ -38,15 +38,18 @@
transition: background-color 0.2s ease-in-out, transition: background-color 0.2s ease-in-out,
border-color 0.2s ease-in-out; border-color 0.2s ease-in-out;
&.normal, &.Super { &.normal,
&.Super {
min-width: 3rem; min-width: 3rem;
} }
&.Tab, &.Backspace { &.Tab,
&.Backspace {
min-width: 7rem; min-width: 7rem;
} }
&.Enter, &.Caps { &.Enter,
&.Caps {
min-width: 8rem; min-width: 8rem;
} }
@ -58,7 +61,8 @@
min-width: 20rem; min-width: 20rem;
} }
&.PrtSc, &.AltGr { &.PrtSc,
&.AltGr {
min-width: 3.2rem; min-width: 3.2rem;
} }

View file

@ -114,4 +114,3 @@
transition: background-color 0.5s ease-in-out; transition: background-color 0.5s ease-in-out;
} }
} }

View file

@ -19,17 +19,32 @@
border-radius: 12px; border-radius: 12px;
min-width: 80px; min-width: 80px;
transition: all ease .2s; transition: all ease .2s;
&:hover { background-color: $bg-secondary; }
&:active { background-color: $bg-secondary; } &:hover {
background-color: $bg-secondary;
}
&:active {
background-color: $bg-secondary;
}
.content { .content {
border-radius: 4px; border-radius: 4px;
padding: 0 15px; padding: 0 15px;
} }
} }
.shutdown { color: $red; }
.reboot { color: $magenta; } .shutdown {
.logout { color: $yellow; } color: $red;
}
.reboot {
color: $magenta;
}
.logout {
color: $yellow;
}
} }
.powermenu-clickhandler { .powermenu-clickhandler {

View file

@ -106,7 +106,8 @@
transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;
} }
.right-part:hover, .right-part:active { .right-part:hover,
.right-part:active {
color: $contrast-bg; color: $contrast-bg;
border: 2px solid $contrast-bg; border: 2px solid $contrast-bg;
border-top-left-radius: 7px; border-top-left-radius: 7px;
@ -114,7 +115,8 @@
transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;
} }
.left-part:hover, .left-part:active { .left-part:hover,
.left-part:active {
color: $contrast-bg; color: $contrast-bg;
border: 2px solid $contrast-bg; border: 2px solid $contrast-bg;
border-top-right-radius: 7px; border-top-right-radius: 7px;

View file

@ -14,7 +14,8 @@
.header-btn { .header-btn {
transition: 200ms; transition: 200ms;
&:hover, &.active { &:hover,
&.active {
background-color: rgba(23, 23, 23, 0.7); background-color: rgba(23, 23, 23, 0.7);
image { image {

View file

@ -7,7 +7,10 @@
border 0.5s ease-in-out; border 0.5s ease-in-out;
menuitem { menuitem {
image { color: #CBA6F7; } image {
color: #CBA6F7;
}
background-color: transparent; background-color: transparent;
padding: 0 2px; padding: 0 2px;
border-radius: 100%; border-radius: 100%;

View file

@ -2,6 +2,11 @@
margin: 5px; margin: 5px;
} }
.current-window {
color: #CBA6F7;
font-size: 18px;
}
.osk-toggle, .osk-toggle,
.tablet-toggle, .tablet-toggle,
.heart-toggle { .heart-toggle {
@ -48,7 +53,8 @@
border 0.5s ease-in-out; border 0.5s ease-in-out;
} }
.toggle-on:hover, .toggle-off:hover { .toggle-on:hover,
.toggle-off:hover {
background-color: rgba(127, 132, 156, 0.4); background-color: rgba(127, 132, 156, 0.4);
transition: background-color 0.5s ease-in-out, transition: background-color 0.5s ease-in-out,
border 0.5s ease-in-out; border 0.5s ease-in-out;

View file

@ -5,7 +5,7 @@ import { get_gdkmonitor_from_desc } from '../lib.ts';
import BarRevealer from './fullscreen.ts'; import BarRevealer from './fullscreen.ts';
import Clock from './items/clock.ts'; import Clock from './items/cal-opener.ts';
import CurrentWindow from './items/current-window'; import CurrentWindow from './items/current-window';
import NotifButton from './items/notif-button.ts'; import NotifButton from './items/notif-button.ts';
import SysTray from './items/systray.ts'; import SysTray from './items/systray.ts';

View file

@ -24,7 +24,6 @@ export default () => Box({
Separator(SPACING), Separator(SPACING),
Label({ Label({
css: 'color: #CBA6F7; font-size: 18px',
truncate: 'end', truncate: 'end',
label: Hyprland.active.client.bind('title'), label: Hyprland.active.client.bind('title'),
}), }),

View file

@ -0,0 +1,14 @@
import PopupWindow from '../misc/popup.ts';
import CalendarWidget from './main.ts';
import { get_gdkmonitor_from_desc } from '../lib.ts';
export default () => PopupWindow({
name: 'calendar',
anchor: ['bottom', 'right'],
margins: [0, 20, 0, 0],
transition: 'slide bottom',
gdkmonitor: get_gdkmonitor_from_desc('desc:Acer Technologies Acer K212HQL T3EAA0014201'),
child: CalendarWidget(),
});

View file

@ -2,8 +2,6 @@ const { Box, Calendar, Label } = Widget;
const { new_now_local } = imports.gi.GLib.DateTime; const { new_now_local } = imports.gi.GLib.DateTime;
import PopupWindow from './misc/popup.ts';
const Divider = () => Box({ const Divider = () => Box({
class_name: 'divider', class_name: 'divider',
@ -83,14 +81,7 @@ const CalendarWidget = () => Box({
}), }),
}); });
const TOP_MARGIN = 6; export default () => Box({
export default () => PopupWindow({
name: 'calendar',
anchor: ['top'],
margins: [TOP_MARGIN, 0, 0, 0],
child: Box({
class_name: 'date', class_name: 'date',
vertical: true, vertical: true,
@ -98,5 +89,4 @@ export default () => PopupWindow({
Time(), Time(),
CalendarWidget(), CalendarWidget(),
], ],
}),
}); });

View file

@ -0,0 +1,12 @@
import PopupWindow from '../misc/popup.ts';
import CalendarWidget from './main.ts';
const TOP_MARGIN = 6;
export default () => PopupWindow({
name: 'calendar',
anchor: ['top'],
margins: [TOP_MARGIN, 0, 0, 0],
child: CalendarWidget(),
});

View file

@ -2,7 +2,7 @@ import Setup from './ts/setup.ts';
import AppLauncher from './ts/applauncher/main.ts'; import AppLauncher from './ts/applauncher/main.ts';
import Bar from './ts/bar/wim.ts'; import Bar from './ts/bar/wim.ts';
import BgFade from './ts/misc/background-fade.ts'; import BgFade from './ts/misc/background-fade.ts';
import Calendar from './ts/date.ts'; import Calendar from './ts/date/wim.ts';
import Clipboard from './ts/clipboard/main.ts'; import Clipboard from './ts/clipboard/main.ts';
import Corners from './ts/corners/main.ts'; import Corners from './ts/corners/main.ts';
import { NotifPopups, NotifCenter } from './ts/notifications/wim.ts'; import { NotifPopups, NotifCenter } from './ts/notifications/wim.ts';