Login | Register For Free | Help
Search for: (Advanced)

Mailing List Archive: Wikipedia: Wikitech

8 simple ways for improving Gerrit

 

 

Wikipedia wikitech RSS feed   Index | Next | Previous | View Threaded


innocentkiller at gmail

Jul 28, 2012, 5:21 AM

Post #1 of 11 (2749 views)
Permalink
8 simple ways for improving Gerrit

Hi everyone,

We've wanted to change the Gerrit UI to be less ugly for quite awhile, and I
think a good first step is getting rid of the puke green/yellow color
schemes. Gerrit has the ability to change these colors without using CSS--
it's done with the "theme" configuration[0]. I'm awful at choosing these
sorts of things, so I thought I would open it up to the list for a bit of
bikeshedding to come up with some colors we can use.

Specifically, there's 5 colors we can change *right now* and that I'd love
to get some input on what to change them to. These 5 are:

1) backgroundColor -- pretty self explanatory, default is #FCFEEF for
anonymous users and #FFFFFF for logged in users.
2) topMenuColor -- the color in the top menu area, the puke green, #D4E9A9
3) textColor -- self explanatory, default is #000000
4) trimColor -- used for section headers and such, same green as
topMenuColor by default
5) selectionColor -- the cream-yellow color used when you're highlighting a
given field/button/etc in Gerrit, color is #FFFFCC

Additionally, there's 3 more colors that we'll be able to customize starting
with 2.5, so it's worth keeping them in mind (and maybe going ahead and
picking colors for them too):

5) changeTableOutdatedColor -- That glaring red that shows up in the
dependencies field when a dependency is outdated, default #F08080
6) tableOddRowColor -- with 2.5, we can do alternating colors for the change
listings, making it easier to read. By default, transparent.
7) tableEvenRowColor -- complement of above

We can test these all on the labs instance of Gerrit[1], and in fact RobLa
and I tried some colors awhile back (but neither of us are designers). If
anyone wants access to the instance so they can play with it, please ping
me and I'll be happy to add you. Thanks for input everyone :)

-Chad

[0] https://gerrit.wikimedia.org/r/Documentation/config-gerrit.html#_a_id_theme_a_section_theme
[1] http://gerrit-dev.wmflabs.org/

_______________________________________________
Wikitech-l mailing list
Wikitech-l [at] lists
https://lists.wikimedia.org/mailman/listinfo/wikitech-l


innocentkiller at gmail

Jul 28, 2012, 5:25 AM

Post #2 of 11 (2695 views)
Permalink
Re: 8 simple ways for improving Gerrit [In reply to]

On Sat, Jul 28, 2012 at 8:21 AM, Chad <innocentkiller [at] gmail> wrote:
> Hi everyone,
>
> We've wanted to change the Gerrit UI to be less ugly for quite awhile, and I
> think a good first step is getting rid of the puke green/yellow color
> schemes. Gerrit has the ability to change these colors without using CSS--
> it's done with the "theme" configuration[0]. I'm awful at choosing these
> sorts of things, so I thought I would open it up to the list for a bit of
> bikeshedding to come up with some colors we can use.
>

Let me clarify--this is not a substitute for actually sitting down and writing
some awesome CSS to re-skin Gerrit, this is just so A) we can do this like
right now with almost zero effort, and B) lay the groundwork for re-skinning
by at least picking a sane color scheme and less custom CSS we'll need
to write.

-Chad

_______________________________________________
Wikitech-l mailing list
Wikitech-l [at] lists
https://lists.wikimedia.org/mailman/listinfo/wikitech-l


krinklemail at gmail

Jul 28, 2012, 11:39 AM

Post #3 of 11 (2690 views)
Permalink
Re: 8 simple ways for improving Gerrit [In reply to]

On Jul 28, 2012, at 5:21 AM, Chad wrote:

> [..]
>
> 1) backgroundColor -- pretty self explanatory, default is #FCFEEF for
> anonymous users and #FFFFFF for logged in users.
> 2) topMenuColor -- the color in the top menu area, the puke green, #D4E9A9
> 3) textColor -- self explanatory, default is #000000
> 4) trimColor -- used for section headers and such, same green as
> topMenuColor by default
> 5) selectionColor -- the cream-yellow color used when you're highlighting a
> given field/button/etc in Gerrit, color is #FFFFCC
>
> Additionally, [..]:
>
> 5) changeTableOutdatedColor -- That glaring red that shows up in the
> dependencies field when a dependency is outdated, default #F08080
> 6) tableOddRowColor -- with 2.5, we can do alternating colors for the change
> listings, making it easier to read. By default, transparent.
> 7) tableEvenRowColor -- complement of
>
> [..]
>
> >> Subject: [Wikitech-l] 8 simple ways for improving Gerrit
>

The 7--+1 simple ways for improving Gerrit.
After 5 comes 6, you know ;-)

-- Krinkle


_______________________________________________
Wikitech-l mailing list
Wikitech-l [at] lists
https://lists.wikimedia.org/mailman/listinfo/wikitech-l


innocentkiller at gmail

Jul 28, 2012, 1:36 PM

Post #4 of 11 (2641 views)
Permalink
Re: 8 simple ways for improving Gerrit [In reply to]

On Sat, Jul 28, 2012 at 2:39 PM, Krinkle <krinklemail [at] gmail> wrote:
> The 7--+1 simple ways for improving Gerrit.
> After 5 comes 6, you know ;-)
>

Indeed, I seem to have forgotten how to count.

-Chad

_______________________________________________
Wikitech-l mailing list
Wikitech-l [at] lists
https://lists.wikimedia.org/mailman/listinfo/wikitech-l


arun.planemad at gmail

Jul 29, 2012, 2:38 PM

Post #5 of 11 (2686 views)
Permalink
Re: 8 simple ways for improving Gerrit [In reply to]

Here is a quick suggestion. These should be more neutral and easy on the
eyes if you keep seeing a lot of gerrit. I wish there was a simple way to
change the values in the css and upload a preview, but i did a view source
on gerrit and I received quite a fright.

Leaving it to someone else to show us how this scheme looks:

1) backgroundColor -- no change
2) topMenuColor -- #DBDCFF
3) textColor -- no change (unless its possible to have different classes
for different texts)
4) trimColor -- optional #A4A5BF
5) selectionColor -- #FFE4CE, alternate #F1F1FF

--
j.mp/ArunGanesh
_______________________________________________
Wikitech-l mailing list
Wikitech-l [at] lists
https://lists.wikimedia.org/mailman/listinfo/wikitech-l


innocentkiller at gmail

Jul 29, 2012, 3:24 PM

Post #6 of 11 (2686 views)
Permalink
Re: 8 simple ways for improving Gerrit [In reply to]

On Sun, Jul 29, 2012 at 5:38 PM, Arun Ganesh <arun.planemad [at] gmail> wrote:
> Here is a quick suggestion. These should be more neutral and easy on the
> eyes if you keep seeing a lot of gerrit. I wish there was a simple way to
> change the values in the css and upload a preview, but i did a view source
> on gerrit and I received quite a fright.
>
> Leaving it to someone else to show us how this scheme looks:
>
> 1) backgroundColor -- no change
> 2) topMenuColor -- #DBDCFF
> 3) textColor -- no change (unless its possible to have different classes
> for different texts)
> 4) trimColor -- optional #A4A5BF
> 5) selectionColor -- #FFE4CE, alternate #F1F1FF
>

Put these colors in place:

http://gerrit-dev.wmflabs.org/r/#/q/status:merged,n,z

For selectionColor, I went with #FFE4CE. I thought I liked the
other one better, but then I thought about the even/odd row
colors in 2.5, and #F1F1FF does really well for that instead.

Thoughts anyone?

-Chad

_______________________________________________
Wikitech-l mailing list
Wikitech-l [at] lists
https://lists.wikimedia.org/mailman/listinfo/wikitech-l


lists at nadir-seen-fire

Jul 29, 2012, 4:39 PM

Post #7 of 11 (2678 views)
Permalink
Re: 8 simple ways for improving Gerrit [In reply to]

On Sun, 29 Jul 2012 15:24:55 -0700, Chad <innocentkiller [at] gmail> wrote:

> On Sun, Jul 29, 2012 at 5:38 PM, Arun Ganesh <arun.planemad [at] gmail>
> wrote:
>> Here is a quick suggestion. These should be more neutral and easy on the
>> eyes if you keep seeing a lot of gerrit. I wish there was a simple way
>> to
>> change the values in the css and upload a preview, but i did a view
>> source
>> on gerrit and I received quite a fright.
>>
>> Leaving it to someone else to show us how this scheme looks:
>>
>> 1) backgroundColor -- no change
>> 2) topMenuColor -- #DBDCFF
>> 3) textColor -- no change (unless its possible to have different classes
>> for different texts)
>> 4) trimColor -- optional #A4A5BF
>> 5) selectionColor -- #FFE4CE, alternate #F1F1FF
>>
>
> Put these colors in place:
>
> http://gerrit-dev.wmflabs.org/r/#/q/status:merged,n,z
>
> For selectionColor, I went with #FFE4CE. I thought I liked the
> other one better, but then I thought about the even/odd row
> colors in 2.5, and #F1F1FF does really well for that instead.
>
> Thoughts anyone?
>
> -Chad

The table header color (#A4A5BF) doesn't quite feel as soft as the rest.
And the selected item color (#FFE4CE) just doesn't fit in with the blue.

Try using the same #DBDCFF as used in the top header for the table header
color.
And using #CDF5FF for both selected colors (the peach row and peach tab)


--
~Daniel Friesen (Dantman, Nadir-Seen-Fire) [http://daniel.friesen.name]

_______________________________________________
Wikitech-l mailing list
Wikitech-l [at] lists
https://lists.wikimedia.org/mailman/listinfo/wikitech-l


innocentkiller at gmail

Jul 30, 2012, 5:57 AM

Post #8 of 11 (2627 views)
Permalink
Re: 8 simple ways for improving Gerrit [In reply to]

On Sun, Jul 29, 2012 at 7:39 PM, Daniel Friesen
<lists [at] nadir-seen-fire> wrote:
> On Sun, 29 Jul 2012 15:24:55 -0700, Chad <innocentkiller [at] gmail> wrote:
>
>> On Sun, Jul 29, 2012 at 5:38 PM, Arun Ganesh <arun.planemad [at] gmail>
>> wrote:
>>>
>>> Here is a quick suggestion. These should be more neutral and easy on the
>>> eyes if you keep seeing a lot of gerrit. I wish there was a simple way to
>>> change the values in the css and upload a preview, but i did a view
>>> source
>>> on gerrit and I received quite a fright.
>>>
>>> Leaving it to someone else to show us how this scheme looks:
>>>
>>> 1) backgroundColor -- no change
>>> 2) topMenuColor -- #DBDCFF
>>> 3) textColor -- no change (unless its possible to have different classes
>>> for different texts)
>>> 4) trimColor -- optional #A4A5BF
>>> 5) selectionColor -- #FFE4CE, alternate #F1F1FF
>>>
>>
>> Put these colors in place:
>>
>> http://gerrit-dev.wmflabs.org/r/#/q/status:merged,n,z
>>
>> For selectionColor, I went with #FFE4CE. I thought I liked the
>> other one better, but then I thought about the even/odd row
>> colors in 2.5, and #F1F1FF does really well for that instead.
>>
>> Thoughts anyone?
>>
>> -Chad
>
>
> The table header color (#A4A5BF) doesn't quite feel as soft as the rest.
> And the selected item color (#FFE4CE) just doesn't fit in with the blue.
>
> Try using the same #DBDCFF as used in the top header for the table header
> color.
> And using #CDF5FF for both selected colors (the peach row and peach tab)
>

New colors applied: http://gerrit-dev.wmflabs.org/r/#/q/status:merged,n,z

-Chad

_______________________________________________
Wikitech-l mailing list
Wikitech-l [at] lists
https://lists.wikimedia.org/mailman/listinfo/wikitech-l


innocentkiller at gmail

Aug 5, 2012, 1:03 PM

Post #9 of 11 (2633 views)
Permalink
Re: 8 simple ways for improving Gerrit [In reply to]

On Mon, Jul 30, 2012 at 5:57 AM, Chad <innocentkiller [at] gmail> wrote:
> On Sun, Jul 29, 2012 at 7:39 PM, Daniel Friesen
> <lists [at] nadir-seen-fire> wrote:
>> On Sun, 29 Jul 2012 15:24:55 -0700, Chad <innocentkiller [at] gmail> wrote:
>>
>>> On Sun, Jul 29, 2012 at 5:38 PM, Arun Ganesh <arun.planemad [at] gmail>
>>> wrote:
>>>>
>>>> Here is a quick suggestion. These should be more neutral and easy on the
>>>> eyes if you keep seeing a lot of gerrit. I wish there was a simple way to
>>>> change the values in the css and upload a preview, but i did a view
>>>> source
>>>> on gerrit and I received quite a fright.
>>>>
>>>> Leaving it to someone else to show us how this scheme looks:
>>>>
>>>> 1) backgroundColor -- no change
>>>> 2) topMenuColor -- #DBDCFF
>>>> 3) textColor -- no change (unless its possible to have different classes
>>>> for different texts)
>>>> 4) trimColor -- optional #A4A5BF
>>>> 5) selectionColor -- #FFE4CE, alternate #F1F1FF
>>>>
>>>
>>> Put these colors in place:
>>>
>>> http://gerrit-dev.wmflabs.org/r/#/q/status:merged,n,z
>>>
>>> For selectionColor, I went with #FFE4CE. I thought I liked the
>>> other one better, but then I thought about the even/odd row
>>> colors in 2.5, and #F1F1FF does really well for that instead.
>>>
>>> Thoughts anyone?
>>>
>>> -Chad
>>
>>
>> The table header color (#A4A5BF) doesn't quite feel as soft as the rest.
>> And the selected item color (#FFE4CE) just doesn't fit in with the blue.
>>
>> Try using the same #DBDCFF as used in the top header for the table header
>> color.
>> And using #CDF5FF for both selected colors (the peach row and peach tab)
>>
>
> New colors applied: http://gerrit-dev.wmflabs.org/r/#/q/status:merged,n,z
>

I meant to send an e-mail out Friday, but that didn't happen. We ended
up going a totally different direction with the skinning, and the results
of those efforts are live.

https://gerrit.wikimedia.org/r/

Thanks to OpenStack for the initial design we based our work on.
And big thanks to Timo for CSS improvements and to Trevor for
whipping up a logo super fast.

I'm done bikeshedding on this now since the bikeshed isn't puke
green anymore :)

-Chad

_______________________________________________
Wikitech-l mailing list
Wikitech-l [at] lists
https://lists.wikimedia.org/mailman/listinfo/wikitech-l


yuvipanda at gmail

Aug 6, 2012, 9:42 AM

Post #10 of 11 (2573 views)
Permalink
Re: 8 simple ways for improving Gerrit [In reply to]

On Mon, Aug 6, 2012 at 1:33 AM, Chad <innocentkiller [at] gmail> wrote:
> Thanks to OpenStack for the initial design we based our work on.
> And big thanks to Timo for CSS improvements and to Trevor for
> whipping up a logo super fast.

W00t, much nicer looking! Thanks to everyone involved for doing the needful :D


--
Yuvi Panda T
http://yuvi.in/blog

_______________________________________________
Wikitech-l mailing list
Wikitech-l [at] lists
https://lists.wikimedia.org/mailman/listinfo/wikitech-l


nadreck at gmail

Aug 6, 2012, 9:55 AM

Post #11 of 11 (2570 views)
Permalink
Re: 8 simple ways for improving Gerrit [In reply to]

Seconded! Time will tell on what other tweaks need to happen, but overall
it looks much cleaner and more usable. Great job on getting this out. :)

Nabil

On Mon, Aug 6, 2012 at 9:42 AM, Yuvi Panda <yuvipanda [at] gmail> wrote:

> On Mon, Aug 6, 2012 at 1:33 AM, Chad <innocentkiller [at] gmail> wrote:
> > Thanks to OpenStack for the initial design we based our work on.
> > And big thanks to Timo for CSS improvements and to Trevor for
> > whipping up a logo super fast.
>
> W00t, much nicer looking! Thanks to everyone involved for doing the
> needful :D
>
>
_______________________________________________
Wikitech-l mailing list
Wikitech-l [at] lists
https://lists.wikimedia.org/mailman/listinfo/wikitech-l

Wikipedia wikitech RSS feed   Index | Next | Previous | View Threaded
 
 


Interested in having your list archived? Contact Gossamer Threads
 
  Web Applications & Managed Hosting Powered by Gossamer Threads Inc.