fix(ags): fix gesture not working with touch
This commit is contained in:
parent
c75afb84b6
commit
5f59cd56d2
5 changed files with 37 additions and 122 deletions
|
|
@ -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',
|
||||
}),
|
||||
}),
|
||||
],
|
||||
}),
|
||||
});*/
|
||||
|
|
|
|||
|
|
@ -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({
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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); }
|
||||
|
|
|
|||
Loading…
Reference in a new issue