Skip to content

Commit baa25a6

Browse files
MeteordMeteord
authored
Merge pull request #542 from it-at-m/refact/move-tutorial-to-nav-bar
Move tutorial button to navbar
2 parents 6ea273c + 0061ccc commit baa25a6

File tree

7 files changed

+82
-34
lines changed

7 files changed

+82
-34
lines changed

‎mucgpt-frontend/src/components/TutorialsButton/TutorialsButton.tsx‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { Button, Tooltip } from "@fluentui/react-components";
2+
import { Book24Regular } from "@fluentui/react-icons";
3+
import { useTranslation } from "react-i18next";
4+
import { useNavigate } from "react-router-dom";
5+
6+
export const TutorialsButton = () => {
7+
const { t } = useTranslation();
8+
const navigate = useNavigate();
9+
10+
return (
11+
<Tooltip content={t("menu.go_to_tutorials_tooltip", "Tutorials und Anleitungen zu Fragments und Tools")} relationship="description" positioning="below">
12+
<Button
13+
appearance={"subtle"}
14+
icon={<Book24Regular />}
15+
aria-label={t("menu.go_to_tutorials_aria", "Zu Tutorials und Anleitungen navigieren")}
16+
onClick={() => navigate("/tutorials")}
17+
>
18+
{t("menu.go_to_tutorials", "Tutorials")}
19+
</Button>
20+
</Tooltip>
21+
);
22+
};
23+
24+
export default TutorialsButton;

‎mucgpt-frontend/src/components/TutorialsButton/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export { TutorialsButton } from "./TutorialsButton";
2+
export { default } from "./TutorialsButton";

‎mucgpt-frontend/src/i18n.ts‎

Lines changed: 20 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -22,9 +22,10 @@ i18n
2222
create_assistant: "Assistent erstellen"
2323
},
2424
menu: {
25-
go_to_tutorials_tooltip: "Tutorials und Anleitungen zu MUCGPT anzeigen",
26-
go_to_tutorials: "Lerne MUCGPT kennen",
27-
go_to_tutorials_aria: "Tutorials und Anleitungen zu MUCGPT",
25+
go_to_tutorials_tooltip: "Lerne, wie MUCGPT und Sprachmodelle im allgemeinen funktionieren",
26+
go_to_tutorials: "Über MUCGPT",
27+
go_to_tutorials_aria: "Zu Tutorials und Anleitungen navigieren",
28+
or: "oder",
2829
chat_header: "Hallo {{user}}, was hast du heute vor?",
2930
own_assistants: "Lokale Assistenten",
3031
community_assistants: "Community Assistenten",
@@ -463,9 +464,10 @@ i18n
463464
create_assistant: "Create assistant"
464465
},
465466
menu: {
466-
go_to_tutorials_tooltip: "Show tutorials and guides for MUCGPT",
467-
go_to_tutorials: "Get to know MUCGPT",
468-
go_to_tutorials_aria: "Tutorials and guides for MUCGPT",
467+
go_to_tutorials_tooltip: "Learn how MUCGPT and language models work in general",
468+
go_to_tutorials: "About MUCGPT",
469+
go_to_tutorials_aria: "Navigate to tutorials and guides",
470+
or: "or",
469471
chat_header: "Hello {{user}}, what are you planning today?",
470472
own_assistants: "Local Assistants", // Englisch
471473
community_assistants: "Community Assistants",
@@ -900,10 +902,10 @@ i18n
900902
create_assistant: "Assistenten erstoin"
901903
},
902904
menu: {
903-
go_to_tutorials_tooltip: "Zeig Tutorials und Anleitungen für MUCGPT",
904-
go_to_tutorials: "Lerne MUCGPT lernen",
905-
906-
go_to_tutorials_aria: "Tutorials und Anleitungen für MUCGPT",
905+
go_to_tutorials_tooltip: "Lern, wia MUCGPT und Sprachmodelle im Allgemeinen funktioniern",
906+
go_to_tutorials: "Über MUCGPT",
907+
go_to_tutorials_aria: "Zu Tutorials und Anleitunga navigiern",
908+
or: "oder",
907909
chat_header: "Griaß di {{user}}, wos host heid vor?",
908910
own_assistants: "Lokale Assitentn", // Bairisch
909911
community_assistants: "Community Assistentn",
@@ -1341,9 +1343,10 @@ i18n
13411343
nutzungsbedingungen: "Conditions d'utilisation"
13421344
},
13431345
menu: {
1344-
go_to_tutorials_tooltip: "Afficher les tutoriels et guides pour MUCGPT",
1345-
go_to_tutorials: "Découvrez MUCGPT",
1346-
go_to_tutorials_aria: "Tutoriels et guides pour MUCGPT",
1346+
go_to_tutorials_tooltip: "Découvrez comment MUCGPT et les modèles de langage fonctionnent en général",
1347+
go_to_tutorials: "À propos de MUCGPT",
1348+
go_to_tutorials_aria: "Naviguer vers les tutoriels et les guides",
1349+
or: "ou",
13471350
chat_header: "Bonjour {{user}}, qu'est-ce que vous prévoyez aujourd'hui ?",
13481351
own_assistants: "Assistants Locaux", // French
13491352
community_assistants: "Assistants Communautaires",
@@ -1782,9 +1785,10 @@ i18n
17821785
nutzungsbedingungen: "Умови використання"
17831786
},
17841787
menu: {
1785-
go_to_tutorials_tooltip: "Показати посібники та інструкції для MUCGPT",
1786-
go_to_tutorials: "Познайомтеся з MUCGPT",
1787-
go_to_tutorials_aria: "Посібники та інструкції для MUCGPT",
1788+
go_to_tutorials_tooltip: "Дізнайтеся, як працюють MUCGPT та мовні моделі загалом",
1789+
go_to_tutorials: "Про MUCGPT",
1790+
go_to_tutorials_aria: "Перейти до навчальних посібників та інструкцій",
1791+
or: "або",
17881792
chat_header: "Привіт {{user}}, що ти плануєш сьогодні?",
17891793
own_assistants: "Локальні Асистенти", // Ukrainisch
17901794
community_assistants: "Громадські Асистенти",

‎mucgpt-frontend/src/pages/layout/Layout.module.css‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,6 @@
4242
justify-content: center;
4343
align-self: center;
4444
justify-self: center;
45-
width: 60%;
4645
}
4746

4847
.headerNavPageLink {
@@ -297,7 +296,7 @@
297296

298297
.headerNavRightContainer {
299298
width: 100%;
300-
justify-content: center;
299+
justify-content: end;
301300
flex-wrap: wrap;
302301
}
303302

‎mucgpt-frontend/src/pages/layout/Layout.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ import { HelpButton } from "../../components/HelpButton";
2323
import { configApi } from "../../api/core-client";
2424
import { useGlobalToastContext } from "../../components/GlobalToastHandler/GlobalToastContext";
2525
import { Navigation24Regular, DismissRegular, Settings24Regular, ContactCard24Regular } from "@fluentui/react-icons";
26+
import TutorialsButton from "../../components/TutorialsButton";
2627

2728
const formatDate = (date: Date) => {
2829
const formatted_date = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
@@ -182,6 +183,9 @@ export const Layout = () => {
182183
</nav>
183184
<nav className={styles.headerNavList} aria-label={t("common.user_settings", "Benutzereinstellungen")}>
184185
<div className={styles.headerNavRightContainer}>
186+
<div className={styles.headerNavList}>
187+
<TutorialsButton />
188+
</div>
185189
<div className={styles.headerNavList}>
186190
<LanguageSelector defaultlang={language_pref} onSelectionChange={onLanguageSelectionChanged} />
187191
</div>
@@ -226,6 +230,9 @@ export const Layout = () => {
226230
<AccordionHeader icon={<ContactCard24Regular />}>{t("common.support", "Support & Hilfe")}</AccordionHeader>
227231
<AccordionPanel className={styles.accordionPanel}>
228232
<div className={styles.accordionContent}>
233+
<div className={styles.accordionItem}>
234+
<TutorialsButton />
235+
</div>
229236
<div className={styles.accordionItem}>
230237
<HelpButton url={import.meta.env.BASE_URL + "#/faq"} label={t("components.helpbutton.help")} />
231238
</div>

‎mucgpt-frontend/src/pages/menu/Menu.module.css‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -259,3 +259,25 @@
259259
white-space: nowrap;
260260
border: 0;
261261
}
262+
263+
/* Divider with "or" text */
264+
.divider {
265+
display: flex;
266+
align-items: center;
267+
width: 100%;
268+
max-width: 700px;
269+
margin: 30px auto;
270+
gap: 20px;
271+
}
272+
273+
.divider hr {
274+
flex: 1;
275+
border: none;
276+
border-top: 1px solid var(--colorBrandStroke2);
277+
margin: 0;
278+
}
279+
280+
.divider span {
281+
color: var(--colorNeutralForeground2);
282+
font-size: var(--fontSizeBase500);
283+
}

‎mucgpt-frontend/src/pages/menu/Menu.tsx‎

Lines changed: 6 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ import { UserContext } from "../layout/UserContextProvider";
1818
import { QuestionInput } from "../../components/QuestionInput/QuestionInput";
1919
import { getOwnedCommunityAssistants, getUserSubscriptionsApi } from "../../api/assistant-client";
2020
import { useGlobalToastContext } from "../../components/GlobalToastHandler/GlobalToastContext";
21-
import { Share24Regular, Chat24Regular, Book24Regular } from "@fluentui/react-icons";
21+
import { Share24Regular, Chat24Regular } from "@fluentui/react-icons";
2222
import { AssistantStats } from "../../components/AssistantStats/AssistantStats";
2323
import { getTools } from "../../api/core-client";
2424
import { ToolListResponse } from "../../api/models";
@@ -186,6 +186,11 @@ const Menu = () => {
186186
question={question}
187187
></QuestionInput>
188188
</div>
189+
<div className={styles.divider}>
190+
<hr />
191+
<span>{t("menu.or", "oder")}</span>
192+
<hr />
193+
</div>
189194
<nav className={styles.chatNavigationContainer} aria-label={t("menu.navigation_aria", "Chat Navigation")}>
190195
<Tooltip
191196
content={t("menu.go_to_chat_tooltip", "Direkt zur Chat-Seite navigieren ohne Frage eingeben zu müssen")}
@@ -202,21 +207,6 @@ const Menu = () => {
202207
<span>{t("menu.go_to_chat", "Direkt zum Chat")}</span>
203208
</Link>
204209
</Tooltip>
205-
<Tooltip
206-
content={t("menu.go_to_tutorials_tooltip", "Tutorials und Anleitungen zu Fragments und Tools")}
207-
relationship="description"
208-
positioning="below"
209-
>
210-
<Link
211-
to="/tutorials"
212-
className={styles.chatNavigationButton}
213-
aria-label={t("menu.go_to_tutorials_aria", "Zu Tutorials und Anleitungen navigieren")}
214-
role="button"
215-
>
216-
<Book24Regular aria-hidden />
217-
<span>{t("menu.go_to_tutorials", "Tutorials")}</span>
218-
</Link>
219-
</Tooltip>
220210
</nav>
221211
</section>
222212
<section className={styles.container} aria-labelledby="assistants-section">

0 commit comments

Comments
 (0)