FigmaOptions.qml


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

// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Dialogs

GridLayout {
    implicitWidth: parent.width
    implicitHeight: childrenRect.height
    columns: 2

    Label {
        text: "Target directory"
    }

    RowLayout {
        Layout.fillWidth: true
        TextField {
            id: stylePathInput
            placeholderText: "The path to where you wish to save the style"
            Layout.fillWidth: true
            text: bridge.targetDirectory
            onTextChanged: bridge.targetDirectory = text
        }

        ToolButton {
            icon.source: "qrc:/qt-project.org/imports/QtQuick/Dialogs/quickimpl/images/folder-icon-round.png"
            onClicked: stylePathDialog.open()
        }

        FolderDialog {
            id: stylePathDialog
            onAccepted: stylePathInput.text = bridge.toLocalFile(selectedFolder)
        }
    }

    Label {
        text: "Figma URL (or design ID)"
    }

    TextField {
        placeholderText: "URL / design ID"
        Layout.fillWidth: true
        text: bridge.figmaUrlOrId
        onTextChanged: bridge.figmaUrlOrId = text
        ToolTip.visible: hovered
        ToolTip.delay: 1000
        ToolTip.text: "How to get the Figma design ID:"
                      + "\n1. Click the 'Share' button in the top right corner in Figma"
                      + "\n2. Click 'Copy link'"
    }

    Label {
        text: "Figma Token"
    }

    TextField {
        placeholderText: "Token"
        Layout.fillWidth: true
        text: bridge.figmaToken
        onTextChanged: bridge.figmaToken = text
        ToolTip.visible: hovered
        ToolTip.delay: 1000
        ToolTip.text: "How to get a Figma token:"
                      + "\n1. Login to your Figma account."
                      + "\n2. Head to Settings from the top-left menu inside Figma."
                      + "\n3. Find the Personal access tokens section."
                      + "\n4. Click Generate new token to open the configuration modal."
                      + "\n5. Click Generate token."
    }
}