First create solution
This commit is contained in:
@@ -0,0 +1,272 @@
|
||||
/* Layout */
|
||||
|
||||
.navbar-layout,
|
||||
.navbar-layout-tablet {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.navbar-layout .layout-header {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.navbar-layout .layout-content {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.navbar-layout .layout-content > div,
|
||||
.navbar-layout .transition-frame {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.navbar-layout .layout-footer {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.navbar-layout .view-footer {
|
||||
position: static;
|
||||
}
|
||||
|
||||
.navbar-layout .view-footer .dx-toolbar {
|
||||
background: transparent;
|
||||
border: none;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.navbar-layout .view-footer .dx-toolbar .dx-toolbar-center {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* ios7 */
|
||||
|
||||
.dx-theme-ios7 .navbar-layout .layout-header {
|
||||
top: 0;
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
.dx-theme-ios7 .navbar-layout .layout-content {
|
||||
top: 44px;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.dx-theme-ios7 .navbar-layout.has-navbar .layout-content {
|
||||
bottom: 59px;
|
||||
}
|
||||
|
||||
.dx-theme-ios7 .navbar-layout.has-navbar .layout-footer {
|
||||
height: 59px;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.dx-theme-ios7 .navbar-layout .view-footer .dx-toolbar {
|
||||
height: 57px;
|
||||
}
|
||||
|
||||
.dx-theme-ios7 .navbar-layout .view-footer .dx-button .dx-button-content .dx-button-text {
|
||||
font-size: 20px;
|
||||
line-height: 38px;
|
||||
}
|
||||
|
||||
/* android5 */
|
||||
|
||||
.dx-theme-android5 .navbar-layout .layout-header .dx-navbar {
|
||||
top: 0;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.dx-theme-android5 .navbar-layout .layout-content {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.dx-theme-android5 .navbar-layout.has-toolbar .layout-content {
|
||||
bottom: 56px;
|
||||
}
|
||||
|
||||
.dx-theme-android5 .navbar-layout.has-navbar .layout-content {
|
||||
top: 80px;
|
||||
}
|
||||
|
||||
.dx-theme-android5 .navbar-layout .layout-footer {
|
||||
bottom: 0;
|
||||
height: 56px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dx-theme-android5 .navbar-layout.has-toolbar .layout-footer {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* win8 */
|
||||
|
||||
.dx-theme-win8 .navbar-layout-tablet {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.dx-theme-win8 .navbar-layout-tablet .layout-header,
|
||||
.dx-theme-win8 .navbar-layout-tablet .layout-content {
|
||||
position: static;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.dx-theme-win8 .navbar-layout-tablet .layout-content,
|
||||
.dx-theme-win8 .navbar-layout-tablet .layout-content .dx-content {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.dx-theme-win8 .navbar-layout-tablet {
|
||||
display: -ms-grid;
|
||||
-ms-grid-columns: 1fr;
|
||||
-ms-grid-rows: 274px 1fr;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.dx-theme-win8 .navbar-layout-tablet .layout-header {
|
||||
-ms-grid-column: 1;
|
||||
-ms-grid-row: 1;
|
||||
height: 180px;
|
||||
padding: 60px; /* #B230682 */
|
||||
}
|
||||
|
||||
.dx-theme-win8 .navbar-layout-tablet .layout-header h1 {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.dx-theme-win8 .navbar-layout-tablet .layout-content-wrapper {
|
||||
padding: 0 60px 60px 60px; /* #B230682 */
|
||||
/* for IE */
|
||||
-ms-grid-column: 1;
|
||||
-ms-grid-row: 2;
|
||||
/* end for IE */
|
||||
}
|
||||
|
||||
.dx-theme-win8 .navbar-layout-tablet.dx-animating:not(.dx-enter):not(.dx-leave) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* win10 */
|
||||
|
||||
.dx-theme-win10 .navbar-layout-tablet {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.dx-theme-win10 .navbar-layout-tablet .layout-header,
|
||||
.dx-theme-win10 .navbar-layout-tablet .layout-content {
|
||||
position: static;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.dx-theme-win10 .navbar-layout-tablet .layout-content,
|
||||
.dx-theme-win10 .navbar-layout-tablet .layout-content .dx-content {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.dx-theme-win10 .navbar-layout-tablet {
|
||||
display: -ms-grid;
|
||||
-ms-grid-columns: 1fr;
|
||||
-ms-grid-rows: 300px 1fr;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.dx-theme-win10 .navbar-layout-tablet .layout-header {
|
||||
-ms-grid-column: 1;
|
||||
-ms-grid-row: 1;
|
||||
}
|
||||
|
||||
.dx-theme-win10 .navbar-layout-tablet .layout-header .dx-content-placeholder-header {
|
||||
padding: 60px 60px 0;
|
||||
}
|
||||
|
||||
.dx-theme-win10 .navbar-layout-tablet .layout-header .navbar-container {
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.dx-theme-win10 .navbar-layout-tablet .layout-header h1 {
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.dx-theme-win10 .navbar-layout-tablet .layout-content-wrapper {
|
||||
padding: 0 60px 60px 60px;
|
||||
/* for IE */
|
||||
-ms-grid-column: 1;
|
||||
-ms-grid-row: 2;
|
||||
/* end for IE */
|
||||
}
|
||||
|
||||
.dx-theme-win10 .navbar-layout-tablet.dx-animating:not(.dx-enter):not(.dx-leave),
|
||||
.dx-theme-win10 .navbar-layout.dx-animating:not(.dx-enter):not(.dx-leave) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dx-theme-win10 .navbar-layout .layout-header {
|
||||
top: 0;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.dx-theme-win10 .navbar-layout .layout-content {
|
||||
top: 80px;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.dx-theme-win10 .navbar-layout.has-toolbar .layout-content {
|
||||
bottom: 48px;
|
||||
}
|
||||
|
||||
.dx-theme-win10 .navbar-layout .layout-footer {
|
||||
bottom: 0;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
|
||||
/* generic */
|
||||
|
||||
.dx-theme-generic .navbar-layout .layout-content {
|
||||
top: 56px;
|
||||
bottom: 0px;
|
||||
}
|
||||
|
||||
.dx-theme-generic.dx-device-mobile .navbar-layout .layout-header {
|
||||
height: 56px;
|
||||
}
|
||||
|
||||
.dx-theme-generic.dx-device-mobile .navbar-layout .layout-header .dx-toolbar {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.dx-theme-generic .navbar-layout .layout-header .dx-toolbar {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.dx-theme-generic .navbar-layout .layout-header .dx-toolbar-items-container {
|
||||
height: 56px;
|
||||
}
|
||||
|
||||
.dx-theme-generic .navbar-layout.has-navbar .layout-content {
|
||||
bottom: 68px;
|
||||
}
|
||||
|
||||
.dx-theme-generic .navbar-layout .layout-footer,
|
||||
.dx-theme-generic .navbar-layout .layout-footer .dx-navbar {
|
||||
bottom: 0;
|
||||
height: 68px;
|
||||
}
|
||||
|
||||
.dx-theme-generic .navbar-layout.has-toolbar .layout-footer {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dx-theme-generic .navbar-layout .dx-tabs.dx-navbar {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.dx-theme-generic .navbar-layout .view-footer .dx-button {
|
||||
width: 97%;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,88 @@
|
||||
<div class="navbar-layout" data-options="dxLayout : { name: 'navbar', 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="layout-footer">
|
||||
<div class="navbar-container" data-bind="dxNavBar: { }" data-options="dxCommandContainer: { id: 'global-navigation' }">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="view-footer" data-options="dxContent : { targetPlaceholder: 'view-footer' } ">
|
||||
<div class="view-toolbar-bottom" data-bind="dxToolbar: { visible: false }" data-options="dxCommandContainer : { id: 'ios-view-footer' } ">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="navbar-layout" data-options="dxLayout : { name: 'navbar', platform: 'android' } ">
|
||||
|
||||
<div class="layout-header">
|
||||
<div class="navbar-container dx-navbar-layout-header" data-bind="dxNavBar: {}" data-options="dxCommandContainer: { id: 'global-navigation' }">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layout-content" data-options="dxContentPlaceholder : { name: 'content', animation: 'view-content-change' }">
|
||||
</div>
|
||||
|
||||
<div class="layout-footer" data-options="dxContentPlaceholder: { name: 'footer' } ">
|
||||
<div data-bind="dxToolbar: { visible: false }" data-options="dxCommandContainer : { id: 'android-footer-toolbar' } "></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="navbar-layout" data-options="dxLayout : { name: 'navbar', 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="layout-footer">
|
||||
<div class="navbar-container" data-bind="dxNavBar: {}" data-options="dxCommandContainer: { id: 'global-navigation' }">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="view-footer" data-options="dxContent : { targetPlaceholder: 'view-footer' } ">
|
||||
<div class="view-toolbar-bottom" data-bind="dxToolbar: { visible: false }" data-options="dxCommandContainer : { id: 'generic-view-footer' } ">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="navbar-layout-tablet" data-options="dxLayout : { name: 'navbar', platform: 'win', phone: false }">
|
||||
<div class="layout-header">
|
||||
<div data-options="dxContentPlaceholder : { name: 'header', contentCssPosition: 'static' }">
|
||||
<h1 class="view-title" data-bind="text: title"></h1>
|
||||
</div>
|
||||
<div class="navbar-container" data-bind="dxNavBar: { selectionMode: 'none' }" data-options="dxCommandContainer : { id: 'global-navigation' }"></div>
|
||||
</div>
|
||||
<div class="layout-content-wrapper">
|
||||
<div class="layout-content" data-options="dxContentPlaceholder : { name: 'content', contentCssPosition: 'static' }">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="navbar-layout" data-options="dxLayout : { name: 'navbar', platform: 'win', phone: true } ">
|
||||
|
||||
<div class="layout-header">
|
||||
<div class="navbar-container dx-navbar-layout-header" data-bind="dxNavBar: {}" data-options="dxCommandContainer: { id: 'global-navigation' }">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layout-content" data-options="dxContentPlaceholder : { name: 'content', animation: 'view-content-change' }">
|
||||
</div>
|
||||
|
||||
<div class="layout-footer" data-options="dxContentPlaceholder : { name: 'footer' }">
|
||||
<div class="layout-toolbar-bottom" data-bind="dxToolbar: { items: [], renderAs: 'bottomToolbar', visible: false }" data-options="dxCommandContainer : { id: 'win10-phone-appbar' } "></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,63 @@
|
||||
(function(root, factory) {
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
define(function(require, exports, module) {
|
||||
module.exports = factory(require("framework/html/presets").layoutSets, require("framework/html/layout_controller").DefaultLayoutController, require("ui/toolbar"))
|
||||
})
|
||||
}
|
||||
else {
|
||||
root.DevExpress.layouts = root.DevExpress.layouts || {};
|
||||
root.DevExpress.layouts.NavbarLayout = factory(DevExpress.framework.html.layoutSets, DevExpress.framework.html.DefaultLayoutController);
|
||||
root.DevExpress.framework.html.NavBarController = root.DevExpress.layouts.NavbarLayout.NavBarController
|
||||
}
|
||||
}(this, function(layoutSets, DefaultLayoutController) {
|
||||
var exports = {},
|
||||
HAS_NAVBAR_CLASS = "has-navbar",
|
||||
HAS_TOOLBAR_CLASS = "has-toolbar",
|
||||
LAYOUT_FOOTER_SELECTOR = ".layout-footer",
|
||||
ACTIVE_TOOLBAR_SELECTOR = ".dx-active-view .dx-toolbar";
|
||||
var NavBarController = DefaultLayoutController.inherit({
|
||||
ctor: function(options) {
|
||||
options = options || {};
|
||||
options.name = options.name || "navbar";
|
||||
this.callBase(options)
|
||||
}, _createNavigationWidget: function(navigationCommands) {
|
||||
this.callBase(navigationCommands);
|
||||
this.$navbar = this._$mainLayout.find(".navbar-container");
|
||||
return this.$navbar
|
||||
}, _renderNavigationImpl: function(navigationCommands) {
|
||||
this.callBase(navigationCommands);
|
||||
if (navigationCommands.length) {
|
||||
this._$mainLayout.addClass(HAS_NAVBAR_CLASS)
|
||||
}
|
||||
}, _showViewImpl: function(viewInfo) {
|
||||
var that = this;
|
||||
return that.callBase.apply(that, arguments).done(function() {
|
||||
var $toolbar = that._$mainLayout.find(LAYOUT_FOOTER_SELECTOR).find(ACTIVE_TOOLBAR_SELECTOR),
|
||||
isToolbarEmpty = !$toolbar.length || !$toolbar.dxToolbar("instance").option("visible");
|
||||
that._$mainLayout.toggleClass(HAS_TOOLBAR_CLASS, !isToolbarEmpty)
|
||||
})
|
||||
}
|
||||
});
|
||||
layoutSets["navbar"] = layoutSets["navbar"] || [];
|
||||
layoutSets["navbar"].push({
|
||||
platform: "ios", controller: new NavBarController
|
||||
});
|
||||
layoutSets["navbar"].push({
|
||||
platform: "android", controller: new NavBarController
|
||||
});
|
||||
layoutSets["navbar"].push({
|
||||
platform: "generic", controller: new NavBarController
|
||||
});
|
||||
layoutSets["navbar"].push({
|
||||
platform: "win", controller: new NavBarController
|
||||
});
|
||||
layoutSets["split"] = layoutSets["split"] || [];
|
||||
layoutSets["split"].push({
|
||||
platform: "win", phone: false, root: true, pane: "master", controller: new NavBarController
|
||||
});
|
||||
layoutSets["split"].push({
|
||||
platform: "win", phone: true, controller: new NavBarController
|
||||
});
|
||||
exports.NavBarController = NavBarController;
|
||||
return exports
|
||||
}));
|
||||
Reference in New Issue
Block a user