Enable maximized gl components

frontend/javascripts/oxalis/view/layouting/default_layout_configs.js

@@ -22,7 +22,7 @@ export const show3DViewportInArbitrary = false;
 const LayoutSettings = {
   showPopoutIcon: false,
   showCloseIcon: false,
-  showMaximiseIcon: false,
+  showMaximiseIcon: true,
 };
 
 // While the first parameter to `Pane` is the title of the pane, the second one is an id

frontend/javascripts/oxalis/view/layouting/golden_layout_adapter.js

@@ -70,6 +70,7 @@ const updateSizeForGl = gl => {
 export class GoldenLayoutAdapter extends React.PureComponent<Props<*>, *> {
   gl: GoldenLayout;
   unbindListeners: Array<() => void>;
+  maximizedItem: null;
 
   componentDidMount() {
     this.setupLayout();
@@ -103,6 +104,32 @@ export class GoldenLayoutAdapter extends React.PureComponent<Props<*>, *> {
     if (onLayoutChange != null && this.gl.isInitialised) {
       onLayoutChange(this.gl.toConfig(), this.props.activeLayoutName);
     }
+    // If the maximized item changed adjust css classes to not show hidden gl items.
+    if (this.gl && this.maximizedItem !== !this.gl._maximisedItem) {
+      // Gl needs a forced updated when returning from maximized viewing
+      // mode to render stacked components correctly.
+      const needsUpdatedSize = this.gl._maximisedItem === null && this.maximizedItem != null;
+      this.maximizedItem = this.gl._maximisedItem;
+      const allGlHeaderElemets = document.getElementsByClassName("lm_item");
+      for (const element of allGlHeaderElemets) {
+        if (this.maximizedItem) {
+          // Show only the maximized item and do not hide the gl root component.
+          if (
+            !element.classList.contains("lm_maximised") &&
+            !element.classList.contains("lm_root")
+          ) {
+            element.classList.add("hidden-gl-item");
+          }
+        } else {
+          // If there is no maximized component, remove the css class to show everything as usual.
+          element.classList.remove("hidden-gl-item");
+        }
+      }
+      // Force gl to update again when returning from maximized viewing mode
+      if (needsUpdatedSize) {
+        updateSizeForGl(this.gl);
+      }
+    }
   }
 
   setupLayout() {

frontend/stylesheets/goldenlayout_overwrites.less

@@ -86,3 +86,12 @@
     border-bottom: 1px solid #1890ff;
   }
 }
+
+.hidden-gl-item {
+  .lm_header {
+    display: none;
+  }
+  .lm_items .lm_item_container .lm_content {
+    display: none;
+  }
+}