Skip to content
Snippets Groups Projects
Commit 56560914 authored by Sébastien Blin's avatar Sébastien Blin Committed by Ming Rui Zhang
Browse files

misc: add parametrizable colors for theme support

GitLab: #160
Change-Id: I44e7584af070fd355af623fe12433cdd68d32d30
parent 8296b430
No related branches found
No related tags found
No related merge requests found
Showing
with 185 additions and 112 deletions
......@@ -43,5 +43,6 @@ Menu {
border.width: commonBorderWidth
border.color: JamiTheme.tabbarBorderColor
color: JamiTheme.backgroundColor
}
}
......@@ -56,6 +56,7 @@ BaseDialog {
implicitWidth: JamiTheme.preferredDialogWidth
implicitHeight: JamiTheme.preferredDialogHeight
color: JamiTheme.secondaryBackgroundColor
ColumnLayout {
anchors.centerIn: parent
......@@ -68,6 +69,7 @@ BaseDialog {
Layout.alignment: Qt.AlignHCenter
Layout.preferredWidth: deleteAccountContentRect.width - JamiTheme.preferredMarginSize * 2
color: JamiTheme.textColor
text: JamiStrings.confirmDeleteQuestion
font.pointSize: JamiTheme.textFontSize
......@@ -84,6 +86,7 @@ BaseDialog {
Layout.alignment: Qt.AlignHCenter
Layout.preferredWidth: deleteAccountContentRect.width - JamiTheme.preferredMarginSize * 2
color: JamiTheme.textColor
text: SettingsAdapter.getAccountBestName()
font.pointSize: JamiTheme.textFontSize
......@@ -101,6 +104,7 @@ BaseDialog {
Layout.alignment: Qt.AlignHCenter
Layout.preferredWidth: deleteAccountContentRect.width - JamiTheme.preferredMarginSize * 2
color: JamiTheme.textColor
text: SettingsAdapter.getCurrentAccount_Profile_Info_Uri()
font.pointSize: JamiTheme.textFontSize
......
......@@ -36,7 +36,7 @@ Label {
horizontalAlignment: Text.AlignLeft
verticalAlignment: Text.AlignVCenter
color: "black"
color: JamiTheme.textColor
TextMetrics {
id: elided
......
......@@ -31,6 +31,7 @@ MenuItem {
property string itemName: ""
property string iconSource: ""
property string iconColor: ""
property int preferredWidth: 220
property int preferredHeight: 48
......@@ -60,6 +61,7 @@ MenuItem {
width: (visible ? 24 : 0)
height: (visible ? 24 : 0)
color: iconColor !== ""? iconColor : JamiTheme.textColor
visible: false
opacity: 0.7
......@@ -77,6 +79,7 @@ MenuItem {
height: 30
text: itemName
color: JamiTheme.textColor
wrapMode: Text.WordWrap
font.pointSize: JamiTheme.textFontSize
horizontalAlignment: Text.AlignLeft
......@@ -92,7 +95,7 @@ MenuItem {
},
State {
name: "normal"; when: !hovered
PropertyChanges { target: background; color: "white" }
PropertyChanges { target: background; color: JamiTheme.backgroundColor }
}
]
}
......@@ -117,7 +120,6 @@ MenuItem {
implicitHeight: preferredHeight
border.width: 0
color: menuItem.down ? JamiTheme.normalButtonColor : "white"
CustomBorder {
commonBorder: false
......
......@@ -30,6 +30,7 @@ TextField{
}
wrapMode: Text.Wrap
color: JamiTheme.textColor
readOnly: false
selectByMouse: true
font.pointSize: JamiTheme.settingsFontSize
......
......@@ -34,7 +34,7 @@ Rectangle {
border.width: 1
border.color: JamiTheme.hoverColor
color: JamiTheme.normalButtonColor
color: JamiTheme.backgroundColor
ListView {
id: listView
......
......@@ -37,8 +37,8 @@ TextField {
property int borderColorMode: MaterialLineEdit.NORMAL
property var iconSource: ""
property var backgroundColor: JamiTheme.rgb256(240,240,240)
property var borderColor: "#333"
property var backgroundColor: JamiTheme.editBackgroundColor
property var borderColor: JamiTheme.greyBorderColor
signal imageClicked
......@@ -51,11 +51,11 @@ TextField {
switch(borderColorMode){
case MaterialLineEdit.SEARCHING:
iconSource = "qrc:/images/jami_rolling_spinner.gif"
borderColor = "#333"
borderColor = JamiTheme.greyBorderColor
break
case MaterialLineEdit.NORMAL:
iconSource = ""
borderColor = "#333"
borderColor = JamiTheme.greyBorderColor
break
case MaterialLineEdit.RIGHT:
iconSource = "qrc:/images/icons/round-check_circle-24px.svg"
......@@ -76,6 +76,7 @@ TextField {
font.kerning: true
horizontalAlignment: Text.AlignLeft
verticalAlignment: Text.AlignVCenter
color: JamiTheme.textColor
Image {
id: lineEditImage
......
......@@ -19,6 +19,7 @@
import QtQuick 2.14
import QtQuick.Controls 2.14
import QtGraphicalEffects 1.14
import net.jami.Models 1.0
Popup {
id: root
......@@ -67,7 +68,7 @@ Popup {
verticalOffset: 3.0
radius: container.radius * 2
samples: 16
color: "#80000000"
color: JamiTheme.shadowColor
source: container
}
......
......@@ -123,6 +123,7 @@ BaseDialog {
implicitWidth: JamiTheme.preferredDialogWidth
implicitHeight: JamiTheme.preferredDialogHeight
color: JamiTheme.secondaryBackgroundColor
ColumnLayout {
anchors.centerIn: parent
......
......@@ -177,7 +177,7 @@ ColumnLayout {
anchors.fill: previewWidget
visible: false
color: "#fff"
color: JamiTheme.whiteColor
OpacityAnimator on opacity {
id: flashAnimation
......@@ -209,6 +209,7 @@ ColumnLayout {
text: ""
font.pointSize: 10
font.kerning: true
imageColor: JamiTheme.textColor
toolTipText: JamiStrings.takePhoto
......@@ -264,6 +265,7 @@ ColumnLayout {
source: "qrc:/images/icons/round-folder-24px.svg"
toolTipText: JamiStrings.importFromFile
imageColor: JamiTheme.textColor
onClicked: {
importFromFileToAvatar_Dialog.open()
......
......@@ -95,6 +95,7 @@ ItemDelegate {
Layout.leftMargin: 8
text: preferenceName
color: JamiTheme.textColor
font.pointSize: JamiTheme.settingsFontSize
ToolTip.visible: hovered
ToolTip.text: preferenceSummary
......@@ -110,6 +111,7 @@ ItemDelegate {
Layout.rightMargin: 8
Layout.preferredWidth: preferredSize
Layout.preferredHeight: preferredSize
imageColor: JamiTheme.textColor
source: "qrc:/images/icons/round-settings-24px.svg"
......
......@@ -18,6 +18,7 @@
import QtQuick 2.14
import QtQuick.Controls 2.14
import QtGraphicalEffects 1.14
import QtQuick.Window 2.14
Image {
......@@ -31,6 +32,7 @@ Image {
property string normalSource
property string checkedSource
property string color: "transparent"
property real pixelDensity: Screen.pixelDensity
property bool isSvg: {
......@@ -50,6 +52,14 @@ Image {
antialiasing: false
asynchronous: true
layer {
enabled: true
effect: ColorOverlay {
id: overlay
color: root.color
}
}
function setSourceSize() {
if (isSvg) {
sourceSize.width = Math.max(24, width)
......
......@@ -43,12 +43,15 @@ ComboBox {
var currentItem = root.delegateModel.items.get(index)
return currentItem.model[root.textRole].toString()
}
color: "black"
color: JamiTheme.textColor
font: root.font
elide: Text.ElideRight
verticalAlignment: Text.AlignVCenter
}
highlighted: root.highlightedIndex === index
background: Rectangle {
color: highlighted? JamiTheme.selectedColor : JamiTheme.editBackgroundColor
}
}
indicator: Canvas {
......@@ -72,7 +75,7 @@ ComboBox {
context.lineTo(width, 0);
context.lineTo(width / 2, height);
context.closePath();
context.fillStyle = root.pressed ? JamiTheme.pressColor : "black";
context.fillStyle = root.pressed ? JamiTheme.pressColor : JamiTheme.textColor;
context.fill();
}
}
......@@ -83,15 +86,16 @@ ComboBox {
text: root.displayText
font: root.font
color: "black"
color: JamiTheme.textColor
verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight
}
background: Rectangle {
color: JamiTheme.editBackgroundColor
implicitWidth: 120
implicitHeight: 40
border.color: "white"
border.color: JamiTheme.editBackgroundColor
border.width: root.visualFocus ? 2 : 1
radius: 2
}
......@@ -112,6 +116,7 @@ ComboBox {
}
background: Rectangle {
color: JamiTheme.editBackgroundColor
border.color: "gray"
radius: 2
}
......
......@@ -87,7 +87,8 @@ function addMenuSeparator(separatorHeight, separatorColor) {
function addMenuItem(itemName,
iconSource,
onClickedCallback) {
onClickedCallback,
iconColor="") {
if (!baseContextMenuObject.count){
// Add default separator at the top.
addMenuSeparator(8, "transparent")
......@@ -99,6 +100,7 @@ function addMenuItem(itemName,
menuItemObject = menuItemComponent.createObject(null,
{itemName: itemName,
iconSource: iconSource,
iconColor: iconColor,
leftBorderWidth: baseContextMenuObject.commonBorderWidth,
rightBorderWidth: baseContextMenuObject.commonBorderWidth})
} else if (menuItemComponent.status === Component.Error)
......@@ -107,7 +109,7 @@ function addMenuItem(itemName,
if (menuItemObject !== null) {
menuItemObject.clicked.connect(function () {baseContextMenuObject.close()})
menuItemObject.clicked.connect(onClickedCallback)
menuItemObject.icon.color = "black"
menuItemObject.icon.color = "green"
baseContextMenuObject.addItem(menuItemObject)
......
......@@ -22,86 +22,113 @@ pragma Singleton
import QtQuick 2.14
Item {
// Color strings
property string blackColor: "#000000"
property string whiteColor: "#ffffff"
property string transparentColor: "transparent"
property string primaryForegroundColor: blackColor
property string primaryBackgroundColor: whiteColor
property string pressedButtonColor: "#a0a0a0"
property string hoveredButtonColor: "#c7c7c7"
property string normalButtonColor: "#e0e0e0"
property string invertedPressedButtonColor: Qt.rgba(0, 0, 0, 0.5)
property string invertedHoveredButtonColor: Qt.rgba(0, 0, 0, 0.6)
property string invertedNormalButtonColor: Qt.rgba(0, 0, 0, 0.75)
property string hoverColor: "#c7c7c7"
property string pressColor: "#c0c0c0"
property string tabbarBorderColor: "#e3e3e3"
property string presenceGreen: "#4cd964"
property string notificationRed: "#ff3b30"
property string unPresenceOrange: "orange"
property string backgroundColor: lightGrey_
property string backgroundDarkColor: rgb256(220, 220, 220)
property string screenSelectionBorderGreen: "green"
property string acceptButtonGreen: "#4caf50"
property string acceptButtonHoverGreen: "#5db761"
property string acceptButtonPressedGreen: "#449d48"
property string declineButtonRed: "#f44336"
property string declineButtonHoverRed: "#f5554a"
property string declineButtonPressedRed: "#db3c30"
property string hangUpButtonTintedRed: "#ff0000"
property string buttonTintedBlue: "#00aaff"
property string buttonTintedBlueHovered: "#0e81c5"
property string buttonTintedBluePressed: "#273261"
property string buttonTintedGrey: "#999"
property string buttonTintedGreyHovered: "#777"
property string buttonTintedGreyPressed: "#777"
property string buttonTintedGreyInactive: "#bbb"
property string buttonTintedBlack: "#333"
property string buttonTintedBlackHovered: "#111"
property string buttonTintedBlackPressed: "#000"
property string buttonTintedRed: "red"
property string buttonTintedRedHovered: "#c00"
property string buttonTintedRedPressed: "#b00"
property string selectionBlue: "#109ede"
property string selectionGreen: "#21be2b"
property string rubberBandSelectionBlue: "steelblue"
property string closeButtonLighterBlack: "#4c4c4c"
property string contactSearchBarPlaceHolderTextFontColor: "#767676"
property string contactSearchBarPlaceHolderGreyBackground: "#dddddd"
property string draftRed: "#cf5300"
property string sipInputButtonBackgroundColor: "#336699"
property string sipInputButtonHoverColor: "#4477aa"
property string sipInputButtonPressColor: "#5588bb"
property string accountCreationOtherStepColor: "grey"
property string accountCreationCurrentStepColor: "#28b1ed"
// General
property color blackColor: "#000000"
property color whiteColor: "#ffffff"
property color transparentColor: "transparent"
property color primaryForegroundColor: blackColor
property color primaryBackgroundColor: whiteColor
property color backgroundColor: lightGrey_
property color shadowColor: "#80000000"
property color secondaryBackgroundColor: "white"
property color greyBorderColor: "#333"
property color selectionBlue: "#109ede"
property color hoverColor: "#c7c7c7"
property color pressColor: "#c0c0c0"
property color selectedColor: "#e0e0e0"
property color editBackgroundColor: lightGrey_
property color textColor: primaryForegroundColor
property color tabbarBorderColor: "#e3e3e3"
// Side panel
property color presenceGreen: "#4cd964"
property color notificationRed: "#ff3b30"
property color unPresenceOrange: "orange"
property color contactSearchBarPlaceHolderTextFontColor: "#767676"
property color draftRed: "#cf5300"
// General buttons
property color pressedButtonColor: "#a0a0a0"
property color hoveredButtonColor: "#c7c7c7"
property color normalButtonColor: "#e0e0e0"
property color invertedPressedButtonColor: Qt.rgba(0, 0, 0, 0.5)
property color invertedHoveredButtonColor: Qt.rgba(0, 0, 0, 0.6)
property color invertedNormalButtonColor: Qt.rgba(0, 0, 0, 0.75)
property color buttonTintedBlue: "#00aaff"
property color buttonTintedBlueHovered: "#0e81c5"
property color buttonTintedBluePressed: "#273261"
property color buttonTintedGrey: "#999"
property color buttonTintedGreyHovered: "#777"
property color buttonTintedGreyPressed: "#777"
property color buttonTintedGreyInactive: "#bbb"
property color buttonTintedBlack: "#333"
property color buttonTintedBlackHovered: "#111"
property color buttonTintedBlackPressed: "#000"
property color buttonTintedRed: "red"
property color buttonTintedRedHovered: "#c00"
property color buttonTintedRedPressed: "#b00"
property color closeButtonLighterBlack: "#4c4c4c"
// Call buttons
property color acceptButtonGreen: "#4caf50"
property color acceptButtonHoverGreen: "#5db761"
property color acceptButtonPressedGreen: "#449d48"
property color declineButtonRed: "#f44336"
property color declineButtonHoverRed: "#f5554a"
property color declineButtonPressedRed: "#db3c30"
property color sipInputButtonBackgroundColor: "#336699"
property color sipInputButtonHoverColor: "#4477aa"
property color sipInputButtonPressColor: "#5588bb"
// Wizard / account manager
property color accountCreationOtherStepColor: "grey"
property color accountCreationCurrentStepColor: "#28b1ed"
property color wizardBlueButtons: "#28b1ed"
property color wizardGreenColor: "#aed581"
property color requiredFieldColor: "#ff1f62"
property color requiredFieldBackgroundColor: "#fee4e9"
// Misc
property color recordIconColor: "#dc2719"
property color successLabelColor: "#2b5084"
property color rubberBandSelectionBlue: "steelblue"
property color screenSelectionBorderGreen: "green"
// Font.
property string faddedFontColor: "#c0c0c0"
property string faddedLastInteractionFontColor: "#505050"
property color faddedFontColor: "#a0a0a0"
property color faddedLastInteractionFontColor: "#505050"
// Jami theme colors
function rgb256(r, g, b) {
return Qt.rgba(r / 255, g / 255, b / 255, 1.0)
}
property color darkGrey: rgb256(63, 63, 63)
property color blueLogo_: rgb256(0, 7, 71)
property color lightGrey_: rgb256(242, 242, 242)
property color grey_: rgb256(160, 160, 160)
property color red_: rgb256(251, 72, 71)
property color urgentOrange_: rgb256(255, 165, 0)
property color green_: rgb256(127, 255, 0)
property color presenceGreen_: rgb256(76, 217, 100)
property int fadeDuration: 150
// Sizes
property int splitViewHandlePreferredWidth: 4
property int textFontSize: 9
property int tinyFontSize: 7
property int textFontSize: 9
property int settingsFontSize: 9
property int buttonFontSize: 9
property int menuFontSize: 12
property int headerFontSize: 13
property int titleFontSize: 16
property int menuFontSize: 12
property int maximumWidthSettingsView: 600
property int settingsHeaderpreferredHeight: 64
......@@ -111,24 +138,4 @@ Item {
property int preferredDialogWidth: 400
property int preferredDialogHeight: 300
property int minimumPreviewWidth: 120
// Misc.
property color white: "white"
property color darkGrey: rgb256(63, 63, 63)
// Jami theme colors
function rgb256(r, g, b) {
return Qt.rgba(r / 255, g / 255, b / 255, 1.0)
}
property color wizardBlueButtons: "#28b1ed"
property color blueLogo_: rgb256(0, 7, 71)
property color lightGrey_: rgb256(242, 242, 242)
property color grey_: rgb256(160, 160, 160)
property color red_: rgb256(251, 72, 71)
property color urgentOrange_: rgb256(255, 165, 0)
property color green_: rgb256(127, 255, 0)
property color presenceGreen_: rgb256(76, 217, 100)
property int fadeDuration: 150
}
......@@ -239,6 +239,7 @@ Window {
height: mainViewWindowPreferredHeight
minimumWidth: minWidth
minimumHeight: minHeight
color: JamiTheme.backgroundColor
Connections {
target: CallAdapter
......@@ -282,7 +283,7 @@ Window {
handle: Rectangle {
implicitWidth: JamiTheme.splitViewHandlePreferredWidth
implicitHeight: splitView.height
color:"white"
color: JamiTheme.backgroundColor
Rectangle {
implicitWidth: 1
implicitHeight: splitView.height
......@@ -299,6 +300,7 @@ Window {
SplitView.maximumWidth: (sidePanelOnly ? splitView.width :
splitView.width - sidePanelViewStackPreferredWidth)
SplitView.fillHeight: true
color: JamiTheme.backgroundColor
// AccountComboBox is always visible
AccountComboBox {
......
......@@ -34,6 +34,7 @@ ModalPopup {
id: contentRect
implicitWidth: 400
color: JamiTheme.backgroundColor
ScrollView {
id: aboutPopUpScrollView
......@@ -83,6 +84,7 @@ ModalPopup {
verticalAlignment: Text.AlignVCenter
text: textMetricsjamiVersionText.text
color: JamiTheme.textColor
TextMetrics {
id: textMetricsjamiVersionText
......@@ -106,6 +108,7 @@ ModalPopup {
verticalAlignment: Text.AlignVCenter
text: textMetricsjamiSlogansText.text
color: JamiTheme.textColor
TextMetrics {
id: textMetricsjamiSlogansText
......@@ -124,6 +127,7 @@ ModalPopup {
wrapMode: Text.WordWrap
font.pointSize: JamiTheme.textFontSize
color: JamiTheme.textColor
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
......@@ -143,6 +147,7 @@ ModalPopup {
Layout.preferredHeight: textMetricsjamiDeclarationHyperText.boundingRect.height
Layout.topMargin: 5
Layout.bottomMargin: 5
color: JamiTheme.textColor
font.pointSize: JamiTheme.textFontSize
horizontalAlignment: Text.AlignHCenter
......@@ -175,6 +180,7 @@ ModalPopup {
Layout.bottomMargin: 5
font.pointSize: JamiTheme.textFontSize
color: JamiTheme.textColor
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
......@@ -201,6 +207,7 @@ ModalPopup {
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
color: JamiTheme.textColor
text: textMetricsjamiNoneWarrantyHyperText.text
onLinkActivated: Qt.openUrlExternally(link)
......
......@@ -20,6 +20,7 @@
import QtQuick 2.14
import QtQuick.Controls 2.14
import QtQuick.Layouts 1.14
import QtGraphicalEffects 1.14
import net.jami.Models 1.0
import net.jami.Adapters 1.0
......@@ -89,6 +90,7 @@ ComboBox {
text: textMetricsUserAliasRoot.elidedText
font.pointSize: JamiTheme.textFontSize
color: JamiTheme.textColor
TextMetrics {
id: textMetricsUserAliasRoot
......@@ -110,6 +112,13 @@ ComboBox {
width: 24
height: 24
layer {
enabled: true
effect: ColorOverlay {
color: JamiTheme.textColor
}
}
source: "qrc:/images/icons/round-arrow_drop_down-24px.svg"
}
}
......@@ -228,6 +237,9 @@ ComboBox {
source: "qrc:/images/icons/qr_code-24px.svg"
normalColor: JamiTheme.backgroundColor
imageColor: JamiTheme.textColor
onClicked: {
if (visible)
qrDialog.open()
......@@ -241,6 +253,8 @@ ComboBox {
"qrc:/images/icons/round-settings-24px.svg" :
"qrc:/images/icons/round-close-24px.svg"
normalColor: JamiTheme.backgroundColor
imageColor: JamiTheme.textColor
toolTipText: !mainViewWindow.inSettingsView ?
JamiStrings.openSettings :
JamiStrings.closeSettings
......
......@@ -96,6 +96,7 @@ Popup {
text: textMetricsUserAliasPopup.elidedText
font.pointSize: JamiTheme.textFontSize
color: JamiTheme.textColor
TextMetrics {
id: textMetricsUserAliasPopup
......@@ -154,10 +155,19 @@ Popup {
implicitHeight: accountComboBox.height
background: Rectangle {
color: comboBoxFooterItem.hovered? JamiTheme.normalButtonColor : JamiTheme.backgroundColor
color: comboBoxFooterItem.hovered? JamiTheme.hoverColor : JamiTheme.backgroundColor
}
text: qsTr("Add Account") + "+"
contentItem: Text {
width: parent.width
height: parent.height
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
text: qsTr("Add Account") + "+"
color: JamiTheme.textColor
}
font.pointSize: JamiTheme.textFontSize
onClicked: {
......@@ -185,7 +195,7 @@ Popup {
layer {
enabled: true
effect: DropShadow {
color: "#80000000"
color: JamiTheme.shadowColor
verticalOffset: 2
horizontalOffset: 2
samples: 16
......
......@@ -70,7 +70,8 @@ Item {
"qrc:/images/icons/av_icons/fiber_manual_record-24px.svg",
function (){
CallAdapter.recordThisCallToggle()
})
},
JamiTheme.recordIconColor)
if (isAudioOnly && !isPaused)
ContextMenuGenerator.addMenuItem(
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment