diff --git a/AppCard.qml b/AppCard.qml index e7f2c63..354a157 100644 --- a/AppCard.qml +++ b/AppCard.qml @@ -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 + } } diff --git a/AppComboBox.qml b/AppComboBox.qml index bf46329..8ebce1c 100644 --- a/AppComboBox.qml +++ b/AppComboBox.qml @@ -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 + } } - } } diff --git a/AppIcon.qml b/AppIcon.qml index 3c7a8fd..aa68a63 100644 --- a/AppIcon.qml +++ b/AppIcon.qml @@ -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 diff --git a/AppImage.qml b/AppImage.qml index 94ced9b..8622f10 100644 --- a/AppImage.qml +++ b/AppImage.qml @@ -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" + } } - } } diff --git a/AppLogo.qml b/AppLogo.qml index b79ca20..48aeac4 100644 --- a/AppLogo.qml +++ b/AppLogo.qml @@ -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" } diff --git a/AppPrimaryButton.qml b/AppPrimaryButton.qml index 4680fef..41fc2e4 100644 --- a/AppPrimaryButton.qml +++ b/AppPrimaryButton.qml @@ -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 diff --git a/AppSecondaryButton.qml b/AppSecondaryButton.qml index 4c744ac..238ad5f 100644 --- a/AppSecondaryButton.qml +++ b/AppSecondaryButton.qml @@ -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 { diff --git a/AppTextField.qml b/AppTextField.qml index de1f1e5..2b4681d 100644 --- a/AppTextField.qml +++ b/AppTextField.qml @@ -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 + } } diff --git a/Theme.qml b/Theme.qml index e7d3926..ae8430f 100644 --- a/Theme.qml +++ b/Theme.qml @@ -29,6 +29,6 @@ Item { } function toggleTheme() { - darkTheme = !darkTheme + darkTheme = !darkTheme; } } diff --git a/gallery/Main.qml b/gallery/Main.qml index 26bf98f..1e691f0 100644 --- a/gallery/Main.qml +++ b/gallery/Main.qml @@ -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 - } } }