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