Verified Commit bfcf1fff authored by uncol's avatar uncol
Browse files

app menu display at mobile devices

parent 50c5aa95
Pipeline #20946 passed with stages
in 10 minutes and 36 seconds
......@@ -32,6 +32,9 @@ export class HomeComponent implements OnInit {
]
})
];
setTimeout(() => this.store.dispatch(NavigationActions.loadProjectMenu({verticalItems: navItems})));
setTimeout(() => {
this.store.dispatch(NavigationActions.loadProjectMenu({verticalItems: navItems}));
this.store.dispatch(NavigationActions.isNotApplication());
});
}
}
......@@ -23,6 +23,9 @@ export class Item1Component implements OnInit {
new VerticalNavItem({type: 'navItem', name: 'Edit', icon: 'edit', link: 'xxx1'}),
new VerticalNavItem({type: 'navItem', name: 'Copy', icon: 'copy', link: 'xxx2'})
];
setTimeout(() => this.store.dispatch(NavigationActions.loadProjectMenu({verticalItems: navItems})));
setTimeout(() => {
this.store.dispatch(NavigationActions.loadProjectMenu({verticalItems: navItems}));
this.store.dispatch(NavigationActions.setApplication());
});
}
}
......@@ -21,6 +21,9 @@ export class Item2Component implements OnInit {
new VerticalNavItem({type: 'navItem', name: 'Cut', icon: 'scissors', link: 'xxx1'}),
new VerticalNavItem({type: 'navItem', name: 'Paste', icon: 'paste', link: 'xxx2'})
];
setTimeout(() => this.store.dispatch(NavigationActions.loadProjectMenu({verticalItems: navItems})));
setTimeout(() => {
this.store.dispatch(NavigationActions.loadProjectMenu({verticalItems: navItems}));
this.store.dispatch(NavigationActions.setApplication());
});
}
}
......@@ -6,3 +6,5 @@ export const loadProjectsSuccess = createAction('[Navigation] Load Projects Succ
export const loadProjectsFailure = createAction('[Navigation] Load Projects Failure', props<{ error: string }>());
export const loadProjectMenu = createAction('[Navigation] Load Project Menu Items', props<{ verticalItems: VerticalNavItem[] }>());
export const cleanProjectMenu = createAction('[Navigation] Clean Project Menu');
export const setApplication = createAction('[Navigation] Set Application On');
export const isNotApplication = createAction('[Navigation] Set Application Off');
......@@ -8,6 +8,7 @@ import { VerticalNavItem } from '../models';
<noc-header [headerLinks]="headerLinks" [headerLoading]="headerLoading"></noc-header>
<div class="content-container">
<noc-sidenav [collapsed]="collapsed" [verticalLinks]="verticalLinks"
[ngClass]="{'app-nav': isNav}"
(verticalNavCollapsedChange)="verticalNavCollapsedChange.emit($event)"></noc-sidenav>
<div class="content-area">
<ng-content></ng-content>
......@@ -15,7 +16,7 @@ import { VerticalNavItem } from '../models';
</div>
</clr-main-container>
`,
styles: ['@media screen and (max-width: 768px) {noc-sidenav {display: none}}'],
styles: ['@media screen and (max-width: 768px) {noc-sidenav.app-nav {display: none}}'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class LayoutComponent {
......@@ -23,5 +24,6 @@ export class LayoutComponent {
@Input() headerLinks: VerticalNavItem[];
@Input() verticalLinks: VerticalNavItem[];
@Input() headerLoading: boolean;
@Input() isNav: boolean;
@Output() verticalNavCollapsedChange = new EventEmitter();
}
......@@ -14,6 +14,7 @@ import { VerticalNavItem } from '../models';
[headerLinks]="(headerLinks$ | async)!"
[verticalLinks]="(verticalLinks$ | async)!"
[headerLoading]="(headerLoading$ | async)!"
[isNav]="(isNav$ | async)!"
(verticalNavCollapsedChange)="sideNavChanged($event)">
<router-outlet></router-outlet>
</noc-layout>
......@@ -25,12 +26,14 @@ export class AppComponent implements OnInit {
headerLinks$: Observable<VerticalNavItem[]>;
verticalLinks$: Observable<VerticalNavItem[]>;
headerLoading$: Observable<boolean>;
isNav$: Observable<boolean>;
constructor(private store: Store<fromRoot.State>) {
this.verticalNavCollapsed$ = this.store.pipe(select(fromRoot.verticalNavCollapsed));
this.headerLinks$ = this.store.pipe(select(fromRoot.headerLinks));
this.verticalLinks$ = this.store.pipe(select(fromRoot.verticalLinks));
this.headerLoading$ = this.store.pipe(select(fromRoot.headerLinksLoading));
this.isNav$ = this.store.pipe(select(fromRoot.isNav));
}
sideNavChanged(isCollapsed: boolean) {
......
......@@ -8,6 +8,7 @@ export const navigationFeatureKey = 'navigation';
export interface State {
headerLinks: VerticalNavItem[];
verticalLinks: VerticalNavItem[];
isNav: boolean;
loading: boolean;
error: string | null;
}
......@@ -15,6 +16,7 @@ export interface State {
const initialState: State = {
headerLinks: [],
verticalLinks: [],
isNav: true,
loading: false,
error: null
};
......@@ -25,9 +27,12 @@ export const reducer = createReducer(
on(NavigationActions.loadProjectsSuccess, (state, {projects}) => ({...state, loading: false, headerLinks: projects})),
on(NavigationActions.loadProjectsFailure, (state, {error}) => ({...state, loading: false, error})),
on(NavigationActions.loadProjectMenu, (state, {verticalItems}) => ({...state, verticalLinks: verticalItems})),
on(NavigationActions.cleanProjectMenu, (state) => ({...state, verticalLinks: []}))
on(NavigationActions.cleanProjectMenu, (state) => ({...state, verticalLinks: []})),
on(NavigationActions.isNotApplication, (state) => ({...state, isNav: true})),
on(NavigationActions.setApplication, (state) => ({...state, isNav: false}))
);
export const headerLinks = (state: State) => state.headerLinks;
export const verticalLinks = (state: State) => state.verticalLinks;
export const headerLoading = (state: State) => state.loading;
export const isNav = (state: State) => state.isNav;
......@@ -25,6 +25,10 @@ export class HomeComponent implements OnInit {
new VerticalNavItem({type: 'navItem', name: 'Monitor I', icon: 'bolt', link: 'monitoring/monitor1'}),
new VerticalNavItem({type: 'navItem', name: 'Monitor II', icon: 'bell', link: 'monitoring/monitor2'})
];
setTimeout(() => this.store.dispatch(NavigationActions.loadProjectMenu({verticalItems: navItems})));
setTimeout(() => {
this.store.dispatch(NavigationActions.loadProjectMenu({verticalItems: navItems}));
this.store.dispatch(NavigationActions.isNotApplication());
});
}
}
......@@ -21,6 +21,9 @@ export class Item1Component implements OnInit {
new VerticalNavItem({type: 'navItem', name: 'Sync', icon: 'sync', link: 'xxx1'}),
new VerticalNavItem({type: 'navItem', name: 'Refresh', icon: 'refresh', link: 'xxx2'})
];
setTimeout(() => this.store.dispatch(NavigationActions.loadProjectMenu({verticalItems: navItems})));
setTimeout(() => {
this.store.dispatch(NavigationActions.loadProjectMenu({verticalItems: navItems}));
this.store.dispatch(NavigationActions.setApplication());
});
}
}
......@@ -21,6 +21,9 @@ export class Item2Component implements OnInit {
new VerticalNavItem({type: 'navItem', name: 'lock', icon: 'lock', link: 'xxx1'}),
new VerticalNavItem({type: 'navItem', name: 'unlock', icon: 'unlock', link: 'xxx2'})
];
setTimeout(() => this.store.dispatch(NavigationActions.loadProjectMenu({verticalItems: navItems})));
setTimeout(() => {
this.store.dispatch(NavigationActions.loadProjectMenu({verticalItems: navItems}));
this.store.dispatch(NavigationActions.setApplication());
});
}
}
......@@ -70,3 +70,8 @@ export const verticalLinks = createSelector(
selectNavigationState,
fromNavigate.verticalLinks
);
export const isNav = createSelector(
selectNavigationState,
fromNavigate.isNav
);
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment