[prev in list] [next in list] [prev in thread] [next in thread] 

List:       kwin
Subject:    Re: Review Request 122985: [kcmkwin/deco] Hide button layout on small screen estate
From:       "Thomas Pfeiffer" <colomar () autistici ! org>
Date:       2015-03-17 23:31:51
Message-ID: 20150317233151.15053.70544 () mimi ! kde ! org
[Download RAW message or body]

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



> On March 17, 2015, 8:53 a.m., Martin Klapetek wrote:
> > kcmkwin/kwindecoration/qml/main.qml, line 52
> > <https://git.reviewboard.kde.org/r/122985/diff/1/?file=355356#file355356line52>
> > 
> > This should end with "..." to hint that new dialog will show (it will right?) and \
> > the text should be capitalized as per the HIG \
> > https://techbase.kde.org/Projects/Usability/HIG/Capitalization
> 
> Martin Gräßlin wrote:
> My understanding was that "..." is needed when a dialog is opened - adding Thomas \
> as expert 
> Martin Klapetek wrote:
> Ah sorry, I posted that comment only after looking at the screenshots and thought \
> this /does/ open a new dialog. In that case, I think some drop-down arrow would be \
> more helpful rather than "..." 
> Martin Gräßlin wrote:
> yes, I also thought about an arrow, but was unsure on how to do it.
> 
> Thomas Lübking wrote:
> There's no way back, is there?
> -> Tabs?
> 
> "Style" / "Layout"
> 
> Martin Gräßlin wrote:
> would prefer to not have tabs as it makes everything (option syncing, updating \
> previews) more complicated and the second tab would have lots of whitespace ;-)

Even though you might not like it, I have to side with my namesake here: Now that I - \
admittedly - see the button config UI in the context of the list, it really feels \
like two things that don't belong together have been put in the same UI. We have a \
list of windecos to select from and then below it, barely separated from it - is a UI \
that does a completely different thing. This may already confuse users into mistaking \
the button config UI for just another windeco preview if they don't look closely \
enough, and the new situation with a button expanding into the full UI when the \
window is resized might just add to the confusion ("jumpy" UIs should be avoided if \
possible, as they are less predictable). I'm not exactly a huge tab fan in general, \
but in this case it makes perfect sense since we have two related, yet distinct sets \
of controls. Unless the added complexity would very likely cause tons of nasty bugs, \
a UI with a bit of whitespace would be a perfectly okay trade-off for reduced \
confusion and no need to come up with workarounds for a space limitation problem.


- Thomas


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


On March 17, 2015, 9:59 a.m., Martin Gräßlin wrote:
> 
> -----------------------------------------------------------
> This is an automatically generated e-mail. To reply, visit:
> https://git.reviewboard.kde.org/r/122985/
> -----------------------------------------------------------
> 
> (Updated March 17, 2015, 9:59 a.m.)
> 
> 
> Review request for kwin, Plasma, Kai Uwe Broulik, and Thomas Pfeiffer.
> 
> 
> Repository: kwin
> 
> 
> Description
> -------
> 
> If the window is small the list of decorations might not be visible at
> all giving a bad first impression on opening systemsettings and also
> making the user interface difficult to use.
> 
> This change ensures that at least two decorations are visible before
> we try to show the buttons view. So only if the window is large enough
> the button configuration will be shown.
> 
> Otherwise a push button is displayed to explicitly show the button config
> interface. This explicit show is not bound to the size of the window.
> 
> If the window gets resized in a way that there is enough place for the
> button interface the view is shown autmatically and the button is hidden.
> 
> There is no button to hide the view again. This is considered not needed
> as at that point a user already has seen the view and recognized that
> the list of decorations can be scrolled.
> 
> 
> Diffs
> -----
> 
> kcmkwin/kwindecoration/qml/Previews.qml eabc666432b5df04e929f1ba640a79cd99714a9d 
> kcmkwin/kwindecoration/qml/main.qml 4d8bcf8c98f238676e9128da20f4969980bf143c 
> 
> Diff: https://git.reviewboard.kde.org/r/122985/diff/
> 
> 
> Testing
> -------
> 
> 
> File Attachments
> ----------------
> 
> Buttons hidden on small window
> https://git.reviewboard.kde.org/media/uploaded/files/2015/03/17/fe54076a-1d58-49c4-a27d-f49da4f3bb97__view-small.png
>  Buttons automatically shown if window is large enough
> https://git.reviewboard.kde.org/media/uploaded/files/2015/03/17/29970eae-8189-47c3-b942-6aade7111956__view-large.png
>  
> 
> Thanks,
> 
> Martin Gräßlin
> 
> 


--===============7597303714281305672==
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/122985/">https://git.reviewboard.kde.org/r/122985/</a>
  </td>
    </tr>
   </table>
   <br />










<blockquote style="margin-left: 1em; border-left: 2px solid #d0d0d0; padding-left: \
10px;">  <p style="margin-top: 0;">On March 17th, 2015, 8:53 a.m. UTC, <b>Martin \
Klapetek</b> wrote:</p>  <blockquote style="margin-left: 1em; border-left: 2px solid \
#d0d0d0; padding-left: 10px;">  


<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/122985/diff/1/?file=355356#file355356line52" \
style="color: black; font-weight: bold; text-decoration: \
underline;">kcmkwin/kwindecoration/qml/main.qml</a>  <span style="font-weight: \
normal;">

     (Diff revision 1)

    </span>
   </th>
  </tr>
 </thead>



 
 

 <tbody>

  <tr>
    <th bgcolor="#b1ebb0" style="border-right: 1px solid #C0C0C0;" \
align="right"><font size="2"></font></th>  <td bgcolor="#c5ffc4" width="50%"><pre \
style="font-size: 8pt; line-height: 140%; margin: 0; "></pre></td>  <th \
bgcolor="#b1ebb0" style="border-left: 1px solid #C0C0C0; border-right: 1px solid \
#C0C0C0;" align="right"><font size="2">52</font></th>  <td bgcolor="#c5ffc4" \
width="50%"><pre style="font-size: 8pt; line-height: 140%; margin: 0; ">            \
<span class="k">text:</span> <span class="nx">i18n</span><span \
class="p">(</span><span class="s2">&quot;Configure decoration button \
layout&quot;</span><span class="p">)</span></pre></td>  </tr>

 </tbody>

</table>

  <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;">This \
should end with "..." to hint that new dialog will show (it will right?) and the text \
should be capitalized as per the HIG \
https://techbase.kde.org/Projects/Usability/HIG/Capitalization</p></pre>  \
</blockquote>



 <p>On March 17th, 2015, 9:59 a.m. UTC, <b>Martin Gräßlin</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;">My \
understanding was that "..." is needed when a dialog is opened - adding Thomas as \
expert</p></pre>  </blockquote>





 <p>On March 17th, 2015, 10:17 a.m. UTC, <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;">Ah \
sorry, I posted that comment only after looking at the screenshots and thought this \
/does/ open a new dialog. In that case, I think some drop-down arrow would be more \
helpful rather than "..."</p></pre>  </blockquote>





 <p>On March 17th, 2015, 10:19 a.m. UTC, <b>Martin Gräßlin</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;">yes, \
I also thought about an arrow, but was unsure on how to do it.</p></pre>  \
</blockquote>





 <p>On March 17th, 2015, 12:38 p.m. UTC, <b>Thomas Lübking</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;">There's no way back, is there?
-&gt; Tabs?</p>
<p style="padding: 0;text-rendering: inherit;margin: 0;line-height: \
inherit;white-space: inherit;">"Style" / "Layout"</p></pre>  </blockquote>





 <p>On March 17th, 2015, 12:42 p.m. UTC, <b>Martin Gräßlin</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;">would \
prefer to not have tabs as it makes everything (option syncing, updating previews) \
more complicated and the second tab would have lots of whitespace ;-)</p></pre>  \
</blockquote>







</blockquote>
<pre style="margin-left: 1em; 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;">Even though you might not like it, I have to side with my namesake here: \
Now that I - admittedly - see the button config UI in the context of the list, it \
really feels like two things that don't belong together have been put in the same UI. \
We have a list of windecos to select from and then below it, barely separated from it \
- is a UI that does a completely different thing. This may already confuse users into \
mistaking the button config UI for just another windeco preview if they don't look \
closely enough, and the new situation with a button expanding into the full UI when \
the window is resized might just add to the confusion ("jumpy" UIs should be avoided \
if possible, as they are less predictable). I'm not exactly a huge tab fan in \
general, but in this case it makes perfect sense since we have two related, yet \
distinct sets of controls. Unless the added complexity would very likely cause tons \
of nasty bugs, a UI with a bit of whitespace would be a perfectly okay trade-off for \
reduced confusion and no need to come up with workarounds for a space limitation \
problem.</p></pre> <br />




<p>- Thomas</p>


<br />
<p>On March 17th, 2015, 9:59 a.m. UTC, Martin Gräßlin 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 kwin, Plasma, Kai Uwe Broulik, and Thomas Pfeiffer.</div>
<div>By Martin Gräßlin.</div>


<p style="color: grey;"><i>Updated March 17, 2015, 9:59 a.m.</i></p>









<div style="margin-top: 1.5em;">
 <b style="color: #575012; font-size: 10pt;">Repository: </b>
kwin
</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;">If the window is small the list of decorations might not be visible at \
all giving a bad first impression on opening systemsettings and also making the user \
interface difficult to use.

This change ensures that at least two decorations are visible before
we try to show the buttons view. So only if the window is large enough
the button configuration will be shown.

Otherwise a push button is displayed to explicitly show the button config
interface. This explicit show is not bound to the size of the window.

If the window gets resized in a way that there is enough place for the
button interface the view is shown autmatically and the button is hidden.

There is no button to hide the view again. This is considered not needed
as at that point a user already has seen the view and recognized that
the list of decorations can be scrolled.</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>kcmkwin/kwindecoration/qml/Previews.qml <span style="color: \
grey">(eabc666432b5df04e929f1ba640a79cd99714a9d)</span></li>

 <li>kcmkwin/kwindecoration/qml/main.qml <span style="color: \
grey">(4d8bcf8c98f238676e9128da20f4969980bf143c)</span></li>

</ul>

<p><a href="https://git.reviewboard.kde.org/r/122985/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/03/17/fe54076a-1d58-49c4-a27d-f49da4f3bb97__view-small.png">Buttons \
hidden on small window</a></li>

 <li><a href="https://git.reviewboard.kde.org/media/uploaded/files/2015/03/17/29970eae-8189-47c3-b942-6aade7111956__view-large.png">Buttons \
automatically shown if window is large enough</a></li>

</ul>




  </td>
 </tr>
</table>







  </div>
 </body>
</html>


--===============7597303714281305672==--


[Attachment #3 (text/plain)]

_______________________________________________
kwin mailing list
kwin@kde.org
https://mail.kde.org/mailman/listinfo/kwin


[prev in list] [next in list] [prev in thread] [next in thread]