1
0
Fork 0
mirror of https://git.jami.net/savoirfairelinux/jami-client-qt.git synced 2025-08-04 06:45:45 +02:00

whitelabeling: change color of text and icons to contrast with custom colors

Change-Id: Ie990bdf7e3ce5253eb55317d2d57a43dd7f543d7
This commit is contained in:
Matheo Joseph 2023-07-24 14:58:48 -04:00 committed by Sébastien Blin
parent 22cd3d4d4e
commit 5b984396cf
9 changed files with 75 additions and 24 deletions

View file

@ -26,6 +26,7 @@ Item {
id: jamiId
property bool slimDisplay: true
property color backgroundColor: JamiTheme.welcomeBlockColor
property color contentColor: JamiTheme.tintedBlue
height: getHeight()
function getHeight() {
@ -68,7 +69,7 @@ Item {
containerWidth: 40
Layout.leftMargin: JamiTheme.pushButtonMargins
source: JamiResources.jami_id_logo_svg
color: JamiTheme.tintedBlue
color: jamiId.contentColor
}
UsernameTextEdit {
@ -76,7 +77,7 @@ Item {
Layout.fillWidth: true
Layout.preferredHeight: 40
Layout.alignment: Qt.AlignVCenter
textColor: JamiTheme.tintedBlue
textColor: jamiId.contentColor
fontPixelSize: staticText.length > 16 ? JamiTheme.jamiIdSmallFontSize : JamiTheme.jamiIdFontSize
editMode: false
isPersistent: false
@ -125,8 +126,8 @@ Item {
id: btnEdit
anchors.leftMargin: JamiTheme.pushButtonMargins
visible: CurrentAccount.registeredName === ""
border.color: enabled ? JamiTheme.buttonTintedBlue : JamiTheme.buttonTintedBlack
imageColor: enabled ? JamiTheme.buttonTintedBlue : JamiTheme.buttonTintedBlack
border.color: enabled ? jamiId.contentColor : JamiTheme.buttonTintedBlack
imageColor: enabled ? jamiId.contentColor : JamiTheme.buttonTintedBlack
enabled: {
if (!usernameTextEdit.editMode)
return true;
@ -198,8 +199,8 @@ Item {
//hoveredColor: JamiTheme.hoveredButtonColorWizard
imageContainerWidth: JamiTheme.pushButtonSize
imageContainerHeight: JamiTheme.pushButtonSize
border.color: JamiTheme.tintedBlue
imageColor: JamiTheme.buttonTintedBlue
border.color: jamiId.contentColor
imageColor: jamiId.contentColor
duration: 0
}
}

View file

@ -60,7 +60,9 @@ Item {
property color whiteColor: "#ffffff"
property color darkGreyColor: "#272727"
property color darkGreyColorOpacity: "#be272727" // 77%
property color tintedBlue: darkTheme ? "#03B9E9" : "#005699"
property color tintedBlue: darkTheme ? lightTintedBlue : darkTintedBlue
property color lightTintedBlue:"#03B9E9"
property color darkTintedBlue: "#005699"
property color sysColor: "#F0EFEF"
property color transparentColor: "transparent"

View file

@ -34,6 +34,9 @@ Item {
property real maxHeight: 250
property color textColor: JamiTheme.textColor
property color iconColor: JamiTheme.tintedBlue
signal ignore
ColumnLayout {
@ -62,13 +65,13 @@ Item {
containerWidth: Layout.preferredWidth
source: JamiResources.backup_svg
color: JamiTheme.buttonTintedBlue
color: root.iconColor
}
Text {
id: title
text: JamiStrings.backupAccountBtn
color: JamiTheme.textColor
color: root.textColor
font.weight: Font.Medium
Layout.topMargin: root.margin
Layout.alignment: Qt.AlignLeft
@ -90,7 +93,7 @@ Item {
wrapMode: Text.WordWrap
font.weight: Font.Normal
text: JamiStrings.whyBackupAccount
color: JamiTheme.textColor
color: root.textColor
horizontalAlignment: Text.AlignLeft
}
@ -107,7 +110,7 @@ Item {
visible: opened
wrapMode: Text.WordWrap
text: JamiStrings.backupAccountInfos
color: JamiTheme.textColor
color: root.textColor
horizontalAlignment: Text.AlignLeft
linkColor: JamiTheme.buttonTintedBlue

View file

@ -30,6 +30,10 @@ ColumnLayout {
property var margin: 5
property var prefWidth: 170
property bool opened: root.opened
property color textColor: JamiTheme.textColor
property color iconColor: JamiTheme.tintedBlue
focus: true
onOpenedChanged: {
@ -56,13 +60,13 @@ ColumnLayout {
containerWidth: Layout.preferredWidth
source: JamiResources.noun_paint_svg
color: JamiTheme.buttonTintedBlue
color: column.iconColor
focus: activeFocus
}
Label {
text: JamiStrings.customize
color: JamiTheme.textColor
color: column.textColor
font.weight: Font.Medium
Layout.topMargin: column.margin
Layout.preferredWidth: column.prefWidth - 2 * column.margin - column.iconSize
@ -85,7 +89,7 @@ ColumnLayout {
wrapMode: Text.WordWrap
font.weight: Font.Normal
text: JamiStrings.customizeText
color: JamiTheme.textColor
color: column.textColor
}
PhotoboothView {
@ -125,6 +129,6 @@ ColumnLayout {
visible: opened
wrapMode: Text.WordWrap
text: JamiStrings.customizationDescription2
color: JamiTheme.textColor
color: column.textColor
}
}

View file

@ -32,6 +32,9 @@ ColumnLayout {
property var margin: 5
property var prefWidth: 170
property color textColor: JamiTheme.textColor
property color iconColor: JamiTheme.tintedBlue
RowLayout {
id: rowlayout
Layout.preferredHeight: opened ? 0 : childrenRect.height
@ -52,12 +55,12 @@ ColumnLayout {
containerWidth: Layout.preferredWidth
source: JamiResources.glasses_tips_svg
color: JamiTheme.buttonTintedBlue
color: column.iconColor
}
Label {
text: JamiStrings.tip
color: JamiTheme.textColor
color: column.textColor
font.weight: Font.Medium
Layout.topMargin: column.margin
visible: !opened
@ -82,7 +85,7 @@ ColumnLayout {
font.weight: opened ? Font.Medium : Font.Normal
text: root.title
horizontalAlignment: Text.AlignLeft
color: JamiTheme.textColor
color: column.textColor
}
JamiFlickable {
@ -99,7 +102,7 @@ ColumnLayout {
wrapMode: Text.WordWrap
text: root.description
horizontalAlignment: Text.AlignLeft
color: JamiTheme.textColor
color: column.textColor
}
}
}

View file

@ -34,6 +34,9 @@ FocusScope {
property bool clicked: false
property bool opened: activeFocus
property color backgroundColor: JamiTheme.welcomeBlockColor
property color textColor: JamiTheme.textColor
property color iconColor: JamiTheme.tintedBlue
property string customizeTip: "CustomizeTipBox {}"
@ -53,6 +56,7 @@ FocusScope {
focus: true
activeFocusOnTab: true
Rectangle {
id: rect
anchors.fill: parent
@ -77,6 +81,8 @@ FocusScope {
root.ignoreClicked();
}
maxHeight: root.maximumHeight
textColor: root.textColor
iconColor: root.iconColor
}
width: parent.width
}
@ -84,17 +90,23 @@ FocusScope {
id: loader_customizeTip
active: type === "customize"
sourceComponent: CustomizeTipBox {
textColor: root.textColor
iconColor: root.iconColor
}
width: parent.width
focus: true
}
Loader {
id: loader_infoTip
active: type === "tip"
sourceComponent: InformativeTipBox {
maxHeight: root.maximumHeight
textColor: root.textColor
iconColor: root.iconColor
}
width: parent.width
}
}
}
@ -148,7 +160,7 @@ FocusScope {
visible: opened
circled: true
imageColor: JamiTheme.tintedBlue
imageColor: root.iconColor
normalColor: "transparent"
toolTipText: JamiStrings.dismiss

View file

@ -29,6 +29,9 @@ JamiFlickable {
clip: false
property color tipsColor: JamiTheme.welcomeBlockColor
property color tipsTextColor: JamiTheme.textColor
property color iconColor: JamiTheme.tintedBlue
width: JamiTheme.welcomeGridWidth
height: getHeight()
function getHeight() {
@ -56,6 +59,8 @@ JamiFlickable {
type: Type
property bool hideTipBox: false
anchors.bottom: row.bottom
textColor:tipsTextColor
iconColor: tipsRow.iconColor
visible: {
if (hideTipBox)

View file

@ -28,7 +28,9 @@ Item {
id: welcomeInfo
property color backgroundColor: "transparent"
property color textColor: JamiTheme.textColor
property color idColor: JamiTheme.welcomeBlockColor
property color contentIdColor: JamiTheme.tintedBlue
property bool hasTitle: true
property bool hasDescription: true
@ -37,6 +39,8 @@ Item {
property real contentWidth: welcomeInfo.width - 2 * JamiTheme.mainViewMargin
function getHeight() {
return bgRect.height;
}
@ -88,6 +92,8 @@ Item {
objectName: "loader_bottomIdentifier"
sourceComponent: JamiIdentifier {
backgroundColor: welcomeInfo.idColor
contentColor: contentIdColor
}
Layout.alignment: Qt.AlignHCenter
Layout.preferredHeight: active ? item.getHeight() : 0
@ -113,7 +119,7 @@ Item {
font.pixelSize: JamiTheme.bigFontSize
wrapMode: Text.WordWrap
text: welcomeInfo.title
color: JamiTheme.textColor
color: welcomeInfo.textColor
textFormat: TextEdit.PlainText
horizontalAlignment: Text.AlignHCenter
}
@ -133,7 +139,7 @@ Item {
text: welcomeInfo.description
lineHeight: 1.25
color: JamiTheme.textColor
color: welcomeInfo.textColor
textFormat: TextEdit.PlainText
horizontalAlignment: Text.AlignHCenter
}
@ -151,7 +157,7 @@ Item {
wrapMode: Text.WordWrap
text: JamiStrings.description
color: JamiTheme.textColor
color: welcomeInfo.textColor
textFormat: TextEdit.PlainText
horizontalAlignment: Text.AlignHCenter
}

View file

@ -81,6 +81,11 @@ ListSelectionView {
property color mainBoxColor: "transparent"
property color tipsTextColor: JamiTheme.textColor
property color mainBoxTextColor: JamiTheme.textColor
property color contentTipAndIdColor: JamiTheme.tintedBlue
function updateUiFlags() {
hasCustomUi = Object.keys(uiCustomization).length > 0;
hasTitle = hasCustomUi ? uiCustomization.title !== "" : true;
@ -101,6 +106,9 @@ ListSelectionView {
logoSize = (hasCustomUi && uiCustomization.logoSize !== undefined) ? uiCustomization.logoSize / 100 : 1;
tipBoxAndIdColor = (hasCustomUi && uiCustomization.tipBoxAndIdColor !== undefined) ? uiCustomization.tipBoxAndIdColor : JamiTheme.welcomeBlockColor;
mainBoxColor = (hasCustomUi && uiCustomization.mainBoxColor !== undefined) ? uiCustomization.mainBoxColor : "transparent";
tipsTextColor = (hasCustomUi && uiCustomization.tipBoxAndIdColor !== undefined) ? (UtilsAdapter.luma(tipBoxAndIdColor)? JamiTheme.whiteColor : JamiTheme.blackColor) : JamiTheme.textColor;
mainBoxTextColor = (hasCustomUi && uiCustomization.mainBoxColor !== undefined) ? (UtilsAdapter.luma(mainBoxColor)? JamiTheme.whiteColor : JamiTheme.blackColor) : JamiTheme.textColor;
contentTipAndIdColor = (hasCustomUi && uiCustomization.tipBoxAndIdColor !== undefined) ? (UtilsAdapter.luma(tipBoxAndIdColor)? JamiTheme.lightTintedBlue : JamiTheme.darkTintedBlue) : JamiTheme.tintedBlue;
}
rightPaneItem: JamiFlickable {
@ -135,8 +143,11 @@ ListSelectionView {
Connections {
target: JamiTheme
function onDarkThemeChanged() {
cachedImgLogo.downloadUrl = hasCustomBgImage ? customBgUrl : JamiTheme.welcomeBg;
customBgUrl = hasCustomBgImage ? customBgUrl : JamiTheme.welcomeBg;
tipBoxAndIdColor = (hasCustomUi && uiCustomization.tipBoxAndIdColor !== undefined) ? uiCustomization.tipBoxAndIdColor : JamiTheme.welcomeBlockColor;
tipsTextColor = (hasCustomUi && uiCustomization.tipBoxAndIdColor !== undefined) ? (UtilsAdapter.luma(tipBoxAndIdColor)? JamiTheme.whiteColor : JamiTheme.blackColor) : JamiTheme.textColor;
mainBoxTextColor = (hasCustomUi && uiCustomization.mainBoxColor !== undefined) ? (UtilsAdapter.luma(mainBoxColor)? JamiTheme.whiteColor : JamiTheme.blackColor) : JamiTheme.textColor;
contentTipAndIdColor = (hasCustomUi && uiCustomization.tipBoxAndIdColor !== undefined) ? (UtilsAdapter.luma(tipBoxAndIdColor)? JamiTheme.lightTintedBlue : JamiTheme.darkTintedBlue) : JamiTheme.tintedBlue;
}
}
}
@ -177,6 +188,8 @@ ListSelectionView {
title: viewNode.title
description: viewNode.description
idColor: viewNode.tipBoxAndIdColor
textColor: mainBoxTextColor
contentIdColor: viewNode.contentTipAndIdColor
}
Layout.alignment: Qt.AlignHCenter
Layout.preferredHeight: item.getHeight()
@ -191,6 +204,8 @@ ListSelectionView {
active: viewNode.hasTips && root.height > root.thresholdHeight
sourceComponent: TipsRow {
tipsColor: viewNode.tipBoxAndIdColor
tipsTextColor: viewNode.tipsTextColor
iconColor: viewNode.contentTipAndIdColor
}
Layout.alignment: Qt.AlignHCenter
Layout.preferredHeight: active ? item.getHeight() : 0