fix: 独立窗口及任务栏图标适配深色模式
4 个独立窗口(AboutWindow/SettingsWindow/TextColorPicker/TrafficChartWindow) 新增 isDarkMode 属性,由 networkview.qml 检测后注入,各窗口定义深/浅双色方案。 深色模式检测从 DockPalette.iconTextPalette 改为 DTK.palette.window.hslLightness, 因 DockPalette 不随系统深色主题变化。 同时将 networkview.qml 任务栏图标和 NetworkPopup 弹窗的颜色基从 DockPalette.iconTextPalette 改为 DTK.palette.windowText,修复深色模式 下黑底黑字、浅色模式下白底白字的问题。
This commit is contained in:
@@ -3,9 +3,11 @@
|
||||
// SPDX-License-Identifier: LGPL-3.0-or-later
|
||||
|
||||
// 关于窗口:DTK 原生风格的独立顶层窗口,桌面居中弹出,展示插件信息
|
||||
// 设计要点:白色圆角卡片 + 键值对信息布局,信息标签使用 deepin 蓝(#0081FF),
|
||||
// 关闭按钮 hover 高亮色由父组件通过 accentColor 传入(红色)
|
||||
// 对外依赖:accentColor,由 networkview.qml 实例化时传入,触发方式为 show()/raise()/requestActivate()
|
||||
// 设计要点:圆角卡片 + 键值对信息布局,信息标签使用 deepin 蓝(#0081FF),
|
||||
// 关闭按钮 hover 高亮色由父组件通过 accentColor 传入(红色);
|
||||
// 深/浅主题由 isDarkMode 切换(networkview.qml 依据 DockPalette 检测任务栏深浅后传入),
|
||||
// 默认浅色,保证组件独立预览时与原版视觉一致
|
||||
// 对外依赖:accentColor、isDarkMode,由 networkview.qml 实例化时传入,触发方式为 show()/raise()/requestActivate()
|
||||
import QtQuick 2.15
|
||||
import QtQuick.Layouts 1.15
|
||||
import QtQuick.Window 2.15
|
||||
@@ -21,6 +23,18 @@ Window {
|
||||
// 默认值保证组件独立可用(如 qmlscene 预览时未传入)
|
||||
property string version: "1.0"
|
||||
|
||||
// 深色模式标记:由 networkview.qml 根据 DockPalette 检测后传入;
|
||||
// 默认 false(浅色)保证组件独立预览时与原版视觉一致
|
||||
property bool isDarkMode: false
|
||||
|
||||
// ---- 主题感知颜色:isDarkMode 为 false 时取值与原浅色硬编码完全一致 ----
|
||||
readonly property color winBg: isDarkMode ? "#202020" : "#FFFFFF"
|
||||
readonly property color cardBg: isDarkMode ? "#2A2A2A" : "#FFFFFF"
|
||||
readonly property color lineColor: isDarkMode ? "#383838" : "#E8E8E8"
|
||||
readonly property color textPrimary: isDarkMode ? "#E0E0E0" : "#333333"
|
||||
readonly property color textSecondary: isDarkMode ? "#AAAAAA" : "#666666"
|
||||
readonly property color textTertiary: isDarkMode ? "#888888" : "#999999"
|
||||
|
||||
// 复制成功状态标记:true 时复制图标变绿并显示"已复制"提示,
|
||||
// 2 秒后由 copyResetTimer 复位
|
||||
property bool copied: false
|
||||
@@ -39,13 +53,13 @@ Window {
|
||||
}
|
||||
}
|
||||
|
||||
// 窗口主体:白色圆角卡片,1px 浅灰边框模拟 DTK 窗口描边
|
||||
// 窗口主体:圆角卡片(背景与边框随 isDarkMode 切换深浅),1px 边框模拟 DTK 窗口描边
|
||||
Rectangle {
|
||||
anchors.fill: parent
|
||||
color: "#FFFFFF"
|
||||
color: root.winBg
|
||||
radius: 12
|
||||
border.width: 1
|
||||
border.color: "#E8E8E8"
|
||||
border.color: root.lineColor
|
||||
|
||||
ColumnLayout {
|
||||
anchors.fill: parent
|
||||
@@ -70,7 +84,7 @@ Window {
|
||||
text: qsTr("关于")
|
||||
font.pixelSize: 15
|
||||
font.weight: Font.Bold
|
||||
color: "#333333"
|
||||
color: root.textPrimary
|
||||
}
|
||||
|
||||
// 关闭按钮:28x28 圆形,hover 时淡红底 + 红色 ×(颜色由 accentColor 决定)
|
||||
@@ -88,7 +102,7 @@ Window {
|
||||
text: "×"
|
||||
font.pixelSize: 20
|
||||
font.weight: Font.Bold
|
||||
color: aboutCloseMouse.containsMouse ? accentColor : "#666666"
|
||||
color: aboutCloseMouse.containsMouse ? accentColor : root.textSecondary
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
@@ -117,7 +131,7 @@ Window {
|
||||
text: qsTr("网络速度监控")
|
||||
font.pixelSize: 18
|
||||
font.weight: Font.Bold
|
||||
color: "#333333"
|
||||
color: root.textPrimary
|
||||
Layout.fillWidth: true
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
}
|
||||
@@ -125,7 +139,7 @@ Window {
|
||||
Text {
|
||||
text: "JNetApplet"
|
||||
font.pixelSize: 12
|
||||
color: "#999999"
|
||||
color: root.textTertiary
|
||||
Layout.fillWidth: true
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
}
|
||||
@@ -142,7 +156,7 @@ Window {
|
||||
Layout.leftMargin: 24
|
||||
Layout.rightMargin: 24
|
||||
Layout.preferredHeight: 1
|
||||
color: "#E8E8E8"
|
||||
color: root.lineColor
|
||||
}
|
||||
|
||||
// 信息区上方间距
|
||||
@@ -173,7 +187,7 @@ Window {
|
||||
Text {
|
||||
text: version
|
||||
font.pixelSize: 12
|
||||
color: "#333333"
|
||||
color: root.textPrimary
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
}
|
||||
@@ -194,7 +208,7 @@ Window {
|
||||
Text {
|
||||
text: "Jokul"
|
||||
font.pixelSize: 12
|
||||
color: "#333333"
|
||||
color: root.textPrimary
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
}
|
||||
@@ -215,7 +229,7 @@ Window {
|
||||
Text {
|
||||
text: qsTr("监控网络速度和流量")
|
||||
font.pixelSize: 12
|
||||
color: "#333333"
|
||||
color: root.textPrimary
|
||||
Layout.fillWidth: true
|
||||
wrapMode: Text.WordWrap
|
||||
}
|
||||
@@ -237,7 +251,7 @@ Window {
|
||||
Text {
|
||||
text: "git.jokul.space/Jokul/JNetApplet"
|
||||
font.pixelSize: 11
|
||||
color: "#999999"
|
||||
color: root.textTertiary
|
||||
Layout.fillWidth: true
|
||||
wrapMode: Text.WrapAnywhere
|
||||
}
|
||||
@@ -248,7 +262,7 @@ Window {
|
||||
Layout.preferredHeight: 24
|
||||
Layout.alignment: Qt.AlignTop
|
||||
|
||||
// "已复制"提示:白底绿字小标签,显示在按钮左侧,
|
||||
// "已复制"提示:卡片底色绿字小标签,显示在按钮左侧,
|
||||
// 覆盖于 URL 文字上方,避免与值文本混排
|
||||
Rectangle {
|
||||
anchors.right: parent.left
|
||||
@@ -258,7 +272,7 @@ Window {
|
||||
width: copiedHintText.implicitWidth + 10
|
||||
height: 18
|
||||
radius: 4
|
||||
color: "#FFFFFF"
|
||||
color: root.cardBg
|
||||
border.width: 1
|
||||
border.color: "#22A34A"
|
||||
|
||||
@@ -286,7 +300,7 @@ Window {
|
||||
}
|
||||
|
||||
// 复制图标:两个重叠的小圆角矩形
|
||||
// 前层矩形白底压住后层边框重叠区,形成"堆叠纸张"的视觉效果
|
||||
// 前层矩形以卡片底色压住后层边框重叠区,形成"堆叠纸张"的视觉效果
|
||||
// 后层矩形(向右下偏移 2px)
|
||||
Rectangle {
|
||||
x: 8
|
||||
@@ -294,9 +308,9 @@ Window {
|
||||
width: 10
|
||||
height: 10
|
||||
radius: 2
|
||||
color: "#FFFFFF"
|
||||
color: root.cardBg
|
||||
border.width: 1
|
||||
border.color: copyRepoMouse.containsMouse ? "#333333" : "#999999"
|
||||
border.color: copyRepoMouse.containsMouse ? root.textPrimary : root.textTertiary
|
||||
}
|
||||
|
||||
// 前层矩形(左上),复制成功时边框短暂变绿
|
||||
@@ -306,9 +320,9 @@ Window {
|
||||
width: 10
|
||||
height: 10
|
||||
radius: 2
|
||||
color: "#FFFFFF"
|
||||
color: root.cardBg
|
||||
border.width: 1
|
||||
border.color: copied ? "#22A34A" : (copyRepoMouse.containsMouse ? "#333333" : "#999999")
|
||||
border.color: copied ? "#22A34A" : (copyRepoMouse.containsMouse ? root.textPrimary : root.textTertiary)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user