Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Development: Refactor course sidebar into its own component #10455

Open
wants to merge 16 commits into
base: develop
Choose a base branch
from
Open

Development: Refactor course sidebar into its own component #10455

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
7ec34a7
first refactoring step. sidebar almost works. resizing still broken
tobias-lippert Mar 8, 2025
3fc23aa
finish refactoring, tests are missing
tobias-lippert Mar 8, 2025
3f351de
write tests
tobias-lippert Mar 8, 2025
811f313
Merge branch 'develop' into chore/course-sidebar-standalone-component
tobias-lippert Mar 9, 2025
bf4026f
remove standalone flag
tobias-lippert Mar 9, 2025
214eb2b
use new angular mechanisms
tobias-lippert Mar 9, 2025
aa0c95c
Merge remote-tracking branch 'origin/chore/course-sidebar-standalone-…
tobias-lippert Mar 9, 2025
3adbde0
remove unused scss file
tobias-lippert Mar 9, 2025
00e73de
remove unused scss file
tobias-lippert Mar 9, 2025
e2ebc59
move more logic to sidebar
tobias-lippert Mar 9, 2025
24d8395
finish tests after refactoring
tobias-lippert Mar 9, 2025
5a17a72
Merge branch 'develop' into chore/course-sidebar-standalone-component
tobias-lippert Mar 9, 2025
a8b703d
revert logic move
tobias-lippert Mar 11, 2025
022b56d
revert logic move
tobias-lippert Mar 11, 2025
9f8d4b6
fix tests after revert
tobias-lippert Mar 11, 2025
365db49
Merge branch 'develop' into chore/course-sidebar-standalone-component
tobias-lippert Mar 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
195 changes: 16 additions & 179 deletions src/main/webapp/app/overview/course-overview.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,118 +18,23 @@
mode="side"
[hidden]="isExamStarted"
>
<div class="sidebar-container d-flex h-100 justify-content-between flex-column" [ngClass]="{ collapsed: isNavbarCollapsed }">
<div>
<!-- Course Icon + Title -->
<div id="container" class="d-flex p-3 align-items-center text-decoration-none" [title]="course?.title">
<div ngbDropdown container="body" class="d-flex">
@if (course) {
@if (courses?.length) {
<div ngbDropdownToggle class="pointer">
<ng-template *ngTemplateOutlet="courseImage; context: { $implicit: course.courseIcon, courseTitle: course.title }" />
</div>
} @else {
<ng-template *ngTemplateOutlet="courseImage; context: { $implicit: course.courseIcon, courseTitle: course.title }" />
}
}

<div ngbDropdownMenu class="dropdown-menu py-1 ms-n2">
@for (course of courses; track course) {
<button ngbDropdownItem (click)="switchCourse(course)" class="d-flex align-items-center py-1 px-2">
<ng-template *ngTemplateOutlet="courseImage; context: { $implicit: course.courseIcon, courseTitle: course.title }" />
<div class="h6 fw-normal mb-0 course-title text-wrap">{{ course?.title }}</div>
</button>
}
</div>
</div>
@if (!isNavbarCollapsed) {
<div id="test-course-title" class="course-title h6 mb-0 fw-bold text-body auto-collapse">{{ course?.title }}</div>
}
</div>
<!-- NavItems -->
<div>
<hr class="mt-0" />
<ul ngbDropdown #itemsDrop="ngbDropdown" container="body" placement="right" class="navbar-nav justify-content-end flex-grow-1 text-decoration-none">
@for (sidebarItem of sidebarItems; track sidebarItem) {
<li class="nav-item" [hidden]="sidebarItem.hidden">
@if (sidebarItem.hasInOrionProperty && sidebarItem.showInOrionWindow !== undefined) {
<ng-template *ngTemplateOutlet="navItemOrionFilter; context: { $implicit: sidebarItem, iconTextTemplate: navIconAndText }" />
} @else {
<ng-template *ngTemplateOutlet="navItem; context: { $implicit: sidebarItem, iconTextTemplate: navIconAndText }" />
}
</li>
}
<li ngbDropdownToggle class="nav-item">
<div [hidden]="!anyItemHidden" class="three-dots nav-link px-3">
<fa-icon [fixedWidth]="true" [icon]="faEllipsis" class="ms-2 me-3" />
<span
class="more"
[ngClass]="{ 'auto-collapse': !isNavbarCollapsed, 'sidebar-collapsed-course-overview': isNavbarCollapsed }"
[jhiTranslate]="'artemisApp.courseOverview.menu.more'"
></span>
</div>
</li>
<div ngbDropdownMenu class="dropdown-content" [ngClass]="{ fixedContentSize: hiddenItems.length >= 4 }">
@for (hiddenItem of hiddenItems; track hiddenItem) {
<li class="nav-item">
@if (hiddenItem.hasInOrionProperty && hiddenItem.showInOrionWindow !== undefined) {
<ng-template *ngTemplateOutlet="navItemOrionFilter; context: { $implicit: hiddenItem, iconTextTemplate: navIconAndTextHidden }" />
} @else {
<ng-template *ngTemplateOutlet="navItem; context: { $implicit: hiddenItem, iconTextTemplate: navIconAndTextHidden }" />
}
</li>
}
@if (courseActionItems?.length && anyItemHidden) {
@for (courseActionItem of courseActionItems; track courseActionItem) {
<li class="nav-item">
<a
class="nav-link nav-link-sidebar px-3 py-2"
[ngClass]="{ collapsed: isNavbarCollapsed }"
(click)="courseActionItemClick(courseActionItem)"
[title]="courseActionItem.title"
>
<ng-template *ngTemplateOutlet="navIconAndTextHidden; context: { $implicit: courseActionItem }" />
</a>
</li>
}
}
</div>
</ul>
</div>
</div>
<!-- Course Action Items -->
<div>
@if (courseActionItems?.length && !anyItemHidden) {
<div ngbDropdown placement="top" class="navbar-nav mb-2">
<li class="nav-item">
@for (courseActionItem of courseActionItems; track courseActionItem) {
<a
class="nav-link nav-link-sidebar px-3"
[ngClass]="{ collapsed: isNavbarCollapsed }"
(click)="courseActionItemClick(courseActionItem)"
[title]="courseActionItem.title"
>
<ng-template *ngTemplateOutlet="navIconAndText; context: { $implicit: courseActionItem }" />
</a>
}
</li>
</div>
}
<!-- Collapse Chevron -->
<div
class="double-arrow mb-2"
[ngClass]="{ 'menu-closed': isNavbarCollapsed }"
[ngbTooltip]="(isNavbarCollapsed ? 'Expand' : 'Collapse') + ' Menu (Ctrl + M)'"
(click)="toggleCollapseState()"
>
<div class="double-arrow-icon" [attr.aria-expanded]="!isNavbarCollapsed" aria-controls="collapseBasic">
<fa-icon class="me-negative fa-xs" [icon]="faChevronRight" />
<fa-icon class="fa-xs" [icon]="faChevronRight" />
</div>
</div>
</div>
</div>
<jhi-course-sidebar
[course]="course"
[courses]="courses"
[sidebarItems]="sidebarItems"
[courseActionItems]="courseActionItems"
[isNavbarCollapsed]="isNavbarCollapsed"
[isExamStarted]="isExamStarted"
[isProduction]="isProduction"
[isTestServer]="isTestServer"
[hasUnreadMessages]="hasUnreadMessages"
[communicationRouteLoaded]="communicationRouteLoaded"
(switchCourse)="switchCourse($event)"
(courseActionItemClick)="courseActionItemClick($event)"
(toggleCollapseState)="toggleCollapseState()"
/>
</mat-sidenav>

<mat-sidenav-content
[ngClass]="{
'exam-wrapper': isExamStarted,
Expand Down Expand Up @@ -224,71 +129,3 @@
<fa-icon size="lg" [icon]="faCircleNotch" animation="spin" />
</div>
</ng-template>

<ng-template #courseImage let-courseImage let-courseTitle="courseTitle">
@if (courseImage) {
<div class="d-flex align-items-center justify-content-center">
<jhi-secured-image [src]="courseImage" />
</div>
} @else {
<div class="course-circle d-flex align-items-center justify-content-center">
<span class="fs-4">{{ courseTitle | slice: 0 : 1 }}</span>
</div>
}
</ng-template>

<ng-template #navIconAndText let-sidebarItem>
@if (sidebarItem.icon) {
<fa-icon [fixedWidth]="true" [icon]="sidebarItem.icon" class="ms-2 me-3" />
}
@if (!isNavbarCollapsed) {
<span class="auto-collapse" [jhiTranslate]="sidebarItem.translation"></span>
}
</ng-template>

<ng-template #navIconAndTextHidden let-sidebarItem>
@if (sidebarItem.icon) {
<fa-icon [fixedWidth]="true" [icon]="sidebarItem.icon" class="ms-2 me-3" />
<span [jhiTranslate]="sidebarItem.translation"></span>
}
</ng-template>

<ng-template #navItemOrionFilter let-sidebarItem let-iconTextTemplate="iconTextTemplate">
<a
class="nav-link nav-link-sidebar px-3 py-2"
[id]="sidebarItem.testId ?? ''"
[ngClass]="{
'guided-tour': sidebarItem.guidedTour,
newMessage: hasUnreadMessages && sidebarItem.title === 'Communication',
collapsed: isNavbarCollapsed,
}"
jhiOrionFilter
[showInOrionWindow]="sidebarItem.showInOrionWindow"
[routerLink]="sidebarItem.routerLink"
routerLinkActive="active"
[jhiFeatureToggleHide]="sidebarItem.featureToggle"
[title]="sidebarItem.title"
(click)="itemsDrop?.close()"
>
<ng-template *ngTemplateOutlet="iconTextTemplate; context: { $implicit: sidebarItem }" />
</a>
</ng-template>

<ng-template #navItem let-sidebarItem let-iconTextTemplate="iconTextTemplate">
<a
class="nav-link nav-link-sidebar px-3 py-2"
[id]="sidebarItem.testId ?? ''"
[ngClass]="{
'guided-tour': sidebarItem.guidedTour,
newMessage: !communicationRouteLoaded && hasUnreadMessages && sidebarItem.title === 'Communication',
collapsed: isNavbarCollapsed,
}"
[routerLink]="sidebarItem.routerLink"
routerLinkActive="active"
[jhiFeatureToggleHide]="sidebarItem.featureToggle"
[title]="sidebarItem.title"
(click)="itemsDrop?.close()"
>
<ng-template *ngTemplateOutlet="iconTextTemplate; context: { $implicit: sidebarItem }" />
</a>
</ng-template>
152 changes: 2 additions & 150 deletions src/main/webapp/app/overview/course-overview.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,6 @@ $transition-chevron-rotate-length: 0.2s;
$transition-chevron-max-width-length: 0.2s;
$transition-color-length: 0.2s;

.sidebar-container {
width: $menu-width-open;
&.collapsed {
width: $menu-width-closed !important;
}
}

// ng-deep needed to remove scrollbar from mat-sidebar
::ng-deep .mat-drawer-inner-container {
overflow: hidden !important;
Expand Down Expand Up @@ -127,18 +120,6 @@ a:not(.btn):not(.tab-link):hover {
text-decoration: none !important;
}

.nav-link {
white-space: nowrap;
color: var(--bs-body-color);
}

.nav-link-sidebar:hover,
.nav-link-sidebar.active {
width: 100%;
background-color: var(--link-item-bg);
color: var(--link-item-color);
}

.refresh-overlay {
position: absolute;
top: 0;
Expand Down Expand Up @@ -168,102 +149,10 @@ a:not(.btn):not(.tab-link):hover {
}
}

// Displays a red circle at the top right corner of the tab item.
// Used to indicate that there are new messages.
%message-block {
position: relative;
content: '';
border-radius: 50%;
background-color: var(--bs-danger);
padding-left: 0.7rem;
top: -5px;
right: 0;
transform: translate(50%, -50%);
font-size: xx-small;
}

.newMessage:after,
.dropdown-content > .nav-item > .newMessage:after {
@extend %message-block;
margin-left: 0.25rem;
}

.collapsed.newMessage:after {
@extend %message-block;
margin-left: -0.9rem;
}

jhi-secured-image {
::ng-deep img {
border-radius: 50%;
height: 36px;
width: auto;
}
}

.double-arrow.menu-closed {
transform: translate(16px);
}

.double-arrow {
transform: translate(180px);
transition: transform ease 0.3s;
cursor: pointer;
width: 30px;
align-items: center;
justify-content: center;
display: flex;
}

.menu-closed .double-arrow-icon {
transform: rotate(0deg);
}

.double-arrow-icon {
transform: rotate(180deg);

transition: transform ease 0.3s 0.3s;
}

.me-negative {
margin-right: -5px;
}

.module-bg {
background-color: var(--module-bg);
}

.course-circle {
height: 36px;
min-width: 36px;
background-color: var(--course-image-bg);
border-radius: 50%;
display: inline-block;
color: var(--bs-body-color);
}

.course-title {
margin-left: 0.75rem;
}

.max-width-collapsed {
max-width: 44px !important;
min-width: 44px !important;
}

@media screen and (max-width: 960px) {
.sidebar-container {
width: $menu-width-closed !important;
}
.auto-collapse {
display: none;
}
.newMessage:after {
@extend %message-block;
margin-left: -0.9rem;
}
}

.btn-sidebar-collapse {
position: relative;
overflow: hidden;
Expand Down Expand Up @@ -348,46 +237,9 @@ jhi-secured-image {
transition: transform $transition-chevron-rotate-length $transition-delay ease-in-out;
}

.three-dots {
cursor: pointer;
&:hover {
color: var(--link-item-color);
}
}

.dropdown-li {
display: block;
text-decoration: none;
}

.dropdown-content {
overflow-y: auto;
position: absolute;
background-color: var(--dropdown-bg);
border: 1px solid var(--border-color);
z-index: 3000;
border-radius: 4px;
&.fixedContentSize {
max-height: 171px; // To avoid cut offs in the dropdown menu content (4 items)
}
}

.dropdown-menu {
min-width: 204px;
max-width: 294px;
}

.dropdown-courses.active {
display: block;
}

.dropdown-toggle::after {
display: none;
}

@media print {
mat-sidenav {
display: none; /* Hide the sidebar */
.mat-drawer {
display: none !important; /* Hide the sidebar */
}

.mat-drawer-container,
Expand Down
Loading
Loading