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

AW-6410 Add settings menu
All checks were successful
FarmMaps.Develop/FarmMapsLib/pipeline/head This commit looks good
Details

Browse Source
This commit is contained in:
Peter Bastiani 2024-10-14 12:15:46 +02:00
parent 9c866e500f
commit 03a1ccd597
9 changed files with 163 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

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

@ -34,6 +34,7 @@
</ng-container>
<div class="user-menu apponly">
<fm-help-menu [user]="user|async" [showMenu]="helpMenuVisible|async"></fm-help-menu>
<fm-settings-menu [user]="user|async" [showMenu]="settingsMenuVisible|async"></fm-settings-menu>
<fm-notification-menu [user]="user|async" [unread]="unreadNotifications|async" [showMenu]="notificationMenuVisible|async"></fm-notification-menu>
<fm-app-menu [user]="user|async" [showMenu]="appMenuVisible|async"></fm-app-menu>
<fm-user-menu [user]="user|async" [showMenu]="accountMenuVisible|async"></fm-user-menu>

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

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

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

@ -45,6 +45,7 @@ export class AppComponent implements OnInit, OnDestroy {
public accountMenuVisible: Observable<boolean> = this.store$.select(appReducers.SelectGetAccountMenuVisible);
public appMenuVisible: Observable<boolean> = this.store$.select(appReducers.SelectGetAppMenuVisible);
public notificationMenuVisible: Observable<boolean> = this.store$.select(appReducers.SelectGetNotificationMenuVisible);
public settingsMenuVisible: Observable<boolean> = this.store$.select(appReducers.SelectGetHelpMenuVisible);
public helpMenuVisible: Observable<boolean> = this.store$.select(appReducers.SelectGetHelpMenuVisible);
public unreadNotifications: Observable<number> = this.store$.select(appReducers.SelectgetUnreadNotifications);
public user: Observable<IUser> = this.store$.select(appReducers.SelectGetUser);

8
projects/common/src/fm/components/settings-menu/settings-menu.component.html Normal file
View File

@ -0,0 +1,8 @@
<div class="mobile-hide">
<div (click)="toggle($event)" class="rounded-circle menu-button hidden" [ngClass]="{'hidden':!user || noContent}">
<span i18n-title title="Settings"><i class="fas fa-gear" aria-hidden="true"></i></span>
<div class="menu hidden" [ngClass]="{'hidden':!showMenu}">
<router-outlet name="settings-menu" (activate)="activateRoute()" (deactivate)="deActivateRoute()"></router-outlet>
</div>
</div>
</div>

90
projects/common/src/fm/components/settings-menu/settings-menu.component.scss Normal file
View File

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

37
projects/common/src/fm/components/settings-menu/settings-menu.component.ts Normal file
View File

@ -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<appReducers.State>) { }
ngOnInit(): void {
}
toggle(event:MouseEvent) {
event.stopPropagation();
this.store.dispatch(new appActions.ToggleSettingsMenu());
}
activateRoute() {
this.noContent=false;
}
deActivateRoute() {
this.noContent=true;
}
}

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

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