From 5143aefd3cd24f5e0d2750cbadf7e0297449a5ad Mon Sep 17 00:00:00 2001
From: Evan Simkowitz <esimkowitz@users.noreply.github.com>
Date: Mon, 5 Aug 2024 14:54:33 -0700
Subject: [PATCH] Simplify blockframe header styling (#199)

This cleans up styling for the BlockFrame header, which had a lot of redundant and unnecessary declarations, which produced inconsistent styling.
---
 frontend/app/block/block.less     | 87 ++++++++++---------------------
 frontend/app/block/blockframe.tsx | 18 ++-----
 frontend/app/block/blockutil.tsx  |  2 +-
 3 files changed, 32 insertions(+), 75 deletions(-)

diff --git a/frontend/app/block/block.less b/frontend/app/block/block.less
index 92aef41f4..a0960175e 100644
--- a/frontend/app/block/block.less
+++ b/frontend/app/block/block.less
@@ -71,7 +71,6 @@
 
             .block-frame-default-header {
                 display: flex;
-                height: 34px;
                 padding: 4px 5px 4px 10px;
                 align-items: center;
                 gap: 8px;
@@ -93,10 +92,6 @@
                     display: flex;
                     align-items: center;
                     gap: 8px;
-                    color: var(--main-text-color);
-                    flex: 0 1 auto;
-                    overflow-x: hidden;
-                    min-width: 0;
 
                     .block-frame-view-icon {
                         font-size: var(--header-icon-size);
@@ -110,6 +105,9 @@
                     .block-frame-view-type {
                         line-height: 12px;
                         font-weight: 700;
+                        text-wrap: nowrap;
+                        overflow-x: hidden;
+                        text-overflow: ellipsis;
                     }
 
                     .block-frame-blockid {
@@ -121,34 +119,36 @@
                     font: var(--fixed-font);
                     font-size: 11px;
                     opacity: 0.7;
+                    text-wrap: nowrap;
+                    overflow-x: hidden;
+                    text-overflow: ellipsis;
+                }
+
+                .iconbutton {
+                    cursor: pointer;
+                    opacity: 0.5;
+                    align-items: center;
+
+                    &:hover {
+                        opacity: 1;
+                    }
+
+                    &.disabled {
+                        opacity: 0.5;
+
+                        &:hover {
+                            opacity: 0.5;
+                        }
+                    }
                 }
 
                 .block-frame-textelems-wrapper {
                     display: flex;
                     flex: 1 100 auto;
-                    overflow-x: hidden;
                     min-width: 0;
                     gap: 8px;
-                    height: 20px;
                     align-items: center;
 
-                    .block-frame-header-iconbutton {
-                        cursor: pointer;
-                        opacity: 0.5;
-
-                        &:hover {
-                            opacity: 1;
-                        }
-
-                        &.disabled {
-                            opacity: 0.5;
-
-                            &:hover {
-                                opacity: 0.5;
-                            }
-                        }
-                    }
-
                     .block-frame-div {
                         display: flex;
                         width: 100%;
@@ -180,7 +180,7 @@
                         }
 
                         // webview specific. for refresh button
-                        .block-frame-header-iconbutton {
+                        .iconbutton {
                             height: 100%;
                             width: 27px;
                             display: flex;
@@ -200,45 +200,12 @@
 
                 .block-frame-end-icons {
                     display: flex;
-                    align-items: center;
 
-                    .block-frame-endicon-button {
-                        opacity: 0.7;
-                        cursor: pointer;
-                        padding: 4px 6px;
-
-                        &:hover {
-                            opacity: 1;
-                        }
-                    }
-
-                    .block-frame-settings {
+                    .iconbutton {
                         display: flex;
                         width: 24px;
-                        padding: 6px;
-                        justify-content: center;
-                        align-items: center;
-                        opacity: 0.5;
-                        cursor: pointer;
-
-                        &:hover {
-                            opacity: 1;
-                        }
-                    }
-
-                    .block-frame-default-close {
-                        display: flex;
-                        justify-content: center;
-                        align-items: center;
-                        opacity: 0.5;
-                        font-size: 11px;
-                        width: 24px;
                         padding: 4px 6px;
-                        cursor: pointer;
-
-                        &:hover {
-                            opacity: 1;
-                        }
+                        align-items: center;
                     }
                 }
             }
diff --git a/frontend/app/block/blockframe.tsx b/frontend/app/block/blockframe.tsx
index 50c447f84..2e7406f36 100644
--- a/frontend/app/block/blockframe.tsx
+++ b/frontend/app/block/blockframe.tsx
@@ -86,9 +86,7 @@ const OptMagnifyButton = React.memo(
             title: "Minimize",
             click: layoutModel?.onMagnifyToggle,
         };
-        return (
-            <IconButton key="magnify" decl={magnifyDecl} className="block-frame-endicon-button block-frame-magnify" />
-        );
+        return <IconButton key="magnify" decl={magnifyDecl} className="block-frame-magnify" />;
     }
 );
 
@@ -97,11 +95,7 @@ function computeEndIcons(blockData: Block, viewModel: ViewModel, layoutModel: La
     const endIconButtons = util.useAtomValueSafe(viewModel.endIconButtons);
 
     if (endIconButtons && endIconButtons.length > 0) {
-        endIconsElem.push(
-            ...endIconButtons.map((button, idx) => (
-                <IconButton key={idx} decl={button} className="block-frame-endicon-button" />
-            ))
-        );
+        endIconsElem.push(...endIconButtons.map((button, idx) => <IconButton key={idx} decl={button} />));
     }
     const settingsDecl: HeaderIconButton = {
         elemtype: "iconbutton",
@@ -110,9 +104,7 @@ function computeEndIcons(blockData: Block, viewModel: ViewModel, layoutModel: La
         click: (e) =>
             handleHeaderContextMenu(e, blockData, viewModel, layoutModel?.onMagnifyToggle, layoutModel?.onClose),
     };
-    endIconsElem.push(
-        <IconButton key="settings" decl={settingsDecl} className="block-frame-endicon-button block-frame-settings" />
-    );
+    endIconsElem.push(<IconButton key="settings" decl={settingsDecl} className="block-frame-settings" />);
     endIconsElem.push(<OptMagnifyButton key="unmagnify" blockData={blockData} layoutModel={layoutModel} />);
     const closeDecl: HeaderIconButton = {
         elemtype: "iconbutton",
@@ -120,9 +112,7 @@ function computeEndIcons(blockData: Block, viewModel: ViewModel, layoutModel: La
         title: "Close",
         click: layoutModel?.onClose,
     };
-    endIconsElem.push(
-        <IconButton key="close" decl={closeDecl} className="block-frame-endicon-button block-frame-default-close" />
-    );
+    endIconsElem.push(<IconButton key="close" decl={closeDecl} className="block-frame-default-close" />);
     return endIconsElem;
 }
 
diff --git a/frontend/app/block/blockutil.tsx b/frontend/app/block/blockutil.tsx
index 1aa8d4c24..613284534 100644
--- a/frontend/app/block/blockutil.tsx
+++ b/frontend/app/block/blockutil.tsx
@@ -162,7 +162,7 @@ export const IconButton = React.memo(({ decl, className }: { decl: HeaderIconBut
     const buttonRef = React.useRef<HTMLDivElement>(null);
     useLongClick(buttonRef, decl.click, decl.longClick);
     return (
-        <div ref={buttonRef} className={clsx(className)} title={decl.title}>
+        <div ref={buttonRef} className={clsx("iconbutton", className)} title={decl.title}>
             <i className={util.makeIconClass(decl.icon, true)} />
         </div>
     );