Merge pull request #8415 from sagemathinc/fix-show-labels-8397

frontend/action bar: show/hide labels menu fix and more padding

Author: williamstein

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

@@ -25,16 +25,17 @@ import AIAvatar from "@cocalc/frontend/components/ai-avatar";
 import { IS_MOBILE, IS_TOUCH } from "@cocalc/frontend/feature";
 import LLMSelector from "@cocalc/frontend/frame-editors/llm/llm-selector";
 import { LOCALIZATIONS, labels } from "@cocalc/frontend/i18n";
-import { getValidVBAROption } from "@cocalc/frontend/project/page/vbar";
+import { getValidActivityBarOption } from "@cocalc/frontend/project/page/activity-bar";
 import {
-  VBAR_EXPLANATION,
-  VBAR_KEY,
-  VBAR_LABELS,
-  VBAR_LABELS_DEFAULT,
-  VBAR_OPTIONS,
-  VBAR_TOGGLE_LABELS,
-  VBAR_TOGGLE_LABELS_DESCRIPTION,
-} from "@cocalc/frontend/project/page/vbar-consts";
+  ACTIVITY_BAR_EXPLANATION,
+  ACTIVITY_BAR_KEY,
+  ACTIVITY_BAR_LABELS,
+  ACTIVITY_BAR_LABELS_DEFAULT,
+  ACTIVITY_BAR_OPTIONS,
+  ACTIVITY_BAR_TITLE,
+  ACTIVITY_BAR_TOGGLE_LABELS,
+  ACTIVITY_BAR_TOGGLE_LABELS_DESCRIPTION,
+} from "@cocalc/frontend/project/page/activity-bar-consts";
 import { NewFilenameFamilies } from "@cocalc/frontend/project/utils";
 import track from "@cocalc/frontend/user-tracking";
 import { webapp_client } from "@cocalc/frontend/webapp-client";
@@ -498,48 +499,53 @@ export function OtherSettings(props: Readonly<Props>): React.JSX.Element {
   }
 
   function render_vertical_fixed_bar_options(): Rendered {
-    const selected = getValidVBAROption(props.other_settings.get(VBAR_KEY));
+    const selected = getValidActivityBarOption(
+      props.other_settings.get(ACTIVITY_BAR_KEY),
+    );
     const options = Object.fromEntries(
-      Object.entries(VBAR_OPTIONS).map(([k, v]) => [k, intl.formatMessage(v)]),
+      Object.entries(ACTIVITY_BAR_OPTIONS).map(([k, v]) => [
+        k,
+        intl.formatMessage(v),
+      ]),
     );
     return (
-      <LabeledRow
-        label={intl.formatMessage({
-          id: "account.other-settings.vbar.title",
-          defaultMessage: "Vertical Project Bar",
-        })}
-      >
+      <LabeledRow label={intl.formatMessage(ACTIVITY_BAR_TITLE)}>
         <div>
           <SelectorInput
             style={{ marginBottom: "10px" }}
             selected={selected}
             options={options}
             on_change={(value) => {
-              on_change(VBAR_KEY, value);
+              on_change(ACTIVITY_BAR_KEY, value);
               track("flyout", { aspect: "layout", how: "account", value });
             }}
           />
           <Paragraph
             type="secondary"
             ellipsis={{ expandable: true, symbol: "more" }}
           >
-            {intl.formatMessage(VBAR_EXPLANATION)}
+            {intl.formatMessage(ACTIVITY_BAR_EXPLANATION)}
           </Paragraph>
           <Checkbox
             checked={
-              props.other_settings.get(VBAR_LABELS) ?? VBAR_LABELS_DEFAULT
+              props.other_settings.get(ACTIVITY_BAR_LABELS) ??
+              ACTIVITY_BAR_LABELS_DEFAULT
             }
             onChange={(e) => {
-              on_change(VBAR_LABELS, e.target.checked);
+              on_change(ACTIVITY_BAR_LABELS, e.target.checked);
             }}
           >
             <Paragraph
               type="secondary"
               style={{ marginBottom: 0 }}
               ellipsis={{ expandable: true, symbol: "more" }}
             >
-              <Text strong>{intl.formatMessage(VBAR_TOGGLE_LABELS)}</Text>:{" "}
-              {intl.formatMessage(VBAR_TOGGLE_LABELS_DESCRIPTION)}
+              <Text strong>
+                {intl.formatMessage(ACTIVITY_BAR_TOGGLE_LABELS, {
+                  show: false,
+                })}
+              </Text>
+              : {intl.formatMessage(ACTIVITY_BAR_TOGGLE_LABELS_DESCRIPTION)}
             </Paragraph>
           </Checkbox>
         </div>

src/packages/frontend/account/types.ts

@@ -17,7 +17,7 @@ import { OTHER_SETTINGS_REPLY_ENGLISH_KEY } from "@cocalc/util/i18n/const";
 import { PassportStrategyFrontend } from "@cocalc/util/types/passport-types";
 import { SETTINGS_LANGUAGE_MODEL_KEY } from "./useLanguageModelSetting";
 import { type AutoBalance } from "@cocalc/util/db-schema/accounts";
-import { VBAR_LABELS } from "../project/page/vbar-consts";
+import { ACTIVITY_BAR_LABELS } from "../project/page/activity-bar-consts";
 
 // this is incomplete...
 
@@ -58,7 +58,7 @@ export interface AccountState {
     [OTHER_SETTINGS_REPLY_ENGLISH_KEY]?: string;
     no_email_new_messages?: boolean;
     use_balance_toward_subscriptions?: boolean;
-    [VBAR_LABELS]?: boolean; // whether to show labels on the vertical action bar
+    [ACTIVITY_BAR_LABELS]?: boolean; // whether to show labels on the vertical activity bar
   }>;
   stripe_customer?: TypedMap<{
     subscriptions: { data: Map<string, any> };

src/packages/frontend/app/context.tsx

@@ -10,17 +10,17 @@ import { useIntl } from "react-intl";
 
 import { useTypedRedux } from "@cocalc/frontend/app-framework";
 import { IntlMessage, isIntlMessage } from "@cocalc/frontend/i18n";
-import { VBAR_LABELS } from "@cocalc/frontend/project/page/vbar-consts";
+import { ACTIVITY_BAR_LABELS } from "@cocalc/frontend/project/page/activity-bar-consts";
 import { COLORS } from "@cocalc/util/theme";
 import { NARROW_THRESHOLD_PX, PageStyle } from "./top-nav-consts";
-import useAppContext, { AppContext, calcStyle } from "./use-context";
+import useAppContext, { AppContext, AppState, calcStyle } from "./use-context";
 
 export { AppContext, useAppContext };
 
-export function useAppContextProvider() {
+export function useAppContextProvider(): AppState {
   const intl = useIntl();
   const other_settings = useTypedRedux("account", "other_settings");
-  const showVbarLabels = other_settings.get(VBAR_LABELS) ?? true;
+  const showActBarLabels = other_settings.get(ACTIVITY_BAR_LABELS) ?? true;
 
   const [pageWidthPx, setPageWidthPx] = useState<number>(window.innerWidth);
 
@@ -62,7 +62,7 @@ export function useAppContextProvider() {
     formatIntl,
     pageWidthPx,
     pageStyle,
-    showVbarLabels,
+    showActBarLabels,
   };
 }
 

src/packages/frontend/app/use-context.ts

@@ -11,7 +11,7 @@ import { createContext, ReactNode, useContext } from "react";
 import type { IntlMessage } from "@cocalc/util/i18n/types";
 import { COLORS } from "@cocalc/util/theme";
 
-import { VBAR_LABELS_DEFAULT } from "@cocalc/frontend/project/page/vbar-consts";
+import { ACTIVITY_BAR_LABELS_DEFAULT } from "@cocalc/frontend/project/page/activity-bar-consts";
 import {
   FONT_SIZE_ICONS_NARROW,
   FONT_SIZE_ICONS_NORMAL,
@@ -28,14 +28,14 @@ export interface AppState {
   formatIntl: (msg: IntlMessage | ReactNode | string) => ReactNode | string;
   timeAgoAbsolute?: boolean;
   setTimeAgoAbsolute?: (boolean) => void;
-  showVbarLabels?: boolean; // whether to show labels on the vertical fixed bar
+  showActBarLabels?: boolean; // whether to show labels on the vertical fixed bar
 }
 
 export const DEFAULT_CONTEXT = {
   pageWidthPx: 1000, // gets updated
   pageStyle: calcStyle(false), // gets updated
   formatIntl: () => "Loading…",
-  showVbarLabels: VBAR_LABELS_DEFAULT,
+  showActBarLabels: ACTIVITY_BAR_LABELS_DEFAULT,
 };
 
 export const AppContext = createContext<AppState>(DEFAULT_CONTEXT);

src/packages/frontend/components/icon.tsx

@@ -180,6 +180,7 @@ import {
   ShareAltOutlined,
   ShoppingCartOutlined,
   ShrinkOutlined,
+  SignatureOutlined,
   SlidersOutlined,
   SmileOutlined,
   SolutionOutlined,
@@ -200,9 +201,9 @@ import {
   TagsFilled,
   TagsOutlined,
   TagsTwoTone,
-  ToTopOutlined,
   TeamOutlined,
   ThunderboltOutlined,
+  ToTopOutlined,
   ToolOutlined,
   TranslationOutlined,
   UnderlineOutlined,
@@ -594,6 +595,7 @@ const IconSpec = {
   underline: UnderlineOutlined,
   undo: UndoOutlined,
   ungroup: { IconFont: "ungroup" },
+  "signature-outlined": SignatureOutlined,
   swap: SwapOutlined,
   unlink: { IconFont: "unlink" },
   upload: UploadOutlined,

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

@@ -93,7 +93,6 @@
   "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.public-path.unpublish.title": "إلغاء نشر كل شيء",
   "account.public-paths.banner": "هذه نظرة عامة على ملفاتك العامة. <A>قم بزيارة هذه الصفحة لمزيد من التفاصيل...</A>",
   "account.public-paths.info": "الملفات التي تم نشرها في أي مشروع استخدمته بنشاط.",
@@ -1221,6 +1220,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,15 +1257,7 @@
   "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.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.toggle-sidebar.tooltip": "إخفاء شريط الإجراءات",
+  "project.page.vertical-fixed-tabs.toggle-labels": "{show, select, true {إخفاء التسميات} other {إظهار التسميات}}",
   "project.servers.project-servers.description": "يمكنك تشغيل خوادم دفتر ملاحظات مختلفة داخل هذا المشروع بنقرة واحدة. تعمل في نفس البيئة، وتصل إلى نفس الملفات، وتتوقف عندما يتوقف المشروع. يمكنك أيضًا <A>تشغيل خوادمك الخاصة</A>.",
   "project.settings.about-box.description.label": "الوصف (ماركداون)",
   "project.settings.about-box.image.label": "صورة (اختياري)",

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

@@ -93,7 +93,6 @@
   "account.other-settings.theme.dark_mode.grayscale": "Graustufen",
   "account.other-settings.theme.dark_mode.sepia": "Sepia",
   "account.other-settings.time_ago_absolute": "Zeige <strong>Zeitstempel als absolute Zeitpunkte</strong> anstatt relativ zur aktuellen Zeit",
-  "account.other-settings.vbar.title": "Vertikale Projektleiste",
   "account.public-path.unpublish.title": "Alles Depublizieren",
   "account.public-paths.banner": "Dies ist eine Übersicht Ihrer öffentlichen Dateien. <A>Besuchen Sie diese Seite für weitere Details...</A>",
   "account.public-paths.info": "Dateien, die in einem Projekt veröffentlicht wurden, das Sie aktiv genutzt haben.",
@@ -1221,6 +1220,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,15 +1257,7 @@
   "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.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.toggle-sidebar.tooltip": "Aktionsleiste ausblenden",
+  "project.page.vertical-fixed-tabs.toggle-labels": "{show, select, true {Beschriftungen ausblenden} other {Beschriftungen anzeigen}}",
   "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)",
   "project.settings.about-box.image.label": "Bild (optional)",