Some menu fixes
All checks were successful
FarmMaps.Develop/FarmMapsLib/develop This commit looks good
All checks were successful
FarmMaps.Develop/FarmMapsLib/develop This commit looks good
This commit is contained in:
Willem Dantuma
parent
e077aa34df
commit
73550b3201
@ -48,6 +48,8 @@ export const UPLOADEDFILECLICK = '[AppCommon] UploadedFileClick';
|
||||
|
||||
export const TOGGLEMENU = '[AppCommon] ToggleMenu';
|
||||
|
||||
export const SETMENUVISIBLE = '[AppCommon] SetMenuVisible';
|
||||
|
||||
export class InitUser implements Action {
|
||||
readonly type = INITUSER;
|
||||
|
||||
@ -220,6 +222,12 @@ export class ToggleMenu implements Action {
|
||||
|
||||
constructor() { }
|
||||
}
|
||||
|
||||
export class SetMenuVisible implements Action {
|
||||
readonly type = SETMENUVISIBLE;
|
||||
|
||||
constructor(public visible:boolean) { }
|
||||
}
|
||||
|
||||
|
||||
export type Actions = OpenModal
|
||||
@ -249,4 +257,5 @@ export type Actions = OpenModal
|
||||
| TaskEndEvent
|
||||
| TaskErrorEvent
|
||||
| DeviceUpdateEvent
|
||||
| ToggleMenu;
|
||||
| ToggleMenu
|
||||
| SetMenuVisible;
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
<div class="body">
|
||||
<router-outlet></router-outlet>
|
||||
</div>
|
||||
<fm-side-panel [visible]="menuVisible|async" class="menu">
|
||||
<fm-side-panel [visible]="menuVisible|async" [left]="true" class="menu" (click)="handleStopBubble($event)">
|
||||
<div class="container-fluid">
|
||||
<div class="body">
|
||||
<div class="d-flex flex-row">
|
||||
|
||||
@ -1,72 +1,77 @@
|
||||
//@import "theme.scss";
|
||||
|
||||
/* Import Bootstrap & Fonts */
|
||||
|
||||
@import "~bootstrap/scss/bootstrap.scss";
|
||||
|
||||
|
||||
// custom styles
|
||||
|
||||
.btn:focus {
|
||||
box-shadow:none;
|
||||
}
|
||||
|
||||
.input-group > .form-control:focus {
|
||||
z-index: auto;
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
box-shadow: none;
|
||||
border-color: $input-border-color;
|
||||
}
|
||||
|
||||
|
||||
/* *** Overall APP Styling can go here ***
|
||||
--------------------------------------------
|
||||
Note: This Component has ViewEncapsulation.None so the styles will bleed out
|
||||
|
||||
*/
|
||||
|
||||
body { background: #f1f1f1; line-height: 18px; user-select:none;}
|
||||
|
||||
.navbar-brand {
|
||||
padding-top: .5rem;
|
||||
padding-bottom: .5rem;
|
||||
}
|
||||
|
||||
.app {
|
||||
width:100vw;
|
||||
height:100vh;
|
||||
}
|
||||
|
||||
.app > .navbar {
|
||||
position: absolute;
|
||||
transition: top 0.5s ease-out;
|
||||
top:0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 3.1rem;
|
||||
}
|
||||
|
||||
.app > .body {
|
||||
position: absolute;
|
||||
transition: top 0.5s ease-out;
|
||||
top: 3.1rem;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
.app.fullscreen > .navbar {
|
||||
top: -3.1rem;
|
||||
}
|
||||
|
||||
.app.fullscreen > .body {
|
||||
top:0;
|
||||
}
|
||||
|
||||
.btn-primary, .btn-primary:hover {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
//@import "theme.scss";
|
||||
|
||||
/* Import Bootstrap & Fonts */
|
||||
|
||||
@import "~bootstrap/scss/bootstrap.scss";
|
||||
|
||||
|
||||
// custom styles
|
||||
|
||||
.btn:focus {
|
||||
box-shadow:none;
|
||||
}
|
||||
|
||||
.input-group > .form-control:focus {
|
||||
z-index: auto;
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
box-shadow: none;
|
||||
border-color: $input-border-color;
|
||||
}
|
||||
|
||||
|
||||
/* *** Overall APP Styling can go here ***
|
||||
--------------------------------------------
|
||||
Note: This Component has ViewEncapsulation.None so the styles will bleed out
|
||||
|
||||
*/
|
||||
|
||||
body { background: #f1f1f1; line-height: 18px; user-select:none;}
|
||||
|
||||
.navbar-brand {
|
||||
padding-top: .5rem;
|
||||
padding-bottom: .5rem;
|
||||
}
|
||||
|
||||
.app {
|
||||
width:100vw;
|
||||
height:100vh;
|
||||
}
|
||||
|
||||
.app > .navbar {
|
||||
position: absolute;
|
||||
transition: top 0.5s ease-out;
|
||||
top:0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 3.1rem;
|
||||
}
|
||||
|
||||
.app > .body {
|
||||
position: absolute;
|
||||
transition: top 0.5s ease-out;
|
||||
top: 3.1rem;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
.app.fullscreen > .navbar {
|
||||
top: -3.1rem;
|
||||
}
|
||||
|
||||
.app.fullscreen > .body {
|
||||
top:0;
|
||||
}
|
||||
|
||||
.btn-primary, .btn-primary:hover {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.menu .side-panel {
|
||||
z-index: 100;
|
||||
background-color: rgb(245,245,245);
|
||||
}
|
||||
|
||||
|
||||
@ -132,6 +132,10 @@ export class AppComponent implements OnInit, OnDestroy {
|
||||
this.store.dispatch(new commonActions.Escape(false,true));
|
||||
}
|
||||
|
||||
handleStopBubble(event: MouseEvent) {
|
||||
event.stopPropagation();
|
||||
}
|
||||
|
||||
handleToggleMenu(event) {
|
||||
this.store.dispatch(new commonActions.ToggleMenu());
|
||||
}
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
<div class="side-panel hidden collapsed" [ngClass]="{'hidden':!visible,'collapsed':collapsed,'resizeable':(resizeable && mobile),'resizing':resizing }" [ngStyle]="{'top':top}">
|
||||
<div *ngIf="collapsable" class="arrow rounded-right p-2" (click)="handleToggleClick($event)">
|
||||
<i class="fa fa-chevron-left" aria-hidden="true"></i>
|
||||
</div>
|
||||
<div draggable="true" class="resizegrip" (dragstart)="handleStartGripDrag($event)" (touchstart)="handleStartGripDrag($event)" (dragend)="handleEndGripDrag()" (touchend)="handleEndGripDrag()" (drag)="handleGripDrag($event)" (touchmove)="handleGripDrag($event)">
|
||||
<div></div>
|
||||
<span class="rounded"></span>
|
||||
</div>
|
||||
<div class="content">
|
||||
<ng-content>
|
||||
|
||||
</ng-content>
|
||||
</div>
|
||||
</div>
|
||||
<div class="side-panel hidden collapsed left" [ngClass]="{'hidden':!visible,'collapsed':collapsed,'resizeable':(resizeable && mobile),'resizing':resizing,'left':left}" [ngStyle]="{'top':top}">
|
||||
<div *ngIf="collapsable" class="arrow rounded-right p-2" (click)="handleToggleClick($event)">
|
||||
<i class="fa fa-chevron-left" aria-hidden="true"></i>
|
||||
</div>
|
||||
<div draggable="true" class="resizegrip" (dragstart)="handleStartGripDrag($event)" (touchstart)="handleStartGripDrag($event)" (dragend)="handleEndGripDrag()" (touchend)="handleEndGripDrag()" (drag)="handleGripDrag($event)" (touchmove)="handleGripDrag($event)">
|
||||
<div></div>
|
||||
<span class="rounded"></span>
|
||||
</div>
|
||||
<div class="content">
|
||||
<ng-content>
|
||||
|
||||
</ng-content>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,100 +1,113 @@
|
||||
.side-panel {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
width: 100%;
|
||||
left: 0px;
|
||||
top:50%;
|
||||
transition: left 0.3s, top 0.3s;
|
||||
background-color: white;
|
||||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.side-panel.resizing {
|
||||
transition: left 0s, top 0s;
|
||||
}
|
||||
|
||||
.side-panel.collapsed {
|
||||
left:-22rem;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
left: 100%;
|
||||
background-color: inherit;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
.arrow i {
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
.collapsed .arrow i {
|
||||
-webkit-transform: rotate(180deg);
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.side-panel.hidden {
|
||||
top:100%;
|
||||
}
|
||||
|
||||
.content {
|
||||
height:100% ;
|
||||
width:100%;
|
||||
overflow:hidden;
|
||||
overflow-y:auto;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
background-color: rgb(255,255,255);
|
||||
}
|
||||
|
||||
.resizegrip {
|
||||
height:2rem;
|
||||
line-height: 1rem;
|
||||
display: none;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
div.resizegrip > div {
|
||||
position: absolute;
|
||||
top:0px;
|
||||
height: 1rem;
|
||||
width: 100%;
|
||||
background-color: rgb(255,255,255);
|
||||
}
|
||||
|
||||
div.resizegrip > span {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
height:0.3rem;
|
||||
width:4rem;
|
||||
background-color:rgba(0, 0, 0, 0.3);
|
||||
top:-0.3rem;
|
||||
}
|
||||
|
||||
.resizeable .resizegrip {
|
||||
display:block;
|
||||
|
||||
}
|
||||
|
||||
.resizeable .content {
|
||||
height:calc(100% - 1rem);
|
||||
top:-1rem;
|
||||
}
|
||||
|
||||
@media screen and (min-width:44rem) {
|
||||
.side-panel {
|
||||
top:0px;
|
||||
width: 22rem;
|
||||
height:100%;
|
||||
left:0px;
|
||||
}
|
||||
|
||||
.side-panel.hidden {
|
||||
width: 22rem;
|
||||
left:-24rem;
|
||||
height:100%;
|
||||
}
|
||||
|
||||
}
|
||||
.side-panel {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
width: 100%;
|
||||
left: 0px;
|
||||
top:50%;
|
||||
transition: left 0.3s, top 0.3s;
|
||||
background-color: white;
|
||||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.side-panel.resizing {
|
||||
transition: left 0s, top 0s;
|
||||
}
|
||||
|
||||
.side-panel.collapsed {
|
||||
left:-22rem;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
left: 100%;
|
||||
background-color: inherit;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
.arrow i {
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
.collapsed .arrow i {
|
||||
-webkit-transform: rotate(180deg);
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.side-panel.hidden {
|
||||
top:100%;
|
||||
}
|
||||
|
||||
.content {
|
||||
height:100% ;
|
||||
width:100%;
|
||||
overflow:hidden;
|
||||
overflow-y:auto;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
background-color: rgb(255,255,255);
|
||||
}
|
||||
|
||||
.resizegrip {
|
||||
height:2rem;
|
||||
line-height: 1rem;
|
||||
display: none;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
div.resizegrip > div {
|
||||
position: absolute;
|
||||
top:0px;
|
||||
height: 1rem;
|
||||
width: 100%;
|
||||
background-color: rgb(255,255,255);
|
||||
}
|
||||
|
||||
div.resizegrip > span {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
height:0.3rem;
|
||||
width:4rem;
|
||||
background-color:rgba(0, 0, 0, 0.3);
|
||||
top:-0.3rem;
|
||||
}
|
||||
|
||||
.resizeable .resizegrip {
|
||||
display:block;
|
||||
|
||||
}
|
||||
|
||||
.resizeable .content {
|
||||
height:calc(100% - 1rem);
|
||||
top:-1rem;
|
||||
}
|
||||
|
||||
@media screen and (min-width:44rem) {
|
||||
.side-panel {
|
||||
top:0px;
|
||||
width: 22rem;
|
||||
height:100%;
|
||||
left:0px;
|
||||
}
|
||||
|
||||
.side-panel.hidden {
|
||||
width: 22rem;
|
||||
left:-24rem;
|
||||
height:100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.side-panel.left {
|
||||
top:0px;
|
||||
width: 22rem;
|
||||
height:100%;
|
||||
left:0px;
|
||||
}
|
||||
|
||||
.side-panel.left.hidden {
|
||||
width: 22rem;
|
||||
left:-24rem;
|
||||
height:100%;
|
||||
}
|
||||
@ -12,6 +12,7 @@ export class SidePanelComponent implements OnChanges {
|
||||
@Input() public collapsed: boolean;
|
||||
@Input() public collapsable: boolean;
|
||||
@Input() public resizeable: boolean = false;
|
||||
@Input() public left: boolean = false;
|
||||
@ViewChild("resizeGrip", { static: false }) elementView: ElementRef;
|
||||
public mobile:boolean = true;
|
||||
private parentHeight:number = 0;
|
||||
@ -32,7 +33,7 @@ export class SidePanelComponent implements OnChanges {
|
||||
}
|
||||
|
||||
setTop() {
|
||||
this.mobile = this.checkMobile();
|
||||
this.mobile = this.checkMobile() && ! this.left;
|
||||
this.resizeTop = this.mobile?50:0;
|
||||
this.top = (this.visible?this.resizeTop: (this.mobile? 100:0)) + "%";
|
||||
}
|
||||
|
||||
@ -75,6 +75,13 @@ export function reducer(state = initialState, action: appCommonActions.Actions )
|
||||
case appCommonActions.TOGGLEMENU: {
|
||||
return tassign(state, { menuVisible: !state.menuVisible });
|
||||
}
|
||||
case appCommonActions.ESCAPE: {
|
||||
return tassign(state, { menuVisible: false });
|
||||
}
|
||||
case appCommonActions.SETMENUVISIBLE: {
|
||||
let a = action as appCommonActions.SetMenuVisible;
|
||||
return tassign(state, { menuVisible: a.visible });
|
||||
}
|
||||
default: {
|
||||
return state;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user