From 44f476d5fdbdb8d5623f289a82a152fe6c013203 Mon Sep 17 00:00:00 2001 From: Willem Dantuma Date: Wed, 9 Dec 2020 21:45:38 +0100 Subject: [PATCH] Add app-menu --- .../src/fm/actions/app-common.actions.ts | 11 ++++- projects/common/src/fm/common.module.ts | 4 +- .../app-menu/app-menu.component.html | 9 ++++ .../app-menu/app-menu.component.scss | 48 +++++++++++++++++++ .../app-menu/app-menu.component.spec.ts | 25 ++++++++++ .../components/app-menu/app-menu.component.ts | 29 +++++++++++ .../src/fm/components/app/app.component.html | 3 +- .../src/fm/components/app/app.component.scss | 5 ++ .../src/fm/components/app/app.component.ts | 1 + .../user-menu/user-menu.component.scss | 1 - .../src/fm/reducers/app-common.reducer.ts | 17 +++++-- 11 files changed, 144 insertions(+), 9 deletions(-) create mode 100644 projects/common/src/fm/components/app-menu/app-menu.component.html create mode 100644 projects/common/src/fm/components/app-menu/app-menu.component.scss create mode 100644 projects/common/src/fm/components/app-menu/app-menu.component.spec.ts create mode 100644 projects/common/src/fm/components/app-menu/app-menu.component.ts diff --git a/projects/common/src/fm/actions/app-common.actions.ts b/projects/common/src/fm/actions/app-common.actions.ts index 7e1ebc5..2407bd0 100644 --- a/projects/common/src/fm/actions/app-common.actions.ts +++ b/projects/common/src/fm/actions/app-common.actions.ts @@ -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; diff --git a/projects/common/src/fm/common.module.ts b/projects/common/src/fm/common.module.ts index 2bbebee..bd08884 100644 --- a/projects/common/src/fm/common.module.ts +++ b/projects/common/src/fm/common.module.ts @@ -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, diff --git a/projects/common/src/fm/components/app-menu/app-menu.component.html b/projects/common/src/fm/components/app-menu/app-menu.component.html new file mode 100644 index 0000000..9dd1fe6 --- /dev/null +++ b/projects/common/src/fm/components/app-menu/app-menu.component.html @@ -0,0 +1,9 @@ +
+ +
+ diff --git a/projects/common/src/fm/components/app-menu/app-menu.component.scss b/projects/common/src/fm/components/app-menu/app-menu.component.scss new file mode 100644 index 0000000..d750974 --- /dev/null +++ b/projects/common/src/fm/components/app-menu/app-menu.component.scss @@ -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; +} \ No newline at end of file diff --git a/projects/common/src/fm/components/app-menu/app-menu.component.spec.ts b/projects/common/src/fm/components/app-menu/app-menu.component.spec.ts new file mode 100644 index 0000000..bc5b5eb --- /dev/null +++ b/projects/common/src/fm/components/app-menu/app-menu.component.spec.ts @@ -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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ AppMenuComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(AppMenuComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/common/src/fm/components/app-menu/app-menu.component.ts b/projects/common/src/fm/components/app-menu/app-menu.component.ts new file mode 100644 index 0000000..4df1e62 --- /dev/null +++ b/projects/common/src/fm/components/app-menu/app-menu.component.ts @@ -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) { } + + ngOnInit(): void { + } + + toggle(event:MouseEvent) { + event.stopPropagation(); + this.store.dispatch(new appActions.ToggleAppMenu()); + } + +} diff --git a/projects/common/src/fm/components/app/app.component.html b/projects/common/src/fm/components/app/app.component.html index f2e7713..dc37080 100644 --- a/projects/common/src/fm/components/app/app.component.html +++ b/projects/common/src/fm/components/app/app.component.html @@ -31,7 +31,8 @@
- + +
diff --git a/projects/common/src/fm/components/app/app.component.scss b/projects/common/src/fm/components/app/app.component.scss index 7c26e1b..b3c08b2 100644 --- a/projects/common/src/fm/components/app/app.component.scss +++ b/projects/common/src/fm/components/app/app.component.scss @@ -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; +} diff --git a/projects/common/src/fm/components/app/app.component.ts b/projects/common/src/fm/components/app/app.component.ts index 66cfa97..f11fbff 100644 --- a/projects/common/src/fm/components/app/app.component.ts +++ b/projects/common/src/fm/components/app/app.component.ts @@ -42,6 +42,7 @@ export class AppComponent implements OnInit, OnDestroy { public routeLoading: Observable = this.store$.select(appReducers.selectGetRouteLoading); public menuVisible: Observable = this.store$.select(appReducers.SelectGetMenuVisible); public accountMenuVisible: Observable = this.store$.select(appReducers.SelectGetAccountMenuVisible); + public appMenuVisible: Observable = this.store$.select(appReducers.SelectGetAppMenuVisible); public user: Observable = this.store$.select(appReducers.SelectGetUser); public isPageMode: Observable = this.store$.select(appReducers.SelectGetIsPageMode); @Input() showUploadProgress: boolean = true; diff --git a/projects/common/src/fm/components/user-menu/user-menu.component.scss b/projects/common/src/fm/components/user-menu/user-menu.component.scss index 08f8d40..69e3945 100644 --- a/projects/common/src/fm/components/user-menu/user-menu.component.scss +++ b/projects/common/src/fm/components/user-menu/user-menu.component.scss @@ -7,7 +7,6 @@ text-align: center; font-size: 1rem; position: relative; - display: inline-block; } div.menu-button > span { diff --git a/projects/common/src/fm/reducers/app-common.reducer.ts b/projects/common/src/fm/reducers/app-common.reducer.ts index 795c797..b2f561b 100644 --- a/projects/common/src/fm/reducers/app-common.reducer.ts +++ b/projects/common/src/fm/reducers/app-common.reducer.ts @@ -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);