FarmMaps/FarmMapsLib
8
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add app-menu

Browse Source
This commit is contained in:
Willem Dantuma 2020-12-09 21:45:38 +01:00
parent 200f3e95eb
commit 44f476d5fd
11 changed files with 144 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
projects/common/src/fm/actions/app-common.actions.ts
View File

@ -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;

4
projects/common/src/fm/common.module.ts
View File

@ -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,

9
projects/common/src/fm/components/app-menu/app-menu.component.html Normal file
View File

@ -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>

48
projects/common/src/fm/components/app-menu/app-menu.component.scss Normal file
View File

@ -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;
}

25
projects/common/src/fm/components/app-menu/app-menu.component.spec.ts Normal file
View File

@ -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();
});
});

29
projects/common/src/fm/components/app-menu/app-menu.component.ts Normal file
View File

@ -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());
}
}

1
projects/common/src/fm/components/app/app.component.html
View File

@ -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)}">

5
projects/common/src/fm/components/app/app.component.scss
View File

@ -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;
}

1
projects/common/src/fm/components/app/app.component.ts
View File

@ -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;

1
projects/common/src/fm/components/user-menu/user-menu.component.scss
View File

@ -7,7 +7,6 @@
text-align: center;
font-size: 1rem;
position: relative;
display: inline-block;
}
div.menu-button > span {

17
projects/common/src/fm/reducers/app-common.reducer.ts
View File

@ -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);