Socialify

Folder ..

Viewing CompactRepresentation.qml 
161 lines (136 loc) • 4.3 KB

  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
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
import QtQuick 2.0
import QtQuick.Layouts 1.3

import org.kde.plasma.core 2.0 as PlasmaCore
import org.kde.plasma.extras 2.0 as PlasmaExtras
import org.kde.plasma.components 2.0 as PlasmaComponents

RowLayout {
    id: root
    property bool showHightlight: false
    property Item selectedItem: notificationsStatusIcon
    property ListModel icons

    property var iconSize: 24

    MouseArea {
        anchors.fill: parent
        hoverEnabled: true
        acceptedButtons: Qt.LeftButton

        property bool wasExpanded: false
        onPressed: {
            if (mouse.button == Qt.LeftButton) {
                wasExpanded = expandedView.visible
            }
        }
        onClicked: {
            if (mouse.button == Qt.LeftButton) {
                if (!wasExpanded) {
                    expandedView.display()
                } else {
                    expandedView.hide()
                }
            }
        }
    }

    Loader {
        id: notificationsStatusIcon
        Layout.alignment: Qt.AlignHCenter
        Layout.minimumWidth: root.height
        Layout.maximumWidth: root.height
        Layout.fillHeight: true

        sourceComponent: notifications.statusIcon

        MouseArea {
            anchors.fill: parent
            propagateComposedEvents: true
            onClicked: {
                print("showing status panel")
                fullRepresentation.showStatusView()
                selectedItem = notificationsStatusIcon
                mouse.accepted = false
            }
        }
    }
    Loader {
        id: netwrokingStatusIcon
        Layout.alignment: Qt.AlignHCenter
        Layout.minimumWidth: root.height
        Layout.maximumWidth: root.height
        Layout.fillHeight: true

        sourceComponent: networking.statusIcon

        MouseArea {
            anchors.fill: parent
            propagateComposedEvents: true
            onClicked: {
                fullRepresentation.showNetworkingView()
                selectedItem = netwrokingStatusIcon
                mouse.accepted = false
            }
        }
    }

    Loader {
        id: audioStatusIcon
        Layout.alignment: Qt.AlignHCenter
        Layout.minimumWidth: root.height
        Layout.maximumWidth: root.height
        Layout.fillHeight: true

        sourceComponent: audio.statusIcon

        MouseArea {
            anchors.fill: parent
            propagateComposedEvents: true
            onClicked: {
                fullRepresentation.showAudioView()
                selectedItem = audioStatusIcon
                mouse.accepted = false
            }
        }
    }

    Rectangle {
        id: higthlight

        height: 3

        Connections {
            target: root
            onSelectedItemChanged: {
                higthlight.y = selectedItem.y
                if (showHightlight) {
                    movingAnimation.from = higthlight.x
                    movingAnimation.to = selectedItem.x
                    movingAnimation.start()
                }
            }
        }

        //opacity: root.showHigthlight ? 1.0 : 0.0
        color: "#3DAEE9" // PlasmaCore.Theme.highlightColor

        NumberAnimation on x {
            id: movingAnimation
            easing.type: Easing.InOutQuad
        }

        NumberAnimation on opacity {
            id: fadeAnimation
            easing.type: Easing.InOutQuad
        }

        NumberAnimation on width {
            id: resizeAnimation
            easing.type: Easing.InOutQuad
        }

        Component.onCompleted: {
            width = root.width
            opacity = 0
            y = root.y
        }
    }

    onShowHightlightChanged: {
        fadeAnimation.complete()
        resizeAnimation.complete()
        movingAnimation.complete()

        higthlight.y = root.y

        if (showHightlight) {
            movingAnimation.to = selectedItem.x
            fadeAnimation.to = 1
            resizeAnimation.to = selectedItem.width
        } else {
            movingAnimation.to = root.x
            fadeAnimation.to = 0
            resizeAnimation.to = root.width
        }

        movingAnimation.start()
        resizeAnimation.start()
        fadeAnimation.start()
    }
}