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 250 additions and 245 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 import QtQuick.Controls.Basic
Item { Item {
id: root 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
}
// This allows direct assignment of children to AppCard property real padding: 10
default property alias content: contentItem.children
// Content container // Automatically size based on content plus padding
Item { implicitWidth: contentItem.childrenRect.width + padding * 2
id: contentItem implicitHeight: contentItem.childrenRect.height + padding * 2
anchors.fill: parent
anchors.margins: padding // 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 import DesignSystem
T.ComboBox { T.ComboBox {
id: control id: control
implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, implicitContentWidth + leftPadding + rightPadding)
implicitContentWidth + leftPadding + rightPadding) implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset, implicitContentHeight + topPadding + bottomPadding, implicitIndicatorHeight + topPadding + bottomPadding)
implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
implicitContentHeight + topPadding + bottomPadding,
implicitIndicatorHeight + topPadding + bottomPadding)
leftPadding: 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) rightPadding: padding + (control.mirrored || !indicator || !indicator.visible ? 0 : indicator.width + spacing)
delegate: ItemDelegate { delegate: ItemDelegate {
required property var model required property var model
required property int index required property int index
width: ListView.view.width width: ListView.view.width
text: model[control.textRole] text: model[control.textRole]
palette.text: control.palette.text palette.text: control.palette.text
palette.highlightedText: control.palette.highlightedText palette.highlightedText: control.palette.highlightedText
font.weight: control.currentIndex === index ? Font.DemiBold : Font.Normal font.weight: control.currentIndex === index ? Font.DemiBold : Font.Normal
highlighted: control.highlightedIndex === index highlighted: control.highlightedIndex === index
hoverEnabled: control.hoverEnabled 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
} }
}
background: Rectangle { indicator: ColorImage {
implicitWidth: 140 x: control.mirrored ? control.padding : control.width - width - control.padding
implicitHeight: 40 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 contentItem: T.TextField {
border.color: control.palette.highlight leftPadding: !control.mirrored ? 12 : control.editable && activeFocus ? 3 : 1
border.width: !control.editable && control.visualFocus ? 2 : 0 rightPadding: control.mirrored ? 12 : control.editable && activeFocus ? 3 : 1
visible: !control.flat || control.down topPadding: 6 - control.padding
bottomPadding: 6 - control.padding
radius: Theme.radius text: control.editable ? control.editText : control.displayText
}
popup: T.Popup { enabled: control.editable
y: control.height autoScroll: control.editable
width: control.width readOnly: control.down
height: Math.min(contentItem.implicitHeight, control.Window.height - topMargin - bottomMargin) inputMethodHints: control.inputMethodHints
topMargin: 6 validator: control.validator
bottomMargin: 6 selectByMouse: control.selectTextByMouse
palette: control.palette
contentItem: ListView { color: control.editable ? control.palette.text : control.palette.buttonText
clip: true selectionColor: control.palette.highlight
implicitHeight: contentHeight selectedTextColor: control.palette.highlightedText
model: control.delegateModel verticalAlignment: Text.AlignVCenter
currentIndex: control.highlightedIndex
highlightMoveDuration: 0
Rectangle { background: Rectangle {
z: 10 visible: control.enabled && control.editable && !control.flat
width: parent.width border.width: parent && parent.activeFocus ? 2 : 1
height: parent.height border.color: parent && parent.activeFocus ? control.palette.highlight : control.palette.button
color: "transparent" color: control.palette.base
border.color: control.palette.mid }
}
T.ScrollIndicator.vertical: ScrollIndicator { }
} }
background: Rectangle { 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 { Button {
anchors.centerIn: parent anchors.centerIn: parent
background: Rectangle { background: Rectangle {
color: "transparent" color: "transparent"
} }
// FIX: onClicked doesn't work // FIX: onClicked doesn't work
onClicked: if (item.onClicked) item.onClicked() onClicked: if (item.onClicked)
item.onClicked()
icon.source: item.source icon.source: item.source
icon.width: item.iconWidth icon.width: item.iconWidth
icon.height: item.iconHeight icon.height: item.iconHeight
AppImage.qml
+27 -27
View File
@@ -2,36 +2,36 @@ import QtQuick
import QtQuick.Effects import QtQuick.Effects
Item { Item {
property alias source: sourceItem.source property alias source: sourceItem.source
property alias fillMode: sourceItem.fillMode property alias fillMode: sourceItem.fillMode
property alias radius: rect.radius property alias radius: rect.radius
Image { Image {
id: sourceItem id: sourceItem
anchors.fill: parent anchors.fill: parent
visible: false visible: false
} }
MultiEffect { MultiEffect {
source: sourceItem source: sourceItem
anchors.fill: sourceItem anchors.fill: sourceItem
maskEnabled: true maskEnabled: true
maskSource: mask maskSource: mask
} }
Item { Item {
id: mask id: mask
width: sourceItem.width width: sourceItem.width
height: sourceItem.height height: sourceItem.height
layer.enabled: true layer.enabled: true
visible: false visible: false
Rectangle { Rectangle {
id: rect id: rect
width: sourceItem.width width: sourceItem.width
height: sourceItem.height height: sourceItem.height
radius: 10 radius: 10
color: "black" color: "black"
}
} }
}
} }
AppLogo.qml
+2 -2
View File
@@ -1,7 +1,7 @@
import QtQuick import QtQuick
Image { 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 font.bold: true
contentItem: IconLabel { contentItem: IconLabel {
spacing: control.spacing spacing: control.spacing
mirrored: control.mirrored mirrored: control.mirrored
display: control.display display: control.display
icon: control.icon icon: control.icon
text: control.text text: control.text
font: control.font font: control.font
color: "#FFFFFF" color: "#FFFFFF"
} }
background: Rectangle { background: Rectangle {
@@ -24,8 +24,7 @@ Button {
implicitWidth: 100 implicitWidth: 100
implicitHeight: 40 implicitHeight: 40
visible: !control.flat || control.down || control.checked || control.highlighted visible: !control.flat || control.down || control.checked || control.highlighted
color: Color.blend(control.checked || control.highlighted ? control.palette.dark : control.palette.button, color: Color.blend(control.checked || control.highlighted ? control.palette.dark : control.palette.button, control.palette.mid, control.down ? 0.5 : 0.0)
control.palette.mid, control.down ? 0.5 : 0.0)
border.color: control.palette.highlight border.color: control.palette.highlight
border.width: control.visualFocus ? 2 : 0 border.width: control.visualFocus ? 2 : 0
// custom // custom
AppSecondaryButton.qml
+7 -7
View File
@@ -9,14 +9,14 @@ Button {
font.bold: true font.bold: true
contentItem: IconLabel { contentItem: IconLabel {
spacing: control.spacing spacing: control.spacing
mirrored: control.mirrored mirrored: control.mirrored
display: control.display display: control.display
icon: control.icon icon: control.icon
text: control.text text: control.text
font: control.font font: control.font
color: Theme.foreground color: Theme.foreground
} }
background: Rectangle { background: Rectangle {
AppTextField.qml
+9 -9
View File
@@ -4,15 +4,15 @@ import QtQuick.Controls.Basic
import QtQuick.Controls.impl import QtQuick.Controls.impl
TextField { TextField {
id: control id: control
background: Rectangle { background: Rectangle {
implicitWidth: 200 implicitWidth: 200
implicitHeight: 40 implicitHeight: 40
border.width: control.activeFocus ? 2 : 1 border.width: control.activeFocus ? 2 : 1
color: control.palette.base color: control.palette.base
border.color: control.activeFocus ? control.palette.highlight : control.palette.mid 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() { function toggleTheme() {
darkTheme = !darkTheme darkTheme = !darkTheme;
} }
} }
gallery/Main.qml
+86 -78
View File
@@ -14,96 +14,104 @@ AppWindow {
title: qsTr("flowy - gallery") title: qsTr("flowy - gallery")
ColumnLayout { ColumnLayout {
anchors.left: parent.left anchors.left: parent.left
anchors.right: parent.right anchors.right: parent.right
anchors.top: parent.top anchors.top: parent.top
anchors.margins: 10 anchors.margins: 10
AppLogo {} AppLogo {}
Row { Row {
spacing: 5 spacing: 5
AppPrimaryButton { AppPrimaryButton {
text: "Toggle theme" text: "Toggle theme"
onClicked: { onClicked: {
Theme.toggleTheme() 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 { 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 { MessageDialog {
Column { id: messageDialog
spacing: 10 buttons: MessageDialog.Ok
AppText { text: "The document has been modified."
text: "This is a card"
}
AppCaption {
text: "Caption"
}
AppHeadline {
text: "Headline"
}
AppSubHeadline {
text: "SubHeadline"
}
AppLabel {
text: "Label"
}
} }
}
Switch {} AppComboBox {
model: ListModel {
AppSecondaryButton { id: model
text: "Open message dialog" ListElement {
onClicked: { text: "Banana"
messageDialog.open() }
ListElement {
text: "Apple"
}
ListElement {
text: "Coconut"
}
}
onAccepted: {
if (find(editText) === -1)
model.append({
text: editText
});
}
} }
}
MessageDialog { AppTextField {
id: messageDialog placeholderText: qsTr("Enter name")
buttons: MessageDialog.Ok
text: "The document has been modified."
}
AppComboBox {
model: ListModel {
id: model
ListElement { text: "Banana" }
ListElement { text: "Apple" }
ListElement { text: "Coconut" }
} }
onAccepted: {
if (find(editText) === -1) AppImage {
model.append({text: editText}) 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
}
} }
} }