1// SPDX-FileCopyrightText: 2021 Nheko Contributors
2//
3// SPDX-License-Identifier: GPL-3.0-or-later
4
5import ".."
6import "../components"
7import QtQuick 2.12
8import QtQuick.Controls 2.12
9import QtQuick.Layouts 1.12
10import im.nheko 1.0
11
12ApplicationWindow {
13    id: win
14
15    property ImagePackListModel packlist
16    property int avatarSize: Math.ceil(fontMetrics.lineSpacing * 2.3)
17    property SingleImagePackModel currentPack: packlist.packAt(currentPackIndex)
18    property int currentPackIndex: 0
19    readonly property int stickerDim: 128
20    readonly property int stickerDimPad: 128 + Nheko.paddingSmall
21
22    title: qsTr("Image pack settings")
23    height: 600
24    width: 800
25    palette: Nheko.colors
26    color: Nheko.colors.base
27    modality: Qt.NonModal
28    flags: Qt.Dialog | Qt.WindowCloseButtonHint | Qt.WindowTitleHint
29    Component.onCompleted: Nheko.reparent(win)
30
31    Component {
32        id: packEditor
33
34        ImagePackEditorDialog {
35        }
36
37    }
38
39    AdaptiveLayout {
40        id: adaptiveView
41
42        anchors.fill: parent
43        singlePageMode: false
44        pageIndex: 0
45
46        AdaptiveLayoutElement {
47            id: packlistC
48
49            visible: Settings.groupView
50            minimumWidth: 200
51            collapsedWidth: 200
52            preferredWidth: 300
53            maximumWidth: 300
54
55            ListView {
56                model: packlist
57                clip: true
58
59                ScrollHelper {
60                    flickable: parent
61                    anchors.fill: parent
62                    enabled: !Settings.mobileMode
63                }
64
65                footer: ColumnLayout {
66                    Button {
67                        palette: Nheko.colors
68                        onClicked: {
69                            var dialog = packEditor.createObject(timelineRoot, {
70                                "imagePack": packlist.newPack(false)
71                            });
72                            dialog.show();
73                        }
74                        width: packlist.width
75                        visible: !packlist.containsAccountPack
76                        text: qsTr("Create account pack")
77                    }
78
79                    Button {
80                        palette: Nheko.colors
81                        onClicked: {
82                            var dialog = packEditor.createObject(timelineRoot, {
83                                "imagePack": packlist.newPack(true)
84                            });
85                            dialog.show();
86                        }
87                        width: packlist.width
88                        text: qsTr("New room pack")
89                    }
90
91                }
92
93                delegate: AvatarListTile {
94                    id: packItem
95
96                    property color background: Nheko.colors.window
97                    property color importantText: Nheko.colors.text
98                    property color unimportantText: Nheko.colors.buttonText
99                    property color bubbleBackground: Nheko.colors.highlight
100                    property color bubbleText: Nheko.colors.highlightedText
101                    required property string displayName
102                    required property bool fromAccountData
103                    required property bool fromCurrentRoom
104                    required property string statekey
105
106                    title: displayName
107                    subtitle: {
108                        if (fromAccountData)
109                            return qsTr("Private pack");
110                        else if (fromCurrentRoom)
111                            return qsTr("Pack from this room");
112                        else
113                            return qsTr("Globally enabled pack");
114                    }
115                    selectedIndex: currentPackIndex
116                    roomid: statekey
117
118                    TapHandler {
119                        onSingleTapped: currentPackIndex = index
120                    }
121
122                }
123
124            }
125
126        }
127
128        AdaptiveLayoutElement {
129            id: packinfoC
130
131            Rectangle {
132                color: Nheko.colors.window
133
134                ColumnLayout {
135                    id: packinfo
136
137                    property string packName: currentPack ? currentPack.packname : ""
138                    property string attribution: currentPack ? currentPack.attribution : ""
139                    property string avatarUrl: currentPack ? currentPack.avatarUrl : ""
140                    property string statekey: currentPack ? currentPack.statekey : ""
141
142                    anchors.fill: parent
143                    anchors.margins: Nheko.paddingLarge
144                    spacing: Nheko.paddingLarge
145
146                    Avatar {
147                        url: packinfo.avatarUrl.replace("mxc://", "image://MxcImage/")
148                        displayName: packinfo.packName
149                        roomid: packinfo.statekey
150                        height: 100
151                        width: 100
152                        Layout.alignment: Qt.AlignHCenter
153                        enabled: false
154                    }
155
156                    MatrixText {
157                        text: packinfo.packName
158                        font.pixelSize: Math.ceil(fontMetrics.pixelSize * 1.1)
159                        horizontalAlignment: TextEdit.AlignHCenter
160                        Layout.alignment: Qt.AlignHCenter
161                        Layout.preferredWidth: packinfoC.width - Nheko.paddingLarge * 2
162                    }
163
164                    MatrixText {
165                        text: packinfo.attribution
166                        wrapMode: TextEdit.Wrap
167                        horizontalAlignment: TextEdit.AlignHCenter
168                        Layout.alignment: Qt.AlignHCenter
169                        Layout.preferredWidth: packinfoC.width - Nheko.paddingLarge * 2
170                    }
171
172                    GridLayout {
173                        Layout.alignment: Qt.AlignHCenter
174                        visible: currentPack && currentPack.roomid != ""
175                        columns: 2
176                        rowSpacing: Nheko.paddingMedium
177
178                        MatrixText {
179                            text: qsTr("Enable globally")
180                        }
181
182                        ToggleButton {
183                            ToolTip.text: qsTr("Enables this pack to be used in all rooms")
184                            checked: currentPack ? currentPack.isGloballyEnabled : false
185                            onClicked: currentPack.isGloballyEnabled = !currentPack.isGloballyEnabled
186                            Layout.alignment: Qt.AlignRight
187                        }
188
189                    }
190
191                    Button {
192                        Layout.alignment: Qt.AlignHCenter
193                        text: qsTr("Edit")
194                        enabled: currentPack.canEdit
195                        onClicked: {
196                            var dialog = packEditor.createObject(timelineRoot, {
197                                "imagePack": currentPack
198                            });
199                            dialog.show();
200                        }
201                    }
202
203                    GridView {
204                        Layout.fillHeight: true
205                        Layout.fillWidth: true
206                        model: currentPack
207                        cellWidth: stickerDimPad
208                        cellHeight: stickerDimPad
209                        boundsBehavior: Flickable.StopAtBounds
210                        clip: true
211                        currentIndex: -1 // prevent sorting from stealing focus
212                        cacheBuffer: 500
213
214                        ScrollHelper {
215                            flickable: parent
216                            anchors.fill: parent
217                            enabled: !Settings.mobileMode
218                        }
219
220                        // Individual emoji
221                        delegate: AbstractButton {
222                            width: stickerDim
223                            height: stickerDim
224                            hoverEnabled: true
225                            ToolTip.text: ":" + model.shortCode + ": - " + model.body
226                            ToolTip.visible: hovered
227
228                            contentItem: Image {
229                                height: stickerDim
230                                width: stickerDim
231                                source: model.url.replace("mxc://", "image://MxcImage/")
232                                fillMode: Image.PreserveAspectFit
233                            }
234
235                            background: Rectangle {
236                                anchors.fill: parent
237                                color: hovered ? Nheko.colors.highlight : 'transparent'
238                                radius: 5
239                            }
240
241                        }
242
243                    }
244
245                }
246
247            }
248
249        }
250
251    }
252
253    footer: DialogButtonBox {
254        id: buttons
255
256        Button {
257            text: qsTr("Close")
258            DialogButtonBox.buttonRole: DialogButtonBox.AcceptRole
259            onClicked: win.close()
260        }
261
262    }
263
264}
265