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

Jump to bottom

QML: Redesign demo skin #3928

Merged
merged 15 commits into from
Jun 1, 2021
Merged

QML: Redesign demo skin #3928

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
aba26be
QML: Redesign demo skin
Holzhaus May 30, 2021
edf2cf6
QML: Fix Spinny indicator override using contentItem
Holzhaus May 30, 2021
06a068b
skins/QMLDemo: Add support for Hotcue Buttons
Holzhaus May 30, 2021
daa577e
skins/QMLDemo: Clean up deck info bars and add FX unit assign buttons
Holzhaus May 30, 2021
7816e3e
skins/QMLDemo: Add IDs to effect unit placeholders
Holzhaus May 31, 2021
ff5da67
skins/QMLDemo: Improve Deck time JS code
Holzhaus May 31, 2021
794da58
QML: Make re-usable QML controls Qt 5.12 compatible
Holzhaus May 31, 2021
f9dba93
skins/QMLDemo: Use Qt 5.12 compatible QtQuick.Shapes import in EqColumn
Holzhaus May 31, 2021
cc4c0f0
QML: Remove "required" keyword from demo skin for Qt 5.12 compatibility
Holzhaus May 31, 2021
b2d7ce5
QML: Remove useless ToggleButton QML control
Holzhaus May 31, 2021
aa56a7c
skin/QMLDemo: Fix clipping of buttons with low width
Holzhaus May 31, 2021
1528ede
skins/QMLDemo: Add EQ kill buttons
Holzhaus May 31, 2021
d9f0bd5
skins/QMLDemo: Reduce duplication in EqKnob
Holzhaus Jun 1, 2021
c6a0d7d
QML: Replace transparent Rectangles with Items in Knob component
Holzhaus Jun 1, 2021
e6c13e3
QML: Fix Knob component parameter clamping
Holzhaus Jun 1, 2021
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
128 changes: 128 additions & 0 deletions res/skins/QMLDemo/Button.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,128 @@
import "." as Skin
import QtGraphicalEffects 1.12
import QtQml 2.12
import QtQuick 2.12
import QtQuick.Controls 2.12
import "Theme"

AbstractButton {
id: root

property color normalColor: Theme.buttonNormalColor
required property color activeColor
Copy link
Member

Choose a reason for hiding this comment

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

why is the normal color part of the theme but not the active color?

Copy link
Member Author

Choose a reason for hiding this comment

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

Because buttons may have different active colors depending on context. E. g. PFL (Mixer) is blue, but CUE (Deck) is green.

Copy link
Member

@Swiftb0y Swiftb0y May 31, 2021 •
edited
Loading

Choose a reason for hiding this comment

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

Right, but if they just want to use a default, the have to specify that explicitly instead of the button falling back on the Theme automatically

Copy link
Member Author

@Holzhaus Holzhaus May 31, 2021 •
edited
Loading

Choose a reason for hiding this comment

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

Correct. There is no sensible default, so making it required to specify ensures I don't forget it and prevents that the skin looks bad.

Copy link
Member

Choose a reason for hiding this comment

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

Is there really no sensible default for the active color of a button? Couldn't the active color just default to Qt.lighter(normalColor, 1.5)?

Copy link
Member

Choose a reason for hiding this comment

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

Or just have a active default color in the Theme?

Copy link
Member Author

@Holzhaus Holzhaus May 31, 2021 •
edited
Loading

Choose a reason for hiding this comment

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

I mean this is just a non-reusable skin component.

Also, In c++ code we usually avoid default arguments when not needed, so I don't really understand why we should add it here.

Can you elaborate why this is needed?

Copy link
Member

Choose a reason for hiding this comment

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

I agree, I'm sorry I'm nagging so much about the polish of a prototype.

I'd say its needed because it removed redundancy in the skin (technically, not sure if this is actually an annoyance, I didn't write the code ;) )

What does @ronso0 think about this?

Copy link
Member Author

Choose a reason for hiding this comment

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

No problem, I'm not annoyed :D I just wondered why you think it's necessary/helpful.

property color pressedColor: activeColor
property bool highlight: false

implicitWidth: 52
implicitHeight: 26
states: [
State {
name: "pressed"
when: root.pressed

PropertyChanges {
target: backgroundImage
source: "images/button_pressed.svg"
}

PropertyChanges {
target: label
color: root.pressedColor
}

PropertyChanges {
target: labelGlow
visible: true
}

},
State {
name: "active"
when: (root.highlight || root.checked) && !root.pressed

PropertyChanges {
target: backgroundImage
source: "images/button.svg"
}

PropertyChanges {
target: label
color: root.activeColor
}

PropertyChanges {
target: labelGlow
visible: true
}

},
State {
name: "inactive"
when: !root.checked && !root.highlight && !root.pressed

PropertyChanges {
target: backgroundImage
source: "images/button.svg"
}

PropertyChanges {
target: label
color: root.normalColor
}

PropertyChanges {
target: labelGlow
visible: false
}

}
]

background: BorderImage {
id: backgroundImage

anchors.fill: parent
horizontalTileMode: BorderImage.Stretch
verticalTileMode: BorderImage.Stretch
source: "images/button.svg"

border {
top: 10
left: 20
right: 20
bottom: 10
}

}

contentItem: Item {
anchors.fill: parent

Glow {
id: labelGlow

anchors.fill: parent
radius: 5
spread: 0.1
samples: 1 + radius * 2
color: label.color
source: label
}

Label {
id: label

anchors.fill: parent
text: root.text
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
font.family: Theme.fontFamily
font.capitalization: Font.AllUppercase
font.bold: true
font.pixelSize: Theme.buttonFontPixelSize
color: root.normalColor
}

}

}
16 changes: 16 additions & 0 deletions res/skins/QMLDemo/ControlButton.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import "." as Skin
import Mixxx 0.1 as Mixxx

Skin.Button {
id: root

required property string group
required property string key

Mixxx.ControlProxy {
group: root.group
key: root.key
value: root.checked || root.down
}

}
45 changes: 45 additions & 0 deletions res/skins/QMLDemo/CrossfaderRow.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
import "." as Skin
import QtQuick 2.12
import QtQuick.Controls 2.12
import "Theme"

Item {
id: root

required property real crossfaderWidth

implicitHeight: crossfaderSlider.width

Item {
anchors.top: parent.top
anchors.left: parent.left
anchors.bottom: parent.bottom
}

Skin.Slider {
id: crossfaderSlider

anchors.centerIn: parent
height: root.crossfaderWidth
group: "[Master]"
key: "crossfader"
barColor: Theme.crossfaderBarColor
barStart: 0.5
fg: "images/slider_handle_crossfader.svg"
bg: "images/slider_crossfader.svg"

transform: Rotation {
origin.x: crossfaderSlider.width / 2
origin.y: crossfaderSlider.height / 2
angle: 90
}

}

Item {
anchors.top: parent.top
anchors.right: parent.right
anchors.bottom: parent.bottom
}
Holzhaus marked this conversation as resolved.
Show resolved Hide resolved

}
Loading