explorer: show labels only as tooltips

- much simpler logic
- stop driving blaec crazy

Author: williamstein

src/packages/frontend/project/explorer/action-bar.tsx

@@ -3,12 +3,10 @@
  *  License: MS-RSL – see LICENSE.md for details
  */
 
-import { Space } from "antd";
+import { Space, Tooltip } from "antd";
 import * as immutable from "immutable";
-import { throttle } from "lodash";
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
-
 import { Button, ButtonToolbar } from "@cocalc/frontend/antd-bootstrap";
 import { Gap, Icon } from "@cocalc/frontend/components";
 import { useStudentProjectFunctionality } from "@cocalc/frontend/course";
@@ -20,8 +18,6 @@ import { file_actions, ProjectActions } from "@cocalc/frontend/project_store";
 import * as misc from "@cocalc/util/misc";
 import { COLORS } from "@cocalc/util/theme";
 
-import { useProjectContext } from "../context";
-
 const ROW_INFO_STYLE = {
   color: COLORS.GRAY,
   height: "22px",
@@ -45,10 +41,6 @@ interface Props {
 
 export const ActionBar: React.FC<Props> = (props: Props) => {
   const intl = useIntl();
-  const [showLabels, setShowLabels] = useState<boolean>(true);
-  const { mainWidthPx } = useProjectContext();
-  const buttonRef = useRef<HTMLDivElement>(null);
-  const widthThld = useRef<number>(0);
   const [select_entire_directory, set_select_entire_directory] = useState<
     "hidden" | "check" | "clear"
   >("hidden");
@@ -76,34 +68,6 @@ export const ActionBar: React.FC<Props> = (props: Props) => {
     }
   }, [props.checked_files, props.listing, select_entire_directory]);
 
-  useEffect(() => {
-    const btnbar = buttonRef.current;
-    if (btnbar == null) return;
-    const resizeObserver = new ResizeObserver(
-      throttle(
-        (entries) => {
-          if (entries.length > 0) {
-            const width = entries[0].contentRect.width;
-            // TODO: this "+100" is sloppy. This makes it much better than before
-            // (e.g. german buttons were cutoff all the time), but could need more tweaking
-            if (showLabels && width > mainWidthPx + 100) {
-              setShowLabels(false);
-              widthThld.current = width;
-            } else if (!showLabels && width < widthThld.current - 1) {
-              setShowLabels(true);
-            }
-          }
-        },
-        100,
-        { leading: false, trailing: true },
-      ),
-    );
-    resizeObserver.observe(btnbar);
-    return () => {
-      resizeObserver.disconnect();
-    };
-  }, [mainWidthPx, buttonRef.current]);
-
   function clear_selection(): void {
     props.actions.set_all_files_unchecked();
     if (select_entire_directory !== "hidden") {
@@ -255,10 +219,12 @@ export const ActionBar: React.FC<Props> = (props: Props) => {
     };
 
     return (
-      <Button onClick={handle_click} disabled={disabled} key={name}>
-        <Icon name={obj.icon} />{" "}
-        {showLabels ? `${intl.formatMessage(obj.name)}...` : ""}
-      </Button>
+      <Tooltip title={intl.formatMessage(obj.name)}>
+        <Button onClick={handle_click} disabled={disabled} key={name}>
+          <Icon name={obj.icon} />
+        </Button>
+        &nbsp;
+      </Tooltip>
     );
   }
 
@@ -337,7 +303,7 @@ export const ActionBar: React.FC<Props> = (props: Props) => {
   }
   return (
     <div style={{ flex: "1 0 auto" }}>
-      <div ref={buttonRef} style={{ flex: "1 0 auto" }}>
+      <div style={{ flex: "1 0 auto" }}>
         <ButtonToolbar style={{ whiteSpace: "nowrap", padding: "0" }}>
           <Space.Compact>
             {props.project_is_running ? render_check_all_button() : undefined}