Changeset View
Changeset View
Standalone View
Standalone View
kcmkwin/kwindecoration/package/contents/ui/Buttons.qml
Show All 25 Lines | |||||
26 | import org.kde.kirigami 2.5 as Kirigami | 26 | import org.kde.kirigami 2.5 as Kirigami | ||
27 | import org.kde.kwin.private.kdecoration 1.0 as KDecoration | 27 | import org.kde.kwin.private.kdecoration 1.0 as KDecoration | ||
28 | 28 | | |||
29 | ColumnLayout { | 29 | ColumnLayout { | ||
30 | Layout.fillWidth: true | 30 | Layout.fillWidth: true | ||
31 | Layout.fillHeight: true | 31 | Layout.fillHeight: true | ||
32 | property int buttonIconSize: units.iconSizes.medium | 32 | property int buttonIconSize: units.iconSizes.medium | ||
33 | property int titleBarSpacing: units.smallSpacing * 2 | 33 | property int titleBarSpacing: units.smallSpacing * 2 | ||
34 | readonly property bool draggingTitlebarButtons: leftButtonsView.dragging || rightButtonsView.dragging | ||||
35 | readonly property bool hideDragHint: draggingTitlebarButtons || availableButtonsGrid.dragging | ||||
34 | 36 | | |||
35 | KDecoration.Bridge { | 37 | KDecoration.Bridge { | ||
36 | id: bridgeItem | 38 | id: bridgeItem | ||
37 | plugin: "org.kde.breeze" | 39 | plugin: "org.kde.breeze" | ||
38 | } | 40 | } | ||
39 | KDecoration.Settings { | 41 | KDecoration.Settings { | ||
40 | id: settingsItem | 42 | id: settingsItem | ||
41 | bridge: bridgeItem.bridge | 43 | bridge: bridgeItem.bridge | ||
▲ Show 20 Lines • Show All 75 Lines • ▼ Show 20 Line(s) | 106 | onDropped: { | |||
117 | var index = 0 | 119 | var index = 0 | ||
118 | for(var childIndex = 0 ; childIndex < (view.count - 1) ; childIndex++) { | 120 | for(var childIndex = 0 ; childIndex < (view.count - 1) ; childIndex++) { | ||
119 | var child = view.contentItem.children[childIndex] | 121 | var child = view.contentItem.children[childIndex] | ||
120 | if (child.x > point.x) { | 122 | if (child.x > point.x) { | ||
121 | break | 123 | break | ||
122 | } | 124 | } | ||
123 | index = childIndex + 1 | 125 | index = childIndex + 1 | ||
124 | } | 126 | } | ||
125 | if (drop.keys.indexOf("decoButtonAdd") != -1) { | 127 | if (drop.keys.indexOf("decoButtonAdd") !== -1) { | ||
126 | view.model.add(index, drag.source.type); | 128 | view.model.add(index, drag.source.type); | ||
127 | } else if (drop.keys.indexOf("decoButtonLeft") != -1) { | 129 | } else if (drop.keys.indexOf("decoButtonLeft") !== -1) { | ||
128 | if (view == leftButtonsView) { | 130 | if (view === leftButtonsView) { | ||
129 | // move in same view | 131 | // move in same view | ||
130 | if (index != drag.source.itemIndex) { | 132 | if (index !== drag.source.itemIndex) { | ||
131 | drag.source.buttonsModel.move(drag.source.itemIndex, index); | 133 | drag.source.buttonsModel.move(drag.source.itemIndex, index); | ||
132 | } | 134 | } | ||
133 | } else { | 135 | } else { | ||
134 | // move to right view | 136 | // move to right view | ||
135 | view.model.add(index, drag.source.type); | 137 | view.model.add(index, drag.source.type); | ||
136 | drag.source.buttonsModel.remove(drag.source.itemIndex); | 138 | drag.source.buttonsModel.remove(drag.source.itemIndex); | ||
137 | } | 139 | } | ||
138 | } else if (drop.keys.indexOf("decoButtonRight") != -1) { | 140 | } else if (drop.keys.indexOf("decoButtonRight") !== -1) { | ||
139 | if (view == rightButtonsView) { | 141 | if (view === rightButtonsView) { | ||
140 | // move in same view | 142 | // move in same view | ||
141 | if (index != drag.source.itemIndex) { | 143 | if (index !== drag.source.itemIndex) { | ||
142 | drag.source.buttonsModel.move(drag.source.itemIndex, index); | 144 | drag.source.buttonsModel.move(drag.source.itemIndex, index); | ||
143 | } | 145 | } | ||
144 | } else { | 146 | } else { | ||
145 | // move to left view | 147 | // move to left view | ||
146 | view.model.add(index, drag.source.type); | 148 | view.model.add(index, drag.source.type); | ||
147 | drag.source.buttonsModel.remove(drag.source.itemIndex); | 149 | drag.source.buttonsModel.remove(drag.source.itemIndex); | ||
148 | } | 150 | } | ||
149 | } | 151 | } | ||
150 | } | 152 | } | ||
151 | } | 153 | } | ||
152 | } | 154 | } | ||
153 | GridView { | 155 | GridView { | ||
154 | id: availableButtonsGrid | 156 | id: availableButtonsGrid | ||
157 | property bool dragging: false | ||||
155 | Layout.fillWidth: true | 158 | Layout.fillWidth: true | ||
156 | Layout.minimumHeight: availableButtonsGrid.cellHeight * 2 | 159 | Layout.minimumHeight: availableButtonsGrid.cellHeight * 2 | ||
157 | Layout.margins: units.largeSpacing | 160 | Layout.margins: units.largeSpacing | ||
158 | model: kcm.availableButtonsModel | 161 | model: kcm.availableButtonsModel | ||
159 | interactive: false | 162 | interactive: false | ||
160 | delegate: Item { | 163 | delegate: Item { | ||
161 | id: availableDelegate | 164 | id: availableDelegate | ||
162 | Layout.margins: units.largeSpacing | 165 | Layout.margins: units.largeSpacing | ||
163 | width: availableButtonsGrid.cellWidth | 166 | width: availableButtonsGrid.cellWidth | ||
164 | height: availableButtonsGrid.cellHeight | 167 | height: availableButtonsGrid.cellHeight | ||
165 | opacity: (leftButtonsView.dragging || rightButtonsView.dragging) ? 0.15 : 1.0 | 168 | opacity: draggingTitlebarButtons ? 0.15 : 1.0 | ||
166 | Rectangle { | 169 | Rectangle { | ||
167 | id: availableButtonFrame | 170 | id: availableButtonFrame | ||
168 | anchors.horizontalCenter: parent.horizontalCenter | 171 | anchors.horizontalCenter: parent.horizontalCenter | ||
169 | color: palette.window | 172 | color: palette.window | ||
170 | radius: units.smallSpacing | 173 | radius: units.smallSpacing | ||
171 | width: buttonIconSize + units.largeSpacing | 174 | width: buttonIconSize + units.largeSpacing | ||
172 | height: buttonIconSize + units.largeSpacing | 175 | height: buttonIconSize + units.largeSpacing | ||
173 | 176 | | |||
174 | KDecoration.Button { | 177 | KDecoration.Button { | ||
175 | id: availableButton | 178 | id: availableButton | ||
176 | anchors.centerIn: Drag.active ? undefined : availableButtonFrame | 179 | anchors.centerIn: Drag.active ? undefined : availableButtonFrame | ||
177 | bridge: bridgeItem.bridge | 180 | bridge: bridgeItem.bridge | ||
178 | settings: settingsItem | 181 | settings: settingsItem | ||
179 | type: model["button"] | 182 | type: model["button"] | ||
180 | width: buttonIconSize | 183 | width: buttonIconSize | ||
181 | height: buttonIconSize | 184 | height: buttonIconSize | ||
182 | Drag.keys: [ "decoButtonAdd" ] | 185 | Drag.keys: [ "decoButtonAdd" ] | ||
183 | Drag.active: dragArea.drag.active | 186 | Drag.active: dragArea.drag.active | ||
187 | Drag.onActiveChanged: availableButtonsGrid.dragging = Drag.active | ||||
184 | color: palette.windowText | 188 | color: palette.windowText | ||
185 | } | 189 | } | ||
186 | MouseArea { | 190 | MouseArea { | ||
187 | id: dragArea | 191 | id: dragArea | ||
188 | anchors.fill: availableButton | 192 | anchors.fill: availableButton | ||
189 | drag.target: availableButton | 193 | drag.target: availableButton | ||
190 | cursorShape: Qt.SizeAllCursor | 194 | cursorShape: Qt.SizeAllCursor | ||
191 | onReleased: { | 195 | onReleased: { | ||
Show All 28 Lines | 218 | DropArea { | |||
220 | onDropped: { | 224 | onDropped: { | ||
221 | drag.source.buttonsModel.remove(drag.source.itemIndex); | 225 | drag.source.buttonsModel.remove(drag.source.itemIndex); | ||
222 | } | 226 | } | ||
223 | Kirigami.Heading { | 227 | Kirigami.Heading { | ||
224 | text: i18n("Drop button here to remove it") | 228 | text: i18n("Drop button here to remove it") | ||
225 | font.weight: Font.Bold | 229 | font.weight: Font.Bold | ||
226 | level: 2 | 230 | level: 2 | ||
227 | anchors.centerIn: parent | 231 | anchors.centerIn: parent | ||
228 | opacity: (leftButtonsView.dragging || rightButtonsView.dragging) ? 1.0 : 0.0 | 232 | opacity: draggingTitlebarButtons ? 1.0 : 0.0 | ||
229 | } | 233 | } | ||
230 | } | 234 | } | ||
231 | } | 235 | } | ||
232 | Text { | 236 | Text { | ||
233 | id: dragHint | 237 | id: dragHint | ||
238 | readonly property real dragHintOpacitiy: enabled ? 1.0 : 0.3 | ||||
234 | color: palette.windowText | 239 | color: palette.windowText | ||
235 | opacity: (leftButtonsView.dragging || rightButtonsView.dragging || availableButtonsGrid.dragging) ? 0.0 : 1.0 | 240 | opacity: hideDragHint ? 0.0 : dragHintOpacitiy | ||
ervin: I think it'd be worth splitting that up in several sub-expressions using properties just to… | |||||
236 | Layout.fillWidth: true | 241 | Layout.fillWidth: true | ||
237 | Layout.topMargin: titleBarSpacing | 242 | Layout.topMargin: titleBarSpacing | ||
238 | Layout.bottomMargin: titleBarSpacing | 243 | Layout.bottomMargin: titleBarSpacing | ||
239 | horizontalAlignment: Text.AlignHCenter | 244 | horizontalAlignment: Text.AlignHCenter | ||
240 | wrapMode: Text.NoWrap | 245 | wrapMode: Text.NoWrap | ||
241 | text: i18n("Drag buttons between here and the titlebar") | 246 | text: i18n("Drag buttons between here and the titlebar") | ||
242 | } | 247 | } | ||
243 | } | 248 | } | ||
244 | } | 249 | } | ||
245 | } | 250 | } |
I think it'd be worth splitting that up in several sub-expressions using properties just to improve readability.