FlowyLabs/qt-designsystem
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: format

Browse Source
This commit is contained in:
talksik
2025-04-12 12:47:38 -07:00
parent 4ae90f906b
commit 6e6e81dbb6
10 changed files with 253 additions and 248 deletions
Download Patch File Download Diff File Expand all files Collapse all files
AppCard.qml
+22 -22
View File
@@ -2,27 +2,27 @@ import QtQuick
import QtQuick.Controls.Basic
Item {
id: root
property real padding: 10
// Automatically size based on content plus padding
implicitWidth: contentItem.childrenRect.width + padding * 2
implicitHeight: contentItem.childrenRect.height + padding * 2
// Background
Rectangle {
anchors.fill: parent
color: Theme.card
radius: Theme.radius
}
id: root
// This allows direct assignment of children to AppCard
default property alias content: contentItem.children
// Content container
Item {
id: contentItem
anchors.fill: parent
anchors.margins: padding
}
property real padding: 10
// Automatically size based on content plus padding
implicitWidth: contentItem.childrenRect.width + padding * 2
implicitHeight: contentItem.childrenRect.height + padding * 2
// Background
Rectangle {
anchors.fill: parent
color: Theme.card
radius: Theme.radius
}
// This allows direct assignment of children to AppCard
default property alias content: contentItem.children
// Content container
Item {
id: contentItem
anchors.fill: parent
anchors.margins: padding
}
}
AppComboBox.qml
+85 -88
View File
@@ -5,107 +5,104 @@ import QtQuick.Templates as T
import DesignSystem
T.ComboBox {
id: control
id: control
implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
implicitContentWidth + leftPadding + rightPadding)
implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
implicitContentHeight + topPadding + bottomPadding,
implicitIndicatorHeight + topPadding + bottomPadding)
implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, implicitContentWidth + leftPadding + rightPadding)
implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset, implicitContentHeight + topPadding + bottomPadding, implicitIndicatorHeight + topPadding + bottomPadding)
leftPadding: padding + (!control.mirrored || !indicator || !indicator.visible ? 0 : indicator.width + spacing)
rightPadding: padding + (control.mirrored || !indicator || !indicator.visible ? 0 : indicator.width + spacing)
leftPadding: padding + (!control.mirrored || !indicator || !indicator.visible ? 0 : indicator.width + spacing)
rightPadding: padding + (control.mirrored || !indicator || !indicator.visible ? 0 : indicator.width + spacing)
delegate: ItemDelegate {
required property var model
required property int index
delegate: ItemDelegate {
required property var model
required property int index
width: ListView.view.width
text: model[control.textRole]
palette.text: control.palette.text
palette.highlightedText: control.palette.highlightedText
font.weight: control.currentIndex === index ? Font.DemiBold : Font.Normal
highlighted: control.highlightedIndex === index
hoverEnabled: control.hoverEnabled
}
indicator: ColorImage {
x: control.mirrored ? control.padding : control.width - width - control.padding
y: control.topPadding + (control.availableHeight - height) / 2
color: control.palette.dark
defaultColor: "#353637"
source: "qrc:/qt-project.org/imports/QtQuick/Controls/Basic/images/double-arrow.png"
opacity: enabled ? 1 : 0.3
}
contentItem: T.TextField {
leftPadding: !control.mirrored ? 12 : control.editable && activeFocus ? 3 : 1
rightPadding: control.mirrored ? 12 : control.editable && activeFocus ? 3 : 1
topPadding: 6 - control.padding
bottomPadding: 6 - control.padding
text: control.editable ? control.editText : control.displayText
enabled: control.editable
autoScroll: control.editable
readOnly: control.down
inputMethodHints: control.inputMethodHints
validator: control.validator
selectByMouse: control.selectTextByMouse
color: control.editable ? control.palette.text : control.palette.buttonText
selectionColor: control.palette.highlight
selectedTextColor: control.palette.highlightedText
verticalAlignment: Text.AlignVCenter
background: Rectangle {
visible: control.enabled && control.editable && !control.flat
border.width: parent && parent.activeFocus ? 2 : 1
border.color: parent && parent.activeFocus ? control.palette.highlight : control.palette.button
color: control.palette.base
width: ListView.view.width
text: model[control.textRole]
palette.text: control.palette.text
palette.highlightedText: control.palette.highlightedText
font.weight: control.currentIndex === index ? Font.DemiBold : Font.Normal
highlighted: control.highlightedIndex === index
hoverEnabled: control.hoverEnabled
}
}
background: Rectangle {
implicitWidth: 140
implicitHeight: 40
indicator: ColorImage {
x: control.mirrored ? control.padding : control.width - width - control.padding
y: control.topPadding + (control.availableHeight - height) / 2
color: control.palette.dark
defaultColor: "#353637"
source: "qrc:/qt-project.org/imports/QtQuick/Controls/Basic/images/double-arrow.png"
opacity: enabled ? 1 : 0.3
}
color: control.down ? control.palette.mid : control.palette.button
border.color: control.palette.highlight
border.width: !control.editable && control.visualFocus ? 2 : 0
visible: !control.flat || control.down
contentItem: T.TextField {
leftPadding: !control.mirrored ? 12 : control.editable && activeFocus ? 3 : 1
rightPadding: control.mirrored ? 12 : control.editable && activeFocus ? 3 : 1
topPadding: 6 - control.padding
bottomPadding: 6 - control.padding
radius: Theme.radius
}
text: control.editable ? control.editText : control.displayText
popup: T.Popup {
y: control.height
width: control.width
height: Math.min(contentItem.implicitHeight, control.Window.height - topMargin - bottomMargin)
topMargin: 6
bottomMargin: 6
palette: control.palette
enabled: control.editable
autoScroll: control.editable
readOnly: control.down
inputMethodHints: control.inputMethodHints
validator: control.validator
selectByMouse: control.selectTextByMouse
contentItem: ListView {
clip: true
implicitHeight: contentHeight
model: control.delegateModel
currentIndex: control.highlightedIndex
highlightMoveDuration: 0
color: control.editable ? control.palette.text : control.palette.buttonText
selectionColor: control.palette.highlight
selectedTextColor: control.palette.highlightedText
verticalAlignment: Text.AlignVCenter
Rectangle {
z: 10
width: parent.width
height: parent.height
color: "transparent"
border.color: control.palette.mid
}
T.ScrollIndicator.vertical: ScrollIndicator { }
background: Rectangle {
visible: control.enabled && control.editable && !control.flat
border.width: parent && parent.activeFocus ? 2 : 1
border.color: parent && parent.activeFocus ? control.palette.highlight : control.palette.button
color: control.palette.base
}
}
background: Rectangle {
color: control.palette.window
implicitWidth: 140
implicitHeight: 40
color: control.down ? control.palette.mid : control.palette.button
border.color: control.palette.highlight
border.width: !control.editable && control.visualFocus ? 2 : 0
visible: !control.flat || control.down
radius: Theme.radius
}
popup: T.Popup {
y: control.height
width: control.width
height: Math.min(contentItem.implicitHeight, control.Window.height - topMargin - bottomMargin)
topMargin: 6
bottomMargin: 6
palette: control.palette
contentItem: ListView {
clip: true
implicitHeight: contentHeight
model: control.delegateModel
currentIndex: control.highlightedIndex
highlightMoveDuration: 0
Rectangle {
z: 10
width: parent.width
height: parent.height
color: "transparent"
border.color: control.palette.mid
}
T.ScrollIndicator.vertical: ScrollIndicator {}
}
background: Rectangle {
color: control.palette.window
}
}
}
}
AppIcon.qml
+3 -2
View File
@@ -15,10 +15,11 @@ Item {
Button {
anchors.centerIn: parent
background: Rectangle {
color: "transparent"
color: "transparent"
}
// FIX: onClicked doesn't work
onClicked: if (item.onClicked) item.onClicked()
onClicked: if (item.onClicked)
item.onClicked()
icon.source: item.source
icon.width: item.iconWidth
icon.height: item.iconHeight
AppImage.qml
+30 -30
View File
@@ -2,36 +2,36 @@ import QtQuick
import QtQuick.Effects
Item {
property alias source: sourceItem.source
property alias fillMode: sourceItem.fillMode
property alias radius: rect.radius
property alias source: sourceItem.source
property alias fillMode: sourceItem.fillMode
property alias radius: rect.radius
Image {
id: sourceItem
anchors.fill: parent
visible: false
}
MultiEffect {
source: sourceItem
anchors.fill: sourceItem
maskEnabled: true
maskSource: mask
}
Item {
id: mask
width: sourceItem.width
height: sourceItem.height
layer.enabled: true
visible: false
Rectangle {
id: rect
width: sourceItem.width
height: sourceItem.height
radius: 10
color: "black"
Image {
id: sourceItem
anchors.fill: parent
visible: false
}
MultiEffect {
source: sourceItem
anchors.fill: sourceItem
maskEnabled: true
maskSource: mask
}
Item {
id: mask
width: sourceItem.width
height: sourceItem.height
layer.enabled: true
visible: false
Rectangle {
id: rect
width: sourceItem.width
height: sourceItem.height
radius: 10
color: "black"
}
}
}
}
AppLogo.qml
+2 -2
View File
@@ -1,7 +1,7 @@
import QtQuick
Image {
sourceSize.width: 70
sourceSize.width: 70
source: Theme.darkTheme ? "qrc:/live.flowy/imports/DesignSystem/logos/FLOWY-3.svg" : "qrc:/live.flowy/imports/DesignSystem/logos/FLOWY-5.svg"
source: Theme.darkTheme ? "qrc:/live.flowy/imports/DesignSystem/logos/FLOWY-3.svg" : "qrc:/live.flowy/imports/DesignSystem/logos/FLOWY-5.svg"
}
AppPrimaryButton.qml
+8 -9
View File
@@ -9,14 +9,14 @@ Button {
font.bold: true
contentItem: IconLabel {
spacing: control.spacing
mirrored: control.mirrored
display: control.display
spacing: control.spacing
mirrored: control.mirrored
display: control.display
icon: control.icon
text: control.text
font: control.font
color: "#FFFFFF"
icon: control.icon
text: control.text
font: control.font
color: "#FFFFFF"
}
background: Rectangle {
@@ -24,8 +24,7 @@ Button {
implicitWidth: 100
implicitHeight: 40
visible: !control.flat || control.down || control.checked || control.highlighted
color: Color.blend(control.checked || control.highlighted ? control.palette.dark : control.palette.button,
control.palette.mid, control.down ? 0.5 : 0.0)
color: Color.blend(control.checked || control.highlighted ? control.palette.dark : control.palette.button, control.palette.mid, control.down ? 0.5 : 0.0)
border.color: control.palette.highlight
border.width: control.visualFocus ? 2 : 0
// custom
AppSecondaryButton.qml
+7 -7
View File
@@ -9,14 +9,14 @@ Button {
font.bold: true
contentItem: IconLabel {
spacing: control.spacing
mirrored: control.mirrored
display: control.display
spacing: control.spacing
mirrored: control.mirrored
display: control.display
icon: control.icon
text: control.text
font: control.font
color: Theme.foreground
icon: control.icon
text: control.text
font: control.font
color: Theme.foreground
}
background: Rectangle {
AppTextField.qml
+9 -9
View File
@@ -4,15 +4,15 @@ import QtQuick.Controls.Basic
import QtQuick.Controls.impl
TextField {
id: control
id: control
background: Rectangle {
implicitWidth: 200
implicitHeight: 40
border.width: control.activeFocus ? 2 : 1
color: control.palette.base
border.color: control.activeFocus ? control.palette.highlight : control.palette.mid
background: Rectangle {
implicitWidth: 200
implicitHeight: 40
border.width: control.activeFocus ? 2 : 1
color: control.palette.base
border.color: control.activeFocus ? control.palette.highlight : control.palette.mid
radius: Theme.radius
}
radius: Theme.radius
}
}
Theme.qml
+1 -1
View File
@@ -29,6 +29,6 @@ Item {
}
function toggleTheme() {
darkTheme = !darkTheme
darkTheme = !darkTheme;
}
}
gallery/Main.qml
+86 -78
View File
@@ -14,96 +14,104 @@ AppWindow {
title: qsTr("flowy - gallery")
ColumnLayout {
anchors.left: parent.left
anchors.right: parent.right
anchors.top: parent.top
anchors.margins: 10
anchors.left: parent.left
anchors.right: parent.right
anchors.top: parent.top
anchors.margins: 10
AppLogo {}
AppLogo {}
Row {
spacing: 5
Row {
spacing: 5
AppPrimaryButton {
text: "Toggle theme"
onClicked: {
Theme.toggleTheme()
}
AppPrimaryButton {
text: "Toggle theme"
onClicked: {
Theme.toggleTheme();
}
}
AppSecondaryButton {
text: "Secondary"
}
AppGhostButton {
text: "Ghost"
}
AppIconButton {
source: "qrc:/live.flowy/imports/DesignSystem/app-icons/safari.svg"
useOriginalColor: true
}
AppIconButton {
source: "qrc:/live.flowy/imports/DesignSystem/icons/terminal-duotone.svg"
}
}
AppCard {
Column {
spacing: 10
AppText {
text: "This is a card"
}
AppCaption {
text: "Caption"
}
AppHeadline {
text: "Headline"
}
AppSubHeadline {
text: "SubHeadline"
}
AppLabel {
text: "Label"
}
}
}
Switch {}
AppSecondaryButton {
text: "Secondary"
text: "Open message dialog"
onClicked: {
messageDialog.open();
}
}
AppGhostButton {
text: "Ghost"
}
AppIconButton {
source: "qrc:/live.flowy/imports/DesignSystem/app-icons/safari.svg"
useOriginalColor: true
}
AppIconButton {
source: "qrc:/live.flowy/imports/DesignSystem/icons/terminal-duotone.svg"
}
}
AppCard {
Column {
spacing: 10
AppText {
text: "This is a card"
}
AppCaption {
text: "Caption"
}
AppHeadline {
text: "Headline"
}
AppSubHeadline {
text: "SubHeadline"
}
AppLabel {
text: "Label"
}
MessageDialog {
id: messageDialog
buttons: MessageDialog.Ok
text: "The document has been modified."
}
}
Switch {}
AppSecondaryButton {
text: "Open message dialog"
onClicked: {
messageDialog.open()
AppComboBox {
model: ListModel {
id: model
ListElement {
text: "Banana"
}
ListElement {
text: "Apple"
}
ListElement {
text: "Coconut"
}
}
onAccepted: {
if (find(editText) === -1)
model.append({
text: editText
});
}
}
}
MessageDialog {
id: messageDialog
buttons: MessageDialog.Ok
text: "The document has been modified."
}
AppComboBox {
model: ListModel {
id: model
ListElement { text: "Banana" }
ListElement { text: "Apple" }
ListElement { text: "Coconut" }
AppTextField {
placeholderText: qsTr("Enter name")
}
onAccepted: {
if (find(editText) === -1)
model.append({text: editText})
AppImage {
source: "https://storage.googleapis.com/flowy-assets/keypad/jr-korpa-9XngoIpxcEo-unsplash.jpg"
fillMode: Image.PreserveAspectCrop
height: 100
width: 100
radius: 20
}
}
AppTextField {
placeholderText: qsTr("Enter name")
}
AppImage {
source: "https://storage.googleapis.com/flowy-assets/keypad/jr-korpa-9XngoIpxcEo-unsplash.jpg"
fillMode: Image.PreserveAspectCrop
height: 100
width: 100
radius: 20
}
}
}