Skip to content

Commit 190a01b

Browse files
haraldschillyharaldschilly
committed
frontend/title-bar/symbols: context menu for toggling labels and style fixes after merging
1 parent 8698c4b commit 190a01b

File tree

17 files changed

+68
-10
lines changed

17 files changed

+68
-10
lines changed

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

Lines changed: 52 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@ FrameTitleBar - title bar in a frame, in the frame tree
99
*/
1010

1111
import { ButtonGroup } from "@cocalc/frontend/antd-bootstrap";
12-
import { Button, Input, InputNumber, Popover, Tooltip } from "antd";
12+
import { Button, Dropdown, Input, InputNumber, Popover, Tooltip } from "antd";
13+
import type { MenuProps } from "antd/lib";
1314
import { List } from "immutable";
1415
import { useMemo, useRef } from "react";
1516
import { useIntl } from "react-intl";
@@ -39,6 +40,7 @@ import { excludeFromComputeServer } from "@cocalc/frontend/file-associations";
3940
import { NotebookFrameActions } from "@cocalc/frontend/frame-editors/jupyter-editor/cell-notebook/actions";
4041
import { IntlMessage, isIntlMessage, labels } from "@cocalc/frontend/i18n";
4142
import { JupyterActions } from "@cocalc/frontend/jupyter/browser-actions";
43+
import { ACTIVITY_BAR_TOGGLE_LABELS } from "@cocalc/frontend/project/page/activity-bar-consts";
4244
import { AIGenerateDocumentModal } from "@cocalc/frontend/project/page/home-page/ai-generate-document";
4345
import { isSupportedExtension } from "@cocalc/frontend/project/page/home-page/ai-generate-examples";
4446
import { AvailableFeatures } from "@cocalc/frontend/project_configuration";
@@ -1068,10 +1070,8 @@ export function FrameTitleBar(props: FrameTitleBarProps) {
10681070
const style: CSS = {
10691071
color: "#333",
10701072
padding: showSymbolBarLabels ? "0" : "7.5px 0 0 0",
1071-
height: showSymbolBarLabels ? "36px" : "28px",
1072-
position: "relative",
1073-
top: showSymbolBarLabels ? "0" : "2px",
1074-
};
1073+
height: showSymbolBarLabels ? "36px" : undefined,
1074+
} as const;
10751075
if (children != null) {
10761076
return (
10771077
<DropdownMenu
@@ -1099,6 +1099,45 @@ export function FrameTitleBar(props: FrameTitleBarProps) {
10991099
}
11001100
}
11011101

1102+
function wrapButtonBarContextMenu(bar: React.JSX.Element) {
1103+
const showSymbolLabel = (
1104+
<>
1105+
<Tooltip
1106+
title={intl.formatMessage({
1107+
id: "frame_editors.frame_tree.title_bar.symbols.label.explanation",
1108+
defaultMessage:
1109+
"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.",
1110+
})}
1111+
>
1112+
<Icon name="signature-outlined" />{" "}
1113+
{intl.formatMessage(ACTIVITY_BAR_TOGGLE_LABELS, {
1114+
show: showSymbolBarLabels,
1115+
})}
1116+
</Tooltip>
1117+
</>
1118+
);
1119+
const items: MenuProps["items"] = [
1120+
{
1121+
key: "toggle-labels",
1122+
label: showSymbolLabel,
1123+
onClick: () => {
1124+
redux
1125+
.getActions("account")
1126+
.set_other_settings("show_symbol_bar_labels", !showSymbolBarLabels);
1127+
},
1128+
},
1129+
];
1130+
return (
1131+
<Dropdown
1132+
trigger={["contextMenu"]}
1133+
menu={{ items }}
1134+
overlayStyle={{ maxWidth: "400px" }}
1135+
>
1136+
{bar}
1137+
</Dropdown>
1138+
);
1139+
}
1140+
11021141
function renderButtonBar(popup = false) {
11031142
if (!is_active) {
11041143
return null;
@@ -1119,19 +1158,21 @@ export function FrameTitleBar(props: FrameTitleBarProps) {
11191158
}
11201159
// if labels are shown, we render two rows – otherwise symbols are next to the menu and frame controls
11211160
if (showSymbolBarLabels) {
1122-
return (
1161+
return wrapButtonBarContextMenu(
11231162
<div
11241163
style={{
11251164
borderBottom: popup ? undefined : "1px solid #ccc",
11261165
background: "#fafafa",
11271166
opacity: is_active ? undefined : 0.3,
11281167
}}
11291168
>
1130-
<div style={{ marginBottom: "-1px", marginTop: "-1px" }}>{v}</div>
1131-
</div>
1169+
<div style={{ marginBottom: "-1px", marginTop: "1px" }}>{v}</div>
1170+
</div>,
11321171
);
11331172
} else {
1134-
return <div style={{ marginTop: "5px" }}>{v}</div>;
1173+
return wrapButtonBarContextMenu(
1174+
<div style={{ marginTop: "3px" }}>{v}</div>,
1175+
);
11351176
}
11361177
}
11371178

@@ -1280,9 +1321,10 @@ export function FrameTitleBar(props: FrameTitleBarProps) {
12801321
{renderMainMenusAndButtons()}
12811322
{is_active && renderConnectionStatus()}
12821323
{is_active && allButtonsPopover()}
1283-
{renderButtonBar()}
1324+
{!showSymbolBarLabels ? renderButtonBar() : undefined}
12841325
{renderFrameControls()}
12851326
</div>
1327+
{showSymbolBarLabels ? renderButtonBar() : undefined}
12861328
{renderConfirmBar()}
12871329
{hasTour && props.is_visible && props.tab_is_visible && (
12881330
<TitleBarTour refs={tourRefs} />

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -598,6 +598,7 @@
598598
"frame_editors.frame_tree.title_bar.close": "أغلق هذا الإطار",
599599
"frame_editors.frame_tree.title_bar.maximize": "عرض هذا الإطار فقط",
600600
"frame_editors.frame_tree.title_bar.minimize": "عرض كافة الإطارات",
601+
"frame_editors.frame_tree.title_bar.symbols.label.explanation": "إذا تم عرض التسميات، يتم وضع شريط الرموز في صف خاص به تحت القائمة – وإلا فإنه يكون أصغر ويكون بجانب القائمة.",
601602
"frame-editors.frame-tree.add_remove_icon_button_bar.tooltip": "{isOnButtonBar, select, true {انقر على الأيقونة لإزالتها من شريط الأدوات} other {انقر على الأيقونة لإضافتها إلى شريط الأدوات}}",
602603
"i18n.localization.lang.arabic": "العربية",
603604
"i18n.localization.lang.chinese": "الصينية",

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -598,6 +598,7 @@
598598
"frame_editors.frame_tree.title_bar.close": "Schließe dieses Fenster",
599599
"frame_editors.frame_tree.title_bar.maximize": "Nur dieses Fenster anzeigen",
600600
"frame_editors.frame_tree.title_bar.minimize": "Alle Fenster anzeigen",
601+
"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ü.",
601602
"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}}",
602603
"i18n.localization.lang.arabic": "Arabisch",
603604
"i18n.localization.lang.chinese": "Chinesisch",

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -598,6 +598,7 @@
598598
"frame_editors.frame_tree.title_bar.close": "Cerrar este marco",
599599
"frame_editors.frame_tree.title_bar.maximize": "Mostrar solo este marco",
600600
"frame_editors.frame_tree.title_bar.minimize": "Mostrar todos los marcos",
601+
"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ú.",
601602
"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}}",
602603
"i18n.localization.lang.arabic": "Árabe",
603604
"i18n.localization.lang.chinese": "Chino",

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -598,6 +598,7 @@
598598
"frame_editors.frame_tree.title_bar.close": "Fermer ce cadre",
599599
"frame_editors.frame_tree.title_bar.maximize": "Afficher seulement ce cadre",
600600
"frame_editors.frame_tree.title_bar.minimize": "Afficher tous les cadres",
601+
"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.",
601602
"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}}",
602603
"i18n.localization.lang.arabic": "Arabe",
603604
"i18n.localization.lang.chinese": "Chinois",

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -598,6 +598,7 @@
598598
"frame_editors.frame_tree.title_bar.close": "סגור מסגרת זו",
599599
"frame_editors.frame_tree.title_bar.maximize": "הצג רק את המסגרת הזו",
600600
"frame_editors.frame_tree.title_bar.minimize": "הצג את כל המסגרות",
601+
"frame_editors.frame_tree.title_bar.symbols.label.explanation": "אם תוויות מוצגות, סרגל הסמלים ממוקם בשורה משלו מתחת לתפריט – אחרת הוא קטן יותר וליד התפריט.",
601602
"frame-editors.frame-tree.add_remove_icon_button_bar.tooltip": "{isOnButtonBar, select, true {לחץ על הסמל להסרה מסרגל הכלים} other {לחץ על הסמל להוספה לסרגל הכלים}}",
602603
"i18n.localization.lang.arabic": "ערבית",
603604
"i18n.localization.lang.chinese": "סינית",

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -598,6 +598,7 @@
598598
"frame_editors.frame_tree.title_bar.close": "इस फ्रेम को बंद करें",
599599
"frame_editors.frame_tree.title_bar.maximize": "केवल इस फ्रेम को दिखाएं",
600600
"frame_editors.frame_tree.title_bar.minimize": "सभी फ़्रेम दिखाएं",
601+
"frame_editors.frame_tree.title_bar.symbols.label.explanation": "यदि लेबल दिखाए जाते हैं, तो प्रतीक पट्टी मेनू के नीचे अपनी पंक्ति में रखी जाती है – अन्यथा यह छोटी होती है और मेनू के पास होती है।",
601602
"frame-editors.frame-tree.add_remove_icon_button_bar.tooltip": "{isOnButtonBar, select, true {टूलबार से हटाने के लिए आइकन पर क्लिक करें} other {टूलबार में जोड़ने के लिए आइकन पर क्लिक करें}}",
602603
"i18n.localization.lang.arabic": "अरबी",
603604
"i18n.localization.lang.chinese": "चीनी",

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -598,6 +598,7 @@
598598
"frame_editors.frame_tree.title_bar.close": "Zárja be ezt a keretet",
599599
"frame_editors.frame_tree.title_bar.maximize": "Csak ezt a keretet mutassa",
600600
"frame_editors.frame_tree.title_bar.minimize": "Mutasd az összes képkockát",
601+
"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.",
601602
"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}}",
602603
"i18n.localization.lang.arabic": "Arab",
603604
"i18n.localization.lang.chinese": "Kínai",

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -598,6 +598,7 @@
598598
"frame_editors.frame_tree.title_bar.close": "Chiudi questo frame",
599599
"frame_editors.frame_tree.title_bar.maximize": "Mostra solo questo frame",
600600
"frame_editors.frame_tree.title_bar.minimize": "Mostra tutti i frame",
601+
"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.",
601602
"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}}",
602603
"i18n.localization.lang.arabic": "Arabo",
603604
"i18n.localization.lang.chinese": "Cinese",

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

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

0 commit comments

Comments
 (0)