mirror of
https://github.com/nextcloud/desktop.git
synced 2024-10-24 05:15:40 +03:00
Merge pull request #4624 from nextcloud/feature/userstatusdialog-design
Make user status dialog look in line with the rest of the desktop client tray and Nextcloud
This commit is contained in:
commit
8f5624c8f7
9 changed files with 444 additions and 51 deletions
|
@ -3,6 +3,9 @@
|
|||
<file>src/gui/UserStatusSelector.qml</file>
|
||||
<file>src/gui/UserStatusSelectorDialog.qml</file>
|
||||
<file>src/gui/EmojiPicker.qml</file>
|
||||
<file>src/gui/UserStatusSelectorButton.qml</file>
|
||||
<file>src/gui/PredefinedStatusButton.qml</file>
|
||||
<file>src/gui/BasicComboBox.qml</file>
|
||||
<file>src/gui/ErrorBox.qml</file>
|
||||
<file>src/gui/tray/Window.qml</file>
|
||||
<file>src/gui/tray/UserLine.qml</file>
|
||||
|
|
99
src/gui/BasicComboBox.qml
Normal file
99
src/gui/BasicComboBox.qml
Normal file
|
@ -0,0 +1,99 @@
|
|||
/*
|
||||
* Copyright (C) by Claudio Cambra <claudio.cambra@nextcloud.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 2 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.
|
||||
*/
|
||||
|
||||
import QtQuick 2.15
|
||||
import QtQuick.Dialogs 1.3
|
||||
import QtQuick.Layouts 1.15
|
||||
import QtQuick.Controls 2.15
|
||||
import QtGraphicalEffects 1.0
|
||||
|
||||
import Style 1.0
|
||||
|
||||
ComboBox {
|
||||
id: clearComboBox
|
||||
|
||||
padding: Style.standardSpacing
|
||||
|
||||
background: Rectangle {
|
||||
radius: Style.slightlyRoundedButtonRadius
|
||||
color: Style.buttonBackgroundColor
|
||||
opacity: clearComboBox.hovered ? Style.hoverOpacity : 1.0
|
||||
}
|
||||
|
||||
contentItem: Label {
|
||||
leftPadding: 0
|
||||
rightPadding: clearComboBox.indicator.width + clearComboBox.spacing
|
||||
|
||||
text: clearComboBox.displayText
|
||||
color: Style.ncTextColor
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
elide: Text.ElideRight
|
||||
}
|
||||
|
||||
indicator: ColorOverlay {
|
||||
x: clearComboBox.width - clearComboBox.rightPadding
|
||||
y: clearComboBox.topPadding + (clearComboBox.availableHeight - height) / 2
|
||||
cached: true
|
||||
color: Style.ncTextColor
|
||||
width: source.width
|
||||
height: source.height
|
||||
source: Image {
|
||||
horizontalAlignment: Qt.AlignRight
|
||||
verticalAlignment: Qt.AlignVCenter
|
||||
source: "qrc:///client/theme/white/caret-down.svg"
|
||||
sourceSize.width: Style.accountDropDownCaretSize
|
||||
sourceSize.height: Style.accountDropDownCaretSize
|
||||
Accessible.role: Accessible.PopupMenu
|
||||
Accessible.name: qsTr("Clear status message menu")
|
||||
}
|
||||
}
|
||||
|
||||
popup: Popup {
|
||||
y: clearComboBox.height - Style.normalBorderWidth
|
||||
width: clearComboBox.width
|
||||
implicitHeight: contentItem.implicitHeight
|
||||
padding: Style.normalBorderWidth
|
||||
|
||||
contentItem: ListView {
|
||||
clip: true
|
||||
implicitHeight: contentHeight
|
||||
model: clearComboBox.popup.visible ? clearComboBox.delegateModel : null
|
||||
currentIndex: clearComboBox.highlightedIndex
|
||||
|
||||
ScrollIndicator.vertical: ScrollIndicator { }
|
||||
}
|
||||
|
||||
background: Rectangle {
|
||||
color: Style.backgroundColor
|
||||
border.color: Style.menuBorder
|
||||
radius: Style.slightlyRoundedButtonRadius
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
delegate: ItemDelegate {
|
||||
id: clearStatusDelegate
|
||||
width: clearComboBox.width
|
||||
contentItem: Label {
|
||||
text: modelData
|
||||
color: Style.ncTextColor
|
||||
elide: Text.ElideRight
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
}
|
||||
highlighted: clearComboBox.highlightedIndex === index
|
||||
background: Rectangle {
|
||||
color: clearStatusDelegate.highlighted || clearStatusDelegate.hovered ? Style.lightHover : Style.backgroundColor
|
||||
}
|
||||
}
|
||||
}
|
|
@ -16,6 +16,7 @@ import QtQuick 2.15
|
|||
import QtQuick.Controls 2.15
|
||||
import QtQuick.Layouts 1.15
|
||||
|
||||
import Style 1.0
|
||||
import com.nextcloud.desktopclient 1.0 as NC
|
||||
|
||||
ColumnLayout {
|
||||
|
@ -34,6 +35,7 @@ ColumnLayout {
|
|||
ListView {
|
||||
id: headerLayout
|
||||
Layout.fillWidth: true
|
||||
Layout.margins: 1
|
||||
implicitWidth: contentItem.childrenRect.width
|
||||
implicitHeight: metrics.height * 2
|
||||
|
||||
|
@ -42,24 +44,32 @@ ColumnLayout {
|
|||
model: emojiModel.emojiCategoriesModel
|
||||
|
||||
delegate: ItemDelegate {
|
||||
id: headerDelegate
|
||||
width: metrics.height * 2
|
||||
height: headerLayout.height
|
||||
|
||||
contentItem: Text {
|
||||
background: Rectangle {
|
||||
color: Style.lightHover
|
||||
visible: ListView.isCurrentItem || headerDelegate.highlighted || headerDelegate.checked || headerDelegate.down || headerDelegate.hovered
|
||||
radius: Style.slightlyRoundedButtonRadius
|
||||
}
|
||||
|
||||
contentItem: Label {
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
text: emoji
|
||||
color: Style.ncTextColor
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
anchors.bottom: parent.bottom
|
||||
|
||||
width: parent.width
|
||||
height: 2
|
||||
height: Style.thickBorderWidth
|
||||
|
||||
visible: ListView.isCurrentItem
|
||||
|
||||
color: "grey"
|
||||
color: Style.menuBorder
|
||||
}
|
||||
|
||||
|
||||
|
@ -71,15 +81,16 @@ ColumnLayout {
|
|||
}
|
||||
|
||||
Rectangle {
|
||||
height: 1
|
||||
height: Style.normalBorderWidth
|
||||
Layout.fillWidth: true
|
||||
color: "grey"
|
||||
color: Style.menuBorder
|
||||
}
|
||||
|
||||
GridView {
|
||||
Layout.fillWidth: true
|
||||
Layout.fillHeight: true
|
||||
Layout.preferredHeight: metrics.height * 8
|
||||
Layout.margins: Style.normalBorderWidth
|
||||
|
||||
cellWidth: metrics.height * 2
|
||||
cellHeight: metrics.height * 2
|
||||
|
@ -90,13 +101,22 @@ ColumnLayout {
|
|||
model: emojiModel.model
|
||||
|
||||
delegate: ItemDelegate {
|
||||
id: emojiDelegate
|
||||
|
||||
width: metrics.height * 2
|
||||
height: metrics.height * 2
|
||||
|
||||
contentItem: Text {
|
||||
anchors.centerIn: parent
|
||||
background: Rectangle {
|
||||
color: Style.lightHover
|
||||
visible: ListView.isCurrentItem || emojiDelegate.highlighted || emojiDelegate.checked || emojiDelegate.down || emojiDelegate.hovered
|
||||
radius: Style.slightlyRoundedButtonRadius
|
||||
}
|
||||
|
||||
contentItem: Label {
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
text: modelData === undefined ? "" : modelData.unicode
|
||||
color: Style.ncTextColor
|
||||
}
|
||||
|
||||
onClicked: {
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
import QtQuick 2.15
|
||||
import QtQuick.Controls 2.15
|
||||
|
||||
import Style 1.0
|
||||
|
||||
|
@ -19,7 +20,7 @@ Item {
|
|||
border.color: errorBox.borderColor
|
||||
}
|
||||
|
||||
Text {
|
||||
Label {
|
||||
id: errorMessage
|
||||
|
||||
anchors.fill: parent
|
||||
|
|
51
src/gui/PredefinedStatusButton.qml
Normal file
51
src/gui/PredefinedStatusButton.qml
Normal file
|
@ -0,0 +1,51 @@
|
|||
/*
|
||||
* Copyright (C) by Claudio Cambra <claudio.cambra@nextcloud.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 2 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.
|
||||
*/
|
||||
|
||||
import QtQuick 2.15
|
||||
import QtQuick.Dialogs 1.3
|
||||
import QtQuick.Layouts 1.15
|
||||
import QtQuick.Controls 2.15
|
||||
|
||||
import Style 1.0
|
||||
|
||||
AbstractButton {
|
||||
id: root
|
||||
|
||||
hoverEnabled: true
|
||||
topPadding: Style.standardSpacing
|
||||
bottomPadding: Style.standardSpacing
|
||||
leftPadding: Style.standardSpacing / 2
|
||||
rightPadding: Style.standardSpacing / 2
|
||||
|
||||
property real internalSpacing: Style.standardSpacing
|
||||
property string emoji: ""
|
||||
|
||||
background: Rectangle {
|
||||
color: root.hovered || root.checked ? Style.lightHover : "transparent"
|
||||
radius: Style.slightlyRoundedButtonRadius
|
||||
}
|
||||
|
||||
contentItem: Row {
|
||||
spacing: internalSpacing
|
||||
|
||||
Label {
|
||||
text: emoji
|
||||
}
|
||||
|
||||
Label {
|
||||
text: root.text
|
||||
color: Style.ncTextColor
|
||||
}
|
||||
}
|
||||
}
|
|
@ -19,103 +19,182 @@ import QtQuick.Controls 2.15
|
|||
import QtQuick.Window 2.15
|
||||
import com.nextcloud.desktopclient 1.0 as NC
|
||||
|
||||
import Style 1.0
|
||||
|
||||
ColumnLayout {
|
||||
id: rootLayout
|
||||
spacing: 0
|
||||
property NC.UserStatusSelectorModel userStatusSelectorModel
|
||||
|
||||
Label {
|
||||
Layout.topMargin: 16
|
||||
Layout.leftMargin: 8
|
||||
Layout.rightMargin: 8
|
||||
Layout.bottomMargin: 8
|
||||
Layout.topMargin: Style.standardSpacing * 2
|
||||
Layout.leftMargin: Style.standardSpacing
|
||||
Layout.rightMargin: Style.standardSpacing
|
||||
Layout.bottomMargin: Style.standardSpacing
|
||||
Layout.alignment: Qt.AlignTop | Qt.AlignHCenter
|
||||
font.bold: true
|
||||
text: qsTr("Online status")
|
||||
color: Style.ncTextColor
|
||||
}
|
||||
|
||||
GridLayout {
|
||||
Layout.margins: 8
|
||||
id: topButtonsLayout
|
||||
|
||||
Layout.margins: Style.standardSpacing
|
||||
Layout.alignment: Qt.AlignTop
|
||||
columns: 2
|
||||
rows: 2
|
||||
columnSpacing: 8
|
||||
rowSpacing: 8
|
||||
columnSpacing: Style.standardSpacing
|
||||
rowSpacing: Style.standardSpacing
|
||||
|
||||
Button {
|
||||
Layout.fillWidth: true
|
||||
property int maxButtonHeight: 0
|
||||
function updateMaxButtonHeight(newHeight) {
|
||||
maxButtonHeight = Math.max(maxButtonHeight, newHeight)
|
||||
}
|
||||
|
||||
UserStatusSelectorButton {
|
||||
checked: NC.UserStatus.Online == userStatusSelectorModel.onlineStatus
|
||||
checkable: true
|
||||
icon.source: userStatusSelectorModel.onlineIcon
|
||||
icon.color: "transparent"
|
||||
text: qsTr("Online")
|
||||
onClicked: userStatusSelectorModel.setOnlineStatus(NC.UserStatus.Online)
|
||||
implicitWidth: 100
|
||||
}
|
||||
Button {
|
||||
|
||||
Layout.fillWidth: true
|
||||
implicitWidth: 200 // Pretty much a hack to ensure all the buttons are equal in width
|
||||
Layout.preferredHeight: topButtonsLayout.maxButtonHeight
|
||||
onImplicitHeightChanged: topButtonsLayout.updateMaxButtonHeight(implicitHeight)
|
||||
Component.onCompleted: topButtonsLayout.updateMaxButtonHeight(implicitHeight)
|
||||
}
|
||||
UserStatusSelectorButton {
|
||||
checked: NC.UserStatus.Away == userStatusSelectorModel.onlineStatus
|
||||
checkable: true
|
||||
icon.source: userStatusSelectorModel.awayIcon
|
||||
icon.color: "transparent"
|
||||
text: qsTr("Away")
|
||||
onClicked: userStatusSelectorModel.setOnlineStatus(NC.UserStatus.Away)
|
||||
implicitWidth: 100
|
||||
|
||||
Layout.fillWidth: true
|
||||
implicitWidth: 200 // Pretty much a hack to ensure all the buttons are equal in width
|
||||
Layout.preferredHeight: topButtonsLayout.maxButtonHeight
|
||||
onImplicitHeightChanged: topButtonsLayout.updateMaxButtonHeight(implicitHeight)
|
||||
Component.onCompleted: topButtonsLayout.updateMaxButtonHeight(implicitHeight)
|
||||
|
||||
}
|
||||
Button {
|
||||
Layout.fillWidth: true
|
||||
UserStatusSelectorButton {
|
||||
checked: NC.UserStatus.DoNotDisturb == userStatusSelectorModel.onlineStatus
|
||||
checkable: true
|
||||
icon.source: userStatusSelectorModel.dndIcon
|
||||
icon.color: "transparent"
|
||||
text: qsTr("Do not disturb")
|
||||
secondaryText: qsTr("Mute all notifications")
|
||||
onClicked: userStatusSelectorModel.setOnlineStatus(NC.UserStatus.DoNotDisturb)
|
||||
implicitWidth: 100
|
||||
}
|
||||
Button {
|
||||
|
||||
Layout.fillWidth: true
|
||||
implicitWidth: 200 // Pretty much a hack to ensure all the buttons are equal in width
|
||||
Layout.preferredHeight: topButtonsLayout.maxButtonHeight
|
||||
onImplicitHeightChanged: topButtonsLayout.updateMaxButtonHeight(implicitHeight)
|
||||
Component.onCompleted: topButtonsLayout.updateMaxButtonHeight(implicitHeight)
|
||||
}
|
||||
UserStatusSelectorButton {
|
||||
checked: NC.UserStatus.Invisible == userStatusSelectorModel.onlineStatus
|
||||
checkable: true
|
||||
icon.source: userStatusSelectorModel.invisibleIcon
|
||||
icon.color: "transparent"
|
||||
text: qsTr("Invisible")
|
||||
secondaryText: qsTr("Appear offline")
|
||||
onClicked: userStatusSelectorModel.setOnlineStatus(NC.UserStatus.Invisible)
|
||||
implicitWidth: 100
|
||||
|
||||
Layout.fillWidth: true
|
||||
implicitWidth: 200 // Pretty much a hack to ensure all the buttons are equal in width
|
||||
Layout.preferredHeight: topButtonsLayout.maxButtonHeight
|
||||
onImplicitHeightChanged: topButtonsLayout.updateMaxButtonHeight(implicitHeight)
|
||||
Component.onCompleted: topButtonsLayout.updateMaxButtonHeight(implicitHeight)
|
||||
}
|
||||
}
|
||||
|
||||
Label {
|
||||
Layout.topMargin: 16
|
||||
Layout.leftMargin: 8
|
||||
Layout.rightMargin: 8
|
||||
Layout.bottomMargin: 8
|
||||
Layout.topMargin: Style.standardSpacing * 2
|
||||
Layout.leftMargin: Style.standardSpacing
|
||||
Layout.rightMargin: Style.standardSpacing
|
||||
Layout.bottomMargin: Style.standardSpacing
|
||||
Layout.alignment: Qt.AlignTop | Qt.AlignHCenter
|
||||
font.bold: true
|
||||
text: qsTr("Status message")
|
||||
color: Style.ncTextColor
|
||||
}
|
||||
|
||||
RowLayout {
|
||||
Layout.topMargin: 8
|
||||
Layout.leftMargin: 8
|
||||
Layout.rightMargin: 8
|
||||
Layout.bottomMargin: 16
|
||||
Layout.topMargin: Style.standardSpacing
|
||||
Layout.leftMargin: Style.standardSpacing
|
||||
Layout.rightMargin: Style.standardSpacing
|
||||
Layout.bottomMargin: Style.standardSpacing * 2
|
||||
Layout.alignment: Qt.AlignTop
|
||||
Layout.fillWidth: true
|
||||
|
||||
Button {
|
||||
spacing: 0
|
||||
|
||||
UserStatusSelectorButton {
|
||||
id: fieldButton
|
||||
|
||||
Layout.preferredWidth: userStatusMessageTextField.height
|
||||
Layout.preferredHeight: userStatusMessageTextField.height
|
||||
|
||||
text: userStatusSelectorModel.userStatusEmoji
|
||||
|
||||
onClicked: emojiDialog.open()
|
||||
onHeightChanged: topButtonsLayout.maxButtonHeight = Math.max(topButtonsLayout.maxButtonHeight, height)
|
||||
|
||||
primary: true
|
||||
padding: 0
|
||||
z: hovered ? 2 : 0 // Make sure highlight is seen on top of text field
|
||||
|
||||
property color borderColor: showBorder ? Style.ncBlue : Style.menuBorder
|
||||
|
||||
// We create the square with only the top-left and bottom-left rounded corners
|
||||
// by overlaying different rectangles on top of each other
|
||||
background: Rectangle {
|
||||
radius: Style.slightlyRoundedButtonRadius
|
||||
color: Style.buttonBackgroundColor
|
||||
border.color: fieldButton.borderColor
|
||||
border.width: Style.normalBorderWidth
|
||||
|
||||
Rectangle {
|
||||
anchors.fill: parent
|
||||
anchors.leftMargin: parent.width / 2
|
||||
anchors.rightMargin: -1
|
||||
z: 1
|
||||
color: Style.buttonBackgroundColor
|
||||
border.color: fieldButton.borderColor
|
||||
border.width: Style.normalBorderWidth
|
||||
}
|
||||
|
||||
Rectangle { // We need to cover the blue border of the non-radiused rectangle
|
||||
anchors.fill: parent
|
||||
anchors.leftMargin: parent.width / 4
|
||||
anchors.rightMargin: parent.width / 4
|
||||
anchors.topMargin: Style.normalBorderWidth
|
||||
anchors.bottomMargin: Style.normalBorderWidth
|
||||
z: 2
|
||||
color: Style.buttonBackgroundColor
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Popup {
|
||||
id: emojiDialog
|
||||
padding: 0
|
||||
margins: 0
|
||||
clip: true
|
||||
|
||||
anchors.centerIn: Overlay.overlay
|
||||
|
||||
background: Rectangle {
|
||||
color: Style.backgroundColor
|
||||
border.width: Style.normalBorderWidth
|
||||
border.color: Style.menuBorder
|
||||
radius: Style.slightlyRoundedButtonRadius
|
||||
}
|
||||
|
||||
EmojiPicker {
|
||||
id: emojiPicker
|
||||
|
@ -131,37 +210,74 @@ ColumnLayout {
|
|||
id: userStatusMessageTextField
|
||||
Layout.fillWidth: true
|
||||
placeholderText: qsTr("What is your status?")
|
||||
placeholderTextColor: Style.ncSecondaryTextColor
|
||||
text: userStatusSelectorModel.userStatusMessage
|
||||
color: Style.ncTextColor
|
||||
selectByMouse: true
|
||||
onEditingFinished: userStatusSelectorModel.setUserStatusMessage(text)
|
||||
|
||||
property color borderColor: activeFocus ? Style.ncBlue : Style.menuBorder
|
||||
|
||||
background: Rectangle {
|
||||
radius: Style.slightlyRoundedButtonRadius
|
||||
color: Style.backgroundColor
|
||||
border.color: userStatusMessageTextField.borderColor
|
||||
border.width: Style.normalBorderWidth
|
||||
|
||||
Rectangle {
|
||||
anchors.fill: parent
|
||||
anchors.rightMargin: parent.width / 2
|
||||
z: 1
|
||||
color: Style.backgroundColor
|
||||
border.color: userStatusMessageTextField.borderColor
|
||||
border.width: Style.normalBorderWidth
|
||||
}
|
||||
|
||||
Rectangle { // We need to cover the blue border of the non-radiused rectangle
|
||||
anchors.fill: parent
|
||||
anchors.leftMargin: parent.width / 4
|
||||
anchors.rightMargin: parent.width / 4
|
||||
anchors.topMargin: Style.normalBorderWidth
|
||||
anchors.bottomMargin: Style.normalBorderWidth
|
||||
z: 2
|
||||
color: Style.backgroundColor
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Repeater {
|
||||
model: userStatusSelectorModel.predefinedStatusesCount
|
||||
|
||||
Button {
|
||||
PredefinedStatusButton {
|
||||
id: control
|
||||
Layout.fillWidth: true
|
||||
flat: !hovered
|
||||
hoverEnabled: true
|
||||
text: userStatusSelectorModel.predefinedStatus(index).icon + " <b>" + userStatusSelectorModel.predefinedStatus(index).message + "</b> - " + userStatusSelectorModel.predefinedStatusClearAt(index)
|
||||
Layout.leftMargin: Style.standardSpacing
|
||||
Layout.rightMargin: Style.standardSpacing
|
||||
internalSpacing: Style.standardSpacing + fieldButton.padding + userStatusMessageTextField.padding
|
||||
|
||||
emoji: userStatusSelectorModel.predefinedStatus(index).icon
|
||||
text: "<b>" + userStatusSelectorModel.predefinedStatus(index).message + "</b> - " + userStatusSelectorModel.predefinedStatusClearAt(index)
|
||||
onClicked: userStatusSelectorModel.setPredefinedStatus(index)
|
||||
}
|
||||
}
|
||||
|
||||
RowLayout {
|
||||
Layout.topMargin: 16
|
||||
Layout.leftMargin: 8
|
||||
Layout.rightMargin: 8
|
||||
Layout.bottomMargin: 8
|
||||
Layout.topMargin: Style.standardSpacing * 2
|
||||
Layout.leftMargin: Style.standardSpacing
|
||||
Layout.rightMargin: Style.standardSpacing
|
||||
Layout.bottomMargin: Style.standardSpacing
|
||||
Layout.alignment: Qt.AlignTop
|
||||
spacing: Style.standardSpacing
|
||||
|
||||
Label {
|
||||
text: qsTr("Clear status message after")
|
||||
color: Style.ncTextColor
|
||||
}
|
||||
|
||||
ComboBox {
|
||||
BasicComboBox {
|
||||
id: clearComboBox
|
||||
|
||||
Layout.fillWidth: true
|
||||
model: userStatusSelectorModel.clearAtValues
|
||||
displayText: userStatusSelectorModel.clearAt
|
||||
|
@ -170,16 +286,18 @@ ColumnLayout {
|
|||
}
|
||||
|
||||
RowLayout {
|
||||
Layout.margins: 8
|
||||
Layout.margins: Style.standardSpacing
|
||||
Layout.alignment: Qt.AlignTop
|
||||
|
||||
Button {
|
||||
UserStatusSelectorButton {
|
||||
Layout.fillWidth: true
|
||||
primary: true
|
||||
text: qsTr("Clear status message")
|
||||
onClicked: userStatusSelectorModel.clearUserStatus()
|
||||
}
|
||||
Button {
|
||||
highlighted: true
|
||||
UserStatusSelectorButton {
|
||||
primary: true
|
||||
colored: true
|
||||
Layout.fillWidth: true
|
||||
text: qsTr("Set status message")
|
||||
onClicked: userStatusSelectorModel.setUserStatus()
|
||||
|
@ -187,7 +305,7 @@ ColumnLayout {
|
|||
}
|
||||
|
||||
ErrorBox {
|
||||
Layout.margins: 8
|
||||
Layout.margins: Style.standardSpacing
|
||||
Layout.fillWidth: true
|
||||
|
||||
visible: userStatusSelectorModel.errorMessage != ""
|
||||
|
|
91
src/gui/UserStatusSelectorButton.qml
Normal file
91
src/gui/UserStatusSelectorButton.qml
Normal file
|
@ -0,0 +1,91 @@
|
|||
/*
|
||||
* Copyright (C) by Claudio Cambra <claudio.cambra@nextcloud.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 2 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.
|
||||
*/
|
||||
|
||||
import QtQuick 2.6
|
||||
import QtQuick.Dialogs 1.3
|
||||
import QtQuick.Layouts 1.15
|
||||
import QtQuick.Controls 2.15
|
||||
|
||||
import Style 1.0
|
||||
|
||||
AbstractButton {
|
||||
id: root
|
||||
|
||||
property string secondaryText: ""
|
||||
property bool colored: false
|
||||
property bool primary: false
|
||||
property bool highlighted: false
|
||||
readonly property bool showBorder: hovered || highlighted || checked
|
||||
|
||||
hoverEnabled: true
|
||||
padding: Style.standardSpacing
|
||||
|
||||
background: Rectangle {
|
||||
radius: root.primary ? Style.veryRoundedButtonRadius : Style.mediumRoundedButtonRadius
|
||||
color: root.colored ? Style.ncBlue : Style.buttonBackgroundColor
|
||||
opacity: root.colored && root.hovered ? Style.hoverOpacity : 1.0
|
||||
border.color: Style.ncBlue
|
||||
border.width: root.showBorder ? root.primary ? Style.normalBorderWidth : Style.thickBorderWidth : 0
|
||||
}
|
||||
|
||||
contentItem: GridLayout {
|
||||
columns: 2
|
||||
rows: 2
|
||||
columnSpacing: Style.standardSpacing
|
||||
rowSpacing: Style.standardSpacing / 2
|
||||
|
||||
Image {
|
||||
Layout.column: 0
|
||||
Layout.columnSpan: root.text === "" && root.secondaryText == "" ? 2 : 1
|
||||
Layout.row: 0
|
||||
Layout.rowSpan: 2
|
||||
Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
|
||||
|
||||
source: root.icon.source
|
||||
visible: root.icon.source !== ""
|
||||
}
|
||||
|
||||
Label {
|
||||
Layout.column: root.icon.source === "" ? 0 : 1
|
||||
Layout.columnSpan: root.icon.source === "" ? 2 : 1
|
||||
Layout.row: 0
|
||||
Layout.rowSpan: root.secondaryText === "" ? 2 : 1
|
||||
Layout.fillWidth: true
|
||||
horizontalAlignment: root.primary ? Text.AlignHCenter : Text.AlignLeft
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
|
||||
text: root.text
|
||||
wrapMode: Text.Wrap
|
||||
color: root.colored ? Style.ncHeaderTextColor : Style.ncTextColor
|
||||
font.bold: root.primary
|
||||
}
|
||||
|
||||
Label {
|
||||
Layout.column: root.icon.source === "" ? 0 : 1
|
||||
Layout.columnSpan: root.icon.source === "" ? 2 : 1
|
||||
Layout.row: 1
|
||||
Layout.fillWidth: true
|
||||
horizontalAlignment: root.primary ? Text.AlignHCenter : Text.AlignLeft
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
|
||||
text: root.secondaryText
|
||||
wrapMode: Text.Wrap
|
||||
color: Style.ncSecondaryTextColor
|
||||
visible: root.secondaryText !== ""
|
||||
}
|
||||
}
|
||||
}
|
|
@ -1,4 +1,5 @@
|
|||
import QtQuick.Window 2.15
|
||||
import Style 1.0
|
||||
|
||||
import com.nextcloud.desktopclient 1.0 as NC
|
||||
|
||||
|
@ -6,6 +7,7 @@ Window {
|
|||
id: dialog
|
||||
|
||||
title: qsTr("Set account status")
|
||||
color: Style.backgroundColor
|
||||
|
||||
property NC.UserStatusSelectorModel model: NC.UserStatusSelectorModel {
|
||||
onFinished: dialog.close()
|
||||
|
|
|
@ -13,8 +13,9 @@ QtObject {
|
|||
readonly property color ncSecondaryTextColor: "#808080"
|
||||
readonly property color ncHeaderTextColor: "white"
|
||||
readonly property color lightHover: Theme.darkMode ? Qt.lighter(backgroundColor, 2) : Qt.darker(backgroundColor, 1.05)
|
||||
readonly property color menuBorder: ncSecondaryTextColor
|
||||
readonly property color menuBorder: Theme.darkMode ? Qt.lighter(backgroundColor, 2.5) : Qt.darker(backgroundColor, 1.5)
|
||||
readonly property color backgroundColor: Theme.systemPalette.base
|
||||
readonly property color buttonBackgroundColor: Theme.systemPalette.button
|
||||
|
||||
// ErrorBox colors
|
||||
readonly property color errorBoxTextColor: Theme.errorBoxTextColor
|
||||
|
@ -48,6 +49,13 @@ QtObject {
|
|||
property int currentAccountButtonRadius: 2
|
||||
property int currentAccountLabelWidth: 128
|
||||
|
||||
property int normalBorderWidth: 1
|
||||
property int thickBorderWidth: 2
|
||||
property int veryRoundedButtonRadius: 100
|
||||
property int mediumRoundedButtonRadius: 8
|
||||
property int slightlyRoundedButtonRadius: 5
|
||||
property double hoverOpacity: 0.7
|
||||
|
||||
property url stateOnlineImageSource: Theme.stateOnlineImageSource
|
||||
property url stateOfflineImageSource: Theme.stateOfflineImageSource
|
||||
|
||||
|
|
Loading…
Reference in a new issue