UI Polish

[larz0]

What's new:

• Added modal window animation to all modal windows
• Added drop-down animation to all drop-down menus except for code-hint menus
• Added Quick Open drop-down animation
• Made Extension Manager keyword text quieter to reduce noise
• Added input focus/error ring transition for all input fields
• Refactored and added pressed state for all quiet dark button in the side bar (e.g. Project, Working Set Options drop-down menu. Brackets Git extension can also benefit from this)
• Replaced Extension Search clear icon to make sure we're using the same "X" in our UI
• Replaced Side Bar selection background image with CSS
• Made Extension Manager alert text much smaller as they can take up a lot of space
• Refined Topcoat. The lines are finer now with subtler highlights and shadows; focus and error rings on controls are also on a sweet spot now.
• Replaced double triangle with single triangle for Project drop-down should use a single triangle and not a double triangle #7134
• Removed unused icons.

[larz0]

@redmunds the sidebar selection sliding animation will be tricky because of the way it's built. There's two separate pieces, the selection and the triangle.

[larz0]

@redmunds I made another change based on @ingorichter's feedback. The current hit area for Find -in-Files pagination icons are really smaller and they have a weird shape (6px by 18px). I've made it 18px by 18px and added subtle hover state so that the hit area is obvious.

[larz0]

@redmunds nice catch. I've stopped the nested dialog from flashing.

[TomMalbran]

You shouldn't remove this class, and the opacity stuff. Is there so that we don't end up viewing a backdrop for each modal dialog, and just see the one from the last one. If you can see all of them, the bg color gets less opaque with every dialog, making it darker. You can see how it looks by opening the extension manager and then install from url.

[larz0]

I did this on purpose. Ideally we shouldn't use too many nested dialogs. Having two is dialogs is kind of pushing it and since the second backdrop covers the first dialog it's fine not hiding the first backdrop. Hope that makes sense.

[TomMalbran]

I know, but even with 2 it looks better with just 1 backdrop. Maybe is better if we fix the classes in the Dialogs widget.

[TomMalbran]

We could give a extra class to the first backdrop created and animate only that one?

[redmunds]

I kinda like the multiple backdrops because it also darkens the parent modal dialog.

[larz0]

I like the darkened look as well because it increases the depth when the second dialog appears.

[TomMalbran]

Well is possible to remove the flickering by adding the animation to the first backdrop only.

Anyway, if we are going to remove this class, we should stop adding them to the Dialogs too, by removing the code that does it in src/widgets/Dialogs.js. https://github.com/adobe/brackets/blob/master/src/widgets/Dialogs.js#L298 and
https://github.com/adobe/brackets/blob/master/src/widgets/Dialogs.js#L322 and https://github.com/adobe/brackets/blob/master/src/widgets/Dialogs.js#L336

[larz0]

Sounds good. I’ll go ahead and do that. Thanks Tom!

On Mar 18, 2014, at 4:57 PM, Tomás Malbrán <notifications@github.commailto:notifications@github.com> wrote:

In src/styles/brackets_patterns_override.less:

}
-.last-backdrop {

Well is possible to remove the flickering by adding the animation to the first backdrop only.

Anyway, if we are going to remove this class, we should stop adding them to the Dialogs too, by removing the code that does it in src/widgets/Dialogs.js. https://github.com/adobe/brackets/blob/master/src/widgets/Dialogs.js#L298 and
https://github.com/adobe/brackets/blob/master/src/widgets/Dialogs.js#L322 and https://github.com/adobe/brackets/blob/master/src/widgets/Dialogs.js#L336

—
Reply to this email directly or view it on GitHubhttps://github.com//pull/5921/files#r10731960.

[ingorichter]

@larz0 the enlarged hit area looks good.

[peterflynn]

@TomMalbran @larz0 I thought part of the reason we added this was a z-order fix of some sort... are we sure it's safe to remove now? Looks like PR #4714 or #5085 maybe...

[TomMalbran]

The z-index is added directly to each modal and backdrop element. I added the .last-backdrop class so that we only show the last backdrop.

[larz0]

@redmunds I've addressed the feedbacks.

[redmunds]

Looks good. Merging.