fix(xod-client): make sidebars not affected by workspace width

Closes #1087
xodio · Feb 19, 2019 · e6c0dad · e6c0dad
1 parent e3055e2
commit e6c0dad
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 6 deletions.
diff --git a/packages/xod-client/src/core/styles/abstracts/variables.scss b/packages/xod-client/src/core/styles/abstracts/variables.scss
@@ -60,7 +60,7 @@ $color-tabs-hover-text: $white;
 $color-tabs-debugger-background: #3d4931;
 $color-tabs-debugger-text: #82b948;
 
-$sidebar-width: 200px;
+$sidebar-width: 202px;
 
 $sidebar-color-bg: $chrome-bg;
 $sidebar-color-bg-even: $chrome-bg;

diff --git a/packages/xod-client/src/core/styles/components/Editor.scss b/packages/xod-client/src/core/styles/components/Editor.scss
@@ -1,7 +1,18 @@
 .Editor {
   flex-grow: 1;
 
-  display: flex;
-  flex-direction: row;
-  align-items: stretch;
+  display: grid;
+  grid-template-columns: 100%;
+
+  &.leftSidebarMaximized {
+    grid-template-columns: $sidebar-width calc(100% - #{$sidebar-width});
+  }
+
+  &.rightSidebarMaximized {
+    grid-template-columns: calc(100% - #{$sidebar-width}) $sidebar-width;
+  }
+
+  &.leftSidebarMaximized.rightSidebarMaximized {
+    grid-template-columns: $sidebar-width calc(100% - #{$sidebar-width * 2}) $sidebar-width;
+  }
 }
diff --git a/packages/xod-client/src/core/styles/components/Sidebar.scss b/packages/xod-client/src/core/styles/components/Sidebar.scss
@@ -6,7 +6,7 @@
   flex-direction: column;
   flex-wrap: nowrap;
   flex-shrink: 0;
-  box-sizing: content-box;
+  box-sizing: border-box;
 
   background: $sidebar-color-bg;
 

diff --git a/packages/xod-client/src/editor/containers/Editor.jsx b/packages/xod-client/src/editor/containers/Editor.jsx
@@ -254,10 +254,19 @@ class Editor extends React.Component {
       />
     ) : null;
 
+    const areSidebarsMaximized = R.compose(
+      R.map(R.pipe(R.filter(R.prop('maximized')), R.isEmpty, R.not)),
+      R.groupBy(R.prop('sidebar')),
+      R.values
+    )(this.props.panelsSettings);
+
     return (
       <HotKeys
         handlers={this.getHotkeyHandlers()}
-        className="Editor"
+        className={cn('Editor', {
+          leftSidebarMaximized: areSidebarsMaximized[SIDEBAR_IDS.LEFT],
+          rightSidebarMaximized: areSidebarsMaximized[SIDEBAR_IDS.RIGHT],
+        })}
         id="Editor"
       >
         <Sidebar id={SIDEBAR_IDS.LEFT} windowSize={this.props.size} />
@@ -303,6 +312,7 @@ Editor.propTypes = {
   project: PropTypes.object,
   currentTab: sanctuaryPropType($Maybe($.Object)),
   attachmentEditorTabs: PropTypes.array,
+  panelsSettings: PropTypes.object.isRequired,
   searchPatches: PropTypes.func.isRequired,
   isHelpboxVisible: PropTypes.bool,
   isDebugSessionRunning: PropTypes.bool,
@@ -354,6 +364,7 @@ const mapStateToProps = R.applySpec({
   isDebugSessionOutdated: DebuggerSelectors.isDebugSessionOutdated,
   defaultNodePosition: EditorSelectors.getDefaultNodePlacePosition,
   isTabtestRunning: EditorSelectors.isTabtestRunning,
+  panelsSettings: EditorSelectors.getAllPanelsSettings,
 });
 
 const mapDispatchToProps = dispatch => ({