First create solution
This commit is contained in:
@@ -0,0 +1,232 @@
|
||||
/* Layout */
|
||||
|
||||
.simple-layout,
|
||||
.simple-layout-tablet {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.simple-layout .layout-header {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.simple-layout .layout-content {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.simple-layout .layout-content > div,
|
||||
.simple-layout .transition-frame {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.simple-layout .view-footer {
|
||||
position: static;
|
||||
}
|
||||
|
||||
.simple-layout .view-footer .dx-toolbar {
|
||||
background: transparent;
|
||||
border: none;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.simple-layout .view-footer .dx-toolbar .dx-toolbar-center {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* ios7 */
|
||||
|
||||
.dx-theme-ios7 .simple-layout .layout-header {
|
||||
top: 0;
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
.dx-theme-ios7 .simple-layout .layout-content {
|
||||
top: 45px;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.dx-theme-ios7 .simple-layout .view-footer .dx-toolbar {
|
||||
height: 57px;
|
||||
}
|
||||
|
||||
.dx-theme-ios7 .simple-layout .view-footer .dx-button .dx-button-content .dx-button-text {
|
||||
font-size: 20px;
|
||||
line-height: 38px;
|
||||
}
|
||||
|
||||
/* android5 */
|
||||
|
||||
.dx-theme-android5 .simple-layout .layout-content {
|
||||
top: 56px;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
/* generic */
|
||||
|
||||
.dx-theme-generic .simple-layout .layout-content {
|
||||
top: 56px;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.dx-theme-generic.dx-device-mobile .simple-layout .layout-header {
|
||||
height: 56px;
|
||||
}
|
||||
|
||||
.dx-theme-generic.dx-device-mobile .simple-layout .layout-header .dx-toolbar {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.dx-theme-generic .simple-layout .layout-header .dx-toolbar {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.dx-theme-generic .simple-layout .layout-header .dx-toolbar-items-container {
|
||||
height: 56px;
|
||||
}
|
||||
|
||||
.dx-theme-generic .simple-layout .view-footer .dx-button {
|
||||
width: 97%;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/* Windows Phone 8*/
|
||||
.dx-theme-win8 .simple-layout {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dx-theme-win8 .simple-layout .layout-header {
|
||||
height: 20px;
|
||||
margin-left: 10px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.dx-theme-win8 .simple-layout .layout-content {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.dx-theme-win8 .simple-layout .layout-content > div {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.dx-theme-win8 .simple-layout .view-content {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.dx-theme-win8 .simple-layout .layout-frame {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
.dx-theme-win8 .simple-layout.has-toolbar-bottom .layout-frame,
|
||||
.dx-theme-win8 .simple-layout .has-toolbar-bottom.layout-frame {
|
||||
bottom: 40px;
|
||||
}
|
||||
|
||||
.dx-theme-win8 .simple-layout .dx-toolbar.layout-toolbar-bottom {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.dx-theme-win8 .simple-layout .layout-footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
height: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.dx-theme-win8 .simple-layout.has-toolbar-bottom .layout-footer {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
/* Windows Phone 10 */
|
||||
.dx-theme-win10 .simple-layout {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dx-theme-win10 .simple-layout .layout-header {
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.dx-theme-win10.dx-device-phone .simple-layout .layout-header {
|
||||
height: 20px;
|
||||
top: 20px;
|
||||
text-indent: 12px;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.dx-theme-win10.dx-device-desktop .simple-layout .layout-header .dx-toolbar-center {
|
||||
margin: 0 0 0 70px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.dx-theme-win10 .simple-layout .layout-content {
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.dx-theme-win10 .simple-layout .layout-content > div {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.dx-theme-win10 .simple-layout .view-content {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.dx-theme-win10 .simple-layout .layout-frame {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
.dx-theme-win10 .simple-layout.has-toolbar-bottom .layout-frame,
|
||||
.dx-theme-win10 .simple-layout .has-toolbar-bottom.layout-frame {
|
||||
bottom: 48px;
|
||||
}
|
||||
|
||||
.dx-theme-win10 .simple-layout .dx-toolbar.layout-toolbar-bottom {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.dx-theme-win10 .simple-layout .layout-footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
height: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.dx-theme-win10 .simple-layout.has-toolbar-bottom .layout-footer {
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.dx-theme-win10 .simple-layout.dx-animating:not(.dx-enter):not(.dx-leave) {
|
||||
display: none;
|
||||
}
|
||||
@@ -0,0 +1,95 @@
|
||||
<div class="simple-layout" data-options="dxLayout : { name: 'simple', platform: 'win', phone: false, version: [8] } ">
|
||||
<div class="layout-frame" data-options="dxTransition: { name: 'main', animation: 'view-content-change' }">
|
||||
<div class="layout-header">
|
||||
<div data-bind="dxToolbar: { items: [{ text: title, location: 'center' }] }"
|
||||
data-options="dxCommandContainer : { id: 'win8-master-detail-toolbar' }">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-content" data-options="dxContentPlaceholder : { name: 'content', animation: 'view-content-change' } ">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-footer" data-options="dxContentPlaceholder : { name: 'footer' }">
|
||||
<div class="layout-toolbar-bottom win8" data-bind="dxToolbar: { items: [], renderAs: 'bottomToolbar' }" data-options="dxCommandContainer : { id: 'win8-phone-appbar' } "></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="simple-layout" data-options="dxLayout : { name: 'simple', platform: 'win', phone: false } ">
|
||||
<div class="layout-frame" data-options="dxTransition: { name: 'main', animation: 'view-content-change' }">
|
||||
<div class="layout-header">
|
||||
<div data-bind="dxToolbar: { items: [{ text: title, location: 'center' }] }"
|
||||
data-options="dxCommandContainer : { id: 'win10-appbar' }">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-content" data-options="dxContentPlaceholder : { name: 'content', animation: 'view-content-change' } ">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="simple-layout" data-options="dxLayout : { name: 'simple', platform: 'win', phone: true } ">
|
||||
<div class="layout-frame" data-options="dxTransition: { name: 'main', animation: 'view-content-change' }">
|
||||
<div class="layout-header" data-options="dxContentPlaceholder : { name: 'header' }">
|
||||
<div data-bind="text: title">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-content" data-options="dxContentPlaceholder : { name: 'content', animation: 'view-content-change' } ">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-footer" data-options="dxContentPlaceholder : { name: 'footer' }">
|
||||
<div class="layout-toolbar-bottom" data-bind="dxToolbar: { items: [], renderAs: 'bottomToolbar' }" data-options="dxCommandContainer : { id: 'win10-phone-appbar' } "></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="simple-layout" data-options="dxLayout : { name: 'simple', platform: 'win', phone: true, version: [8] } ">
|
||||
<div class="layout-frame">
|
||||
<div class="layout-header" data-options="dxContentPlaceholder : { name: 'header' }">
|
||||
<div data-bind="text: title">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-content" data-options="dxContentPlaceholder : { name: 'content', animation: 'view-content-change' } ">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-footer" data-options="dxContentPlaceholder : { name: 'footer' }">
|
||||
<div class="layout-toolbar-bottom win8" data-bind="dxToolbar: { items: [], renderAs: 'bottomToolbar' }" data-options="dxCommandContainer : { id: 'win8-phone-appbar' } "></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="simple-layout" data-options="dxLayout : { name: 'simple', platform: 'ios' } " >
|
||||
<div class="layout-header dx-toolbar-background" data-options="dxContentPlaceholder : { name: 'header', animation: 'view-header-toolbar' }">
|
||||
<div data-bind="dxToolbar: { items: [ { text: title, location: 'center' } ] }" data-options="dxCommandContainer : { id: 'ios-header-toolbar' }">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layout-content" data-options="dxContentPlaceholder : { name: 'content', animation: 'view-content-change' }">
|
||||
</div>
|
||||
|
||||
<div class="view-footer" data-options="dxContent : { targetPlaceholder: 'view-footer' } " >
|
||||
<div class="view-toolbar-bottom" data-bind="dxToolbar: { visible: true }" data-options="dxCommandContainer : { id: 'ios-view-footer' } " ></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="simple-layout" data-options="dxLayout : { name: 'simple', platform: 'android' } " >
|
||||
<div class="transition-frame" data-options="dxTransition: { name: 'main', animation: 'view-content-change' }">
|
||||
<div class="layout-header">
|
||||
<div data-bind="dxToolbar: { items: [{ text: title, location: 'center' }] }"
|
||||
data-options="dxCommandContainer : { id: 'android-simple-toolbar' }">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layout-content" data-options="dxContentPlaceholder : { name: 'content', animation: 'view-content-change' }">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="simple-layout" data-options="dxLayout : { name: 'simple', platform: 'generic' } " >
|
||||
<div class="layout-header dx-toolbar-background" data-options="dxContentPlaceholder : { name: 'header', animation: 'view-header-toolbar' }">
|
||||
<div data-bind="dxToolbar: { items: [ { text: title, location: 'center' } ] }" data-options="dxCommandContainer : { id: 'generic-header-toolbar' }">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layout-content" data-options="dxContentPlaceholder : { name: 'content', animation: 'view-content-change' }">
|
||||
</div>
|
||||
|
||||
<div class="view-footer" data-options="dxContent : { targetPlaceholder: 'view-footer' } " >
|
||||
<div class="view-toolbar-bottom" data-bind="dxToolbar: { visible: true }" data-options="dxCommandContainer : { id: 'generic-view-footer' } " ></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,124 @@
|
||||
(function(root, factory) {
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
define(function(require, exports, module) {
|
||||
module.exports = factory(require("jquery"), require("core/class"), require("framework/html/presets").layoutSets, require("framework/html/layout_controller").DefaultLayoutController, require("core/devices"), require("core/errors").log, require("ui/toolbar"))
|
||||
})
|
||||
}
|
||||
else {
|
||||
root.DevExpress.layouts = root.DevExpress.layouts || {};
|
||||
root.DevExpress.layouts.SimpleLayout = factory(jQuery, DevExpress.Class, DevExpress.framework.html.layoutSets, DevExpress.framework.html.DefaultLayoutController, DevExpress.devices, DevExpress.errors.log);
|
||||
root.DevExpress.framework.html.SimpleLayoutController = root.DevExpress.layouts.SimpleLayout.SimpleLayoutController;
|
||||
root.DevExpress.framework.html.Win8SimpleLayoutController = root.DevExpress.layouts.SimpleLayout.Win8SimpleLayoutController
|
||||
}
|
||||
}(this, function($, Class, layoutSets, DefaultLayoutController, devices, log) {
|
||||
var exports = {};
|
||||
var SimpleLayoutController = DefaultLayoutController.inherit({
|
||||
ctor: function(options) {
|
||||
options = options || {};
|
||||
options.name = options.name || "simple";
|
||||
this.callBase(options);
|
||||
var device = devices.current();
|
||||
if (device.win && device.phone || options.Win8SimpleLayoutControllerFroced) {
|
||||
this.impl = new Win8SimpleLayoutImpl($.proxy(this._getViewFrame, this))
|
||||
}
|
||||
else {
|
||||
this.impl = new SimpleLayoutImpl
|
||||
}
|
||||
}, _onRenderComplete: function(viewInfo) {
|
||||
this.impl.onRenderComplete(viewInfo);
|
||||
this.callBase.apply(this, arguments)
|
||||
}, disposeView: function(viewInfo) {
|
||||
this.impl.disposeView(viewInfo);
|
||||
this.callBase.apply(this, arguments)
|
||||
}, _changeView: function(viewInfo) {
|
||||
var that = this,
|
||||
result = this.callBase.apply(this, arguments);
|
||||
result.done(function() {
|
||||
that.impl.changeView(viewInfo)
|
||||
});
|
||||
return result
|
||||
}
|
||||
});
|
||||
var SimpleLayoutImpl = Class.inherit({
|
||||
ctor: $.noop, onRenderComplete: $.noop, disposeView: $.noop, changeView: $.noop
|
||||
});
|
||||
var HAS_TOOLBAR_BOTTOM_CLASS = "has-toolbar-bottom",
|
||||
LAYOUT_TOOLBAR_BOTTOM_SELECTOR = ".layout-toolbar-bottom";
|
||||
var Win8SimpleLayoutImpl = SimpleLayoutImpl.inherit({
|
||||
ctor: function(viewFrameGetter) {
|
||||
this._getViewFrame = viewFrameGetter;
|
||||
this.callBase.apply(this, arguments);
|
||||
this._toolbarOptionChangedHandler = $.proxy(this._onToolbarOptionChanged, this)
|
||||
}, _onToolbarOptionChanged: function(args) {
|
||||
if (args.name === "items") {
|
||||
var appbar = args.component;
|
||||
if (appbar) {
|
||||
this._refreshAppbarVisibility(appbar)
|
||||
}
|
||||
this._refreshHasToolbarClass()
|
||||
}
|
||||
}, _getAppbar: function($markup) {
|
||||
var $appbar = $markup.find(LAYOUT_TOOLBAR_BOTTOM_SELECTOR);
|
||||
if ($appbar.length !== 1) {
|
||||
return
|
||||
}
|
||||
return $appbar.dxToolbar("instance")
|
||||
}, _getCurrentAppbar: function() {
|
||||
return this._getAppbar(this._getViewFrame().find(".dx-active-view "))
|
||||
}, onRenderComplete: function(viewInfo) {
|
||||
var appbar = this._getAppbar(viewInfo.renderResult.$markup);
|
||||
if (appbar) {
|
||||
this._refreshAppbarVisibility(appbar);
|
||||
appbar.on("optionChanged", this._toolbarOptionChangedHandler)
|
||||
}
|
||||
}, disposeView: function(viewInfo) {
|
||||
var appbar = this._getAppbar(viewInfo.renderResult.$markup);
|
||||
if (appbar) {
|
||||
appbar.off("optionChanged", this._toolbarOptionChangedHandler)
|
||||
}
|
||||
}, changeView: function(viewInfo) {
|
||||
this._refreshHasToolbarClass()
|
||||
}, _refreshAppbarVisibility: function(appbar) {
|
||||
var isAppbarNotEmpty = false;
|
||||
$.each(appbar.option("items"), function(index, item) {
|
||||
if (item.visible) {
|
||||
isAppbarNotEmpty = true;
|
||||
return false
|
||||
}
|
||||
});
|
||||
appbar.option("visible", isAppbarNotEmpty)
|
||||
}, _refreshHasToolbarClass: function() {
|
||||
var appbar = this._getCurrentAppbar(),
|
||||
hasToolbar = appbar ? appbar.option("visible") : false;
|
||||
this._getViewFrame().toggleClass(HAS_TOOLBAR_BOTTOM_CLASS, hasToolbar)
|
||||
}
|
||||
});
|
||||
var Win8SimpleLayoutController = SimpleLayoutController.inherit({ctor: function(options) {
|
||||
options = options || {};
|
||||
options.Win8SimpleLayoutControllerFroced = true;
|
||||
log("W0000", "Layouts", "Win8SimpleLayoutController", "15.1", "Use the SimpleLayoutController instead");
|
||||
this.callBase.apply(this, arguments)
|
||||
}});
|
||||
layoutSets["navbar"] = layoutSets["navbar"] || [];
|
||||
layoutSets["navbar"].push({
|
||||
platform: "win", root: false, phone: true, controller: new SimpleLayoutController
|
||||
});
|
||||
layoutSets["navbar"].push({
|
||||
platform: "android", root: false, controller: new SimpleLayoutController
|
||||
});
|
||||
layoutSets["simple"] = layoutSets["simple"] || [];
|
||||
layoutSets["simple"].push({controller: new SimpleLayoutController});
|
||||
layoutSets["simple"].push({
|
||||
platform: "win", phone: true, controller: new SimpleLayoutController
|
||||
});
|
||||
layoutSets["split"] = layoutSets["split"] || [];
|
||||
layoutSets["split"].push({
|
||||
platform: "win", requireCustomResolve: true, controller: new SimpleLayoutController
|
||||
});
|
||||
layoutSets["split"].push({
|
||||
platform: "win", root: false, phone: true, controller: new SimpleLayoutController
|
||||
});
|
||||
exports.SimpleLayoutController = SimpleLayoutController;
|
||||
exports.Win8SimpleLayoutController = Win8SimpleLayoutController;
|
||||
return exports
|
||||
}));
|
||||
Reference in New Issue
Block a user