Truncate file paths from the left in the preview header (#322)

This adjusts the block header styling to remove a bunch of unnecessary attributes and to ensure that we have more consistent shrinking behavior. Now, file paths will truncate starting on the left side, to preserve the file name as long as possible. Also, the widget name can shrink down to zero, while preserving the widget icon, since it's unnecessary to have both when the widget is small. <img width="415" alt="image" src="https://github.com/user-attachments/assets/46e0a74a-f35d-4d09-9c67-019936e67e41">
wavetermdev · Sep 4, 2024 · 64a7a6e · 64a7a6e
1 parent 74612c7
commit 64a7a6e
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 22 deletions.
diff --git a/frontend/app/block/block.less b/frontend/app/block/block.less
@@ -85,7 +85,8 @@
 
                 .block-frame-default-header-iconview {
                     display: flex;
-                    flex: 0 1 auto;
+                    flex-shrink: 3;
+                    min-width: 17px;
                     align-items: center;
                     gap: 8px;
                     overflow-x: hidden;
@@ -100,10 +101,11 @@
                     }
 
                     .block-frame-view-type {
-                        font-weight: 700;
                         overflow-x: hidden;
                         text-wrap: nowrap;
                         text-overflow: ellipsis;
+                        flex-shrink: 1;
+                        min-width: 0;
                     }
 
                     .block-frame-blockid {
@@ -116,12 +118,12 @@
                     font: var(--fixed-font);
                     font-size: 11px;
                     opacity: 0.7;
-                    overflow-x: hidden;
                     flex-grow: 1;
 
                     &.preview-filename {
+                        direction: rtl;
+                        text-align: left;
                         span {
-                            height: 100%;
                             cursor: pointer;
 
                             &:hover {
@@ -168,19 +170,18 @@
                     }
 
                     .connection-name {
-                        flex: 1 100 auto;
+                        flex: 1 2 auto;
                         overflow: hidden;
                         padding-right: 4px;
                     }
                 }
 
                 .block-frame-textelems-wrapper {
                     display: flex;
-                    flex: 1 100 auto;
+                    flex: 1 2 auto;
                     min-width: 0;
                     gap: 8px;
                     align-items: center;
-                    overflow-x: hidden;
 
                     .block-frame-div {
                         display: flex;

diff --git a/frontend/app/block/blockframe.tsx b/frontend/app/block/blockframe.tsx
@@ -178,24 +178,13 @@ const BlockFrame_Header = ({
         if (!util.isBlank(headerTextUnion)) {
             headerTextElems.push(
                 <div key="text" className="block-frame-text">
-                    {headerTextUnion}
+                    &lrm;{headerTextUnion}
                 </div>
             );
         }
     } else if (Array.isArray(headerTextUnion)) {
         headerTextElems.push(...renderHeaderElements(headerTextUnion, preview));
     }
-    if (manageConnection) {
-        const connButtonElem = (
-            <ConnectionButton
-                ref={connBtnRef}
-                key="connbutton"
-                connection={blockData?.meta?.connection}
-                changeConnModalAtom={changeConnModalAtom}
-            />
-        );
-        headerTextElems.unshift(connButtonElem);
-    }
     headerTextElems.unshift(<ControllerStatusIcon key="connstatus" blockId={nodeModel.blockId} />);
 
     return (
@@ -206,7 +195,14 @@ const BlockFrame_Header = ({
                 <div className="block-frame-view-type">{viewName}</div>
                 {showBlockIds && <div className="block-frame-blockid">[{nodeModel.blockId.substring(0, 8)}]</div>}
             </div>
-
+            {manageConnection && (
+                <ConnectionButton
+                    ref={connBtnRef}
+                    key="connbutton"
+                    connection={blockData?.meta?.connection}
+                    changeConnModalAtom={changeConnModalAtom}
+                />
+            )}
             <div className="block-frame-textelems-wrapper">{headerTextElems}</div>
             <div className="block-frame-end-icons">{endIconsElem}</div>
         </div>
@@ -222,7 +218,7 @@ const HeaderTextElem = React.memo(({ elem, preview }: { elem: HeaderElem; previe
         return (
             <div className={clsx("block-frame-text", elem.className)}>
                 <span ref={preview ? null : elem.ref} onClick={() => elem?.onClick()}>
-                    {elem.text}
+                    &lrm;{elem.text}
                 </span>
             </div>
         );

diff --git a/frontend/app/view/preview/preview.tsx b/frontend/app/view/preview/preview.tsx
@@ -143,7 +143,6 @@ export class PreviewModel implements ViewModel {
         this.monacoRef = createRef();
         this.viewIcon = jotai.atom((get) => {
             const blockData = get(this.blockAtom);
-            const fileName = get(this.metaFilePath);
             const mimeTypeLoadable = get(this.fileMimeTypeLoadable);
             if (blockData?.meta?.icon) {
                 return blockData.meta.icon;