frontend/frame-editor/symbols-bar: optionally show labels and slightly tweak margins/height

Author: haraldschilly

src/packages/frontend/account/other-settings.tsx

@@ -247,6 +247,21 @@ export function OtherSettings(props: Readonly<Props>): React.JSX.Element {
     );
   }
 
+  function render_show_symbol_bar_labels(): Rendered {
+    return (
+      <Checkbox
+        checked={!!props.other_settings.get("show_symbol_bar_labels")}
+        onChange={(e) => on_change("show_symbol_bar_labels", e.target.checked)}
+      >
+        <FormattedMessage
+          id="account.other-settings.symbol_bar_labels"
+          defaultMessage={`<strong>Show Symbol Bar Labels:</strong>
+            show labels in the frame editor symbol bar`}
+        />
+      </Checkbox>
+    );
+  }
+
   function render_default_file_sort(): Rendered {
     return (
       <LabeledRow
@@ -666,6 +681,7 @@ export function OtherSettings(props: Readonly<Props>): React.JSX.Element {
         {render_hide_project_popovers()}
         {render_hide_file_popovers()}
         {render_hide_button_tooltips()}
+        {render_show_symbol_bar_labels()}
         <Checkbox
           checked={!!props.other_settings.get("hide_navbar_balance")}
           onChange={(e) => on_change("hide_navbar_balance", e.target.checked)}

src/packages/frontend/account/store.ts

@@ -143,6 +143,10 @@ export class AccountStore extends Store<AccountState> {
     if (!tours) return false;
     return tours.includes(tour) || tours.includes("all");
   }
+
+  showSymbolBarLabels(): boolean {
+    return this.getIn(["other_settings", "show_symbol_bar_labels"], false);
+  }
 }
 
 // A user is anonymous if they have not provided a way to sign

src/packages/frontend/account/types.ts

@@ -59,6 +59,7 @@ export interface AccountState {
     no_email_new_messages?: boolean;
     use_balance_toward_subscriptions?: boolean;
     [VBAR_LABELS]?: boolean; // whether to show labels on the vertical action bar
+    show_symbol_bar_labels?: boolean; // whether to show labels on the menu buttons
   }>;
   stripe_customer?: TypedMap<{
     subscriptions: { data: Map<string, any> };

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

@@ -15,7 +15,7 @@ import { Icon, IconName, isIconName } from "@cocalc/frontend/components/icon";
 import { IS_MOBILE } from "@cocalc/frontend/feature";
 import { IntlMessage, isIntlMessage } from "@cocalc/frontend/i18n";
 import { cmp, filename_extension, trunc_middle } from "@cocalc/util/misc";
-// import { FrameTitleBarProps } from "../title-bar";
+import { COLORS } from "@cocalc/util/theme";
 import { EditorDescription } from "../types";
 import { COMMANDS } from "./commands";
 import { APPLICATION_MENU, SEARCH_COMMANDS } from "./const";
@@ -26,8 +26,6 @@ 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"
@@ -445,6 +443,11 @@ export class ManageCommands {
     });
   };
 
+  showSymbolBarLabels = (): boolean => {
+    const account = redux.getStore("account");
+    return account.showSymbolBarLabels();
+  };
+
   commandToMenuItem = ({
     name = "",
     key,
@@ -482,11 +485,11 @@ export class ManageCommands {
       label = (
         <>
           {icon ?? <Icon name="square" />}
-          {BUTTON_LABELS && (
+          {this.showSymbolBarLabels() && (
             <div
               style={{
                 fontSize: "11px",
-                color: "#666",
+                color: COLORS.GRAY_M,
                 marginTop: "-10px",
                 // special case: button='' explicitly means no label
                 width: cmd.button === "" ? undefined : "50px",

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

@@ -270,6 +270,10 @@ export function FrameTitleBar(props: FrameTitleBarProps) {
   const otherSettings = useRedux(["account", "other_settings"]);
   //  const hideButtonTooltips = otherSettings.get("hide_button_tooltips");
   const darkMode = otherSettings.get("dark_mode");
+  const showSymbolBarLabels = otherSettings.get(
+    "show_symbol_bar_labels",
+    false,
+  );
   const disableTourRefs = useRef<boolean>(false);
   const tourRefs = useRef<{ [name: string]: { current: any } }>({});
   const getTourRef = (name: string) => {
@@ -707,8 +711,8 @@ export function FrameTitleBar(props: FrameTitleBarProps) {
             label === APPLICATION_MENU
               ? manageCommands.applicationMenuTitle()
               : isIntlMessage(label)
-                ? intl.formatMessage(label)
-                : label
+              ? intl.formatMessage(label)
+              : label
           }
           items={v}
         />
@@ -1057,6 +1061,13 @@ export function FrameTitleBar(props: FrameTitleBarProps) {
       return null;
     }
     const { disabled, label, key, children, onClick } = item;
+    const style: CSS = {
+      color: "#333",
+      padding: showSymbolBarLabels ? "0" : "4px 0 0 0",
+      height: showSymbolBarLabels ? "36px" : "28px",
+      position: "relative",
+      top: showSymbolBarLabels ? "0" : "2px",
+    };
     if (children != null) {
       return (
         <DropdownMenu
@@ -1065,7 +1076,7 @@ export function FrameTitleBar(props: FrameTitleBarProps) {
           title={label}
           items={children}
           button={false}
-          style={{ color: "#333", padding: 0 }}
+          style={style}
         />
       );
     } else {
@@ -1076,7 +1087,7 @@ export function FrameTitleBar(props: FrameTitleBarProps) {
           key={key}
           disabled={disabled}
           onClick={onClick}
-          style={{ color: "#333", padding: 0 }}
+          style={style}
         >
           {label}
         </Button>
@@ -1107,7 +1118,7 @@ export function FrameTitleBar(props: FrameTitleBarProps) {
           opacity: is_active ? undefined : 0.3,
         }}
       >
-        <div style={{ marginBottom: "-2px", paddingTop:'4px' }}>{v}</div>
+        <div style={{ marginBottom: "-1px", marginTop: "-1px" }}>{v}</div>
       </div>
     );
   }

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

@@ -81,6 +81,7 @@
   "account.other-settings.mask_files": "<strong>إخفاء الملفات:</strong> تظليل الملفات في عارض الملفات التي ربما لا تريد فتحها",
   "account.other-settings.project_popovers": "<strong>إخفاء النوافذ المنبثقة لعلامات التبويب في المشروع:</strong> لا تعرض النوافذ المنبثقة فوق علامات تبويب المشروع",
   "account.other-settings.standby_timeout": "مهلة الانتظار",
+  "account.other-settings.symbol_bar_labels": "<strong>إظهار تسميات شريط الرموز:</strong> إظهار التسميات في شريط رموز محرر الإطار",
   "account.other-settings.theme": "السمة",
   "account.other-settings.theme.antd.animations": "<b>الرسوم المتحركة</b>: تحريك بعض العناصر بإيجاز، مثل الأزرار",
   "account.other-settings.theme.antd.color_scheme": "مخطط الألوان: استخدم ألوان العلامة التجارية بدلاً من الألوان الافتراضية",
@@ -93,7 +94,7 @@
   "account.other-settings.theme.dark_mode.grayscale": "درجات الرمادي",
   "account.other-settings.theme.dark_mode.sepia": "سيبيا",
   "account.other-settings.time_ago_absolute": "عرض <strong>الطوابع الزمنية كنقاط مطلقة في الوقت</strong> بدلاً من أن تكون نسبة إلى الوقت الحالي",
-  "account.other-settings.vbar.title": "الشريط العمودي للمشروع",
+  "account.other-settings.vbar.title": "شريط المشروع العمودي",
   "account.public-path.unpublish.title": "إلغاء نشر كل شيء",
   "account.public-paths.banner": "هذه نظرة عامة على ملفاتك العامة. <A>قم بزيارة هذه الصفحة لمزيد من التفاصيل...</A>",
   "account.public-paths.info": "الملفات التي تم نشرها في أي مشروع استخدمته بنشاط.",
@@ -1221,6 +1222,16 @@
   "project.no-internet-modal.message": "لحل هذه المشكلة، <A1>تحتاج إلى تطبيق</A1> <A2>ترخيص صالح</A2> يوفر ترقيات أو <A3>شراء ترخيص</A3>.",
   "project.no-internet-modal.title": "لا يوجد اتصال بالإنترنت",
   "project.open_file.what": "افتح الملف \"{path}\"",
+  "project.page.activity-bar-layout.title": "تخطيط شريط النشاط",
+  "project.page.activity-bar.explanation": "هذه الميزة تعدل وظيفة شريط الأزرار في الجانب الأيسر من المشروع. بشكل افتراضي، تعرض الأزرار صفحات كاملة وعلامات صغيرة للوحات المنبثقة. عند اختيار خيار \"الصفحات الكاملة\"، يتم عرض الأزرار فقط، وتفتح الصفحات الكاملة عند النقر. وعلى العكس، عند اختيار وضع \"اللوحات المنبثقة\"، تتوسع اللوحات المنبثقة فقط عند النقر. في كلتا الحالتين الأخيرتين، يمكن عرض نوع اللوحة البديل بالنقر مع الضغط على مفتاح Shift على الزر المقابل.",
+  "project.page.activity-bar.hide.tooltip": "إخفاء شريط النشاط",
+  "project.page.activity-bar.option.both": "الصفحات الكاملة ولوحات الانبثاق",
+  "project.page.activity-bar.option.flyout": "الأزرار تبدل اللوحات المنبثقة",
+  "project.page.activity-bar.option.full": "الأزرار تظهر الصفحات الكاملة",
+  "project.page.activity-bar.show.tooltip": "إظهار شريط النشاط",
+  "project.page.activity-bar.title": "شريط النشاط",
+  "project.page.activity-bar.toggle-labels": "{show, select, true {إخفاء التسميات} other {إظهار التسميات}}",
+  "project.page.activity-bar.toggle-labels.description": "عرض الوصف على أزرار شريط النشاط العمودي",
   "project.page.ai-generate-document.content.label": "قدم وصفًا مفصلًا لوثيقة {docName} التي تريد إنشاؤها:",
   "project.page.ai-generate-document.content.placeholder": "وصف المحتوى...",
   "project.page.ai-generate-document.create_document.what": "إنشاء مستند {docName} \"{path}\"",
@@ -1248,14 +1259,14 @@
   "project.page.flyouts.new.header_location": "الموقع:",
   "project.page.project-licenses.header": "الحصص و{upgrades}",
   "project.page.project-licenses.intro": "التراخيص والترقيات حسب الاستخدام تغير الحصص والميزات المتاحة للمشروع",
-  "project.page.vbar.explanation": "هذه الميزة تعدل وظيفة شريط الأزرار في الجانب الأيسر من المشروع. بشكل افتراضي، تعرض الأزرار صفحات كاملة وعلامات صغيرة للوحات المنبثقة. عند اختيار خيار \"الصفحات الكاملة\"، يتم عرض الأزرار فقط، وتفتح الصفحات الكاملة عند النقر. وعلى العكس، عند اختيار وضع \"اللوحات المنبثقة\"، تتوسع اللوحات المنبثقة فقط عند النقر. في كلتا الحالتين الأخيرتين، يمكن عرض نوع اللوحة البديل بالنقر مع الضغط على مفتاح Shift على الزر المقابل.",
-  "project.page.vbar.option.both": "الصفحات الكاملة ولوحات الانبثاق",
-  "project.page.vbar.option.flyout": "الأزرار تبدل اللوحات المنبثقة",
-  "project.page.vbar.option.full": "الأزرار تظهر الصفحات الكاملة",
+  "project.page.vbar.explanation": "تقوم هذه الميزة بتعديل وظيفة شريط الأزرار الجانبي الأيسر للمشروع. بشكل افتراضي، تعرض الأزرار للصفحات الكاملة وعلامات صغيرة للجانبية المنبثقة. عند اختيار خيار \"الصفحات الكاملة\"، يتم عرض الأزرار فقط، وتفتح صفحات كاملة عند النقر عليها. وعلى العكس، عند اختيار وضع \"الجانبية المنبثقة\"، فإن الجانبية المنبثقة فقط تتوسع عند النقر عليها. في كلا الحالتين الأخيرتين، يمكن عرض نوع اللوحة البديل عن طريق الضغط على مفتاح Shift والنقر على الزر المقابل.",
+  "project.page.vbar.option.both": "صفحات كاملة ولوحات منبثقة",
+  "project.page.vbar.option.flyout": "أزرار تبدل النوافذ المنبثقة",
+  "project.page.vbar.option.full": "الأزرار تعرض الصفحات الكاملة",
   "project.page.vertical-fixed-tabs.show-sidebar.tooltip": "عرض شريط الإجراءات",
-  "project.page.vertical-fixed-tabs.title": "تخطيط الشريط الرأسي",
-  "project.page.vertical-fixed-tabs.toggle-labels": "عرض التسميات",
-  "project.page.vertical-fixed-tabs.toggle-labels.description": "عرض الوصف على أزرار شريط الإجراءات العمودي",
+  "project.page.vertical-fixed-tabs.title": "تخطيط الشريط العمودي",
+  "project.page.vertical-fixed-tabs.toggle-labels": "{show, select, true {إخفاء التسميات} other {إظهار التسميات}}",
+  "project.page.vertical-fixed-tabs.toggle-labels.description": "اعرض الوصف على أزرار شريط الإجراءات العمودي",
   "project.page.vertical-fixed-tabs.toggle-sidebar.tooltip": "إخفاء شريط الإجراءات",
   "project.servers.project-servers.description": "يمكنك تشغيل خوادم دفتر ملاحظات مختلفة داخل هذا المشروع بنقرة واحدة. تعمل في نفس البيئة، وتصل إلى نفس الملفات، وتتوقف عندما يتوقف المشروع. يمكنك أيضًا <A>تشغيل خوادمك الخاصة</A>.",
   "project.settings.about-box.description.label": "الوصف (ماركداون)",

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

@@ -81,6 +81,7 @@
   "account.other-settings.mask_files": "<strong>Dateien maskieren:</strong> Dateien im Dateibetrachter ausgrauen, die Sie wahrscheinlich nicht öffnen möchten",
   "account.other-settings.project_popovers": "<strong>Projekt-Tab-Popovers ausblenden:</strong> die Popovers über den Projekt-Tabs nicht anzeigen",
   "account.other-settings.standby_timeout": "Standby-Timeout",
+  "account.other-settings.symbol_bar_labels": "<strong>Symbolleistensymbol-Beschriftungen anzeigen:</strong> Beschriftungen in der Symbolleiste des Rahmeneditors anzeigen",
   "account.other-settings.theme": "Thema",
   "account.other-settings.theme.antd.animations": "<b>Animationen</b>: einige Aspekte kurz animieren, z. B. Schaltflächen",
   "account.other-settings.theme.antd.color_scheme": "<b>Farbschema</b>: Verwenden Sie Markenfarben anstelle der Standardfarben",
@@ -1221,6 +1222,16 @@
   "project.no-internet-modal.message": "Um dies zu beheben, müssen Sie eine <A2>gültige Lizenz</A2> anwenden, die Upgrades bereitstellt oder eine <A3>Lizenz kaufen</A3>.",
   "project.no-internet-modal.title": "Kein Internetzugang",
   "project.open_file.what": "öffne die Datei \"{path}\"",
+  "project.page.activity-bar-layout.title": "Layout der Aktivitätsleiste",
+  "project.page.activity-bar.explanation": "Diese Funktion ändert die Funktionalität der linken Seitenleiste des Projekts. Standardmäßig werden Schaltflächen für ganze Seiten und kleine Caret-Zeichen für Flyout-Panels angezeigt. Bei Auswahl der Option \"ganze Seiten\" werden nur Schaltflächen angezeigt, die beim Klicken ganze Seiten öffnen. Umgekehrt, wenn die Option \"Flyout-Panels\" gewählt wird, erweitern sich nur Flyout-Panels beim Klicken. In beiden letzteren Fällen kann der alternative Paneltyp durch Shift-Klicken auf die entsprechende Schaltfläche angezeigt werden.",
+  "project.page.activity-bar.hide.tooltip": "Aktivitätsleiste ausblenden",
+  "project.page.activity-bar.option.both": "Vollständige Seiten und Ausklapp-Panels",
+  "project.page.activity-bar.option.flyout": "Schaltflächen wechseln Flyouts",
+  "project.page.activity-bar.option.full": "Schaltflächen zeigen ganze Seiten",
+  "project.page.activity-bar.show.tooltip": "Aktivitätsleiste anzeigen",
+  "project.page.activity-bar.title": "Aktivitätsleiste",
+  "project.page.activity-bar.toggle-labels": "{show, select, true {Beschriftungen ausblenden} other {Beschriftungen anzeigen}}",
+  "project.page.activity-bar.toggle-labels.description": "Beschreibung auf den Schaltflächen der vertikalen Aktivitätsleiste anzeigen",
   "project.page.ai-generate-document.content.label": "Geben Sie eine detaillierte Beschreibung des {docName}-Dokuments, das Sie erstellen möchten:",
   "project.page.ai-generate-document.content.placeholder": "Inhalt beschreiben...",
   "project.page.ai-generate-document.create_document.what": "erstelle das {docName} Dokument \"{path}\"",
@@ -1248,14 +1259,14 @@
   "project.page.flyouts.new.header_location": "Verzeichnis:",
   "project.page.project-licenses.header": "Quoten und {upgrades}",
   "project.page.project-licenses.intro": "Lizenzen und Pay-as-you-go-Upgrades ändern die Quoten und Funktionen, die einem Projekt zur Verfügung stehen.",
-  "project.page.vbar.explanation": "Diese Funktion ändert die Funktionalität der linken Seitenleiste des Projekts. Standardmäßig werden Schaltflächen für ganze Seiten und kleine Caret-Zeichen für Flyout-Panels angezeigt. Bei Auswahl der Option \"ganze Seiten\" werden nur Schaltflächen angezeigt, die beim Klicken ganze Seiten öffnen. Umgekehrt, wenn die Option \"Flyout-Panels\" gewählt wird, erweitern sich nur Flyout-Panels beim Klicken. In beiden letzteren Fällen kann der alternative Paneltyp durch Shift-Klicken auf die entsprechende Schaltfläche angezeigt werden.",
-  "project.page.vbar.option.both": "Vollständige Seiten und Ausklapp-Panels",
-  "project.page.vbar.option.flyout": "Schaltflächen wechseln Flyouts",
-  "project.page.vbar.option.full": "Schaltflächen zeigen ganze Seiten",
+  "project.page.vbar.explanation": "Diese Funktion ändert die Funktionalität der linken Schaltflächenleiste des Projekts. Standardmäßig zeigt sie Schaltflächen für vollständige Seiten und kleine Caret-Zeichen für Flyout-Panels an. Bei Auswahl der Option \"Vollständige Seiten\" werden nur Schaltflächen angezeigt, die beim Klicken vollständige Seiten öffnen. Im Gegensatz dazu erweitern sich im Modus \"Flyout-Panels\" nur Flyout-Panels beim Klicken. In beiden der letztgenannten Fälle kann der alternative Paneltyp durch Shift-Klicken auf die entsprechende Schaltfläche angezeigt werden.",
+  "project.page.vbar.option.both": "Vollseiten und Flyout-Panels",
+  "project.page.vbar.option.flyout": "Schaltflächen blenden Flyouts ein/aus",
+  "project.page.vbar.option.full": "Schaltflächen zeigen vollständige Seiten",
   "project.page.vertical-fixed-tabs.show-sidebar.tooltip": "Aktionsleiste anzeigen",
-  "project.page.vertical-fixed-tabs.title": "Layout des vertikalen Balken",
-  "project.page.vertical-fixed-tabs.toggle-labels": "Beschriftungen anzeigen",
-  "project.page.vertical-fixed-tabs.toggle-labels.description": "Zeige die Beschreibung auf den vertikalen Aktionsleisten-Buttons",
+  "project.page.vertical-fixed-tabs.title": "Layout der vertikalen Leiste",
+  "project.page.vertical-fixed-tabs.toggle-labels": "{show, select, true {Beschriftungen ausblenden} other {Beschriftungen anzeigen}}",
+  "project.page.vertical-fixed-tabs.toggle-labels.description": "Zeige die Beschreibung auf den vertikalen Aktionsleistenschaltflächen",
   "project.page.vertical-fixed-tabs.toggle-sidebar.tooltip": "Aktionsleiste ausblenden",
   "project.servers.project-servers.description": "Sie können verschiedene Notebook-Server in diesem Projekt mit einem Klick starten. Sie laufen in derselben Umgebung, haben Zugriff auf dieselben Dateien und stoppen, wenn das Projekt stoppt. Sie können auch <A>Ihren eigenen Server starten</A>.",
   "project.settings.about-box.description.label": "Beschreibung (Markdown)",