mirror of
https://github.com/end-4/dots-hyprland.git
synced 2026-06-05 14:59:27 -05:00
waffles: transparency
This commit is contained in:
end-4
@@ -7,7 +7,7 @@ import qs.modules.common.widgets
|
||||
|
||||
QuickToggleModel {
|
||||
name: Translation.tr("Bluetooth")
|
||||
statusText: BluetoothStatus.firstActiveDevice?.name ?? Translation.tr("No device")
|
||||
statusText: BluetoothStatus.firstActiveDevice?.name ?? Translation.tr("Not connected")
|
||||
tooltipText: Translation.tr("%1 | Right-click to configure").arg(
|
||||
(BluetoothStatus.firstActiveDevice?.name ?? Translation.tr("Bluetooth"))
|
||||
+ (BluetoothStatus.activeDeviceCount > 1 ? ` +${BluetoothStatus.activeDeviceCount - 1}` : "")
|
||||
|
||||
@@ -93,7 +93,9 @@ Scope {
|
||||
WlrLayershell.namespace: "quickshell:session"
|
||||
WlrLayershell.layer: WlrLayer.Overlay
|
||||
WlrLayershell.keyboardFocus: WlrKeyboardFocus.Exclusive
|
||||
color: ColorUtils.transparentize(Appearance.m3colors.m3background, 0.3)
|
||||
// This is a big surface so we needa carefully choose the transparency,
|
||||
// or we'll get a large scary rgb blob
|
||||
color: ColorUtils.transparentize(Appearance.m3colors.m3background, Appearance.m3colors.darkmode ? 0.04 : 0.12)
|
||||
|
||||
anchors {
|
||||
top: true
|
||||
|
||||
@@ -10,7 +10,7 @@ import qs.modules.waffle.looks
|
||||
Rectangle {
|
||||
Layout.fillHeight: false
|
||||
Layout.fillWidth: true
|
||||
color: Looks.colors.bgPanelFooter
|
||||
color: "transparent"
|
||||
|
||||
implicitWidth: 360
|
||||
implicitHeight: 47
|
||||
|
||||
@@ -22,7 +22,11 @@ FooterRectangle {
|
||||
|
||||
FluentIcon {
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
icon: WIcons.batteryIcon
|
||||
icon: WIcons.batteryLevelIcon
|
||||
FluentIcon {
|
||||
anchors.fill: parent
|
||||
icon: WIcons.batteryIcon
|
||||
}
|
||||
}
|
||||
WText {
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
|
||||
@@ -19,8 +19,11 @@ WButton {
|
||||
Layout.fillHeight: true
|
||||
topInset: 4
|
||||
bottomInset: 4
|
||||
leftInset: 0
|
||||
rightInset: 0
|
||||
horizontalPadding: 8
|
||||
|
||||
colBackgroundBorder: ColorUtils.transparentize(Looks.colors.bg1Border, (root.checked || root.hovered) ? Looks.contentTransparency : 1)
|
||||
colBackgroundBorder: ColorUtils.transparentize(Looks.colors.bg1Border, (root.checked || root.hovered) ? Looks.backgroundTransparency : 1)
|
||||
color: {
|
||||
if (root.down) {
|
||||
return root.colBackgroundActive
|
||||
|
||||
@@ -118,7 +118,7 @@ Loader {
|
||||
bottomMargin: root.barAtBottom ? popupWindow.sourceEdgeMargin : (root.ambientShadowWidth + root.visualMargin)
|
||||
topMargin: root.barAtBottom ? (root.ambientShadowWidth + root.visualMargin) : popupWindow.sourceEdgeMargin
|
||||
}
|
||||
color: Looks.colors.bg1
|
||||
color: Looks.colors.bg1Base
|
||||
radius: Looks.radius.large
|
||||
|
||||
// test
|
||||
|
||||
@@ -50,7 +50,11 @@ BarButton {
|
||||
visible: Battery?.available ?? false
|
||||
iconItem: FluentIcon {
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
icon: WIcons.batteryIcon
|
||||
icon: WIcons.batteryLevelIcon
|
||||
FluentIcon {
|
||||
anchors.fill: parent
|
||||
icon: WIcons.batteryIcon
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,7 +9,8 @@ BarButton {
|
||||
id: root
|
||||
|
||||
rightInset: 12 // For now this is the rightmost button. Desktop peek is useless. (for now)
|
||||
padding: 12
|
||||
leftPadding: 12
|
||||
rightPadding: 22
|
||||
|
||||
checked: GlobalStates.sidebarRightOpen
|
||||
onClicked: {
|
||||
@@ -17,7 +18,7 @@ BarButton {
|
||||
}
|
||||
|
||||
contentItem: Item {
|
||||
anchors.centerIn: root.background
|
||||
// anchors.centerIn: parent
|
||||
implicitHeight: contentLayout.implicitHeight
|
||||
implicitWidth: contentLayout.implicitWidth
|
||||
Row {
|
||||
|
||||
@@ -85,7 +85,7 @@ PopupWindow {
|
||||
bottomMargin: root.bottom ? sourceEdgeMargin : (root.ambientShadowWidth + root.visualMargin)
|
||||
topMargin: root.bottom ? (root.ambientShadowWidth + root.visualMargin) : sourceEdgeMargin
|
||||
}
|
||||
color: Looks.colors.bg1
|
||||
color: Looks.colors.bg1Base
|
||||
radius: Looks.radius.large
|
||||
|
||||
layer.enabled: true
|
||||
|
||||
@@ -9,7 +9,7 @@ Rectangle {
|
||||
id: root
|
||||
|
||||
property bool shiny: true // Top border
|
||||
property color borderColor: ColorUtils.transparentize(Looks.colors.bg1Border, shiny ? Looks.contentTransparency : 1)
|
||||
property color borderColor: ColorUtils.transparentize(Looks.colors.bg1Border, shiny ? 0.5 : 1)
|
||||
color: Looks.colors.bg1Hover
|
||||
radius: Looks.radius.medium
|
||||
Behavior on color {
|
||||
|
||||
@@ -8,6 +8,8 @@ import qs.modules.common.functions
|
||||
|
||||
Singleton {
|
||||
id: root
|
||||
property QtObject darkColors
|
||||
property QtObject lightColors
|
||||
property QtObject colors
|
||||
property QtObject radius
|
||||
property QtObject font
|
||||
@@ -15,44 +17,100 @@ Singleton {
|
||||
property string iconsPath: `${Directories.assetsPath}/icons/fluent`
|
||||
property bool dark: Appearance.m3colors.darkmode
|
||||
|
||||
property real backgroundTransparency: 0.17
|
||||
property real contentTransparency: 0.25
|
||||
property real backgroundTransparency: 0.15
|
||||
property real panelBackgroundTransparency: 0.12
|
||||
property real panelLayerTransparency: root.dark ? 0.9 : 0.7
|
||||
property real contentTransparency: root.dark ? 0.9 : 0.5
|
||||
function applyBackgroundTransparency(col) {
|
||||
return ColorUtils.applyAlpha(col, 1 - root.backgroundTransparency)
|
||||
}
|
||||
function applyContentTransparency(col) {
|
||||
return ColorUtils.applyAlpha(col, 1 - root.contentTransparency)
|
||||
}
|
||||
lightColors: QtObject { // TODO: figure out transparency
|
||||
id: lightColors
|
||||
property color bgPanelFooter: "#EEEEEE"
|
||||
property color bgPanelBody: "#F2F2F2"
|
||||
property color bgPanelSeparator: "#E0E0E0"
|
||||
property color bg0: "#EEEEEE"
|
||||
property color bg0Border: "#BEBEBE"
|
||||
property color bg1: "#F7F7F7"
|
||||
property color bg1Base: "#F7F7F7"
|
||||
property color bg1Hover: "#F7F7F7"
|
||||
property color bg1Active: '#EFEFEF'
|
||||
property color bg1Border: '#141414'
|
||||
property color bg2: "#FBFBFB"
|
||||
property color bg2Base: "#FBFBFB"
|
||||
property color bg2Hover: "#FDFDFD"
|
||||
property color bg2Active: "#FDFDFD"
|
||||
property color bg2Border: "#EEEEEE"
|
||||
property color subfg: "#5C5C5C"
|
||||
property color fg: "#000000"
|
||||
property color fg1: "#626262"
|
||||
property color inactiveIcon: "#C4C4C4"
|
||||
property color controlBg: '#b18484'
|
||||
property color controlFg: "#FFFFFF"
|
||||
property color accentUnfocused: "#848484"
|
||||
}
|
||||
darkColors: QtObject {
|
||||
id: darkColors
|
||||
property color bgPanelFooter: "#1C1C1C"
|
||||
property color bgPanelBody: '#616161'
|
||||
property color bgPanelSeparator: "#191919"
|
||||
property color bg0: "#1C1C1C"
|
||||
property color bg0Border: "#404040"
|
||||
property color bg1Base: "#2C2C2C"
|
||||
property color bg1: "#a8a8a8"
|
||||
property color bg1Hover: "#b3b3b3"
|
||||
property color bg1Active: '#727272'
|
||||
property color bg1Border: '#bebebe'
|
||||
property color bg2Base: "#313131"
|
||||
property color bg2: '#8a8a8a'
|
||||
property color bg2Hover: '#b1b1b1'
|
||||
property color bg2Active: '#919191'
|
||||
property color bg2Border: "#bebebe"
|
||||
property color subfg: "#CED1D7"
|
||||
property color fg: "#FFFFFF"
|
||||
property color fg1: "#D1D1D1"
|
||||
property color inactiveIcon: "#494949"
|
||||
property color controlBg: "#9B9B9B"
|
||||
property color controlFg: "#454545"
|
||||
property color accentUnfocused: "#989898"
|
||||
}
|
||||
colors: QtObject {
|
||||
id: colors
|
||||
property color shadow: ColorUtils.transparentize("#000000", 0.62)
|
||||
property color ambientShadow: ColorUtils.transparentize("#000000", 0.75)
|
||||
property color bgPanelFooter: root.dark ? "#1C1C1C" : "#EEEEEE"
|
||||
property color bgPanelBody: root.dark ? "#242424" : "#F2F2F2"
|
||||
property color bgPanelSeparator: root.dark ? "#191919" : "#E0E0E0"
|
||||
property color bg0: root.dark ? "#1C1C1C" : "#EEEEEE"
|
||||
property color bg0Border: root.dark ? "#404040" : "#BEBEBE"
|
||||
property color bg1: root.dark ? "#2C2C2C" : "#F7F7F7"
|
||||
property color bg1Hover: root.dark ? "#292929" : "#F7F7F7"
|
||||
property color bg1Active: root.dark ? "#252525" : "#F3F3F3"
|
||||
property color bg1Border: root.dark ? "#333333" : "#E9E9E9"
|
||||
property color bg2: root.dark ? "#313131" : "#FBFBFB"
|
||||
property color bg2Hover: root.dark ? "#383838" : "#FDFDFD"
|
||||
property color bg2Active: root.dark ? "#333333" : "#FDFDFD"
|
||||
property color bg2Border: root.dark ? "#464646" : "#EEEEEE"
|
||||
property color subfg: root.dark ? "#CED1D7" : "#5C5C5C"
|
||||
property color fg: root.dark ? "#FFFFFF" : "#000000"
|
||||
property color fg1: root.dark ? "#D1D1D1" : "#626262"
|
||||
property color inactiveIcon: root.dark ? "#494949" : "#C4C4C4"
|
||||
property color controlBg: root.dark ? "#9B9B9B" : "#868686"
|
||||
property color controlFg: root.dark ? "#454545" : "#FFFFFF"
|
||||
property color bgPanelFooterBase: ColorUtils.transparentize(root.dark ? root.darkColors.bgPanelFooter : root.lightColors.bgPanelFooter, root.panelBackgroundTransparency)
|
||||
property color bgPanelFooter: ColorUtils.transparentize(root.dark ? root.darkColors.bgPanelFooter : root.lightColors.bgPanelFooter, root.panelLayerTransparency)
|
||||
property color bgPanelBody: ColorUtils.transparentize(root.dark ? root.darkColors.bgPanelBody : root.lightColors.bgPanelBody, root.panelLayerTransparency)
|
||||
property color bgPanelSeparator: ColorUtils.transparentize(root.dark ? root.darkColors.bgPanelSeparator : root.lightColors.bgPanelSeparator, root.backgroundTransparency)
|
||||
property color bg0Opaque: root.dark ? root.darkColors.bg0 : root.lightColors.bg0
|
||||
property color bg0: ColorUtils.transparentize(bg0Opaque, root.backgroundTransparency)
|
||||
property color bg0Border: ColorUtils.transparentize(root.dark ? root.darkColors.bg0Border : root.lightColors.bg0Border, root.backgroundTransparency)
|
||||
property color bg1Base: ColorUtils.transparentize(root.dark ? root.darkColors.bg1Base : root.lightColors.bg1Base, root.backgroundTransparency)
|
||||
property color bg1: ColorUtils.transparentize(root.dark ? root.darkColors.bg1 : root.lightColors.bg1, root.contentTransparency)
|
||||
property color bg1Hover: ColorUtils.transparentize(root.dark ? root.darkColors.bg1Hover : root.lightColors.bg1Hover, root.contentTransparency)
|
||||
property color bg1Active: ColorUtils.transparentize(root.dark ? root.darkColors.bg1Active : root.lightColors.bg1Active, root.contentTransparency)
|
||||
property color bg1Border: ColorUtils.transparentize(root.dark ? root.darkColors.bg1Border : root.lightColors.bg1Border, root.contentTransparency)
|
||||
property color bg2Base: ColorUtils.transparentize(root.dark ? root.darkColors.bg2Base : root.lightColors.bg2Base, root.backgroundTransparency)
|
||||
property color bg2: ColorUtils.transparentize(root.dark ? root.darkColors.bg2 : root.lightColors.bg2, root.contentTransparency)
|
||||
property color bg2Hover: ColorUtils.transparentize(root.dark ? root.darkColors.bg2Hover : root.lightColors.bg2Hover, root.contentTransparency)
|
||||
property color bg2Active: ColorUtils.transparentize(root.dark ? root.darkColors.bg2Active : root.lightColors.bg2Active, root.contentTransparency)
|
||||
property color bg2Border: ColorUtils.transparentize(root.dark ? root.darkColors.bg2Border : root.lightColors.bg2Border, root.contentTransparency)
|
||||
property color subfg: root.dark ? root.darkColors.subfg : root.lightColors.subfg
|
||||
property color fg: root.dark ? root.darkColors.fg : root.lightColors.fg
|
||||
property color fg1: root.dark ? root.darkColors.fg1 : root.lightColors.fg1
|
||||
property color inactiveIcon: root.dark ? root.darkColors.inactiveIcon : root.lightColors.inactiveIcon
|
||||
property color controlBg: root.dark ? root.darkColors.controlBg : root.lightColors.controlBg
|
||||
property color controlFg: root.dark ? root.darkColors.controlFg : root.lightColors.controlFg
|
||||
property color danger: "#C42B1C"
|
||||
property color dangerActive: "#B62D1F"
|
||||
property color warning: "#FF9900"
|
||||
// property color accent: root.dark ? "#A5C6D8" : "#5377A3"
|
||||
property color accent: Appearance.colors.colPrimary
|
||||
property color accentHover: Appearance.colors.colPrimaryHover
|
||||
property color accentActive: Appearance.colors.colPrimaryActive
|
||||
property color accentUnfocused: root.dark ? "#989898" : "#848484"
|
||||
property color accentUnfocused: root.dark ? root.darkColors.accentUnfocused : root.lightColors.accentUnfocused
|
||||
property color accentFg: ColorUtils.isDark(accent) ? "#FFFFFF" : "#000000"
|
||||
}
|
||||
|
||||
|
||||
@@ -25,6 +25,10 @@ Item {
|
||||
implicitHeight: borderRect.implicitHeight
|
||||
implicitWidth: borderRect.implicitWidth
|
||||
|
||||
WRectangularShadow {
|
||||
target: borderRect
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
id: borderRect
|
||||
z: 1
|
||||
|
||||
@@ -85,8 +85,8 @@ Button {
|
||||
property alias border: backgroundRect.border
|
||||
horizontalPadding: 10
|
||||
verticalPadding: 6
|
||||
implicitHeight: contentItem.implicitHeight + verticalPadding * 2
|
||||
implicitWidth: contentItem.implicitWidth + horizontalPadding * 2
|
||||
implicitHeight: contentItem.implicitHeight + verticalPadding * 2 + topInset + bottomInset
|
||||
implicitWidth: contentItem.implicitWidth + horizontalPadding * 2 + leftInset + rightInset
|
||||
|
||||
background: Rectangle {
|
||||
id: backgroundRect
|
||||
|
||||
@@ -40,7 +40,12 @@ Singleton {
|
||||
return "battery-warning";
|
||||
if (Battery.percentage >= 0.9)
|
||||
return "battery-full";
|
||||
return `battery-${Math.ceil(Battery.percentage * 10)}`;
|
||||
return `battery-0`;
|
||||
}
|
||||
|
||||
property string batteryLevelIcon: {
|
||||
const discreteLevel = Math.ceil(Battery.percentage * 10)
|
||||
return `battery-${discreteLevel > 9 ? "full" : discreteLevel}`;
|
||||
}
|
||||
|
||||
property string volumeIcon: {
|
||||
|
||||
@@ -0,0 +1,11 @@
|
||||
import QtQuick
|
||||
import QtQuick.Effects
|
||||
import qs.modules.common
|
||||
import qs.modules.common.widgets
|
||||
|
||||
StyledRectangularShadow {
|
||||
blur: 10
|
||||
spread: 2
|
||||
offset: Qt.vector2d(0.0, 4)
|
||||
color: Looks.colors.shadow
|
||||
}
|
||||
@@ -4,15 +4,15 @@ import qs.modules.waffle.looks
|
||||
|
||||
StackView {
|
||||
id: root
|
||||
property real moveDistance: 20
|
||||
property int pushDuration: 100
|
||||
property real moveDistance: 30
|
||||
property int pushDuration: 220
|
||||
property list<real> bezierCurve: Looks.transition.easing.bezierCurve.easeIn
|
||||
clip: true
|
||||
|
||||
property alias color: background.color
|
||||
background: Rectangle {
|
||||
id: background
|
||||
color: Looks.colors.bgPanelBody
|
||||
color: Looks.colors.bgPanelFooterBase
|
||||
}
|
||||
|
||||
pushEnter: Transition {
|
||||
|
||||
@@ -21,7 +21,7 @@ Item {
|
||||
anchors.centerIn: parent
|
||||
implicitWidth: root.realContentItem.implicitWidth + root.horizontalPadding * 2
|
||||
implicitHeight: root.realContentItem.implicitHeight + root.verticalPadding * 2
|
||||
color: Looks.colors.bg1
|
||||
color: Looks.colors.bg1Base
|
||||
radius: Looks.radius.medium
|
||||
|
||||
children: [root.realContentItem]
|
||||
|
||||
Reference in New Issue
Block a user