matt1432/nixos-configs
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

refactor(ags): change some cursor code

Browse source
This commit is contained in:
matt1432 2023-09-11 19:28:22 -04:00
parent 5f59cd56d2
commit 55577e48a2
5 changed files with 128 additions and 144 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
config/ags/js/common.js
View file

@ -19,7 +19,7 @@ export const Separator = width => ags.Widget.Box({
import Gdk from 'gi://Gdk'; import Gdk from 'gi://Gdk';
const display = Gdk.Display.get_default(); const display = Gdk.Display.get_default();
export const EventBox = ({ ...params }) => ags.Widget.EventBox({ export const EventBox = ({ reset = true, ...params }) => ags.Widget.EventBox({
...params, ...params,
onHover: box => { onHover: box => {
if (! box.child.sensitive || ! box.sensitive) { if (! box.child.sensitive || ! box.sensitive) {
@ -30,6 +30,7 @@ export const EventBox = ({ ...params }) => ags.Widget.EventBox({
} }
}, },
onHoverLost: box => { onHoverLost: box => {
box.window.set_cursor(null); if (reset)
box.window.set_cursor(null);
}, },
}); });

1
config/ags/js/misc/drag.js
View file

@ -64,6 +64,7 @@ export const Draggable = ({
w.window.set_cursor(Gdk.Cursor.new_from_name(display, 'grab')); w.window.set_cursor(Gdk.Cursor.new_from_name(display, 'grab'));
} }
}, 'drag-end'], }, 'drag-end'],
], ],
}); });

35
config/ags/js/notifications/base.js
View file

@ -1,9 +1,10 @@
const { GLib } = imports.gi; const { GLib } = imports.gi;
const { Notifications } = ags.Service; const { Notifications } = ags.Service;
const { lookUpIcon, timeout } = ags.Utils; const { lookUpIcon, timeout } = ags.Utils;
const { Box, Icon, Label, EventBox, Button } = ags.Widget; const { Box, Icon, Label, Button } = ags.Widget;
import { Draggable } from '../misc/drag.js'; import { Draggable } from '../misc/drag.js';
import { EventBox } from '../common.js'
const NotificationIcon = ({ appEntry, appIcon, image }) => { const NotificationIcon = ({ appEntry, appIcon, image }) => {
if (image) { if (image) {
@ -53,25 +54,6 @@ export default ({ id, summary, body, actions, urgency, time, ...icon }) => Dragg
maxOffset: 200, maxOffset: 200,
command: () => Notifications.close(id), command: () => Notifications.close(id),
/// Port of Aylur's notification
properties: [['hovered', false]],
addOnHover: w => {
if (w._hovered) {
return;
}
timeout(300, () => w._hovered = true);
},
addOnHoverLost: w => {
if (!w._hovered) {
return;
}
w._hovered = false;
Notifications.dismiss(id);
},
///
child: Box({ child: Box({
className: `notification ${urgency}`, className: `notification ${urgency}`,
vexpand: false, vexpand: false,
@ -106,11 +88,14 @@ export default ({ id, summary, body, actions, urgency, time, ...icon }) => Dragg
valign: 'start', valign: 'start',
label: GLib.DateTime.new_from_unix_local(time).format('%H:%M'), label: GLib.DateTime.new_from_unix_local(time).format('%H:%M'),
}), }),
Button({ EventBox({
className: 'close-button', reset: false,
valign: 'start', child: Button({
onClicked: () => Notifications.close(id), className: 'close-button',
child: Icon('window-close-symbolic'), valign: 'start',
onClicked: () => Notifications.close(id),
child: Icon('window-close-symbolic'),
}),
}), }),
], ],
}), }),

228
config/ags/scss/widgets/notification.scss
View file

@ -10,123 +10,56 @@ $background-color_9: rgba(238, 238, 238, 0.7);
$background-color_10: rgba(238, 238, 238, 0.5); $background-color_10: rgba(238, 238, 238, 0.5);
.notification.critical { .notification.critical {
>box { >box {
box-shadow: inset 0 0 0.5em 0 #e67090; box-shadow: inset 0 0 0.5em 0 #e67090;
}
}
.notification {
>box {
all: unset;
box-shadow: 0 0 4.5px 0 rgba(0, 0, 0, 0.4);
margin: 9px 9px 0 9px;
border: 2px solid $contrastbg;
border-radius: 15px;
background-color: $bg;
padding: 16.2px;
* {
font-size: 16px;
} }
} }
.notification { &:hover {
>box { .close-button {
padding: 9px; box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
all: unset; background-color: $background-color_1;
box-shadow: 0 0 4.5px 0 rgba(0, 0, 0, 0.4); background-color: $background-color_2;
margin: 9px;
border: 2px solid $contrastbg;
border-radius: 15px;
background-color: $bg;
padding: 16.2px;
* {
font-size: 16px;
}
} }
&:hover { }
.close-button { .title {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03); margin-right: 9px;
background-color: $background-color_1; font-size: 1.1em;
background-color: $background-color_2; }
} .description {
} font-size: .9em;
.title { min-width: 350px;
margin-right: 9px; }
font-size: 1.1em; .icon {
} border-radius: 7.2px;
.description { margin-right: 9px;
font-size: .9em; }
min-width: 350px; .icon.img {
} border: 1px solid rgba(238, 238, 238, 0.03);
.icon { }
border-radius: 7.2px; .actions {
margin-right: 9px; button {
}
.icon.img {
border: 1px solid rgba(238, 238, 238, 0.03);
}
.actions {
button {
all: unset;
transition: 200ms;
border-radius: 9px;
background-color: $background-color_3;
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
border-radius: 7.2px;
font-size: 1.2em;
padding: 4.5px 9px;
margin: 9px 4.5px 0;
* {
font-size: 16px;
}
&:focus {
box-shadow: inset 0 0 0 1px #51a4e7;
background-color: $background-color_1;
}
&:hover {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
background-color: $background-color_1;
}
&:active {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
background-color: $background-color_4;
&:hover {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154);
}
}
&:checked {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
background-color: $background-color_4;
&:hover {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154);
}
}
&:disabled {
box-shadow: none;
background-color: $background-color_5;
}
&:first-child {
margin-left: 0;
}
&:last-child {
margin-right: 0;
}
}
button.on {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
background-color: $background-color_4;
&:hover {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154);
}
}
button.active {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
background-color: $background-color_4;
&:hover {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154);
}
}
}
button.close-button {
all: unset; all: unset;
transition: 200ms; transition: 200ms;
border-radius: 9px; border-radius: 9px;
background-color: $background-color_5; background-color: $background-color_3;
background-image: none; box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
box-shadow: none;
margin-left: 9px;
border-radius: 7.2px; border-radius: 7.2px;
min-width: 1.2em; font-size: 1.2em;
min-height: 1.2em; padding: 4.5px 9px;
margin: 9px 4.5px 0;
* { * {
font-size: 16px; font-size: 16px;
} }
@ -137,13 +70,11 @@ $background-color_10: rgba(238, 238, 238, 0.5);
&:hover { &:hover {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03); box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
background-color: $background-color_1; background-color: $background-color_1;
background-color: $background-color_2;
} }
&:active { &:active {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03); box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
background-image: linear-gradient(to right, #51a4e7, #6cb2eb); background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
background-color: $background-color_4; background-color: $background-color_4;
background-image: linear-gradient(#e67090, #e67090);
&:hover { &:hover {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154); box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154);
} }
@ -160,8 +91,14 @@ $background-color_10: rgba(238, 238, 238, 0.5);
box-shadow: none; box-shadow: none;
background-color: $background-color_5; background-color: $background-color_5;
} }
&:first-child {
margin-left: 0;
}
&:last-child {
margin-right: 0;
}
} }
button.close-button.on { button.on {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03); box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
background-image: linear-gradient(to right, #51a4e7, #6cb2eb); background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
background-color: $background-color_4; background-color: $background-color_4;
@ -169,7 +106,7 @@ $background-color_10: rgba(238, 238, 238, 0.5);
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154); box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154);
} }
} }
button.close-button.active { button.active {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03); box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
background-image: linear-gradient(to right, #51a4e7, #6cb2eb); background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
background-color: $background-color_4; background-color: $background-color_4;
@ -178,4 +115,65 @@ $background-color_10: rgba(238, 238, 238, 0.5);
} }
} }
} }
button.close-button {
all: unset;
transition: 200ms;
border-radius: 9px;
background-color: $background-color_5;
background-image: none;
box-shadow: none;
margin-left: 9px;
border-radius: 7.2px;
min-width: 1.2em;
min-height: 1.2em;
* {
font-size: 16px;
}
&:focus {
box-shadow: inset 0 0 0 1px #51a4e7;
background-color: $background-color_1;
}
&:hover {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
background-color: $background-color_1;
background-color: $background-color_2;
}
&:active {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
background-color: $background-color_4;
background-image: linear-gradient(#e67090, #e67090);
&:hover {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154);
}
}
&:checked {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
background-color: $background-color_4;
&:hover {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154);
}
}
&:disabled {
box-shadow: none;
background-color: $background-color_5;
}
}
button.close-button.on {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
background-color: $background-color_4;
&:hover {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154);
}
}
button.close-button.active {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
background-color: $background-color_4;
&:hover {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154);
}
}
}

3
config/ags/style.css
View file

@ -262,10 +262,9 @@ tooltip {
box-shadow: inset 0 0 0.5em 0 #e67090; } box-shadow: inset 0 0 0.5em 0 #e67090; }
.notification > box { .notification > box {
padding: 9px;
all: unset; all: unset;
box-shadow: 0 0 4.5px 0 rgba(0, 0, 0, 0.4); box-shadow: 0 0 4.5px 0 rgba(0, 0, 0, 0.4);
margin: 9px; margin: 9px 9px 0 9px;
border: 2px solid rgba(189, 147, 249, 0.8); border: 2px solid rgba(189, 147, 249, 0.8);
border-radius: 15px; border-radius: 15px;
background-color: rgba(40, 42, 54, 0.8); background-color: rgba(40, 42, 54, 0.8);