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:
parent
22cd3d4d4e
commit
5b984396cf
9 changed files with 75 additions and 24 deletions
|
@ -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
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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
|
||||
|
||||
|
|
|
@ -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
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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
|
||||
|
||||
|
|
|
@ -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)
|
||||
|
|
|
@ -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
|
||||
}
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Add table
Reference in a new issue