[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: "Johan Ouwerkerk" <jm.ouwerkerk () gmail ! com>
Date: 2015-12-20 23:29:22
Message-ID: 20151220232922.25463.47045 () mimi ! kde ! org
[Download RAW message or body]
--===============1789777156009302030==
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.
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).
- Johan
-----------------------------------------------------------
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
>
>
--===============1789777156009302030==
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>
</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;">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> <br />
<p>- Johan</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>
--===============1789777156009302030==--
[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]
Configure |
About |
News |
Add a list |
Sponsored by KoreLogic