turn off toolbar labels, since we have excellent tooltips

Author: williamstein

src/packages/frontend/frame-editors/frame-tree/commands/manage.tsx

@@ -26,6 +26,8 @@ const MAX_TITLE_WIDTH = 20;
 const MAX_SEARCH_RESULTS = 10;
 const ICON_WIDTH = "28px";
 
+const BUTTON_LABELS = false;
+
 export class ManageCommands {
   // TODO: setting this to FrameTitleBarProps causes type issues in frame-editors/jupyter-editor/editor.ts
   // So, there is probably a fundamental problem with that mapping into "AllActions"
@@ -480,19 +482,21 @@ export class ManageCommands {
       label = (
         <>
           {icon ?? <Icon name="square" />}
-          <div
-            style={{
-              fontSize: "11px",
-              color: "#666",
-              marginTop: "-10px",
-              // special case: button='' explicitly means no label
-              width: cmd.button === "" ? undefined : "50px",
-              overflow: "hidden",
-              textOverflow: "ellipsis",
-            }}
-          >
-            {buttonLabel}
-          </div>
+          {BUTTON_LABELS && (
+            <div
+              style={{
+                fontSize: "11px",
+                color: "#666",
+                marginTop: "-10px",
+                // special case: button='' explicitly means no label
+                width: cmd.button === "" ? undefined : "50px",
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+              }}
+            >
+              {buttonLabel}
+            </div>
+          )}
         </>
       );
     } else {

src/packages/frontend/frame-editors/frame-tree/title-bar.tsx

@@ -1065,7 +1065,7 @@ export function FrameTitleBar(props: FrameTitleBarProps) {
           title={label}
           items={children}
           button={false}
-          style={{ color: "#333", padding: 0, height: "36px" }}
+          style={{ color: "#333", padding: 0 }}
         />
       );
     } else {
@@ -1076,7 +1076,7 @@ export function FrameTitleBar(props: FrameTitleBarProps) {
           key={key}
           disabled={disabled}
           onClick={onClick}
-          style={{ color: "#333", padding: 0, height: "36px" }}
+          style={{ color: "#333", padding: 0 }}
         >
           {label}
         </Button>
@@ -1104,11 +1104,10 @@ export function FrameTitleBar(props: FrameTitleBarProps) {
         style={{
           borderBottom: popup ? undefined : "1px solid #ccc",
           background: "#fafafa",
-          height: "36px",
-          opacity: is_active ? undefined : 0.5,
+          opacity: is_active ? undefined : 0.3,
         }}
       >
-        <div style={{ margin: "-1px 0 -1px 0" }}>{v}</div>
+        <div style={{ marginBottom: "-2px", paddingTop:'4px' }}>{v}</div>
       </div>
     );
   }

src/packages/util/tsconfig.json

@@ -4,5 +4,5 @@
     "rootDir": "./",
     "outDir": "dist"
   },
-  "exclude": ["node_modules", "dist", "test"]
+  "exclude": ["node_modules", "../node_modules", "dist", "test"]
 }