gradient at bottom of sideright scrollables

This commit is contained in:
end-4
2024-06-20 19:25:52 +07:00
parent 18dcdfaa49
commit b72685f6a3
3 changed files with 36 additions and 22 deletions
@@ -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,
+4
View File
@@ -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);
} }