Skip to content

Commit 01b1f16

Browse files
author
Bogdan Plieshka
committed
MAGETWO-37594: Implementation and fixes after review
- Added base styles for dialog modal & slide components - Expanded global variables - Added meta viewport for admin area
1 parent 4979f61 commit 01b1f16

File tree

11 files changed

+290
-70
lines changed

11 files changed

+290
-70
lines changed

‎app/code/Magento/Backend/view/adminhtml/layout/default.xml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="admin-1column" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
99
<head>
1010
<title>Magento Admin</title>
11+
<meta name="viewport" content="width=device-width"/>
1112
<link src="requirejs/require.js"/>
1213
<css src="extjs/resources/css/ext-all.css"/>
1314
<css src="extjs/resources/css/ytheme-magento.css"/>

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ define([
5454
}
5555
});
5656
this.dialog = this.element.dialog({
57-
type: 'slideOut',
57+
type: 'slide',
5858
dialogClass: 'mage-new-category-dialog form-inline',
5959
title: $.mage.__('Create Category'),
6060
buttons: [{
@@ -111,9 +111,9 @@ define([
111111
}).data('mage-dialog');
112112

113113
this.insideDialog = $('<div>Another dialog</div>').dialog({
114-
type: 'slideOut',
114+
type: 'slide',
115115
dialogClass: 'mage-new-category-dialog form-inline'
116-
}).data('mage-dialog');
116+
});
117117
}
118118
});
119119

‎app/code/Magento/Ui/view/base/web/js/dialog/dialog.js

Lines changed: 13 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -29,39 +29,24 @@ define([
2929
}],
3030
events: [],
3131
dialogClass: '',
32-
dialogActiveClass: 'ui-dialog-active',
32+
dialogActiveClass: '_show',
33+
parentDialogClass: '_has-dialog',
3334
overlayClass: 'overlay_magento',
35+
responsiveClass: 'dialog-slide',
36+
responsive: false,
3437
dialogBlock: '[data-role="dialog"]',
3538
dialogCloseBtn: '[data-role="closeBtn"]',
3639
dialogContent: '[data-role="content"]',
3740
dialogAction: '[data-role="action"]',
3841
appendTo: 'body',
39-
wrapperId: 'dialogs-wrapper',
40-
position: {
41-
modal: {
42-
width: '75%',
43-
position: 'fixed',
44-
top: '50px',
45-
left: '12.5%',
46-
right: '12.5%'
47-
},
48-
slideOut: {
49-
width: 'auto',
50-
position: 'fixed',
51-
top: '0',
52-
left: '148px',
53-
bottom: '0',
54-
right: '0'
55-
}
56-
}
42+
wrapperId: 'dialogs-wrapper'
5743
},
5844

5945
_create: function() {
6046
this.options.transitionEvent = this.whichTransitionEvent();
6147
this._createWrapper();
6248
this._renderDialog();
6349
this._createButtons();
64-
this._style();
6550

6651
this.dialog.find(this.options.dialogCloseBtn).on('click', _.bind(this.closeDialog, this));
6752
this.element.on('openDialog', _.bind(this.openDialog, this));
@@ -72,7 +57,6 @@ define([
7257
},
7358
openDialog: function() {
7459
this.options.isOpen = true;
75-
this._position();
7660
this._createOverlay();
7761
this.dialog.show();
7862
this.dialog.addClass(this.options.dialogActiveClass);
@@ -84,10 +68,12 @@ define([
8468

8569
this.options.isOpen = false;
8670
this.dialog.one(this.options.transitionEvent, function() {
71+
that.dialog.removeClass(that.options.dialogActiveClass);
8772
that._close();
8873
});
8974
this.dialog.removeClass(this.options.dialogActiveClass);
9075
if ( !this.options.transitionEvent ) {
76+
that.dialog.removeClass(this.options.dialogActiveClass);
9177
that._close();
9278
}
9379

@@ -114,7 +100,6 @@ define([
114100
})).appendTo(this.dialogWrapper);
115101

116102
this.element.show().appendTo(this._getElem(this.options.dialogContent));
117-
this.dialog.hide();
118103
},
119104
_createButtons: function() {
120105
var that = this;
@@ -132,7 +117,8 @@ define([
132117

133118
this.overlay = $('.' + this.options.overlayClass);
134119
if ( !this.overlay.length ) {
135-
document.body.style.overflow = 'hidden';
120+
121+
$(this.options.appendTo).addClass(this.options.parentDialogClass);
136122
this.overlay = $('<div></div>')
137123
.addClass(this.options.overlayClass)
138124
.appendTo( this.options.appendTo );
@@ -150,10 +136,12 @@ define([
150136
},
151137

152138
_destroyOverlay: function() {
153-
var dialogCount = this.dialogWrapper.find(this.options.dialogBlock).filter(':visible').length;
139+
var dialogCount = this.dialogWrapper.find(this.options.dialogBlock).filter(this.option.dialogClass).length;
154140

155141
if ( !dialogCount ) {
156-
document.body.style.overflow = 'auto';
142+
143+
$(this.options.appendTo).removeClass(this.options.parentDialogClass);
144+
157145
this.overlay.remove();
158146
this.overlay = null;
159147
} else {
@@ -162,18 +150,6 @@ define([
162150
this.overlay.unbind().on('click', this.prevOverlayHandler);
163151
}
164152
},
165-
_style: function() {
166-
this.dialog.css({
167-
padding: '30px',
168-
backgroundColor: '#fff',
169-
zIndex: 1000
170-
});
171-
},
172-
_position: function() {
173-
var type = this.options.type;
174-
175-
this.dialog.css(this.options.position[type]);
176-
},
177153
whichTransitionEvent: function() {
178154
var transition,
179155
el = document.createElement('fakeelement'),

‎app/code/Magento/Ui/view/base/web/templates/dialog/dialog.html

Lines changed: 28 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,32 @@
44
* See COPYING.txt for license details.
55
*/
66
-->
7-
<div class="ui-dialog mypopup-window <%= data.dialogClass %>" data-role="dialog">
8-
<div class="mypopup-window-header">
9-
<h1 style="float: left;" data-role="title"><%= data.title %></h1>
10-
<button style="float: right;" data-action="close-mypopup" data-role="closeBtn" type="button">Close</button>
7+
8+
<section
9+
class="dialog-<%= data.type %> <% if(data.responsive){ %><%= data.responsiveClass %><% } %> <%= data.dialogClass %>"
10+
data-role="dialog">
11+
<div class="dialog-inner-wrap">
12+
<header class="dialog-header">
13+
<h1 class="dialog-title"
14+
data-role="title"><%= data.title %></h1>
15+
<button
16+
class="action-close"
17+
data-action="close-mypopup"
18+
data-role="closeBtn"
19+
type="button">
20+
<span>Close</span>
21+
</button>
22+
</header>
23+
<div
24+
class="dialog-content"
25+
data-role="content"></div>
26+
<footer class="dialog-footer">
27+
<% _.each(data.buttons, function(button) { %>
28+
<button
29+
class="<%= button.class %>"
30+
type="button"
31+
data-role="action"><%= button.text %></button>
32+
<% }); %>
33+
</footer>
1134
</div>
12-
<div class="mypopup-window-content" data-role="content"></div>
13-
<div class="mypopup-window-footer">
14-
<% _.each(data.buttons, function(button) { %>
15-
<button type="button" class="<%= button.class %>" data-role="action"><%= button.text %></button>
16-
<% }); %>
17-
</div>
18-
</div>
35+
</section>

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,3 +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';

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

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
// /**
2+
// * Copyright © 2015 Magento. All rights reserved.
3+
// * See COPYING.txt for license details.
4+
// */
5+
6+
//
7+
// Components -> Dialogs
8+
// _____________________________________________
9+
10+
//
11+
// Variables
12+
// ---------------------------------------------
13+
14+
@dialog-title__color: @text__color;
15+
@dialog-title__font-size: 2.1rem;
16+
17+
@dialog-action-close__color: @color-brownie-vanilla;
18+
@dialog-action-close__font-size: 2rem;
19+
20+
//
21+
22+
.dialog-modal,
23+
.dialog-slide {
24+
.action-close {
25+
color: @dialog-action-close__color;
26+
position: absolute;
27+
right: 3rem;
28+
top: 3rem;
29+
&:before {
30+
font-size: @dialog-action-close__font-size;
31+
}
32+
}
33+
}
34+
35+
.dialog-title {
36+
font-size: @dialog-title__font-size;
37+
font-weight: @font-weight__regular;
38+
}

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

Lines changed: 0 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -22,17 +22,6 @@
2222
// Z axis
2323
// ---------------------------------------------
2424

25-
@z-index-1: 100;
26-
@z-index-2: 200;
27-
@z-index-3: 300;
28-
@z-index-4: 400;
29-
@z-index-5: 500;
30-
@z-index-6: 600;
31-
@z-index-7: 700;
32-
@z-index-8: 800;
33-
@z-index-9: 900;
34-
@z-index-10: 1000;
35-
3625
// z-index 2
3726
@actions-split__z-index: @z-index-2;
3827
@action-multiselect__z-index: @z-index-2;
@@ -52,9 +41,6 @@
5241
// z-index 7
5342
@menu__z-index: @z-index-7;
5443

55-
// z-index 8
56-
@overlay__z-index: @z-index-8;
57-
5844
// Base z-index for page wrapper to prevent inner page element overlap with pop-ups
5945
@page-wrapper__z-index__base: 1;
6046

@@ -65,8 +51,3 @@
6551
@content__indent: @indent__l;
6652

6753
@menu__width: 8.8rem;
68-
69-
@component__shadow-size__base: 5px;
70-
@component__box-shadow__base: 1px 1px @component__shadow-size__base rgba(0, 0, 0, .5);
71-
72-
@component-modal__opacity: .98;

0 commit comments

Comments
 (0)