Modularization: left panel dynamic width

molstar · Jul 5, 2024 · ae10079 · ae10079
1 parent 0f2a5d8
commit ae10079
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 2 deletions.
diff --git a/modular-layout.html b/modular-layout.html
@@ -88,7 +88,7 @@ <h2>PDBe Molstar &ndash; Modular UI</h2>
             <div style="display: flex; flex-direction: row;">
                 <div class="panelBox" style="width: 20%;">
                     Left panel
-                    <div id="leftPanel" style=" height: 450px;"></div>
+                    <div id="leftPanel" style="height: 450px; width: 100%;"></div>
                 </div>
                 <div class="panelBox" style="width: 50%;">
                     PDBeViewport
@@ -308,7 +308,12 @@ <h3>Options</h3>
             { target: 'leftPanel', component: PDBeMolstarPlugin.UIComponents.PDBeLeftPanelControls, props: { defaultMode: 'all' } },
             { target: 'rightPanel', component: PDBeMolstarPlugin.UIComponents.ControlsWrapper },
         ];
-        viewerInstance.render(layout, options);
+        viewerInstance.render(layout, options).then(() => {
+            // Adjust left panel width based on active tab
+            viewerInstance.plugin.behaviors.layout.leftPanelTabName.subscribe(tab => {
+                document.getElementById('leftPanel').style.width = (tab === 'none') ? '33px' : '100%';
+            });
+        });
 
         const selectData = getJsonParam('select');
         if (selectData) {

diff --git a/src/overlay.scss b/src/overlay.scss
@@ -61,3 +61,15 @@ svg.pdbe-animated-logo {
 .msp-plugin .msp-viewport-controls-panel .msp-viewport-controls-panel-controls {
     max-height: calc(100cqh - 41px - 24px - 10px); // 100cqh = viewport container, 41px = control buttons offset, 24px = header, 10px = space below
 }
+
+// Avoid wraping headers in left panel help 
+.msp-plugin .msp-simple-help-section {
+    overflow: hidden;
+    text-wrap: nowrap;
+    text-overflow: ellipsis;
+}
+.msp-plugin .msp-control-group-header button {
+    overflow: hidden;
+    text-wrap: nowrap;
+    text-overflow: ellipsis;
+}