Skip to content

Commit 31719fd

Browse files
ismcagdasismcagdas
committed
#94: AngularJs layout integrated with BSB admin
1 parent 0b3d924 commit 31719fd

File tree

6 files changed

+182
-69
lines changed

6 files changed

+182
-69
lines changed

‎src/AbpCompanyName.AbpProjectName.WebSpaAngular/App/Main/views/layout/layout.cshtml‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -55,17 +55,18 @@
5555
</head>
5656
<body class="theme-red" ng-app="app">
5757
<div class="overlay"></div>
58-
<div ng-include="'/App/Main/views/layout/topbar.cshtml'"></div>
58+
5959

6060
<div ng-controller="app.views.layout as vm">
61+
<div ng-include="'/App/Main/views/layout/topbar.cshtml'" onload="vm.activateTopBar()"></div>
6162
<section>
6263
<aside id="leftsidebar" class="sidebar">
63-
<div ng-include="'/App/Main/views/layout/sidebar-user-area.cshtml'"></div>
64+
<div ng-include="'/App/Main/views/layout/sidebar-user-area.cshtml'" onload="vm.activateLeftSideBar()"></div>
6465
<div ng-include="'/App/Main/views/layout/sidebar-nav.cshtml'"></div>
6566
<div ng-include="'/App/Main/views/layout/sidebar-footer.cshtml'"></div>
6667
</aside>
6768

68-
<div ng-include="'/App/Main/views/layout/right-sidebar.cshtml'"></div>
69+
<div ng-include="'/App/Main/views/layout/right-sidebar.cshtml'" onload="vm.activateRightSideBar()"></div>
6970
</section>
7071

7172
<section class="content">

‎src/AbpCompanyName.AbpProjectName.WebSpaAngular/App/Main/views/layout/layout.js‎

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,28 @@
11
(function () {
22
var controllerId = 'app.views.layout';
33
angular.module('app').controller(controllerId, [
4-
'$scope', function ($scope) {
4+
'$scope', '$timeout', function ($scope, $timeout) {
55
var vm = this;
66
//Layout logic...
7+
8+
9+
vm.activateLeftSideBar = function () {
10+
$timeout(function () {
11+
$.AdminBSB.leftSideBar.activate();
12+
}, 1000);
13+
};
14+
15+
vm.activateRightSideBar = function () {
16+
$timeout(function () {
17+
$.AdminBSB.rightSideBar.activate();
18+
}, 1000);
19+
};
20+
21+
22+
vm.activateTopBar = function () {
23+
$.AdminBSB.search.activate();
24+
$.AdminBSB.navbar.activate();
25+
};
26+
727
}]);
828
})();

‎src/AbpCompanyName.AbpProjectName.WebSpaAngular/App/Main/views/layout/sidebar-nav.cshtml‎

Lines changed: 45 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,54 @@
11
<div class="menu" ng-controller="app.views.layout.sidebarNav as vm">
22
<ul class="list">
3-
<ng-template ngFor let-menuItem [ngForOf]="menuItems" let-mainMenuItemIndex="index">
4-
<li *ngIf="showMenuItem(menuItem)" routerLinkActive="active">
5-
<!-- route name -->
6-
<a [routerLink]="[menuItem.route]" *ngIf="!menuItem.items && menuItem.route.indexOf('http') != 0">
7-
<i *ngIf="menuItem.icon" class="material-icons">{{menuItem.icon}}</i>
8-
<span>{{menuItem.name}}</span>
9-
</a>
10-
<!-- Static link (starts with 'http') -->
11-
<a href="{{menuItem.route}}" target="_blank" *ngIf="!menuItem.items && menuItem.route.indexOf('http') == 0">
12-
<i *ngIf="menuItem.icon" class="material-icons">{{menuItem.icon}}</i>
13-
<span>{{menuItem.name}}</span>
14-
</a>
15-
<!-- Has child menu items (so, this is a parent menu) -->
16-
<a href="javascript:void(0);" class="menu-toggle" *ngIf="menuItem.items">
17-
<i *ngIf="menuItem.icon" class="material-icons">{{menuItem.icon}}</i>
18-
<span>{{menuItem.name}}</span>
19-
</a>
20-
<ul class="ml-menu" *ngIf="menuItem.items">
21-
<ng-template ngFor let-subMenuItem [ngForOf]="menuItem.items" let-mainMenuItemIndex="index">
22-
<li *ngIf="showMenuItem(subMenuItem)" routerLinkActive="active">
3+
<li ng-repeat="menuItem in vm.menuItems" ng-if="vm.showMenuItem(menuItem)" ui-sref-active="active">
4+
<!-- route name -->
5+
<a ui-sref="{{menuItem.route}}" ng-if="!menuItem.items && menuItem.route.indexOf('http') != 0">
6+
<i ng-if="menuItem.icon" class="material-icons">{{menuItem.icon}}</i>
7+
<span>{{menuItem.name}}</span>
8+
</a>
9+
<!-- Static link (starts with 'http') -->
10+
<a href="{{menuItem.route}}" target="_blank" ng-if="!menuItem.items && menuItem.route.indexOf('http') == 0">
11+
<i ng-if="menuItem.icon" class="material-icons">{{menuItem.icon}}</i>
12+
<span>{{menuItem.name}}</span>
13+
</a>
14+
<!-- Has child menu items (so, this is a parent menu) -->
15+
<a href="javascript:void(0);" class="menu-toggle" ng-if="menuItem.items">
16+
<i ng-if="menuItem.icon" class="material-icons">{{menuItem.icon}}</i>
17+
<span>{{menuItem.name}}</span>
18+
</a>
19+
<ul class="ml-menu" ng-if="menuItem.items">
20+
<li ng-repeat="subMenuItem in menuItem.items" ng-if="vm.showMenuItem(subMenuItem)" ui-sref-active="active">
21+
<!-- route name -->
22+
<a ui-sref="[subMenuItem.route]" class="toggled" ng-if="!subMenuItem.items && subMenuItem.route.indexOf('http') != 0">
23+
<i ng-if="subMenuItem.icon" class="material-icons">{{subMenuItem.icon}}</i>
24+
<span>{{subMenuItem.name}}</span>
25+
</a>
26+
<!-- Static link (starts with 'http') -->
27+
<a href="{{subMenuItem.route}}" class="toggled" target="_blank" ng-if="!subMenuItem.items && subMenuItem.route.indexOf('http') == 0">
28+
<i ng-if="subMenuItem.icon" class="material-icons">{{subMenuItem.icon}}</i>
29+
<span>{{subMenuItem.name}}</span>
30+
</a>
31+
<!-- Has child menu items (so, this is a parent menu) -->
32+
<a href="javascript:void(0);" class="menu-toggle" ng-if="subMenuItem.items">
33+
<i ng-if="subMenuItem.icon" class="material-icons">{{subMenuItem.icon}}</i>
34+
<span>{{subMenuItem.name}}</span>
35+
</a>
36+
<ul class="ml-menu" ng-if="subMenuItem.items">
37+
<li ng-repeat="subSubMenuItem in subMenuItem.items" ng-if="vm.showMenuItem(subSubMenuItem)" ui-sref-active="active">
2338
<!-- route name -->
24-
<a [routerLink]="[subMenuItem.route]" class="toggled" *ngIf="!subMenuItem.items && subMenuItem.route.indexOf('http') != 0">
25-
<i *ngIf="subMenuItem.icon" class="material-icons">{{subMenuItem.icon}}</i>
26-
<span>{{subMenuItem.name}}</span>
39+
<a ui-sref="[subSubMenuItem.route]" ng-if="subSubMenuItem.route.indexOf('http') != 0">
40+
<i ng-if="subSubMenuItem.icon" class="material-icons">{{subSubMenuItem.icon}}</i>
41+
<span>{{subSubMenuItem.name}}</span>
2742
</a>
2843
<!-- Static link (starts with 'http') -->
29-
<a href="{{subMenuItem.route}}" class="toggled" target="_blank" *ngIf="!subMenuItem.items && subMenuItem.route.indexOf('http') == 0">
30-
<i *ngIf="subMenuItem.icon" class="material-icons">{{subMenuItem.icon}}</i>
31-
<span>{{subMenuItem.name}}</span>
44+
<a href="{{subSubMenuItem.route}}" target="_blank" ng-if="subSubMenuItem.route.indexOf('http') == 0">
45+
<i ng-if="subSubMenuItem.icon" class="material-icons">{{subSubMenuItem.icon}}</i>
46+
<span>{{subSubMenuItem.name}}</span>
3247
</a>
33-
<!-- Has child menu items (so, this is a parent menu) -->
34-
<a href="javascript:void(0);" class="menu-toggle" *ngIf="subMenuItem.items">
35-
<i *ngIf="subMenuItem.icon" class="material-icons">{{subMenuItem.icon}}</i>
36-
<span>{{subMenuItem.name}}</span>
37-
</a>
38-
<ul class="ml-menu" *ngIf="subMenuItem.items">
39-
<ng-template ngFor let-subSubMenuItem [ngForOf]="subMenuItem.items" let-mainMenuItemIndex="index">
40-
<li *ngIf="showMenuItem(subSubMenuItem)" routerLinkActive="active">
41-
<!-- route name -->
42-
<a [routerLink]="[subSubMenuItem.route]" *ngIf="subSubMenuItem.route.indexOf('http') != 0">
43-
<i *ngIf="subSubMenuItem.icon" class="material-icons">{{subSubMenuItem.icon}}</i>
44-
<span>{{subSubMenuItem.name}}</span>
45-
</a>
46-
<!-- Static link (starts with 'http') -->
47-
<a href="{{subSubMenuItem.route}}" target="_blank" *ngIf="subSubMenuItem.route.indexOf('http') == 0">
48-
<i *ngIf="subSubMenuItem.icon" class="material-icons">{{subSubMenuItem.icon}}</i>
49-
<span>{{subSubMenuItem.name}}</span>
50-
</a>
51-
</li>
52-
</ng-template>
53-
</ul>
5448
</li>
55-
</ng-template>
56-
</ul>
57-
</li>
58-
</ng-template>
49+
</ul>
50+
</li>
51+
</ul>
52+
</li>
5953
</ul>
6054
</div>

‎src/AbpCompanyName.AbpProjectName.WebSpaAngular/App/Main/views/layout/sidebar-nav.js‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,49 @@
55
function ($rootScope, $state, appSession) {
66
var vm = this;
77

8+
vm.menuItems = [
9+
createMenuItem(App.localize("HomePage"), "", "home", "home"),
10+
11+
createMenuItem(App.localize("Tenants"), "Pages.Tenants", "business", "tenants"),
12+
createMenuItem(App.localize("Users"), "Pages.Users", "people", "users"),
13+
createMenuItem(App.localize("Roles"), "Pages.Roles", "local_offer", "roles"),
14+
createMenuItem(App.localize("About"), "", "info", "about"),
15+
16+
createMenuItem(App.localize("MultiLevelMenu"), "", "menu", "", [
17+
createMenuItem("ASP.NET Boilerplate", "", "", "", [
18+
createMenuItem("Home", "", "", "https://aspnetboilerplate.com/?ref=abptmpl"),
19+
createMenuItem("Templates", "", "", "https://aspnetboilerplate.com/Templates?ref=abptmpl"),
20+
createMenuItem("Samples", "", "", "https://aspnetboilerplate.com/Samples?ref=abptmpl"),
21+
createMenuItem("Documents", "", "", "https://aspnetboilerplate.com/Pages/Documents?ref=abptmpl")
22+
]),
23+
createMenuItem("ASP.NET Zero", "", "", "", [
24+
createMenuItem("Home", "", "", "https://aspnetzero.com?ref=abptmpl"),
25+
createMenuItem("Description", "", "", "https://aspnetzero.com/?ref=abptmpl#description"),
26+
createMenuItem("Features", "", "", "https://aspnetzero.com/?ref=abptmpl#features"),
27+
createMenuItem("Pricing", "", "", "https://aspnetzero.com/?ref=abptmpl#pricing"),
28+
createMenuItem("Faq", "", "", "https://aspnetzero.com/Faq?ref=abptmpl"),
29+
createMenuItem("Documents", "", "", "https://aspnetzero.com/Documents?ref=abptmpl")
30+
])
31+
])
32+
];
33+
34+
vm.showMenuItem = function(menuItem) {
35+
if (menuItem.permissionName) {
36+
return abp.auth.isGranted(menuItem.permissionName);
37+
}
38+
39+
return true;
40+
}
41+
42+
function createMenuItem(name, permissionName, icon, route, childItems) {
43+
return {
44+
name: name,
45+
permissionName: permissionName,
46+
icon: icon,
47+
route: route,
48+
items: childItems
49+
};
50+
}
851
}
952
]);
1053
})();

‎src/AbpCompanyName.AbpProjectName.WebSpaAngular/js/admin.js‎

Lines changed: 11 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -191,11 +191,11 @@ $.AdminBSB.rightSideBar = {
191191
* You can manage the search bar
192192
*
193193
*/
194-
var $searchBar = $('.search-bar');
194+
var $searchBar;
195195
$.AdminBSB.search = {
196196
activate: function () {
197197
var _this = this;
198-
198+
$searchBar = $('.search-bar');
199199
//Search button click event
200200
$('.js-search').on('click', function () {
201201
_this.showSearchBar();
@@ -446,15 +446,12 @@ $.AdminBSB.browser = {
446446
}
447447
//==========================================================================================================================
448448

449-
$(function () {
450-
$.AdminBSB.browser.activate();
451-
$.AdminBSB.leftSideBar.activate();
452-
$.AdminBSB.rightSideBar.activate();
453-
$.AdminBSB.navbar.activate();
454-
$.AdminBSB.dropdownMenu.activate();
455-
$.AdminBSB.input.activate();
456-
$.AdminBSB.select.activate();
457-
$.AdminBSB.search.activate();
458-
459-
setTimeout(function () { $('.page-loader-wrapper').fadeOut(); }, 50);
460-
});
449+
$.AdminBSB.browser.activate();
450+
451+
//$(function () {
452+
453+
// $.AdminBSB.input.activate();
454+
// $.AdminBSB.select.activate();
455+
456+
// setTimeout(function () { $('.page-loader-wrapper').fadeOut(); }, 50);
457+
//});

‎src/AbpCompanyName.AbpProjectName.WebSpaAngular/js/demo.js‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
$.AdminBSB.activateDemo = function() {
2+
activateNotificationAndTasksScroll();
3+
4+
setSkinListHeightAndScroll();
5+
setSettingListHeightAndScroll();
6+
$(window).resize(function() {
7+
setSkinListHeightAndScroll();
8+
setSettingListHeightAndScroll();
9+
});
10+
};
11+
12+
//Skin tab content set height and show scroll
13+
function setSkinListHeightAndScroll() {
14+
var height = $(window).height() - ($('.navbar').innerHeight() + $('.right-sidebar .nav-tabs').outerHeight());
15+
var $el = $('.demo-choose-skin');
16+
17+
$el.slimScroll({ destroy: true }).height('auto');
18+
$el.parent().find('.slimScrollBar, .slimScrollRail').remove();
19+
20+
$el.slimscroll({
21+
height: height + 'px',
22+
color: 'rgba(0,0,0,0.5)',
23+
size: '4px',
24+
alwaysVisible: false,
25+
borderRadius: '0',
26+
railBorderRadius: '0'
27+
});
28+
}
29+
30+
//Setting tab content set height and show scroll
31+
function setSettingListHeightAndScroll() {
32+
var height = $(window).height() - ($('.navbar').innerHeight() + $('.right-sidebar .nav-tabs').outerHeight());
33+
var $el = $('.right-sidebar .demo-settings');
34+
35+
$el.slimScroll({ destroy: true }).height('auto');
36+
$el.parent().find('.slimScrollBar, .slimScrollRail').remove();
37+
38+
$el.slimscroll({
39+
height: height + 'px',
40+
color: 'rgba(0,0,0,0.5)',
41+
size: '4px',
42+
alwaysVisible: false,
43+
borderRadius: '0',
44+
railBorderRadius: '0'
45+
});
46+
}
47+
48+
//Activate notification and task dropdown on top right menu
49+
function activateNotificationAndTasksScroll() {
50+
$('.navbar-right .dropdown-menu .body .menu').slimscroll({
51+
height: '254px',
52+
color: 'rgba(0,0,0,0.5)',
53+
size: '4px',
54+
alwaysVisible: false,
55+
borderRadius: '0',
56+
railBorderRadius: '0'
57+
});
58+
}

0 commit comments

Comments
 (0)