From a8cc937f0a329ccf6c25bc71ce3e60ccf37bbedc Mon Sep 17 00:00:00 2001
From: Ruben Bimberg <ruben.bimberg@mni.thm.de>
Date: Wed, 27 Oct 2021 12:13:30 +0200
Subject: [PATCH] Change to material select when selecting tags
[Ticket: #711][Ticket: #719]
---
.../write-comment.component.html | 66 +++++++++----------
.../write-comment.component.scss | 29 ++------
2 files changed, 40 insertions(+), 55 deletions(-)
diff --git a/src/app/components/shared/write-comment/write-comment.component.html b/src/app/components/shared/write-comment/write-comment.component.html
index 1c326d818..4cfd140a2 100644
--- a/src/app/components/shared/write-comment/write-comment.component.html
+++ b/src/app/components/shared/write-comment/write-comment.component.html
@@ -1,44 +1,44 @@
<ars-row>
<ng-container [ngTemplateOutlet]="additionalTemplate"></ng-container>
<div class="lang-selection" *ngIf="enabled">
- <button class="lang-btn"
- mat-button
- (click)="select.open()"
- matTooltip="{{ 'spacy-dialog.lang-button-hint' | translate }}"
- matTooltipShowDelay="750">
- <mat-icon id="langSymbol">language</mat-icon>
- <span *ngIf="selectedLang !== 'auto'">
+
+ </div>
+ <button class="lang-btn"
+ mat-button
+ *ngIf="enabled"
+ (click)="select.open()"
+ matTooltip="{{ 'spacy-dialog.lang-button-hint' | translate }}"
+ matTooltipShowDelay="750">
+ <mat-icon class="btn-icon">language</mat-icon>
+ <span *ngIf="selectedLang !== 'auto'">
{{'spacy-dialog.' + (languagetoolService.mapLanguageToSpacyModel(selectedLang)) | translate}}
</span>
- <span *ngIf="selectedLang === 'auto'" #langSelect>
+ <span *ngIf="selectedLang === 'auto'" #langSelect>
{{'spacy-dialog.language' | translate}}
</span>
- <mat-select class="select-list" #select [(ngModel)]="selectedLang">
- <mat-option *ngFor="let lang of languages" [value]="lang">
- <span *ngIf="lang == 'de-DE'">{{ 'spacy-dialog.de' | translate }}</span>
- <span *ngIf="lang == 'en-US'">{{ 'spacy-dialog.en' | translate }}</span>
- <span *ngIf="lang == 'fr'">{{ 'spacy-dialog.fr' | translate }}</span>
- <span *ngIf="lang == 'auto'">{{ 'spacy-dialog.auto' | translate }}</span>
- </mat-option>
- </mat-select>
- </button>
- </div>
- <mat-form-field *ngIf="tags"
- class="tag-form-field">
- <mat-label>
- <mat-icon class="icon-svg"
- svgIcon="comment_tag"></mat-icon>
- {{'comment-page.tag' | translate}}
- </mat-label>
- <label for="tagSelect">{{selectedTag}}</label>
- <mat-select [(ngModel)]="selectedTag"
- class="tag-select"
- id="tagSelect">
- <mat-option>{{'comment-page.tag-reset' | translate}}</mat-option>
- <mat-option *ngFor="let tag of tags"
- value="{{tag}}">{{tag}}</mat-option>
+ <mat-select class="select-list" #select [(ngModel)]="selectedLang">
+ <mat-option *ngFor="let lang of languages" [value]="lang">
+ <span *ngIf="lang == 'de-DE'">{{ 'spacy-dialog.de' | translate }}</span>
+ <span *ngIf="lang == 'en-US'">{{ 'spacy-dialog.en' | translate }}</span>
+ <span *ngIf="lang == 'fr'">{{ 'spacy-dialog.fr' | translate }}</span>
+ <span *ngIf="lang == 'auto'">{{ 'spacy-dialog.auto' | translate }}</span>
+ </mat-option>
+ </mat-select>
+ </button>
+ <button class="tag-btn"
+ mat-button
+ *ngIf="enabled && tags && tags.length"
+ (click)="tagSelect.open()"
+ matTooltip="{{ 'spacy-dialog.lang-button-hint' | translate }}"
+ matTooltipShowDelay="750">
+ <mat-icon class="btn-icon" svgIcon="comment_tag"></mat-icon>
+ <label for="tagSelect" *ngIf="!selectedTag"><em>{{'comment-page.tag' | translate}}</em></label>
+ <label for="tagSelect" *ngIf="selectedTag">{{selectedTag}}</label>
+ <mat-select class="select-list" id="tagSelect" #tagSelect [(ngModel)]="selectedTag">
+ <mat-option [value]="null"><em>{{'comment-page.tag-reset' | translate}}</em></mat-option>
+ <mat-option *ngFor="let tag of tags" [value]="tag">{{tag}}</mat-option>
</mat-select>
- </mat-form-field>
+ </button>
</ars-row>
<ars-row [height]="12"></ars-row>
<app-view-comment-data *ngIf="enabled"
diff --git a/src/app/components/shared/write-comment/write-comment.component.scss b/src/app/components/shared/write-comment/write-comment.component.scss
index 60f26f6a7..b6430bf80 100644
--- a/src/app/components/shared/write-comment/write-comment.component.scss
+++ b/src/app/components/shared/write-comment/write-comment.component.scss
@@ -109,6 +109,10 @@ mat-hint {
margin-top: 8px;
}
+.btn-icon {
+ margin-right: 5px;
+}
+
/*
Styling for tag selection
*/
@@ -117,15 +121,8 @@ Styling for tag selection
display: inline;
}
-.tag-form-field {
- z-index: 10000;
+.tag-btn {
float: right;
-
- @media screen and (max-width: 480px) {
- float: unset;
- width: max-content;
- margin: 5px 16px;
- }
}
.anchor-wrp {
@@ -141,25 +138,13 @@ Styling for tag selection
Styling for language select
*/
-#langSymbol {
- margin-right: 5px;
-}
-
.select-list {
width: 18px;
margin-left: 12px;
}
-.lang-selection {
- vertical-align: middle;
- margin-right: 0;
- width: 200px;
- display: inline-block;
-
- > button {
- padding: 0;
- margin-left: 12px;
- }
+.lang-btn {
+ margin-left: 12px;
}
/*
--
GitLab