This is the codeAbility Sharing Platform! Learn more about the codeAbility Sharing Platform.

Skip to content
Snippets Groups Projects
Commit a522d89b authored by Michael Breu's avatar Michael Breu
Browse files

Verbesserung der Icons

parent 4610c2a8
1 merge request!195Resolve "Reviewing Badges: Zusätzliche Icons"
This commit is part of merge request !195. Comments created here will be created in the context of that merge request.
Hide whitespace changes
Inline Side-by-side
src/main/webapp/app/layouts/navbar/menuItemBadge.component.html
+ 1
− 0
View file @ a522d89b
<fa-icon [icon]="icon" class="pillIcon"></fa-icon>
<span *ngIf="text && text !== ''" class="badge badge-pill badge-{{ badgeStyle }}" attr.aria-label="{{ label }}" title="{{ label }}">{{
text
}}</span>
src/main/webapp/app/layouts/navbar/navbar.component.html
+ 10
− 20
View file @ a522d89b
......@@ -31,7 +31,7 @@
<li ngbDropdown id="language" class="nav-item dropdown pointer" display="dynamic" *ngIf="languages && languages.length > 1">
<a class="nav-link dropdown-toggle" ngbDropdownToggle href="javascript:void(0);" id="languagesnavBarDropdown">
<span>
<fa-icon icon="flag"></fa-icon>
<fa-icon icon="flag" class="navIcon"></fa-icon>
<span jhiTranslate="global.menu.language">Language</span>
</span>
</a>
......@@ -85,14 +85,18 @@
<ng-container *ngSwitchCase="true">
<li *ngIf="oerLink" class="nav-item">
<a href="{{ oerLink }}" class="nav-link" target="oerWindow">
<fa-icon style="margin-top: 5%" icon="edit"></fa-icon> <span jhiTranslate="global.menu.edit_exercise"></span>
<fa-icon style="margin-top: 5%" icon="edit" class="navIcon"></fa-icon> <span jhiTranslate="global.menu.edit_exercise"></span>
</a>
</li>
</ng-container>
<ng-container *ngSwitchCase="true">
<li>
<a routerLink="account/peer-reviewing" routerLinkActive="active" class="nav-link" (click)="collapseNavbar()">
<fa-icon icon="magnifying-glass" [fixedWidth]="true"></fa-icon>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
<path
d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"
/>
</svg>
<span>Peer Reviewing</span>
<jhi-reviewMenuBadge></jhi-reviewMenuBadge>
<jhi-reviewRequestedMenuBadge></jhi-reviewRequestedMenuBadge>
......@@ -115,7 +119,7 @@
>
<a class="nav-link dropdown-toggle" ngbDropdownToggle href="javascript:void(0);" id="entity-menu" data-cy="entity">
<span>
<fa-icon icon="th-list"></fa-icon>
<fa-icon icon="th-list" class="navIcon"></fa-icon>
<span jhiTranslate="global.menu.entities.main">Entities</span>
</span>
</a>
......@@ -232,7 +236,7 @@
>
<a class="nav-link dropdown-toggle" ngbDropdownToggle href="javascript:void(0);" id="admin-menu" data-cy="adminMenu">
<span>
<fa-icon icon="users-cog"></fa-icon>
<fa-icon icon="users-cog" class="navIcon"></fa-icon>
<span jhiTranslate="global.menu.admin.main">Administration</span>
</span>
</a>
......@@ -471,21 +475,7 @@
[routerLinkActiveOptions]="{ exact: true }"
>
<a class="nav-link dropdown-toggle" ngbDropdownToggle href="javascript:void(0);">
<svg
aria-hidden="true"
focusable="false"
data-prefix="far"
data-icon="question-circle"
class="svg-inline--fa fa-question-circle fa-w-16"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
>
<path
fill="currentColor"
d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 448c-110.532 0-200-89.431-200-200 0-110.495 89.472-200 200-200 110.491 0 200 89.471 200 200 0 110.53-89.431 200-200 200zm107.244-255.2c0 67.052-72.421 68.084-72.421 92.863V300c0 6.627-5.373 12-12 12h-45.647c-6.627 0-12-5.373-12-12v-8.659c0-35.745 27.1-50.034 47.579-61.516 17.561-9.845 28.324-16.541 28.324-29.579 0-17.246-21.999-28.693-39.784-28.693-23.189 0-33.894 10.977-48.942 29.969-4.057 5.12-11.46 6.071-16.666 2.124l-27.824-21.098c-5.107-3.872-6.251-11.066-2.644-16.363C184.846 131.491 214.94 112 261.794 112c49.071 0 101.45 38.304 101.45 88.8zM298 368c0 23.159-18.841 42-42 42s-42-18.841-42-42 18.841-42 42-42 42 18.841 42 42z"
></path>
</svg>
<fa-icon icon="question-circle" class="navIcon"></fa-icon>
<span jhiTranslate="global.menu.help">Help</span>
</a>
<ul class="dropdown-menu" ngbDropdownMenu aria-labelledby="help-menu" style="left: auto; right: 0">
......
src/main/webapp/app/layouts/navbar/navbar.component.ts
+ 27
− 5
View file @ a522d89b
......@@ -21,6 +21,7 @@ import { AuthServerProvider } from 'app/core/auth/auth-jwt.service';
import { UtilityService } from 'app/admin/util/utility.service';
import { ReviewManagementService } from 'app/admin/review-management/review-management.service';
import { ReviewStatisticsDTO } from 'app/admin/review-management/review.model';
import { IconName } from '@fortawesome/fontawesome-common-types';
@Component({
selector: 'jhi-navbar',
templateUrl: './navbar.component.html',
......@@ -200,12 +201,13 @@ export class NavbarComponent implements OnInit {
@Component({
selector: 'jhi-menuItemBadge',
templateUrl: './menuItemBadge.component.html',
styles: [''],
styles: ['jhi-menuItemBadge {margin-top: 30px;}'],
})
export class MenuItemBadgeComponent {
@Input() public text: string | number | undefined;
@Input() public badgeStyle: string | undefined = 'info';
@Input() public label: string | undefined;
@Input() public icon: IconName = 'first-order';
}
@Directive()
......@@ -227,12 +229,17 @@ abstract class ReviewBadgeComponent implements OnInit {
@Component({
selector: 'jhi-reviewMenuBadge',
template: `<jhi-menuItemBadge *ngIf="getCount()" [text]="getCount()" badgeStyle="info" [label]="getLabel()"> </jhi-menuItemBadge> `,
template: `<jhi-menuItemBadge *ngIf="getCount()" [text]="getCount()" icon="microscope" badgeStyle="info" [label]="getLabel()">
</jhi-menuItemBadge> `,
styles: [''],
})
export class ReviewMenuBadgeComponent extends ReviewBadgeComponent {
statistics: ReviewStatisticsDTO | undefined;
constructor(reviewManagementService: ReviewManagementService) {
super(reviewManagementService);
}
getCount(): number {
if (this.statistics) {
return this.statistics.reviewInProgress + this.statistics.reviewImproved;
......@@ -256,12 +263,17 @@ export class ReviewMenuBadgeComponent extends ReviewBadgeComponent {
@Component({
selector: 'jhi-reviewRequestedMenuBadge',
template: `<jhi-menuItemBadge *ngIf="getCount()" [text]="getCount()" badgeStyle="info" [label]="getLabel()"> </jhi-menuItemBadge> `,
template: `<jhi-menuItemBadge *ngIf="getCount()" [text]="getCount()" badgeStyle="info" icon="paper-plane" [label]="getLabel()">
</jhi-menuItemBadge> `,
styles: [''],
})
export class ReviewRequestedMenuBadgeComponent extends ReviewBadgeComponent {
statistics: ReviewStatisticsDTO | undefined;
constructor(reviewManagementService: ReviewManagementService) {
super(reviewManagementService);
}
getCount(): number {
if (this.statistics) {
return this.statistics.reviewsRequestedByUser;
......@@ -279,10 +291,15 @@ export class ReviewRequestedMenuBadgeComponent extends ReviewBadgeComponent {
@Component({
selector: 'jhi-reviewImprovementsRequestedMenuBadge',
template: `<jhi-menuItemBadge *ngIf="getCount()" [text]="getCount()" badgeStyle="danger" [label]="getLabel()"> </jhi-menuItemBadge> `,
template: `<jhi-menuItemBadge *ngIf="getCount()" [text]="getCount()" icon="rotate-left" badgeStyle="danger" [label]="getLabel()">
</jhi-menuItemBadge> `,
styles: [''],
})
export class ImprovementsRequestedMenuBadgeComponent extends ReviewBadgeComponent {
constructor(reviewManagementService: ReviewManagementService) {
super(reviewManagementService);
}
getCount(): number {
if (this.statistics) {
return this.statistics.reviewImprovementRequestedByUser;
......@@ -300,10 +317,15 @@ export class ImprovementsRequestedMenuBadgeComponent extends ReviewBadgeComponen
@Component({
selector: 'jhi-badgesRewardedMenuBadge',
template: `<jhi-menuItemBadge *ngIf="getCount()" [text]="getCount()" badgeStyle="success" [label]="getLabel()"> </jhi-menuItemBadge> `,
template: `<jhi-menuItemBadge *ngIf="getCount()" [text]="getCount()" icon="award" badgeStyle="success" [label]="getLabel()">
</jhi-menuItemBadge> `,
styles: [''],
})
export class BadgeAwardedMenuBadgeComponent extends ReviewBadgeComponent {
constructor(reviewManagementService: ReviewManagementService) {
super(reviewManagementService);
}
getCount(): number {
if (this.statistics) {
return this.statistics.badgesRewarded;
......
src/main/webapp/content/scss/navbar.scss
+ 9
− 0
View file @ a522d89b
......@@ -25,6 +25,15 @@ svg {
margin-right: 5px;
}
fa-icon.pillIcon svg {
vertical-align: middle;
margin-right: 0px;
}
fa-icon.navIcon svg {
vertical-align: middle;
}
.myBar {
height: 25px;
background-color: lightblue;
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment