<table><tr><td style="">broulik added a comment.
</td><a style="text-decoration: none; padding: 4px 8px; margin: 0 8px 8px; float: right; color: #464C5C; font-weight: bold; border-radius: 3px; background-color: #F7F7F9; background-image: linear-gradient(to bottom,#fff,#f1f0f1); display: inline-block; border: 1px solid rgba(71,87,120,.2);" href="https://phabricator.kde.org/D27149">View Revision</a></tr></table><br /><div><div><p>Overall well thought out with that <tt style="background: #ebebeb; font-size: 13px;">State</tt> of yours :) Just some minor nitpicks:</p></div></div><br /><div><strong>INLINE COMMENTS</strong><div><div style="margin: 6px 0 12px 0;"><div style="border: 1px solid #C7CCD9; border-radius: 3px;"><div style="padding: 0; background: #F7F7F7; border-color: #e3e4e8; border-style: solid; border-width: 0 0 1px 0; margin: 0;"><div style="color: #74777d; background: #eff2f4; padding: 6px 8px; overflow: hidden;"><a style="float: right; text-decoration: none;" href="https://phabricator.kde.org/D27149#inline-153440">View Inline</a><span style="color: #4b4d51; font-weight: bold;">TextWrapper.qml:25</span></div>
<div style="font: 11px/15px "Menlo", "Consolas", "Monaco", monospace; white-space: pre-wrap; clear: both; padding: 4px 0; margin: 0;"><div style="padding: 0 8px; margin: 0 4px; background: rgba(151, 234, 151, .6);"> <span style="color: #004012">property</span> <span style="color: #aa4000">var</span> <span style="color: #004012">textItem</span>
</div><div style="padding: 0 8px; margin: 0 4px; background: rgba(151, 234, 151, .6);"> <span style="color: #004012">readonly</span> <span style="color: #004012">property</span> <span style="color: #004012">alias</span> <span style="color: #aa4000">containsMouse:</span> <span style="color: #004012">mouseItem</span><span class="p">.</span><span style="color: #004012">containsMouse</span>
</div></div></div>
<div style="margin: 8px 0; padding: 0 12px;"><p style="padding: 0; margin: 8px;">Define it more specifically as <tt style="background: #ebebeb; font-size: 13px;">property Text textItem</tt></p></div></div><br /><div style="border: 1px solid #C7CCD9; border-radius: 3px;"><div style="padding: 0; background: #F7F7F7; border-color: #e3e4e8; border-style: solid; border-width: 0 0 1px 0; margin: 0;"><div style="color: #74777d; background: #eff2f4; padding: 6px 8px; overflow: hidden;"><a style="float: right; text-decoration: none;" href="https://phabricator.kde.org/D27149#inline-153438">View Inline</a><span style="color: #4b4d51; font-weight: bold;">TextWrapper.qml:50</span></div>
<div style="font: 11px/15px "Menlo", "Consolas", "Monaco", monospace; white-space: pre-wrap; clear: both; padding: 4px 0; margin: 0;"><div style="padding: 0 8px; margin: 0 4px; background: rgba(151, 234, 151, .6);"> <span style="color: #004012">MouseArea</span> <span class="p">{</span>
</div><div style="padding: 0 8px; margin: 0 4px; background: rgba(151, 234, 151, .6);"> <span style="color: #aa4000">id: mouseItem</span>
</div></div></div>
<div style="margin: 8px 0; padding: 0 12px;"><p style="padding: 0; margin: 8px;">You can just make the <tt style="background: #ebebeb; font-size: 13px;">textWrapper</tt> be a <tt style="background: #ebebeb; font-size: 13px;">MouseArea</tt>, saves you having an extra area inside</p></div></div><br /><div style="border: 1px solid #C7CCD9; border-radius: 3px;"><div style="padding: 0; background: #F7F7F7; border-color: #e3e4e8; border-style: solid; border-width: 0 0 1px 0; margin: 0;"><div style="color: #74777d; background: #eff2f4; padding: 6px 8px; overflow: hidden;"><a style="float: right; text-decoration: none;" href="https://phabricator.kde.org/D27149#inline-153450">View Inline</a><span style="color: #4b4d51; font-weight: bold;">TextWrapper.qml:58</span></div>
<div style="font: 11px/15px "Menlo", "Consolas", "Monaco", monospace; white-space: pre-wrap; clear: both; padding: 4px 0; margin: 0;"><div style="padding: 0 8px; margin: 0 4px; background: rgba(151, 234, 151, .6);"> <span style="color: #aa4000">id: timer</span>
</div><div style="padding: 0 8px; margin: 0 4px; background: rgba(151, 234, 151, .6);"> <span style="color: #aa4000">running:</span> <span style="color: #000a65">false</span><span class="p">;</span> <span style="color: #aa4000">interval:</span> <span style="color: #601200">100</span><span class="p">;</span> <span style="color: #aa4000">repeat:</span> <span style="color: #000a65">true</span><span class="p">;</span>
</div><div style="padding: 0 8px; margin: 0 4px; background: rgba(151, 234, 151, .6);"> <span style="color: #aa4000">onTriggered:</span> <span class="p">{</span>
</div></div></div>
<div style="margin: 8px 0; padding: 0 12px;"><p style="padding: 0; margin: 8px;">You can simplify this long duration handling a bit:</p>
<div class="remarkup-code-block" style="margin: 12px 0;" data-code-lang="text" data-sigil="remarkup-code-block"><pre class="remarkup-code" style="font: 11px/15px "Menlo", "Consolas", "Monaco", monospace; padding: 12px; margin: 0; background: rgba(71, 87, 120, 0.08);">Timer {
interval: 500
running: area.containsMouse
onTriggered: {
area.state = "longHovering"
}
}</pre></div>
<p style="padding: 0; margin: 8px;">and then all you need is</p>
<div class="remarkup-code-block" style="margin: 12px 0;" data-code-lang="text" data-sigil="remarkup-code-block"><pre class="remarkup-code" style="font: 11px/15px "Menlo", "Consolas", "Monaco", monospace; padding: 12px; margin: 0; background: rgba(71, 87, 120, 0.08);">onContainsMouseChanged: {
if (!containsMouse) {
area.state = "";
}
}</pre></div>
<p style="padding: 0; margin: 8px;">I *think* you could even do it more declaratively by having the <tt style="background: #ebebeb; font-size: 13px;">State</tt> do</p>
<div class="remarkup-code-block" style="margin: 12px 0;" data-code-lang="text" data-sigil="remarkup-code-block"><pre class="remarkup-code" style="font: 11px/15px "Menlo", "Consolas", "Monaco", monospace; padding: 12px; margin: 0; background: rgba(71, 87, 120, 0.08);">when: area.containsMouse && !timer.running</pre></div>
<p style="padding: 0; margin: 8px;">but since property evaluation order is non-deterministic, it might briefly enter the state on hover</p></div></div><br /><div style="border: 1px solid #C7CCD9; border-radius: 3px;"><div style="padding: 0; background: #F7F7F7; border-color: #e3e4e8; border-style: solid; border-width: 0 0 1px 0; margin: 0;"><div style="color: #74777d; background: #eff2f4; padding: 6px 8px; overflow: hidden;"><a style="float: right; text-decoration: none;" href="https://phabricator.kde.org/D27149#inline-153441">View Inline</a><span style="color: #4b4d51; font-weight: bold;">ToolTipInstance.qml:324</span></div>
<div style="font: 11px/15px "Menlo", "Consolas", "Monaco", monospace; white-space: pre-wrap; clear: both; padding: 4px 0; margin: 0;"><div style="padding: 0 8px; margin: 0 4px; background: rgba(251, 175, 175, .7);"> <span class="bright"></span><span style="color: #004012"><span class="bright">PlasmaComponents</span></span><span class="bright"></span><span class="p"><span class="bright">.</span></span><span class="bright"></span><span style="color: #004012"><span class="bright">Label</span></span> <span class="p">{</span>
</div><div style="padding: 0 8px; margin: 0 4px; background: rgba(151, 234, 151, .6);"> <span class="bright"></span><span style="color: #004012"><span class="bright">TextWrapper</span></span> <span class="p">{</span>
</div><div style="padding: 0 8px; margin: 0 4px; background: rgba(151, 234, 151, .6);"> <span style="color: #aa4000">id: songTextWrapper</span>
</div></div></div>
<div style="margin: 8px 0; padding: 0 12px;"><p style="padding: 0; margin: 8px;">I think this item could use a better name, maybe <tt style="background: #ebebeb; font-size: 13px;">TextHoverScroller</tt> or something like that?</p></div></div><br /><div style="border: 1px solid #C7CCD9; border-radius: 3px;"><div style="padding: 0; background: #F7F7F7; border-color: #e3e4e8; border-style: solid; border-width: 0 0 1px 0; margin: 0;"><div style="color: #74777d; background: #eff2f4; padding: 6px 8px; overflow: hidden;"><a style="float: right; text-decoration: none;" href="https://phabricator.kde.org/D27149#inline-153444">View Inline</a><span style="color: #4b4d51; font-weight: bold;">ToolTipInstance.qml:330</span></div>
<div style="font: 11px/15px "Menlo", "Consolas", "Monaco", monospace; white-space: pre-wrap; clear: both; padding: 4px 0; margin: 0;"><div style="padding: 0 8px; margin: 0 4px; background: rgba(151, 234, 151, .6);"> <span style="color: #aa4000">textItem:</span> <span style="color: #004012">songText</span>
</div></div></div>
<div style="margin: 8px 0; padding: 0 12px;"><p style="padding: 0; margin: 8px;">QML trick: Define the property as <tt style="background: #ebebeb; font-size: 13px;">default property</tt> and then you can just write</p>
<div class="remarkup-code-block" style="margin: 12px 0;" data-code-lang="text" data-sigil="remarkup-code-block"><pre class="remarkup-code" style="font: 11px/15px "Menlo", "Consolas", "Monaco", monospace; padding: 12px; margin: 0; background: rgba(71, 87, 120, 0.08);">TextWrapper {
Text {
...
}
}</pre></div></div></div><br /><div style="border: 1px solid #C7CCD9; border-radius: 3px;"><div style="padding: 0; background: #F7F7F7; border-color: #e3e4e8; border-style: solid; border-width: 0 0 1px 0; margin: 0;"><div style="color: #74777d; background: #eff2f4; padding: 6px 8px; overflow: hidden;"><a style="float: right; text-decoration: none;" href="https://phabricator.kde.org/D27149#inline-153445">View Inline</a><span style="color: #4b4d51; font-weight: bold;">ToolTipInstance.qml:335</span></div>
<div style="font: 11px/15px "Menlo", "Consolas", "Monaco", monospace; white-space: pre-wrap; clear: both; padding: 4px 0; margin: 0;"><div style="padding: 0 8px; margin: 0 4px; background: rgba(151, 234, 151, .6);"> <span style="color: #aa4000">width:</span> <span style="color: #004012">parent</span><span class="p">.</span><span style="color: #004012">width</span>
</div><div style="padding: 0 8px; margin: 0 4px; background: rgba(151, 234, 151, .6);"> <span style="color: #aa4000">height:</span> <span style="color: #004012">contentHeight</span>
</div><div style="padding: 0 8px; margin: 0 4px; "> <span style="color: #aa4000">lineHeight:</span> <span style="color: #601200">1</span>
</div></div></div>
<div style="margin: 8px 0; padding: 0 12px;"><p style="padding: 0; margin: 8px;">I think you can assign <tt style="background: #ebebeb; font-size: 13px;">undefined</tt> to reset it to its default value. Plasma <tt style="background: #ebebeb; font-size: 13px;">Label</tt> annoyingly overwrites its <tt style="background: #ebebeb; font-size: 13px;">height</tt></p></div></div><br /><div style="border: 1px solid #C7CCD9; border-radius: 3px;"><div style="padding: 0; background: #F7F7F7; border-color: #e3e4e8; border-style: solid; border-width: 0 0 1px 0; margin: 0;"><div style="color: #74777d; background: #eff2f4; padding: 6px 8px; overflow: hidden;"><a style="float: right; text-decoration: none;" href="https://phabricator.kde.org/D27149#inline-153448">View Inline</a><span style="color: #4b4d51; font-weight: bold;">ToolTipInstance.qml:339</span></div>
<div style="font: 11px/15px "Menlo", "Consolas", "Monaco", monospace; white-space: pre-wrap; clear: both; padding: 4px 0; margin: 0;"><div style="padding: 0 8px; margin: 0 4px; background: rgba(251, 175, 175, .7);"> <span style="color: #aa4000">wrapMode:</span> <span class="bright"></span><span style="color: #004012"><span class="bright">artistText</span></span><span class="bright"></span><span class="p"><span class="bright">.</span></span><span class="bright"></span><span style="color: #004012"><span class="bright">visible</span></span><span class="bright"></span><span style="color: #aa2211"><span class="bright">?</span></span><span class="bright"> </span><span style="color: #aa4000">Text.No<span class="bright">Wrap :</span></span><span class="bright"> </span><span style="color: #004012"><span class="bright">Text</span></span><span class="bright"></span><span class="p"><span class="bright">.</span></span><span style="color: #004012">Wrap</span>
</div><div style="padding: 0 8px; margin: 0 4px; background: rgba(251, 175, 175, .7);"> <span style="color: #aa4000">elide:</span> <span style="color: #004012">Text</span><span class="p">.</span><span style="color: #004012">ElideRight</span>
</div><div style="padding: 0 8px; margin: 0 4px; background: rgba(151, 234, 151, .6);"> <span class="bright"> </span><span style="color: #aa4000">wrapMode:</span> <span style="color: #004012">Text</span><span class="p">.</span><span style="color: #004012">NoWrap</span>
</div><div style="padding: 0 8px; margin: 0 4px; background: rgba(151, 234, 151, .6);"> <span class="bright"> </span><span style="color: #aa4000">elide<span class="bright">:</span></span><span class="bright"> </span><span style="color: #004012"><span class="bright">songTextWrapper</span></span><span class="bright"></span><span class="p"><span class="bright">.</span></span><span class="bright"></span><span style="color: #004012"><span class="bright">longHovering</span></span><span class="bright"></span><span style="color: #aa2211"><span class="bright">?</span></span><span class="bright"> </span><span style="color: #aa4000"><span class="bright">Text.ElideNone </span>:</span> <span style="color: #004012">Text</span><span class="p">.</span><span style="color: #004012">ElideRight</span>
</div><div style="padding: 0 8px; margin: 0 4px; "> <span style="color: #aa4000">text:</span> <span style="color: #004012">track</span> <span style="color: #aa2211">||</span> <span style="color: #766510">""</span>
</div></div></div>
<div style="margin: 8px 0; padding: 0 12px;"><p style="padding: 0; margin: 8px;">Coding style: space before <tt style="background: #ebebeb; font-size: 13px;">?</tt></p></div></div><br /><div style="border: 1px solid #C7CCD9; border-radius: 3px;"><div style="padding: 0; background: #F7F7F7; border-color: #e3e4e8; border-style: solid; border-width: 0 0 1px 0; margin: 0;"><div style="color: #74777d; background: #eff2f4; padding: 6px 8px; overflow: hidden;"><a style="float: right; text-decoration: none;" href="https://phabricator.kde.org/D27149#inline-153447">View Inline</a><span style="color: #4b4d51; font-weight: bold;">ToolTipInstance.qml:348</span></div>
<div style="font: 11px/15px "Menlo", "Consolas", "Monaco", monospace; white-space: pre-wrap; clear: both; padding: 4px 0; margin: 0;"><div style="padding: 0 8px; margin: 0 4px; background: rgba(151, 234, 151, .6);"> <span style="color: #aa4000">Layout.fillWidth:</span> <span style="color: #000a65">true</span>
</div><div style="padding: 0 8px; margin: 0 4px; background: rgba(151, 234, 151, .6);"> <span style="color: #aa4000">Layout.preferredHeight:</span> <span style="color: #004012">artistText</span><span class="p">.</span><span style="color: #004012">visible</span><span style="color: #aa2211">?</span> <span style="color: #aa4000">artistText.contentHeight :</span> <span style="color: #601200">0</span>
</div></div></div>
<div style="margin: 8px 0; padding: 0 12px;"><p style="padding: 0; margin: 8px;">Generally try to avoid binding to <tt style="background: #ebebeb; font-size: 13px;">visible</tt> as that updates recursively. Since this contains the label below, you can probably just make this <tt style="background: #ebebeb; font-size: 13px;">visible: artistText.text !== ""</tt> and then remove the <tt style="background: #ebebeb; font-size: 13px;">visible</tt> statement below</p></div></div></div></div></div><br /><div><strong>REPOSITORY</strong><div><div>R119 Plasma Desktop</div></div></div><br /><div><strong>BRANCH</strong><div><div>add-tooltip-textWrapper (branched from master)</div></div></div><br /><div><strong>REVISION DETAIL</strong><div><a href="https://phabricator.kde.org/D27149">https://phabricator.kde.org/D27149</a></div></div><br /><div><strong>To: </strong>trmdi, Plasma, VDG, ndavis<br /><strong>Cc: </strong>broulik, cblack, ndavis, plasma-devel, Orage, LeGast00n, The-Feren-OS-Dev, jraleigh, zachus, fbampaloukas, GB_2, ragreen, ZrenBot, ngraham, alexeymin, himcesjf, lesliezhai, ali-mohamed, jensreuterberg, abetts, sebas, apol, ahiemstra, mart<br /></div>