Skip to content

Commit 7906a41

Browse files
gregorydlogangregorydlogan
committed
Merge branch 'indicate-main-menu-area' of klaraloreen/opencast-admin-interface into develop
Pull request #1318 Added indicator for main menu
2 parents aabea32 + 2c76fdd commit 7906a41

5 files changed

Lines changed: 171 additions & 85 deletions

File tree

‎src/App.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,8 +39,6 @@ function App() {
3939
return (
4040
<HashRouter>
4141
<Routes>
42-
<Route path={"/"} element={<Events />} />
43-
4442
<Route path={"/events/events"} element={<Events />} />
4543

4644
<Route path={"/events/series"} element={<Series />} />

‎src/components/shared/MainNav.tsx‎

Lines changed: 131 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from "react";
22
import { useTranslation } from "react-i18next";
3-
import { Link, useNavigate } from "react-router";
3+
import { NavLink, useLocation, useNavigate } from "react-router";
44
import {
55
getOrgProperties,
66
getUserInformation,
@@ -52,6 +52,127 @@ const MainNav = ({
5252
[toggleMenu],
5353
);
5454

55+
// Find current view based on pathname of router
56+
const location = useLocation();
57+
let pathname = "";
58+
let firstPathFragment = "";
59+
if (location?.pathname.length > 0) {
60+
pathname = location.pathname;
61+
if (pathname.startsWith("/")) {
62+
firstPathFragment = pathname.substring(1, pathname.indexOf("/", 1));
63+
}
64+
}
65+
66+
interface linkMapItem {
67+
links: (React.ComponentProps<typeof MainNavLink> & {accessRole: string})[]
68+
}
69+
70+
const linkMap: { [key: string]: linkMapItem } = {
71+
"events": {
72+
links: [
73+
{
74+
path: "/events/events",
75+
accessRole: "ROLE_UI_EVENTS_VIEW",
76+
tooltipTitle: "NAV.EVENTS.TITLE",
77+
className: "events",
78+
},
79+
{
80+
path: "/events/series",
81+
accessRole: "ROLE_UI_SERIES_VIEW",
82+
tooltipTitle: "NAV.EVENTS.TITLE",
83+
className: "events",
84+
},
85+
],
86+
},
87+
"recordings": {
88+
links: [
89+
{
90+
path: "/recordings/recordings",
91+
accessRole: "ROLE_UI_LOCATIONS_VIEW",
92+
tooltipTitle: "NAV.CAPTUREAGENTS.TITLE",
93+
className: "recordings",
94+
},
95+
],
96+
},
97+
"systems": {
98+
links: [
99+
{
100+
path: "/systems/jobs",
101+
accessRole: "ROLE_UI_JOBS_VIEW",
102+
tooltipTitle: "NAV.SYSTEMS.TITLE",
103+
className: "systems",
104+
},
105+
{
106+
path: "/systems/servers",
107+
accessRole: "ROLE_UI_SERVERS_VIEW",
108+
tooltipTitle: "NAV.SYSTEMS.TITLE",
109+
className: "systems",
110+
},
111+
{
112+
path: "/systems/services",
113+
accessRole: "ROLE_UI_SERVICES_VIEW",
114+
tooltipTitle: "NAV.SYSTEMS.TITLE",
115+
className: "systems",
116+
},
117+
],
118+
},
119+
"users": {
120+
links: [
121+
{
122+
path: "/users/users",
123+
accessRole: "ROLE_UI_USERS_VIEW",
124+
tooltipTitle: "NAV.USERS.TITLE",
125+
className: "users",
126+
},
127+
{
128+
path: "/users/groups",
129+
accessRole: "ROLE_UI_GROUPS_VIEW",
130+
tooltipTitle: "NAV.USERS.TITLE",
131+
className: "users",
132+
},
133+
{
134+
path: "/users/acls",
135+
accessRole: "ROLE_UI_ACLS_VIEW",
136+
tooltipTitle: "NAV.USERS.TITLE",
137+
className: "users",
138+
},
139+
],
140+
},
141+
"configuration": {
142+
links: [
143+
{
144+
path: "/configuration/themes",
145+
accessRole: "ROLE_UI_THEMES_VIEW",
146+
tooltipTitle: "NAV.CONFIGURATION.TITLE",
147+
className: "configuration",
148+
},
149+
],
150+
},
151+
"statistics": {
152+
links: [
153+
{
154+
path: "/statistics/organization",
155+
accessRole: "ROLE_UI_STATISTICS_ORGANIZATION_VIEW",
156+
tooltipTitle: "NAV.STATISTICS.TITLE",
157+
className: "statistics",
158+
},
159+
],
160+
},
161+
};
162+
163+
// Link arrays containing more than one link must be sorted so that the
164+
// current view is always the first element. Otherwise, NavLink will not
165+
// recognize the current view as active.
166+
if (firstPathFragment.length > 0) {
167+
const arrToSort = linkMap[firstPathFragment as keyof typeof linkMap].links;
168+
if (arrToSort != undefined && arrToSort.length > 1) {
169+
arrToSort.forEach((item : any) => {
170+
if (item.path === pathname) { item.tmpIndex = 0 } else { item.tmpIndex = 1 }
171+
});
172+
arrToSort.sort((a: any, b: any) => a.tmpIndex - b.tmpIndex);
173+
}
174+
}
175+
55176
return (
56177
<div className="menu-top" >
57178
<ButtonLikeAnchor onClick={() => toggleMenu()}>
@@ -65,102 +186,30 @@ const MainNav = ({
65186
{/* todo: more than one href? how? roles? (see MainNav admin-ui-frontend)*/}
66187
<MainNavButton
67188
accessRole="ROLE_UI_NAV_RECORDINGS_VIEW"
68-
links={[
69-
{
70-
path: "/events/events",
71-
accessRole: "ROLE_UI_EVENTS_VIEW",
72-
tooltipTitle: "NAV.EVENTS.TITLE",
73-
className: "events",
74-
},
75-
{
76-
path: "/events/series",
77-
accessRole: "ROLE_UI_SERIES_VIEW",
78-
tooltipTitle: "NAV.EVENTS.TITLE",
79-
className: "events",
80-
},
81-
]}
189+
links={linkMap["events"].links}
82190
/>
83191
<MainNavButton
84192
accessRole="ROLE_UI_NAV_CAPTURE_VIEW"
85-
links={[
86-
{
87-
path: "/recordings/recordings",
88-
accessRole: "ROLE_UI_LOCATIONS_VIEW",
89-
tooltipTitle: "NAV.CAPTUREAGENTS.TITLE",
90-
className: "recordings",
91-
},
92-
]}
193+
links={linkMap["recordings"].links}
93194
/>
94195
<MainNavButton
95196
accessRole="ROLE_UI_NAV_SYSTEMS_VIEW"
96-
links={[
97-
{
98-
path: "/systems/jobs",
99-
accessRole: "ROLE_UI_JOBS_VIEW",
100-
tooltipTitle: "NAV.SYSTEMS.TITLE",
101-
className: "systems",
102-
},
103-
{
104-
path: "/systems/servers",
105-
accessRole: "ROLE_UI_SERVERS_VIEW",
106-
tooltipTitle: "NAV.SYSTEMS.TITLE",
107-
className: "systems",
108-
},
109-
{
110-
path: "/systems/services",
111-
accessRole: "ROLE_UI_SERVICES_VIEW",
112-
tooltipTitle: "NAV.SYSTEMS.TITLE",
113-
className: "systems",
114-
},
115-
]}
197+
links={linkMap["systems"].links}
116198
/>
117199
<MainNavButton
118200
accessRole="ROLE_UI_NAV_ORGANIZATION_VIEW"
119-
links={[
120-
{
121-
path: "/users/users",
122-
accessRole: "ROLE_UI_USERS_VIEW",
123-
tooltipTitle: "NAV.USERS.TITLE",
124-
className: "users",
125-
},
126-
{
127-
path: "/users/groups",
128-
accessRole: "ROLE_UI_GROUPS_VIEW",
129-
tooltipTitle: "NAV.USERS.TITLE",
130-
className: "users",
131-
},
132-
{
133-
path: "/users/acls",
134-
accessRole: "ROLE_UI_ACLS_VIEW",
135-
tooltipTitle: "NAV.USERS.TITLE",
136-
className: "users",
137-
},
138-
]}
201+
links={linkMap["users"].links}
139202
/>
140203
{themesEnabled &&
141204
<MainNavButton
142205
accessRole="ROLE_UI_NAV_CONFIGURATION_VIEW"
143-
links={[
144-
{
145-
path: "/configuration/themes",
146-
accessRole: "ROLE_UI_THEMES_VIEW",
147-
tooltipTitle: "NAV.CONFIGURATION.TITLE",
148-
className: "configuration",
149-
},
150-
]}
206+
links={linkMap["configuration"].links}
151207
/>
152208
}
153209
{statisticsEnabled &&
154210
<MainNavButton
155211
accessRole="ROLE_UI_NAV_STATISTICS_VIEW"
156-
links={[
157-
{
158-
path: "/statistics/organization",
159-
accessRole: "ROLE_UI_STATISTICS_ORGANIZATION_VIEW",
160-
tooltipTitle: "NAV.STATISTICS.TITLE",
161-
className: "statistics",
162-
},
163-
]}
212+
links={linkMap["statistics"].links}
164213
/>
165214
}
166215
</div>
@@ -203,11 +252,12 @@ const MainNavLink = ({
203252
const { t } = useTranslation();
204253

205254
return (
206-
<Link to={path}>
255+
<NavLink to={path}
256+
className={({ isActive }) => isActive ? "roll-up-menu-active" : ""}>
207257
<Tooltip title={t(tooltipTitle)} placement={"right"}>
208258
<i className={className} />
209259
</Tooltip>
210-
</Link>
260+
</NavLink>
211261
);
212262
};
213263

‎src/components/systems/partials/SystemsNavigation.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export const systemsLinks: {
1414
text: "SYSTEMS.NAVIGATION.JOBS",
1515
},
1616
{
17-
path: "/systems/SERVERS",
17+
path: "/systems/servers",
1818
accessRole: "ROLE_UI_SERVERS_VIEW",
1919
text: "SYSTEMS.NAVIGATION.SERVERS",
2020
},

‎src/styles/components/_menu.scss‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
@use "../base/fontawesome/fa-mixins";
22
@use "../base/fontawesome/variables" as variables2;
33
@use "../base/variables";
4+
@use "../mixins/triangle-point";
45

56
/**
67
* Licensed to The Apereo Foundation under one or more contributor license
@@ -114,3 +115,9 @@
114115
}
115116
}
116117
}
118+
119+
.roll-up-menu-active {
120+
$size: 8px;
121+
$position-from-left: 4.75px;
122+
@include triangle-point.triangle-point-side(left, $size, $size, $position-from-left, variables.$color-gray, 1px, variables.$modal-nav-border-color, -8px);
123+
}

‎src/styles/mixins/_triangle-point.scss‎

Lines changed: 32 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,9 +22,40 @@
2222
*
2323
*/
2424

25+
@mixin triangle-point-side($position, $width, $height, $position-from-left: 4.75px, $background-color: variables.$white, $border-stroke: 1px, $border-color: color.adjust(variables.$main-border-color, $lightness: -5%), $position-from-origin: 1) {
26+
27+
@if $position == left {
28+
&:before,
29+
&:after {
30+
content: "";
31+
position: absolute;
32+
left: -$position-from-left;
33+
width: 0;
34+
height: 0;
35+
border-style: solid;
36+
border-width: 0 $width $height $width;
37+
}
2538

26-
@mixin triangle-point($position, $width, $height, $position-from-right: 10px, $background-color: variables.$white, $border-stroke: 1px, $border-color: color.adjust(variables.$main-border-color, $lightness: -5%), $position-from-origin: 1) {
39+
&:after {
40+
rotate: 90deg;
41+
-webkit-transform: translateX(25px);
42+
transform: translateX(25px);
43+
border-color: transparent transparent $border-color transparent;
44+
}
45+
46+
&:before {
47+
rotate: 90deg;
48+
-webkit-transform: translateX(25px);
49+
transform: translateX(25px);
50+
border-color: transparent transparent $background-color transparent;
51+
z-index: variables.$z-100;
52+
}
53+
}
54+
}
2755

56+
57+
@mixin triangle-point($position, $width, $height, $position-from-right: 10px, $background-color: variables.$white, $border-stroke: 1px, $border-color: color.adjust(variables.$main-border-color, $lightness: -5%), $position-from-origin: 1) {
58+
2859
@if $position == top {
2960

3061
&:before,

0 commit comments

Comments
 (0)