'Re: Review Request 126373: change the taskbar color from blue to gray'

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

List:       kde-panel-devel
Subject:    Re: Review Request 126373: change the taskbar color from blue to gray
From:       "andreas kainz" <kainz.a () gmail ! com>
Date:       2015-12-31 0:05:34
Message-ID: 20151231000534.30660.47263 () mimi ! kde ! org
[Download RAW message or body]

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

> On Dec. 20, 2015, 8:45 p.m., Eike Hein wrote:
> > General PSA: I will soon push a fixed-up version of tasks.svgz to the repo that \
> > cleans up all the random margins and inconsistent corner styles in it that \
> > currently mess up alignments inside and outside of task buttons as well as corner \
> > appearance. Whatever the outcome of this, it needs to be rebased against those \
> > fixes first.
> 
> Uri Herrera wrote:
> The margins are not random. I literally had to use kruler and kmag to properly \
> align that. I even used a layered file with a red rectangle in it because that area \
> consists of a deadzone. I pointed that out when I made the reveiw request \
> originally. 
> Eike Hein wrote:
> The inside margins are currently inconsistent at the top and bottom causing the \
> icon to be vertically misaligned. The outside margins are inconsistent as well - I \
> think it's trying to position the button well inside the panel, but this is an \
> incorrect approach to the problem (the optical imbalance with consistent margins is \
> caused by how the panel inside margins function, which is something we need to \
> address in the theming system - my approach to fix it was rejected, I'll be trying \
> again though). The outside margins and the corners (top ones rounded, bottom ones \
> not) subtly break things when the panel is anywhere but the bottom. 
> I'm working on a series of changes to make the panel and Task Manager finally \
> pixel-perfect - fix the theme, fix the panel controller when resizing, fix the \
> panel default size, and fix something in FrameSVG/the panel containment. 
> Johan Ouwerkerk wrote:
> In any case, the top version (new draft?) has markedly better alignment of the text \
> with icons... The other two versions seem vertically imbalanced (more margin on the \
> bottom than at the top). Ideally, the icon is vertically aligned with the baseline \
> of the text such that ascenders and descenders extend equally far beyond the \
> corresponding border of the icon, hough this may be rather tricky when considering \
> languages with different baseline conventions (hanging or variable or none). 
> Eike Hein wrote:
> The top version on the screenshot still shows all of the problems I'm currently \
> fixing FWIW. 
> Eike Hein wrote:
> I've now pushed the cleaned up tasks.svgz to git master. This fixes:
> 
> * Fix inconsistent inside margins causing vertical misalignment inside Task \
>                 Buttons.
> * Fix inconsistent outside margins causing incorrect alignment inside panel.
> * Fix outside margins and button corner appearance in locations other than South.
> * Align button frames with things like the pager edges.
> * Fix a few instances of incorrect color scheme application.
> * Remove many unused elements.
> 
> This is what this gets us: http://i.imgur.com/7KaeJH5.png
> 
> This took *hours* to fix. If anyone breaks these margins I will *eat* them. Please \
> base future changes on this version of the file! 
> Johan Ouwerkerk wrote:
> Much better! Appreciated.
> 
> Perhaps a test application that sets window name in a variety of scripts might be \
> useful to check how it performs on various scripts...? 
> Eike Hein wrote:
> I test CJK and Arabic fairly regularly.
> 
> andreas kainz wrote:
> as I'm to jung to die can you change the behavior from your new tasks.svgz file to 
> 
> 3. add blue boarder as all other tasks have (see first line in taskbar3.png)
> 
> as suggested above.
> 
> Kai Uwe Broulik wrote:
> Looking good, Eike, I'm just not sure about the gray background for minimized \
> tasks. It makes them more prominent than the non-minimized ones - I liked the \
> frameless variant for those better.

Eike can I have a blue boarder for the selected task as fare as I see it's the only \
selection mode without border.

- andreas

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

On Dec. 16, 2015, 7:23 p.m., andreas kainz wrote:
> 
> -----------------------------------------------------------
> This is an automatically generated e-mail. To reply, visit:
> https://git.reviewboard.kde.org/r/126373/
> -----------------------------------------------------------
> 
> (Updated Dec. 16, 2015, 7:23 p.m.)
> 
> 
> Review request for Plasma, Marco Martin and Uri Herrera.
> 
> 
> Repository: plasma-framework
> 
> 
> Description
> -------
> 
> Problem
> =======
> with the new taskbar we look that the look and feel is consistent between plasma \
> and the applications therefore Uri change the selected application taskbar button \
> to a blue background. The problem is that the blue background couldn't be the same \
> blue than e.g. in the dolphin sidebar cause when you select an element in the \
> sidebar the text color change from "black" to white which isn't possible in the \
> system tray and than the contrast isn't that good in the panel for selected \
> application (gray text on blue background). In addition the blue is very visible. \
> see screenshot before. 
> Solution
> ========
> I like that we use the same color language but when you look at the dolphin toolbar \
> on top selected elements (e.g. preview in the screenshot) are gray so I change the \
> blue color for the selected application to gray and change minimized app to no \
> border. 
> what do you think?
> 
> 
> Diffs
> -----
> 
> src/desktoptheme/breeze/widgets/tasks.svgz 086558b 
> 
> Diff: https://git.reviewboard.kde.org/r/126373/diff/
> 
> 
> Testing
> -------
> 
> I will test the new taskbar and hope someone else can test it too before we may \
> ship it. 
> 
> File Attachments
> ----------------
> 
> taskbar style old
> https://git.reviewboard.kde.org/media/uploaded/files/2015/12/15/28f02c74-3489-4e35-a83f-45bd59a1e681__PlasmaThemeTaskbarBefore.png
>  taskbar style new
> https://git.reviewboard.kde.org/media/uploaded/files/2015/12/15/1f9c7570-114d-4192-b2e5-0c713adfaad7__PlasmaThemeTaskbarAfter.png
>  new tasks.svgz file move to /usr/share/plasma/desktoptheme/breeze/widgets/
> https://git.reviewboard.kde.org/media/uploaded/files/2015/12/16/a6faa46d-1f81-4140-824c-983f6bb5671f__tasks.svgz
>  taskbar old and new
> https://git.reviewboard.kde.org/media/uploaded/files/2015/12/16/fafdc5e8-bd92-43bd-8006-71088af6fdf4__taskbar.png
>  tasks new blue boarder in difference to the original one
> https://git.reviewboard.kde.org/media/uploaded/files/2015/12/16/46755f5c-9c95-4e13-b5c6-4966496a5056__tasks.svgz
>  new draft, origin, old draft
> https://git.reviewboard.kde.org/media/uploaded/files/2015/12/16/0851a433-b3f5-4d93-a7be-7540be0f0692__taskbar3.png
>  
> 
> Thanks,
> 
> andreas kainz
> 
> 

--===============6509132502241948835==
MIME-Version: 1.0
Content-Type: text/html; charset="utf-8"
Content-Transfer-Encoding: 7bit

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

<blockquote style="margin-left: 1em; border-left: 2px solid #d0d0d0; padding-left: \
10px;">  <p style="margin-top: 0;">On December 20th, 2015, 8:45 p.m. UTC, <b>Eike \
Hein</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;">General PSA: I will soon push a fixed-up version of \
tasks.svgz to the repo that cleans up all the random margins and inconsistent corner \
styles in it that currently mess up alignments inside and outside of task buttons as \
well as corner appearance. Whatever the outcome of this, it needs to be rebased \
against those fixes first.</p></pre>  </blockquote>

 <p>On December 20th, 2015, 11:09 p.m. UTC, <b>Uri Herrera</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;">The \
margins are not random. I literally had to use kruler and kmag to properly align \
that. I even used a layered file with a red rectangle in it because that area \
consists of a deadzone. I pointed that out when I made the reveiw request \
originally.</p></pre>  </blockquote>

 <p>On December 20th, 2015, 11:25 p.m. UTC, <b>Eike Hein</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;">The \
inside margins are currently inconsistent at the top and bottom causing the icon to \
be vertically misaligned. The outside margins are inconsistent as well - I think it's \
trying to position the button well inside the panel, but this is an incorrect \
approach to the problem (the optical imbalance with consistent margins is caused by \
how the panel inside margins function, which is something we need to address in the \
theming system - my approach to fix it was rejected, I'll be trying again though). \
The outside margins and the corners (top ones rounded, bottom ones not) subtly break \
things when the panel is anywhere but the bottom.</p> <p style="padding: \
0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: inherit;">I'm \
working on a series of changes to make the panel and Task Manager finally \
pixel-perfect - fix the theme, fix the panel controller when resizing, fix the panel \
default size, and fix something in FrameSVG/the panel containment.</p></pre>  \
</blockquote>

 <p>On December 20th, 2015, 11:29 p.m. UTC, <b>Johan Ouwerkerk</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;">In \
any case, the top version (new draft?) has markedly better alignment of the text with \
icons... The other two versions seem vertically imbalanced (more margin on the bottom \
than at the top). Ideally, the icon is vertically aligned with the baseline of the \
text such that ascenders and descenders extend equally far beyond the corresponding \
border of the icon, hough this may be rather tricky when considering languages with \
different baseline conventions (hanging or variable or none).</p></pre>  \
</blockquote>

 <p>On December 20th, 2015, 11:41 p.m. UTC, <b>Eike Hein</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;">The \
top version on the screenshot still shows all of the problems I'm currently fixing \
FWIW.</p></pre>  </blockquote>

 <p>On December 21st, 2015, 4 a.m. UTC, <b>Eike Hein</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've \
now pushed the cleaned up tasks.svgz to git master. This fixes:</p> <ul \
style="padding: 0;text-rendering: inherit;margin: 0 0 0 1em;line-height: \
inherit;white-space: normal;"> <li style="padding: 0;text-rendering: inherit;margin: \
0;line-height: inherit;white-space: normal;">Fix inconsistent inside margins causing \
vertical misalignment inside Task Buttons.</li> <li style="padding: 0;text-rendering: \
inherit;margin: 0;line-height: inherit;white-space: normal;">Fix inconsistent outside \
margins causing incorrect alignment inside panel.</li> <li style="padding: \
0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: normal;">Fix \
outside margins and button corner appearance in locations other than South.</li> <li \
style="padding: 0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: \
normal;">Align button frames with things like the pager edges.</li> <li \
style="padding: 0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: \
normal;">Fix a few instances of incorrect color scheme application.</li> <li \
style="padding: 0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: \
normal;">Remove many unused elements.</li> </ul>
<p style="padding: 0;text-rendering: inherit;margin: 0;line-height: \
inherit;white-space: inherit;">This is what this gets us: \
http://i.imgur.com/7KaeJH5.png</p> <p style="padding: 0;text-rendering: \
inherit;margin: 0;line-height: inherit;white-space: inherit;">This took <em \
style="padding: 0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: \
normal;">hours</em> to fix. If anyone breaks these margins I will <em style="padding: \
0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: \
normal;">eat</em> them. Please base future changes on this version of the \
file!</p></pre>  </blockquote>

 <p>On December 21st, 2015, 10:54 p.m. UTC, <b>Johan Ouwerkerk</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;">Much \
better! Appreciated.</p> <p style="padding: 0;text-rendering: inherit;margin: \
0;line-height: inherit;white-space: inherit;">Perhaps a test application that sets \
window name in a variety of scripts might be useful to check how it performs on \
various scripts...?</p></pre>  </blockquote>

 <p>On December 21st, 2015, 11:14 p.m. UTC, <b>Eike Hein</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 \
test CJK and Arabic fairly regularly.</p></pre>  </blockquote>

 <p>On December 25th, 2015, 12:10 p.m. UTC, <b>andreas kainz</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;">as \
I'm to jung to die can you change the behavior from your new tasks.svgz file to </p> \
<ol style="padding: 0;text-rendering: inherit;margin: 0 0 0 2em;line-height: \
inherit;white-space: normal;"> <li style="padding: 0;text-rendering: inherit;margin: \
0;line-height: inherit;white-space: normal;">add blue boarder as all other tasks have \
(see first line in taskbar3.png)</li> </ol>
<p style="padding: 0;text-rendering: inherit;margin: 0;line-height: \
inherit;white-space: inherit;">as suggested above.</p></pre>  </blockquote>

 <p>On December 25th, 2015, 12:36 p.m. UTC, <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;">Looking good, Eike, I'm just not sure about the gray background for \
minimized tasks. It makes them more prominent than the non-minimized ones - I liked \
the frameless variant for those better.</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;">Eike \
can I have a blue boarder for the selected task as fare as I see it's the only \
selection mode without border.</p></pre> <br />

<p>- andreas</p>

<br />
<p>On December 16th, 2015, 7:23 p.m. UTC, andreas kainz 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, Marco Martin and Uri Herrera.</div>
<div>By andreas kainz.</div>

<p style="color: grey;"><i>Updated Dec. 16, 2015, 7:23 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;"><h1 style="font-size: 100%;text-rendering: inherit;padding: \
0;white-space: normal;margin: 0;line-height: inherit;">Problem</h1> <p \
style="padding: 0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: \
inherit;">with the new taskbar we look that the look and feel is consistent between \
plasma and the applications therefore Uri change the selected application taskbar \
button to a blue background. The problem is that the blue background couldn't be the \
same blue than e.g. in the dolphin sidebar cause when you select an element in the \
sidebar the text color change from "black" to white which isn't possible in the \
system tray and than the contrast isn't that good in the panel for selected \
application (gray text on blue background). In addition the blue is very visible. see \
screenshot before.</p> <h1 style="font-size: 100%;text-rendering: inherit;padding: \
0;white-space: normal;margin: 0;line-height: inherit;">Solution</h1> <p \
style="padding: 0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: \
inherit;">I like that we use the same color language but when you look at the dolphin \
toolbar on top selected elements (e.g. preview in the screenshot) are gray so I \
change the blue color for the selected application to gray and change minimized app \
to no border.</p> <p style="padding: 0;text-rendering: inherit;margin: 0;line-height: \
inherit;white-space: inherit;">what do you think?</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;">I will test the new taskbar and hope someone else can \
test it too before we may ship it.</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/desktoptheme/breeze/widgets/tasks.svgz <span style="color: \
grey">(086558b)</span></li>

</ul>

<p><a href="https://git.reviewboard.kde.org/r/126373/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/12/15/28f02c74-3489-4e35-a83f-45bd59a1e681__PlasmaThemeTaskbarBefore.png">taskbar \
style old</a></li>

 <li><a href="https://git.reviewboard.kde.org/media/uploaded/files/2015/12/15/1f9c7570-114d-4192-b2e5-0c713adfaad7__PlasmaThemeTaskbarAfter.png">taskbar \
style new</a></li>

 <li><a href="https://git.reviewboard.kde.org/media/uploaded/files/2015/12/16/a6faa46d-1f81-4140-824c-983f6bb5671f__tasks.svgz">new \
tasks.svgz file move to /usr/share/plasma/desktoptheme/breeze/widgets/</a></li>

 <li><a href="https://git.reviewboard.kde.org/media/uploaded/files/2015/12/16/fafdc5e8-bd92-43bd-8006-71088af6fdf4__taskbar.png">taskbar \
old and new</a></li>

 <li><a href="https://git.reviewboard.kde.org/media/uploaded/files/2015/12/16/46755f5c-9c95-4e13-b5c6-4966496a5056__tasks.svgz">tasks \
new blue boarder in difference to the original one</a></li>

 <li><a href="https://git.reviewboard.kde.org/media/uploaded/files/2015/12/16/0851a433-b3f5-4d93-a7be-7540be0f0692__taskbar3.png">new \
draft, origin, old draft</a></li>

</ul>

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

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

--===============6509132502241948835==--

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