notifpopups: more compact + better styles
This commit is contained in:
parent
3ddc75029c
commit
cc589cec95
3 changed files with 32 additions and 22 deletions
|
|
@ -4,10 +4,6 @@
|
||||||
@use "font";
|
@use "font";
|
||||||
|
|
||||||
@mixin popup($colour, $alpha) {
|
@mixin popup($colour, $alpha) {
|
||||||
@include lib.border($colour, $alpha);
|
|
||||||
|
|
||||||
border-right: none;
|
|
||||||
|
|
||||||
.separator {
|
.separator {
|
||||||
background-color: $colour;
|
background-color: $colour;
|
||||||
}
|
}
|
||||||
|
|
@ -20,21 +16,17 @@
|
||||||
.notifpopups {
|
.notifpopups {
|
||||||
min-width: lib.s(425);
|
min-width: lib.s(425);
|
||||||
padding-left: lib.s(10); // So notifications can overshoot for init animation
|
padding-left: lib.s(10); // So notifications can overshoot for init animation
|
||||||
|
padding-right: lib.s(10);
|
||||||
// For shadow
|
padding-top: lib.s(5);
|
||||||
& > :last-child .wrapper {
|
|
||||||
padding-bottom: lib.s(15);
|
|
||||||
}
|
|
||||||
|
|
||||||
.notification {
|
.notification {
|
||||||
.wrapper {
|
.wrapper {
|
||||||
padding-top: lib.s(10);
|
padding: lib.s(5); // For shadow
|
||||||
padding-left: lib.s(15); // For shadow
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.inner {
|
.inner {
|
||||||
@include lib.rounded(8, $tr: 0, $br: 0);
|
@include lib.rounded(8);
|
||||||
@include lib.shadow;
|
@include lib.shadow(black, 0.64, 0, 0, 3);
|
||||||
|
|
||||||
&.low {
|
&.low {
|
||||||
@include popup(scheme.$overlay0, 0.3);
|
@include popup(scheme.$overlay0, 0.3);
|
||||||
|
|
|
||||||
|
|
@ -55,6 +55,7 @@ label.icon {
|
||||||
|
|
||||||
.body {
|
.body {
|
||||||
font-size: lib.s(14);
|
font-size: lib.s(14);
|
||||||
|
color: scheme.$subtext0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.actions {
|
.actions {
|
||||||
|
|
|
||||||
|
|
@ -84,17 +84,34 @@ export default class Notification extends Widget.Box {
|
||||||
{notification.image && <Image icon={notification.image} />}
|
{notification.image && <Image icon={notification.image} />}
|
||||||
<box vertical>
|
<box vertical>
|
||||||
<label className="summary" xalign={0} label={notification.summary} truncate />
|
<label className="summary" xalign={0} label={notification.summary} truncate />
|
||||||
<label className="body" xalign={0} label={notification.body} wrap useMarkup />
|
{notification.body && (
|
||||||
|
<label
|
||||||
|
className="body"
|
||||||
|
xalign={0}
|
||||||
|
label={popup ? notification.body.split("\n")[0] : notification.body}
|
||||||
|
wrap
|
||||||
|
useMarkup
|
||||||
|
lines={popup ? 1 : -1}
|
||||||
|
truncate={popup}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
</box>
|
</box>
|
||||||
</box>
|
</box>
|
||||||
|
{!popup && (
|
||||||
<box className="actions">
|
<box className="actions">
|
||||||
<button hexpand cursor="pointer" onClicked={() => notification.dismiss()} label="Close" />
|
<button
|
||||||
|
hexpand
|
||||||
|
cursor="pointer"
|
||||||
|
onClicked={() => notification.dismiss()}
|
||||||
|
label="Close"
|
||||||
|
/>
|
||||||
{notification.actions.map(a => (
|
{notification.actions.map(a => (
|
||||||
<button hexpand cursor="pointer" onClicked={() => notification.invoke(a.id)}>
|
<button hexpand cursor="pointer" onClicked={() => notification.invoke(a.id)}>
|
||||||
{notification.actionIcons ? <icon icon={a.label} /> : a.label}
|
{notification.actionIcons ? <icon icon={a.label} /> : a.label}
|
||||||
</button>
|
</button>
|
||||||
))}
|
))}
|
||||||
</box>
|
</box>
|
||||||
|
)}
|
||||||
</box>
|
</box>
|
||||||
</box>
|
</box>
|
||||||
</revealer>
|
</revealer>
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue