on xenial help sign in
Ensure search panel label is not overflowed by indicator icons
1c015aeNick Dedekind
Panel/Panel.qml+33−4
@@ -31,6 +31,8 @@ Item {
31
31
32 signal searchClicked
32 signal searchClicked
33
33
34+ property real backgroundY: 0
35+
34 PanelBackground {
36 PanelBackground {
35 id: panelBackground
37 id: panelBackground
36 anchors {
38 anchors {
@@ -38,7 +40,7 @@ Item {
38 right: parent.right
40 right: parent.right
39 }
41 }
40 height: __panelMinusSeparatorLineHeight
42 height: __panelMinusSeparatorLineHeight
41− y: 0
43+ y: backgroundY
42
44
43 Behavior on y { StandardAnimation {} }
45 Behavior on y { StandardAnimation {} }
44 }
46 }
@@ -109,6 +111,34 @@ Item {
109 source: "graphics/rectangular_dropshadow.sci"
111 source: "graphics/rectangular_dropshadow.sci"
110 }
112 }
111
113
114+ PanelBackground {
115+ id: backgroundSearch
116+ height: __panelMinusSeparatorLineHeight
117+ y: backgroundY
118+ anchors {
119+ left: parent.left
120+ right: search.right
121+ }
122+ clip: false
123+ opacity: search.state=="visible" ? 1.0 : 0.0
124+
125+ Rectangle {
126+ id: backgroundGradient
127+ anchors {
128+ left: parent.right
129+ }
130+ width: __panelMinusSeparatorLineHeight
131+ height: __panelMinusSeparatorLineHeight
132+ rotation: 90
133+ gradient: Gradient {
134+ GradientStop { position: 0.0; color: "transparent" }
135+ GradientStop { position: 1.0; color: backgroundSearch.color }
136+ }
137+ }
138+ Behavior on y { StandardAnimation {} }
139+ Behavior on opacity { StandardAnimation {} }
140+ }
141+
112 SearchIndicator {
142 SearchIndicator {
113 id: search
143 id: search
114 objectName: "search"
144 objectName: "search"
@@ -127,7 +157,6 @@ Item {
127 return "hidden";
157 return "hidden";
128 }
158 }
129
159
130− width: units.gu(13)
131 height: __panelMinusSeparatorLineHeight
160 height: __panelMinusSeparatorLineHeight
132 anchors {
161 anchors {
133 top: panelBackground.top
162 top: panelBackground.top
@@ -141,12 +170,12 @@ Item {
141 State {
170 State {
142 name: "in" //fully opaque and visible at top edge of screen
171 name: "in" //fully opaque and visible at top edge of screen
143 when: !fullscreenMode
172 when: !fullscreenMode
144− PropertyChanges { target: panelBackground; y: 0 }
173+ PropertyChanges { target: root; backgroundY: 0 }
145 },
174 },
146 State {
175 State {
147 name: "out" //pushed off screen
176 name: "out" //pushed off screen
148 when: fullscreenMode
177 when: fullscreenMode
149− PropertyChanges { target: panelBackground; y: -panelHeight }
178+ PropertyChanges { target: root; backgroundY: -panelHeight }
150 }
179 }
151 ]
180 ]
152}
181}
Panel/SearchIndicator.qml+8−7
@@ -21,7 +21,7 @@ import "../Components"
21Item {
21Item {
22 id: search
22 id: search
23
23
24− width: units.gu(9)
24+ width: container.width + units.gu(2)
25 height: units.gu(3)
25 height: units.gu(3)
26
26
27 property string headerText: i18n.tr("Search")
27 property string headerText: i18n.tr("Search")
@@ -34,12 +34,17 @@ Item {
34 onClicked: search.clicked()
34 onClicked: search.clicked()
35 }
35 }
36
36
37− Item {
37+ Row {
38 id: container
38 id: container
39 objectName: "container"
39 objectName: "container"
40
40
41− width: parent.width
42 height: parent.height
41 height: parent.height
42+ width: childrenRect.width
43+ anchors {
44+ left: parent.left
45+ leftMargin: units.gu(1)
46+ }
47+ spacing: units.gu(1)
43
48
44 Behavior on opacity { StandardAnimation {} }
49 Behavior on opacity { StandardAnimation {} }
45
50
@@ -47,8 +52,6 @@ Item {
47 id: icon
52 id: icon
48 source: "graphics/search.png"
53 source: "graphics/search.png"
49 anchors.verticalCenter: parent.verticalCenter
54 anchors.verticalCenter: parent.verticalCenter
50− anchors.left: parent.left
51− anchors.leftMargin: units.gu(1)
52 }
55 }
53
56
54 Label {
57 Label {
@@ -56,8 +59,6 @@ Item {
56 color: Qt.rgba(0.8, 0.8, 0.8, 1.0)
59 color: Qt.rgba(0.8, 0.8, 0.8, 1.0)
57 fontSize: "small"
60 fontSize: "small"
58 font.capitalization: Font.AllUppercase
61 font.capitalization: Font.AllUppercase
59− anchors.left: icon.right
60− anchors.leftMargin: units.gu(1)
61 anchors.verticalCenter: parent.verticalCenter
62 anchors.verticalCenter: parent.verticalCenter
62 }
63 }
63 }
64 }