← Back to branch summary

~dandrader/unity8/multiSurfaceApp

« back to all changes in this revision

Viewing changes to qml/Panel/Panel.qml

  • Committer: CI Train Bot
  • Author(s): Lukáš Tinkl
  • Date: 2015-11-26 13:50:27 UTC
  • mfrom: (2021.5.56 newWindowDecosAndPanel)
  • Revision ID: ci-train-bot@canonical.com-20151126135027-xdm36oa93o60ai97
Implement new visuals for panel and window decorations Fixes: #1493066, #1497095, #1511020
Approved by: Daniel d'Andrada

Show diffs side-by-side

added added

removed removed

Lines of Context:
qml/Panel/Panel.qml
30
30
    property real indicatorAreaShowProgress: 1.0
31
31
    property bool locked: false
32
32
 
33
 
    opacity: fullscreenMode && indicators.fullyClosed ? 0.0 : 1.0
34
 
 
35
 
    Binding {
36
 
        target: PanelState
37
 
        property: "panelHeight"
38
 
        value: root.panelHeight
39
 
    }
40
 
 
41
33
    Rectangle {
42
34
        id: darkenedArea
43
35
        property real darkenedOpacity: 0.6
44
36
        anchors {
45
 
            top: parent.top
 
37
            fill: parent
46
38
            topMargin: panelHeight
47
 
            left: parent.left
48
 
            right: parent.right
49
 
            bottom: parent.bottom
50
39
        }
51
40
        color: "black"
52
41
        opacity: indicators.unitProgress * darkenedOpacity
59
48
        }
60
49
    }
61
50
 
 
51
    Binding {
 
52
        target: PanelState
 
53
        property: "panelHeight"
 
54
        value: indicators.minimizedPanelHeight
 
55
    }
 
56
 
62
57
    Item {
63
58
        id: indicatorArea
64
59
        objectName: "indicatorArea"
65
60
 
66
61
        anchors.fill: parent
67
62
 
68
 
        Behavior on anchors.topMargin {
69
 
            NumberAnimation { duration: UbuntuAnimation.FastDuration; easing: UbuntuAnimation.StandardEasing }
70
 
        }
71
 
 
72
63
        transform: Translate {
73
64
            y: indicators.state === "initial"
74
65
                ? (1.0 - indicatorAreaShowProgress) * -d.indicatorHeight
76
67
        }
77
68
 
78
69
        BorderImage {
79
 
            id: dropShadow
 
70
            id: indicatorsDropShadow
80
71
            anchors {
81
72
                fill: indicators
82
73
                leftMargin: -units.gu(1)
86
77
            source: "graphics/rectangular_dropshadow.sci"
87
78
        }
88
79
 
 
80
        BorderImage {
 
81
            id: panelDropShadow
 
82
            anchors {
 
83
                fill: indicatorAreaBackground
 
84
                bottomMargin: -units.gu(1)
 
85
            }
 
86
            visible: PanelState.dropShadow && !callHint.visible
 
87
            source: "graphics/rectangular_dropshadow.sci"
 
88
        }
 
89
 
89
90
        Rectangle {
90
91
            id: indicatorAreaBackground
91
 
            color: callHint.visible ? "green" : "black"
 
92
            color: callHint.visible ? "green" : "#292929"
92
93
            anchors {
93
94
                top: parent.top
94
95
                left: parent.left
99
100
            Behavior on color { ColorAnimation { duration: UbuntuAnimation.FastDuration } }
100
101
        }
101
102
 
102
 
        PanelSeparatorLine {
103
 
            id: orangeLine
104
 
            anchors {
105
 
                top: indicatorAreaBackground.bottom
106
 
                left: parent.left
107
 
                right: indicators.left
108
 
            }
109
 
            saturation: 1 - indicators.unitProgress
110
 
 
111
 
            // Don't let input event pass trough
112
 
            MouseArea { anchors.fill: parent }
113
 
        }
114
 
 
115
 
        Image {
116
 
            anchors {
117
 
                top: indicators.top
118
 
                bottom: indicators.bottom
119
 
                right: indicators.left
120
 
                topMargin: indicatorArea.anchors.topMargin + indicators.minimizedPanelHeight
121
 
            }
122
 
            width: units.dp(2)
123
 
            source: "graphics/VerticalDivider.png"
124
 
        }
125
 
 
126
103
        MouseArea {
127
104
            anchors {
128
105
                top: parent.top
130
107
                right: indicators.left
131
108
            }
132
109
            height: indicators.minimizedPanelHeight
133
 
            onClicked: { if (callHint.visible) { callHint.showLiveCall(); } }
 
110
            hoverEnabled: true
 
111
            onClicked: callHint.visible ? callHint.showLiveCall() : PanelState.focusMaximizedApp()
 
112
            onDoubleClicked: PanelState.maximize()
 
113
 
 
114
            // WindowControlButtons inside the mouse area, otherwise QML doesn't grok nested hover events :/
 
115
            // cf. https://bugreports.qt.io/browse/QTBUG-32909
 
116
            WindowControlButtons {
 
117
                id: windowControlButtons
 
118
                objectName: "panelWindowControlButtons"
 
119
                anchors {
 
120
                    left: parent.left
 
121
                    top: parent.top
 
122
                    leftMargin: units.gu(1)
 
123
                    topMargin: units.gu(0.5)
 
124
                    bottomMargin: units.gu(0.5)
 
125
                }
 
126
                height: indicators.minimizedPanelHeight - anchors.topMargin - anchors.bottomMargin
 
127
                visible: PanelState.buttonsVisible && parent.containsMouse && !root.locked && !callHint.visible
 
128
                active: PanelState.buttonsVisible
 
129
                onClose: PanelState.close()
 
130
                onMinimize: PanelState.minimize()
 
131
                onMaximize: PanelState.maximize()
 
132
            }
134
133
        }
135
134
 
136
135
        IndicatorsMenu {
146
145
            width: root.width - (windowControlButtons.visible ? windowControlButtons.width + titleLabel.width : 0)
147
146
            minimizedPanelHeight: units.gu(3)
148
147
            expandedPanelHeight: units.gu(7)
149
 
            openedHeight: root.height - indicatorOrangeLine.height
 
148
            openedHeight: root.height
150
149
 
151
150
            overFlowWidth: {
152
151
                if (callHint.visible) {
163
162
                    callHint.showLiveCall();
164
163
                }
165
164
            }
166
 
 
167
 
            hideDragHandle {
168
 
                anchors.bottomMargin: -indicatorOrangeLine.height
169
 
            }
170
 
        }
171
 
 
172
 
        WindowControlButtons {
173
 
            id: windowControlButtons
174
 
            objectName: "panelWindowControlButtons"
175
 
            anchors {
176
 
                left: parent.left
177
 
                top: parent.top
178
 
                margins: units.gu(0.7)
179
 
            }
180
 
            height: indicators.minimizedPanelHeight - anchors.margins * 2
181
 
            visible: PanelState.buttonsVisible && !root.locked
182
 
            onClose: PanelState.close()
183
 
            onMinimize: PanelState.minimize()
184
 
            onMaximize: PanelState.maximize()
185
165
        }
186
166
 
187
167
        Label {
188
168
            id: titleLabel
189
169
            objectName: "windowDecorationTitle"
190
170
            anchors {
191
 
                left: windowControlButtons.right
 
171
                left: parent.left
192
172
                top: parent.top
193
 
                margins: units.gu(0.7)
 
173
                leftMargin: units.gu(1)
 
174
                topMargin: units.gu(0.5)
 
175
                bottomMargin: units.gu(0.5)
194
176
            }
195
 
            color: "#DFDBD2"
196
 
            height: windowControlButtons.height
197
 
            visible: windowControlButtons.visible
 
177
            color: PanelState.buttonsVisible ? "#ffffff" : "#5d5d5d"
 
178
            height: indicators.minimizedPanelHeight - anchors.topMargin - anchors.bottomMargin
 
179
            visible: !windowControlButtons.visible && !root.locked && !callHint.visible
198
180
            verticalAlignment: Text.AlignVCenter
199
 
            fontSize: "small"
200
 
            font.bold: true
 
181
            fontSize: "medium"
 
182
            font.weight: Font.Normal
201
183
            text: PanelState.title
202
184
        }
203
185
 
204
 
        PanelSeparatorLine {
205
 
            id: indicatorOrangeLine
206
 
            anchors {
207
 
                top: indicators.bottom
208
 
                left: indicators.left
209
 
                right: indicators.right
210
 
            }
211
 
        }
 
186
        // TODO here would the Locally integrated menus come
212
187
 
213
188
        ActiveCallHint {
214
189
            id: __callHint
215
190
            anchors {
216
191
                top: parent.top
217
 
                left: windowControlButtons.visible ? windowControlButtons.right : parent.left
 
192
                left: parent.left
218
193
            }
219
194
            height: indicators.minimizedPanelHeight
220
195
            visible: active && indicators.state == "initial"
224
199
    QtObject {
225
200
        id: d
226
201
        objectName: "panelPriv"
227
 
        readonly property real indicatorHeight: indicators.minimizedPanelHeight + indicatorOrangeLine.height
 
202
        readonly property real indicatorHeight: indicators.minimizedPanelHeight
228
203
    }
229
204
 
230
205
    states: [
234
209
            PropertyChanges {
235
210
                target: indicatorArea;
236
211
                anchors.topMargin: 0
 
212
                opacity: 1;
237
213
            }
238
214
        },
239
215
        State {
242
218
            PropertyChanges {
243
219
                target: indicatorArea;
244
220
                anchors.topMargin: indicators.state === "initial" ? -d.indicatorHeight : 0
 
221
                opacity: indicators.fullyClosed ? 0.0 : 1.0
245
222
            }
246
223
            PropertyChanges {
247
224
                target: indicators.showDragHandle;
249
226
            }
250
227
        }
251
228
    ]
 
229
 
 
230
    transitions: [
 
231
        Transition {
 
232
            to: "onscreen"
 
233
            UbuntuNumberAnimation { target: indicatorArea; properties: "anchors.topMargin,opacity" }
 
234
        },
 
235
        Transition {
 
236
            to: "offscreen"
 
237
            UbuntuNumberAnimation { target: indicatorArea; properties: "anchors.topMargin,opacity" }
 
238
        }
 
239
    ]
252
240
}