Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use opaque colors #689

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
+97 −82
Open

Use opaque colors #689

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
57 changes: 29 additions & 28 deletions components/AsymmetricRoundedRectangle.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,34 +18,7 @@ Item {
property alias border: roundedRect.border

// we have to draw each element separately as any of the colors may have transparency...

Rectangle {
id: topBorderRect
anchors {
fill: parent
bottomMargin: root.height - root.border.width
leftMargin: root.roundedSide === VenusOS.AsymmetricRoundedRectangle_RoundedSide_Left ? root.radius : 0
rightMargin: root.roundedSide === VenusOS.AsymmetricRoundedRectangle_RoundedSide_Right ? root.radius : 0
}

visible: root.roundedSide !== VenusOS.AsymmetricRoundedRectangle_RoundedSide_All

color: roundedRect.border.color
}

Rectangle {
id: bottomBorderRect
anchors {
fill: parent
topMargin: root.height - root.border.width
leftMargin: root.roundedSide === VenusOS.AsymmetricRoundedRectangle_RoundedSide_Left ? root.radius : 0
rightMargin: root.roundedSide === VenusOS.AsymmetricRoundedRectangle_RoundedSide_Right ? root.radius : 0
}

visible: root.roundedSide !== VenusOS.AsymmetricRoundedRectangle_RoundedSide_All

color: roundedRect.border.color
}
// the order matters, because any of the colors may be fully opaque...

Rectangle {
id: backgroundRect
Expand Down Expand Up @@ -90,4 +63,32 @@ Item {
border.color: Theme.color_ok
}
}

Rectangle {
id: topBorderRect
anchors {
fill: parent
bottomMargin: root.height - root.border.width
leftMargin: root.roundedSide === VenusOS.AsymmetricRoundedRectangle_RoundedSide_Left ? root.radius : 0
rightMargin: root.roundedSide === VenusOS.AsymmetricRoundedRectangle_RoundedSide_Right ? root.radius : 0
}

visible: root.roundedSide !== VenusOS.AsymmetricRoundedRectangle_RoundedSide_All

color: roundedRect.border.color
}

Rectangle {
id: bottomBorderRect
anchors {
fill: parent
topMargin: root.height - root.border.width
leftMargin: root.roundedSide === VenusOS.AsymmetricRoundedRectangle_RoundedSide_Left ? root.radius : 0
rightMargin: root.roundedSide === VenusOS.AsymmetricRoundedRectangle_RoundedSide_Right ? root.radius : 0
}

visible: root.roundedSide !== VenusOS.AsymmetricRoundedRectangle_RoundedSide_All

color: roundedRect.border.color
}
}
4 changes: 2 additions & 2 deletions components/BarGaugeBase.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,8 @@ Rectangle {
property int valueType: VenusOS.Gauges_ValueType_NeutralPercentage
readonly property int valueStatus: Gauges.getValueStatus(_value * 100, valueType)
property alias foregroundParent: fgRect.parent
property color foregroundColor: Theme.statusColorValue(valueStatus)
property color backgroundColor: Theme.statusColorValue(valueStatus, true)
property color foregroundColor: Theme.color_darkOk,Theme.statusColorValue(valueStatus)
property color backgroundColor: Theme.color_darkOk,Theme.statusColorValue(valueStatus, true)
property color surfaceColor: Theme.color_levelsPage_gauge_separatorBarColor
property real value: 0.0
property int orientation: Qt.Vertical
Expand Down
8 changes: 4 additions & 4 deletions components/CircularMultiGauge.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,8 +52,8 @@ Item {
startAngle: 0
endAngle: 270
value: loader.value
progressColor: Theme.statusColorValue(loader.gaugeStatus)
remainderColor: Theme.statusColorValue(loader.gaugeStatus, true)
progressColor: Theme.color_darkOk,Theme.statusColorValue(loader.gaugeStatus)
remainderColor: Theme.color_darkOk,Theme.statusColorValue(loader.gaugeStatus, true)
strokeWidth: gauges.strokeWidth
animationEnabled: gauges.animationEnabled
shineAnimationEnabled: Global.batteries.system.mode === VenusOS.Battery_Mode_Charging
Expand All @@ -67,8 +67,8 @@ Item {
startAngle: 0
endAngle: 270
value: loader.value
progressColor: Theme.statusColorValue(loader.gaugeStatus)
remainderColor: Theme.statusColorValue(loader.gaugeStatus, true)
progressColor: Theme.color_darkOk,Theme.statusColorValue(loader.gaugeStatus)
remainderColor: Theme.color_darkOk,Theme.statusColorValue(loader.gaugeStatus, true)
strokeWidth: gauges.strokeWidth
animationEnabled: gauges.animationEnabled
}
Expand Down
4 changes: 2 additions & 2 deletions components/CircularSingleGauge.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,8 +41,8 @@ Item {
radius: width/2
startAngle: 0
endAngle: 359 // "Note that a single PathArc cannot be used to specify a circle."
progressColor: Theme.statusColorValue(gauges.status)
remainderColor: Theme.statusColorValue(gauges.status, true)
progressColor: Theme.color_darkOk,Theme.statusColorValue(gauges.status)
remainderColor: Theme.color_darkOk,Theme.statusColorValue(gauges.status, true)
strokeWidth: Theme.geometry_circularSingularGauge_strokeWidth
}
}
Expand Down
6 changes: 4 additions & 2 deletions components/SegmentedButtonRow.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ Item {
property int fontPixelSize: Theme.font_size_body3
property alias model: buttonRepeater.model
property int currentIndex
property bool flat

signal buttonClicked(buttonIndex: int)

Expand All @@ -38,15 +39,16 @@ Item {
delegate: AsymmetricRoundedRectangle {
id: buttonDelegate

flat: root.flat
width: root.width / buttonRepeater.count
height: parent ? parent.height : 0
color: modelData.enabled === false && model.index !== root.currentIndex
? Theme.color_background_disabled
: (mouseArea.pressed || model.index === root.currentIndex
: ((mouseArea.pressed || model.index === root.currentIndex)
? Theme.color_ok
: Theme.color_darkOk)
border.width: Theme.geometry_button_border_width
border.color: modelData.enabled === false && model.index !== root.currentIndex ? color : Theme.color_ok
border.color: (modelData.enabled === false && model.index !== root.currentIndex) ? buttonDelegate.color : Theme.color_ok
radius: Theme.geometry_button_radius

roundedSide: model.index === 0 ? VenusOS.AsymmetricRoundedRectangle_RoundedSide_Left
Expand Down
4 changes: 2 additions & 2 deletions components/SideGauge.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,8 @@ ArcGauge {
radius: Theme.geometry_briefPage_edgeGauge_radius
useLargeArc: false
strokeWidth: Theme.geometry_arc_strokeWidth
progressColor: Theme.statusColorValue(valueStatus)
remainderColor: Theme.statusColorValue(valueStatus, true)
progressColor: Theme.color_darkOk,Theme.statusColorValue(valueStatus)
remainderColor: Theme.color_darkOk,Theme.statusColorValue(valueStatus, true)
arcHorizontalCenterOffset: (horizontalAlignment & Qt.AlignLeft) ? -(width - (2 * radius)) / 2
: (horizontalAlignment & Qt.AlignRight) ? (width - (2 * radius)) / 2
: 0
Expand Down
4 changes: 2 additions & 2 deletions components/SideMultiGauge.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,8 +63,8 @@ Item {
// If showing multiple gauges on the right edge, shift them towards the left
- (gaugeRepeater.count === 1 || root.horizontalAlignment === Qt.AlignLeft ? 0 : (strokeWidth * gaugeRepeater.count))
valueType: root.valueType
progressColor: feedingToGrid ? Theme.color_green : Theme.statusColorValue(valueStatus)
remainderColor: feedingToGrid ? Theme.color_darkGreen : Theme.statusColorValue(valueStatus, true)
progressColor: Theme.color_darkOk,feedingToGrid ? Theme.color_green : Theme.statusColorValue(valueStatus)
remainderColor: Theme.color_darkOk,feedingToGrid ? Theme.color_darkGreen : Theme.statusColorValue(valueStatus, true)
direction: root.direction
startAngle: root.startAngle
endAngle: root.endAngle
Expand Down
4 changes: 2 additions & 2 deletions components/ThreePhaseBarGauge.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,8 +55,8 @@ Flow {
anchors.right: parent.right
width: parent.width - (phaseLabel.visible ? phaseLabel.width : 0)
height: parent.height
foregroundColor: feedingToGrid ? Theme.color_green : Theme.statusColorValue(valueStatus)
backgroundColor: feedingToGrid ? Theme.color_darkGreen : Theme.statusColorValue(valueStatus, true)
foregroundColor: Theme.color_darkOk,feedingToGrid ? Theme.color_green : Theme.statusColorValue(valueStatus)
backgroundColor: Theme.color_darkOk,feedingToGrid ? Theme.color_darkGreen : Theme.statusColorValue(valueStatus, true)
valueType: root.valueType
value: valueRange.valueAsRatio
orientation: root.orientation
Expand Down
2 changes: 2 additions & 0 deletions components/ThreePhaseDisplay.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,8 @@ Flow {
const valueStatus = root.phaseModelProperty
? Gauges.getValueStatus(valueRange.valueAsRatio * 100, root.valueType)
: Theme.Ok

Theme.color_darkOk // force capture since Theme.statusColorValue() doesn't.
return (valueStatus === Theme.Critical || valueStatus === Theme.Warning)
? Theme.statusColorValue(valueStatus)
: Theme.color_font_primary
Expand Down
2 changes: 1 addition & 1 deletion components/widgets/BatteryWidget.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -150,7 +150,6 @@ OverviewWidget {
font.pixelSize: Theme.font_size_body1
width: parent.width
elide: Text.ElideRight
color: Theme.color_font_secondary
}
Label {
text: Global.batteries.timeToGoText(Global.batteries.system, VenusOS.Battery_TimeToGo_ShortFormat)
Expand All @@ -174,6 +173,7 @@ OverviewWidget {
value: batteryData.voltage
unit: VenusOS.Units_Volt_DC
font.pixelSize: root._useSmallFont ? Theme.font_size_body1 : Theme.font_size_body2
unitColor: Theme.color_font_secondary
alignment: Qt.AlignLeft
},

Expand Down
13 changes: 2 additions & 11 deletions themes/color/ColorDesign.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,12 @@
{
"color_blue": "#387DC5",
"color_lightBlue": "#73A2D3",
"color_dimBlue": "#B3387DC5",
"color_darkBlue": "#4D387DC5",
"color_orange": "#F0962E",
"color_darkOrange": "#4DF0962E",
"color_green": "#72B84C",
"color_dimGreen": "#B372B84C",
"color_darkGreen": "#4D72B84C",
"color_red": "#F35C58",
"color_dimRed": "#B3F35C58",
"color_darkRed": "#4DF35C58",
"color_black": "#000000",
"color_gray1": "#141414",
"color_gray2": "#272622",
"color_dimGray2": "#99272622",
"color_darkGray2": "#4D272622",
"color_gray3": "#504F4B",
"color_gray4": "#64635F",
"color_gray5": "#969591",
Expand All @@ -24,8 +15,8 @@
"color_gray8": "#F0EFEB",
"color_gray9": "#FAF9F5",
"color_white": "#FFFFFF",
"color_dimWhite": "#99FFFFFF",
"color_darkWhite": "#4DFFFFFF",
"color_dimWhite": "#969591",
"color_darkWhite": "#64635F",
"color_fuel": "#B0C62B",
"color_oil": "#A3755C",
"color_gasoline": "#DFBC3E",
Expand Down
13 changes: 11 additions & 2 deletions themes/color/Dark.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,17 @@
"color_humidity2": "#405A25",
"color_humidity3": "#784B17",

"color_dimBlue": "#15304A",
"color_dimOrange": "#593912",
"color_dimRed": "#592220",
"color_dimGreen": "#508135",
"color_dimGray": "#7B7A76",
"color_darkBlue": "#11263B",
"color_darkOrange": "#482D0E",
"color_darkRed": "#491C1B",
"color_darkGreen": "#223817",
"color_darkGray": "#504F4B",

"color_ok": "color_blue",
"color_darkOk": "color_darkBlue",
"color_warning": "color_orange",
Expand Down Expand Up @@ -89,8 +100,6 @@
"color_overviewPage_widget_sideGauge_highlight": "color_ok",
"color_overviewPage_widget_solar_graph_bar": "color_ok",
"color_overviewPage_widget_battery_background": "color_blue",
"color_overviewPage_widget_battery_bubble_background": "#7394bd",
"color_overviewPage_widget_battery_bubble_border": "#FFFFFF",

"color_briefPage_background": "color_black",
"color_briefPage_battery_value_text_color": "color_gray5",
Expand Down
19 changes: 14 additions & 5 deletions themes/color/Light.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,17 @@
"color_humidity2": "#97B974",
"color_humidity3": "#DBB78E",

"color_dimBlue": "#BBCEE0",
"color_dimOrange": "#F0D5B4",
"color_dimRed": "#F0C3BF",
"color_dimGreen": "#9BCB7E",
"color_dimGray": "#7B7A76",
"color_darkBlue": "#C0D4E6",
"color_darkOrange": "#F7DBB9",
"color_darkRed": "#F8CAC6",
"color_darkGreen": "#D1E6C2",
"color_darkGray": "#504F4B",

"color_ok": "color_blue",
"color_darkOk": "color_darkBlue",
"color_warning": "color_orange",
Expand All @@ -15,7 +26,7 @@
"color_critical_background": "#F58B87",

"color_font_primary": "color_gray2",
"color_font_secondary": "color_dimGray2",
"color_font_secondary": "color_dimGray",
"color_font_disabled": "color_gray4",

"color_background_primary": "color_white",
Expand Down Expand Up @@ -89,14 +100,12 @@
"color_overviewPage_widget_sideGauge_highlight": "color_ok",
"color_overviewPage_widget_solar_graph_bar": "color_ok",
"color_overviewPage_widget_battery_background": "color_lightBlue",
"color_overviewPage_widget_battery_bubble_background": "#7394bd",
"color_overviewPage_widget_battery_bubble_border": "#FFFFFF",

"color_briefPage_background": "color_gray9",
"color_briefPage_battery_value_text_color": "color_gray2",
"color_briefPage_battery_unit_text_color": "color_gray3",
"color_briefPage_circularGauge_shine": "#BBFFFFFF",
"color_briefPage_sidePanel_forecast_separator": "color_darkGray2",
"color_briefPage_sidePanel_forecast_separator": "color_darkWhite",
"color_briefPage_sidePanel_loadGraph_dotColor": "color_gray3",

"color_levelsPage_tankIcon": "color_gray2",
Expand All @@ -119,6 +128,6 @@

"color_notificationsPage_text_color": "color_gray4",

"color_settings_gsmModem_signalStrength_inactive": "color_darkGray2",
"color_settings_gsmModem_signalStrength_inactive": "color_darkWhite",
"color_settings_gsmModem_signalStrength_active": "color_gray2"
}
39 changes: 20 additions & 19 deletions tools/themeparser.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,32 +32,33 @@
class ThemeSingleton : public Theme
{
Q_OBJECT
QML_NAMED_ELEMENT(Theme)
QML_SINGLETON
Q_OBJECT
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

tabs look wonky

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The code which forms part of the output needs tabs, whereas the python code needs spaces. Hence the discrepancy. What is in the PR is correct, I believe.

QML_NAMED_ELEMENT(Theme)
QML_SINGLETON
// property declarations
// property declarations
%s
public:
ThemeSingleton(QObject *parent = nullptr)
: Theme(parent)
{
}
ThemeSingleton(QObject *parent = nullptr)
: Theme(parent)
{
}
// property accessors
// property accessors
%s
Q_INVOKABLE QColor statusColorValue(StatusLevel level, bool darkColor = false) const
{
const QVariant c = (level == Ok && darkColor) ? color_darkOk()
: (level == Ok) ? color_ok()
: (level == Warning && darkColor) ? color_darkWarning()
: (level == Warning) ? color_warning()
: (level == Critical && darkColor) ? color_darkCritical()
: color_critical();
return c.typeId() == QMetaType::QColor ? c.value<QColor>() : QColor(c.value<QString>());
}
// NOTE: won't capture, so client needs to manually capture the color change signal.
Q_INVOKABLE QColor statusColorValue(StatusLevel level, bool darkColor = false) const
{
const QVariant c = (level == Ok && darkColor) ? color_darkOk()
: (level == Ok) ? color_ok()
: (level == Warning && darkColor) ? color_darkWarning()
: (level == Warning) ? color_warning()
: (level == Critical && darkColor) ? color_darkCritical()
: color_critical();
return c.typeId() == QMetaType::QColor ? c.value<QColor>() : QColor(c.value<QString>());
}
};
Expand Down