refactor: icons follow builders pattern
Also add icon size() shorthand And builder scale()
This commit is contained in:
parent
6573a62fc5
commit
c4539d6960
30 changed files with 81 additions and 42 deletions
|
|
@ -16,7 +16,7 @@ ColumnLayout {
|
|||
Layout.alignment: Qt.AlignHCenter
|
||||
animate: true
|
||||
text: root.icon
|
||||
fontStyle: Tokens.font.icon.builder.size(Tokens.font.icon.extraLarge.pointSize * 3).weight(Font.Bold).build()
|
||||
fontStyle: Tokens.font.icon.builders.extraLarge.scale(3).weight(Font.Bold).build()
|
||||
}
|
||||
|
||||
StyledText {
|
||||
|
|
|
|||
|
|
@ -7,5 +7,5 @@ StyledText {
|
|||
property int grade: Colours.light ? 0 : -25
|
||||
property font fontStyle: Tokens.font.icon.small
|
||||
|
||||
font: Tokens.font.icon.builder.size(fontStyle.pointSize).weight(fontStyle.weight).fill(fill.toFixed(1)).grade(grade).build()
|
||||
font: Tokens.font.icon.size(fontStyle.pointSize).weight(fontStyle.weight).fill(fill.toFixed(1)).grade(grade).build()
|
||||
}
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@ StyledRect {
|
|||
fill: root.toggled ? 1 : 0
|
||||
text: root.icon
|
||||
color: root.toggled ? Colours.palette[`m3on${root.accent}`] : Colours.palette[`m3on${root.accent}Container`]
|
||||
fontStyle: Tokens.font.icon.builder.size(root.iconSize).build()
|
||||
fontStyle: Tokens.font.icon.size(root.iconSize).build()
|
||||
|
||||
Behavior on fill {
|
||||
Anim {}
|
||||
|
|
|
|||
|
|
@ -59,7 +59,7 @@ Item {
|
|||
Layout.alignment: Qt.AlignHCenter
|
||||
text: "scan_delete"
|
||||
color: Colours.palette.m3outline
|
||||
fontStyle: Tokens.font.icon.builder.size(Tokens.font.icon.extraLarge.pointSize * 2).weight(Font.Medium).build()
|
||||
fontStyle: Tokens.font.icon.builders.extraLarge.scale(2).weight(Font.Medium).build()
|
||||
}
|
||||
|
||||
StyledText {
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@ Item {
|
|||
MaterialIcon {
|
||||
text: "sentiment_stressed"
|
||||
color: Colours.palette.m3onSurfaceVariant
|
||||
fontStyle: Tokens.font.icon.builder.size(Tokens.font.icon.extraLarge.pointSize * 5).build()
|
||||
fontStyle: Tokens.font.icon.builders.extraLarge.scale(5).build()
|
||||
}
|
||||
|
||||
Column {
|
||||
|
|
|
|||
|
|
@ -29,6 +29,6 @@ Item {
|
|||
|
||||
text: "power_settings_new"
|
||||
color: Colours.palette.m3error
|
||||
fontStyle: Tokens.font.icon.builder.size(Tokens.font.icon.medium.pointSize).weight(Font.Bold).build()
|
||||
fontStyle: Tokens.font.icon.builders.small.weight(Font.Bold).build()
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -177,7 +177,7 @@ ColumnLayout {
|
|||
MaterialIcon {
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
text: "lock"
|
||||
fontStyle: Tokens.font.icon.builder.size(Tokens.font.icon.extraLarge.pointSize * 2).build()
|
||||
fontStyle: Tokens.font.icon.builders.extraLarge.scale(2).build()
|
||||
}
|
||||
|
||||
StyledText {
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ Item {
|
|||
MaterialIcon {
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
text: root.icon
|
||||
fontStyle: Tokens.font.icon.builder.size(84).weight(Font.Bold).build()
|
||||
fontStyle: Tokens.font.icon.size(84).weight(Font.Bold).build()
|
||||
}
|
||||
|
||||
StyledText {
|
||||
|
|
|
|||
|
|
@ -149,7 +149,7 @@ Item {
|
|||
MaterialIcon {
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
text: "lock"
|
||||
fontStyle: Tokens.font.icon.builder.size(Tokens.font.icon.extraLarge.pointSize * 2).build()
|
||||
fontStyle: Tokens.font.icon.builders.extraLarge.scale(2).build()
|
||||
}
|
||||
|
||||
StyledText {
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@ StyledRect {
|
|||
text: "lyrics"
|
||||
fill: 1
|
||||
color: Colours.palette.m3primary
|
||||
fontStyle: Tokens.font.icon.builder.size(Tokens.spacing.large).build()
|
||||
fontStyle: Tokens.font.icon.size(Tokens.spacing.large).build()
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
|
|
|
|||
|
|
@ -173,7 +173,7 @@ Item {
|
|||
grade: 200
|
||||
text: "art_track"
|
||||
color: Colours.palette.m3onSurfaceVariant
|
||||
fontStyle: Tokens.font.icon.builder.size((parent.width * 0.4) || 1).build()
|
||||
fontStyle: Tokens.font.icon.size((parent.width * 0.4) || 1).build()
|
||||
}
|
||||
|
||||
Image {
|
||||
|
|
@ -267,7 +267,7 @@ Item {
|
|||
PlayerControl {
|
||||
type: IconButton.Text
|
||||
icon: Players.active?.shuffle ? "shuffle_on" : "shuffle"
|
||||
font: Tokens.font.icon.builder.size(Math.round(Tokens.font.icon.large.pointSize)).build()
|
||||
font: Tokens.font.icon.size(Math.round(Tokens.font.icon.large.pointSize)).build()
|
||||
disabled: !Players.active?.shuffleSupported
|
||||
onClicked: Players.active.shuffle = !Players.active?.shuffle
|
||||
}
|
||||
|
|
@ -275,7 +275,7 @@ Item {
|
|||
PlayerControl {
|
||||
type: IconButton.Text
|
||||
icon: "skip_previous"
|
||||
font: Tokens.font.icon.builder.size(Math.round(Tokens.font.icon.large.pointSize * 1.5)).build()
|
||||
font: Tokens.font.icon.builders.large.scale(1.5).build()
|
||||
disabled: !Players.active?.canGoPrevious
|
||||
onClicked: Players.active?.previous()
|
||||
}
|
||||
|
|
@ -286,7 +286,7 @@ Item {
|
|||
toggle: true
|
||||
padding: Tokens.padding.extraSmall / 2
|
||||
checked: Players.active?.isPlaying ?? false
|
||||
font: Tokens.font.icon.builder.size(Math.round(Tokens.font.icon.large.pointSize * 1.5)).build()
|
||||
font: Tokens.font.icon.builders.large.scale(1.5).build()
|
||||
disabled: !Players.active?.canTogglePlaying
|
||||
onClicked: Players.active?.togglePlaying()
|
||||
}
|
||||
|
|
@ -294,7 +294,7 @@ Item {
|
|||
PlayerControl {
|
||||
type: IconButton.Text
|
||||
icon: "skip_next"
|
||||
font: Tokens.font.icon.builder.size(Math.round(Tokens.font.icon.large.pointSize * 1.5)).build()
|
||||
font: Tokens.font.icon.builders.large.scale(1.5).build()
|
||||
disabled: !Players.active?.canGoNext
|
||||
onClicked: Players.active?.next()
|
||||
}
|
||||
|
|
@ -302,7 +302,7 @@ Item {
|
|||
PlayerControl {
|
||||
type: IconButton.Text
|
||||
icon: "lyrics"
|
||||
font: Tokens.font.icon.builder.size(Math.round(Tokens.font.icon.large.pointSize)).build()
|
||||
font: Tokens.font.icon.size(Math.round(Tokens.font.icon.large.pointSize)).build()
|
||||
onClicked: root.lyricMenuOpen = !root.lyricMenuOpen
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@ Item {
|
|||
MaterialIcon {
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
text: "tune"
|
||||
fontStyle: Tokens.font.icon.builder.size(Tokens.font.icon.extraLarge.pointSize * 2).build()
|
||||
fontStyle: Tokens.font.icon.builders.extraLarge.scale(2).build()
|
||||
color: Colours.palette.m3onSurfaceVariant
|
||||
}
|
||||
|
||||
|
|
@ -287,7 +287,7 @@ Item {
|
|||
text: parent.icon
|
||||
fill: 1
|
||||
color: parent.accentColor
|
||||
fontStyle: Tokens.font.icon.builder.size(Tokens.spacing.large).build()
|
||||
fontStyle: Tokens.font.icon.size(Tokens.spacing.large).build()
|
||||
}
|
||||
|
||||
StyledText {
|
||||
|
|
|
|||
|
|
@ -79,7 +79,7 @@ Item {
|
|||
MaterialIcon {
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
text: Weather.icon
|
||||
fontStyle: Tokens.font.icon.builder.size(Tokens.font.icon.extraLarge.pointSize * 3).build()
|
||||
fontStyle: Tokens.font.icon.builders.extraLarge.scale(3).build()
|
||||
color: Colours.palette.m3secondary
|
||||
animate: true
|
||||
}
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@ CustomMouseArea {
|
|||
anchors.centerIn: parent
|
||||
text: "chevron_left"
|
||||
color: Colours.palette.m3tertiary
|
||||
fontStyle: Tokens.font.icon.builder.size(Tokens.font.icon.medium.pointSize).weight(Font.Bold).build()
|
||||
fontStyle: Tokens.font.icon.size(Tokens.font.icon.medium.pointSize).weight(Font.Bold).build()
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -118,7 +118,7 @@ CustomMouseArea {
|
|||
anchors.centerIn: parent
|
||||
text: "chevron_right"
|
||||
color: Colours.palette.m3tertiary
|
||||
fontStyle: Tokens.font.icon.builder.size(Tokens.font.icon.medium.pointSize).weight(Font.Bold).build()
|
||||
fontStyle: Tokens.font.icon.size(Tokens.font.icon.medium.pointSize).weight(Font.Bold).build()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -98,7 +98,7 @@ Item {
|
|||
grade: 200
|
||||
text: "art_track"
|
||||
color: Colours.palette.m3onSurfaceVariant
|
||||
fontStyle: Tokens.font.icon.builder.size((parent.width * 0.4) || 1).build()
|
||||
fontStyle: Tokens.font.icon.size((parent.width * 0.4) || 1).build()
|
||||
}
|
||||
|
||||
Image {
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ Item {
|
|||
animate: true
|
||||
text: Weather.icon
|
||||
color: Colours.palette.m3secondary
|
||||
fontStyle: Tokens.font.icon.builder.size(Tokens.font.icon.extraLarge.pointSize * 2).build()
|
||||
fontStyle: Tokens.font.icon.builders.extraLarge.scale(2).build()
|
||||
}
|
||||
|
||||
Column {
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ Row {
|
|||
text: "person"
|
||||
fill: 1
|
||||
grade: 200
|
||||
fontStyle: Tokens.font.icon.builder.size(Math.floor(info.implicitHeight / 2) || 1).build()
|
||||
fontStyle: Tokens.font.icon.size(Math.floor(info.implicitHeight / 2) || 1).build()
|
||||
visible: pfp.status !== Image.Ready
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -58,7 +58,7 @@ Item {
|
|||
anchors.centerIn: parent
|
||||
text: "image"
|
||||
color: Colours.tPalette.m3outline
|
||||
fontStyle: Tokens.font.icon.builder.size(Tokens.font.icon.extraLarge.pointSize * 2).weight(Font.DemiBold).build()
|
||||
fontStyle: Tokens.font.icon.builders.extraLarge.scale(2).weight(Font.DemiBold).build()
|
||||
}
|
||||
|
||||
CachingImage {
|
||||
|
|
|
|||
|
|
@ -87,7 +87,7 @@ ColumnLayout {
|
|||
|
||||
text: "person"
|
||||
color: Colours.palette.m3onSurfaceVariant
|
||||
fontStyle: Tokens.font.icon.builder.size(Math.floor(root.centerWidth / 4)).build()
|
||||
fontStyle: Tokens.font.icon.size(Math.floor(root.centerWidth / 4)).build()
|
||||
visible: pfp.status !== Image.Ready
|
||||
}
|
||||
|
||||
|
|
@ -194,7 +194,7 @@ ColumnLayout {
|
|||
anchors.centerIn: parent
|
||||
text: "arrow_forward"
|
||||
color: root.lock.pam.buffer ? Colours.palette.m3onPrimary : Colours.palette.m3onSurface
|
||||
fontStyle: Tokens.font.icon.builder.size(Tokens.font.icon.large.pointSize).weight(Font.Medium).build()
|
||||
fontStyle: Tokens.font.icon.size(Tokens.font.icon.large.pointSize).weight(Font.Medium).build()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -207,7 +207,7 @@ WlSessionLockSurface {
|
|||
|
||||
anchors.centerIn: parent
|
||||
text: "lock"
|
||||
fontStyle: Tokens.font.icon.builder.size(Tokens.font.icon.extraLarge.pointSize * 4).weight(Font.Bold).build()
|
||||
fontStyle: Tokens.font.icon.builders.extraLarge.scale(4).weight(Font.Bold).build()
|
||||
rotation: 180
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -80,7 +80,7 @@ GridLayout {
|
|||
anchors.centerIn: parent
|
||||
text: res.icon
|
||||
color: res.colour
|
||||
fontStyle: Tokens.font.icon.builder.size((circ.arcRadius * 0.7) || 1).weight(Font.DemiBold).build()
|
||||
fontStyle: Tokens.font.icon.size((circ.arcRadius * 0.7) || 1).weight(Font.DemiBold).build()
|
||||
}
|
||||
|
||||
Behavior on value {
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@ ColumnLayout {
|
|||
animate: true
|
||||
text: Weather.icon
|
||||
color: Colours.palette.m3secondary
|
||||
fontStyle: Tokens.font.icon.builder.size(Tokens.font.icon.extraLarge.pointSize * 2.5).build()
|
||||
fontStyle: Tokens.font.icon.builders.extraLarge.scale(2.5).build()
|
||||
}
|
||||
|
||||
ColumnLayout {
|
||||
|
|
@ -150,7 +150,7 @@ ColumnLayout {
|
|||
MaterialIcon {
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
text: forecastHour.modelData?.icon ?? "cloud_alert"
|
||||
fontStyle: Tokens.font.icon.builder.size(Tokens.font.icon.extraLarge.pointSize * 1.5).weight(Font.Medium).build()
|
||||
fontStyle: Tokens.font.icon.builders.extraLarge.scale(1.5).weight(Font.Medium).build()
|
||||
}
|
||||
|
||||
StyledText {
|
||||
|
|
|
|||
|
|
@ -125,7 +125,7 @@ Column {
|
|||
|
||||
text: button.icon
|
||||
color: button.activeFocus ? Colours.palette.m3onSecondaryContainer : Colours.palette.m3onSurface
|
||||
fontStyle: Tokens.font.icon.builder.size(Tokens.font.icon.extraLarge.pointSize).weight(Font.Medium).build()
|
||||
fontStyle: Tokens.font.icon.size(Tokens.font.icon.extraLarge.pointSize).weight(Font.Medium).build()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -183,7 +183,7 @@ Item {
|
|||
icon: "clear_all"
|
||||
radius: Tokens.rounding.large
|
||||
padding: Tokens.padding.medium
|
||||
font: Tokens.font.icon.builder.size(Math.round(Tokens.font.icon.large.pointSize * 1.2)).build()
|
||||
font: Tokens.font.icon.builders.large.scale(1.2).build()
|
||||
onClicked: clearTimer.start()
|
||||
|
||||
Elevation {
|
||||
|
|
|
|||
|
|
@ -84,7 +84,7 @@ StyledRect {
|
|||
return Colours.palette.m3onError;
|
||||
return Colours.palette.m3onSurfaceVariant;
|
||||
}
|
||||
fontStyle: Tokens.font.icon.builder.size(Math.round(Tokens.font.icon.large.pointSize * 1.2)).build()
|
||||
fontStyle: Tokens.font.icon.builders.large.scale(1.2).build()
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@ Item {
|
|||
Layout.alignment: Qt.AlignHCenter
|
||||
text: "web_asset_off"
|
||||
color: Colours.palette.m3outline
|
||||
fontStyle: Tokens.font.icon.builder.size(Tokens.font.icon.extraLarge.pointSize * 3).build()
|
||||
fontStyle: Tokens.font.icon.builders.extraLarge.scale(3).build()
|
||||
}
|
||||
|
||||
StyledText {
|
||||
|
|
|
|||
|
|
@ -79,6 +79,14 @@ FontBuilders* FontStyle::builders() const {
|
|||
|
||||
// IconFontStyle
|
||||
|
||||
IconFontStyle::IconFontStyle(QObject* parent)
|
||||
: FontStyleBase(parent)
|
||||
, m_builders(new IconFontBuilders(this, this)) {}
|
||||
|
||||
FontBuilder IconFontStyle::size(int pointSize) {
|
||||
return FontBuilder(m_small).size(pointSize);
|
||||
}
|
||||
|
||||
void IconFontStyle::bind(IconFontStyleConfig* cfg) {
|
||||
if (m_cfg == cfg)
|
||||
return;
|
||||
|
|
@ -99,8 +107,8 @@ QFont IconFontStyle::extraLarge() const {
|
|||
return m_extraLarge;
|
||||
}
|
||||
|
||||
FontBuilder IconFontStyle::builder() const {
|
||||
return FontBuilder(m_large);
|
||||
IconFontBuilders* IconFontStyle::builders() const {
|
||||
return m_builders;
|
||||
}
|
||||
|
||||
void IconFontStyle::rebuild() {
|
||||
|
|
@ -138,6 +146,15 @@ FontBuilder FontBuilders::small() const {
|
|||
return FontBuilder(m_style->small());
|
||||
}
|
||||
|
||||
// IconFontBuilders
|
||||
|
||||
IconFontBuilders::IconFontBuilders(const IconFontStyle* style, QObject* parent)
|
||||
: FontBuilders(style, parent) {}
|
||||
|
||||
FontBuilder IconFontBuilders::extraLarge() const {
|
||||
return FontBuilder(static_cast<const IconFontStyle*>(m_style)->extraLarge());
|
||||
}
|
||||
|
||||
// FontTokens
|
||||
|
||||
FontTokens::FontTokens(QObject* parent)
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ class FontConfig;
|
|||
class FontStyleConfig;
|
||||
class IconFontStyleConfig;
|
||||
class FontStyleBase;
|
||||
class IconFontStyle;
|
||||
|
||||
class FontBuilders : public QObject {
|
||||
Q_OBJECT
|
||||
|
|
@ -30,10 +31,22 @@ public:
|
|||
signals:
|
||||
void buildersChanged();
|
||||
|
||||
private:
|
||||
protected:
|
||||
const FontStyleBase* m_style;
|
||||
};
|
||||
|
||||
class IconFontBuilders : public FontBuilders {
|
||||
Q_OBJECT
|
||||
QML_ANONYMOUS
|
||||
|
||||
Q_PROPERTY(caelestia::config::FontBuilder extraLarge READ extraLarge NOTIFY buildersChanged FINAL)
|
||||
|
||||
public:
|
||||
explicit IconFontBuilders(const IconFontStyle* style, QObject* parent = nullptr);
|
||||
|
||||
[[nodiscard]] FontBuilder extraLarge() const;
|
||||
};
|
||||
|
||||
class FontStyleBase : public QObject {
|
||||
Q_OBJECT
|
||||
|
||||
|
|
@ -85,22 +98,24 @@ class IconFontStyle : public FontStyleBase {
|
|||
QML_ANONYMOUS
|
||||
|
||||
Q_PROPERTY(QFont extraLarge READ extraLarge NOTIFY fontsChanged FINAL)
|
||||
Q_PROPERTY(caelestia::config::FontBuilder builder READ builder NOTIFY fontsChanged FINAL)
|
||||
Q_PROPERTY(caelestia::config::IconFontBuilders* builders READ builders CONSTANT FINAL)
|
||||
|
||||
public:
|
||||
explicit IconFontStyle(QObject* parent = nullptr)
|
||||
: FontStyleBase(parent) {}
|
||||
explicit IconFontStyle(QObject* parent = nullptr);
|
||||
|
||||
Q_INVOKABLE FontBuilder size(int pointSize);
|
||||
|
||||
void bind(IconFontStyleConfig* cfg);
|
||||
|
||||
[[nodiscard]] QFont extraLarge() const;
|
||||
[[nodiscard]] FontBuilder builder() const;
|
||||
[[nodiscard]] IconFontBuilders* builders() const;
|
||||
|
||||
protected:
|
||||
void rebuild() override;
|
||||
|
||||
private:
|
||||
QFont m_extraLarge;
|
||||
IconFontBuilders* m_builders;
|
||||
};
|
||||
|
||||
class FontTokens : public QObject {
|
||||
|
|
|
|||
|
|
@ -71,4 +71,8 @@ FontBuilder FontBuilder::width(float value) {
|
|||
return vaxis("wdth", value);
|
||||
}
|
||||
|
||||
FontBuilder FontBuilder::scale(qreal factor) {
|
||||
return size(static_cast<int>(m_font.pointSize() * factor));
|
||||
}
|
||||
|
||||
} // namespace caelestia::config
|
||||
|
|
|
|||
|
|
@ -29,6 +29,9 @@ public:
|
|||
[[nodiscard]] Q_INVOKABLE FontBuilder grade(float value);
|
||||
[[nodiscard]] Q_INVOKABLE FontBuilder width(float value);
|
||||
|
||||
// Operations
|
||||
[[nodiscard]] Q_INVOKABLE FontBuilder scale(qreal factor);
|
||||
|
||||
private:
|
||||
QFont m_font;
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue