[prev in list] [next in list] [prev in thread] [next in thread]
List: kde-panel-devel
Subject: D15011: [Kickoff] Make the search field always look like a search field
From: Safa Alfulaij <noreply () phabricator ! kde ! org>
Date: 2018-08-24 16:45:26
Message-ID: df5b0964473f05b8eca6b427547905d4 () localhost ! localdomain
[Download RAW message or body]
[Attachment #2 (text/plain)]
safaalfulaij added a comment.
In D15011#314738 <https://phabricator.kde.org/D15011#314738>, @filipf wrote:
> Exactly! In your second proposal I don't think the serachbox sticks out, even as \
it is. At least to me it looks fine. At the same time it is drawing back, albeit not \
totally, to old Kickoff so there would have to be good designer conceptualization and \
solution for how to keep it modern. >
> When I look at Kickoff now and just think narrowly: how can I make the search \
more prominent and keep designer consistency, what makes most sense to me is to reuse \
the horizontal blue line we already have as a Kickoff tab selection indicator, and \
even as the indicators of open windows and plasmoids. These lines are indeed \
minimalist. Unfortunately that looks terrible: >
> (deleted screenshot from reply)
>
> Not even making it a classic Breeze 1px line feels right, although I guess it's a \
bit better: >
> (deleted screenshot from reply)
>
> I've had a look at that setup. It's pretty sleek. But we have to consider that \
YouTube still keeps a full-fledged serachbox on their homepage, and the channel is a \
less important of a place. So if we apply that to Kickoff, it looks like this: >
> (deleted screenshot from reply)
>
> And then when it's opened it would look like this:
>
> (deleted screenshot from reply)
>
> IMO we still haven't solved the problem of it not being obvious that you can \
search. Maybe having a search icon isn't a bad idea though, but I think we'd still \
have to make it more obvious somehow: >
> (deleted screenshot from reply)
>
> This was just a little foray into what is possible, nothing definitive or great. \
In the pictures I've shortened the search box so that there is equal distance from \
the left and right edge of Kickoff, for symmetry reasons mostly, but also because I \
am a bit bothered that the Favorites tab is wasting about 60% of horizontal space on \
nothing and I didn't want to drag attention to the right side. This may be fixed when \
we get a new Home tab and isn't too important right now anyway.
Well, I think the one with the line seems nice, the thinner one of course.
And about the icon, maybe we should just keep it an icon to the right of the \
user@host label, and that's it? Something like this?
F6213215: Screenshot_٢٠١٨٠٨٢٤_١٩٢٢٤٧.png \
<https://phabricator.kde.org/F6213215>
(I was trying to make a video but then bindings failed, so stepped back).
We can add a "Search…" text to that button, or a tooltip (not sure about HIG \
stuff). But I think that such a button (as is) is more than enough to inform users \
about the search functionality.
REPOSITORY
R119 Plasma Desktop
REVISION DETAIL
https://phabricator.kde.org/D15011
To: ngraham, #plasma, #vdg, davidedmundson, abetts
Cc: rooty, sharvey, romangg, broulik, safaalfulaij, oysteins, filipf, abetts, \
davidedmundson, michaeltunnell, plasma-devel, ragreen, Pitel, ZrenBot, lesliezhai, \
ali-mohamed, jensreuterberg, sebas, apol, mart
[Attachment #3 (text/html)]
<table><tr><td style="">safaalfulaij 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/D15011">View Revision</a></tr></table><br \
/><div><div><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/D15011#314738" style="background-color: #e7e7e7; \
border-color: #e7e7e7; border-radius: 3px;
padding: 0 4px;
font-weight: bold;
color: black;text-decoration: none;">D15011#314738</a>, <a \
href="https://phabricator.kde.org/p/filipf/" style=" border-color: #f1f7ff;
color: #19558d;
background-color: #f1f7ff;
border: 1px solid transparent;
border-radius: 3px;
font-weight: bold;
padding: 0 4px;">@filipf</a> wrote:</div>
<div style="margin: 0;
padding: 0;
border: 0;
color: rgb(107, 116, 140);"><p>Exactly! In your second proposal I \
don't think the serachbox sticks out, even as it is. At least to me it looks \
fine. At the same time it is drawing back, albeit not totally, to old Kickoff so \
there would have to be good designer conceptualization and solution for how to keep \
it modern.</p>
<p>When I look at Kickoff now and just think narrowly: how can I make the search more \
prominent and keep designer consistency, what makes most sense to me is to reuse the \
horizontal blue line we already have as a Kickoff tab selection indicator, and even \
as the indicators of open windows and plasmoids. These lines are indeed minimalist. \
Unfortunately that looks terrible:</p>
<p>(deleted screenshot from reply)</p>
<p>Not even making it a classic Breeze 1px line feels right, although I guess \
it's a bit better:</p>
<p>(deleted screenshot from reply)</p>
<p>I've had a look at that setup. It's pretty sleek. But we have to \
consider that YouTube still keeps a full-fledged serachbox on their homepage, and the \
channel is a less important of a place. So if we apply that to Kickoff, it looks like \
this:</p>
<p>(deleted screenshot from reply)</p>
<p>And then when it's opened it would look like this:</p>
<p>(deleted screenshot from reply)</p>
<p>IMO we still haven't solved the problem of it not being obvious that you can \
search. Maybe having a search icon isn't a bad idea though, but I think \
we'd still have to make it more obvious somehow:</p>
<p>(deleted screenshot from reply)</p>
<p>This was just a little foray into what is possible, nothing definitive or great. \
In the pictures I've shortened the search box so that there is equal distance \
from the left and right edge of Kickoff, for symmetry reasons mostly, but also \
because I am a bit bothered that the Favorites tab is wasting about 60% of horizontal \
space on nothing and I didn't want to drag attention to the right side. This may \
be fixed when we get a new Home tab and isn't too important right now \
anyway.</p></div> </blockquote>
<p>Well, I think the one with the line seems nice, the thinner one of course.<br />
And about the icon, maybe we should just keep it an icon to the right of the \
user@host label, and that's it? Something like this?</p>
<p><a href="https://phabricator.kde.org/F6213215" style="background-color: #e7e7e7;
border-color: #e7e7e7;
border-radius: 3px;
padding: 0 4px;
font-weight: bold;
color: black;text-decoration: none;">F6213215: Screenshot_٢٠١٨٠\
٨٢٤_١٩٢٢٤٧.png</a></p>
<p>(I was trying to make a video but then bindings failed, so stepped back).<br />
We can add a "Search…" text to that button, or a tooltip (not sure about HIG \
stuff). But I think that such a button (as is) is more than enough to inform users \
about the search functionality.</p></div></div><br \
/><div><strong>REPOSITORY</strong><div><div>R119 Plasma Desktop</div></div></div><br \
/><div><strong>REVISION DETAIL</strong><div><a \
href="https://phabricator.kde.org/D15011">https://phabricator.kde.org/D15011</a></div></div><br \
/><div><strong>To: </strong>ngraham, Plasma, VDG, davidedmundson, abetts<br \
/><strong>Cc: </strong>rooty, sharvey, romangg, broulik, safaalfulaij, oysteins, \
filipf, abetts, davidedmundson, michaeltunnell, plasma-devel, ragreen, Pitel, \
ZrenBot, lesliezhai, ali-mohamed, jensreuterberg, sebas, apol, mart<br /></div>
[prev in list] [next in list] [prev in thread] [next in thread]
Configure |
About |
News |
Add a list |
Sponsored by KoreLogic