Closed Bug 616874 Opened 14 years ago Closed 14 years ago

Give life to SeaMonkey

Categories

(SeaMonkey :: UI Design, enhancement)

enhancement
Not set
normal

Tracking

(Not tracked)

VERIFIED FIXED
seamonkey2.1b2

People

(Reporter: stefanh, Assigned: stefanh)

Details

Attachments

(2 files, 6 obsolete files)

      No description provided.
Attached patch life (obsolete) — Splinter Review
Attachment #495405 - Flags: review?(kairo)
This is not a security-sensitive issue.
Group: core-security
Attachment #495405 - Attachment is private: true
(In reply to comment #2)
> This is not a security-sensitive issue.

But it's not to be public for the moment, do we have ANY other way to keep a bug private without marking it security?
Group: inactivebugs
Attachment #495405 - Attachment is private: false
Comment on attachment 495405 [details] [diff] [review]
life

>+   - The Initial Developer of the Original Code is
>+   -
>+   - The SeaMonkey Project

That makes it be "The Mozilla Foundation", actually.

>+   - Contributor(s):

You should enter yourself here.


Also, could we have some not-just-white background when the number has a non-black color? And I'd really like some hover effect - I initally thought we'd even only make it visible on hover so it's harder to find :P
We can make it appear only on hover if you want, then I can skip the transform stuff. I can make the number black or gray colored, then I suppose a white bg would be ok?
Attached patch try this one (obsolete) — Splinter Review
Try this one. No hover though, you have to tell me more precisely how you want the hover to work.
Attachment #495405 - Attachment is obsolete: true
Attachment #495412 - Flags: review?(kairo)
Attachment #495405 - Flags: review?(kairo)
Actually, the silver->blue transition was OK, but with the lack of color on the background it looked strange, I was more thinking about giving the background (body) a light-blue color like the one of the critter in our logo, or perhaps even a circular gradient.
And what about doing a simple transition to 150% size on hover?
Attached patch Another go (obsolete) — Splinter Review
Here's another one. Because of the background (I'm not sure it's that nice, but it matches the logo), I'm not using silver anymore. But now the digits appear from nowhere which I think is better anyway (I also increased the time a bit and switched to ease-in). The color now fits with the logo.

I don't think the hover: stuff is good, so I'd rather go without it. If you don't have your large enough, you just get a scrollbar. But if you insist we can have it - then I need to fix the time, I think.

We can possibly fix this a bit better in some follow-up, since I don't have much time the next 24hrs.
Attachment #495412 - Attachment is obsolete: true
Attachment #495878 - Flags: review?(kairo)
Attachment #495412 - Flags: review?(kairo)
(In reply to comment #8)
 
> I don't think the hover: stuff is good, so I'd rather go without it. If you
> don't have your large

erh, "your window" of course.
+   - The Initial Developer of the Original Code is
+   -
+   - The Mozilla Foundation.
.
.
.
+   - Contributor(s):
+   -

ftr, I'll remove those empty lines.
just for laughter sake and this bug: http://quotes.burntelectrons.org/5161
Comment on attachment 495878 [details] [diff] [review]
Another go

>+  <title>about:life</title>

Should that say "Life, the Universe, and Everything" instead?

>+      document.getElementById("magicNumber").setAttribute("id", "magicLoad");

Hmm, I wonder if changing the ID is really a nice thing to do...
I just realized that as an extra gag we could have the value being set via a JS calculation here, to not even have the actual number in the source code.

For the CSS, here's a suggestion for changes from me, please tell me what you think of that:

>+    body {
>+      background-color: #D3E6FA;
>+    }

Instead of this block, what about:

    html {
      height: 100%;
      background-color: #AFD7FF;
      background-image: -moz-radial-gradient(center 45deg, circle closest-side, #72B8FF 0%, #AFD7FF 100%);
    }

(note that doing it on the html works better than doing this on the body)

>+    p {
>+      text-align: center;
>+      font-family: arial;
>+      font-weight: bold;
>+    }

Add this line to that block to do away with the scrollbar thing:

      margin-bottom: 0;

>+      -moz-transition-property: font-size, color, text-shadow;

Change to (see below):

      -moz-transition-property: font-size, color, text-shadow, margin-top;

>+    #magicLoad:hover {
>+      font-size: 300px;
>+    }

Replace with this:

    #magicLoad:hover {
      -moz-transition-duration: 1s;
      -moz-transition-timing-function: ease;
      margin-top: 150px;
      font-size: 300px;
      color: #2727E8;
    }

What do you think about that?

The rest looks good for review, FWIW.
Attached patch new try (obsolete) — Splinter Review
In reply to comment #12)
> >+  <title>about:life</title>
> 
> Should that say "Life, the Universe, and Everything" instead?

Yeah, sounds good - fixed.
> 
> >+      document.getElementById("magicNumber").setAttribute("id", "magicLoad");
> 
> Hmm, I wonder if changing the ID is really a nice thing to do...
> I just realized that as an extra gag we could have the value being set via a JS
> calculation here, to not even have the actual number in the source code.

Yep, good idea - used sqrt() ;-) Hmm, for some reason I can't come up with any alternative to changing the id right now.

> For the CSS, here's a suggestion for changes from me, please tell me what you
> think of that:

I liked it, so I added all your suggestions :-) My only addition is that I changed the "default" color of the p to the html background-color. I also styled the p directly, instead of using the "magic" id (yeah, changed the name too) and fixed the <script> (added "application/javascript").
Attachment #495878 - Attachment is obsolete: true
Attachment #496517 - Flags: review?(kairo)
Attachment #495878 - Flags: review?(kairo)
Comment on attachment 496517 [details] [diff] [review]
new try

>+      var p = document.getElementById("magic");

I just was wondering if you need an ID in the HTML at all, but this, yes, best to have the ID.

>+      p.appendChild(document.createTextNode(Math.sqrt(1764)));

Nice :)

>+      p.setAttribute("id", "magicLoad");

In theory, we would be able to do it with a class instead of the ID. And I think |p.id = "magicLoad";| should actually work.
Attachment #496517 - Flags: review?(kairo) → review+
Neil, do we need ui-r or sr from you here?
Comment on attachment 496517 [details] [diff] [review]
new try

>+      p.appendChild(document.createTextNode(Math.sqrt(1764)));
Nit: p.textContent = Math.sqrt(1764);

>+      p.setAttribute("id", "magicLoad");
p.id = "magicLoad"
[Can we use :empty to trigger the transition?]

>+      background-color: #AFD7FF;
>+      background-image: -moz-radial-gradient(center 45deg, circle closest-side,
>+                                             #72B8FF 0%, #AFD7FF 100%);
Nit: don't have to define 45deg since it doesn't matter for a circle.
Nit: don't have to define 0% and 100% since they are the default stops.

=== ONLY READ THIS PARAGRAPH IF YOU WANT TO SUPPORT 16 BIT GRAPHICS ===
Sadly you have to be extremely careful to get gradients that look nice in 16 bit graphics modes. Your blue channel doesn't change, so I can ignore that, but otherwise the rules would have been the same as for the red channel. The first rule is that the green channel (if used, as here) must have half the gradient of the other channels, since it has 6 bits instead of five. Here we have #AF - #72 = 175 - 114 = 61 for red and #D7 - #B8 = 215 - 184 = 31 for green. This is most easily fixed by increasing the red gradient by 1. The second rule is that if you divide the colour by 8 (4 for the green channel) then the fraction must be the same for all channels. In this case we have 114 / 8 = 14.25 for red and 184 / 4 = 47 for green. This is most easily fixed by increasing the green stop by 1. This means that your gradient stops are now #72B9FF and #B0D8FF. [Alternatively, you can do the sums on the background colour, so that we have 175 / 8 = 21.875 for red and 215 / 4 = 53.75 for green. This is most easily fixed by increasing both the red and the green by 1 (because we need to increase the red gradient by 1 anyway).]
=== END OF 16 BIT GRAPHICS SUPPORT PARAGRAPH ===

>+      text-shadow: none
Nit: missing semicolon

>+      margin-top: 150px;
It looks odd to use the default margin of 1em (which works out to be 200px because of the font size) for the top margin in non-hover state, but then have a top margin in pixels in the hover state. Maybe add a 200px top margin to the non-hover state to make it clearer?
Try this one and see how it looks. I changed the color to #72B9FF before the transition, since I think that looks better. p:empty works fine.
Attachment #496606 - Flags: ui-review?(neil)
Comment on attachment 496606 [details] [diff] [review]
Now with 16-Bit graphics support and p:empty

>+    p:empty {
>+      font-size: 2px;
>+      color: #72B9FF;
>+      text-shadow: none
Still missing the semicolon.

>+    p {
>+      text-align: center;
>+      font-family: arial;
>+      font-weight: bold;
>+      margin-bottom: 0;
>+      -moz-transition-property: font-size, color, text-shadow, margin-top;
>+      -moz-transition-duration: 6s;
>+      -moz-transition-timing-function: ease-in;
>+      margin-top: 200px;
Good news! The hover transition is improved. But the original transition is worse, because that's still transitioning from 1em to 200px. So I guess you need a top margin on p:empty too.
(In reply to comment #18)
> But the original transition is
> worse, because that's still transitioning from 1em to 200px.
Actually it's now not transitioning, since the margin is always 200px. Oops.
We might want to center the number vertically, but that would mean that it doesn't animate from the top
(In reply to comment #20)
> We might want to center the number vertically

So it fits inside the circle
Here's another approach that centers the number in the "circle". The side-effect of this is that the number won't animate from the top.
gah, using table display styles is soooo ugly :(
OK, so here's another alternative using -moz-box to make it centered. The only weird thing is that if I have a font-size of less than 14px I get a vertical scrollbar (p:empty) - I use 16px now. This one rotates as well ;-)
Attachment #496861 - Attachment is obsolete: true
Attachment #496900 - Flags: ui-review?(neil)
Attachment #496900 - Flags: review?(kairo)
Comment on attachment 496900 [details] [diff] [review]
Another alternative (-moz-box)
[Checked in: See comment 26]

(I tried changing the empty font size to 1px locally but I saw no scrollbar.)
Attachment #496900 - Flags: ui-review?(neil) → ui-review+
Attachment #496900 - Flags: review?(kairo) → review+
http://hg.mozilla.org/comm-central/rev/92d4271722b0

I then discovered a duplicate style rule that I corrected in http://hg.mozilla.org/comm-central/rev/9ebd3896a291
Status: NEW → RESOLVED
Closed: 14 years ago
Resolution: --- → FIXED
Target Milestone: --- → seamonkey2.1b2
Attachment #496517 - Attachment is obsolete: true
Attachment #496606 - Attachment is obsolete: true
Attachment #496606 - Flags: ui-review?(neil)
Group: inactivebugs
Hehe, nice!

I'd suggest to add some magic lighting like here:
http://en.wikipedia.org/wiki/File:Answer_to_Life.png
http://blog.ceruleanstudios.com/?p=134
(In reply to comment #27)
> I'd suggest to add some magic lighting

If you can do it in pure HTML+CSS (we want to advertise the standards, of course), we sure welcome a patch! :P
>> http://en.wikipedia.org/wiki/File:Answer_to_Life.png
> If you can do it in pure HTML+CSS (we want to advertise the standards, of

Hmm. Something like -moz-radial-gradient perhaps.
Cannot see this in today's Windows nightly build. Don't say you forgot the installer (package-manifest.in) *again*!
Fix the installer part too. This is checkin-needed as well since I might not get to it for a few days. I would push now but seamonkey tree is closed.
Attachment #497093 - Flags: review?(kairo)
(In reply to comment #31)
> Cannot see this in today's Windows nightly build. Don't say you forgot the
> installer (package-manifest.in) *again*!

Oops...
Attachment #497093 - Flags: review?(kairo) → review+
Attachment #496900 - Attachment description: Another alternative (-moz-box) → Another alternative (-moz-box) [Checked in: See comment 26]
Comment on attachment 497093 [details] [diff] [review]
installer
[Checked in: Comment 34]

http://hg.mozilla.org/comm-central/rev/009256f3df67
Attachment #497093 - Attachment description: installer → installer [Checked in: Comment 33]
Attachment #497093 - Attachment description: installer [Checked in: Comment 33] → installer [Checked in: Comment 34]
Yep, now it's there. :-)

RFE: Perhaps something on click, like the question? .-)
Status: RESOLVED → VERIFIED
(In reply to comment #35)
> RFE: Perhaps something on click, like the question? .-)

Er, you know that if anyone knows both the answer and the question, the universe stops to exist, right? :P
Severity: normal → enhancement
Component: General → UI Design
Flags: in-testsuite-
OS: Mac OS X → All
QA Contact: general → ui-design
Hardware: x86 → All
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: