diff --git a/projects/common/src/fm/actions/app-common.actions.ts b/projects/common/src/fm/actions/app-common.actions.ts index 2c21045..d4c176a 100644 --- a/projects/common/src/fm/actions/app-common.actions.ts +++ b/projects/common/src/fm/actions/app-common.actions.ts @@ -71,6 +71,8 @@ export const TOGGLENOTIFICATIONMENU = '[AppCommon] ToggleNotificationMenu'; export const TOGGLEHELPMENU = '[AppCommon] ToggleHelpMenu'; +export const TOGGLESETTINGSMENU = '[AppCommon] ToggleSettingsMenu'; + export const SETMENUVISIBLE = '[AppCommon] SetMenuVisible'; export const ONLINE = '[AppCommon] Online'; @@ -332,6 +334,12 @@ export class ToggleHelpMenu implements Action { constructor() { } } +export class ToggleSettingsMenu implements Action { + readonly type = TOGGLESETTINGSMENU; + + constructor() { } +} + export class SetMenuVisible implements Action { readonly type = SETMENUVISIBLE; @@ -408,6 +416,7 @@ export type Actions = OpenModal | ToggleAppMenu | ToggleNotificationMenu | ToggleHelpMenu + | ToggleSettingsMenu | NotificationEvent | SetUnreadNotifications; diff --git a/projects/common/src/fm/common.module.ts b/projects/common/src/fm/common.module.ts index dbec468..ab501a9 100644 --- a/projects/common/src/fm/common.module.ts +++ b/projects/common/src/fm/common.module.ts @@ -34,6 +34,7 @@ import { HasClaimDirective } from './components/has-claim/has-claim.directive'; import { HasPackageDirective } from './components/has-package/has-package.directive'; import { HasRoleDirective } from './components/has-role/has-role.directive'; import { HelpMenuComponent } from './components/help-menu/help-menu.component'; +import { SettingsMenuComponent } from './components/settings-menu/settings-menu.component'; import { ItemLinkComponent } from './components/item-link/item-link.component'; import { MenuBackgroundComponent } from './components/menu-background/menu-background.component'; import { NotFoundComponent } from './components/not-found/not-found.component'; @@ -104,6 +105,7 @@ export { AppMenuComponent, NotificationMenuComponent, HelpMenuComponent, + SettingsMenuComponent, BackButtonComponent, ThumbnailComponent, EditImageModalComponent, diff --git a/projects/common/src/fm/components/app/app.component.html b/projects/common/src/fm/components/app/app.component.html index 388ccd8..538026d 100644 --- a/projects/common/src/fm/components/app/app.component.html +++ b/projects/common/src/fm/components/app/app.component.html @@ -34,6 +34,7 @@
+ diff --git a/projects/common/src/fm/components/app/app.component.scss b/projects/common/src/fm/components/app/app.component.scss index 14da6dd..53c5b3a 100644 --- a/projects/common/src/fm/components/app/app.component.scss +++ b/projects/common/src/fm/components/app/app.component.scss @@ -119,7 +119,7 @@ body { background: #f1f1f1; line-height: 18px; user-select:none;font-family: Lat max-height:0em; } -fm-help-menu,fm-app-menu,fm-user-menu,fm-notification-menu { +fm-help-menu,fm-app-menu,fm-user-menu,fm-notification-menu,fm-settings-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 c754312..3d7dcae 100644 --- a/projects/common/src/fm/components/app/app.component.ts +++ b/projects/common/src/fm/components/app/app.component.ts @@ -45,6 +45,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 settingsMenuVisible: Observable = this.store$.select(appReducers.SelectGetHelpMenuVisible); public helpMenuVisible: Observable = this.store$.select(appReducers.SelectGetHelpMenuVisible); public unreadNotifications: Observable = this.store$.select(appReducers.SelectgetUnreadNotifications); public user: Observable = this.store$.select(appReducers.SelectGetUser); diff --git a/projects/common/src/fm/components/settings-menu/settings-menu.component.html b/projects/common/src/fm/components/settings-menu/settings-menu.component.html new file mode 100644 index 0000000..820a737 --- /dev/null +++ b/projects/common/src/fm/components/settings-menu/settings-menu.component.html @@ -0,0 +1,8 @@ +
+ +
\ No newline at end of file diff --git a/projects/common/src/fm/components/settings-menu/settings-menu.component.scss b/projects/common/src/fm/components/settings-menu/settings-menu.component.scss new file mode 100644 index 0000000..94b425b --- /dev/null +++ b/projects/common/src/fm/components/settings-menu/settings-menu.component.scss @@ -0,0 +1,90 @@ +.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; + } +} + +.mobile-hide { + display: inherit; +} + +@media screen and (max-width: 768px) { + .mobile-hide { + display: none; + } +} + +.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/settings-menu/settings-menu.component.ts b/projects/common/src/fm/components/settings-menu/settings-menu.component.ts new file mode 100644 index 0000000..b89cd20 --- /dev/null +++ b/projects/common/src/fm/components/settings-menu/settings-menu.component.ts @@ -0,0 +1,37 @@ +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-settings-menu', + templateUrl: './settings-menu.component.html', + styleUrls: ['./settings-menu.component.scss'] +}) +export class SettingsMenuComponent implements OnInit { + + @Input() user:IUser; + @Input() showMenu:boolean; + public noContent = true; + + constructor(private store: Store) { } + + ngOnInit(): void { + } + + toggle(event:MouseEvent) { + event.stopPropagation(); + this.store.dispatch(new appActions.ToggleSettingsMenu()); + } + + activateRoute() { + this.noContent=false; + } + + deActivateRoute() { + this.noContent=true; + } +} diff --git a/projects/common/src/fm/reducers/app-common.reducer.ts b/projects/common/src/fm/reducers/app-common.reducer.ts index d28cb9a..d9429c0 100644 --- a/projects/common/src/fm/reducers/app-common.reducer.ts +++ b/projects/common/src/fm/reducers/app-common.reducer.ts @@ -26,6 +26,7 @@ export interface State { appMenuVisible: boolean, notificationMenuVisible: boolean, helpMenuVisible: boolean, + settingsMenuVisible: boolean, unreadNotifications: number, isOnline: boolean, isPageMode:boolean @@ -47,6 +48,7 @@ export const initialState: State = { appMenuVisible: false, notificationMenuVisible: false, helpMenuVisible: false, + settingsMenuVisible: false, unreadNotifications: 0, isOnline: true, isPageMode: true @@ -106,26 +108,29 @@ 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,helpMenuVisible:!state.menuVisible?false:state.helpMenuVisible }); + 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,settingsMenuVisible:!state.menuVisible?false:state.settingsMenuVisible }); } case appCommonActions.TOGGLEACCOUNTMENU: { - return tassign(state, { accountMenuVisible: !state.accountMenuVisible,appMenuVisible:false,notificationMenuVisible:false,helpMenuVisible:false }); + return tassign(state, { accountMenuVisible: !state.accountMenuVisible,appMenuVisible:false,notificationMenuVisible:false,helpMenuVisible:false,settingsMenuVisible:false }); } case appCommonActions.TOGGLEAPPMENU: { - return tassign(state, { appMenuVisible: !state.appMenuVisible,accountMenuVisible:false,notificationMenuVisible:false,helpMenuVisible:false }); + return tassign(state, { appMenuVisible: !state.appMenuVisible,accountMenuVisible:false,notificationMenuVisible:false,helpMenuVisible:false,settingsMenuVisible:false }); } case appCommonActions.TOGGLENOTIFICATIONMENU: { - return tassign(state, { notificationMenuVisible : !state.notificationMenuVisible,accountMenuVisible:false,appMenuVisible:false,helpMenuVisible:false }); + return tassign(state, { notificationMenuVisible : !state.notificationMenuVisible,accountMenuVisible:false,appMenuVisible:false,helpMenuVisible:false,settingsMenuVisible:false }); } case appCommonActions.TOGGLEHELPMENU: { - return tassign(state, { helpMenuVisible : !state.helpMenuVisible,accountMenuVisible:false,appMenuVisible:false,notificationMenuVisible:false }); + return tassign(state, { helpMenuVisible : !state.helpMenuVisible,accountMenuVisible:false,appMenuVisible:false,notificationMenuVisible:false,settingsMenuVisible:false }); + } + case appCommonActions.TOGGLESETTINGSMENU: { + return tassign(state, { settingsMenuVisible : !state.settingsMenuVisible,accountMenuVisible:false,appMenuVisible:false,notificationMenuVisible:false,helpMenuVisible:false }); } case appCommonActions.ESCAPE: { - return tassign(state, { menuVisible: false,accountMenuVisible:false,appMenuVisible: false,notificationMenuVisible:false,helpMenuVisible:false }); + return tassign(state, { menuVisible: false,accountMenuVisible:false,appMenuVisible: false,notificationMenuVisible:false,helpMenuVisible:false,settingsMenuVisible:false }); } case appCommonActions.SETMENUVISIBLE: { const 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,helpMenuVisible:a.visible?false:state.helpMenuVisible }); + 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,settingsMenuVisible:a.visible?false:state.settingsMenuVisible }); } case appCommonActions.INITUSERPACKAGESSUCCESS:{ const a = action as appCommonActions.InitUserPackagesSuccess; @@ -203,6 +208,7 @@ 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 getSettingsMenuVisible = (state: State) => state.settingsMenuVisible; export const getUnreadNotifications = (state: State) => state.unreadNotifications; export const getIsOnline = (state: State) => state.isOnline; export const getIsPageMode = (state: State) => state.isPageMode; @@ -227,6 +233,7 @@ export const SelectGetAccountMenuVisible = createSelector(selectAppCommonState,g export const SelectGetAppMenuVisible = createSelector(selectAppCommonState,getAppMenuVisible); export const SelectGetNotificationMenuVisible = createSelector(selectAppCommonState,getNotificationMenuVisible); export const SelectGetHelpMenuVisible = createSelector(selectAppCommonState,getHelpMenuVisible); +export const SelectGetSettingsMenuVisible = createSelector(selectAppCommonState,getSettingsMenuVisible); export const SelectgetUnreadNotifications = createSelector(selectAppCommonState,getUnreadNotifications); export const SelectGetIsOnline = createSelector(selectAppCommonState,getIsOnline);