Bert Leunis pushed to branch feature/CHANNELMGR-1765 at cms-community /
hippo-addon-channel-manager
Commits:
83b8d7a1 by Bert Leunis at 2018-03-23T09:02:03+01:00
CHANNELMGR-1765 fix styling keep the left side panel in the right size and
position
The left side panel opens and closes by actions implemented in angular material
design (mdSideNav) which is different from how the right side panel is opened
and closed. Just leave the animation of the left side panel to material design,
but make sure the width is set and stored correctly.
- - - - -
4 changed files:
-
frontend-ng/src/app/channel/sidePanels/leftSidePanel/leftSidePanel.controller.js
- frontend-ng/src/app/channel/sidePanels/leftSidePanel/leftSidePanel.html
- frontend-ng/src/app/channel/sidePanels/leftSidePanel/leftSidePanel.scss
- frontend-ng/src/app/channel/sidePanels/resizeHandle/resizeHandle.scss
Changes:
=====================================
frontend-ng/src/app/channel/sidePanels/leftSidePanel/leftSidePanel.controller.js
=====================================
---
a/frontend-ng/src/app/channel/sidePanels/leftSidePanel/leftSidePanel.controller.js
+++
b/frontend-ng/src/app/channel/sidePanels/leftSidePanel/leftSidePanel.controller.js
@@ -42,8 +42,8 @@ class LeftSidePanelCtrl {
$onInit() {
this.lastSavedWidth = this.localStorageService.get('leftSidePanelWidth')
|| '320px';
- // TODO: this should be done after leftSidePanelToggle event has happened!
$watch? subscribe?
- this._openPanel();
+ this.sideNavElement = this.$element.find('.left-side-panel');
+ this.sideNavElement.css('width', this.lastSavedWidth);
}
$postLink() {
@@ -92,21 +92,6 @@ class LeftSidePanelCtrl {
return this.ChannelService.isEditable();
}
- _openPanel() {
- this.SidePanelService.open('left')
- .then(() => {
- this.$element.addClass('sidepanel-open');
- this.$element.css('width', this.lastSavedWidth);
- this.$element.css('max-width', this.lastSavedWidth);
- });
- }
-
- _closePanel() {
- this.$element.removeClass('sidepanel-open');
- this.$element.css('max-width', '0px');
-
- this.SidePanelService.close('left');
- }
}
export default LeftSidePanelCtrl;
=====================================
frontend-ng/src/app/channel/sidePanels/leftSidePanel/leftSidePanel.html
=====================================
--- a/frontend-ng/src/app/channel/sidePanels/leftSidePanel/leftSidePanel.html
+++ b/frontend-ng/src/app/channel/sidePanels/leftSidePanel/leftSidePanel.html
@@ -45,7 +45,7 @@
<mask state="$ctrl.componentsVisible"></mask>
- <resize-handle element="$ctrl.$element"
+ <resize-handle element="$ctrl.sideNavElement"
min-width="320"
on-resize="$ctrl.onResize(newWidth)"
handle-position="right">
=====================================
frontend-ng/src/app/channel/sidePanels/leftSidePanel/leftSidePanel.scss
=====================================
--- a/frontend-ng/src/app/channel/sidePanels/leftSidePanel/leftSidePanel.scss
+++ b/frontend-ng/src/app/channel/sidePanels/leftSidePanel/leftSidePanel.scss
@@ -14,17 +14,11 @@
@import 'variables';
left-side-panel {
- max-width: 0;
+ border-right: 1px solid $grey-200;
- &.sidepanel-open {
- max-width: 50% !important;
-
- md-sidenav {
- margin-right: auto;
- width: 100%;
- max-width: 100%;
- border-right: 1px solid $grey-200;
- }
+ md-sidenav {
+ max-width: 100%;
+ width: 100%;
}
&.in-resize {
=====================================
frontend-ng/src/app/channel/sidePanels/resizeHandle/resizeHandle.scss
=====================================
--- a/frontend-ng/src/app/channel/sidePanels/resizeHandle/resizeHandle.scss
+++ b/frontend-ng/src/app/channel/sidePanels/resizeHandle/resizeHandle.scss
@@ -34,12 +34,12 @@ resize-handle {
}
&.right {
- right: -2px;
+ right: 0px;
}
.handle-inner {
background-image: url('../../../../images/resize-handle.svg');
- background-position: -5px;
+ background-position: -4px;
background-repeat: no-repeat;
background-size: 34px;
height: 100%;
View it on GitLab:
https://code.onehippo.org/cms-community/hippo-addon-channel-manager/commit/83b8d7a153f1b9f2619673766c10575725ddf542
---
View it on GitLab:
https://code.onehippo.org/cms-community/hippo-addon-channel-manager/commit/83b8d7a153f1b9f2619673766c10575725ddf542
You're receiving this email because of your account on code.onehippo.org.
_______________________________________________
Hippocms-svn mailing list
Hippocms-svn@lists.onehippo.org
https://lists.onehippo.org/mailman/listinfo/hippocms-svn
