Skip to content

Commit f059689

Browse files
18202781743deepin-bot[bot]
18202781743
authored and
deepin-bot[bot]
committed
feat: adjust OSD ui according to v25
According to v25 in sketch. sketch.com/s/af485842-d50e-4969-9c0c-e027cfc7c0d2
1 parent d361d46 commit f059689

File tree

14 files changed

+511
-133
lines changed

14 files changed

+511
-133
lines changed

‎panels/notification/osd/audio/package/main.qml‎

Lines changed: 85 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,19 @@
22
//
33
// SPDX-License-Identifier: LGPL-3.0-or-later
44

5-
import QtQuick 2.15
6-
import QtQuick.Controls 2.15
7-
import QtQuick.Layouts 1.15
8-
import QtQuick.Window 2.15
5+
import QtQuick
6+
import QtQuick.Controls
7+
import QtQuick.Layouts
98

109
import org.deepin.ds 1.0
1110
import org.deepin.dtk 1.0 as D
1211

1312
AppletItem {
1413
id: control
15-
implicitWidth: childrenRect.width
16-
implicitHeight: childrenRect.height
14+
implicitWidth: 338
15+
implicitHeight: 60
16+
17+
readonly property bool singleView: true
1718

1819
function update(osdType)
1920
{
@@ -39,59 +40,113 @@ AppletItem {
3940
]
4041

4142
RowLayout {
42-
anchors.leftMargin: 68
43-
anchors.rightMargin: 26
43+
spacing: 0
44+
width: parent.width
45+
anchors.verticalCenter: parent.verticalCenter
46+
anchors.topMargin: 2
4447

4548
D.DciIcon {
49+
width: 32
50+
height: 32
4651
sourceSize {
4752
width: 32
4853
height: 32
4954
}
5055
Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
5156
Layout.leftMargin: 14
5257
name: Applet.iconName
58+
theme: D.DTK.themeType
59+
palette: D.DTK.makeIconPalette(control.palette)
5360
}
5461

5562
ColumnLayout {
56-
spacing: 5
57-
Layout.alignment: Qt.AlignVCenter
58-
Loader {
59-
visible: active
60-
active: Applet.increaseVolume
61-
sourceComponent: scaleCom
62-
x: progressBar.visualPosition * 1.5 * progressBar.width
63+
spacing: 0
64+
Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
65+
Layout.leftMargin: 14
66+
Layout.preferredWidth: 220
67+
Layout.fillHeight: true
68+
69+
ScaleCom {
70+
visible: Applet.increaseVolume
71+
Layout.bottomMargin: 2
72+
Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
73+
Layout.leftMargin: progressBar.width / 1.5
6374
}
6475

6576
D.ProgressBar {
6677
id: progressBar
67-
Layout.preferredWidth: 200
68-
Layout.alignment: Qt.AlignVCenter
78+
Layout.preferredHeight: 4
79+
Layout.preferredWidth: 220
80+
Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
6981
from: 0
7082
value: Applet.volumeValue / (Applet.increaseVolume ? 1.5 : 1.0)
7183
to: 1
84+
85+
property D.Palette contentColor: D.Palette {
86+
normal: Qt.rgba(0, 0, 0, 1)
87+
normalDark: Qt.rgba(1, 1, 1, 1)
88+
}
89+
property D.Palette backgroundColor: D.Palette {
90+
normal: Qt.rgba(0, 0, 0, 0.1)
91+
normalDark: Qt.rgba(1, 1, 1, 0.1)
92+
}
93+
contentItem: Item {
94+
width: progressBar.visualPosition * parent.width
95+
height: parent.height
96+
Rectangle {
97+
anchors.fill: parent
98+
radius: 2
99+
color: progressBar.D.ColorSelector.contentColor
100+
}
101+
Behavior on width {
102+
NumberAnimation { duration: 150; easing.type: Easing.OutCubic }
103+
}
104+
}
105+
background: Rectangle {
106+
color: progressBar.D.ColorSelector.backgroundColor
107+
radius: 2
108+
}
72109
}
73110

74-
Loader {
75-
visible: active
76-
active: Applet.increaseVolume
77-
sourceComponent: scaleCom
78-
x: progressBar.visualPosition * 1.5 * progressBar.width
111+
ScaleCom {
112+
visible: Applet.increaseVolume
113+
Layout.topMargin: 2
114+
Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
115+
Layout.leftMargin: progressBar.width / 1.5
79116
}
80117
}
81118

119+
Item {
120+
Layout.fillWidth: true
121+
}
122+
82123
Text {
83-
Layout.alignment: Qt.AlignVCenter
124+
Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
84125
font: D.DTK.fontManager.t4
85-
text: Number(Applet.volumeValue * 100).toFixed(0) + "%"
126+
text: Number(Applet.volumeValue * 100).toFixed(0)
127+
color: palette.windowText
128+
}
129+
Text {
130+
Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
131+
Layout.topMargin: height / 2
132+
Layout.rightMargin: 14
133+
font: D.DTK.fontManager.t10
134+
color: palette.windowText
135+
text: "%"
86136
}
87137
}
88138

89-
Component {
90-
id: scaleCom
91-
Rectangle {
92-
height: 6
93-
width: 2
94-
color: "gray"
139+
component ScaleCom: Control {
140+
id: scaleControl
141+
property D.Palette scaleColor: D.Palette {
142+
normal: Qt.rgba(0, 0, 0, 0.3)
143+
normalDark: Qt.rgba(1, 1, 1, 0.3)
144+
}
145+
146+
contentItem: Rectangle {
147+
implicitHeight: 6
148+
implicitWidth: 2
149+
color: scaleControl.D.ColorSelector.scaleColor
95150
}
96151
}
97152
}

‎panels/notification/osd/brightness/package/main.qml‎

Lines changed: 59 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,19 @@
22
//
33
// SPDX-License-Identifier: LGPL-3.0-or-later
44

5-
import QtQuick 2.15
6-
import QtQuick.Controls 2.15
7-
import QtQuick.Layouts 1.15
8-
import QtQuick.Window 2.15
5+
import QtQuick
6+
import QtQuick.Controls
7+
import QtQuick.Layouts
98

109
import org.deepin.ds 1.0
1110
import org.deepin.dtk 1.0 as D
1211

1312
AppletItem {
1413
id: control
15-
implicitWidth: childrenRect.width
16-
implicitHeight: childrenRect.height
14+
implicitWidth: 338
15+
implicitHeight: 60
16+
17+
property bool singleView: true
1718

1819
function update(osdType)
1920
{
@@ -37,29 +38,76 @@ AppletItem {
3738
]
3839

3940
RowLayout {
40-
anchors.leftMargin: 68
41-
anchors.rightMargin: 26
41+
spacing: 0
42+
width: parent.width
43+
anchors.verticalCenter: parent.verticalCenter
44+
anchors.topMargin: 2
4245

4346
D.DciIcon {
4447
sourceSize {
4548
width: 32
4649
height: 32
4750
}
48-
Layout.alignment: Qt.AlignLeft
51+
Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
4952
Layout.leftMargin: 14
5053
name: Applet.iconName
54+
theme: D.DTK.themeType
55+
palette: D.DTK.makeIconPalette(control.palette)
5156
}
5257

5358
D.ProgressBar {
54-
Layout.preferredWidth: 200
59+
id: progressBar
60+
Layout.preferredHeight: 4
61+
Layout.preferredWidth: 220
62+
Layout.leftMargin: 14
63+
Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
5564
from: 0
5665
value: Applet.brightness
5766
to: 1
67+
68+
property D.Palette contentColor: D.Palette {
69+
normal: Qt.rgba(0, 0, 0, 1)
70+
normalDark: Qt.rgba(1, 1, 1, 1)
71+
}
72+
property D.Palette backgroundColor: D.Palette {
73+
normal: Qt.rgba(0, 0, 0, 0.1)
74+
normalDark: Qt.rgba(1, 1, 1, 0.1)
75+
}
76+
contentItem: Item {
77+
width: progressBar.visualPosition * parent.width
78+
height: parent.height
79+
Rectangle {
80+
anchors.fill: parent
81+
radius: 2
82+
color: progressBar.D.ColorSelector.contentColor
83+
}
84+
Behavior on width {
85+
NumberAnimation { duration: 150; easing.type: Easing.OutCubic }
86+
}
87+
}
88+
background: Rectangle {
89+
color: progressBar.D.ColorSelector.backgroundColor
90+
radius: 2
91+
}
92+
}
93+
94+
Item {
95+
Layout.fillWidth: true
5896
}
5997

6098
Text {
99+
Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
61100
font: D.DTK.fontManager.t4
62-
text: Number(Applet.brightness * 100).toFixed(0) + "%"
101+
text: Number(Applet.brightness * 100).toFixed(0)
102+
color: palette.windowText
103+
}
104+
Text {
105+
Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
106+
Layout.topMargin: height / 2
107+
Layout.rightMargin: 14
108+
font: D.DTK.fontManager.t10
109+
color: palette.windowText
110+
text: "%"
63111
}
64112
}
65113
}

‎panels/notification/osd/default/package/main.qml‎

Lines changed: 19 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,19 @@
22
//
33
// SPDX-License-Identifier: LGPL-3.0-or-later
44

5-
import QtQuick 2.15
6-
import QtQuick.Controls 2.15
7-
import QtQuick.Layouts 1.15
8-
import QtQuick.Window 2.15
5+
import QtQuick
6+
import QtQuick.Controls
7+
import QtQuick.Layouts
98

109
import org.deepin.ds 1.0
1110
import org.deepin.dtk 1.0 as D
1211

1312
AppletItem {
1413
id: control
1514
implicitWidth: childrenRect.width
16-
implicitHeight: childrenRect.height
15+
implicitHeight: 60
16+
17+
readonly property bool singleView: true
1718

1819
function update(osdType)
1920
{
@@ -74,27 +75,34 @@ AppletItem {
7475
}
7576

7677
RowLayout {
77-
anchors.leftMargin: 68
78-
anchors.rightMargin: 26
78+
spacing: 0
79+
anchors.verticalCenter: parent.verticalCenter
80+
anchors.topMargin: 2
7981

8082
D.DciIcon {
8183
sourceSize {
8284
width: 32
8385
height: 32
8486
}
85-
Layout.alignment: Qt.AlignLeft
86-
Layout.leftMargin: 14
87+
Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
88+
Layout.leftMargin: 20
8789
visible: control.iconName
8890
name: control.iconName
91+
theme: D.DTK.themeType
92+
palette: D.DTK.makeIconPalette(control.palette)
93+
}
94+
Item {
95+
Layout.fillWidth: true
8996
}
9097

9198
Text {
9299
Layout.fillWidth: true
93100
Layout.leftMargin: 20
94-
Layout.rightMargin: 20
95101
font: D.DTK.fontManager.t4
96-
Layout.alignment: Qt.AlignVCenter
102+
Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
103+
Layout.rightMargin: 20
97104
visible: control.text
105+
color: palette.windowText
98106
text: control.text
99107
}
100108
}

0 commit comments

Comments
 (0)