Skip to content

Commit

Permalink
Customize sync progress ProgressBar.
Browse files Browse the repository at this point in the history
Signed-off-by: alex-z <blackslayer4@gmail.com>
  • Loading branch information
allexzander committed Sep 12, 2023
1 parent 8392a71 commit ea12f90
Show file tree
Hide file tree
Showing 4 changed files with 58 additions and 26 deletions.
1 change: 1 addition & 0 deletions resources.qrc
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@
<file>src/gui/tray/EditFileLocallyLoadingDialog.qml</file>
<file>src/gui/tray/NCBusyIndicator.qml</file>
<file>src/gui/tray/NCToolTip.qml</file>
<file>src/gui/tray/NCProgressBar.qml</file>
<file>src/gui/tray/EnforcedPlainTextLabel.qml</file>
<file>theme/Style/Style.qml</file>
<file>theme/Style/qmldir</file>
Expand Down
44 changes: 44 additions & 0 deletions src/gui/tray/NCProgressBar.qml
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
/*
* Copyright (C) 2021 by Oleksandr Zolotov <alex@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.Controls 2.15
import Style 1.0

ProgressBar {
id: control

background: Rectangle {
implicitWidth: Style.progressBarWidth
implicitHeight: Style.progressBarBackgroundHeight
radius: Style.progressBarRadius
color: Style.progressBarBackgroundColor
border.color: Style.progressBarBackgroundBorderColor
border.width: Style.progressBarBackgroundBorderWidth
}

contentItem: Item {
implicitWidth: Style.progressBarWidth
implicitHeight: Style.progressBarContentHeight

Rectangle {
width: control.visualPosition * parent.width
height: parent.height
radius: Style.progressBarRadius
color: Style.progressBarContentColor
border.color: Style.progressBarContentBorderColor
border.width: Style.progressBarContentBorderWidth
}
}
}
26 changes: 1 addition & 25 deletions src/gui/tray/SyncStatus.qml
Original file line number Diff line number Diff line change
Expand Up @@ -66,32 +66,8 @@ RowLayout {
active: syncStatus.syncing && syncStatus.totalFiles > 0
visible: active

sourceComponent: ProgressBar {
sourceComponent: NCProgressBar {
id: syncProgressBar

// TODO: Rather than setting all these palette colours manually,
// create a custom style and do it for all components globally.
//
// Additionally, we need to override the entire palette when we
// set one palette property, as otherwise we default back to the
// theme palette -- not the parent palette
palette {
text: Style.ncTextColor
windowText: Style.ncTextColor
buttonText: Style.ncTextColor
brightText: Style.ncTextBrightColor
highlight: Style.lightHover
highlightedText: Style.ncTextColor
light: Style.lightHover
midlight: Style.ncSecondaryTextColor
mid: Style.darkerHover
dark: Style.menuBorder
button: Style.buttonBackgroundColor
window: palette.dark // NOTE: Fusion theme uses darker window colour for the border of the progress bar
base: Style.backgroundColor
toolTipBase: Style.backgroundColor
toolTipText: Style.ncTextColor
}
value: syncStatus.syncProgress
}
}
Expand Down
13 changes: 12 additions & 1 deletion theme/Style/Style.qml
Original file line number Diff line number Diff line change
Expand Up @@ -159,7 +159,18 @@ QtObject {
readonly property int veryLongAnimationDuration: 3000

// sync status
property int progressBarPreferredHeight: 10
property int progressBarPreferredHeight: 9

property int progressBarWidth: 100
property int progressBarBackgroundHeight: 8
property int progressBarContentHeight: 8
property int progressBarRadius: 4
property int progressBarContentBorderWidth: 1
property int progressBarBackgroundBorderWidth: 1
property color progressBarContentColor: buttonBackgroundColor
property color progressBarContentBorderColor: menuBorder
property color progressBarBackgroundColor: backgroundColor
property color progressBarBackgroundBorderColor: menuBorder

function variableSize(size) {
return size * (1 + Math.min(pixelSize / 100, 1));
Expand Down

0 comments on commit ea12f90

Please sign in to comment.