<file>src/gui/tray/UnifiedSearchResultItem.qml</file>
<file>src/gui/tray/UnifiedSearchResultItemSkeleton.qml</file>
<file>src/gui/tray/UnifiedSearchResultItemSkeletonContainer.qml</file>
+ <file>src/gui/tray/UnifiedSearchResultItemSkeletonGradientRectangle.qml</file>
<file>src/gui/tray/UnifiedSearchResultListItem.qml</file>
<file>src/gui/tray/UnifiedSearchResultNothingFound.qml</file>
<file>src/gui/tray/UnifiedSearchResultSectionItem.qml</file>
id: unifiedSearchResultItemFetchMore
property bool isFetchMoreInProgress: false
-
property bool isWithinViewPort: false
property int fontSize: Style.unifiedSearchResultTitleFontSize
Label {
id: unifiedSearchResultItemFetchMoreText
- text: qsTr("Load more results")
- visible: !unifiedSearchResultItemFetchMore.isFetchMoreInProgress
- horizontalAlignment: Text.AlignHCenter
- verticalAlignment: Text.AlignVCenter
+
Layout.fillWidth: true
Layout.fillHeight: true
+ Layout.leftMargin: Style.trayHorizontalMargin
+ Layout.rightMargin: Style.trayHorizontalMargin
+
+ horizontalAlignment: Text.AlignHCenter
+ verticalAlignment: Text.AlignVCenter
+ text: qsTr("Load more results")
+ wrapMode: Text.Wrap
font.pixelSize: unifiedSearchResultItemFetchMore.fontSize
color: unifiedSearchResultItemFetchMore.textColor
+ visible: !unifiedSearchResultItemFetchMore.isFetchMoreInProgress
}
BusyIndicator {
id: unifiedSearchResultItemFetchMoreIconInProgress
- running: visible
- visible: unifiedSearchResultItemFetchMore.isFetchMoreInProgress && unifiedSearchResultItemFetchMore.isWithinViewPort
- Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
+
Layout.preferredWidth: parent.height * 0.70
Layout.preferredHeight: parent.height * 0.70
+ Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
+
+ running: visible
+ visible: unifiedSearchResultItemFetchMore.isFetchMoreInProgress && unifiedSearchResultItemFetchMore.isWithinViewPort
}
}
import QtQuick 2.9
import QtQuick.Controls 2.3
import QtQuick.Layouts 1.2
-import Style 1.0
import QtGraphicalEffects 1.0
+import Style 1.0
+
RowLayout {
id: unifiedSearchResultItemDetails
property string subline: ""
property string icons: ""
property string iconPlaceholder: ""
- property bool isRounded: false
+ property bool iconsIsThumbnail: false
+ property bool isRounded: false
- property int textLeftMargin: Style.unifiedSearchResultTextLeftMargin
- property int textRightMargin: Style.unifiedSearchResultTextRightMargin
- property int iconWidth: Style.unifiedSearchResultIconWidth
- property int iconLeftMargin: Style.unifiedSearchResultIconLeftMargin
-
+ property int iconWidth: iconsIsThumbnail && icons !== "" ? Style.unifiedSearchResultIconWidth : Style.unifiedSearchResultSmallIconWidth
property int titleFontSize: Style.unifiedSearchResultTitleFontSize
property int sublineFontSize: Style.unifiedSearchResultSublineFontSize
Accessible.name: resultTitle
Accessible.onPressAction: unifiedSearchResultMouseArea.clicked()
- ColumnLayout {
+ spacing: Style.trayHorizontalMargin
+
+ Item {
id: unifiedSearchResultImageContainer
- visible: true
- Layout.preferredWidth: unifiedSearchResultItemDetails.iconWidth + 10
- Layout.preferredHeight: unifiedSearchResultItemDetails.height
+
+ property int whiteSpace: (Style.trayListItemIconSize - unifiedSearchResultItemDetails.iconWidth)
+
+ Layout.preferredWidth: unifiedSearchResultItemDetails.iconWidth
+ Layout.preferredHeight: unifiedSearchResultItemDetails.iconWidth
+ Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
+ Layout.leftMargin: Style.trayHorizontalMargin + (whiteSpace * (0.5 - Style.thumbnailImageSizeReduction))
+ Layout.rightMargin: whiteSpace * (0.5 + Style.thumbnailImageSizeReduction)
+
Image {
id: unifiedSearchResultThumbnail
+ anchors.fill: parent
visible: false
asynchronous: true
- source: "image://tray-image-provider/" + icons
+ source: "image://tray-image-provider/" + unifiedSearchResultItemDetails.icons
cache: true
- sourceSize.width: imageData.width
- sourceSize.height: imageData.height
- width: imageData.width
- height: imageData.height
+ verticalAlignment: Qt.AlignVCenter
+ horizontalAlignment: Qt.AlignHCenter
+ sourceSize.width: width
+ sourceSize.height: height
}
Rectangle {
id: mask
+ anchors.fill: unifiedSearchResultThumbnail
visible: false
- radius: isRounded ? width / 2 : 0
- width: imageData.width
- height: imageData.height
+ radius: unifiedSearchResultItemDetails.isRounded ? width / 2 : 3
}
OpacityMask {
id: imageData
- visible: !unifiedSearchResultThumbnailPlaceholder.visible && icons
- Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
- Layout.leftMargin: iconLeftMargin
- Layout.preferredWidth: unifiedSearchResultItemDetails.iconWidth
- Layout.preferredHeight: unifiedSearchResultItemDetails.iconWidth
+ anchors.fill: unifiedSearchResultThumbnail
+ visible: unifiedSearchResultItemDetails.icons !== ""
source: unifiedSearchResultThumbnail
maskSource: mask
}
Image {
id: unifiedSearchResultThumbnailPlaceholder
- Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
- Layout.leftMargin: iconLeftMargin
- verticalAlignment: Qt.AlignCenter
+ anchors.fill: parent
+ verticalAlignment: Qt.AlignVCenter
+ horizontalAlignment: Qt.AlignHCenter
cache: true
- source: "image://tray-image-provider/" + iconPlaceholder
- visible: false
+ source: "image://tray-image-provider/" + unifiedSearchResultItemDetails.iconPlaceholder
+ visible: unifiedSearchResultItemDetails.iconPlaceholder !== "" && unifiedSearchResultItemDetails.icons === ""
sourceSize.height: unifiedSearchResultItemDetails.iconWidth
sourceSize.width: unifiedSearchResultItemDetails.iconWidth
- Layout.preferredWidth: unifiedSearchResultItemDetails.iconWidth
- Layout.preferredHeight: unifiedSearchResultItemDetails.iconWidth
}
}
ColumnLayout {
id: unifiedSearchResultTextContainer
+
Layout.fillWidth: true
+ Layout.rightMargin: Style.trayHorizontalMargin
+ spacing: Style.standardSpacing
Label {
id: unifiedSearchResultTitleText
- text: title.replace(/[\r\n]+/g, " ")
- Layout.leftMargin: textLeftMargin
- Layout.rightMargin: textRightMargin
Layout.fillWidth: true
+ text: unifiedSearchResultItemDetails.title.replace(/[\r\n]+/g, " ")
elide: Text.ElideRight
font.pixelSize: unifiedSearchResultItemDetails.titleFontSize
color: unifiedSearchResultItemDetails.titleColor
}
Label {
id: unifiedSearchResultTextSubline
- text: subline.replace(/[\r\n]+/g, " ")
+ Layout.fillWidth: true
+ text: unifiedSearchResultItemDetails.subline.replace(/[\r\n]+/g, " ")
elide: Text.ElideRight
font.pixelSize: unifiedSearchResultItemDetails.sublineFontSize
- Layout.leftMargin: textLeftMargin
- Layout.rightMargin: textRightMargin
- Layout.fillWidth: true
color: unifiedSearchResultItemDetails.sublineColor
}
}
RowLayout {
id: unifiedSearchResultSkeletonItemDetails
- property int textLeftMargin: Style.unifiedSearchResultTextLeftMargin
- property int textRightMargin: Style.unifiedSearchResultTextRightMargin
property int iconWidth: Style.unifiedSearchResultIconWidth
- property int iconLeftMargin: Style.unifiedSearchResultIconLeftMargin
-
property int titleFontSize: Style.unifiedSearchResultTitleFontSize
property int sublineFontSize: Style.unifiedSearchResultSublineFontSize
Accessible.name: qsTr("Search result skeleton.").arg(model.index)
height: Style.trayWindowHeaderHeight
+ spacing: Style.trayHorizontalMargin
/*
* An overview of what goes on here:
*/
property color baseGradientColor: Style.lightHover
- property color progressGradientColor: Style.darkMode ? Qt.lighter(baseGradientColor, 1.2) : Qt.darker(baseGradientColor, 1.1)
-
property int animationRectangleWidth: Style.trayWindowWidth
- property int animationStartX: -animationRectangleWidth
- property int animationEndX: animationRectangleWidth
-
- Component {
- id: gradientAnimationRectangle
- Rectangle {
- width: unifiedSearchResultSkeletonItemDetails.animationRectangleWidth
- height: parent.height
- gradient: Gradient {
- orientation: Gradient.Horizontal
- GradientStop {
- position: 0
- color: "transparent"
- }
- GradientStop {
- position: 0.4
- color: unifiedSearchResultSkeletonItemDetails.progressGradientColor
- }
- GradientStop {
- position: 0.6
- color: unifiedSearchResultSkeletonItemDetails.progressGradientColor
- }
- GradientStop {
- position: 1.0
- color: "transparent"
- }
- }
-
- NumberAnimation on x {
- from: unifiedSearchResultSkeletonItemDetails.animationStartX
- to: unifiedSearchResultSkeletonItemDetails.animationEndX
- duration: 1000
- loops: Animation.Infinite
- running: true
- }
- }
- }
Item {
+ property int whiteSpace: (Style.trayListItemIconSize - unifiedSearchResultSkeletonItemDetails.iconWidth)
+
Layout.preferredWidth: unifiedSearchResultSkeletonItemDetails.iconWidth
Layout.preferredHeight: unifiedSearchResultSkeletonItemDetails.iconWidth
- Layout.leftMargin: unifiedSearchResultSkeletonItemDetails.iconLeftMargin
Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
+ Layout.leftMargin: Style.trayHorizontalMargin + (whiteSpace * (0.5 - Style.thumbnailImageSizeReduction))
+ Layout.rightMargin: whiteSpace * (0.5 + Style.thumbnailImageSizeReduction)
Rectangle {
id: unifiedSearchResultSkeletonThumbnail
Loader {
x: mapFromItem(unifiedSearchResultSkeletonItemDetails, 0, 0).x
height: parent.height
- sourceComponent: gradientAnimationRectangle
+ sourceComponent: UnifiedSearchResultItemSkeletonGradientRectangle {
+ width: unifiedSearchResultSkeletonItemDetails.animationRectangleWidth
+ height: parent.height
+ }
}
}
id: unifiedSearchResultSkeletonTextContainer
Layout.fillWidth: true
- Layout.leftMargin: unifiedSearchResultSkeletonItemDetails.textLeftMargin
- Layout.rightMargin: unifiedSearchResultSkeletonItemDetails.textRightMargin
-
+ Layout.rightMargin: Style.trayHorizontalMargin
spacing: Style.standardSpacing
Item {
Loader {
x: mapFromItem(unifiedSearchResultSkeletonItemDetails, 0, 0).x
height: parent.height
- sourceComponent: gradientAnimationRectangle
+ sourceComponent: UnifiedSearchResultItemSkeletonGradientRectangle {
+ width: unifiedSearchResultSkeletonItemDetails.animationRectangleWidth
+ height: parent.height
+ }
}
}
Loader {
x: mapFromItem(unifiedSearchResultSkeletonItemDetails, 0, 0).x
height: parent.height
- sourceComponent: gradientAnimationRectangle
+ sourceComponent: UnifiedSearchResultItemSkeletonGradientRectangle {
+ width: unifiedSearchResultSkeletonItemDetails.animationRectangleWidth
+ height: parent.height
+ }
}
}
import QtQml 2.15
import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtGraphicalEffects 1.15
+
import Style 1.0
-Column {
+ColumnLayout {
id: unifiedSearchResultsListViewSkeletonColumn
property int animationRectangleWidth: Style.trayWindowWidth
+ Item {
+ id: placeholderSectionHeader
+
+ property rect textRect: fontMetrics.boundingRect("Dummy text")
+
+ Layout.topMargin: Style.unifiedSearchResultSectionItemVerticalPadding / 2
+ Layout.bottomMargin: Style.unifiedSearchResultSectionItemVerticalPadding / 2
+ Layout.leftMargin: Style.unifiedSearchResultSectionItemLeftPadding
+
+ width: textRect.width
+ height: textRect.height
+
+ FontMetrics {
+ id: fontMetrics
+ font.pixelSize: Style.unifiedSearchResultTitleFontSize
+ }
+
+ Rectangle {
+ id: placeholderSectionHeaderRectangle
+ anchors.fill: parent
+ radius: Style.veryRoundedButtonRadius
+ color: Style.lightHover
+ clip: true
+ visible: false
+
+ Loader {
+ x: mapFromItem(placeholderSectionHeader, 0, 0).x
+ height: parent.height
+ sourceComponent: UnifiedSearchResultItemSkeletonGradientRectangle {
+ width: unifiedSearchResultsListViewSkeletonColumn.animationRectangleWidth
+ height: parent.height
+ }
+ }
+ }
+
+ Rectangle {
+ id: placeholderSectionHeaderMask
+ anchors.fill: placeholderSectionHeaderRectangle
+ color: "white"
+ radius: Style.veryRoundedButtonRadius
+ visible: false
+ }
+
+ OpacityMask {
+ anchors.fill: placeholderSectionHeaderRectangle
+ source: placeholderSectionHeaderRectangle
+ maskSource: placeholderSectionHeaderMask
+ }
+ }
+
Repeater {
model: Math.ceil(unifiedSearchResultsListViewSkeletonColumn.height / Style.trayWindowHeaderHeight)
UnifiedSearchResultItemSkeleton {
--- /dev/null
+/*
+ * Copyright (C) 2022 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 QtQml 2.15
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtGraphicalEffects 1.15
+
+import Style 1.0
+
+Rectangle {
+ id: root
+
+ property color progressGradientColor: Style.darkMode ? Qt.lighter(Style.lightHover, 1.2) : Qt.darker(Style.lightHover, 1.1)
+ property int animationStartX: -width
+ property int animationEndX: width
+
+ gradient: Gradient {
+ orientation: Gradient.Horizontal
+ GradientStop {
+ position: 0
+ color: "transparent"
+ }
+ GradientStop {
+ position: 0.4
+ color: root.progressGradientColor
+ }
+ GradientStop {
+ position: 0.6
+ color: root.progressGradientColor
+ }
+ GradientStop {
+ position: 1.0
+ color: "transparent"
+ }
+ }
+
+ NumberAnimation on x {
+ from: root.animationStartX
+ to: root.animationEndX
+ duration: 1000
+ loops: Animation.Infinite
+ running: true
+ }
+}
}
Loader {
+ anchors.fill: parent
active: !isFetchMoreTrigger
sourceComponent: UnifiedSearchResultItem {
- width: unifiedSearchResultMouseArea.width
- height: unifiedSearchResultMouseArea.height
+ anchors.fill: parent
title: model.resultTitle
subline: model.subline
icons: Theme.darkMode ? model.darkIcons : model.lightIcons
+ iconsIsThumbnail: Theme.darkMode ? model.darkIconsIsThumbnail : model.lightIconsIsThumbnail
iconPlaceholder: Theme.darkMode ? model.darkImagePlaceholder : model.lightImagePlaceholder
- isRounded: model.isRounded
+ isRounded: model.isRounded && iconsIsThumbnail
}
}
Loader {
+ anchors.fill: parent
active: isFetchMoreTrigger
sourceComponent: UnifiedSearchResultFetchMoreTrigger {
+ anchors.fill: parent
isFetchMoreInProgress: unifiedSearchResultMouseArea.isFetchMoreInProgress
- width: unifiedSearchResultMouseArea.width
- height: unifiedSearchResultMouseArea.height
isWithinViewPort: !unifiedSearchResultMouseArea.isPooled
}
}
\r
Loader {\r
id: unifiedSearchResultsListViewSkeletonLoader\r
+\r
anchors.top: trayWindowUnifiedSearchInputContainer.bottom\r
anchors.left: trayWindowMainItem.left\r
anchors.right: trayWindowMainItem.right\r
anchors.bottom: trayWindowMainItem.bottom\r
+ anchors.margins: controlRoot.padding\r
\r
active: !unifiedSearchResultNothingFound.visible &&\r
!unifiedSearchResultsListView.visible &&\r
\r
sourceComponent: UnifiedSearchResultItemSkeletonContainer {\r
anchors.fill: parent\r
+ spacing: unifiedSearchResultsListView.spacing\r
animationRectangleWidth: trayWindow.width\r
}\r
}\r
QUrl _resourceUrl;
QString _darkIcons;
QString _lightIcons;
+ bool _darkIconsIsThumbnail;
+ bool _lightIconsIsThumbnail;
Type _type = Type::Default;
};
}
return fallbackIconCopy;
}
-QString iconsFromThumbnailAndFallbackIcon(const QString &thumbnailUrl, const QString &fallbackIcon, const QUrl &serverUrl, const bool darkMode)
+// Return image URL and whether it is a thumbnail or not
+std::pair<QString, bool> iconsFromThumbnailAndFallbackIcon(const QString &thumbnailUrl, const QString &fallbackIcon, const QUrl &serverUrl, const bool darkMode)
{
if (thumbnailUrl.isEmpty() && fallbackIcon.isEmpty()) {
return {};
if (serverUrl.isEmpty()) {
const QStringList listImages = {thumbnailUrl, fallbackIcon};
- return listImages.join(QLatin1Char(';'));
+ return {listImages.join(QLatin1Char(';')), false};
}
const auto urlForThumbnail = generateUrlForThumbnail(thumbnailUrl, serverUrl);
qDebug() << "SEARCH" << urlForThumbnail << urlForFallbackIcon;
if (urlForThumbnail.isEmpty() && !urlForFallbackIcon.isEmpty()) {
- return urlForFallbackIcon;
+ return {urlForFallbackIcon, false};
}
if (!urlForThumbnail.isEmpty() && urlForFallbackIcon.isEmpty()) {
- return urlForThumbnail;
+ return {urlForThumbnail, true};
}
const QStringList listImages{urlForThumbnail, urlForFallbackIcon};
- return listImages.join(QLatin1Char(';'));
+ return {listImages.join(QLatin1Char(';')), true};
}
constexpr int searchTermEditingFinishedSearchStartDelay = 800;
return _results.at(index.row())._darkIcons;
case LightIconsRole:
return _results.at(index.row())._lightIcons;
+ case DarkIconsIsThumbnailRole:
+ return _results.at(index.row())._darkIconsIsThumbnail;
+ case LightIconsIsThumbnailRole:
+ return _results.at(index.row())._lightIconsIsThumbnail;
case TitleRole:
return _results.at(index.row())._title;
case SublineRole:
roles[ProviderIdRole] = "providerId";
roles[DarkIconsRole] = "darkIcons";
roles[LightIconsRole] = "lightIcons";
+ roles[DarkIconsIsThumbnailRole] = "darkIconsIsThumbnail";
+ roles[LightIconsIsThumbnailRole] = "lightIconsIsThumbnail";
roles[DarkImagePlaceholderRole] = "darkImagePlaceholder";
roles[LightImagePlaceholderRole] = "lightImagePlaceholder";
roles[TitleRole] = "resultTitle";
const auto accountUrl = (_accountState && _accountState->account()) ? _accountState->account()->url() : QUrl();
result._resourceUrl = makeResourceUrl(resourceUrl, accountUrl);
- result._darkIcons = iconsFromThumbnailAndFallbackIcon(entryMap.value(QStringLiteral("thumbnailUrl")).toString(),
- entryMap.value(QStringLiteral("icon")).toString(), accountUrl, true);
- result._lightIcons = iconsFromThumbnailAndFallbackIcon(entryMap.value(QStringLiteral("thumbnailUrl")).toString(),
- entryMap.value(QStringLiteral("icon")).toString(), accountUrl, false);
+ const auto darkIconsData = iconsFromThumbnailAndFallbackIcon(entryMap.value(QStringLiteral("thumbnailUrl")).toString(),
+ entryMap.value(QStringLiteral("icon")).toString(), accountUrl, true);
+ const auto lightIconsData = iconsFromThumbnailAndFallbackIcon(entryMap.value(QStringLiteral("thumbnailUrl")).toString(),
+ entryMap.value(QStringLiteral("icon")).toString(), accountUrl, false);
+ result._darkIcons = darkIconsData.first;
+ result._lightIcons = lightIconsData.first;
+ result._darkIconsIsThumbnail = darkIconsData.second;
+ result._lightIconsIsThumbnail = lightIconsData.second;
newEntries.push_back(result);
}
LightImagePlaceholderRole,
DarkIconsRole,
LightIconsRole,
+ DarkIconsIsThumbnailRole,
+ LightIconsIsThumbnailRole,
TitleRole,
SublineRole,
ResourceUrlRole,
\r
property int roundButtonBackgroundVerticalMargins: 10\r
property int roundedButtonBackgroundVerticalMargins: 5\r
- \r
+\r
property int userStatusEmojiSize: 8\r
property int userStatusSpacing: trayHorizontalMargin\r
property int userStatusAnchorsMargin: 2\r
readonly property int unifiedSearchItemHeight: trayWindowHeaderHeight\r
readonly property int unifiedSearchResultTextLeftMargin: 18\r
readonly property int unifiedSearchResultTextRightMargin: 16\r
- readonly property int unifiedSearchResultIconWidth: 24\r
+ readonly property int unifiedSearchResultIconWidth: trayListItemIconSize * (1 - thumbnailImageSizeReduction)\r
+ readonly property int unifiedSearchResultSmallIconWidth: trayListItemIconSize * (1 - thumbnailImageSizeReduction * 2)\r
readonly property int unifiedSearchResultIconLeftMargin: 12\r
readonly property int unifiedSearchResultTitleFontSize: topLinePixelSize\r
readonly property int unifiedSearchResultSublineFontSize: subLinePixelSize\r
readonly property int activityContentSpace: 4\r
\r
function variableSize(size) {\r
- return size * (1 + Math.min(pixelSize / 100, 1)); \r
+ return size * (1 + Math.min(pixelSize / 100, 1));\r
}\r
}\r
projects / nextcloud-desktop.git / commitdiff