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

fix(ags): fix gesture not working with touch

Browse source
This commit is contained in:
matt1432 2023-09-11 18:23:47 -04:00
parent c75afb84b6
commit 5f59cd56d2
5 changed files with 37 additions and 122 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -69,24 +69,3 @@ export const Draggable = ({
return w;
};
/*export const DragTest = Window({
name: 'drag-test',
layer: 'overlay',
anchor: 'top right',
child: Box({
style: 'background: white; min-width: 200px; min-height: 200px;',
children: [
Draggable({
maxOffset: 120,
startMargin: 5,
className: 'test',
style: 'background: black; min-width: 40px; min-height: 20px',
child: Button({
style: 'background: red; min-width: 10px; min-height: 10px',
onClicked: 'echo hi',
}),
}),
],
}),
});*/

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

@ -72,11 +72,8 @@ export default ({ id, summary, body, actions, urgency, time, ...icon }) => Dragg
},
///
child: EventBox({
child: Box({
className: `notification ${urgency}`,
/// TODO: see if this is still necessary
//
//onPrimaryClick: () => Notifications.dismiss(id),
vexpand: false,
// Notification
child: Box({

11
config/ags/scss/widgets/notification-center.scss
View file

@ -1,10 +1,10 @@
.notification-center {
min-height: 700px;
min-width: 500px;
min-width: 524px;
margin-top: 6px;
margin-right: 60px;
background: $bg;
border-radius: 12px;
border-radius: 30px;
border-top-right-radius: 0px;
border: 2px solid $contrastbg;
padding: 0px;
@ -48,9 +48,10 @@
.notification-list-box {
background: $bgfull;
border-radius: 12px;
border-top: 3px solid $bgSecondary;
box-shadow: 0 0 4.5px 0 rgba(0, 0, 0, 0.2);
padding: 0 12px 0 12px;
border-radius: 30px;
border-top: 2px solid $contrastbg;
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.5);
scrollbar {
all: unset;
border-radius: 8px;

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

@ -1,10 +1,3 @@
$color_1: #f1f1f1;
$color_2: #eee;
$color_3: rgba(238, 238, 238, 0.8);
$color_4: #141414;
$color_5: rgba(238, 238, 238, 0.3);
$color_6: white;
$font-family_1: "Ubuntu Nerd Font", sans-serif;
$background-color_1: rgba(238, 238, 238, 0.154);
$background-color_2: rgba(230, 112, 144, 0.5);
$background-color_3: rgba(238, 238, 238, 0.06);
@ -23,41 +16,31 @@ $background-color_10: rgba(238, 238, 238, 0.5);
}
.notification {
>box {
border-radius: 4.5px;
padding: 9px;
all: unset;
box-shadow: 0 0 4.5px 0 rgba(0, 0, 0, 0.6);
box-shadow: 0 0 4.5px 0 rgba(0, 0, 0, 0.4);
margin: 9px;
border: 1px solid rgba(238, 238, 238, 0.04);
border-radius: 15.3px;
background-color: $background-color_6;
color: $color_2;
border: 2px solid $contrastbg;
border-radius: 15px;
background-color: $bg;
padding: 16.2px;
border-radius: 9px;
* {
font-size: 16px;
font-family: $font-family_1;
}
}
&:hover {
.close-button {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
background-color: $background-color_1;
color: $color_1;
background-color: $background-color_2;
}
}
.title {
margin-right: 9px;
color: $color_2;
font-size: 1.1em;
}
.time {
color: $color_3;
}
.description {
font-size: .9em;
color: $color_3;
min-width: 350px;
}
.icon {
@ -72,7 +55,6 @@ $background-color_10: rgba(238, 238, 238, 0.5);
all: unset;
transition: 200ms;
border-radius: 9px;
color: $color_2;
background-color: $background-color_3;
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
border-radius: 7.2px;
@ -81,23 +63,19 @@ $background-color_10: rgba(238, 238, 238, 0.5);
margin: 9px 4.5px 0;
* {
font-size: 16px;
font-family: $font-family_1;
}
&:focus {
box-shadow: inset 0 0 0 1px #51a4e7;
background-color: $background-color_1;
color: $color_1;
}
&:hover {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
background-color: $background-color_1;
color: $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;
color: $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);
}
@ -106,7 +84,6 @@ $background-color_10: rgba(238, 238, 238, 0.5);
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;
color: $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);
}
@ -114,7 +91,6 @@ $background-color_10: rgba(238, 238, 238, 0.5);
&:disabled {
box-shadow: none;
background-color: $background-color_5;
color: $color_5;
}
&:first-child {
margin-left: 0;
@ -127,7 +103,6 @@ $background-color_10: rgba(238, 238, 238, 0.5);
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;
color: $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);
}
@ -136,7 +111,6 @@ $background-color_10: rgba(238, 238, 238, 0.5);
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;
color: $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);
}
@ -146,7 +120,6 @@ $background-color_10: rgba(238, 238, 238, 0.5);
all: unset;
transition: 200ms;
border-radius: 9px;
color: $color_2;
background-color: $background-color_5;
background-image: none;
box-shadow: none;
@ -156,24 +129,20 @@ $background-color_10: rgba(238, 238, 238, 0.5);
min-height: 1.2em;
* {
font-size: 16px;
font-family: $font-family_1;
}
&:focus {
box-shadow: inset 0 0 0 1px #51a4e7;
background-color: $background-color_1;
color: $color_1;
}
&:hover {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
background-color: $background-color_1;
color: $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;
color: $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);
@ -183,7 +152,6 @@ $background-color_10: rgba(238, 238, 238, 0.5);
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;
color: $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);
}
@ -191,14 +159,12 @@ $background-color_10: rgba(238, 238, 238, 0.5);
&:disabled {
box-shadow: none;
background-color: $background-color_5;
color: $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;
color: $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);
}
@ -207,7 +173,6 @@ $background-color_10: rgba(238, 238, 238, 0.5);
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;
color: $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);
}

79
config/ags/style.css
View file

@ -181,11 +181,11 @@ tooltip {
.notification-center {
min-height: 700px;
min-width: 500px;
min-width: 524px;
margin-top: 6px;
margin-right: 60px;
background: rgba(40, 42, 54, 0.8);
border-radius: 12px;
border-radius: 30px;
border-top-right-radius: 0px;
border: 2px solid rgba(189, 147, 249, 0.8);
padding: 0px;
@ -218,9 +218,10 @@ tooltip {
font-size: 1.2em; }
.notification-center .notification-list-box {
background: #282a36;
border-radius: 12px;
border-top: 3px solid rgba(56, 44, 74, 0.8);
box-shadow: 0 0 4.5px 0 rgba(0, 0, 0, 0.2); }
padding: 0 12px 0 12px;
border-radius: 30px;
border-top: 2px solid rgba(189, 147, 249, 0.8);
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.5); }
.notification-center .notification-list-box scrollbar {
all: unset;
border-radius: 8px;
@ -261,38 +262,28 @@ tooltip {
box-shadow: inset 0 0 0.5em 0 #e67090; }
.notification > box {
border-radius: 4.5px;
padding: 9px;
all: unset;
box-shadow: 0 0 4.5px 0 rgba(0, 0, 0, 0.6);
box-shadow: 0 0 4.5px 0 rgba(0, 0, 0, 0.4);
margin: 9px;
border: 1px solid rgba(238, 238, 238, 0.04);
border-radius: 15.3px;
background-color: #171717;
color: #eee;
padding: 16.2px;
border-radius: 9px; }
border: 2px solid rgba(189, 147, 249, 0.8);
border-radius: 15px;
background-color: rgba(40, 42, 54, 0.8);
padding: 16.2px; }
.notification > box * {
font-size: 16px;
font-family: "Ubuntu Nerd Font", sans-serif; }
font-size: 16px; }
.notification:hover .close-button {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
background-color: rgba(238, 238, 238, 0.154);
color: #f1f1f1;
background-color: rgba(230, 112, 144, 0.5); }
.notification .title {
margin-right: 9px;
color: #eee;
font-size: 1.1em; }
.notification .time {
color: rgba(238, 238, 238, 0.8); }
.notification .description {
font-size: .9em;
color: rgba(238, 238, 238, 0.8);
min-width: 350px; }
.notification .icon {
@ -306,7 +297,6 @@ tooltip {
all: unset;
transition: 200ms;
border-radius: 9px;
color: #eee;
background-color: rgba(238, 238, 238, 0.06);
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
border-radius: 7.2px;
@ -314,34 +304,28 @@ tooltip {
padding: 4.5px 9px;
margin: 9px 4.5px 0; }
.notification .actions button * {
font-size: 16px;
font-family: "Ubuntu Nerd Font", sans-serif; }
font-size: 16px; }
.notification .actions button:focus {
box-shadow: inset 0 0 0 1px #51a4e7;
background-color: rgba(238, 238, 238, 0.154);
color: #f1f1f1; }
background-color: rgba(238, 238, 238, 0.154); }
.notification .actions button:hover {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
background-color: rgba(238, 238, 238, 0.154);
color: #f1f1f1; }
background-color: rgba(238, 238, 238, 0.154); }
.notification .actions 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: #51a4e7;
color: #141414; }
background-color: #51a4e7; }
.notification .actions button:active: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); }
.notification .actions button:checked {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
background-color: #51a4e7;
color: #141414; }
background-color: #51a4e7; }
.notification .actions button:checked: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); }
.notification .actions button:disabled {
box-shadow: none;
background-color: transparent;
color: rgba(238, 238, 238, 0.3); }
background-color: transparent; }
.notification .actions button:first-child {
margin-left: 0; }
.notification .actions button:last-child {
@ -350,16 +334,14 @@ tooltip {
.notification .actions 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: #51a4e7;
color: #141414; }
background-color: #51a4e7; }
.notification .actions button.on: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); }
.notification .actions 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: #51a4e7;
color: #141414; }
background-color: #51a4e7; }
.notification .actions button.active: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); }
@ -367,7 +349,6 @@ tooltip {
all: unset;
transition: 200ms;
border-radius: 9px;
color: #eee;
background-color: transparent;
background-image: none;
box-shadow: none;
@ -376,49 +357,41 @@ tooltip {
min-width: 1.2em;
min-height: 1.2em; }
.notification button.close-button * {
font-size: 16px;
font-family: "Ubuntu Nerd Font", sans-serif; }
font-size: 16px; }
.notification button.close-button:focus {
box-shadow: inset 0 0 0 1px #51a4e7;
background-color: rgba(238, 238, 238, 0.154);
color: #f1f1f1; }
background-color: rgba(238, 238, 238, 0.154); }
.notification button.close-button:hover {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
background-color: rgba(238, 238, 238, 0.154);
color: #f1f1f1;
background-color: rgba(230, 112, 144, 0.5); }
.notification 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: #51a4e7;
color: #141414;
background-image: linear-gradient(#e67090, #e67090); }
.notification button.close-button:active: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); }
.notification button.close-button:checked {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
background-color: #51a4e7;
color: #141414; }
background-color: #51a4e7; }
.notification button.close-button:checked: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); }
.notification button.close-button:disabled {
box-shadow: none;
background-color: transparent;
color: rgba(238, 238, 238, 0.3); }
background-color: transparent; }
.notification 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: #51a4e7;
color: #141414; }
background-color: #51a4e7; }
.notification button.close-button.on: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); }
.notification 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: #51a4e7;
color: #141414; }
background-color: #51a4e7; }
.notification button.close-button.active: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); }