Merge pull request #760 from ZenUml/feature/collapsible-editor

feat(Editor): implement toggle functionality for editor pane visibility

Author: MrCoder

src/components/ContentWrap.jsx

@@ -995,7 +995,7 @@ export default class ContentWrap extends Component {
         }
         onDragEnd={this.mainSplitDragEndHandler.bind(this)}
       >
-        <div id="js-code-side">
+        <div id="js-code-side" className={this.props.isEditorCollapsed ? 'hidden' : ''}>
           <Tabs
             keyboardShortcutsBtnClickHandler={
               this.props.keyboardShortcutsBtnClickHandler
@@ -1135,7 +1135,7 @@ export default class ContentWrap extends Component {
                   <button
                     onClick={() => this.props.layoutBtnClickHandler(1)}
                     id="layoutBtn1"
-                    className="w-7 h-7 hover:text-gray-800 flex items-center justify-center rounded-lg duration-200"
+                    className={`w-7 h-7 hover:text-gray-800 flex items-center justify-center rounded-lg duration-200 ${this.props.currentLayoutMode === 1 ? 'text-gray-800' : ''}`}
                     aria-label="Switch to layout with preview on right"
                   >
                     <svg className="w-5 h-5">
@@ -1145,7 +1145,7 @@ export default class ContentWrap extends Component {
                   <button
                     onClick={() => this.props.layoutBtnClickHandler(2)}
                     id="layoutBtn2"
-                    className="w-7 h-7 hover:text-gray-800 flex items-center justify-center rounded-lg duration-200"
+                    className={`w-7 h-7 hover:text-gray-800 flex items-center justify-center rounded-lg duration-200 ${this.props.currentLayoutMode === 2 ? 'text-gray-800' : ''}`}
                     aria-label="Switch to layout with preview on bottom"
                   >
                     <svg className="w-5 h-5">
@@ -1155,7 +1155,7 @@ export default class ContentWrap extends Component {
                   <button
                     onClick={() => this.props.layoutBtnClickHandler(3)}
                     id="layoutBtn3"
-                    className="w-7 h-7 hover:text-gray-800 flex items-center justify-center rounded-lg duration-200"
+                    className={`w-7 h-7 hover:text-gray-800 flex items-center justify-center rounded-lg duration-200 ${this.props.currentLayoutMode === 3 ? 'text-gray-800' : ''}`}
                     aria-label="Switch to layout with preview on left"
                   >
                     <svg className="w-5 h-5">

src/components/Icons.jsx

@@ -330,6 +330,12 @@ export function Icons() {
             fill="#FDC709"
           />
         </symbol>
+        <symbol id="icon-collapse" viewBox="0 0 24 24">
+          <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M9 3v18m7-6l-3-3l3-3"/></g>
+        </symbol>
+        <symbol id="icon-expand" viewBox="0 0 24 24">
+          <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M9 3v18m5-12l3 3l-3 3"/></g>
+        </symbol>
       </symbol>
     </svg>
   );

src/components/MainHeader.jsx

@@ -62,6 +62,22 @@ export function MainHeader(props) {
   return (
     <div className="main-header text-gray-400 py-2 px-8 flex justify-between border-b border-black-700 bg-black-500">
       <div className="flex items-center gap-4">
+         <button
+          className="py-1.5 duration-200 font-semibold flex items-center gap-2 rounded-lg"
+          aria-label="Toggle editor pane"
+          title={props.isEditorCollapsed ? "Expand editor pane" : "Collapse editor pane"}
+          onClick={props.onToggleEditorCollapse}
+        >
+          <svg 
+            className={`h-8 w-8 transition-transform duration-200 ${
+              props.currentLayoutMode === 2 ? 'rotate-90' : 
+              props.currentLayoutMode === 3 ? 'rotate-180' : 
+              'rotate-0'
+            }`}
+          >
+            <use xlinkHref={props.isEditorCollapsed ? "#icon-expand" : "#icon-collapse"} />
+          </svg>
+        </button>
         <DropdownMenu.Root>
           <DropdownMenu.Trigger asChild>
             <div className="flex items-center p-1 hover:bg-gray-700 data-[state=open]:bg-[#454856] rounded-lg cursor-pointer duration-200">
@@ -243,7 +259,6 @@ export function MainHeader(props) {
                     className="h-full w-full appearance-none"
                     crossOrigin="anonymous"
                     src={props.user.photoURL}
-                    className=""
                   />
                 </div>
                 {isSubscribed && (

src/components/app.jsx

@@ -94,6 +94,7 @@ export default class App extends Component {
         title: '',
         externalLibs: { js: '', css: '' },
       },
+      isEditorCollapsed: false,
     };
     this.defaultSettings = {
       preserveLastCode: true,
@@ -758,6 +759,25 @@ BookLibService.Borrow(id) {
     this.toggleLayout(layoutId);
   }
 
+  async toggleEditorCollapse() {
+    await this.setState({
+      isEditorCollapsed: !this.state.isEditorCollapsed,
+    });
+    
+    // Apply CSS class to body to control layout
+    if (this.state.isEditorCollapsed) {
+      document.body.classList.add('editor-collapsed');
+    } else {
+      document.body.classList.remove('editor-collapsed');
+    }
+    
+    mixpanel.track({
+      event: 'toggleEditorCollapse',
+      category: 'ui',
+      label: this.state.isEditorCollapsed ? 'collapsed' : 'expanded',
+    });
+  }
+
   // Calculates the sizes of html, css & js code panes.
   getCodePaneSizes() {
     var sizes;
@@ -1661,6 +1681,7 @@ BookLibService.Borrow(id) {
               openCheatSheet={this.openCheatSheet.bind(this)}
               onUpdateImage={this.onUpdateImage.bind(this)}
               currentItem={this.state.currentItem}
+              currentLayoutMode={this.state.currentLayoutMode}
               onLogin={this.loginBtnClickHandler.bind(this)}
               externalLibCount={this.state.externalLibCount}
               openBtnHandler={this.openBtnClickHandler.bind(this)}
@@ -1679,6 +1700,8 @@ BookLibService.Borrow(id) {
               user={this.state.user}
               settingsBtnClickHandler={this.handleSettingsBtnClick.bind(this)}
               unsavedEditCount={this.state.unsavedEditCount}
+              isEditorCollapsed={this.state.isEditorCollapsed}
+              onToggleEditorCollapse={this.toggleEditorCollapse.bind(this)}
             />
           )}
           {this.isEmbed && (
@@ -1709,6 +1732,8 @@ BookLibService.Borrow(id) {
               this,
             )}
             layoutBtnClickHandler={this.layoutBtnClickHandler.bind(this)}
+            isEditorCollapsed={this.state.isEditorCollapsed}
+            onToggleEditorCollapse={this.toggleEditorCollapse.bind(this)}
           />
           {this.isEmbed ? null : (
             <Footer

src/style.css

@@ -353,6 +353,7 @@ body:not(.light-version).overlay-visible .main-container {
 .code-side,
 .demo-side {
   flex-basis: inherit;
+  flex-grow: 1;
   position: relative;
   width: 50%;
 }