mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-01-10 04:25:08 +00:00
small tweaks and clean-ups
This commit is contained in:
Sercan Yemen
parent
b377d99c66
commit
fe7e6d173b
|
|
@ -17,19 +17,15 @@ export class FuseNavVerticalCollapseComponent implements OnInit
|
|||
|
||||
constructor(private navigationService: FuseNavigationService, private router: Router)
|
||||
{
|
||||
/**
|
||||
* When navigation changed
|
||||
*/
|
||||
// Listen for route changes
|
||||
router.events.subscribe(
|
||||
(event) => {
|
||||
if ( event instanceof NavigationEnd )
|
||||
{
|
||||
/**
|
||||
* Check if the url is child of the collapse
|
||||
*/
|
||||
// Check if the url can be found in
|
||||
// one of the children of this item
|
||||
if ( this.isUrlInChildren(this.item, event.urlAfterRedirects) )
|
||||
{
|
||||
// console.log(this.item);
|
||||
this.expand();
|
||||
}
|
||||
else
|
||||
|
|
@ -40,25 +36,20 @@ export class FuseNavVerticalCollapseComponent implements OnInit
|
|||
}
|
||||
);
|
||||
|
||||
/**
|
||||
* Whenever a navigation collapse item toggled
|
||||
*/
|
||||
this.navigationService.onNavCollapseToggled.subscribe(
|
||||
// Listen for collapsing of any navigation item
|
||||
this.navigationService.onNavCollapseToggled
|
||||
.subscribe(
|
||||
(clickedItem) => {
|
||||
if ( clickedItem.children )
|
||||
{
|
||||
/**
|
||||
* if clicked collapse is child of this collapse
|
||||
* return
|
||||
*/
|
||||
if ( this.item.children.indexOf(clickedItem) !== -1 )
|
||||
// Check if the clicked item is one
|
||||
// of the children of this item
|
||||
if ( this.isChildrenOf(this.item, clickedItem) )
|
||||
{
|
||||
return;
|
||||
}
|
||||
/**
|
||||
* If collapsed item is not related with this collapse
|
||||
* collapse
|
||||
*/
|
||||
|
||||
// If the clicked item is not this item, collapse...
|
||||
if ( this.item !== clickedItem )
|
||||
{
|
||||
this.collapse();
|
||||
|
|
@ -69,18 +60,22 @@ export class FuseNavVerticalCollapseComponent implements OnInit
|
|||
}
|
||||
|
||||
/**
|
||||
* Toggle Collapse
|
||||
* Toggle collapse
|
||||
*
|
||||
* @param ev
|
||||
*/
|
||||
toggleOpen(ev)
|
||||
{
|
||||
ev.preventDefault();
|
||||
|
||||
this.isOpen = !this.isOpen;
|
||||
|
||||
// Navigation collapse toggled...
|
||||
this.navigationService.onNavCollapseToggled.emit(this.item);
|
||||
}
|
||||
|
||||
/**
|
||||
* Expand
|
||||
* Expand the collapsable navigation
|
||||
*/
|
||||
expand()
|
||||
{
|
||||
|
|
@ -88,11 +83,12 @@ export class FuseNavVerticalCollapseComponent implements OnInit
|
|||
{
|
||||
return;
|
||||
}
|
||||
|
||||
this.isOpen = true;
|
||||
}
|
||||
|
||||
/**
|
||||
* Collapse
|
||||
* Collapse the collapsable navigation
|
||||
*/
|
||||
collapse()
|
||||
{
|
||||
|
|
@ -104,40 +100,61 @@ export class FuseNavVerticalCollapseComponent implements OnInit
|
|||
}
|
||||
|
||||
/**
|
||||
* Checking the url is in children
|
||||
* @param arr
|
||||
* Check if the given parent has the
|
||||
* given item in one of its children
|
||||
*
|
||||
* @param parent
|
||||
* @param item
|
||||
* @return {any}
|
||||
*/
|
||||
isChildrenOf(parent, item)
|
||||
{
|
||||
if ( !parent.children )
|
||||
{
|
||||
return false;
|
||||
}
|
||||
|
||||
if ( parent.children.indexOf(item) !== -1 )
|
||||
{
|
||||
return true;
|
||||
}
|
||||
|
||||
for ( const children of parent.children )
|
||||
{
|
||||
if ( children.children )
|
||||
{
|
||||
return this.isChildrenOf(children, item);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if the given url can be found
|
||||
* in one of the given parent's children
|
||||
*
|
||||
* @param parent
|
||||
* @param url
|
||||
* @returns {any}
|
||||
*/
|
||||
isUrlInChildren(arr, url)
|
||||
isUrlInChildren(parent, url)
|
||||
{
|
||||
if ( !arr.children )
|
||||
if ( !parent.children )
|
||||
{
|
||||
return false;
|
||||
}
|
||||
|
||||
for ( let i = 0; i < arr.children.length; i++ )
|
||||
for ( const children of parent.children )
|
||||
{
|
||||
if ( arr.children[i].children )
|
||||
{
|
||||
if ( this.isUrlInChildren(arr.children[i], url) )
|
||||
if ( children.url === url )
|
||||
{
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
if ( arr.children[i].url === url )
|
||||
if ( children.children )
|
||||
{
|
||||
return true;
|
||||
return this.isUrlInChildren(children, url);
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
public isCollapsed(): boolean
|
||||
{
|
||||
return this.isOpen;
|
||||
}
|
||||
|
||||
ngOnInit()
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
export class FuseUtils
|
||||
{
|
||||
|
||||
public static filterArrayByString(mainArr, searchText)
|
||||
{
|
||||
if ( searchText === '' )
|
||||
|
|
@ -17,7 +16,6 @@ export class FuseUtils
|
|||
|
||||
public static searchInObj(itemObj, searchText)
|
||||
{
|
||||
|
||||
for ( const prop in itemObj )
|
||||
{
|
||||
if ( !itemObj.hasOwnProperty(prop) )
|
||||
|
|
@ -29,7 +27,7 @@ export class FuseUtils
|
|||
|
||||
if ( typeof value === 'string' )
|
||||
{
|
||||
if ( this.searchInSting(value, searchText) )
|
||||
if ( this.searchInString(value, searchText) )
|
||||
{
|
||||
return true;
|
||||
}
|
||||
|
|
@ -41,7 +39,6 @@ export class FuseUtils
|
|||
{
|
||||
return true;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
if ( typeof value === 'object' )
|
||||
|
|
@ -60,7 +57,7 @@ export class FuseUtils
|
|||
{
|
||||
if ( typeof value === 'string' )
|
||||
{
|
||||
if ( this.searchInSting(value, searchText) )
|
||||
if ( this.searchInString(value, searchText) )
|
||||
{
|
||||
return true;
|
||||
}
|
||||
|
|
@ -76,7 +73,7 @@ export class FuseUtils
|
|||
}
|
||||
}
|
||||
|
||||
public static searchInSting(value, searchText)
|
||||
public static searchInString(value, searchText)
|
||||
{
|
||||
return value.toLowerCase().includes(searchText);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ export class FuseConfigService
|
|||
colorClasses : {
|
||||
toolbar: 'md-white-500-bg',
|
||||
navbar : 'md-fuse-dark-500-bg',
|
||||
footer : 'md-fuse-dark-800-bg'
|
||||
footer : 'md-fuse-dark-700-bg'
|
||||
},
|
||||
customScrollbars: true,
|
||||
routerAnimation : 'fadeIn'
|
||||
|
|
|
|||
|
|
@ -1,137 +1 @@
|
|||
@import "../../../core/scss/fuse";
|
||||
|
||||
fuse-main {
|
||||
|
||||
&.fuse-nav-bar-folded {
|
||||
|
||||
.content-wrapper {
|
||||
|
||||
&:last-child {
|
||||
padding-left: 64px !important;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
padding-right: 64px !important;
|
||||
}
|
||||
|
||||
&:first-child:last-child {
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
fuse-navbar-vertical {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 256px;
|
||||
min-width: 256px;
|
||||
max-width: 256px;
|
||||
background-color: #FFFFFF;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
z-index: 3;
|
||||
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12);
|
||||
transition: all .3s cubic-bezier(.55, 0, .55, .2), width .1s linear, min-width .1s linear, max-width .1s linear;
|
||||
transform: translateX(0);
|
||||
|
||||
&.folded {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
|
||||
&.left-navbar {
|
||||
left: 0;
|
||||
}
|
||||
&.right-navbar {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
&:not(.folded-open) {
|
||||
width: 64px;
|
||||
min-width: 64px;
|
||||
max-width: 64px;
|
||||
|
||||
.navbar-header {
|
||||
padding: 0 16px 0 16px;
|
||||
}
|
||||
}
|
||||
|
||||
&.folded-open {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
&.close {
|
||||
&.left-navbar {
|
||||
transform: translateX(-100%) !important;
|
||||
}
|
||||
&.right-navbar {
|
||||
transform: translateX(100%) !important;
|
||||
}
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@include media-breakpoint('lt-lg') {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
&.left-navbar {
|
||||
left: 0;
|
||||
}
|
||||
&.right-navbar {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
&:not(.initialized) {
|
||||
&.left-navbar {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
&.right-navbar {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-header {
|
||||
padding: 0 16px 0 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 64px;
|
||||
min-height: 64px;
|
||||
justify-content: space-between;
|
||||
transition: padding 200ms ease;
|
||||
background-color: rgba(255, 255, 255, .05);
|
||||
@include mat-elevation(1);
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.logo-icon {
|
||||
display: block;
|
||||
background: #039BE5;
|
||||
width: 32px;
|
||||
min-width: 32px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #FFF;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
margin-left: 16px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-bar-content {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user