UI Polish #5921

larz0 · 2013-11-09T06:24:57Z

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.

…rmance issue.

… other components. Removed unused images.

… svg icon.

…modal-transition

…rs because they're similar except unicode looks better and we have more control over it using CSS.

…modal-transition

larz0 · 2014-03-18T21:15:14Z

@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.

…hit area is not apparent.

larz0 · 2014-03-18T22:00:29Z

@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 · 2014-03-18T22:23:16Z

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

TomMalbran · 2014-03-18T23:13:29Z

src/styles/brackets_patterns_override.less

 }
-.last-backdrop {


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.

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.

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.

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

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

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

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

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.com mailto: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 · 2014-03-19T01:12:53Z

@larz0 the enlarged hit area looks good.

peterflynn · 2014-03-19T06:52:01Z

src/styles/brackets_patterns_override.less

 }
-.last-backdrop {


@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...

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 · 2014-03-19T21:30:12Z

@redmunds I've addressed the feedbacks.

…modal-transition

redmunds · 2014-03-20T00:33:15Z

Looks good. Merging.

UI Polish

larz0 added 5 commits November 8, 2013 22:24

Added Modal Window animation.

e26d386

Tweak.

bb515c5

Added dropdown animation.

171888e

Removed context menu animation due to project manager selection perfo…

1c59bde

…rmance issue.

Removed quick open dropdown border. #5029 is no longer an issue.

362856b

larz0 mentioned this pull request Nov 9, 2013

[Core][Quick Open]: There is an extra line under Quick Open bar when resize the window. #5029

Closed

larz0 added 14 commits November 9, 2013 10:17

Removed backface-visibility property as it's not needed.

9357b94

Added JSTree transition.

01d19c0

JSTree animation tweaks.

a9577be

Quick Open animation tweaks.

7ecb72f

Muted Extension Manager keyword text.

ab092cd

Added input glow transition.

3ebc695

Added pressed state to Project Dropdown button.

67fba82

Replaced clear icon with unicode character to keep it consistent with…

451c34d

… other components. Removed unused images.

Replaced Recent Project close icon with unicode character and removed…

9e5ac07

… svg icon.

Replaced sidebar selection bg with CSS and removed bg image.

a64f5f7

Sidebar selection tweak.

6575da9

Merge branch 'master' of https://github.com/adobe/brackets into larz/…

0902c7e

…modal-transition

Tweaked sidebar selection shadow and highlight.

a5f070b

Removed close and dirty icons and replaced them with unicode characte…

a706a32

…rs because they're similar except unicode looks better and we have more control over it using CSS.

ghost assigned njx Nov 11, 2013

larz0 added 9 commits November 12, 2013 16:32

Merge branch 'master' of https://github.com/adobe/brackets into larz/…

f405010

…modal-transition

Tweaked working files dirty and close icon vertical centering.

b635d86

Removed JSTree Animation.

7737c87

Tweaked Project Panel Highlight.

0db8c92

Tweaked Extension Manager Dialog version alert text.

1ae3c6d

Tweaked about dialog icon.

666fde0

Tweaked Modal Dialog border color.

39b3353

Tweaked quick open dropdown menu drop-shadow.

8cd2c0f

Removed code hint animation.

e4f126e

larz0 added 2 commits March 18, 2014 11:47

Faster Quick Open animation.

2c451f0

Using mixins for animation based on @redmunds' feedback.

d293ed5

Increased pagination icon hit area and added hover state because the …

5ac1106

…hit area is not apparent.

Removed flicker for nested modal dialogs.

79e5465

Fixed indentation.

c38f4a5

TomMalbran reviewed Mar 18, 2014
View reviewed changes

larz0 added 2 commits March 18, 2014 16:54

Vendor prefix fixes from @redmunds and @TomMalbran

352d544

Removing last backdrop code based on @TomMalbran's feedback.

3a420aa

peterflynn reviewed Mar 19, 2014
View reviewed changes

larz0 added 2 commits March 19, 2014 14:06

Missing semicolon.

bd407b7

Fix for #7151

550bc5c

larz0 added 3 commits March 19, 2014 15:31

Merge branch 'master' of https://github.com/adobe/brackets into larz/…

ce492cf

…modal-transition

Tweaked dark buttons.

9fec5ce

Missed autocomplete unprefixed keyframes.

da64651

redmunds added a commit that referenced this pull request Mar 20, 2014

Merge pull request #5921 from adobe/larz/modal-transition

b2468f6

UI Polish

redmunds merged commit b2468f6 into master Mar 20, 2014

TomMalbran deleted the larz/modal-transition branch March 20, 2014 00:37

This was referenced Mar 20, 2014

InlineEditor file link not properly underlined #7271

Closed

Bottom border of Quick Open text field has wrong color #7307

Closed

core-ai-bot mentioned this pull request Aug 30, 2021

[CLOSED] UI Polish brackets-archive/bracketsIssues#5409

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

UI Polish #5921

UI Polish #5921

larz0 commented Nov 9, 2013

larz0 commented Mar 18, 2014

larz0 commented Mar 18, 2014

larz0 commented Mar 18, 2014

TomMalbran Mar 18, 2014

larz0 Mar 18, 2014

TomMalbran Mar 18, 2014

TomMalbran Mar 18, 2014

redmunds Mar 18, 2014

larz0 Mar 18, 2014

TomMalbran Mar 18, 2014

larz0 Mar 19, 2014

ingorichter commented Mar 19, 2014

peterflynn Mar 19, 2014

TomMalbran Mar 19, 2014

larz0 commented Mar 19, 2014

redmunds commented Mar 20, 2014

		}
		.last-backdrop {

		}
		.last-backdrop {

UI Polish #5921

UI Polish #5921

Conversation

larz0 commented Nov 9, 2013

larz0 commented Mar 18, 2014

larz0 commented Mar 18, 2014

larz0 commented Mar 18, 2014

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ingorichter commented Mar 19, 2014

Choose a reason for hiding this comment

Choose a reason for hiding this comment

larz0 commented Mar 19, 2014

redmunds commented Mar 20, 2014