From 102d96ded9b3e641a9c5dd35c43cf55455564b17 Mon Sep 17 00:00:00 2001 From: Peter Bastiani Date: Tue, 16 Feb 2021 16:49:23 +0100 Subject: [PATCH] AW-1959 Add global help-menu --- .../src/fm/actions/app-common.actions.ts | 9 +++ projects/common/src/fm/common.module.ts | 2 + .../src/fm/components/app/app.component.html | 1 + .../src/fm/components/app/app.component.ts | 1 + .../help-menu/help-menu.component.html | 8 ++ .../help-menu/help-menu.component.scss | 80 +++++++++++++++++++ .../help-menu/help-menu.component.spec.ts | 25 ++++++ .../help-menu/help-menu.component.ts | 28 +++++++ .../src/fm/reducers/app-common.reducer.ts | 19 +++-- 9 files changed, 167 insertions(+), 6 deletions(-) create mode 100644 projects/common/src/fm/components/help-menu/help-menu.component.html create mode 100644 projects/common/src/fm/components/help-menu/help-menu.component.scss create mode 100644 projects/common/src/fm/components/help-menu/help-menu.component.spec.ts create mode 100644 projects/common/src/fm/components/help-menu/help-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 b37ed99..99955f9 100644 --- a/projects/common/src/fm/actions/app-common.actions.ts +++ b/projects/common/src/fm/actions/app-common.actions.ts @@ -66,6 +66,8 @@ export const TOGGLEAPPMENU = '[AppCommon] ToggleAppMenu'; export const TOGGLENOTIFICATIONMENU = '[AppCommon] ToggleNotificationMenu'; +export const TOGGLEHELPMENU = '[AppCommon] ToggleHelpMenu'; + export const SETMENUVISIBLE = '[AppCommon] SetMenuVisible'; export const ONLINE = '[AppCommon] Online'; @@ -307,6 +309,12 @@ export class ToggleNotificationMenu implements Action { constructor() { } } +export class ToggleHelpMenu implements Action { + readonly type = TOGGLEHELPMENU; + + constructor() { } +} + export class SetMenuVisible implements Action { readonly type = SETMENUVISIBLE; @@ -373,6 +381,7 @@ export type Actions = OpenModal | SetPageMode | ToggleAppMenu | ToggleNotificationMenu + | ToggleHelpMenu | NotificationEvent; diff --git a/projects/common/src/fm/common.module.ts b/projects/common/src/fm/common.module.ts index 674f959..ba7a2bb 100644 --- a/projects/common/src/fm/common.module.ts +++ b/projects/common/src/fm/common.module.ts @@ -58,6 +58,7 @@ 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'; import { NotificationMenuComponent} from './components/notification-menu/notification-menu.component'; +import { HelpMenuComponent} from './components/help-menu/help-menu.component'; import { BackButtonComponent } from './components/back-button/back-button.component'; export { @@ -135,6 +136,7 @@ export { GradientSelectComponent, AppMenuComponent, NotificationMenuComponent, + HelpMenuComponent, BackButtonComponent, ThumbnailComponent ], diff --git a/projects/common/src/fm/components/app/app.component.html b/projects/common/src/fm/components/app/app.component.html index e9823ba..05c889e 100644 --- a/projects/common/src/fm/components/app/app.component.html +++ b/projects/common/src/fm/components/app/app.component.html @@ -31,6 +31,7 @@
+ diff --git a/projects/common/src/fm/components/app/app.component.ts b/projects/common/src/fm/components/app/app.component.ts index 71dbb9d..ae59fdb 100644 --- a/projects/common/src/fm/components/app/app.component.ts +++ b/projects/common/src/fm/components/app/app.component.ts @@ -44,6 +44,7 @@ export class AppComponent implements OnInit, OnDestroy { public accountMenuVisible: Observable = this.store$.select(appReducers.SelectGetAccountMenuVisible); public appMenuVisible: Observable = this.store$.select(appReducers.SelectGetAppMenuVisible); public notificationMenuVisible: Observable = this.store$.select(appReducers.SelectGetNotificationMenuVisible); + public helpMenuVisible: Observable = this.store$.select(appReducers.SelectGetHelpMenuVisible); public unreadNotifications: Observable = this.store$.select(appReducers.SelectgetUnreadNotifications); public user: Observable = this.store$.select(appReducers.SelectGetUser); public isPageMode: Observable = this.store$.select(appReducers.SelectGetIsPageMode); diff --git a/projects/common/src/fm/components/help-menu/help-menu.component.html b/projects/common/src/fm/components/help-menu/help-menu.component.html new file mode 100644 index 0000000..09c570d --- /dev/null +++ b/projects/common/src/fm/components/help-menu/help-menu.component.html @@ -0,0 +1,8 @@ +
+ +
\ No newline at end of file diff --git a/projects/common/src/fm/components/help-menu/help-menu.component.scss b/projects/common/src/fm/components/help-menu/help-menu.component.scss new file mode 100644 index 0000000..486449e --- /dev/null +++ b/projects/common/src/fm/components/help-menu/help-menu.component.scss @@ -0,0 +1,80 @@ +.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: calc( 100vh - 4rem); + //transition: max-height 0.2s; + overflow: hidden; + box-shadow: 0 0 20px rgba(0,0,0,.3); + position: fixed; + top: 3.4rem; + right:0.5rem; + left:0.5rem; + background-color: #fff; + border-radius: 0.25rem; + padding: 0.5rem; + z-index: 3; +} + +:host-context(.fullscreen) .menu { + top:4em; +} + +.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; +} + + +@media screen and (min-width: 44rem) { + .menu { + position: absolute; + top: 3rem; + right:0; + left: unset; + max-width: 30em; + } + + :host-context(.fullscreen) .menu { + top: 3rem; + } +} + +.unread { + display: block; + position: absolute; + top:-0.5em; + right: -0.5em; +} + +.unread.hidden { + display: none; +} \ No newline at end of file diff --git a/projects/common/src/fm/components/help-menu/help-menu.component.spec.ts b/projects/common/src/fm/components/help-menu/help-menu.component.spec.ts new file mode 100644 index 0000000..f475164 --- /dev/null +++ b/projects/common/src/fm/components/help-menu/help-menu.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { HelpMenuComponent } from './help-menu.component'; + +describe('HelpMenuComponent', () => { + let component: HelpMenuComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ HelpMenuComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(HelpMenuComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/common/src/fm/components/help-menu/help-menu.component.ts b/projects/common/src/fm/components/help-menu/help-menu.component.ts new file mode 100644 index 0000000..f951890 --- /dev/null +++ b/projects/common/src/fm/components/help-menu/help-menu.component.ts @@ -0,0 +1,28 @@ +import { Input } from '@angular/core'; +import { Component, OnInit } 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-help-menu', + templateUrl: './help-menu.component.html', + styleUrls: ['./help-menu.component.scss'] +}) +export class HelpMenuComponent 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/reducers/app-common.reducer.ts b/projects/common/src/fm/reducers/app-common.reducer.ts index 5db7304..6242fbb 100644 --- a/projects/common/src/fm/reducers/app-common.reducer.ts +++ b/projects/common/src/fm/reducers/app-common.reducer.ts @@ -23,6 +23,7 @@ export interface State { accountMenuVisible: boolean, appMenuVisible: boolean, notificationMenuVisible: boolean, + helpMenuVisible: boolean, unreadNotifications: number, isOnline: boolean, isPageMode:boolean @@ -42,6 +43,7 @@ export const initialState: State = { accountMenuVisible: false, appMenuVisible: false, notificationMenuVisible: false, + helpMenuVisible: false, unreadNotifications: 0, isOnline: true, isPageMode: true @@ -102,23 +104,26 @@ export function reducer(state = initialState, action: appCommonActions.Actions ) }); } case appCommonActions.TOGGLEMENU: { - return tassign(state, { menuVisible: !state.menuVisible,accountMenuVisible:!state.menuVisible?false:state.accountMenuVisible,appMenuVisible:!state.menuVisible?false:state.appMenuVisible,notificationMenuVisible:!state.menuVisible?false:state.notificationMenuVisible }); + return tassign(state, { menuVisible: !state.menuVisible,accountMenuVisible:!state.menuVisible?false:state.accountMenuVisible,appMenuVisible:!state.menuVisible?false:state.appMenuVisible,notificationMenuVisible:!state.menuVisible?false:state.notificationMenuVisible,helpMenuVisible:!state.menuVisible?false:state.helpMenuVisible }); } case appCommonActions.TOGGLEACCOUNTMENU: { - return tassign(state, { accountMenuVisible: !state.accountMenuVisible,appMenuVisible:false,notificationMenuVisible:false }); + return tassign(state, { accountMenuVisible: !state.accountMenuVisible,appMenuVisible:false,notificationMenuVisible:false,helpMenuVisible:false }); } case appCommonActions.TOGGLEAPPMENU: { - return tassign(state, { appMenuVisible: !state.appMenuVisible,accountMenuVisible:false,notificationMenuVisible:false }); + return tassign(state, { appMenuVisible: !state.appMenuVisible,accountMenuVisible:false,notificationMenuVisible:false,helpMenuVisible:false }); } case appCommonActions.TOGGLENOTIFICATIONMENU: { - return tassign(state, { notificationMenuVisible : !state.notificationMenuVisible,accountMenuVisible:false,appMenuVisible:false }); + return tassign(state, { notificationMenuVisible : !state.notificationMenuVisible,accountMenuVisible:false,appMenuVisible:false,helpMenuVisible:false }); + } + case appCommonActions.TOGGLEHELPMENU: { + return tassign(state, { helpMenuVisible : !state.helpMenuVisible,accountMenuVisible:false,appMenuVisible:false,notificationMenuVisible:false }); } case appCommonActions.ESCAPE: { - return tassign(state, { menuVisible: false,accountMenuVisible:false,appMenuVisible: false,notificationMenuVisible:false }); + return tassign(state, { menuVisible: false,accountMenuVisible:false,appMenuVisible: false,notificationMenuVisible:false,helpMenuVisible:false }); } case appCommonActions.SETMENUVISIBLE: { let a = action as appCommonActions.SetMenuVisible; - return tassign(state, { menuVisible: a.visible,accountMenuVisible:a.visible?false:state.accountMenuVisible,appMenuVisible:a.visible?false:state.appMenuVisible,notificationMenuVisible:a.visible?false:state.notificationMenuVisible }); + return tassign(state, { menuVisible: a.visible,accountMenuVisible:a.visible?false:state.accountMenuVisible,appMenuVisible:a.visible?false:state.appMenuVisible,notificationMenuVisible:a.visible?false:state.notificationMenuVisible,helpMenuVisible:a.visible?false:state.helpMenuVisible }); } case appCommonActions.INITUSERPACKAGESSUCCESS:{ let a = action as appCommonActions.InitUserPackagesSuccess; @@ -178,6 +183,7 @@ export const getUserSettingsRoot = (state: State) => state.userSettingsRoot; export const getAccountMenuVisible = (state: State) => state.accountMenuVisible; export const getAppMenuVisible = (state: State) => state.appMenuVisible; export const getNotificationMenuVisible = (state: State) => state.notificationMenuVisible; +export const getHelpMenuVisible = (state: State) => state.helpMenuVisible; export const getUnreadNotifications = (state: State) => state.unreadNotifications; export const getIsOnline = (state: State) => state.isOnline; export const getIsPageMode = (state: State) => state.isPageMode; @@ -197,6 +203,7 @@ export const SelectGetUserSettingsRoot = createSelector(selectAppCommonState,get export const SelectGetAccountMenuVisible = createSelector(selectAppCommonState,getAccountMenuVisible); export const SelectGetAppMenuVisible = createSelector(selectAppCommonState,getAppMenuVisible); export const SelectGetNotificationMenuVisible = createSelector(selectAppCommonState,getNotificationMenuVisible); +export const SelectGetHelpMenuVisible = createSelector(selectAppCommonState,getHelpMenuVisible); export const SelectgetUnreadNotifications = createSelector(selectAppCommonState,getUnreadNotifications); export const SelectGetIsOnline = createSelector(selectAppCommonState,getIsOnline);