Skip to content
Snippets Groups Projects
Commit 1ddd3613 authored by Andreas Traczyk's avatar Andreas Traczyk
Browse files

settings: refactor menu to use PushButton 

- simplifies the settings menu
- removes the IconButton component

Gitlab: #14
Change-Id: Ib5cdc01dde47835befcdfa34aff35e5351a3b09d
parent 7c4c3e1a
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 134 additions and 314 deletions
qml.qrc
+ 1
− 2
View file @ 1ddd3613
......@@ -2,8 +2,7 @@
<qresource prefix="/">
<file>src/constant/JamiStrings.qml</file>
<file>src/settingsview/SettingsView.qml</file>
<file>src/settingsview/components/IconButton.qml</file>
<file>src/settingsview/components/LeftPanelView.qml</file>
<file>src/settingsview/components/SettingsMenu.qml</file>
<file>src/settingsview/components/SettingsHeader.qml</file>
<file>src/settingsview/components/SystemSettings.qml</file>
<file>src/settingsview/components/RecordingSettings.qml</file>
......
src/commoncomponents/PushButton.qml
+ 20
− 14
View file @ 1ddd3613
......@@ -54,13 +54,16 @@ AbstractButton {
property string pressedColor: JamiTheme.pressedButtonColor
property string hoveredColor: JamiTheme.hoveredButtonColor
property string normalColor: JamiTheme.normalButtonColor
property string checkedColor: pressedColor
// State transition duration
property int duration: JamiTheme.fadeDuration
// Image properties
property alias source: image.source
property var imageColor: null
property string normalImageSource
property var checkedColor: null
property var checkedImageColor: null
property string checkedImageSource
property alias imagePadding: image.padding
property alias imageOffset: image.offset
......@@ -68,7 +71,7 @@ AbstractButton {
width: preferredSize
height: preferredSize
checkable: true
checkable: false
checked: false
hoverEnabled: true
focusPolicy: Qt.TabFocus
......@@ -83,35 +86,35 @@ AbstractButton {
radius: preferredSize
states: [
State {
name: "checked"; when: checked
PropertyChanges { target: background; color: checkedColor }
},
State {
name: "pressed"; when: pressed
PropertyChanges { target: background; color: pressedColor }
PropertyChanges { target: image; offset: Qt.point(0, 0.5) }
},
State {
name: "hovered"; when: hovered
PropertyChanges { target: background; color: hoveredColor }
},
State {
name: "normal"; when: !hovered
name: "normal"; when: !hovered && ! checked
PropertyChanges { target: background; color: normalColor }
}
]
transitions: [
Transition {
to: "normal"; reversible: true
to: "normal"; reversible: true; enabled: duration
ColorAnimation { duration: root.duration }
},
Transition {
to: "pressed"; reversible: true
ParallelAnimation {
ColorAnimation { duration: root.duration * 0.5 }
NumberAnimation { duration: root.duration * 0.5 }
}
to: "pressed"; reversible: true; enabled: duration
ColorAnimation { duration: root.duration * 0.5 }
},
Transition {
to: ""; reversible: true
to: ""; reversible: true; enabled: duration
ColorAnimation { duration: root.duration }
}
]
......@@ -139,9 +142,12 @@ AbstractButton {
effect: ColorOverlay {
id: overlay
color: {
if (checked && checkedColor) return checkedColor
else if (imageColor) return imageColor
else return JamiTheme.transparentColor
if (checked && checkedImageColor)
return checkedImageColor
else if (imageColor)
return imageColor
else
return JamiTheme.transparentColor
}
}
}
......
src/mainview/MainView.qml
+ 18
− 44
View file @ 1ddd3613
......@@ -156,11 +156,11 @@ Window {
if (inSettingsView) {
if (sidePanelOnly)
sidePanelViewStack.push(leftPanelSettingsView, StackView.Immediate)
sidePanelViewStack.push(settingsMenu, StackView.Immediate)
else {
mainViewStack.pop(welcomePage, StackView.Immediate)
mainViewStack.push(settingsView, StackView.Immediate)
sidePanelViewStack.push(leftPanelSettingsView, StackView.Immediate)
sidePanelViewStack.push(settingsMenu, StackView.Immediate)
var windowCurrentMinimizedSize = settingsViewPreferredWidth
+ sidePanelViewStackPreferredWidth + onWidthChangedTriggerDistance
......@@ -294,7 +294,7 @@ Window {
width: mainViewSidePanelRect.width
height: 64
visible: (mainViewWindowSidePanel.visible || leftPanelSettingsView.visible)
visible: (mainViewWindowSidePanel.visible || settingsMenu.visible)
currentIndex: 0
......@@ -373,46 +373,20 @@ Window {
id: accountListModel
}
LeftPanelView {
id: leftPanelSettingsView
SettingsMenu {
id: settingsMenu
objectName: "leftPanelSettingsView"
objectName: "settingsMenu"
visible: false
contentViewportWidth: mainViewSidePanelRect.width
contentViewPortHeight: mainViewSidePanelRect.height
Connections {
target: leftPanelSettingsView.btnAccountSettings
function onCheckedToggledForRightPanel(checked) {
settingsView.setSelected(SettingsView.Account)
if (sidePanelOnly)
sidePanelViewStack.push(settingsView, StackView.Immediate)
}
}
Connections {
target: leftPanelSettingsView.btnGeneralSettings
function onCheckedToggledForRightPanel(checked) {
settingsView.setSelected(SettingsView.General)
if (sidePanelOnly)
sidePanelViewStack.push(settingsView, StackView.Immediate)
}
}
Connections {
target: leftPanelSettingsView.btnMediaSettings
function onCheckedToggledForRightPanel(checked) {
settingsView.setSelected(SettingsView.Media)
if (sidePanelOnly)
sidePanelViewStack.push(settingsView, StackView.Immediate)
}
}
Connections {
target: leftPanelSettingsView.btnPluginSettings
function onCheckedToggledForRightPanel(checked) {
settingsView.setSelected(SettingsView.Plugin)
if (sidePanelOnly)
sidePanelViewStack.push(settingsView, StackView.Immediate)
}
width: mainViewSidePanelRect.width
height: mainViewSidePanelRect.height
onItemSelected: {
settingsView.setSelected(index)
if (sidePanelOnly)
sidePanelViewStack.push(settingsView, StackView.Immediate)
}
}
......@@ -534,7 +508,7 @@ Window {
})
if (inSettingsView) {
if (sidePanelViewStack.currentItem.objectName !== leftPanelSettingsView.objectName)
if (sidePanelViewStack.currentItem.objectName !== settingsMenu.objectName)
sidePanelViewStack.pop(StackView.Immediate)
mainViewStack.push(settingsView, StackView.Immediate)
} else if (inSidePanelViewStack) {
......@@ -577,7 +551,7 @@ Window {
if (!inSettingsView) {
toggleSettingsView()
}
leftPanelSettingsView.btnMediaSettings.clicked()
settingsMenu.btnMediaSettings.clicked()
}
}
......@@ -588,7 +562,7 @@ Window {
if (!inSettingsView) {
toggleSettingsView()
}
leftPanelSettingsView.btnGeneralSettings.clicked()
settingsMenu.btnGeneralSettings.clicked()
}
}
......@@ -599,7 +573,7 @@ Window {
if (!inSettingsView) {
toggleSettingsView()
}
leftPanelSettingsView.btnAccountSettings.clicked()
settingsMenu.btnAccountSettings.clicked()
}
}
......@@ -610,7 +584,7 @@ Window {
if (!inSettingsView) {
toggleSettingsView()
}
leftPanelSettingsView.btnPluginSettings.clicked()
settingsMenu.btnPluginSettings.clicked()
}
}
......
src/mainview/components/CallOverlayButtonGroup.qml
+ 4
− 4
View file @ 1ddd3613
......@@ -92,9 +92,9 @@ Rectangle {
normalImageSource: "qrc:/images/icons/mic-24px.svg"
imageColor: JamiTheme.whiteColor
checkable: true
checkedImageSource: "qrc:/images/icons/mic_off-24px.svg"
checkedColor: JamiTheme.declineButtonPressedRed
checkedImageColor: JamiTheme.declineButtonPressedRed
toolTipText: !checked ? JamiStrings.mute : JamiStrings.unmute
......@@ -131,9 +131,9 @@ Rectangle {
normalImageSource: "qrc:/images/icons/videocam-24px.svg"
imageColor: JamiTheme.whiteColor
checkable: true
checkedImageSource: "qrc:/images/icons/videocam_off-24px.svg"
checkedColor: JamiTheme.declineButtonPressedRed
checkedImageColor: JamiTheme.declineButtonPressedRed
toolTipText: !checked ? JamiStrings.pause : JamiStrings.resume
......
src/settingsview/SettingsView.qml
+ 2
− 3
View file @ 1ddd3613
......@@ -31,7 +31,7 @@ import "components"
Rectangle {
id: root
enum SettingsMenu{
enum SettingsMenu {
Account,
General,
Media,
......@@ -53,8 +53,7 @@ Rectangle {
pageIdCurrentAccountSettings.connectCurrentAccount()
settingsViewRect.stopPreviewing()
selectedMenu = sel
if(pageIdCurrentAccountSettings.isPhotoBoothOpened())
{
if(pageIdCurrentAccountSettings.isPhotoBoothOpened()) {
settingsViewRect.setAvatar()
}
pageIdCurrentAccountSettings.updateAccountInfoDisplayed()
......
src/settingsview/components/IconButton.qml deleted 100644 → 0
+ 0
− 131
View file @ 7c4c3e1a
/*
* Copyright (C) 2019-2020 by Savoir-faire Linux
* Author: Yang Wang <yang.wang@savoirfairelinux.com>
*
* This program is free software; you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation; either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import QtQuick 2.15
import QtQuick.Window 2.14
import QtQuick.Controls 2.14
import QtQuick.Layouts 1.14
import QtQuick.Controls.Universal 2.12
import QtGraphicalEffects 1.14
import "../../constant"
Button {
id: button
checkable: true
hoverEnabled: true
property alias imageSource: buttonPix.source
property alias buttonText: buttonText.text
property string backgroundColor: JamiTheme.normalButtonColor
property string onPressColor: JamiTheme.pressedButtonColor
property string onReleaseColor: JamiTheme.normalButtonColor
property string onEnterColor: JamiTheme.hoveredButtonColor
property string onExitColor: JamiTheme.transparentColor
property string checkedColor: JamiTheme.normalButtonColor
signal checkedToggledForLeftPanel(var checked)
signal checkedToggledForRightPanel(var checked)
function setCheckedState(check, triggerSignal) {
button.checked = check
if (triggerSignal) {
checkedToggledForLeftPanel(check)
checkedToggledForRightPanel(check)
}
button.background.color = check ? button.checkedColor : button.onExitColor
}
onClicked: {
setCheckedState(true, true)
}
Layout.minimumHeight: 64
Layout.preferredHeight: 64
Layout.maximumHeight: 64
Layout.fillWidth: true
background: Rectangle {
anchors.fill: parent
color: parent.checked ? button.checkedColor : button.onExitColor
RowLayout {
anchors.fill: parent
spacing: 24
Image {
id: buttonPix
Layout.minimumHeight: 24
Layout.preferredHeight: 24
Layout.maximumHeight: 24
Layout.minimumWidth: 24
Layout.preferredWidth: 24
Layout.maximumWidth: 24
Layout.leftMargin: 24
Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
}
Label {
id: buttonText
Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
Layout.fillHeight: true
Layout.fillWidth: true
font.pointSize: JamiTheme.textFontSize+2
font.kerning: true
horizontalAlignment: Text.AlignLeft
verticalAlignment: Text.AlignVCenter
}
}
MouseArea {
anchors.fill: parent
hoverEnabled: true
onPressed: {
if (!button.checked) {
parent.color = button.onPressColor
}
}
onReleased: {
button.clicked()
if (!button.checked) {
parent.color = button.onExitColor
}
}
onEntered: {
if (!button.checked) {
parent.color = button.onEnterColor
}
}
onExited: {
if (!button.checked) {
parent.color = button.onExitColor
}
}
}
}
}
src/settingsview/components/LeftPanelView.qml deleted 100644 → 0
+ 0
− 116
View file @ 7c4c3e1a
/*
* Copyright (C) 2019-2020 by Savoir-faire Linux
* Author: Yang Wang <yang.wang@savoirfairelinux.com>
*
* This program is free software; you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation; either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import QtQuick 2.15
import QtQuick.Window 2.14
import QtQuick.Controls 1.4 as CT
import QtQuick.Controls 2.14
import QtQuick.Controls.Universal 2.12
import QtQuick.Layouts 1.3
import QtGraphicalEffects 1.14
import net.jami.Models 1.0
import "../../commoncomponents"
import "../../mainview/components"
Rectangle {
id: leftPanelRect
property int contentViewportWidth: 200
property int contentViewPortHeight: 768
property alias btnAccountSettings: accountSettingsButton
property alias btnGeneralSettings: generalSettingsButton
property alias btnMediaSettings: mediaSettingsButton
property alias btnPluginSettings: pluginSettingsButton
signal btnExitClicked
Component.onCompleted: {
accountSettingsButton.setCheckedState(true, true)
}
anchors.fill: parent
clip: true
color: JamiTheme.backgroundColor
ColumnLayout {
spacing: 0
width: contentViewportWidth
height: contentViewPortHeight
IconButton {
id: accountSettingsButton
buttonText: qsTr("Account")
imageSource: "qrc:/images/icons/baseline-people-24px.svg"
onCheckedToggledForLeftPanel: {
generalSettingsButton.setCheckedState(!checked, false)
mediaSettingsButton.setCheckedState(!checked, false)
pluginSettingsButton.setCheckedState(!checked, false)
}
}
IconButton {
id: generalSettingsButton
buttonText: qsTr("General")
imageSource: "qrc:/images/icons/round-settings-24px.svg"
onCheckedToggledForLeftPanel: {
accountSettingsButton.setCheckedState(!checked, false)
mediaSettingsButton.setCheckedState(!checked, false)
pluginSettingsButton.setCheckedState(!checked, false)
}
}
IconButton {
id: mediaSettingsButton
buttonText: qsTr("Audio/Video")
imageSource: "qrc:/images/icons/baseline-desktop_windows-24px.svg"
onCheckedToggledForLeftPanel: {
generalSettingsButton.setCheckedState(!checked, false)
accountSettingsButton.setCheckedState(!checked, false)
pluginSettingsButton.setCheckedState(!checked, false)
}
}
IconButton {
id: pluginSettingsButton
buttonText: qsTr("Plugins")
imageSource: "qrc:/images/icons/extension_24dp.svg"
onCheckedToggledForLeftPanel: {
generalSettingsButton.setCheckedState(!checked, false)
accountSettingsButton.setCheckedState(!checked, false)
mediaSettingsButton.setCheckedState(!checked, false)
}
}
Item {
Layout.fillWidth: true
Layout.fillHeight: true
}
}
}
src/settingsview/components/SettingsMenu.qml 0 → 100644
+ 89
− 0
View file @ 1ddd3613
/*
* Copyright (C) 2020 by Savoir-faire Linux
* Author: Andreas Traczyk <andreas.traczyk@savoirfairelinux.com>
*
* This program is free software; you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation; either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import QtQuick 2.14
import QtQuick.Controls 2.14
import QtQuick.Layouts 1.14
import net.jami.Models 1.0
// TODO: these includes should generally be resource uris
import "../../commoncomponents"
import "../../settingsview"
Rectangle {
id: root
signal itemSelected(int index)
Component.onCompleted: {
listModel.append({ 'type': SettingsView.Account, 'name': qsTr("Account"),
'iconSource': "qrc:/images/icons/baseline-people-24px.svg"})
listModel.append({ 'type': SettingsView.General, 'name': qsTr("General"),
'iconSource': "qrc:/images/icons/round-settings-24px.svg"})
listModel.append({ 'type': SettingsView.Media, 'name': qsTr("Audio/Video"),
'iconSource': "qrc:/images/icons/baseline-desktop_windows-24px.svg"})
listModel.append({ 'type': SettingsView.Plugin, 'name': qsTr("Plugin"),
'iconSource': "qrc:/images/icons/extension_24dp.svg"})
}
anchors.fill: parent
color: JamiTheme.backgroundColor
ButtonGroup {
buttons: buttons.children
onCheckedButtonChanged: itemSelected(checkedButton.menuType)
}
Column {
id: buttons
spacing: 0
anchors.left: parent.left
anchors.right: parent.right
height: childrenRect.height
Repeater {
id: repeater
model: ListModel { id: listModel }
PushButton {
property int menuType: type
Component.onCompleted: checked = type === SettingsView.Account
width: root.width
height: 64
buttonText: name
source: iconSource
pressedColor: Qt.lighter(JamiTheme.pressedButtonColor, 1.25)
checkedColor: JamiTheme.normalButtonColor
hoveredColor: JamiTheme.hoverColor
fontPointSize: JamiTheme.textFontSize + 2
duration: 0
textHAlign: Text.AlignLeft
preferredMargin: 24
normalColor: root.color
checkable: true
radius: 0
}
}
}
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment