on xenial help sign in
Fix notifications with the new UITK color schemes Fixes: #1554616, #1556523
be0e504Lukáš Tinkl
qml/Notifications/Notification.qml+10−16
@@ -41,15 +41,12 @@ StyledItem {
41 property int maxHeight
41 property int maxHeight
42 property int margins
42 property int margins
43 readonly property bool draggable: (type === Notification.SnapDecision && state === "contracted") || type === Notification.Interactive || type === Notification.Ephemeral
43 readonly property bool draggable: (type === Notification.SnapDecision && state === "contracted") || type === Notification.Interactive || type === Notification.Ephemeral
44− readonly property bool darkOnBright: panel.indicators.shown || type === Notification.SnapDecision
44+ readonly property bool darkOnBright: inverseMode || type === Notification.SnapDecision
45− readonly property color red: "#fc4949"
46− readonly property color green: "#3fb24f"
47 readonly property color sdLightGrey: "#eaeaea"
45 readonly property color sdLightGrey: "#eaeaea"
48− readonly property color sdDarkGrey: "#dddddd"
49− readonly property color sdFontColor: "#5d5d5d"
50 readonly property real contentSpacing: units.gu(2)
46 readonly property real contentSpacing: units.gu(2)
51 readonly property bool canBeClosed: type === Notification.Ephemeral
47 readonly property bool canBeClosed: type === Notification.Ephemeral
52 property bool hasMouse
48 property bool hasMouse
49+ property bool inverseMode
53 property url background: ""
50 property url background: ""
54
51
55 objectName: "background"
52 objectName: "background"
@@ -59,7 +56,7 @@ StyledItem {
59 opacity: 1 - (x / notification.width) // FIXME: non-zero initially because of LP: #1354406 workaround, we want this to start at 0 upon creation eventually
56 opacity: 1 - (x / notification.width) // FIXME: non-zero initially because of LP: #1354406 workaround, we want this to start at 0 upon creation eventually
60
57
61 theme: ThemeSettings {
58 theme: ThemeSettings {
62− name: "Ubuntu.Components.Themes.Ambiance"
59+ name: darkOnBright ? "Ubuntu.Components.Themes.Ambiance" : "Ubuntu.Components.Themes.SuruDark"
63 }
60 }
64
61
65 state: {
62 state: {
@@ -285,7 +282,6 @@ StyledItem {
285 }
282 }
286 visible: type !== Notification.Confirmation
283 visible: type !== Notification.Confirmation
287 fontSize: "medium"
284 fontSize: "medium"
288− color: darkOnBright ? sdFontColor : theme.palette.normal.backgroundText
289 elide: Text.ElideRight
285 elide: Text.ElideRight
290 textFormat: Text.PlainText
286 textFormat: Text.PlainText
291 }
287 }
@@ -300,7 +296,6 @@ StyledItem {
300 }
296 }
301 visible: body != "" && type !== Notification.Confirmation
297 visible: body != "" && type !== Notification.Confirmation
302 fontSize: "small"
298 fontSize: "small"
303− color: darkOnBright ? sdFontColor : theme.palette.normal.backgroundText
304 wrapMode: Text.Wrap
299 wrapMode: Text.Wrap
305 maximumLineCount: type == Notification.SnapDecision ? 12 : 2
300 maximumLineCount: type == Notification.SnapDecision ? 12 : 2
306 elide: Text.ElideRight
301 elide: Text.ElideRight
@@ -341,7 +336,6 @@ StyledItem {
341 anchors.horizontalCenter: parent.horizontalCenter
336 anchors.horizontalCenter: parent.horizontalCenter
342 visible: type === Notification.Confirmation && body !== ""
337 visible: type === Notification.Confirmation && body !== ""
343 fontSize: "medium"
338 fontSize: "medium"
344− color: darkOnBright ? sdFontColor : theme.palette.normal.backgroundText
345 wrapMode: Text.WordWrap
339 wrapMode: Text.WordWrap
346 maximumLineCount: 1
340 maximumLineCount: 1
347 elide: Text.ElideRight
341 elide: Text.ElideRight
@@ -361,7 +355,7 @@ StyledItem {
361 }
355 }
362
356
363 height: units.gu(1)
357 height: units.gu(1)
364− backgroundColor: darkOnBright ? UbuntuColors.darkGrey : UbuntuColors.lightGrey
358+ backgroundColor: theme.palette.normal.background
365 aspect: UbuntuShape.Flat
359 aspect: UbuntuShape.Flat
366 radius: "small"
360 radius: "small"
367
361
@@ -370,7 +364,7 @@ StyledItem {
370 objectName: "innerBar"
364 objectName: "innerBar"
371 width: valueIndicator.width * valueIndicator.value / 100
365 width: valueIndicator.width * valueIndicator.value / 100
372 height: units.gu(1)
366 height: units.gu(1)
373− backgroundColor: notification.hints["x-canonical-value-bar-tint"] === "true" ? UbuntuColors.orange : darkOnBright ? UbuntuColors.lightGrey : "white"
367+ backgroundColor: notification.hints["x-canonical-value-bar-tint"] === "true" ? theme.palette.normal.activity : theme.palette.highlighted.foreground
374 aspect: UbuntuShape.Flat
368 aspect: UbuntuShape.Flat
375 radius: "small"
369 radius: "small"
376 }
370 }
@@ -447,7 +441,7 @@ StyledItem {
447 objectName: "notify_oot_button" + index
441 objectName: "notify_oot_button" + index
448 width: oneOverTwoCase.width
442 width: oneOverTwoCase.width
449 text: oneOverTwoLoaderTop.actionLabel
443 text: oneOverTwoLoaderTop.actionLabel
450− color: notification.hints["x-canonical-private-affirmative-tint"] == "true" ? green : sdDarkGrey
444+ color: notification.hints["x-canonical-private-affirmative-tint"] == "true" ? UbuntuColors.green : theme.palette.normal.baseText
451 onClicked: notification.notification.invokeAction(oneOverTwoLoaderTop.actionId)
445 onClicked: notification.notification.invokeAction(oneOverTwoLoaderTop.actionId)
452 }
446 }
453 }
447 }
@@ -475,7 +469,7 @@ StyledItem {
475 objectName: "notify_oot_button" + index
469 objectName: "notify_oot_button" + index
476 width: oneOverTwoCase.width / 2 - spacing * 2
470 width: oneOverTwoCase.width / 2 - spacing * 2
477 text: oneOverTwoLoaderBottom.actionLabel
471 text: oneOverTwoLoaderBottom.actionLabel
478− color: index == 1 && notification.hints["x-canonical-private-rejection-tint"] == "true" ? red : sdDarkGrey
472+ color: index == 1 && notification.hints["x-canonical-private-rejection-tint"] == "true" ? UbuntuColors.red : theme.palette.normal.baseText
479 onClicked: notification.notification.invokeAction(oneOverTwoLoaderBottom.actionId)
473 onClicked: notification.notification.invokeAction(oneOverTwoLoaderBottom.actionId)
480 }
474 }
481 }
475 }
@@ -536,12 +530,12 @@ StyledItem {
536 width: buttonRow.width / 2 - spacing * 2
530 width: buttonRow.width / 2 - spacing * 2
537 text: loader.actionLabel
531 text: loader.actionLabel
538 color: {
532 color: {
539− var result = sdDarkGrey;
533+ var result = theme.palette.normal.baseText;
540 if (index == 0 && notification.hints["x-canonical-private-affirmative-tint"] == "true") {
534 if (index == 0 && notification.hints["x-canonical-private-affirmative-tint"] == "true") {
541− result = green;
535+ result = UbuntuColors.green;
542 }
536 }
543 if (index == 1 && notification.hints["x-canonical-private-rejection-tint"] == "true") {
537 if (index == 1 && notification.hints["x-canonical-private-rejection-tint"] == "true") {
544− result = red;
538+ result = UbuntuColors.red;
545 }
539 }
546 return result;
540 return result;
547 }
541 }
qml/Notifications/Notifications.qml+2
@@ -29,6 +29,7 @@ ListView {
29 property real margin
29 property real margin
30 property bool useModal: snapDecisionProxyModel.count > 0
30 property bool useModal: snapDecisionProxyModel.count > 0
31 property bool hasMouse
31 property bool hasMouse
32+ property bool inverseMode
32 property url background: ""
33 property url background: ""
33
34
34 UnitySortFilterProxyModel {
35 UnitySortFilterProxyModel {
@@ -61,6 +62,7 @@ ListView {
61 maxHeight: notificationList.height
62 maxHeight: notificationList.height
62 margins: notificationList.margin
63 margins: notificationList.margin
63 hasMouse: notificationList.hasMouse
64 hasMouse: notificationList.hasMouse
65+ inverseMode: notificationList.inverseMode
64 background: notificationList.background
66 background: notificationList.background
65
67
66 // make sure there's no opacity-difference between the several
68 // make sure there's no opacity-difference between the several
qml/Notifications/OptionToggle.qml+1−1
@@ -96,7 +96,7 @@ UbuntuShape {
96
96
97 width: parent.width
97 width: parent.width
98 text: splitLabel[3]
98 text: splitLabel[3]
99− color:"#5d5d5d"
99+ color: theme.palette.normal.backgroundText
100 fontSize: "small"
100 fontSize: "small"
101 maximumLineCount: 1
101 maximumLineCount: 1
102 elide: Text.ElideRight
102 elide: Text.ElideRight
qml/Shell.qml+1
@@ -663,6 +663,7 @@ Item {
663 model: NotificationBackend.Model
663 model: NotificationBackend.Model
664 margin: units.gu(1)
664 margin: units.gu(1)
665 hasMouse: shell.hasMouse
665 hasMouse: shell.hasMouse
666+ inverseMode: panel.indicators.shown
666 background: wallpaperResolver.background
667 background: wallpaperResolver.background
667
668
668 y: topmostIsFullscreen ? 0 : panel.panelHeight
669 y: topmostIsFullscreen ? 0 : panel.panelHeight
tests/qmltests/Notifications/tst_Notifications.qml+13−8
@@ -187,7 +187,8 @@ Item {
187
187
188 anchors.fill: parent
188 anchors.fill: parent
189 model: mockModel
189 model: mockModel
190− hasMouse: false
190+ hasMouse: fakeMouseCB.checked
191+ inverseMode: inverseModeCB.checked
191 }
192 }
192 }
193 }
193
194
@@ -261,19 +262,23 @@ Item {
261 Layout.fillWidth: true
262 Layout.fillWidth: true
262 CheckBox {
263 CheckBox {
263 id: fakeMouseCB
264 id: fakeMouseCB
264− onClicked: {
265− if (checked) {
266− notifications.hasMouse = true;
267− } else {
268− notifications.hasMouse = false;
269− }
270− }
271 }
265 }
272 Label {
266 Label {
273 text: "With fake mouse"
267 text: "With fake mouse"
274 anchors.verticalCenter: parent.verticalCenter
268 anchors.verticalCenter: parent.verticalCenter
275 }
269 }
276 }
270 }
271+
272+ RowLayout {
273+ Layout.fillWidth: true
274+ CheckBox {
275+ id: inverseModeCB
276+ }
277+ Label {
278+ text: "Inverse mode"
279+ anchors.verticalCenter: parent.verticalCenter
280+ }
281+ }
277 }
282 }
278 }
283 }
279
284