frontend/title-bar/symbols: context menu for toggling labels and style fixes after merging

Author: haraldschilly

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

@@ -9,7 +9,7 @@ FrameTitleBar - title bar in a frame, in the frame tree
 */
 
 import { ButtonGroup } from "@cocalc/frontend/antd-bootstrap";
-import { Button, Input, InputNumber, Popover, Tooltip } from "antd";
+import { Button, Dropdown, Input, InputNumber, Popover, Tooltip } from "antd";
 import { List } from "immutable";
 import { useMemo, useRef } from "react";
 import { useIntl } from "react-intl";
@@ -27,6 +27,7 @@ import {
   MenuItem,
   MenuItems,
   r_join,
+  Text,
   VisibleMDLG,
 } from "@cocalc/frontend/components";
 import { DropdownMenu } from "@cocalc/frontend/components/dropdown-menu";
@@ -65,6 +66,8 @@ import {
 import { SaveButton } from "./save-button";
 import TitleBarTour from "./title-bar-tour";
 import { ConnectionStatus, EditorDescription, EditorSpec } from "./types";
+import { ACTIVITY_BAR_TOGGLE_LABELS } from "../../project/page/activity-bar-consts";
+import { MenuProps } from "antd/lib";
 
 // Certain special frame editors (e.g., for latex) have extra
 // actions that are not defined in the base code editor actions.
@@ -1068,10 +1071,8 @@ export function FrameTitleBar(props: FrameTitleBarProps) {
     const style: CSS = {
       color: "#333",
       padding: showSymbolBarLabels ? "0" : "7.5px 0 0 0",
-      height: showSymbolBarLabels ? "36px" : "28px",
-      position: "relative",
-      top: showSymbolBarLabels ? "0" : "2px",
-    };
+      height: showSymbolBarLabels ? "36px" : undefined,
+    } as const;
     if (children != null) {
       return (
         <DropdownMenu
@@ -1099,6 +1100,45 @@ export function FrameTitleBar(props: FrameTitleBarProps) {
     }
   }
 
+  function wrapButtonBarContextMenu(bar: React.JSX.Element) {
+    const showSymbolLabel = (
+      <>
+        <Tooltip
+          title={intl.formatMessage({
+            id: "frame_editors.frame_tree.title_bar.symbols.label.explanation",
+            defaultMessage:
+              "If labels are shown, the symbol bar is placed in its own row beneath the menu – otherwise it is smaller and next to the menu.",
+          })}
+        >
+          <Icon name="signature-outlined" />{" "}
+          {intl.formatMessage(ACTIVITY_BAR_TOGGLE_LABELS, {
+            show: showSymbolBarLabels,
+          })}
+        </Tooltip>
+      </>
+    );
+    const items: MenuProps["items"] = [
+      {
+        key: "toggle-labels",
+        label: showSymbolLabel,
+        onClick: () => {
+          redux
+            .getActions("account")
+            .set_other_settings("show_symbol_bar_labels", !showSymbolBarLabels);
+        },
+      },
+    ];
+    return (
+      <Dropdown
+        trigger={["contextMenu"]}
+        menu={{ items }}
+        overlayStyle={{ maxWidth: "400px" }}
+      >
+        {bar}
+      </Dropdown>
+    );
+  }
+
   function renderButtonBar(popup = false) {
     if (!is_active) {
       return null;
@@ -1119,19 +1159,21 @@ export function FrameTitleBar(props: FrameTitleBarProps) {
     }
     // if labels are shown, we render two rows – otherwise symbols are next to the menu and frame controls
     if (showSymbolBarLabels) {
-      return (
+      return wrapButtonBarContextMenu(
         <div
           style={{
             borderBottom: popup ? undefined : "1px solid #ccc",
             background: "#fafafa",
             opacity: is_active ? undefined : 0.3,
           }}
         >
-          <div style={{ marginBottom: "-1px", marginTop: "-1px" }}>{v}</div>
-        </div>
+          <div style={{ marginBottom: "-1px", marginTop: "1px" }}>{v}</div>
+        </div>,
       );
     } else {
-      return <div style={{ marginTop: "5px" }}>{v}</div>;
+      return wrapButtonBarContextMenu(
+        <div style={{ marginTop: "3px" }}>{v}</div>,
+      );
     }
   }
 
@@ -1280,9 +1322,10 @@ export function FrameTitleBar(props: FrameTitleBarProps) {
           {renderMainMenusAndButtons()}
           {is_active && renderConnectionStatus()}
           {is_active && allButtonsPopover()}
-          {renderButtonBar()}
+          {!showSymbolBarLabels ? renderButtonBar() : undefined}
           {renderFrameControls()}
         </div>
+        {showSymbolBarLabels ? renderButtonBar() : undefined}
         {renderConfirmBar()}
         {hasTour && props.is_visible && props.tab_is_visible && (
           <TitleBarTour refs={tourRefs} />

src/packages/frontend/i18n/trans/ar_EG.json

@@ -598,6 +598,7 @@
   "frame_editors.frame_tree.title_bar.close": "أغلق هذا الإطار",
   "frame_editors.frame_tree.title_bar.maximize": "عرض هذا الإطار فقط",
   "frame_editors.frame_tree.title_bar.minimize": "عرض كافة الإطارات",
+  "frame_editors.frame_tree.title_bar.symbols.label.explanation": "إذا تم عرض التسميات، يتم وضع شريط الرموز في صف خاص به تحت القائمة – وإلا فإنه يكون أصغر ويكون بجانب القائمة.",
   "frame-editors.frame-tree.add_remove_icon_button_bar.tooltip": "{isOnButtonBar, select, true {انقر على الأيقونة لإزالتها من شريط الأدوات} other {انقر على الأيقونة لإضافتها إلى شريط الأدوات}}",
   "i18n.localization.lang.arabic": "العربية",
   "i18n.localization.lang.chinese": "الصينية",

src/packages/frontend/i18n/trans/de_DE.json

@@ -598,6 +598,7 @@
   "frame_editors.frame_tree.title_bar.close": "Schließe dieses Fenster",
   "frame_editors.frame_tree.title_bar.maximize": "Nur dieses Fenster anzeigen",
   "frame_editors.frame_tree.title_bar.minimize": "Alle Fenster anzeigen",
+  "frame_editors.frame_tree.title_bar.symbols.label.explanation": "Wenn Beschriftungen angezeigt werden, befindet sich die Symbolleiste in einer eigenen Zeile unterhalb des Menüs – andernfalls ist sie kleiner und neben dem Menü.",
   "frame-editors.frame-tree.add_remove_icon_button_bar.tooltip": "{isOnButtonBar, select, true {Klicken Sie auf das Symbol, um es aus der Symbolleiste zu entfernen} other {Klicken Sie auf das Symbol, um es zur Symbolleiste hinzuzufügen}}",
   "i18n.localization.lang.arabic": "Arabisch",
   "i18n.localization.lang.chinese": "Chinesisch",

src/packages/frontend/i18n/trans/es_ES.json

@@ -598,6 +598,7 @@
   "frame_editors.frame_tree.title_bar.close": "Cerrar este marco",
   "frame_editors.frame_tree.title_bar.maximize": "Mostrar solo este marco",
   "frame_editors.frame_tree.title_bar.minimize": "Mostrar todos los marcos",
+  "frame_editors.frame_tree.title_bar.symbols.label.explanation": "Si se muestran las etiquetas, la barra de símbolos se coloca en su propia fila debajo del menú; de lo contrario, es más pequeña y está al lado del menú.",
   "frame-editors.frame-tree.add_remove_icon_button_bar.tooltip": "{isOnButtonBar, select, true {Haga clic en el icono para quitar de la barra de herramientas} other {Haga clic en el icono para añadir a la barra de herramientas}}",
   "i18n.localization.lang.arabic": "Árabe",
   "i18n.localization.lang.chinese": "Chino",

src/packages/frontend/i18n/trans/fr_FR.json

@@ -598,6 +598,7 @@
   "frame_editors.frame_tree.title_bar.close": "Fermer ce cadre",
   "frame_editors.frame_tree.title_bar.maximize": "Afficher seulement ce cadre",
   "frame_editors.frame_tree.title_bar.minimize": "Afficher tous les cadres",
+  "frame_editors.frame_tree.title_bar.symbols.label.explanation": "Si les étiquettes sont affichées, la barre de symboles est placée sur sa propre ligne sous le menu – sinon elle est plus petite et à côté du menu.",
   "frame-editors.frame-tree.add_remove_icon_button_bar.tooltip": "{isOnButtonBar, select, true {Cliquez sur l'icône pour retirer de la barre d'outils} other {Cliquez sur l'icône pour ajouter à la barre d'outils}}",
   "i18n.localization.lang.arabic": "Arabe",
   "i18n.localization.lang.chinese": "Chinois",

src/packages/frontend/i18n/trans/he_IL.json

@@ -598,6 +598,7 @@
   "frame_editors.frame_tree.title_bar.close": "סגור מסגרת זו",
   "frame_editors.frame_tree.title_bar.maximize": "הצג רק את המסגרת הזו",
   "frame_editors.frame_tree.title_bar.minimize": "הצג את כל המסגרות",
+  "frame_editors.frame_tree.title_bar.symbols.label.explanation": "אם תוויות מוצגות, סרגל הסמלים ממוקם בשורה משלו מתחת לתפריט – אחרת הוא קטן יותר וליד התפריט.",
   "frame-editors.frame-tree.add_remove_icon_button_bar.tooltip": "{isOnButtonBar, select, true {לחץ על הסמל להסרה מסרגל הכלים} other {לחץ על הסמל להוספה לסרגל הכלים}}",
   "i18n.localization.lang.arabic": "ערבית",
   "i18n.localization.lang.chinese": "סינית",

src/packages/frontend/i18n/trans/hi_IN.json

@@ -598,6 +598,7 @@
   "frame_editors.frame_tree.title_bar.close": "इस फ्रेम को बंद करें",
   "frame_editors.frame_tree.title_bar.maximize": "केवल इस फ्रेम को दिखाएं",
   "frame_editors.frame_tree.title_bar.minimize": "सभी फ़्रेम दिखाएं",
+  "frame_editors.frame_tree.title_bar.symbols.label.explanation": "यदि लेबल दिखाए जाते हैं, तो प्रतीक पट्टी मेनू के नीचे अपनी पंक्ति में रखी जाती है – अन्यथा यह छोटी होती है और मेनू के पास होती है।",
   "frame-editors.frame-tree.add_remove_icon_button_bar.tooltip": "{isOnButtonBar, select, true {टूलबार से हटाने के लिए आइकन पर क्लिक करें} other {टूलबार में जोड़ने के लिए आइकन पर क्लिक करें}}",
   "i18n.localization.lang.arabic": "अरबी",
   "i18n.localization.lang.chinese": "चीनी",

src/packages/frontend/i18n/trans/hu_HU.json

@@ -598,6 +598,7 @@
   "frame_editors.frame_tree.title_bar.close": "Zárja be ezt a keretet",
   "frame_editors.frame_tree.title_bar.maximize": "Csak ezt a keretet mutassa",
   "frame_editors.frame_tree.title_bar.minimize": "Mutasd az összes képkockát",
+  "frame_editors.frame_tree.title_bar.symbols.label.explanation": "Ha címkék láthatók, a szimbólumsáv a menü alatt, saját sorában helyezkedik el – ellenkező esetben kisebb, és a menü mellett van.",
   "frame-editors.frame-tree.add_remove_icon_button_bar.tooltip": "{isOnButtonBar, select, true {Kattintson az ikonra az eszköztárról való eltávolításhoz} other {Kattintson az ikonra az eszköztárhoz adáshoz}}",
   "i18n.localization.lang.arabic": "Arab",
   "i18n.localization.lang.chinese": "Kínai",

src/packages/frontend/i18n/trans/it_IT.json

@@ -598,6 +598,7 @@
   "frame_editors.frame_tree.title_bar.close": "Chiudi questo frame",
   "frame_editors.frame_tree.title_bar.maximize": "Mostra solo questo frame",
   "frame_editors.frame_tree.title_bar.minimize": "Mostra tutti i frame",
+  "frame_editors.frame_tree.title_bar.symbols.label.explanation": "Se vengono mostrati i label, la barra dei simboli è posizionata in una propria riga sotto il menu – altrimenti è più piccola e accanto al menu.",
   "frame-editors.frame-tree.add_remove_icon_button_bar.tooltip": "{isOnButtonBar, select, true {Clicca l'icona per rimuovere dalla barra degli strumenti} other {Clicca l'icona per aggiungere alla barra degli strumenti}}",
   "i18n.localization.lang.arabic": "Arabo",
   "i18n.localization.lang.chinese": "Cinese",

src/packages/frontend/i18n/trans/ja_JP.json

@@ -598,6 +598,7 @@
   "frame_editors.frame_tree.title_bar.close": "このフレームを閉じる",
   "frame_editors.frame_tree.title_bar.maximize": "このフレームのみを表示",
   "frame_editors.frame_tree.title_bar.minimize": "すべてのフレームを表示",
+  "frame_editors.frame_tree.title_bar.symbols.label.explanation": "ラベルが表示されている場合、シンボルバーはメニューの下に独自の行に配置されます。表示されていない場合は、メニューの横に小さく表示されます。",
   "frame-editors.frame-tree.add_remove_icon_button_bar.tooltip": "{isOnButtonBar, select, true {アイコンをクリックしてツールバーから削除} other {アイコンをクリックしてツールバーに追加}}",
   "i18n.localization.lang.arabic": "アラビア語",
   "i18n.localization.lang.chinese": "中国語",