[prev in list] [next in list] [prev in thread] [next in thread]
List: kde-panel-devel
Subject: Re: Review Request 122717: Improve tooltip layouting
From: "David Edmundson" <david () davidedmundson ! co ! uk>
Date: 2015-02-25 19:33:57
Message-ID: 20150225193357.12884.94185 () probe ! kde ! org
[Download RAW message or body]
--===============1307062902397354801==
MIME-Version: 1.0
Content-Type: text/plain; charset="utf-8"
Content-Transfer-Encoding: 8bit
-----------------------------------------------------------
This is an automatically generated e-mail. To reply, visit:
https://git.reviewboard.kde.org/r/122717/#review76633
-----------------------------------------------------------
src/declarativeimports/core/private/DefaultToolTip.qml
<https://git.reviewboard.kde.org/r/122717/#comment52787>
either icon or image should check if the other is set.
Showing both will explode (the old code would have done this too)
src/declarativeimports/core/private/DefaultToolTip.qml
<https://git.reviewboard.kde.org/r/122717/#comment52788>
you shouldn't set a width in a layout.
The layout will override anything you set.
Either use property int _width like in the text, or just set implicitWidth \
directly.
Layout.preferedWidth defaults to implicitWidth so you can keep things shorter \
that way.
- David Edmundson
On Feb. 25, 2015, 5:27 p.m., Sebastian Kügler wrote:
>
> -----------------------------------------------------------
> This is an automatically generated e-mail. To reply, visit:
> https://git.reviewboard.kde.org/r/122717/
> -----------------------------------------------------------
>
> (Updated Feb. 25, 2015, 5:27 p.m.)
>
>
> Review request for Plasma.
>
>
> Repository: plasma-framework
>
>
> Description
> -------
>
> Improve tooltip layouting
>
> This patch ports the default tooltip away from custom spacing,
> positioning and Row/Column to QtQuick.Layouts. It makes the sizing more
> predictable, and the code more modern and readable. Tooltips feel to
> behave a bit smoother with this patch.
>
> In the process, this...
> - fixes spacing when no icon or image is set
> - limits the maximum height of the subtext to 8 lines (this prevents the
> klipper tooltip for example from growing super-high)
> - Makes the icon on the LHS proportional to the text
> - Limits the width a bit more to prevent super-wide tooltips
> - makes it use units.gridUnit throughout
>
> Changelog: Improve tooltip layout
>
> This is the more radical approach to https://git.reviewboard.kde.org/r/122715/
>
>
> Diffs
> -----
>
> src/declarativeimports/core/private/DefaultToolTip.qml d1be6ae
>
> Diff: https://git.reviewboard.kde.org/r/122717/diff/
>
>
> Testing
> -------
>
> Tested all applets' tooltips in the default panel
>
>
> File Attachments
> ----------------
>
> launcher (old)
> https://git.reviewboard.kde.org/media/uploaded/files/2015/02/25/a6c636ce-3aef-4d5a-82f0-d78f9dab19a1__old-kickoff.png
> pager (old)
> https://git.reviewboard.kde.org/media/uploaded/files/2015/02/25/fae793bb-2965-4a81-be27-08efce5b3838__old-pager.png
> kdeconnect (old)
> https://git.reviewboard.kde.org/media/uploaded/files/2015/02/25/fc079c52-be17-47cf-bd11-976aed566155__old-kdeconnect.png
> clock (old)
> https://git.reviewboard.kde.org/media/uploaded/files/2015/02/25/8214146b-cdd4-41d7-b406-f6fc404585cc__old-clock.png
> new-kickoff.png
> https://git.reviewboard.kde.org/media/uploaded/files/2015/02/25/9a96304f-1deb-4f57-9417-121a95b7ed03__new-kickoff.png
> new-pager.png
> https://git.reviewboard.kde.org/media/uploaded/files/2015/02/25/e2c5738f-e701-4a5e-a179-cedc6bb55181__new-pager.png
> new-kdeconnect.png
> https://git.reviewboard.kde.org/media/uploaded/files/2015/02/25/0c73a854-de8a-4dc2-bd57-c22e0700dbb5__new-kdeconnect.png
> new-clock.png
> https://git.reviewboard.kde.org/media/uploaded/files/2015/02/25/7311d304-cdf3-4bf2-8fdc-519d1a4c020d__new-clock.png
>
>
> Thanks,
>
> Sebastian Kügler
>
>
--===============1307062902397354801==
MIME-Version: 1.0
Content-Type: text/html; charset="utf-8"
Content-Transfer-Encoding: 8bit
<html>
<body>
<div style="font-family: Verdana, Arial, Helvetica, Sans-Serif;">
<table bgcolor="#f9f3c9" width="100%" cellpadding="12" style="border: 1px #c9c399 \
solid; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px;"> \
<tr> <td>
This is an automatically generated e-mail. To reply, visit:
<a href="https://git.reviewboard.kde.org/r/122717/">https://git.reviewboard.kde.org/r/122717/</a>
</td>
</tr>
</table>
<br />
<div>
<table width="100%" border="0" bgcolor="white" style="border: 1px solid #C0C0C0; \
border-collapse: collapse; margin: 2px padding: 2px;"> <thead>
<tr>
<th colspan="4" bgcolor="#F0F0F0" style="border-bottom: 1px solid #C0C0C0; \
font-size: 9pt; padding: 4px 8px; text-align: left;"> <a \
href="https://git.reviewboard.kde.org/r/122717/diff/3/?file=351759#file351759line64" \
style="color: black; font-weight: bold; text-decoration: \
underline;">src/declarativeimports/core/private/DefaultToolTip.qml</a> <span \
style="font-weight: normal;">
(Diff revision 3)
</span>
</th>
</tr>
</thead>
<tbody>
<tr>
<th bgcolor="#e9eaa8" style="border-right: 1px solid #C0C0C0;" \
align="right"><font size="2">57</font></th> <td bgcolor="#fdfebc" width="50%"><pre \
style="font-size: 8pt; line-height: 140%; margin: 0; "> <span \
class="k">x:</span> <span class="nx">_s</span></pre></td> <th bgcolor="#e9eaa8" \
style="border-left: 1px solid #C0C0C0; border-right: 1px solid #C0C0C0;" \
align="right"><font size="2">51</font></th> <td bgcolor="#fdfebc" width="50%"><pre \
style="font-size: 8pt; line-height: 140%; margin: 0; "> <span \
class="k">visible:</span> <span class="nx">toolTip</span> <span class="o">!=</span> \
<span class="kc">null</span> <span class="o">&&</span> <span \
class="nx">toolTip</span><span class="p">.</span><span class="nx">image</span> <span \
class="o">!=</span> <span class="s2">""</span></pre></td> </tr>
</tbody>
</table>
<div style="margin-left: 2em;">
<pre style="white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: \
-pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word;"><p style="padding: \
0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: \
inherit;">either icon or image should check if the other is set.</p> <p \
style="padding: 0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: \
inherit;">Showing both will explode (the old code would have done this too)</p></pre> \
</div> </div>
<br />
<div>
<table width="100%" border="0" bgcolor="white" style="border: 1px solid #C0C0C0; \
border-collapse: collapse; margin: 2px padding: 2px;"> <thead>
<tr>
<th colspan="4" bgcolor="#F0F0F0" style="border-bottom: 1px solid #C0C0C0; \
font-size: 9pt; padding: 4px 8px; text-align: left;"> <a \
href="https://git.reviewboard.kde.org/r/122717/diff/3/?file=351759#file351759line73" \
style="color: black; font-weight: bold; text-decoration: \
underline;">src/declarativeimports/core/private/DefaultToolTip.qml</a> <span \
style="font-weight: normal;">
(Diff revision 3)
</span>
</th>
</tr>
</thead>
<tbody>
<tr>
<th bgcolor="#e9eaa8" style="border-right: 1px solid #C0C0C0;" \
align="right"><font size="2">65</font></th> <td bgcolor="#fdfebc" width="50%"><pre \
style="font-size: 8pt; line-height: 140%; margin: 0; "> <span \
class="k"><span class="hl">source</span>:</span> <span class="nx">toolTip</span><span \
class="hl"> </span><span class="o"><span class="hl">!=</span></span><span class="hl"> \
</span><span class="kc"><span class="hl">undefined</span></span> <span \
class="o">&&</span> <span class="nx">toolTip</span><span \
class="p">.</span><span class="nx">icon</span> <span class="o">!=</span> <span \
class="kc"><span class="hl">null</span></span> <span class="o">?</span> <span \
class="k"><span class="hl">toolTip</span>.icon :</span> <span class="s2"><span \
class="hl">""</span></span></pre></td> <th bgcolor="#e9eaa8" \
style="border-left: 1px solid #C0C0C0; border-right: 1px solid #C0C0C0;" \
align="right"><font size="2">60</font></th> <td bgcolor="#fdfebc" width="50%"><pre \
style="font-size: 8pt; line-height: 140%; margin: 0; "> <span \
class="k"><span class="hl">width</span>:</span> <span class="nx">toolTip</span> <span \
class="o">&&</span> <span class="nx">toolTip</span><span \
class="p">.</span><span class="nx">icon</span> <span class="o">!=</span> <span \
class="s2"><span class="hl">""</span></span> <span class="o">?</span> <span \
class="k"><span class="hl">units</span>.icon<span class="hl">Sizes.medium</span> \
:</span> <span class="mi"><span class="hl">0</span></span></pre></td> </tr>
</tbody>
</table>
<div style="margin-left: 2em;">
<pre style="white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: \
-pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word;"><p style="padding: \
0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: inherit;">you \
shouldn't set a width in a layout. The layout will override anything you set.</p>
<p style="padding: 0;text-rendering: inherit;margin: 0;line-height: \
inherit;white-space: inherit;">Either use property int _width like in the text, or \
just set implicitWidth directly.</p> <p style="padding: 0;text-rendering: \
inherit;margin: 0;line-height: inherit;white-space: inherit;">Layout.preferedWidth \
defaults to implicitWidth so you can keep things shorter that way.</p></pre> </div>
</div>
<br />
<p>- David Edmundson</p>
<br />
<p>On February 25th, 2015, 5:27 p.m. UTC, Sebastian Kügler wrote:</p>
<table bgcolor="#fefadf" width="100%" cellspacing="0" cellpadding="12" style="border: \
1px #888a85 solid; border-radius: 6px; -moz-border-radius: 6px; \
-webkit-border-radius: 6px;"> <tr>
<td>
<div>Review request for Plasma.</div>
<div>By Sebastian Kügler.</div>
<p style="color: grey;"><i>Updated Feb. 25, 2015, 5:27 p.m.</i></p>
<div style="margin-top: 1.5em;">
<b style="color: #575012; font-size: 10pt;">Repository: </b>
plasma-framework
</div>
<h1 style="color: #575012; font-size: 10pt; margin-top: 1.5em;">Description </h1>
<table width="100%" bgcolor="#ffffff" cellspacing="0" cellpadding="10" \
style="border: 1px solid #b8b5a0"> <tr>
<td>
<pre style="margin: 0; padding: 0; white-space: pre-wrap; white-space: \
-moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: \
break-word;"><p style="padding: 0;text-rendering: inherit;margin: 0;line-height: \
inherit;white-space: inherit;">Improve tooltip layouting</p> <p style="padding: \
0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: inherit;">This \
patch ports the default tooltip away from custom spacing, positioning and Row/Column \
to QtQuick.Layouts. It makes the sizing more predictable, and the code more modern \
and readable. Tooltips feel to behave a bit smoother with this patch.</p>
<p style="padding: 0;text-rendering: inherit;margin: 0;line-height: \
inherit;white-space: inherit;">In the process, this...
- fixes spacing when no icon or image is set
- limits the maximum height of the subtext to 8 lines (this prevents the
klipper tooltip for example from growing super-high)
- Makes the icon on the LHS proportional to the text
- Limits the width a bit more to prevent super-wide tooltips
- makes it use units.gridUnit throughout</p>
<p style="padding: 0;text-rendering: inherit;margin: 0;line-height: \
inherit;white-space: inherit;">Changelog: Improve tooltip layout</p> <p \
style="padding: 0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: \
inherit;">This is the more radical approach to \
https://git.reviewboard.kde.org/r/122715/</p></pre> </td>
</tr>
</table>
<h1 style="color: #575012; font-size: 10pt; margin-top: 1.5em;">Testing </h1>
<table width="100%" bgcolor="#ffffff" cellspacing="0" cellpadding="10" style="border: \
1px solid #b8b5a0"> <tr>
<td>
<pre style="margin: 0; padding: 0; white-space: pre-wrap; white-space: \
-moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: \
break-word;"><p style="padding: 0;text-rendering: inherit;margin: 0;line-height: \
inherit;white-space: inherit;">Tested all applets' tooltips in the default \
panel</p></pre> </td>
</tr>
</table>
<h1 style="color: #575012; font-size: 10pt; margin-top: 1.5em;">Diffs</b> </h1>
<ul style="margin-left: 3em; padding-left: 0;">
<li>src/declarativeimports/core/private/DefaultToolTip.qml <span style="color: \
grey">(d1be6ae)</span></li>
</ul>
<p><a href="https://git.reviewboard.kde.org/r/122717/diff/" style="margin-left: \
3em;">View Diff</a></p>
<h1 style="color: #575012; font-size: 10pt; margin-top: 1.5em;">File Attachments \
</h1>
<li><a href="https://git.reviewboard.kde.org/media/uploaded/files/2015/02/25/a6c636ce-3aef-4d5a-82f0-d78f9dab19a1__old-kickoff.png">launcher \
(old)</a></li>
<li><a href="https://git.reviewboard.kde.org/media/uploaded/files/2015/02/25/fae793bb-2965-4a81-be27-08efce5b3838__old-pager.png">pager \
(old)</a></li>
<li><a href="https://git.reviewboard.kde.org/media/uploaded/files/2015/02/25/fc079c52-be17-47cf-bd11-976aed566155__old-kdeconnect.png">kdeconnect \
(old)</a></li>
<li><a href="https://git.reviewboard.kde.org/media/uploaded/files/2015/02/25/8214146b-cdd4-41d7-b406-f6fc404585cc__old-clock.png">clock \
(old)</a></li>
<li><a href="https://git.reviewboard.kde.org/media/uploaded/files/2015/02/25/9a96304f-1deb-4f57-9417-121a95b7ed03__new-kickoff.png">new-kickoff.png</a></li>
<li><a href="https://git.reviewboard.kde.org/media/uploaded/files/2015/02/25/e2c5738f-e701-4a5e-a179-cedc6bb55181__new-pager.png">new-pager.png</a></li>
<li><a href="https://git.reviewboard.kde.org/media/uploaded/files/2015/02/25/0c73a854-de8a-4dc2-bd57-c22e0700dbb5__new-kdeconnect.png">new-kdeconnect.png</a></li>
<li><a href="https://git.reviewboard.kde.org/media/uploaded/files/2015/02/25/7311d304-cdf3-4bf2-8fdc-519d1a4c020d__new-clock.png">new-clock.png</a></li>
</ul>
</td>
</tr>
</table>
</div>
</body>
</html>
--===============1307062902397354801==--
[Attachment #3 (text/plain)]
_______________________________________________
Plasma-devel mailing list
Plasma-devel@kde.org
https://mail.kde.org/mailman/listinfo/plasma-devel
[prev in list] [next in list] [prev in thread] [next in thread]
Configure |
About |
News |
Add a list |
Sponsored by KoreLogic