From 73550b3201bd5a48416f9d9f244f9e1e216f8b4a Mon Sep 17 00:00:00 2001 From: Willem Dantuma Date: Tue, 7 Jan 2020 21:43:48 +0100 Subject: [PATCH] Some menu fixes --- .../src/fm/actions/app-common.actions.ts | 11 +- .../src/fm/components/app/app.component.html | 2 +- .../src/fm/components/app/app.component.scss | 149 ++++++------ .../src/fm/components/app/app.component.ts | 4 + .../side-panel/side-panel.component.html | 28 +-- .../side-panel/side-panel.component.scss | 213 ++++++++++-------- .../side-panel/side-panel.component.ts | 3 +- .../src/fm/reducers/app-common.reducer.ts | 7 + 8 files changed, 228 insertions(+), 189 deletions(-) diff --git a/projects/common/src/fm/actions/app-common.actions.ts b/projects/common/src/fm/actions/app-common.actions.ts index cb7f844..d982659 100644 --- a/projects/common/src/fm/actions/app-common.actions.ts +++ b/projects/common/src/fm/actions/app-common.actions.ts @@ -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; diff --git a/projects/common/src/fm/components/app/app.component.html b/projects/common/src/fm/components/app/app.component.html index 1072e29..66318d2 100644 --- a/projects/common/src/fm/components/app/app.component.html +++ b/projects/common/src/fm/components/app/app.component.html @@ -10,7 +10,7 @@
- +
diff --git a/projects/common/src/fm/components/app/app.component.scss b/projects/common/src/fm/components/app/app.component.scss index d54f415..efbeda2 100644 --- a/projects/common/src/fm/components/app/app.component.scss +++ b/projects/common/src/fm/components/app/app.component.scss @@ -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); +} + diff --git a/projects/common/src/fm/components/app/app.component.ts b/projects/common/src/fm/components/app/app.component.ts index 2ea7e97..78c15d2 100644 --- a/projects/common/src/fm/components/app/app.component.ts +++ b/projects/common/src/fm/components/app/app.component.ts @@ -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()); } diff --git a/projects/common/src/fm/components/side-panel/side-panel.component.html b/projects/common/src/fm/components/side-panel/side-panel.component.html index 70253e1..90364aa 100644 --- a/projects/common/src/fm/components/side-panel/side-panel.component.html +++ b/projects/common/src/fm/components/side-panel/side-panel.component.html @@ -1,14 +1,14 @@ - + diff --git a/projects/common/src/fm/components/side-panel/side-panel.component.scss b/projects/common/src/fm/components/side-panel/side-panel.component.scss index d1f201b..2222f65 100644 --- a/projects/common/src/fm/components/side-panel/side-panel.component.scss +++ b/projects/common/src/fm/components/side-panel/side-panel.component.scss @@ -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%; +} \ No newline at end of file diff --git a/projects/common/src/fm/components/side-panel/side-panel.component.ts b/projects/common/src/fm/components/side-panel/side-panel.component.ts index 9d07ecc..86d0e00 100644 --- a/projects/common/src/fm/components/side-panel/side-panel.component.ts +++ b/projects/common/src/fm/components/side-panel/side-panel.component.ts @@ -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)) + "%"; } diff --git a/projects/common/src/fm/reducers/app-common.reducer.ts b/projects/common/src/fm/reducers/app-common.reducer.ts index 4c3c89b..1cf9c94 100644 --- a/projects/common/src/fm/reducers/app-common.reducer.ts +++ b/projects/common/src/fm/reducers/app-common.reducer.ts @@ -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; }