Skip to content

Commit

Permalink
User dialog now looks in line with the rest of the desktop client tray
Browse files Browse the repository at this point in the history
Signed-off-by: Claudio Cambra <claudio.cambra@gmail.com>
  • Loading branch information
claucambra committed Jun 8, 2022
1 parent 994af63 commit fa6d6fd
Show file tree
Hide file tree
Showing 8 changed files with 424 additions and 46 deletions.
3 changes: 3 additions & 0 deletions resources.qrc
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
99 changes: 99 additions & 0 deletions src/gui/BasicComboBox.qml
Original file line number Diff line number Diff line change
@@ -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.6
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
}
}
}
30 changes: 25 additions & 5 deletions src/gui/EmojiPicker.qml
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -34,6 +35,7 @@ ColumnLayout {
ListView {
id: headerLayout
Layout.fillWidth: true
Layout.margins: 1
implicitWidth: contentItem.childrenRect.width
implicitHeight: metrics.height * 2

Expand All @@ -42,24 +44,32 @@ ColumnLayout {
model: emojiModel.emojiCategoriesModel

delegate: ItemDelegate {
id: headerDelegate
width: metrics.height * 2
height: headerLayout.height

background: Rectangle {
color: Style.lightHover
visible: ListView.isCurrentItem || headerDelegate.highlighted || headerDelegate.checked || headerDelegate.down || headerDelegate.hovered
radius: Style.slightlyRoundedButtonRadius
}

contentItem: Text {
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
}


Expand All @@ -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
Expand All @@ -90,13 +101,22 @@ ColumnLayout {
model: emojiModel.model

delegate: ItemDelegate {
id: emojiDelegate

width: metrics.height * 2
height: metrics.height * 2

background: Rectangle {
color: Style.lightHover
visible: ListView.isCurrentItem || emojiDelegate.highlighted || emojiDelegate.checked || emojiDelegate.down || emojiDelegate.hovered
radius: Style.slightlyRoundedButtonRadius
}

contentItem: Text {
anchors.centerIn: parent
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
text: modelData === undefined ? "" : modelData.unicode
color: Style.ncTextColor
}

onClicked: {
Expand Down
37 changes: 37 additions & 0 deletions src/gui/PredefinedStatusButton.qml
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
/*
* 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

hoverEnabled: true
padding: Style.standardSpacing

background: Rectangle {
color: root.hovered || root.checked ? Style.lightHover : "transparent"
radius: Style.slightlyRoundedButtonRadius
}

contentItem: Label {
text: root.text
color: Style.ncTextColor
}
}
Loading

0 comments on commit fa6d6fd

Please sign in to comment.