<table><tr><td style="">vpilo 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/D18607">View Revision</a></tr></table><br /><div><div><p>Here's my latest change, not submitted yet.</p>
<div class="remarkup-table-wrap"><table style="border-collapse: separate;
border-spacing: 1px;
background: #d3d3d3;
margin: 12px 0;">
<tr><td style="background: #ffffff;
padding: 3px 6px;"><a href="https://phabricator.kde.org/F6576947" style="background-color: #e7e7e7;
border-color: #e7e7e7;
border-radius: 3px;
padding: 0 4px;
font-weight: bold;
color: black;text-decoration: none;">F6576947: short.png</a></td><td style="background: #ffffff;
padding: 3px 6px;"><a href="https://phabricator.kde.org/F6576946" style="background-color: #e7e7e7;
border-color: #e7e7e7;
border-radius: 3px;
padding: 0 4px;
font-weight: bold;
color: black;text-decoration: none;">F6576946: search.png</a></td><td style="background: #ffffff;
padding: 3px 6px;"><a href="https://phabricator.kde.org/F6576945" style="background-color: #e7e7e7;
border-color: #e7e7e7;
border-radius: 3px;
padding: 0 4px;
font-weight: bold;
color: black;text-decoration: none;">F6576945: long.png</a></td></tr>
<tr></tr>
</table></div>
<p>The differences are that I moved the bar to the top, made the label into a placeholder text, and added a bit of margin on the textfield sides.</p>
<blockquote style="border-left: 3px solid #8C98B8;
color: #6B748C;
font-style: italic;
margin: 4px 0 12px 0;
padding: 8px 12px;
background-color: #F8F9FC;">
<div style="font-style: normal;
padding-bottom: 4px;">In <a href="https://phabricator.kde.org/D18607#402431" style="background-color: #e7e7e7;
border-color: #e7e7e7;
border-radius: 3px;
padding: 0 4px;
font-weight: bold;
color: black;text-decoration: none;">D18607#402431</a>, <a href="https://phabricator.kde.org/p/jgrulich/" style="
border-color: #f1f7ff;
color: #19558d;
background-color: #f1f7ff;
border: 1px solid transparent;
border-radius: 3px;
font-weight: bold;
padding: 0 4px;">@jgrulich</a> wrote:</div>
<div style="margin: 0;
padding: 0;
border: 0;
color: rgb(107, 116, 140);"><blockquote style="border-left: 3px solid #a7b5bf; color: #464c5c; font-style: italic; margin: 4px 0 12px 0; padding: 4px 12px; background-color: #f8f9fc;"><p>Putting the search bar in the toolbar on top is an interesting idea. There's definitely room on mine. However it does start to feel a bit cramped. +1 for the idea of a search field though.</p></blockquote>
<p>My opinion is: I don't want the search bar to take any additional vertical space by default, not even when there is many connections, because I don't need usually to scroll down to find the connection I need. On the other hand I get it might be useful for someone else. What about showing the search bar once users start typing?</p></div>
</blockquote>
<p>If you usually don't need to scroll down to find a connection you need, then you won't see the search bar.</p>
<p>As you can see:</p>
<ul class="remarkup-list">
<li class="remarkup-list-item">When the list of connections is short:<ul class="remarkup-list">
<li class="remarkup-list-item">If the user starts typing, then it shows automatically.</li>
<li class="remarkup-list-item">When the field is emptied, then it hides.</li>
</ul></li>
<li class="remarkup-list-item">When the list of connections is long enough to already need a scrollbar:<ul class="remarkup-list">
<li class="remarkup-list-item">The field is always shown, and highlighted.</li>
<li class="remarkup-list-item">You just lose one entry of vertical space that you have to scroll through anyway.</li>
</ul></li>
</ul>
<blockquote style="border-left: 3px solid #8C98B8;
color: #6B748C;
font-style: italic;
margin: 4px 0 12px 0;
padding: 8px 12px;
background-color: #F8F9FC;">
<div style="font-style: normal;
padding-bottom: 4px;">In <a href="https://phabricator.kde.org/D18607#402444" style="background-color: #e7e7e7;
border-color: #e7e7e7;
border-radius: 3px;
padding: 0 4px;
font-weight: bold;
color: black;text-decoration: none;">D18607#402444</a>, <a href="https://phabricator.kde.org/p/ngraham/" style="
border-color: #f1f7ff;
color: #19558d;
background-color: #f1f7ff;
border: 1px solid transparent;
border-radius: 3px;
font-weight: bold;
padding: 0 4px;">@ngraham</a> wrote:</div>
<div style="margin: 0;
padding: 0;
border: 0;
color: rgb(107, 116, 140);"><blockquote style="border-left: 3px solid #8C98B8;
color: #6B748C;
font-style: italic;
margin: 4px 0 12px 0;
padding: 8px 12px;
background-color: #F8F9FC;">
<div style="font-style: normal;
padding-bottom: 4px;">In <a href="https://phabricator.kde.org/D18607#402435" style="background-color: #e7e7e7;
border-color: #e7e7e7;
border-radius: 3px;
padding: 0 4px;
font-weight: bold;
color: black;text-decoration: none;">D18607#402435</a>, <a href="https://phabricator.kde.org/p/jgrulich/" style="
border-color: #f1f7ff;
color: #19558d;
background-color: #f1f7ff;
border: 1px solid transparent;
border-radius: 3px;
font-weight: bold;
padding: 0 4px;">@jgrulich</a> wrote:</div>
<div style="margin: 0;
padding: 0;
border: 0;
color: rgb(107, 116, 140);"><p>Alternatively we can show a small input box just saying "Search ..." and clicking into it to start typing it would hide all the switches in the toolbar (wifi, wwan, airplane) and expand across the whole toolbar?</p></div>
</blockquote>
<p>That's not a bad idea! And then when the user clicks on the "clear text" on the right side of the search field, it would collapse to its prior size.</p></div>
</blockquote>
<p>I think my approach is less visually obtrusive, and you can still use everything else in the widget while the search field is active.</p></div></div><br /><div><strong>REPOSITORY</strong><div><div>R116 Plasma Network Management Applet</div></div></div><br /><div><strong>REVISION DETAIL</strong><div><a href="https://phabricator.kde.org/D18607">https://phabricator.kde.org/D18607</a></div></div><br /><div><strong>To: </strong>vpilo, VDG, Plasma<br /><strong>Cc: </strong>jgrulich, ngraham, davidedmundson, plasma-devel, jraleigh, GB_2, ragreen, Pitel, ZrenBot, lesliezhai, ali-mohamed, jensreuterberg, abetts, sebas, apol, mart<br /></div>