'Re: Review Request 122717: Improve tooltip layouting'

[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:       "Martin Klapetek" <martin.klapetek () gmail ! com>
Date:       2015-03-05 13:46:50
Message-ID: 20150305134650.6755.26820 () probe ! kde ! org
[Download RAW message or body]

--===============7536850710940190863==
MIME-Version: 1.0
Content-Type: text/plain; charset="utf-8"
Content-Transfer-Encoding: 8bit

> On Feb. 26, 2015, 11:10 p.m., Kai Uwe Broulik wrote:
> > I'm now getting most of my headlines elided or wrapped:
> > "K-\n Menü"
> > "99%. Wird\n geladen" (battery)
> > "Aktualisierung..." (updater)
> > "KM..." (rather than KMail)
> > "Volume at\n 45%" (kmix)
> > "Donnerst..." (rather than Donnerstag, digitalclock)
> 
> Lukáš Tinkl wrote:
> Yup, seeing the same here: http://developer.kde.org/~lukas/screenshots/tooltip.png
> 
> Sebastian Kügler wrote:
> Thanks for the feedback! This patch indeed shortens the max width a bit, so it's \
> likely the culprit.  
> Could you guys try changing 
> 
> property int preferredTextWidth: units.gridUnit * 20
> 
> to 25 or 30 and see if that fixes the problems? I'd like to not make it too wide, \
> so we'll need some testing here, I think. 
> Martin Klapetek wrote:
> 25 nor 30 does any difference here, in fact, not even 40 makes any difference at \
> all 
> Sebastian Kügler wrote:
> Thanks for the testing.
> 
> I've investigated a bit further, though without any conclusive solution. Let's take \
> a step back. 
> The implicitWidth of the text item (which is the width the text would be rendered \
> at in one single line without linebreaks) set min and max width of the surrounding \
> layout, which is propagated into the root item's Layout.min and Layout.max widths. \
> On my system (Intel, dunno if it makes a difference), this works correctly, the \
> dialog's size correctly makes the tooltip window resize and fit. 
> The bug we're seeing looks like the dialog size is not correctly scaled up, so the \
> text in the heading either breaks, or elides. What should happen here is that the \
> mainitems Layout sizing takes preference, and the tooltip window is scaled to the \
> content, not the other way around. 
> I'm puzzled for now.
> 
> David Edmundson wrote:
> Martin/ Lukas can you reproduce on the test case in \
> plasma-frameworkst/tests/tooltip.qml adding any new entries if needed 
> Can you set a rightAnchor on the topmost RowLayout and see if that fixes it?

The tests do work but not quite correct imo - \
http://paste.opensuse.org/images/52544878.png

Adding another tooltip:
```
        PlasmaCore.ToolTipArea {
            width: 300
            height: 50

            icon: "telepathy-kde"
            mainText: "Notifications"
            subText: "Display notifications and jobs"

            Rectangle {
                color: "green"
                anchors.fill: parent
            }

            Text {
                anchors.fill: parent
                text: "Notifications"
            }
        }
```

which mimicks the notifications applet tooltip shows only "Notificat...".

Also, adding right anchor breaks the tooltip altogether, makes it only about 20 \
pixels wide in all cases.

- Martin

-----------------------------------------------------------
This is an automatically generated e-mail. To reply, visit:
https://git.reviewboard.kde.org/r/122717/#review76692
-----------------------------------------------------------

On Feb. 26, 2015, 4:46 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. 26, 2015, 4:46 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
> 
> 

--===============7536850710940190863==
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 />

<blockquote style="margin-left: 1em; border-left: 2px solid #d0d0d0; padding-left: \
10px;">  <p style="margin-top: 0;">On February 26th, 2015, 11:10 p.m. CET, <b>Kai Uwe \
Broulik</b> wrote:</p>  <blockquote style="margin-left: 1em; border-left: 2px solid \
#d0d0d0; padding-left: 10px;">  <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;">I'm now getting most of my headlines elided or \
wrapped: "K-\n Menü"
"99%. Wird\n geladen" (battery)
"Aktualisierung..." (updater)
"KM..." (rather than KMail)
"Volume at\n 45%" (kmix)
"Donnerst..." (rather than Donnerstag, digitalclock)</p></pre>
 </blockquote>

 <p>On February 26th, 2015, 11:30 p.m. CET, <b>Lukáš Tinkl</b> wrote:</p>
 <blockquote style="margin-left: 1em; border-left: 2px solid #d0d0d0; padding-left: \
10px;">  <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;">Yup, \
seeing the same here: \
http://developer.kde.org/~lukas/screenshots/tooltip.png</p></pre>  </blockquote>

 <p>On February 27th, 2015, 1:35 p.m. CET, <b>Sebastian Kügler</b> wrote:</p>
 <blockquote style="margin-left: 1em; border-left: 2px solid #d0d0d0; padding-left: \
10px;">  <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;">Thanks for the feedback! This patch indeed shortens the max width a bit, so \
it's likely the culprit. </p> <p style="padding: 0;text-rendering: inherit;margin: \
0;line-height: inherit;white-space: inherit;">Could you guys try changing </p> <p \
style="padding: 0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: \
inherit;">property int preferredTextWidth: units.gridUnit * 20</p> <p style="padding: \
0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: inherit;">to 25 \
or 30 and see if that fixes the problems? I'd like to not make it too wide, so we'll \
need some testing here, I think.</p></pre>  </blockquote>

 <p>On March 2nd, 2015, 5:43 p.m. CET, <b>Martin Klapetek</b> wrote:</p>
 <blockquote style="margin-left: 1em; border-left: 2px solid #d0d0d0; padding-left: \
10px;">  <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;">25 \
nor 30 does any difference here, in fact, not even 40 makes any difference at \
all</p></pre>  </blockquote>

 <p>On March 3rd, 2015, 2:27 a.m. CET, <b>Sebastian Kügler</b> wrote:</p>
 <blockquote style="margin-left: 1em; border-left: 2px solid #d0d0d0; padding-left: \
10px;">  <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;">Thanks for the testing.</p> <p style="padding: 0;text-rendering: \
inherit;margin: 0;line-height: inherit;white-space: inherit;">I've investigated a bit \
further, though without any conclusive solution. Let's take a step back.</p> <p \
style="padding: 0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: \
inherit;">The implicitWidth of the text item (which is the width the text would be \
rendered at in one single line without linebreaks) set min and max width of the \
surrounding layout, which is propagated into the root item's Layout.min and \
Layout.max widths. On my system (Intel, dunno if it makes a difference), this works \
correctly, the dialog's size correctly makes the tooltip window resize and fit.</p> \
<p style="padding: 0;text-rendering: inherit;margin: 0;line-height: \
inherit;white-space: inherit;">The bug we're seeing looks like the dialog size is not \
correctly scaled up, so the text in the heading either breaks, or elides. What should \
happen here is that the mainitems Layout sizing takes preference, and the tooltip \
window is scaled to the content, not the other way around.</p> <p style="padding: \
0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: inherit;">I'm \
puzzled for now.</p></pre>  </blockquote>

 <p>On March 5th, 2015, 2:03 p.m. CET, <b>David Edmundson</b> wrote:</p>
 <blockquote style="margin-left: 1em; border-left: 2px solid #d0d0d0; padding-left: \
10px;">  <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;">Martin/ Lukas can you reproduce on the test case in \
plasma-frameworkst/tests/tooltip.qml adding any new entries if needed</p> <p \
style="padding: 0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: \
inherit;">Can you set a rightAnchor on the topmost RowLayout and see if that fixes \
it?</p></pre>  </blockquote>

</blockquote>

<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;">The \
tests do work but not quite correct imo - \
http://paste.opensuse.org/images/52544878.png</p> <p style="padding: \
0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: \
inherit;">Adding another tooltip:</p> <p style="padding: 0;text-rendering: \
inherit;margin: 0;line-height: inherit;white-space: inherit;"><div class="codehilite" \
style="background: #f8f8f8"><pre style="line-height: 125%">        \
                PlasmaCore.ToolTipArea {
            <span style="color: #A0A000">width:</span> <span style="color: \
                #666666">300</span>
            <span style="color: #A0A000">height:</span> <span style="color: \
#666666">50</span>

            <span style="color: #A0A000">icon:</span> <span style="color: \
                #BA2121">&quot;telepathy-kde&quot;</span>
            <span style="color: #A0A000">mainText:</span> <span style="color: \
                #BA2121">&quot;Notifications&quot;</span>
            <span style="color: #A0A000">subText:</span> <span style="color: \
#BA2121">&quot;Display notifications and jobs&quot;</span>

            Rectangle {
                <span style="color: #A0A000">color:</span> <span style="color: \
#BA2121">&quot;green&quot;</span>  anchors.fill<span style="color: #666666">:</span> \
parent  }

            Text {
                anchors.fill<span style="color: #666666">:</span> parent
                <span style="color: #A0A000">text:</span> <span style="color: \
#BA2121">&quot;Notifications&quot;</span>  }
        }
</pre></div>
</p>
<p style="padding: 0;text-rendering: inherit;margin: 0;line-height: \
inherit;white-space: inherit;">which mimicks the notifications applet tooltip shows \
only "Notificat...".</p> <p style="padding: 0;text-rendering: inherit;margin: \
0;line-height: inherit;white-space: inherit;">Also, adding right anchor breaks the \
tooltip altogether, makes it only about 20 pixels wide in all cases.</p></pre> <br />

<p>- Martin</p>

<br />
<p>On February 26th, 2015, 4:46 p.m. CET, 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. 26, 2015, 4:46 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>

--===============7536850710940190863==--

[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] 