diff --git a/src/app/components/shared/header/header.component.html b/src/app/components/shared/header/header.component.html index c72627dae7d5d85aa9cb766bcb3d2dc65d28a9ac..36be0756f437e89e319a1eacff3072594a9e1a26 100644 --- a/src/app/components/shared/header/header.component.html +++ b/src/app/components/shared/header/header.component.html @@ -17,42 +17,42 @@ </h2> - <ng-container *ngIf="room && room.questionsBlocked && !router.url.includes('/room-list/')"> + <ng-container *ngIf="room && room.closed && !router.url.includes('/room-list/')"> <mat-icon>block</mat-icon><h1>{{'header.questions-blocked'|translate}}</h1> </ng-container> - <ars-style-btn-material + <!--Topic Cloud--> + <div class="topic-cloud-btns" [ngClass]="{'noOfQuestions': deviceType === 'desktop'}" *ngIf="router.url.includes('tagcloud')" ars-flex-box> - <ars-col ars-btn-wrp + <ars-col [xp]="16" [extra]="true"> - <button ars-btn + <button mat-icon-button class="pseudo-button" matRipple matTooltip="{{'header.overview-question-tooltip' | translate}}"> - <i>comment</i> - <p style="margin-left: 0.25em;">{{commentsCountQuestions}}</p> + <mat-icon class="oldtypo-h2 comment_tag-icon">comment</mat-icon> + <span style="margin-left: 0.25em;">{{commentsCountQuestions}}</span> </button> - <button ars-btn + <button mat-icon-button class="pseudo-button" matRipple matTooltip="{{'header.overview-questioners-tooltip' | translate}}"> - <i>person</i> - <p style="margin-left: 0.25em;">{{commentsCountUsers}}</p> + <mat-icon class="oldtypo-h2 comment_tag-icon">person</mat-icon> + <span style="margin-left: 0.25em;">{{commentsCountUsers}}</span> </button> - - <button ars-btn + <button mat-icon-button class="pseudo-button" matRipple matTooltip="{{'header.overview-keywords-tooltip' | translate}}"> <mat-icon svgIcon="hashtag" class="oldtypo-h2 comment_tag-icon"></mat-icon> - <p style="margin-left: 0.25em;">{{commentsCountKeywords}}</p> + <span style="margin-left: 0.25em;">{{commentsCountKeywords}}</span> </button> </ars-col> - </ars-style-btn-material> + </div> <!--Feedback im Hörsaal--> <h2 class="oldtypo-h2" @@ -125,7 +125,7 @@ <ng-container *ngIf="router.url.endsWith('/comments')"> <button mat-menu-item - *ngIf="user && !router.url.endsWith('moderator/comments') && ((user.role > 0) || ((user.role == 0) && room && !room.questionsBlocked))" + *ngIf="user && !router.url.endsWith('moderator/comments') && ((user.role > 0) || ((user.role == 0) && room && !room.closed))" tabindex="0" (click)="navigateCreateQuestion();"> <mat-icon> @@ -163,16 +163,6 @@ <span>{{'header.tag-cloud' | translate}}</span> </button> - - <button mat-menu-item - tabindex="0" - (click)="startWorkerDialog()"> - <mat-icon>update - </mat-icon> - <span>{{'header.update-spacy-keywords' | translate}}</span> - </button> - - </ng-container> <ng-container *ngIf="router.url.includes('/participant/room/')"> </ng-container> @@ -364,7 +354,7 @@ <ng-container *ngIf="router.url.includes('/creator') || router.url.includes('/moderator')"> <button mat-menu-item (click)="blockQuestions()" - [ngClass]="{'color-warn': room && room.questionsBlocked}" + [ngClass]="{'color-warn': room && room.closed}" tabindex="0"> <mat-icon class="color-warn">block</mat-icon> <span>{{'header.block' | translate}}</span> diff --git a/src/app/components/shared/header/header.component.scss b/src/app/components/shared/header/header.component.scss index be81643b313af5a7b224d859a62e5ed864334d49..616d47238794e9ec610e9b7c3ccd752ebbe45acd 100644 --- a/src/app/components/shared/header/header.component.scss +++ b/src/app/components/shared/header/header.component.scss @@ -36,12 +36,17 @@ mat-toolbar-row { margin: 0 !important; } -ars-style-btn-material button { - &:hover, &:focus { - border: none; +.topic-cloud-btns { + > ars-col button { + margin-right: 0.75em; + + &:hover, &:focus { + border: none; + } } > * { + overflow: hidden !important; color: var(--on-surface); } } @@ -73,7 +78,7 @@ button:focus { } svg { - -webkit-filter: invert(100%); + -webkit-filter: invert(100%); /* safari 6.0 - 9.0 */ filter: invert(100%); } @@ -117,26 +122,7 @@ svg { * { background-color: transparent !important; } - *:hover { - color: var(--dialog); - background-color: var(--on-dialog) !important; - - mat-icon{ - color: var(--dialog); - background-color: var(--on-dialog) !important; - } - } } h1{ color: red; } -::ng-deep .mat-menu-item:hover .qrcode svg > path { - fill: var(--dialog); - color: var(--dialog); - background-color: var(--on-dialog) !important; - } - - ::ng-deep #cdk-overlay-0 .mat-menu-content > button:hover mat-icon{ - color: var(--dialog); - background-color: var(--on-dialog) !important; - } \ No newline at end of file