aboutsummaryrefslogtreecommitdiffstats
path: root/share/qtcreator/qmldesigner/newprojectdialog/imports/NewProjectDialog/Styles.qml
blob: 3efba6019fdca4fe5504d964b71fafced1f166d0 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
// Copyright (C) 2021 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0 WITH Qt-GPL-exception-1.0

import QtQuick
import QtQuick.Window
import QtQuick.Controls
import QtQuick.Layouts

import StudioControls as SC
import StudioTheme as StudioTheme

import BackendApi

Item {
    width: DialogValues.stylesPaneWidth

    Component.onCompleted: {
        BackendApi.stylesLoaded = true

        /*
         * TODO: roleNames is called before the backend model (in the proxy class StyleModel) is
         * loaded, which may be buggy. But I found no way to force refresh the model, so as to
         * reload the role names afterwards. setting styleModel.dynamicRoles doesn't appear to do
         * anything.
        */
    }

    Component.onDestruction: {
        BackendApi.stylesLoaded = false
    }

    Rectangle {
        color: DialogValues.lightPaneColor
        anchors.fill: parent
        radius: 6

        Item {
            x: DialogValues.stylesPanePadding
            width: parent.width - DialogValues.stylesPanePadding * 2
            height: parent.height

            Text {
                id: styleTitleText
                text: qsTr("Style")
                height: DialogValues.paneTitleTextHeight
                width: parent.width
                font.weight: Font.DemiBold
                font.pixelSize: DialogValues.paneTitlePixelSize
                lineHeight: DialogValues.paneTitleLineHeight
                lineHeightMode: Text.FixedHeight
                color: DialogValues.textColor
                verticalAlignment: Qt.AlignVCenter
                anchors.top: parent.top
                anchors.left: parent.left
                anchors.right: parent.right

                function refresh() {
                    styleTitleText.text = qsTr("Style") + " (" + BackendApi.styleModel.rowCount() + ")"
                }
            }

            SC.ComboBox { // Style Filter ComboBox
                id: styleComboBox
                actionIndicatorVisible: false
                currentIndex: 0
                textRole: "text"
                valueRole: "value"
                font.pixelSize: DialogValues.defaultPixelSize
                width: parent.width

                anchors.top: styleTitleText.bottom
                anchors.topMargin: 5

                model: ListModel {
                    ListElement { text: qsTr("All"); value: "all" }
                    ListElement { text: qsTr("Light"); value: "light" }
                    ListElement { text: qsTr("Dark"); value: "dark" }
                }

                onActivated: (index) => {
                    BackendApi.styleModel.filter(currentValue.toLowerCase())
                    styleTitleText.refresh()
                }
            } // Style Filter ComboBox

            ScrollView {
                id: scrollView

                anchors.top: styleComboBox.bottom
                anchors.topMargin: 11
                anchors.bottom: parent.bottom
                anchors.bottomMargin: DialogValues.stylesPanePadding
                width: parent.width

                ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
                ScrollBar.vertical: SC.VerticalScrollBar {
                    id: styleScrollBar
                    x: stylesList.width + (DialogValues.stylesPanePadding
                                           - StudioTheme.Values.scrollBarThickness) * 0.5
                }

                ListView {
                    id: stylesList
                    anchors.fill: parent
                    focus: true
                    clip: true
                    model: BackendApi.styleModel
                    boundsBehavior: Flickable.StopAtBounds
                    highlightFollowsCurrentItem: false
                    bottomMargin: -DialogValues.styleListItemBottomMargin

                    onCurrentIndexChanged: {
                        if (BackendApi.styleModel.rowCount() > 0)
                            BackendApi.styleIndex = stylesList.currentIndex
                    }

                    delegate: ItemDelegate {
                        id: delegateId
                        width: stylesList.width
                        height: DialogValues.styleListItemHeight
                        hoverEnabled: true

                        onClicked: stylesList.currentIndex = index

                        background: Rectangle {
                            anchors.fill: parent
                            color: DialogValues.lightPaneColor
                        }

                        contentItem: Item {
                            anchors.fill: parent

                            Column {
                                anchors.fill: parent
                                spacing: DialogValues.styleListItemSpacing

                                Rectangle {
                                    width: DialogValues.styleImageWidth
                                           + 2 * DialogValues.styleImageBorderWidth
                                    height: DialogValues.styleImageHeight
                                            + 2 * DialogValues.styleImageBorderWidth

                                    border.color: delegateId.hovered
                                                  ? DialogValues.textColor
                                                  : (index === stylesList.currentIndex
                                                     ? DialogValues.textColorInteraction
                                                     : "transparent")

                                    border.width: index === stylesList.currentIndex || delegateId.hovered
                                                  ? DialogValues.styleImageBorderWidth
                                                  : 0

                                    color: "transparent"

                                    Image {
                                        id: styleImage
                                        x: DialogValues.styleImageBorderWidth
                                        y: DialogValues.styleImageBorderWidth
                                        width: DialogValues.styleImageWidth
                                        height: DialogValues.styleImageHeight
                                        asynchronous: false
                                        source: "image://newprojectdialog_library/" + BackendApi.styleModel.iconId(model.index)
                                    }
                                } // Rectangle

                                Text {
                                    id: styleText
                                    text: model.display
                                    font.pixelSize: DialogValues.defaultPixelSize
                                    lineHeight: DialogValues.defaultLineHeight
                                    height: DialogValues.styleTextHeight
                                    lineHeightMode: Text.FixedHeight
                                    horizontalAlignment: Text.AlignHCenter
                                    width: parent.width
                                    color: DialogValues.textColor
                                }
                            } // Column
                        }
                    }

                    Connections {
                        target: BackendApi.styleModel
                        function onModelReset() {
                            stylesList.currentIndex = BackendApi.styleIndex
                            stylesList.currentIndexChanged()
                            styleTitleText.refresh()
                        }
                    }
                } // ListView
            } // ScrollView
        } // Parent Item
    } // Rectangle
}