git.iko.soy/unity8
on xenial help sign in
first stab at new window decorations
31be9b0Lukáš Tinkl
qml/Components/WindowControlButtons.qml+75−30
compare with xenial
unifiedsplit
@@ -1,5 +1,5 @@
1/*
1/*
2− * Copyright (C) 2014 Canonical, Ltd.
2+ * Copyright (C) 2014-2015 Canonical, Ltd.
3 *
3 *
4 * This program is free software; you can redistribute it and/or modify
4 * This program is free software; you can redistribute it and/or modify
5 * it under the terms of the GNU General Public License as published by
5 * it under the terms of the GNU General Public License as published by
@@ -12,52 +12,97 @@
12 *
12 *
13 * You should have received a copy of the GNU General Public License
13 * You should have received a copy of the GNU General Public License
14 * along with this program. If not, see <http://www.gnu.org/licenses/>.
14 * along with this program. If not, see <http://www.gnu.org/licenses/>.
15− *
16− * Authors: Michael Zanetti <michael.zanetti@canonical.com>
17 */
15 */
18
16
19−import QtQuick 2.3
17+import QtQuick 2.4
20−import Ubuntu.Components 1.1
18+import Ubuntu.Components 1.3
21
19
22Row {
20Row {
23 id: root
21 id: root
24− spacing: units.gu(0.5)
22+ spacing: units.gu(1)
23+
24+ // to be set from outside
25+ property bool active: false
25
26
26 signal close()
27 signal close()
27 signal minimize()
28 signal minimize()
28 signal maximize()
29 signal maximize()
29
30
30− Rectangle {
31+ MouseArea {
32+ id: closeWindowButton
31 objectName: "closeWindowButton"
33 objectName: "closeWindowButton"
34+ hoverEnabled: true
32− height: parent.height; width: height; radius: height / 2
35+ height: parent.height
33− gradient: Gradient {
36+ width: height
34− GradientStop { color: "#F49073"; position: 0 }
37+ onClicked: root.close()
35− GradientStop { color: "#DF4F1C"; position: 1 }
38+
39+ Rectangle {
40+ anchors.centerIn: parent
41+ width: units.gu(2)
42+ height: units.gu(2)
43+ radius: height / 2
44+ color: "#ed3146"
45+ visible: parent.containsMouse
46+ }
47+ Icon {
48+ width: height
49+ height: parent.height *.5
50+ anchors.centerIn: parent
51+ source: "graphics/window-close.svg"
52+ color: root.active ? "white" : "#5d5d5d"
53+ keyColor: "black"
36 }
54 }
37− border.width: units.dp(.5)
38− border.color: "black"
39− MouseArea { anchors.fill: parent; onClicked: root.close() }
40 }
55 }
41− Rectangle {
56+
57+ MouseArea {
58+ id: minimizeWindowButton
42 objectName: "minimizeWindowButton"
59 objectName: "minimizeWindowButton"
60+ hoverEnabled: true
43− height: parent.height; width: height; radius: height / 2
61+ height: parent.height
44− gradient: Gradient {
62+ width: height
45− GradientStop { color: "#92918C"; position: 0 }
63+ onClicked: root.minimize()
46− GradientStop { color: "#5E5D58"; position: 1 }
64+
65+ Rectangle {
66+ anchors.centerIn: parent
67+ width: units.gu(2)
68+ height: units.gu(2)
69+ radius: height / 2
70+ color: "#888888"
71+ visible: parent.containsMouse
72+ }
73+ Icon {
74+ width: height
75+ height: parent.height *.5
76+ anchors.centerIn: parent
77+ source: "graphics/window-minimize.svg"
78+ color: root.active ? "white" : "#5d5d5d"
79+ keyColor: "black"
47 }
80 }
48− border.width: units.dp(.5)
49− border.color: "black"
50− MouseArea { anchors.fill: parent; onClicked: root.minimize() }
51 }
81 }
52− Rectangle {
82+
83+ MouseArea {
84+ id: maximizeWindowButton
53 objectName: "maximizeWindowButton"
85 objectName: "maximizeWindowButton"
86+ hoverEnabled: true
54− height: parent.height; width: height; radius: height / 2
87+ height: parent.height
55− gradient: Gradient {
88+ width: height
56− GradientStop { color: "#92918C"; position: 0 }
89+ onClicked: root.maximize()
57− GradientStop { color: "#5E5D58"; position: 1 }
90+
91+ Rectangle {
92+ anchors.centerIn: parent
93+ width: units.gu(2)
94+ height: units.gu(2)
95+ radius: height / 2
96+ color: "#888888"
97+ visible: parent.containsMouse
98+ }
99+ Icon {
100+ width: height
101+ height: parent.height *.5
102+ anchors.centerIn: parent
103+ source: "graphics/window-maximize.svg"
104+ color: root.active ? "white" : "#5d5d5d"
105+ keyColor: "black"
58 }
106 }
59− border.width: units.dp(.5)
60− border.color: "black"
61− MouseArea { anchors.fill: parent; onClicked: root.maximize() }
62 }
107 }
63}
108}
qml/Components/graphics/window-close.svgnew file+44
@@ -0,0 +1,44 @@
1+<?xml version="1.0" encoding="iso-8859-1"?>
2+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
3+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
4+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
5+ width="94.926px" height="94.926px" viewBox="0 0 94.926 94.926" style="enable-background:new 0 0 94.926 94.926;"
6+ xml:space="preserve">
7+<g>
8+ <path d="M55.931,47.463L94.306,9.09c0.826-0.827,0.826-2.167,0-2.994L88.833,0.62C88.436,0.224,87.896,0,87.335,0
9+ c-0.562,0-1.101,0.224-1.498,0.62L47.463,38.994L9.089,0.62c-0.795-0.795-2.202-0.794-2.995,0L0.622,6.096
10+ c-0.827,0.827-0.827,2.167,0,2.994l38.374,38.373L0.622,85.836c-0.827,0.827-0.827,2.167,0,2.994l5.473,5.476
11+ c0.397,0.396,0.936,0.62,1.498,0.62s1.1-0.224,1.497-0.62l38.374-38.374l38.374,38.374c0.397,0.396,0.937,0.62,1.498,0.62
12+ s1.101-0.224,1.498-0.62l5.473-5.476c0.826-0.827,0.826-2.167,0-2.994L55.931,47.463z"/>
13+</g>
14+<g>
15+</g>
16+<g>
17+</g>
18+<g>
19+</g>
20+<g>
21+</g>
22+<g>
23+</g>
24+<g>
25+</g>
26+<g>
27+</g>
28+<g>
29+</g>
30+<g>
31+</g>
32+<g>
33+</g>
34+<g>
35+</g>
36+<g>
37+</g>
38+<g>
39+</g>
40+<g>
41+</g>
42+<g>
43+</g>
44+</svg>
qml/Components/graphics/window-maximize.svgnew file+42
@@ -0,0 +1,42 @@
1+<?xml version="1.0" encoding="iso-8859-1"?>
2+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
3+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
4+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
5+ width="459px" height="459px" viewBox="0 0 459 459" style="enable-background:new 0 0 459 459;" xml:space="preserve">
6+<g>
7+ <g id="check-box-outline-blank">
8+ <path d="M408,51v357H51V51H408 M408,0H51C22.95,0,0,22.95,0,51v357c0,28.05,22.95,51,51,51h357c28.05,0,51-22.95,51-51V51
9+ C459,22.95,436.05,0,408,0L408,0z"/>
10+ </g>
11+</g>
12+<g>
13+</g>
14+<g>
15+</g>
16+<g>
17+</g>
18+<g>
19+</g>
20+<g>
21+</g>
22+<g>
23+</g>
24+<g>
25+</g>
26+<g>
27+</g>
28+<g>
29+</g>
30+<g>
31+</g>
32+<g>
33+</g>
34+<g>
35+</g>
36+<g>
37+</g>
38+<g>
39+</g>
40+<g>
41+</g>
42+</svg>
qml/Components/graphics/window-minimize.svgnew file+43
@@ -0,0 +1,43 @@
1+<?xml version="1.0" encoding="iso-8859-1"?>
2+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
3+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
4+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
5+ width="121.805px" height="121.804px" viewBox="0 0 121.805 121.804" style="enable-background:new 0 0 121.805 121.804;"
6+ xml:space="preserve">
7+<g>
8+ <g>
9+ <path d="M7.308,68.211h107.188c4.037,0,7.309-3.272,7.309-7.31c0-4.037-3.271-7.309-7.309-7.309H7.308
10+ C3.272,53.593,0,56.865,0,60.902C0,64.939,3.272,68.211,7.308,68.211z"/>
11+ </g>
12+</g>
13+<g>
14+</g>
15+<g>
16+</g>
17+<g>
18+</g>
19+<g>
20+</g>
21+<g>
22+</g>
23+<g>
24+</g>
25+<g>
26+</g>
27+<g>
28+</g>
29+<g>
30+</g>
31+<g>
32+</g>
33+<g>
34+</g>
35+<g>
36+</g>
37+<g>
38+</g>
39+<g>
40+</g>
41+<g>
42+</g>
43+</svg>
qml/Panel/Panel.qml+8−11
@@ -36,13 +36,10 @@ Item {
36 id: darkenedArea
36 id: darkenedArea
37 property real darkenedOpacity: 0.6
37 property real darkenedOpacity: 0.6
38 anchors {
38 anchors {
39− top: parent.top
39+ fill: parent
40 topMargin: panelHeight
40 topMargin: panelHeight
41− left: parent.left
42− right: parent.right
43− bottom: parent.bottom
44 }
41 }
45− color: "black"
42+ color: "#333333"
46 opacity: indicators.unitProgress * darkenedOpacity
43 opacity: indicators.unitProgress * darkenedOpacity
47 visible: !indicators.fullyClosed
44 visible: !indicators.fullyClosed
48
45
@@ -82,7 +79,7 @@ Item {
82
79
83 Rectangle {
80 Rectangle {
84 id: indicatorAreaBackground
81 id: indicatorAreaBackground
85− color: callHint.visible ? "green" : "black"
82+ color: callHint.visible ? "green" : "#333333"
86 anchors {
83 anchors {
87 top: parent.top
84 top: parent.top
88 left: parent.left
85 left: parent.left
@@ -182,16 +179,16 @@ Item {
182 id: titleLabel
179 id: titleLabel
183 objectName: "windowDecorationTitle"
180 objectName: "windowDecorationTitle"
184 anchors {
181 anchors {
185− left: windowControlButtons.right
182+ left: PanelState.buttonsVisible ? windowControlButtons.right : parent.left // FIXME this should be separate from the buttons, also based on LIM
186 top: parent.top
183 top: parent.top
187 margins: units.gu(0.7)
184 margins: units.gu(0.7)
188 }
185 }
189− color: "#DFDBD2"
186+ color: PanelState.buttonsVisible ? "#ffffff" : "#5d5d5d"
190 height: windowControlButtons.height
187 height: windowControlButtons.height
191− visible: windowControlButtons.visible
188+ visible: true // TODO the title should exchange with the menu on mouse hover
192 verticalAlignment: Text.AlignVCenter
189 verticalAlignment: Text.AlignVCenter
193− fontSize: "small"
190+ fontSize: "medium"
194− font.bold: true
191+ font.weight: Font.Light
195 text: PanelState.title
192 text: PanelState.title
196 }
193 }
197
194
qml/Stages/DecoratedWindow.qml+1−1
@@ -58,7 +58,7 @@ FocusScope {
58 anchors { left: selectionHighlight.left; right: selectionHighlight.right; bottom: selectionHighlight.bottom; }
58 anchors { left: selectionHighlight.left; right: selectionHighlight.right; bottom: selectionHighlight.bottom; }
59 height: units.dp(2)
59 height: units.dp(2)
60 color: UbuntuColors.orange
60 color: UbuntuColors.orange
61− visible: root.highlightShown
61+ visible: highlightShown
62 }
62 }
63
63
64 WindowDecoration {
64 WindowDecoration {
qml/Stages/DesktopStage.qml+1−1
@@ -183,7 +183,7 @@ Rectangle {
183 Binding {
183 Binding {
184 target: PanelState
184 target: PanelState
185 property: "buttonsVisible"
185 property: "buttonsVisible"
186− value: priv.focusedAppDelegate !== null && priv.focusedAppDelegate.maximized
186+ value: priv.focusedAppDelegate !== null && priv.focusedAppDelegate.maximized // FIXME for LIM
187 }
187 }
188
188
189 Binding {
189 Binding {
qml/Stages/WindowDecoration.qml+12−10
@@ -64,20 +64,22 @@ MouseArea {
64 anchors.fill: parent
64 anchors.fill: parent
65 anchors.bottomMargin: -radius
65 anchors.bottomMargin: -radius
66 radius: units.gu(.5)
66 radius: units.gu(.5)
67− gradient: Gradient {
67+ color: "#333333"
68− GradientStop { color: "#626055"; position: 0 }
69− GradientStop { color: "#3C3B37"; position: 1 }
70− }
71 }
68 }
72
69
73 Row {
70 Row {
71+ anchors {
74− anchors { fill: parent; margins: units.gu(0.7) }
72+ fill: parent
73+ leftMargin: units.gu(1)
74+ topMargin: units.gu(0.5)
75+ bottomMargin: units.gu(0.5)
76+ }
75− spacing: units.gu(1)
77+ spacing: units.gu(3)
76− opacity: root.active ? 1 : 0.5
77
78
78 WindowControlButtons {
79 WindowControlButtons {
79 id: buttons
80 id: buttons
80 height: parent.height
81 height: parent.height
82+ active: root.active
81 onClose: root.close();
83 onClose: root.close();
82 onMinimize: root.minimize();
84 onMinimize: root.minimize();
83 onMaximize: root.maximize();
85 onMaximize: root.maximize();
@@ -86,12 +88,12 @@ MouseArea {
86 Label {
88 Label {
87 id: titleLabel
89 id: titleLabel
88 objectName: "windowDecorationTitle"
90 objectName: "windowDecorationTitle"
89− color: "#DFDBD2"
91+ color: root.active ? "white" : "#5d5d5d"
90 height: parent.height
92 height: parent.height
91 width: parent.width - buttons.width - parent.anchors.rightMargin - parent.anchors.leftMargin
93 width: parent.width - buttons.width - parent.anchors.rightMargin - parent.anchors.leftMargin
92 verticalAlignment: Text.AlignVCenter
94 verticalAlignment: Text.AlignVCenter
93− fontSize: "small"
95+ fontSize: "medium"
94− font.bold: true
96+ font.weight: Font.Light
95 elide: Text.ElideRight
97 elide: Text.ElideRight
96 }
98 }
97 }
99 }