mirrors/nextcloud-desktop
1
0
Fork 0
mirror of https://github.com/nextcloud/desktop.git synced 2024-11-22 13:05:51 +03:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #4719 from nextcloud/bugfix/unifedsearch-styling

Browse source 
Stop styling QML unified search items hierarchically, use global Style constants
This commit is contained in:
Claudio Cambra 2022-07-21 16:04:52 +02:00 committed by GitHub
commit f8d9750983
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 39 additions and 98 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/gui/tray/UnifiedSearchResultFetchMoreTrigger.qml
View file

@ -9,9 +9,9 @@ ColumnLayout {
property bool isFetchMoreInProgress: false property bool isFetchMoreInProgress: false
property bool isWihinViewPort: false property bool isWithinViewPort: false
property int fontSize: Style.topLinePixelSize property int fontSize: Style.unifiedSearchResultTitleFontSize
property string textColor: Style.ncSecondaryTextColor property string textColor: Style.ncSecondaryTextColor
@ -34,7 +34,7 @@ ColumnLayout {
BusyIndicator { BusyIndicator {
id: unifiedSearchResultItemFetchMoreIconInProgress id: unifiedSearchResultItemFetchMoreIconInProgress
running: visible running: visible
visible: unifiedSearchResultItemFetchMore.isFetchMoreInProgress && unifiedSearchResultItemFetchMore.isWihinViewPort visible: unifiedSearchResultItemFetchMore.isFetchMoreInProgress && unifiedSearchResultItemFetchMore.isWithinViewPort
Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
Layout.preferredWidth: parent.height * 0.70 Layout.preferredWidth: parent.height * 0.70
Layout.preferredHeight: parent.height * 0.70 Layout.preferredHeight: parent.height * 0.70

12
src/gui/tray/UnifiedSearchResultItem.qml
View file

@ -15,13 +15,13 @@ RowLayout {
property bool isRounded: false property bool isRounded: false
property int textLeftMargin: 18 property int textLeftMargin: Style.unifiedSearchResultTextLeftMargin
property int textRightMargin: 16 property int textRightMargin: Style.unifiedSearchResultTextRightMargin
property int iconWidth: 24 property int iconWidth: Style.unifiedSearchResultIconWidth
property int iconLeftMargin: 12 property int iconLeftMargin: Style.unifiedSearchResultIconLeftMargin
property int titleFontSize: Style.topLinePixelSize property int titleFontSize: Style.unifiedSearchResultTitleFontSize
property int sublineFontSize: Style.subLinePixelSize property int sublineFontSize: Style.unifiedSearchResultSublineFontSize
property color titleColor: Style.ncTextColor property color titleColor: Style.ncTextColor
property color sublineColor: Style.ncSecondaryTextColor property color sublineColor: Style.ncSecondaryTextColor

14
src/gui/tray/UnifiedSearchResultItemSkeleton.qml
View file

@ -6,13 +6,13 @@ import Style 1.0
RowLayout { RowLayout {
id: unifiedSearchResultSkeletonItemDetails id: unifiedSearchResultSkeletonItemDetails
property int textLeftMargin: 18 property int textLeftMargin: Style.unifiedSearchResultTextLeftMargin
property int textRightMargin: 16 property int textRightMargin: Style.unifiedSearchResultTextRightMargin
property int iconWidth: 24 property int iconWidth: Style.unifiedSearchResultIconWidth
property int iconLeftMargin: 12 property int iconLeftMargin: Style.unifiedSearchResultIconLeftMargin
property int titleFontSize: Style.topLinePixelSize property int titleFontSize: Style.unifiedSearchResultTitleFontSize
property int sublineFontSize: Style.subLinePixelSize property int sublineFontSize: Style.unifiedSearchResultSublineFontSize
property color titleColor: Style.ncTextColor property color titleColor: Style.ncTextColor
property color sublineColor: Style.ncSecondaryTextColor property color sublineColor: Style.ncSecondaryTextColor
@ -24,6 +24,8 @@ RowLayout {
Accessible.role: Accessible.ListItem Accessible.role: Accessible.ListItem
Accessible.name: qsTr("Search result skeleton.").arg(index) Accessible.name: qsTr("Search result skeleton.").arg(index)
height: Style.trayWindowHeaderHeight
Rectangle { Rectangle {
id: unifiedSearchResultSkeletonThumbnail id: unifiedSearchResultSkeletonThumbnail
color: unifiedSearchResultSkeletonItemDetails.iconColor color: unifiedSearchResultSkeletonItemDetails.iconColor

33
src/gui/tray/UnifiedSearchResultItemSkeletonContainer.qml
View file

@ -1,49 +1,26 @@
import QtQml 2.15 import QtQml 2.15
import QtQuick 2.15 import QtQuick 2.15
import QtQuick.Controls 2.3
import Style 1.0 import Style 1.0
Column { Column {
id: unifiedSearchResultsListViewSkeletonColumn id: unifiedSearchResultsListViewSkeletonColumn
property int textLeftMargin: 18
property int textRightMargin: 16
property int iconWidth: 24
property int iconLeftMargin: 12
property int itemHeight: Style.trayWindowHeaderHeight
property int titleFontSize: Style.topLinePixelSize
property int sublineFontSize: Style.subLinePixelSize
property color titleColor: Style.ncTextColor
property color sublineColor: Style.ncSecondaryTextColor
property color iconColor: "#afafaf"
Repeater { Repeater {
model: 10 model: 10
UnifiedSearchResultItemSkeleton { UnifiedSearchResultItemSkeleton {
textLeftMargin: unifiedSearchResultsListViewSkeletonColumn.textLeftMargin
textRightMargin: unifiedSearchResultsListViewSkeletonColumn.textRightMargin
iconWidth: unifiedSearchResultsListViewSkeletonColumn.iconWidth
iconLeftMargin: unifiedSearchResultsListViewSkeletonColumn.iconLeftMargin
width: unifiedSearchResultsListViewSkeletonColumn.width width: unifiedSearchResultsListViewSkeletonColumn.width
height: unifiedSearchResultsListViewSkeletonColumn.itemHeight
index: model.index
titleFontSize: unifiedSearchResultsListViewSkeletonColumn.titleFontSize
sublineFontSize: unifiedSearchResultsListViewSkeletonColumn.sublineFontSize
titleColor: unifiedSearchResultsListViewSkeletonColumn.titleColor
sublineColor: unifiedSearchResultsListViewSkeletonColumn.sublineColor
iconColor: unifiedSearchResultsListViewSkeletonColumn.iconColor
} }
} }
OpacityAnimator { OpacityAnimator {
target: unifiedSearchResultsListViewSkeletonColumn; target: unifiedSearchResultsListViewSkeletonColumn
from: 0.5; from: 0.5
to: 1; to: 1
duration: 800 duration: 800
running: unifiedSearchResultsListViewSkeletonColumn.visible running: unifiedSearchResultsListViewSkeletonColumn.visible
loops: Animation.Infinite; loops: Animation.Infinite
easing { easing {
type: Easing.InOutBounce; type: Easing.InOutBounce
} }
} }
} }

25
src/gui/tray/UnifiedSearchResultListItem.qml
View file

@ -7,17 +7,6 @@ import com.nextcloud.desktopclient 1.0
MouseArea { MouseArea {
id: unifiedSearchResultMouseArea id: unifiedSearchResultMouseArea
property int textLeftMargin: 18
property int textRightMargin: 16
property int iconWidth: 24
property int iconLeftMargin: 12
property int titleFontSize: Style.topLinePixelSize
property int sublineFontSize: Style.subLinePixelSize
property color titleColor: Style.ncTextColor
property color sublineColor: Style.ncSecondaryTextColor
property string currentFetchMoreInProgressProviderId: "" property string currentFetchMoreInProgressProviderId: ""
readonly property bool isFetchMoreTrigger: model.typeAsString === "FetchMoreTrigger" readonly property bool isFetchMoreTrigger: model.typeAsString === "FetchMoreTrigger"
@ -33,6 +22,8 @@ MouseArea {
enabled: !isFetchMoreTrigger || !isSearchInProgress enabled: !isFetchMoreTrigger || !isSearchInProgress
hoverEnabled: enabled hoverEnabled: enabled
height: Style.unifiedSearchItemHeight
ToolTip { ToolTip {
id: unifiedSearchResultMouseAreaTooltip id: unifiedSearchResultMouseAreaTooltip
visible: unifiedSearchResultMouseArea.containsMouse visible: unifiedSearchResultMouseArea.containsMouse
@ -64,14 +55,6 @@ MouseArea {
icons: Theme.darkMode ? model.darkIcons : model.lightIcons icons: Theme.darkMode ? model.darkIcons : model.lightIcons
iconPlaceholder: Theme.darkMode ? model.darkImagePlaceholder : model.lightImagePlaceholder iconPlaceholder: Theme.darkMode ? model.darkImagePlaceholder : model.lightImagePlaceholder
isRounded: model.isRounded isRounded: model.isRounded
textLeftMargin: unifiedSearchResultMouseArea.textLeftMargin
textRightMargin: unifiedSearchResultMouseArea.textRightMargin
iconWidth: unifiedSearchResultMouseArea.iconWidth
iconLeftMargin: unifiedSearchResultMouseArea.iconLeftMargin
titleFontSize: unifiedSearchResultMouseArea.titleFontSize
sublineFontSize: unifiedSearchResultMouseArea.sublineFontSize
titleColor: unifiedSearchResultMouseArea.titleColor
sublineColor: unifiedSearchResultMouseArea.sublineColor
} }
} }
@ -81,9 +64,7 @@ MouseArea {
isFetchMoreInProgress: unifiedSearchResultMouseArea.isFetchMoreInProgress isFetchMoreInProgress: unifiedSearchResultMouseArea.isFetchMoreInProgress
width: unifiedSearchResultMouseArea.width width: unifiedSearchResultMouseArea.width
height: unifiedSearchResultMouseArea.height height: unifiedSearchResultMouseArea.height
isWihinViewPort: !unifiedSearchResultMouseArea.isPooled isWithinViewPort: !unifiedSearchResultMouseArea.isPooled
fontSize: unifiedSearchResultMouseArea.titleFontSize
textColor: unifiedSearchResultMouseArea.sublineColor
} }
} }

6
src/gui/tray/UnifiedSearchResultNothingFound.qml
View file

@ -9,9 +9,9 @@ ColumnLayout {
required property string text required property string text
spacing: 8 spacing: Style.standardSpacing
anchors.leftMargin: 10 anchors.leftMargin: Style.unifiedSearchResultNothingFoundHorizontalMargin
anchors.rightMargin: 10 anchors.rightMargin: Style.unifiedSearchResultNothingFoundHorizontalMargin
Image { Image {
id: unifiedSearchResultsNoResultsLabelIcon id: unifiedSearchResultsNoResultsLabelIcon

8
src/gui/tray/UnifiedSearchResultSectionItem.qml
View file

@ -8,12 +8,12 @@ import com.nextcloud.desktopclient 1.0
Label { Label {
required property string section required property string section
topPadding: 8 topPadding: Style.unifiedSearchResultSectionItemVerticalPadding
bottomPadding: 8 bottomPadding: Style.unifiedSearchResultSectionItemVerticalPadding
leftPadding: 16 leftPadding: Style.unifiedSearchResultSectionItemLeftPadding
text: section text: section
font.pixelSize: Style.topLinePixelSize font.pixelSize: Style.unifiedSearchResultTitleFontSize
color: UserModel.currentUser.accentColor color: UserModel.currentUser.accentColor
Accessible.role: Accessible.Separator Accessible.role: Accessible.Separator

22
src/gui/tray/Window.qml
View file

@ -665,9 +665,6 @@ Window {
id: unifiedSearchResultsErrorLabel id: unifiedSearchResultsErrorLabel
visible: UserModel.currentUser.unifiedSearchResultsListModel.errorString && !unifiedSearchResultsListView.visible && ! UserModel.currentUser.unifiedSearchResultsListModel.isSearchInProgress && ! UserModel.currentUser.unifiedSearchResultsListModel.currentFetchMoreInProgressProviderId visible: UserModel.currentUser.unifiedSearchResultsListModel.errorString && !unifiedSearchResultsListView.visible && ! UserModel.currentUser.unifiedSearchResultsListModel.isSearchInProgress && ! UserModel.currentUser.unifiedSearchResultsListModel.currentFetchMoreInProgressProviderId
text: UserModel.currentUser.unifiedSearchResultsListModel.errorString text: UserModel.currentUser.unifiedSearchResultsListModel.errorString
color: Style.errorBoxBackgroundColor
backgroundColor: Style.errorBoxTextColor
borderColor: "transparent"
anchors.top: trayWindowUnifiedSearchInputContainer.bottom anchors.top: trayWindowUnifiedSearchInputContainer.bottom
anchors.left: trayWindowBackground.left anchors.left: trayWindowBackground.left
anchors.right: trayWindowBackground.right anchors.right: trayWindowBackground.right
@ -716,16 +713,6 @@ Window {
anchors.left: trayWindowBackground.left anchors.left: trayWindowBackground.left
anchors.right: trayWindowBackground.right anchors.right: trayWindowBackground.right
anchors.bottom: trayWindowBackground.bottom anchors.bottom: trayWindowBackground.bottom
textLeftMargin: trayWindowBackground.Style.unifiedSearchResultTextLeftMargin
textRightMargin: trayWindowBackground.Style.unifiedSearchResultTextRightMargin
iconWidth: trayWindowBackground.Style.unifiedSearchResulIconWidth
iconLeftMargin: trayWindowBackground.Style.unifiedSearchResulIconLeftMargin
itemHeight: trayWindowBackground.Style.unifiedSearchItemHeight
titleFontSize: trayWindowBackground.Style.unifiedSearchResulTitleFontSize
sublineFontSize: trayWindowBackground.Style.unifiedSearchResulSublineFontSize
titleColor: Style.ncTextColor
sublineColor: Style.ncSecondaryTextColor
iconColor: "#afafaf"
} }
ScrollView { ScrollView {
@ -761,16 +748,7 @@ Window {
delegate: UnifiedSearchResultListItem { delegate: UnifiedSearchResultListItem {
width: unifiedSearchResultsListView.width width: unifiedSearchResultsListView.width
height: Style.unifiedSearchItemHeight
isSearchInProgress: unifiedSearchResultsListView.model.isSearchInProgress isSearchInProgress: unifiedSearchResultsListView.model.isSearchInProgress
textLeftMargin: Style.unifiedSearchResultTextLeftMargin
textRightMargin: Style.unifiedSearchResultTextRightMargin
iconWidth: Style.unifiedSearchResulIconWidth
iconLeftMargin: Style.unifiedSearchResulIconLeftMargin
titleFontSize: Style.unifiedSearchResulTitleFontSize
sublineFontSize: Style.unifiedSearchResulSublineFontSize
titleColor: Style.ncTextColor
sublineColor: Style.ncSecondaryTextColor
currentFetchMoreInProgressProviderId: unifiedSearchResultsListView.model.currentFetchMoreInProgressProviderId currentFetchMoreInProgressProviderId: unifiedSearchResultsListView.model.currentFetchMoreInProgressProviderId
fetchMoreTriggerClicked: unifiedSearchResultsListView.model.fetchMoreTriggerClicked fetchMoreTriggerClicked: unifiedSearchResultsListView.model.fetchMoreTriggerClicked
resultClicked: unifiedSearchResultsListView.model.resultClicked resultClicked: unifiedSearchResultsListView.model.resultClicked

11
theme/Style/Style.qml
View file

@ -101,10 +101,13 @@ QtObject {
readonly property int unifiedSearchItemHeight: trayWindowHeaderHeight readonly property int unifiedSearchItemHeight: trayWindowHeaderHeight
readonly property int unifiedSearchResultTextLeftMargin: 18 readonly property int unifiedSearchResultTextLeftMargin: 18
readonly property int unifiedSearchResultTextRightMargin: 16 readonly property int unifiedSearchResultTextRightMargin: 16
readonly property int unifiedSearchResulIconWidth: 24 readonly property int unifiedSearchResultIconWidth: 24
readonly property int unifiedSearchResulIconLeftMargin: 12 readonly property int unifiedSearchResultIconLeftMargin: 12
readonly property int unifiedSearchResulTitleFontSize: topLinePixelSize readonly property int unifiedSearchResultTitleFontSize: topLinePixelSize
readonly property int unifiedSearchResulSublineFontSize: subLinePixelSize readonly property int unifiedSearchResultSublineFontSize: subLinePixelSize
readonly property int unifiedSearchResultSectionItemLeftPadding: 16
readonly property int unifiedSearchResultSectionItemVerticalPadding: 8
readonly property int unifiedSearchResultNothingFoundHorizontalMargin: 10
readonly property var fontMetrics: FontMetrics {} readonly property var fontMetrics: FontMetrics {}