summaryrefslogtreecommitdiffstats
path: root/examples/declarative/tutorials/contacts/2_Reuse/FieldText3.qml
blob: c807aedc2cfd17e7a2af270a68a9ebd4c6eff4c6 (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
<Rect id="fieldText"
    height="30"
    radius="5"
    color="black">
    <properties>
        <Property
            name="text"
            value=""
            onValueChanged="reset()"/>
        <Property
            name="label"
            value=""/>
    </properties>
    <signals>
        <Signal name="confirmed"/>
    </signals>
    <resources>
        <Script>
            function edit() {
                fieldText.state='editing';
            }
            function confirm() {
                fieldText.text = textEdit.text;
                fieldText.state='';
                fieldText.confirmed.emit();
            }
            function reset() {
                textEdit.text = fieldText.text;
                fieldText.state='';
            }
        </Script>
    </resources>
    <Image id="cancelIcon"
        width="22" height="22"
        anchors.right="{parent.right}" anchors.rightMargin="4"
        anchors.verticalCenter="{parent.verticalCenter}"
        src="../shared/pics/cancel.png"
        opacity="0"/>
    <Image id="confirmIcon"
        width="22" height="22"
        anchors.left="{parent.left}" anchors.leftMargin="4"
        anchors.verticalCenter="{parent.verticalCenter}"
        src="../shared/pics/ok.png"
        opacity="0"/>
    <TextEdit id="textEdit"
        anchors.left="{parent.left}" anchors.leftMargin="0"
        anchors.right="{parent.right}" anchors.rightMargin="0"
        anchors.verticalCenter="{parent.verticalCenter}"
        color="white"
        font.bold="true"
        readOnly="true"
        wrap="false"
        />
    <Text id="textLabel"
        x="5" width="{parent.width-10}"
        anchors.verticalCenter="{parent.verticalCenter}"
        hAlign="AlignHCenter"
        color="#505050"
        font.italic="true"
        text="{fieldText.label}"
        opacity="{textEdit.text != '' ? 0 : 1}">
        <opacity>
            <Behaviour>
                <NumericAnimation property="opacity" duration="250"/>
            </Behaviour>
        </opacity>
    </Text>
    <MouseRegion anchors.fill="{cancelIcon}" onClicked="reset()"/>
    <MouseRegion anchors.fill="{confirmIcon}" onClicked="confirm()"/>
    <MouseRegion
        id="editRegion"
        anchors.fill="{textEdit}"
        onClicked="edit()"/>
    <states>
        <State name="editing">
            <SetProperty target="{confirmIcon}" property="opacity" value="1"/>
            <SetProperty target="{cancelIcon}" property="opacity" value="1"/>
            <SetProperty target="{fieldText}" property="color" value="white"/>
            <SetProperty target="{textEdit}" property="color" value="black"/>
            <SetProperty target="{textEdit}" property="readOnly" value="false"/>
            <SetProperty target="{textEdit}" property="focus" value="true"/>
            <SetProperty target="{editRegion}" property="opacity" value="0"/>
            <SetProperty target="{textEdit.anchors}" property="leftMargin" value="34"/>
            <SetProperty target="{textEdit.anchors}" property="rightMargin" value="34"/>
        </State>
    </states>
    <transitions>
        <Transition fromState='' toState="*" reversible="true">
            <NumericAnimation properties="opacity,leftMargin,rightMargin" duration="200"/>
            <ColorAnimation duration="150"/>
        </Transition>
    </transitions>
</Rect>