From 5f59cd56d227d968d58c69a4718dd45fa2154364 Mon Sep 17 00:00:00 2001 From: matt1432 Date: Mon, 11 Sep 2023 18:23:47 -0400 Subject: [PATCH] fix(ags): fix gesture not working with touch --- config/ags/js/misc/drag.js | 21 ----- config/ags/js/notifications/base.js | 5 +- .../ags/scss/widgets/notification-center.scss | 11 +-- config/ags/scss/widgets/notification.scss | 43 +--------- config/ags/style.css | 79 ++++++------------- 5 files changed, 37 insertions(+), 122 deletions(-) diff --git a/config/ags/js/misc/drag.js b/config/ags/js/misc/drag.js index dfdf25d..9ac0ee8 100644 --- a/config/ags/js/misc/drag.js +++ b/config/ags/js/misc/drag.js @@ -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', - }), - }), - ], - }), -});*/ diff --git a/config/ags/js/notifications/base.js b/config/ags/js/notifications/base.js index a090322..805e92e 100644 --- a/config/ags/js/notifications/base.js +++ b/config/ags/js/notifications/base.js @@ -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({ diff --git a/config/ags/scss/widgets/notification-center.scss b/config/ags/scss/widgets/notification-center.scss index 8b2acb2..605254e 100644 --- a/config/ags/scss/widgets/notification-center.scss +++ b/config/ags/scss/widgets/notification-center.scss @@ -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; diff --git a/config/ags/scss/widgets/notification.scss b/config/ags/scss/widgets/notification.scss index 7216b75..9fbfeec 100644 --- a/config/ags/scss/widgets/notification.scss +++ b/config/ags/scss/widgets/notification.scss @@ -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); } diff --git a/config/ags/style.css b/config/ags/style.css index c7cdaa0..d34c55b 100644 --- a/config/ags/style.css +++ b/config/ags/style.css @@ -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); }