Open GoogleCodeExporter opened 8 years ago
Another thing that needs to be done is to refine the color values. It's tricky
nailing the same colors Apple used because of the transparency involved. I've
done a fair job imitating the existing buttons, but obviously it's not spot-on.
Regarding the buttons, for those interested, there are five major colors that I
have seen used throughout Apple's UI so far (forgive me if there are official
names that I'm not using): slate, blue, red, darkblue, and black. Slate is the
default "neutral" button color, with darkblue being a common alternate. There
seems to be little rhyme or reason to the use of these two, as evidenced by the
Cancel button in my screenshots being slate in one and darkblue in the other.
Meanwhile, red is consistently delete, blue is usually confirm, save, or
submit, and black seems to be used on dark UI (when the title bar switches to
white text on black background). All of these are available (in some form or
another) in the code I submitted, complete with double linear gradients, inset
and outset box shadows, appropriate borders, and correct text color shadow.
Now they just need tweaking to make them appear color accurate after
transparency effects are applied.
Original comment by eslind...@gmail.com
on 2 Aug 2011 at 9:58
[deleted comment]
[deleted comment]
[deleted comment]
Updated the code. Now using external files which are easy to include. The
background obscuring DIV gets created on a per-dialog basis now, since I
realized they should obscure everything below them, including other dialogs
(before dialogs would obscure the page but not each other). This also has the
added side benefit of not requiring you to remember to add a special background
DIV to your page each time you want to use the dialog library.
Also, the JavaScript is now a singleton ("dialog" class) to avoid pollution of
the global namespace.
To use, simply add reference to dialog.js and dialog.css, then use the
dialog.show() and dialog.hide() functions. Each function accepts a string (ID
of dialog box DIV), object (dialog box DIV itself), or number (index into the
stack of active dialogs) as its only parameter.
Normally, clicking outside the dialog box will dismiss it without action. To
override this behavior, specify the "modal" attribute on the dialog box:
<div class="floatDialog" modal="modal">
<h1>Modal Example</h1>
<p>This dialog box will not be dismissed if you click outside of it; the only way for this dialog box to disappear is for dialog.hide to be called on it.</p>
<div class="buttons full-width">
<button>Hard Choice #1</button>
<button>Hard Choice #2</button>
</div>
</div>
Note that in this example, the dialog will never disappear because dialog.hide
is never called. This modal functionality is intended for dialogs that need to
force the user to choose an action, then take that action (possibly blocking
while waiting for a response), and THEN hide the dialog box. I'm not sure if
this will be useful, but I've added it anyways. It was easy enough to do while
I was adding the auto-dismissal-by-clicking-background feature.
Original comment by eslind...@gmail.com
on 2 Aug 2011 at 8:22
Attachments:
Followup: I just found a great solution for the animation problem I was
experiencing. It turns out that there is a 'transition-timing-function'
property which in addition to taking the default named parameters (linear,
ease, ease-in, ease-out, etc.) can also be set to cubic-bezier with 4
parameters specifying the x and y of P1 and P2. By setting these to 0.5, 2.5,
0.6, 0.5 (or thereabouts) we should be able to achieve a perfect smooth "pop"
animation just like Apple's UI! This is of course assuming the input AND the
output of the cubic-bezier function aren't clamped, and several other things as
well. But if it works, this will provide the entire animation in one call,
resulting in the whole sequence being smooth as well as much easier to work
with code-wise. In addition to this change, I also discovered 3D
hardware-accelerated CSS transitions, which I plan on using instead of the
previous 2D scale() function. I'm going to switch to scale3D() (or probably
scaleZ()) and utilize that graphics hardware! However, I will not be posting
these changes in this issue. Instead, I will probably be creating a Git clone
and committing the changes to that. This post is informative in case I don't
get around to the Git clone or can't get it to post to Google Code or whatever.
Original comment by eslind...@gmail.com
on 21 Oct 2011 at 6:02
I know, I said I wasn't going to post these here, but the tests are done and
I'm not going to work on the Git thing just yet, so here's the candy:
Stupid cubic-bezier function is clamped to 0..1 on the input, making it pretty
much completely useless in this instance. (Why oh why is the input clamped?
The output shouldn't even be clamped until it has been evaluated against the
value, and then the value should only be clamped to the minimum and maximum for
that particular property: 0x000000 and 0xffffff for colors for example, but
unclamped for scale which essentially has no limits.)
Anyways, guess what I found while trying to understand why the cubic-bezier
function was causing me so much grief? Apple has implemented a "keyframe
animation" technique in Safari, which works perfectly for what I need! Check
out the attached file for a smooth, hardware-accelerated pop-in effect.
Original comment by eslind...@gmail.com
on 21 Oct 2011 at 6:50
Attachments:
Hey Eric: I'd love to see the sample .html stuff checked in to Git. Then I can
just pull from your clone and check everything out quickly :)
Original comment by msgilli...@gmail.com
on 23 Oct 2011 at 6:52
Yeah I've got a clone running for it already, but it's not integrated to my
satisfaction yet. This issue I created before our Git.
Original comment by eslind...@gmail.com
on 23 Oct 2011 at 7:00
Original issue reported on code.google.com by
eslind...@gmail.com
on 2 Aug 2011 at 7:09Attachments: