Fix Qml control colors

This commit is contained in:
trilene 2020-12-30 15:03:07 -05:00 committed by Nicolas Werner
parent 4123e6aff1
commit 2984d71971
8 changed files with 155 additions and 111 deletions

View file

@ -1,9 +1,9 @@
import "./voip"
import QtQuick 2.9 import QtQuick 2.9
import QtQuick.Controls 2.3 import QtQuick.Controls 2.3
import QtQuick.Layouts 1.2 import QtQuick.Layouts 1.2
import QtQuick.Window 2.2 import QtQuick.Window 2.2
import im.nheko 1.0 import im.nheko 1.0
import "./voip"
Rectangle { Rectangle {
color: colors.window color: colors.window
@ -26,6 +26,7 @@ Rectangle {
ImageButton { ImageButton {
visible: CallManager.callsSupported visible: CallManager.callsSupported
opacity: CallManager.haveCallInvite ? 0.3 : 1.0
Layout.alignment: Qt.AlignBottom Layout.alignment: Qt.AlignBottom
hoverEnabled: true hoverEnabled: true
width: 22 width: 22
@ -46,7 +47,7 @@ Rectangle {
} }
else { else {
var dialog = placeCallDialog.createObject(timelineRoot); var dialog = placeCallDialog.createObject(timelineRoot);
dialog.show(); dialog.open();
} }
} }
} }

View file

@ -1,8 +1,8 @@
import "../"
import QtQuick 2.9 import QtQuick 2.9
import QtQuick.Controls 2.3 import QtQuick.Controls 2.3
import QtQuick.Layouts 1.2 import QtQuick.Layouts 1.2
import im.nheko 1.0 import im.nheko 1.0
import "../"
Rectangle { Rectangle {
@ -38,7 +38,7 @@ Rectangle {
Layout.leftMargin: 8 Layout.leftMargin: 8
font.pointSize: fontMetrics.font.pointSize * 1.1 font.pointSize: fontMetrics.font.pointSize * 1.1
text: CallManager.callParty text: CallManager.callParty
color: colors.windowText color: "#000000"
} }
Image { Image {
@ -52,7 +52,7 @@ Rectangle {
id: callStateLabel id: callStateLabel
font.pointSize: fontMetrics.font.pointSize * 1.1 font.pointSize: fontMetrics.font.pointSize * 1.1
color: colors.windowText color: "#000000"
} }
Item { Item {
@ -163,11 +163,9 @@ Rectangle {
onClicked: CallManager.toggleCameraView() onClicked: CallManager.toggleCameraView()
} }
Item {
implicitWidth: 8
}
ImageButton { ImageButton {
Layout.leftMargin: 8
Layout.rightMargin: 16
width: 24 width: 24
height: 24 height: 24
buttonTextColor: "#000000" buttonTextColor: "#000000"
@ -177,11 +175,5 @@ Rectangle {
ToolTip.text: CallManager.isMicMuted ? qsTr("Unmute Mic") : qsTr("Mute Mic") ToolTip.text: CallManager.isMicMuted ? qsTr("Unmute Mic") : qsTr("Mute Mic")
onClicked: CallManager.toggleMicMute() onClicked: CallManager.toggleMicMute()
} }
Item {
implicitWidth: 16
} }
}
} }

View file

@ -1,32 +1,45 @@
import QtQuick 2.3 import QtQuick 2.9
import QtQuick.Controls 2.3 import QtQuick.Controls 2.3
import QtQuick.Dialogs 1.3
import QtQuick.Layouts 1.2 import QtQuick.Layouts 1.2
import im.nheko 1.0 import im.nheko 1.0
import "../"
ApplicationWindow { Popup {
flags: Qt.Dialog modal: true
modality: Qt.ApplicationModal anchors.centerIn: parent
palette: colors background: Rectangle {
width: columnLayout.implicitWidth color: colors.window
height: columnLayout.implicitHeight border.color: colors.windowText
}
// palette: colors
// colorize controls correctly
palette.base: colors.base
palette.brightText: colors.brightText
palette.button: colors.button
palette.buttonText: colors.buttonText
palette.dark: colors.dark
palette.highlight: colors.highlight
palette.highlightedText: colors.highlightedText
palette.light: colors.light
palette.mid: colors.mid
palette.text: colors.text
palette.window: colors.window
palette.windowText: colors.windowText
ColumnLayout { ColumnLayout {
id: columnLayout
spacing: 16 spacing: 16
ColumnLayout { ColumnLayout {
spacing: 8 spacing: 8
RowLayout {
Layout.topMargin: 8 Layout.topMargin: 8
Layout.leftMargin: 8 Layout.leftMargin: 8
Layout.rightMargin: 8 Layout.rightMargin: 8
RowLayout {
Image { Image {
Layout.preferredWidth: 22 Layout.preferredWidth: 22
Layout.preferredHeight: 22 Layout.preferredHeight: 22
@ -42,9 +55,7 @@ ApplicationWindow {
RowLayout { RowLayout {
visible: CallManager.cameras.length > 0 visible: CallManager.isVideo && CallManager.cameras.length > 0
Layout.leftMargin: 8
Layout.rightMargin: 8
Image { Image {
Layout.preferredWidth: 22 Layout.preferredWidth: 22
@ -60,32 +71,22 @@ ApplicationWindow {
} }
} }
RowLayout { DialogButtonBox {
Layout.rightMargin: 8 Layout.leftMargin: 128
Layout.bottomMargin: 8 standardButtons: DialogButtonBox.Ok | DialogButtonBox.Cancel
Item { onAccepted: {
implicitWidth: 128
}
Button {
text: qsTr("Ok")
onClicked: {
Settings.microphone = micCombo.currentText Settings.microphone = micCombo.currentText
if (cameraCombo.visible) { if (cameraCombo.visible) {
Settings.camera = cameraCombo.currentText Settings.camera = cameraCombo.currentText
} }
close(); close();
} }
}
Button { onRejected: {
text: qsTr("Cancel")
onClicked: {
close(); close();
} }
} }
} }
} }
}

View file

@ -1,9 +1,8 @@
import "../"
import QtQuick 2.9 import QtQuick 2.9
import QtQuick.Controls 2.3 import QtQuick.Controls 2.3
import QtQuick.Dialogs 1.3
import QtQuick.Layouts 1.2 import QtQuick.Layouts 1.2
import im.nheko 1.0 import im.nheko 1.0
import "../"
Rectangle { Rectangle {
@ -11,15 +10,15 @@ Rectangle {
color: "#2ECC71" color: "#2ECC71"
implicitHeight: visible ? rowLayout.height + 8 : 0 implicitHeight: visible ? rowLayout.height + 8 : 0
MessageDialog { Component {
id: warningDialog id: devicesDialog
icon: StandardIcon.Warning CallDevices {
}
} }
Component { Component {
id: devicesDialog id: deviceError
DeviceError {
CallDevices {
} }
} }
@ -42,7 +41,7 @@ Rectangle {
Layout.leftMargin: 8 Layout.leftMargin: 8
font.pointSize: fontMetrics.font.pointSize * 1.1 font.pointSize: fontMetrics.font.pointSize * 1.1
text: CallManager.callParty text: CallManager.callParty
color: colors.windowText color: "#000000"
} }
Image { Image {
@ -55,7 +54,7 @@ Rectangle {
Label { Label {
font.pointSize: fontMetrics.font.pointSize * 1.1 font.pointSize: fontMetrics.font.pointSize * 1.1
text: CallManager.isVideo ? qsTr("Video Call") : qsTr("Voice Call") text: CallManager.isVideo ? qsTr("Video Call") : qsTr("Voice Call")
color: colors.windowText color: "#000000"
} }
Item { Item {
@ -63,8 +62,9 @@ Rectangle {
} }
ImageButton { ImageButton {
width: 24 Layout.rightMargin: 16
height: 24 width: 20
height: 20
buttonTextColor: "#000000" buttonTextColor: "#000000"
image: ":/icons/icons/ui/settings.png" image: ":/icons/icons/ui/settings.png"
hoverEnabled: true hoverEnabled: true
@ -72,53 +72,56 @@ Rectangle {
ToolTip.text: qsTr("Devices") ToolTip.text: qsTr("Devices")
onClicked: { onClicked: {
var dialog = devicesDialog.createObject(timelineRoot); var dialog = devicesDialog.createObject(timelineRoot);
dialog.show(); dialog.open();
} }
} }
Item {
implicitWidth: 8
}
Button { Button {
Layout.rightMargin: 4
icon.source: CallManager.isVideo ? "qrc:/icons/icons/ui/video-call.png" : "qrc:/icons/icons/ui/place-call.png" icon.source: CallManager.isVideo ? "qrc:/icons/icons/ui/video-call.png" : "qrc:/icons/icons/ui/place-call.png"
palette: colors
text: qsTr("Accept") text: qsTr("Accept")
palette.button: colors.button
palette.buttonText: colors.buttonText
onClicked: { onClicked: {
if (CallManager.mics.length == 0) { if (CallManager.mics.length == 0) {
warningDialog.text = qsTr("No microphone found."); var dialog = deviceError.createObject(timelineRoot, {
warningDialog.open(); "errorString": qsTr("No microphone found."),
"iconSource": "qrc:/icons/icons/ui/place-call.png"
});
dialog.open();
return; return;
} }
else if (!CallManager.mics.includes(Settings.microphone)) { else if (!CallManager.mics.includes(Settings.microphone)) {
warningDialog.text = qsTr("Unknown microphone: ") + Settings.microphone; var dialog = deviceError.createObject(timelineRoot, {
warningDialog.open(); "errorString": qsTr("Unknown microphone: ") + Settings.microphone,
"iconSource": "qrc:/icons/icons/ui/place-call.png"
});
dialog.open();
return; return;
} }
if (CallManager.isVideo && CallManager.cameras.length > 0 && !CallManager.cameras.includes(Settings.camera)) { if (CallManager.isVideo && CallManager.cameras.length > 0 && !CallManager.cameras.includes(Settings.camera)) {
warningDialog.text = qsTr("Unknown camera: ") + Settings.camera; var dialog = deviceError.createObject(timelineRoot, {
warningDialog.open(); "errorString": qsTr("Unknown camera: ") + Settings.camera,
"iconSource": "qrc:/icons/icons/ui/video-call.png"
});
dialog.open();
return; return;
} }
CallManager.acceptInvite(); CallManager.acceptInvite();
} }
} }
Item {
implicitWidth: 4
}
Button { Button {
Layout.rightMargin: 16
icon.source: "qrc:/icons/icons/ui/end-call.png" icon.source: "qrc:/icons/icons/ui/end-call.png"
palette: colors
text: qsTr("Decline") text: qsTr("Decline")
palette.button: colors.button
palette.buttonText: colors.buttonText
onClicked: { onClicked: {
CallManager.hangUp(); CallManager.hangUp();
} }
} }
Item {
implicitWidth: 16
}
} }
} }

View file

@ -0,0 +1,31 @@
import QtQuick 2.9
import QtQuick.Controls 2.3
import QtQuick.Layouts 1.2
import im.nheko 1.0
Popup {
property string errorString
property var iconSource
modal: true
anchors.centerIn: parent
background: Rectangle {
color: colors.window
border.color: colors.windowText
}
RowLayout {
Image {
Layout.preferredWidth: 16
Layout.preferredHeight: 16
source: iconSource
}
Label {
text: errorString
color: colors.windowText
}
}
}

View file

@ -1,23 +1,39 @@
import QtQuick 2.3 import "../"
import QtQuick 2.9
import QtQuick.Controls 2.3 import QtQuick.Controls 2.3
import QtQuick.Dialogs 1.3
import QtQuick.Layouts 1.2 import QtQuick.Layouts 1.2
import im.nheko 1.0 import im.nheko 1.0
import "../"
ApplicationWindow { Popup {
flags: Qt.Dialog modal: true
modality: Qt.ApplicationModal anchors.centerIn: parent
palette: colors background: Rectangle {
width: columnLayout.implicitWidth color: colors.window
height: columnLayout.implicitHeight border.color: colors.windowText
MessageDialog {
id: warningDialog
icon: StandardIcon.Warning
} }
Component {
id: deviceError
DeviceError {
}
}
// palette: colors
// colorize controls correctly
palette.base: colors.base
palette.brightText: colors.brightText
palette.button: colors.button
palette.buttonText: colors.buttonText
palette.dark: colors.dark
palette.highlight: colors.highlight
palette.highlightedText: colors.highlightedText
palette.light: colors.light
palette.mid: colors.mid
palette.text: colors.text
palette.window: colors.window
palette.windowText: colors.windowText
ColumnLayout { ColumnLayout {
id: columnLayout id: columnLayout
@ -25,11 +41,10 @@ ApplicationWindow {
RowLayout { RowLayout {
Layout.topMargin: 16 Layout.topMargin: 8
Layout.leftMargin: 8 Layout.leftMargin: 8
Label { Label {
font.pointSize: fontMetrics.font.pointSize * 1.1
text: qsTr("Place a call to ") + TimelineManager.timeline.roomName + "?" text: qsTr("Place a call to ") + TimelineManager.timeline.roomName + "?"
color: colors.windowText color: colors.windowText
} }
@ -47,24 +62,24 @@ ApplicationWindow {
function validateMic() { function validateMic() {
if (CallManager.mics.length == 0) { if (CallManager.mics.length == 0) {
warningDialog.text = qsTr("No microphone found."); var dialog = deviceError.createObject(timelineRoot, {
warningDialog.open(); "errorString": qsTr("No microphone found."),
"iconSource": "qrc:/icons/icons/ui/place-call.png"
});
dialog.open();
return false; return false;
} }
return true; return true;
} }
Avatar { Avatar {
Layout.rightMargin: cameraCombo.visible ? 16 : 64
width: avatarSize width: avatarSize
height: avatarSize height: avatarSize
url: TimelineManager.timeline.roomAvatarUrl.replace("mxc://", "image://MxcImage/") url: TimelineManager.timeline.roomAvatarUrl.replace("mxc://", "image://MxcImage/")
displayName: TimelineManager.timeline.roomName displayName: TimelineManager.timeline.roomName
} }
Item {
implicitWidth: cameraCombo.visible ? 16 : 64
}
Button { Button {
text: qsTr("Voice") text: qsTr("Voice")
icon.source: "qrc:/icons/icons/ui/place-call.png" icon.source: "qrc:/icons/icons/ui/place-call.png"
@ -106,7 +121,7 @@ ApplicationWindow {
Layout.leftMargin: 8 Layout.leftMargin: 8
Layout.rightMargin: 8 Layout.rightMargin: 8
Layout.bottomMargin: cameraCombo.visible ? 0 : 16 Layout.bottomMargin: cameraCombo.visible ? 0 : 8
Image { Image {
Layout.preferredWidth: 22 Layout.preferredWidth: 22
@ -126,7 +141,7 @@ ApplicationWindow {
visible: CallManager.cameras.length > 0 visible: CallManager.cameras.length > 0
Layout.leftMargin: 8 Layout.leftMargin: 8
Layout.rightMargin: 8 Layout.rightMargin: 8
Layout.bottomMargin: 16 Layout.bottomMargin: 8
Image { Image {
Layout.preferredWidth: 22 Layout.preferredWidth: 22

View file

@ -160,6 +160,7 @@
<file>qml/voip/ActiveCallBar.qml</file> <file>qml/voip/ActiveCallBar.qml</file>
<file>qml/voip/CallDevices.qml</file> <file>qml/voip/CallDevices.qml</file>
<file>qml/voip/CallInviteBar.qml</file> <file>qml/voip/CallInviteBar.qml</file>
<file>qml/voip/DeviceError.qml</file>
<file>qml/voip/PlaceCall.qml</file> <file>qml/voip/PlaceCall.qml</file>
<file>qml/voip/VideoCall.qml</file> <file>qml/voip/VideoCall.qml</file>
</qresource> </qresource>

View file

@ -464,7 +464,7 @@ UserSettings::applyTheme()
stylefile.setFileName(":/styles/styles/nheko.qss"); stylefile.setFileName(":/styles/styles/nheko.qss");
QPalette lightActive( QPalette lightActive(
/*windowText*/ QColor("#333"), /*windowText*/ QColor("#333"),
/*button*/ QColor("#333"), /*button*/ QColor("white"),
/*light*/ QColor(0xef, 0xef, 0xef), /*light*/ QColor(0xef, 0xef, 0xef),
/*dark*/ QColor(110, 110, 110), /*dark*/ QColor(110, 110, 110),
/*mid*/ QColor(220, 220, 220), /*mid*/ QColor(220, 220, 220),
@ -477,7 +477,7 @@ UserSettings::applyTheme()
lightActive.setColor(QPalette::ToolTipBase, lightActive.base().color()); lightActive.setColor(QPalette::ToolTipBase, lightActive.base().color());
lightActive.setColor(QPalette::ToolTipText, lightActive.text().color()); lightActive.setColor(QPalette::ToolTipText, lightActive.text().color());
lightActive.setColor(QPalette::Link, QColor("#0077b5")); lightActive.setColor(QPalette::Link, QColor("#0077b5"));
lightActive.setColor(QPalette::ButtonText, QColor("#495057")); lightActive.setColor(QPalette::ButtonText, QColor("#333"));
QApplication::setPalette(lightActive); QApplication::setPalette(lightActive);
} else if (this->theme() == "dark") { } else if (this->theme() == "dark") {
stylefile.setFileName(":/styles/styles/nheko-dark.qss"); stylefile.setFileName(":/styles/styles/nheko-dark.qss");