Skip to content
This repository has been archived by the owner on Sep 6, 2021. It is now read-only.

Fix transition for Replace ModalBar with 2 lines #7524

Closed
wants to merge 2 commits into from
Closed
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions src/styles/brackets.less
Original file line number Diff line number Diff line change
@@ -1087,6 +1087,17 @@ a, img {
}
}

&.offscreen2 {
-webkit-transform: translate(0, -88px);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Using -100% seems to work fine.

transform: translate(0, -88px);
transition: -webkit-transform 266ms cubic-bezier(0, 0.56, 0, 1);
transition: transform 266ms cubic-bezier(0, 0.56, 0, 1);

body:not(.has-appshell-menus) & {
top: 81px;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I had a hard time trying to figure why this was changed, until I realized that this changes because the menubar will use 2 lines, one for the menus and 1 for the title. It might be better if we set this value in JavaScript.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@TomMalbran No, this is when the ModalBar takes 2 lines for FindReplace: first line is for Find text, second line is for Replace text (and other assorted widgets).

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are you sure? Notice that this is the top property and applied only when there are html menus. The idea behind this was to change the position property of the modalbar from static to absolute so that the editor could be placed under the modalbar. If we didn't do this the modalbar would leave a blank space where it used to be instead of showing the editor.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Now that I remember, I helped larz with the original implementation and this line was to fix the position with the html menu bar. More on that in the original PR: #4684 (comment)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh, the body:not(.has-appshell-menus) part is not used, so I shouldn't have copied that part. I didn't realize that this class was used for something other than a modal bar animation -- I'll take a closer look and maybe spit it off.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It is used to position the modalbar before starting the animation. Without html menus is placed at (0,0) using an absolution position relative the editor holder. With html menus is has to be placed a below the menus. This bit of code should be placed inside the &.popout and not inside the &.offscreens since is part of the preparation and not the actual animation.

Anyway that top still has an issue. The html menu can become 2 lines too and the height is higher. This is why I think that we should just change the style in JavaScript and remove that from the code. This can be done in ModalBar.prototype.prepareClose after this._$root.addClass("popout");.

If we then change the -44px to -100% in &.offscreen we won't need to use 2 classes.

}
}

input {
font-family: @sansFontFamily;
outline: none;
7 changes: 5 additions & 2 deletions src/widgets/ModalBar.js
Original file line number Diff line number Diff line change
@@ -183,7 +183,8 @@ define(function (require, exports, module) {
*/
ModalBar.prototype.close = function (restoreScrollPos, animate) {
var result = new $.Deferred(),
self = this;
self = this,
animateClass;

if (restoreScrollPos === undefined) {
restoreScrollPos = true;
@@ -210,7 +211,9 @@ define(function (require, exports, module) {
}

if (animate) {
AnimationUtils.animateUsingClass(this._$root.get(0), "offscreen")
// Use "offscreen2" class if ModalBar is 2 lines tall, otherwise use "offscreen"
animateClass = (this.height() > 50) ? "offscreen2" : "offscreen";
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Where do you get the magic number 50? Wouldn't it be more reliable to check for the visibility of the second text field?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The second text field is always visible -- we need to determine if it's on the first line or the second line.

50 is roughly a line and a half in height. The height can only be exactly 1 or 2 lines, so it doesn't need to be exact. This could be a problem when we add HiDPI support, though.

A better check might be to see if the top of the 2 text fields is the same, or if second field is below first field.

AnimationUtils.animateUsingClass(this._$root.get(0), animateClass)
.done(doRemove);
} else {
doRemove();