Add app-menu
This commit is contained in:
parent
200f3e95eb
commit
44f476d5fd
@ -60,6 +60,8 @@ export const TOGGLEMENU = '[AppCommon] ToggleMenu';
|
||||
|
||||
export const TOGGLEACCOUNTMENU = '[AppCommon] ToggleAccountMenu';
|
||||
|
||||
export const TOGGLEAPPMENU = '[AppCommon] ToggleAppMenu';
|
||||
|
||||
export const SETMENUVISIBLE = '[AppCommon] SetMenuVisible';
|
||||
|
||||
export const ONLINE = '[AppCommon] Online';
|
||||
@ -283,6 +285,12 @@ export class ToggleAccountMenu implements Action {
|
||||
constructor() { }
|
||||
}
|
||||
|
||||
export class ToggleAppMenu implements Action {
|
||||
readonly type = TOGGLEAPPMENU;
|
||||
|
||||
constructor() { }
|
||||
}
|
||||
|
||||
export class SetMenuVisible implements Action {
|
||||
readonly type = SETMENUVISIBLE;
|
||||
|
||||
@ -346,6 +354,7 @@ export type Actions = OpenModal
|
||||
| CloseAll
|
||||
| Online
|
||||
| Offline
|
||||
| SetPageMode;
|
||||
| SetPageMode
|
||||
| ToggleAppMenu;
|
||||
|
||||
|
||||
|
@ -55,6 +55,7 @@ import * as commonEffects from './effects/app-common.effects';
|
||||
import { SecureOAuthStorage} from './shared/secureOAuthStorage';
|
||||
import { GradientComponent } from './components/gradient/gradient.component';
|
||||
import { GradientSelectComponent } from './components/gradient-select/gradient-select.component';
|
||||
import { AppMenuComponent } from './components/app-menu/app-menu.component';
|
||||
|
||||
export {
|
||||
SafePipe,
|
||||
@ -126,7 +127,8 @@ export {
|
||||
HasClaimDirective,
|
||||
UserMenuComponent,
|
||||
GradientComponent,
|
||||
GradientSelectComponent
|
||||
GradientSelectComponent,
|
||||
AppMenuComponent
|
||||
],
|
||||
exports: [
|
||||
NgbModule,
|
||||
|
@ -0,0 +1,9 @@
|
||||
<div>
|
||||
<div (click)="toggle($event)" class="rounded-circle menu-button hidden" [ngClass]="{'hidden':!user}">
|
||||
<span i18n-title title="Apps"><i class="fa fa-bars" aria-hidden="true"></i></span>
|
||||
<div class="menu hidden" [ngClass]="{'hidden':!showMenu}">
|
||||
<router-outlet name="app-menu"></router-outlet>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -0,0 +1,48 @@
|
||||
.menu-button {
|
||||
background-color: gray;
|
||||
display: inline-block;
|
||||
width: 2.5em;
|
||||
height: 2.5em;
|
||||
line-height: 2.5em;
|
||||
text-align: center;
|
||||
font-size: 1rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
div.menu-button > span {
|
||||
color:white;
|
||||
}
|
||||
|
||||
.menu {
|
||||
max-height: 100vh;
|
||||
//transition: max-height 0.2s;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 0 20px rgba(0,0,0,.3);
|
||||
position: absolute;
|
||||
top: 3rem;
|
||||
right:0;
|
||||
background-color: #fff;
|
||||
border-radius: 0.25rem;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding:0.5rem;
|
||||
min-width: 10rem;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
max-height: 0;
|
||||
}
|
||||
|
||||
.menu.hidden {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.menu-button.hidden {
|
||||
overflow: hidden;
|
||||
}
|
@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { AppMenuComponent } from './app-menu.component';
|
||||
|
||||
describe('AppMenuComponent', () => {
|
||||
let component: AppMenuComponent;
|
||||
let fixture: ComponentFixture<AppMenuComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ AppMenuComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(AppMenuComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
@ -0,0 +1,29 @@
|
||||
import { Component, OnInit, Input } from '@angular/core';
|
||||
|
||||
|
||||
import { IUser } from '../../models/user';
|
||||
import {Store} from '@ngrx/store';
|
||||
import * as appReducers from '../../reducers/app-common.reducer';
|
||||
import * as appActions from '../../actions/app-common.actions';
|
||||
|
||||
@Component({
|
||||
selector: 'fm-app-menu',
|
||||
templateUrl: './app-menu.component.html',
|
||||
styleUrls: ['./app-menu.component.scss']
|
||||
})
|
||||
export class AppMenuComponent implements OnInit {
|
||||
|
||||
@Input() user:IUser;
|
||||
@Input() showMenu:boolean;
|
||||
|
||||
constructor(private store: Store<appReducers.State>) { }
|
||||
|
||||
ngOnInit(): void {
|
||||
}
|
||||
|
||||
toggle(event:MouseEvent) {
|
||||
event.stopPropagation();
|
||||
this.store.dispatch(new appActions.ToggleAppMenu());
|
||||
}
|
||||
|
||||
}
|
@ -31,6 +31,7 @@
|
||||
<fm-resumable-file-upload></fm-resumable-file-upload>
|
||||
</ng-container>
|
||||
<div class="user-menu apponly">
|
||||
<fm-app-menu [user]="user|async" [showMenu]="appMenuVisible|async"></fm-app-menu>
|
||||
<fm-user-menu [user]="user|async" [showMenu]="accountMenuVisible|async"></fm-user-menu>
|
||||
</div>
|
||||
<div class="healthstatus-container online apponly" [ngClass]="{'online' :(isOnline|async)}">
|
||||
|
@ -124,3 +124,8 @@ body { background: #f1f1f1; line-height: 18px; user-select:none;font-family: Lat
|
||||
.online {
|
||||
max-height:0em;
|
||||
}
|
||||
|
||||
fm-app-menu,fm-user-menu {
|
||||
display: inline-block;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
@ -42,6 +42,7 @@ export class AppComponent implements OnInit, OnDestroy {
|
||||
public routeLoading: Observable<boolean> = this.store$.select(appReducers.selectGetRouteLoading);
|
||||
public menuVisible: Observable<boolean> = this.store$.select(appReducers.SelectGetMenuVisible);
|
||||
public accountMenuVisible: Observable<boolean> = this.store$.select(appReducers.SelectGetAccountMenuVisible);
|
||||
public appMenuVisible: Observable<boolean> = this.store$.select(appReducers.SelectGetAppMenuVisible);
|
||||
public user: Observable<IUser> = this.store$.select(appReducers.SelectGetUser);
|
||||
public isPageMode: Observable<boolean> = this.store$.select(appReducers.SelectGetIsPageMode);
|
||||
@Input() showUploadProgress: boolean = true;
|
||||
|
@ -7,7 +7,6 @@
|
||||
text-align: center;
|
||||
font-size: 1rem;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
div.menu-button > span {
|
||||
|
@ -21,6 +21,7 @@ export interface State {
|
||||
userPackages: IPackages,
|
||||
userSettingsRoot: IItem,
|
||||
accountMenuVisible: boolean,
|
||||
appMenuVisible: boolean,
|
||||
isOnline: boolean,
|
||||
isPageMode:boolean
|
||||
}
|
||||
@ -37,6 +38,7 @@ export const initialState: State = {
|
||||
userPackages: {},
|
||||
userSettingsRoot: null,
|
||||
accountMenuVisible: false,
|
||||
appMenuVisible: false,
|
||||
isOnline: true,
|
||||
isPageMode: true
|
||||
}
|
||||
@ -95,17 +97,20 @@ export function reducer(state = initialState, action: appCommonActions.Actions )
|
||||
});
|
||||
}
|
||||
case appCommonActions.TOGGLEMENU: {
|
||||
return tassign(state, { menuVisible: !state.menuVisible,accountMenuVisible:!state.menuVisible?false:state.accountMenuVisible });
|
||||
return tassign(state, { menuVisible: !state.menuVisible,accountMenuVisible:!state.menuVisible?false:state.accountMenuVisible,appMenuVisible:!state.menuVisible?false:state.appMenuVisible });
|
||||
}
|
||||
case appCommonActions.TOGGLEACCOUNTMENU: {
|
||||
return tassign(state, { accountMenuVisible: !state.accountMenuVisible });
|
||||
return tassign(state, { accountMenuVisible: !state.accountMenuVisible,appMenuVisible:false });
|
||||
}
|
||||
case appCommonActions.TOGGLEAPPMENU: {
|
||||
return tassign(state, { appMenuVisible: !state.appMenuVisible,accountMenuVisible:false });
|
||||
}
|
||||
case appCommonActions.ESCAPE: {
|
||||
return tassign(state, { menuVisible: false,accountMenuVisible:false });
|
||||
return tassign(state, { menuVisible: false,accountMenuVisible:false,appMenuVisible: false });
|
||||
}
|
||||
case appCommonActions.SETMENUVISIBLE: {
|
||||
let a = action as appCommonActions.SetMenuVisible;
|
||||
return tassign(state, { menuVisible: a.visible,accountMenuVisible:a.visible?false:state.accountMenuVisible });
|
||||
return tassign(state, { menuVisible: a.visible,accountMenuVisible:a.visible?false:state.accountMenuVisible,appMenuVisible:a.visible?false:state.appMenuVisible });
|
||||
}
|
||||
case appCommonActions.INITUSERPACKAGESSUCCESS:{
|
||||
let a = action as appCommonActions.InitUserPackagesSuccess;
|
||||
@ -124,7 +129,7 @@ export function reducer(state = initialState, action: appCommonActions.Actions )
|
||||
return tassign(state,{user:null,initialized:false});
|
||||
}
|
||||
case appCommonActions.CLOSEALL: {
|
||||
return tassign(state,{accountMenuVisible:false,menuVisible:false });
|
||||
return tassign(state,{accountMenuVisible:false,appMenuVisible:false, menuVisible:false });
|
||||
}
|
||||
case appCommonActions.ONLINE:{
|
||||
return tassign(state,{isOnline:true});
|
||||
@ -153,6 +158,7 @@ export const getUser = (state: State) => state.user;
|
||||
export const getUserPackages = (state: State) => state.userPackages;
|
||||
export const getUserSettingsRoot = (state: State) => state.userSettingsRoot;
|
||||
export const getAccountMenuVisible = (state: State) => state.accountMenuVisible;
|
||||
export const getAppMenuVisible = (state: State) => state.appMenuVisible;
|
||||
export const getIsOnline = (state: State) => state.isOnline;
|
||||
export const getIsPageMode = (state: State) => state.isPageMode;
|
||||
|
||||
@ -169,6 +175,7 @@ export const SelectGetUser = createSelector(selectAppCommonState,getUser);
|
||||
export const SelectGetUserPackages = createSelector(selectAppCommonState,getUserPackages);
|
||||
export const SelectGetUserSettingsRoot = createSelector(selectAppCommonState,getUserSettingsRoot);
|
||||
export const SelectGetAccountMenuVisible = createSelector(selectAppCommonState,getAccountMenuVisible);
|
||||
export const SelectGetAppMenuVisible = createSelector(selectAppCommonState,getAppMenuVisible);
|
||||
export const SelectGetIsOnline = createSelector(selectAppCommonState,getIsOnline);
|
||||
export const SelectGetIsPageMode = createSelector(selectAppCommonState,getIsPageMode);
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user