Changeset View
Changeset View
Standalone View
Standalone View
src/qml/ViewSelector.qml
Show All 36 Lines | 35 | { | |||
---|---|---|---|---|---|
37 | viewModeView.currentIndex = index | 37 | viewModeView.currentIndex = index | ||
38 | viewModeView.ignoreCurrentItemChanges = false | 38 | viewModeView.ignoreCurrentItemChanges = false | ||
39 | } | 39 | } | ||
40 | 40 | | |||
41 | implicitWidth: elisaTheme.dp(225) | 41 | implicitWidth: elisaTheme.dp(225) | ||
42 | 42 | | |||
43 | Rectangle { | 43 | Rectangle { | ||
44 | anchors.fill: parent | 44 | anchors.fill: parent | ||
45 | z: 1 | ||||
45 | 46 | | |||
46 | color: myPalette.base | 47 | border.color: myPalette.base | ||
47 | border { | 48 | | ||
48 | color: (rootFocusScope.activeFocus ? myPalette.highlight : "transparent") | 49 | Behavior on border.color { | ||
49 | width: 1 | 50 | ColorAnimation { | ||
51 | duration: 300 | ||||
52 | } | ||||
53 | } | ||||
50 | } | 54 | } | ||
51 | 55 | | |||
52 | ScrollView { | 56 | ScrollView { | ||
53 | focus: true | 57 | focus: true | ||
54 | 58 | | |||
55 | anchors.fill: parent | 59 | anchors.fill: parent | ||
60 | z: 2 | ||||
56 | 61 | | |||
57 | clip: true | 62 | clip: true | ||
58 | ScrollBar.horizontal.policy: ScrollBar.AlwaysOff | 63 | ScrollBar.horizontal.policy: ScrollBar.AlwaysOff | ||
59 | 64 | | |||
60 | | ||||
61 | ListView { | 65 | ListView { | ||
62 | id: viewModeView | 66 | id: viewModeView | ||
63 | 67 | | |||
64 | focus: true | 68 | focus: true | ||
65 | activeFocusOnTab: true | 69 | activeFocusOnTab: true | ||
66 | keyNavigationEnabled: true | 70 | keyNavigationEnabled: true | ||
67 | 71 | | |||
68 | property bool ignoreCurrentItemChanges: false | 72 | property bool ignoreCurrentItemChanges: false | ||
69 | 73 | | |||
70 | z: 2 | 74 | z: 2 | ||
71 | 75 | | |||
72 | anchors.topMargin: elisaTheme.layoutHorizontalMargin * 2 | 76 | anchors.topMargin: elisaTheme.layoutHorizontalMargin * 2 | ||
73 | 77 | | |||
74 | model: DelegateModel { | 78 | model: DelegateModel { | ||
75 | id: pageDelegateModel | 79 | id: pageDelegateModel | ||
76 | 80 | | |||
77 | delegate: MouseArea { | 81 | delegate: ViewSelectorDelegate { | ||
78 | id: itemMouseArea | 82 | id: entry | ||
79 | | ||||
80 | property var viewType: model.type | | |||
81 | 83 | | |||
82 | height: elisaTheme.viewSelectorDelegateHeight * 1.4 | 84 | height: Math.round(elisaTheme.viewSelectorDelegateHeight * 1.4) | ||
83 | width: viewModeView.width | 85 | width: viewModeView.width | ||
84 | 86 | | |||
85 | hoverEnabled: true | 87 | focus: true | ||
86 | acceptedButtons: Qt.LeftButton | | |||
87 | | ||||
88 | Loader { | | |||
89 | anchors.fill: parent | | |||
90 | active: itemMouseArea && itemMouseArea.containsMouse && !nameLabel.visible | | |||
91 | | ||||
92 | sourceComponent: ToolTip { | | |||
93 | delay: Qt.styleHints.mousePressAndHoldInterval | | |||
94 | text: model.display | | |||
95 | visible: itemMouseArea && itemMouseArea.containsMouse && !nameLabel.visible | | |||
96 | | ||||
97 | contentItem: Label { | | |||
98 | text: model.display | | |||
99 | color: myPalette.highlightedText | | |||
100 | } | | |||
101 | | ||||
102 | enter: Transition { NumberAnimation { properties: "opacity"; easing.type: Easing.InOutQuad; from: 0.0; to: 1.0; duration: 300; } } | | |||
103 | exit: Transition { NumberAnimation { properties: "opacity"; easing.type: Easing.InOutQuad; from: 1.0; to: 0.0; duration: 300; } } | | |||
104 | | ||||
105 | background: Rectangle { | | |||
106 | color: myPalette.shadow | | |||
107 | radius: elisaTheme.tooltipRadius | | |||
108 | | ||||
109 | layer.enabled: true | | |||
110 | layer.effect: DropShadow { | | |||
111 | horizontalOffset: elisaTheme.shadowOffset | | |||
112 | verticalOffset: elisaTheme.shadowOffset | | |||
113 | radius: 8 | | |||
114 | samples: 17 | | |||
115 | color: myPalette.shadow | | |||
116 | } | | |||
117 | } | | |||
118 | } | | |||
119 | } | | |||
120 | | ||||
121 | Image { | | |||
122 | id: viewIcon | | |||
123 | | ||||
124 | z: 2 | | |||
125 | | ||||
126 | anchors { | | |||
127 | verticalCenter: parent.verticalCenter | | |||
128 | leftMargin: elisaTheme.layoutHorizontalMargin | | |||
129 | left: parent.left | | |||
130 | } | | |||
131 | | ||||
132 | height: elisaTheme.viewSelectorDelegateHeight | | |||
133 | width: elisaTheme.viewSelectorDelegateHeight | | |||
134 | | ||||
135 | sourceSize { | | |||
136 | width: elisaTheme.viewSelectorDelegateHeight | | |||
137 | height: elisaTheme.viewSelectorDelegateHeight | | |||
138 | } | | |||
139 | | ||||
140 | source: model.image | | |||
141 | | ||||
142 | layer.effect: ColorOverlay { | | |||
143 | | ||||
144 | color: (index === viewModeView.currentIndex || itemMouseArea.containsMouse ? myPalette.highlight : "transparent") | | |||
145 | | ||||
146 | Behavior on color { | | |||
147 | ColorAnimation { | | |||
148 | duration: 300 | | |||
149 | } | | |||
150 | } | | |||
151 | } | | |||
152 | } | | |||
153 | | ||||
154 | LabelWithToolTip { | | |||
155 | id: nameLabel | | |||
156 | | ||||
157 | z: 2 | | |||
158 | | ||||
159 | anchors.verticalCenter: parent.verticalCenter | | |||
160 | anchors.leftMargin: elisaTheme.layoutHorizontalMargin | | |||
161 | anchors.left: viewIcon.right | | |||
162 | anchors.right: parent.right | | |||
163 | anchors.rightMargin: elisaTheme.layoutHorizontalMargin | | |||
164 | verticalAlignment: "AlignVCenter" | | |||
165 | | ||||
166 | font.pointSize: Math.round(elisaTheme.defaultFontPointSize * 1.1) | | |||
167 | | ||||
168 | text: model.display | | |||
169 | elide: Text.ElideRight | | |||
170 | | ||||
171 | opacity: textOpacity | | |||
172 | visible: opacity > 0 | | |||
173 | | ||||
174 | Behavior on opacity { | | |||
175 | NumberAnimation { | | |||
176 | duration: 150 | | |||
177 | } | | |||
178 | } | | |||
179 | 88 | | |||
180 | color: (viewModeView.currentIndex === index || itemMouseArea.containsMouse ? myPalette.highlight : myPalette.text) | 89 | isSelected: viewModeView.currentIndex === index | ||
181 | 90 | | |||
182 | Behavior on color { | 91 | onClicked: { | ||
183 | ColorAnimation { | 92 | viewModeView.currentIndex = index | ||
184 | duration: 300 | 93 | entry.forceActiveFocus() | ||
185 | } | | |||
186 | } | | |||
187 | } | 94 | } | ||
188 | | ||||
189 | onClicked: viewModeView.currentIndex = index | | |||
190 | } | 95 | } | ||
191 | } | 96 | } | ||
192 | 97 | | |||
193 | footer: MouseArea { | 98 | footer: MouseArea { | ||
194 | width: viewModeView.width | 99 | width: viewModeView.width | ||
195 | height: viewModeView.height - y | 100 | height: viewModeView.height - y | ||
196 | 101 | | |||
197 | acceptedButtons: Qt.LeftButton | 102 | acceptedButtons: Qt.LeftButton | ||
198 | 103 | | |||
199 | onClicked: | 104 | onClicked: | ||
200 | { | 105 | { | ||
201 | rootFocusScope.focus = true | 106 | rootFocusScope.focus = true | ||
202 | } | 107 | } | ||
203 | } | 108 | } | ||
204 | 109 | | |||
205 | onCurrentItemChanged: if (!ignoreCurrentItemChanges) switchView(currentItem.viewType) | 110 | onCurrentItemChanged: if (!ignoreCurrentItemChanges) switchView(currentItem.viewType) | ||
206 | } | 111 | } | ||
207 | } | 112 | } | ||
208 | 113 | | |||
209 | Behavior on border.color { | | |||
210 | ColorAnimation { | | |||
211 | duration: 300 | | |||
212 | } | | |||
213 | } | | |||
214 | } | | |||
215 | | ||||
216 | Connections { | 114 | Connections { | ||
217 | target: elisa | 115 | target: elisa | ||
218 | 116 | | |||
219 | onInitializationDone: { | 117 | onInitializationDone: { | ||
220 | viewModeView.currentIndex = 3 | 118 | viewModeView.currentIndex = 3 | ||
221 | } | 119 | } | ||
222 | } | 120 | } | ||
223 | 121 | | |||
Show All 33 Lines |