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.

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

BC-7032 - new topbar #3449

Open
wants to merge 27 commits into
base: main
Choose a base branch
from
Open

BC-7032 - new topbar #3449

wants to merge 27 commits into from

Conversation

odalys-dataport
Copy link
Contributor

@odalys-dataport odalys-dataport commented May 8, 2024

Description

To ensure a consistent layout and create the possibility for broader content width, we want to refactor the topbar to use Vuetify components.

Links to Tickets or other pull requests

https://ticketsystem.dbildungscloud.de/browse/BC-7032
hpi-schul-cloud/dof_app_deploy#872

Changes

Data Security

Deployment

New Repos, NPM packages or vendor scripts

Screenshots of UI changes

Approval for review

  • QA: In addition to review, the code has been manually tested (if manual testing is possible)
  • All points were discussed with the ticket creator, support-team or product owner. The code upholds all quality guidelines from the PR-template.
  • DEV: Every new component is implemented having accessibility in mind (e.g. aria-label, role property)

Notice: Please remove the WIP label if the PR is ready to review, otherwise nobody will review it.

@odalys-dataport odalys-dataport self-assigned this May 8, 2024
helpers/handlebars/middleware.js Outdated Show resolved Hide resolved
helpers/handlebars/middleware.js Outdated Show resolved Hide resolved
}
}

const toggleIcon = document.querySelector('#group-toggle-icon');
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As this is an id, is #group-toggle-icon really unique in the document? Or should we rather use a class?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

True, it's not. Good point, thank you!

static/styles/lib/sidebar.scss Outdated Show resolved Hide resolved
@@ -31,7 +31,7 @@
{{/if}}
<span class="link-name">{{../name}}</span>
</div>
<i class="mdi mdi-chevron-down" aria-hidden="true"></i>
<i id="group-toggle-icon" class="mdi mdi-chevron-down" aria-hidden="true"></i>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Doesn't look like this is a unique css id.

@@ -0,0 +1,60 @@
<nav id="top-navbar" class="topbar">
<button class="icon-btn sidebar-toggle" title="{{$t "lib.loggedin.label.sidebarMenu"}}" aria-label="{{$t "lib.loggedin.label.sidebarMenu"}}">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks like the toggle button keeps a blue focus border. Is that intended?
image

Copy link

sonarcloud bot commented May 27, 2024

Quality Gate Failed Quality Gate failed

Failed conditions
C Reliability Rating on New Code (required ≥ A)

See analysis details on SonarCloud

Catch issues before they fail your Quality Gate with our IDE extension SonarLint

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
2 participants