Skip to content

Commit 1ca115f

Browse files
guz-antonguz-anton
committed
Merge branch 'MAGETWO-34949' of github.corp.ebay.com:magento-vanilla/magento2ce into MAGETWO-34949
2 parents e10da53 + b1ba4d6 commit 1ca115f

File tree

11 files changed

+246
-244
lines changed

11 files changed

+246
-244
lines changed

‎app/code/Magento/Catalog/Block/Adminhtml/Product/Helper/Form/Category.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -132,7 +132,7 @@ public function getAfterElementHtml()
132132
'id' => 'add_category_button',
133133
'label' => $newCategoryCaption,
134134
'title' => $newCategoryCaption,
135-
'onclick' => 'jQuery("#new-category").trigger("openDialog")',
135+
'onclick' => 'jQuery("#new-category").trigger("openModal")',
136136
'disabled' => $this->getDisabled(),
137137
]
138138
);

‎app/code/Magento/Catalog/view/adminhtml/web/js/new-category-dialog.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
define([
88
'jquery',
99
'jquery/ui',
10-
'Magento_Ui/js/popup/popup',
10+
'Magento_Ui/js/modal/modal',
1111
'mage/translate',
1212
'mage/backend/tree-suggest',
1313
'mage/backend/validation'
@@ -52,9 +52,9 @@ define([
5252
options.errorClass, options.validClass || '');
5353
}
5454
});
55-
this.element.popup({
55+
this.element.modal({
5656
type: 'slide',
57-
dialogClass: 'mage-new-category-dialog form-inline',
57+
modalClass: 'mage-new-category-dialog form-inline',
5858
title: $.mage.__('Create Category'),
5959
buttons: [{
6060
text: $.mage.__('Create Category'),
@@ -93,7 +93,7 @@ define([
9393
$('#new_category_name, #new_category_parent-suggest').val('');
9494
$suggest.val('');
9595
clearParentCategory();
96-
widget.element.trigger('closeDialog');
96+
widget.element.trigger('closeModal');
9797
} else {
9898
$('#new_category_messages').html(data.messages);
9999
}

‎app/code/Magento/Ui/view/base/web/js/popup/popup.js‎ renamed to ‎app/code/Magento/Ui/view/base/web/js/modal/modal.js‎

Lines changed: 62 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -6,174 +6,174 @@ define([
66
"jquery",
77
"underscore",
88
"mage/template",
9-
"text!ui/template/popup/popup-modal.html",
10-
"text!ui/template/popup/popup-slide.html",
9+
"text!ui/template/modal/modal-popup.html",
10+
"text!ui/template/modal/modal-slide.html",
1111
"jquery/ui",
1212
"mage/translate"
13-
], function($, _, template, modalTpl, slideTpl){
13+
], function($, _, template, popupTpl, slideTpl){
1414
"use strict";
1515

1616
/**
17-
* Dialog Widget
17+
* Modal Window Widget
1818
*/
19-
$.widget('mage.popup', {
19+
$.widget('mage.modal', {
2020
options: {
21-
type: 'modal',
21+
type: 'popup',
2222
title: '',
23-
dialogClass: '',
24-
modalTpl: modalTpl,
23+
modalClass: '',
24+
popupTpl: popupTpl,
2525
slideTpl: slideTpl,
26-
dialogVisibleClass: '_show',
27-
parentDialogClass: '_has-dialog',
26+
modalVisibleClass: '_show',
27+
parentModalClass: '_has-modal',
2828
innerScrollClass: '_inner-scroll',
2929
responsive: false,
3030
innerScroll: false,
31-
dialogBlock: '[data-role="dialog"]',
32-
dialogCloseBtn: '[data-role="closeBtn"]',
33-
dialogContent: '[data-role="content"]',
34-
dialogAction: '[data-role="action"]',
31+
modalBlock: '[data-role="modal"]',
32+
modalCloseBtn: '[data-role="closeBtn"]',
33+
modalContent: '[data-role="content"]',
34+
modalAction: '[data-role="action"]',
3535
appendTo: 'body',
36-
wrapperClass: 'dialogs-wrapper',
36+
wrapperClass: 'modals-wrapper',
3737
overlayClass: 'overlay_magento',
38-
responsiveClass: 'dialog-slide',
39-
dialogLeftMargin: 45,
38+
responsiveClass: 'modal-slide',
39+
modalLeftMargin: 45,
4040
closeText: $.mage.__('Close'),
4141
buttons: [{
4242
text: $.mage.__('Ok'),
4343
class: '',
4444
click: function(){
45-
this.closeDialog();
45+
this.closeModal();
4646
}
4747
}]
4848
},
4949
/**
50-
* Creates dialog widget.
50+
* Creates modal widget.
5151
*/
5252
_create: function() {
5353
this.options.transitionEvent = this.whichTransitionEvent();
5454
this._createWrapper();
55-
this._renderDialog();
55+
this._renderModal();
5656
this._createButtons();
5757

58-
this.dialog.find(this.options.dialogCloseBtn).on('click', _.bind(this.closeDialog, this));
59-
this.element.on('openDialog', _.bind(this.openDialog, this));
60-
this.element.on('closeDialog', _.bind(this.closeDialog, this));
58+
this.modal.find(this.options.modalCloseBtn).on('click', _.bind(this.closeModal, this));
59+
this.element.on('openModal', _.bind(this.openModal, this));
60+
this.element.on('closeModal', _.bind(this.closeModal, this));
6161
},
6262
/**
63-
* Returns element from dialog node.
63+
* Returns element from modal node.
6464
* @return {Object} - element.
6565
*/
6666
_getElem: function(elem) {
67-
return this.dialog.find(elem);
67+
return this.modal.find(elem);
6868
},
6969
/**
70-
* Gets visible dialog count.
71-
* * @return {Number} - visible dialog count.
70+
* Gets visible modal count.
71+
* * @return {Number} - visible modal count.
7272
*/
7373
_getVisibleCount: function() {
74-
return this.dialogWrapper.find('.'+this.options.dialogVisibleClass).length;
74+
return this.modalWrapper.find('.'+this.options.modalVisibleClass).length;
7575
},
7676
/**
77-
* Gets visible slide type dialog count.
78-
* * @return {Number} - visible dialog count.
77+
* Gets count of visible modal by slide type.
78+
* * @return {Number} - visible modal count.
7979
*/
8080
_getVisibleSlideCount: function() {
81-
var elems = this.dialogWrapper.find('[data-type="slide"]');
81+
var elems = this.modalWrapper.find('[data-type="slide"]');
8282

83-
return elems.filter('.'+this.options.dialogVisibleClass).length;
83+
return elems.filter('.'+this.options.modalVisibleClass).length;
8484
},
85-
openDialog: function() {
85+
openModal: function() {
8686
var that = this;
8787

8888
this.options.isOpen = true;
8989
this._createOverlay();
9090
this._setActive();
91-
this.dialog.one(this.options.transitionEvent, function() {
91+
this.modal.one(this.options.transitionEvent, function() {
9292
that._trigger('opened');
9393
});
94-
this.dialog.addClass(this.options.dialogVisibleClass);
94+
this.modal.addClass(this.options.modalVisibleClass);
9595
if ( !this.options.transitionEvent ) {
9696
that._trigger('opened');
9797
}
9898

9999
return this.element;
100100
},
101-
closeDialog: function() {
101+
closeModal: function() {
102102
var that = this;
103103

104104
this.options.isOpen = false;
105-
this.dialog.one(this.options.transitionEvent, function() {
105+
this.modal.one(this.options.transitionEvent, function() {
106106
that._close();
107107
});
108-
this.dialog.removeClass(this.options.dialogVisibleClass);
108+
this.modal.removeClass(this.options.modalVisibleClass);
109109
if ( !this.options.transitionEvent ) {
110110
that._close();
111111
}
112112

113113
return this.element;
114114
},
115115
/**
116-
* Helper for closeDialog function.
116+
* Helper for closeModal function.
117117
*/
118118
_close: function() {
119-
var trigger = _.bind(this._trigger, this, 'closed', this.dialog);
119+
var trigger = _.bind(this._trigger, this, 'closed', this.modal);
120120

121121
this._destroyOverlay();
122122
this._unsetActive();
123123
_.defer(trigger, this);
124124
},
125125
/**
126-
* Set z-index and margin for dialog and overlay.
126+
* Set z-index and margin for modal and overlay.
127127
*/
128128
_setActive: function() {
129-
var zIndex = this.dialog.zIndex();
129+
var zIndex = this.modal.zIndex();
130130

131131
this.prevOverlayIndex = this.overlay.zIndex();
132-
this.dialog.zIndex(zIndex + this._getVisibleCount());
132+
this.modal.zIndex(zIndex + this._getVisibleCount());
133133
this.overlay.zIndex(zIndex + (this._getVisibleCount() - 1));
134134
if ( this._getVisibleSlideCount() ) {
135-
this.dialog.css('marginLeft', this.options.dialogLeftMargin * this._getVisibleSlideCount());
135+
this.modal.css('marginLeft', this.options.modalLeftMargin * this._getVisibleSlideCount());
136136
}
137137
},
138138
/**
139-
* Unset styles for dialog and set z-index for previous dialog.
139+
* Unset styles for modal and set z-index for previous modal.
140140
*/
141141
_unsetActive: function() {
142-
this.dialog.removeAttr('style');
142+
this.modal.removeAttr('style');
143143
if ( this.overlay ) {
144144
this.overlay.zIndex(this.prevOverlayIndex);
145145
}
146146
},
147147
/**
148-
* Creates wrapper to hold all dialogs.
148+
* Creates wrapper to hold all modals.
149149
*/
150150
_createWrapper: function() {
151-
this.dialogWrapper = $('.'+this.options.wrapperClass);
152-
if ( !this.dialogWrapper.length ) {
153-
this.dialogWrapper = $('<div></div>')
151+
this.modalWrapper = $('.'+this.options.wrapperClass);
152+
if ( !this.modalWrapper.length ) {
153+
this.modalWrapper = $('<div></div>')
154154
.addClass(this.options.wrapperClass)
155155
.appendTo(this.options.appendTo);
156156
}
157157
},
158158
/**
159159
* Compile template and append to wrapper.
160160
*/
161-
_renderDialog: function() {
161+
_renderModal: function() {
162162
$(template(
163163
this.options[this.options.type + 'Tpl'],
164164
{
165165
data: this.options
166-
})).appendTo(this.dialogWrapper);
167-
this.dialog = this.dialogWrapper.find(this.options.dialogBlock).last();
168-
this.element.show().appendTo(this._getElem(this.options.dialogContent));
166+
})).appendTo(this.modalWrapper);
167+
this.modal = this.modalWrapper.find(this.options.modalBlock).last();
168+
this.element.show().appendTo(this._getElem(this.options.modalContent));
169169
},
170170
/**
171171
* Creates buttons pane.
172172
*/
173173
_createButtons: function() {
174174
var that = this;
175175

176-
this.buttons = this._getElem(this.options.dialogAction);
176+
this.buttons = this._getElem(this.options.modalAction);
177177
_.each(this.options.buttons, function(btn, key) {
178178
var button = that.buttons[key];
179179

@@ -189,28 +189,28 @@ define([
189189

190190
this.overlay = $('.' + this.options.overlayClass);
191191
if ( !this.overlay.length ) {
192-
$(this.options.appendTo).addClass(this.options.parentDialogClass);
192+
$(this.options.appendTo).addClass(this.options.parentModalClass);
193193
this.overlay = $('<div></div>')
194194
.addClass(this.options.overlayClass)
195-
.appendTo(this.dialogWrapper);
195+
.appendTo(this.modalWrapper);
196196
}
197197

198198
events = $._data(this.overlay.get(0), 'events');
199199
if ( events ) {
200200
this.prevOverlayHandler = events.click[0].handler;
201201
}
202202
this.overlay.unbind().on('click', function() {
203-
that.closeDialog();
203+
that.closeModal();
204204
});
205205
},
206206
/**
207207
* Destroy overlay.
208208
*/
209209
_destroyOverlay: function() {
210-
var dialogCount = this.dialogWrapper.find('.'+this.options.dialogVisibleClass).length;
210+
var modalCount = this.modalWrapper.find('.'+this.options.modalVisibleClass).length;
211211

212-
if ( !dialogCount ) {
213-
$(this.options.appendTo).removeClass(this.options.parentDialogClass);
212+
if ( !modalCount ) {
213+
$(this.options.appendTo).removeClass(this.options.parentModalClass);
214214
this.overlay.remove();
215215
this.overlay = null;
216216

@@ -239,5 +239,5 @@ define([
239239
}
240240
});
241241

242-
return $.mage.popup;
242+
return $.mage.modal;
243243
});

‎app/code/Magento/Ui/view/base/web/templates/popup/popup-modal.html‎ renamed to ‎app/code/Magento/Ui/view/base/web/templates/modal/modal-popup.html‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,14 @@
66
-->
77

88
<aside
9-
class="dialog-<%= data.type %> <%= data.dialogClass %>
9+
class="modal-<%= data.type %> <%= data.modalClass %>
1010
<% if(data.responsive){ %><%= data.responsiveClass %><% } %>
1111
<% if(data.innerScroll){ %><%= data.innerScrollClass %><% } %>"
12-
data-role="dialog"
12+
data-role="modal"
1313
data-type="<%= data.type %>">
14-
<div class="dialog-inner-wrap">
15-
<header class="dialog-header">
16-
<h1 class="dialog-title"
14+
<div class="modal-inner-wrap">
15+
<header class="modal-header">
16+
<h1 class="modal-title"
1717
data-role="title"><%= data.title %></h1>
1818
<button
1919
class="action-close"
@@ -23,9 +23,9 @@
2323
</button>
2424
</header>
2525
<div
26-
class="dialog-content"
26+
class="modal-content"
2727
data-role="content"></div>
28-
<footer class="dialog-footer">
28+
<footer class="modal-footer">
2929
<% _.each(data.buttons, function(button) { %>
3030
<button
3131
class="<%= button.class %>"

‎app/code/Magento/Ui/view/base/web/templates/popup/popup-slide.html‎ renamed to ‎app/code/Magento/Ui/view/base/web/templates/modal/modal-slide.html‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,13 @@
66
-->
77

88
<aside
9-
class="dialog-<%= data.type %> <%= data.dialogClass %>
9+
class="modal-<%= data.type %> <%= data.modalClass %>
1010
<% if(data.innerScroll){ %><%= data.innerScrollClass %><% } %>"
11-
data-role="dialog"
11+
data-role="modal"
1212
data-type="<%= data.type %>">
13-
<div class="dialog-inner-wrap">
14-
<header class="dialog-header">
15-
<h1 class="dialog-title"
13+
<div class="modal-inner-wrap">
14+
<header class="modal-header">
15+
<h1 class="modal-title"
1616
data-role="title"><%= data.title %></h1>
1717
<button
1818
class="action-close"
@@ -34,6 +34,6 @@
3434
</div>
3535
</div>
3636
</header>
37-
<div class="dialog-content" data-role="content"></div>
37+
<div class="modal-content" data-role="content"></div>
3838
</div>
3939
</aside>

‎app/design/adminhtml/Magento/backend/web/css/source/_components.less‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,5 +11,5 @@
1111
@import 'components/_calendar-temp.less';
1212
@import 'components/_messages.less';
1313
@import 'components/_popups.less';
14-
@import 'components/_dialogs.less';
15-
@import 'components/_dialogs_extend.less';
14+
@import 'components/_modals.less';
15+
@import 'components/_modals_extend.less';

‎app/design/adminhtml/Magento/backend/web/css/source/_structure.less‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -51,10 +51,12 @@ body {
5151

5252
// Scroll bar appearing compensation
5353
@media (min-width: @window__min-width) {
54-
html {
55-
width: 100vw;
56-
overflow-x: hidden;
57-
}
54+
html {
55+
width: 100vw;
56+
}
57+
body {
58+
overflow-x: hidden;
59+
}
5860
}
5961

6062
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {

0 commit comments

Comments
 (0)