General: Elevate toggle sidebar button

[PaRangger]

Checklist

General

• I tested all changes and their related features with all corresponding user types on a test server.
• This is a small issue that I tested locally and was confirmed by another developer on a test server.
• I chose a title conforming to the naming conventions for pull requests.

Client

• Important: I implemented the changes with a very good performance, prevented too many (unnecessary) REST calls and made sure the UI is responsive, even with large data (e.g. using paging).
• I strictly followed the client coding and design guidelines.
• Following the theming guidelines, I specified colors only in the theming variable files and checked that the changes look consistent in both the light and the dark theme.
• I added multiple screenshots/screencasts of my UI changes.

Motivation and Context

Currently when the sidebar is collapsed the users, especially new ones, might not easily find the button to show it again. This change should elevate the button more to make it more noticable.

Description

I changed the color of the button, as well as added a chevron to indicate the sidebar can be unhidden. Additionally to be more prominent I added a small animation.

Steps for Testing

Prerequisites:

• 1 Student/Tutor/Instructor
• 1 Course with a Lecture/Course or Communication enabled

1. Log in to Artemis
2. Navigate to the course
3. Locate the sidebar button and click it
4. If the sidebar is hidden the chevron point right. If the sidebar is shown the chevron should point left. In both cases the color should change.
5. Make sure that when navigating between exercises/lectures/communication that the button reacts properly to the sidebar being shown or not shown.

Testserver States

Note

These badges show the state of the test servers.
Green = Currently available, Red = Currently locked
Click on the badges to get to the test servers.

Review Progress

Screenshots

Summary by CodeRabbit

• New Features

  • Enhanced sidebar functionality with a toggle button that visually indicates its state.
  • Conditional display of the sidebar toggle button based on the course view.

• Improvements

  • Improved transition effects for the sidebar collapse button, enhancing user experience.
  • Updated tooltip for clearer instructions on toggling the sidebar.

• Visual Enhancements

  • Added new styles for smoother animations and visual feedback during sidebar interactions.

[coderabbitai]

Walkthrough

The changes in this pull request involve modifications to the course-overview.component.html, course-overview.component.scss, and course-overview.component.ts files. The HTML template has been updated to include new conditional classes and attributes for improved dynamic behavior of the sidebar and course title bar. The SCSS file introduces new transition variables for smoother animations on the sidebar collapse button. The TypeScript component has been enhanced with new properties and methods to manage the sidebar's collapsed state dynamically.

Changes

File Path	Change Summary
src/main/webapp/app/overview/course-overview.component.html	Added conditional classes and attributes for sidebar and course title bar; updated sidebar toggle button tooltip.
src/main/webapp/app/overview/course-overview.component.scss	Introduced new transition variables; modified styles for sidebar collapse button and chevron icon.
src/main/webapp/app/overview/course-overview.component.ts	Added isSidebarCollapsed property and faChevronLeft icon; updated methods to manage sidebar state.

Possibly related PRs

• General: Allow to switch courses from the course icon #8669: The changes in this PR involve modifications to the course-overview.component.html, which also includes dynamic content and conditional rendering similar to the enhancements made in the main PR regarding the sidebar and course title bar functionalities.

Suggested labels

user interface, priority:high

Suggested reviewers

• Jan-Thurner
• florian-glombik
• az108
• rabeatwork
• edkaya
• sarpsahinalp
• MarkusPaulsen

---

📜 Recent review details

Configuration used: .coderabbit.yaml
Review profile: ASSERTIVE

📥 Commits

Files that changed from the base of the PR and between ffcc6d1 and 11952da.

📒 Files selected for processing (2)

• src/main/webapp/app/overview/course-overview.component.html (1 hunks)
• src/main/webapp/app/overview/course-overview.component.scss (2 hunks)

🧰 Additional context used

📓 Path-based instructions (1)

src/main/webapp/app/overview/course-overview.component.html (1)

Pattern src/main/webapp/**/*.html: @if and @for are new and valid Angular syntax replacing *ngIf and *ngFor. They should always be used over the old style.

🔇 Additional comments (6)

src/main/webapp/app/overview/course-overview.component.scss (5)

5-10: New Transition Variables Defined Correctly

The addition of the sidebar button transition variables is well-implemented. The variables are consistently named and will enhance the maintainability and readability of the transition effects throughout the stylesheet.

---

252-256: Previous Review Comment Still Applicable

The past review comment on these lines is still valid and applicable to the current code segment.

---

264-266: Previous Review Comment Still Applicable

The past review comment on these lines is still valid and applicable to the current code segment.

---

268-305: Pseudo-Elements and Transitions Enhance Button Interactivity

The implementation of ::after and ::before pseudo-elements for the .btn-sidebar-collapse class effectively manages background color transitions. The use of transitions on background color and opacity improves the user experience by providing smooth visual feedback on hover and collapsed states.

---

306-321: Previous Review Comment Still Applicable

The past review comment on these lines is still valid and applicable to the current code segment.

src/main/webapp/app/overview/course-overview.component.html (1)

149-158: Sidebar toggle enhancements meet the PR objectives!

The changes to the sidebar toggle button effectively improve its visibility and functionality, aligning well with the usability goals outlined in the PR.

---

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai or @coderabbitai title anywhere in the PR title to generate the title automatically.

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[coderabbitai]

Actionable comments posted: 6

🧹 Outside diff range comments (1)

src/main/webapp/app/overview/course-overview.component.ts (1)

Line range hint 1-824: Overall, good improvements to sidebar management. Consider some minor refactoring.

The changes to manage the sidebar collapsed state are well-implemented and consistent throughout the component. They improve the user experience by ensuring the sidebar state is properly tracked and updated. The code adheres to Angular best practices and TypeScript conventions.

To further improve the code:

1. Implement the suggested updateSidebarCollapsedState method to reduce code duplication.
2. Consider renaming the faChevronLeft property to something more descriptive.
3. Ensure that the new isSidebarCollapsed property is used consistently in the template (not shown in this file).

📜 Review details

Configuration used: .coderabbit.yaml
Review profile: ASSERTIVE

📥 Commits

Files that changed from the base of the PR and between e5d9c6c and ffcc6d1.

📒 Files selected for processing (3)

• src/main/webapp/app/overview/course-overview.component.html (1 hunks)
• src/main/webapp/app/overview/course-overview.component.scss (3 hunks)
• src/main/webapp/app/overview/course-overview.component.ts (6 hunks)

🧰 Additional context used

📓 Path-based instructions (2)

src/main/webapp/app/overview/course-overview.component.html (1)

Pattern src/main/webapp/**/*.html: @if and @for are new and valid Angular syntax replacing *ngIf and *ngFor. They should always be used over the old style.

src/main/webapp/app/overview/course-overview.component.ts (1)

Pattern src/main/webapp/**/*.ts: angular_style:https://angular.io/guide/styleguide;methods_in_html:false;lazy_loading:true;code_reuse:true;tests:meaningful;types:PascalCase;enums:PascalCase;funcs:camelCase;props:camelCase;no_priv_prefix:true;strings:single_quotes;localize:true;btns:functionality;links:navigation;icons_text:newline;labels:associate;code_style:arrow_funcs,curly_braces,open_braces_same_line,indent_4;memory_leak_prevention:true;routes:naming_schema;chart_framework:ngx-charts;responsive_layout:true

🔇 Additional comments (4)

src/main/webapp/app/overview/course-overview.component.scss (3)

5-10: LGTM: Well-defined transition variables.

The addition of these transition variables is a good practice. They provide consistency and make it easier to adjust timings across the component. The names are descriptive and the durations seem appropriate for smooth transitions.

---

269-272: LGTM: Clear visual distinction for collapsed state.

The addition of the .btn-sidebar-collapse.is-collapsed class provides a clear visual distinction for the collapsed state of the sidebar button. This aligns well with the PR objectives of improving the button's visibility and usability. The use of CSS variables for colors is good for maintaining consistency across different themes.

---

Line range hint 5-289: Summary: Excellent improvements to sidebar toggle button.

The changes in this file effectively address the PR objectives of enhancing the visibility and usability of the sidebar toggle button. Key improvements include:

1. Well-defined transition variables for consistent animations.
2. Improved button layout and smooth transitions.
3. Clear visual distinction for the collapsed state.
4. Addition of a chevron icon with rotation animation for better user feedback.

These changes should significantly improve the user experience, especially for new users trying to locate the sidebar when it's collapsed. The use of CSS variables and transition variables promotes consistency across themes and ease of maintenance.

Great job on implementing these enhancements while maintaining code quality and adhering to best practices!

src/main/webapp/app/overview/course-overview.component.ts (1)

234-234: LGTM! Good use of the nullish coalescing operator.

The initialization of isSidebarCollapsed based on the activated component's state is a good approach. The use of the nullish coalescing operator ensures a default value of false if activatedComponentReference?.isCollapsed is null or undefined.

[rabeatwork]

I have one small improvement for the code and a general remark. The background color transition also affects the hover effect transition, causing the hover background color to appear with a delay.