forked from Shinonome/dots-hyprland
gradient at bottom of sideright scrollables
This commit is contained in:
@@ -1,7 +1,7 @@
|
|||||||
import Widget from 'resource:///com/github/Aylur/ags/widget.js';
|
import Widget from 'resource:///com/github/Aylur/ags/widget.js';
|
||||||
import Bluetooth from 'resource:///com/github/Aylur/ags/service/bluetooth.js';
|
import Bluetooth from 'resource:///com/github/Aylur/ags/service/bluetooth.js';
|
||||||
import * as Utils from 'resource:///com/github/Aylur/ags/utils.js';
|
import * as Utils from 'resource:///com/github/Aylur/ags/utils.js';
|
||||||
const { Box, Button, Icon, Label, Scrollable, Slider, Stack } = Widget;
|
const { Box, Button, Icon, Label, Scrollable, Slider, Stack, Overlay } = Widget;
|
||||||
const { execAsync, exec } = Utils;
|
const { execAsync, exec } = Utils;
|
||||||
import { MaterialIcon } from '../../.commonwidgets/materialicon.js';
|
import { MaterialIcon } from '../../.commonwidgets/materialicon.js';
|
||||||
import { setupCursorHover } from '../../.widgetutils/cursorhover.js';
|
import { setupCursorHover } from '../../.widgetutils/cursorhover.js';
|
||||||
@@ -103,22 +103,28 @@ export default (props) => {
|
|||||||
]
|
]
|
||||||
})]
|
})]
|
||||||
});
|
});
|
||||||
const deviceList = Scrollable({
|
const deviceList = Overlay({
|
||||||
vexpand: true,
|
passThrough: true,
|
||||||
child: Box({
|
child: Scrollable({
|
||||||
attribute: {
|
vexpand: true,
|
||||||
'updateDevices': (self) => {
|
child: Box({
|
||||||
const devices = Bluetooth.devices;
|
attribute: {
|
||||||
self.children = devices.map(d => BluetoothDevice(d));
|
'updateDevices': (self) => {
|
||||||
|
const devices = Bluetooth.devices;
|
||||||
|
self.children = devices.map(d => BluetoothDevice(d));
|
||||||
|
},
|
||||||
},
|
},
|
||||||
},
|
vertical: true,
|
||||||
vertical: true,
|
className: 'spacing-v-5 margin-bottom-15',
|
||||||
className: 'spacing-v-5',
|
setup: (self) => self
|
||||||
setup: (self) => self
|
.hook(Bluetooth, self.attribute.updateDevices, 'device-added')
|
||||||
.hook(Bluetooth, self.attribute.updateDevices, 'device-added')
|
.hook(Bluetooth, self.attribute.updateDevices, 'device-removed')
|
||||||
.hook(Bluetooth, self.attribute.updateDevices, 'device-removed')
|
,
|
||||||
,
|
})
|
||||||
})
|
}),
|
||||||
|
overlays: [Box({
|
||||||
|
className: 'sidebar-centermodules-scrollgradient-bottom'
|
||||||
|
})]
|
||||||
});
|
});
|
||||||
const mainContent = Stack({
|
const mainContent = Stack({
|
||||||
children: {
|
children: {
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
import Widget from 'resource:///com/github/Aylur/ags/widget.js';
|
import Widget from 'resource:///com/github/Aylur/ags/widget.js';
|
||||||
import Network from "resource:///com/github/Aylur/ags/service/network.js";
|
import Network from "resource:///com/github/Aylur/ags/service/network.js";
|
||||||
import * as Utils from 'resource:///com/github/Aylur/ags/utils.js';
|
import * as Utils from 'resource:///com/github/Aylur/ags/utils.js';
|
||||||
const { Box, Button, Entry, Icon, Label, Revealer, Scrollable, Slider, Stack } = Widget;
|
const { Box, Button, Entry, Icon, Label, Revealer, Scrollable, Slider, Stack, Overlay } = Widget;
|
||||||
const { execAsync, exec } = Utils;
|
const { execAsync, exec } = Utils;
|
||||||
import { MaterialIcon } from '../../.commonwidgets/materialicon.js';
|
import { MaterialIcon } from '../../.commonwidgets/materialicon.js';
|
||||||
import { setupCursorHover } from '../../.widgetutils/cursorhover.js';
|
import { setupCursorHover } from '../../.widgetutils/cursorhover.js';
|
||||||
@@ -161,8 +161,9 @@ export default (props) => {
|
|||||||
const networkList = Box({
|
const networkList = Box({
|
||||||
vertical: true,
|
vertical: true,
|
||||||
className: 'spacing-v-10',
|
className: 'spacing-v-10',
|
||||||
children: [
|
children: [Overlay({
|
||||||
Scrollable({
|
passThrough: true,
|
||||||
|
child: Scrollable({
|
||||||
vexpand: true,
|
vexpand: true,
|
||||||
child: Box({
|
child: Box({
|
||||||
attribute: {
|
attribute: {
|
||||||
@@ -180,11 +181,14 @@ export default (props) => {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
vertical: true,
|
vertical: true,
|
||||||
className: 'spacing-v-5',
|
className: 'spacing-v-5 margin-bottom-15',
|
||||||
setup: (self) => self.hook(Network, self.attribute.updateNetworks),
|
setup: (self) => self.hook(Network, self.attribute.updateNetworks),
|
||||||
})
|
})
|
||||||
})
|
}),
|
||||||
]
|
overlays: [Box({
|
||||||
|
className: 'sidebar-centermodules-scrollgradient-bottom'
|
||||||
|
})]
|
||||||
|
})]
|
||||||
});
|
});
|
||||||
const bottomBar = Box({
|
const bottomBar = Box({
|
||||||
homogeneous: true,
|
homogeneous: true,
|
||||||
|
|||||||
@@ -992,4 +992,8 @@ $waifu_image_overlay_transparency: 0.7;
|
|||||||
|
|
||||||
.sidebar-centermodules-bottombar-button:active {
|
.sidebar-centermodules-bottombar-button:active {
|
||||||
background-color: $layer2Active;
|
background-color: $layer2Active;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-centermodules-scrollgradient-bottom {
|
||||||
|
background: linear-gradient(to top, $layer1 0%, transparentize($layer1, 1) 1.023rem);
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user