Skip to content

Commit

Permalink
a lil rearrange at the components geneontology/noctua-annotation-revi…
Browse files Browse the repository at this point in the history 
…ew#30
  • Loading branch information
@tmushayahama
tmushayahama committed Dec 8, 2020
1 parent 8078ee4 commit 08090b4
Show file tree
Hide file tree
Showing 3 changed files with 48 additions and 46 deletions.
6 changes: 3 additions & 3 deletions src/@noctua.search/components/art-basket/art-basket.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,11 @@ $accent: map-get($theme, accent);


.noc-drawer {
@include deep-width(450px);
@include deep-width(380px);

.noc-drawer-header {
padding: 0;
@include deep-height(240px);
@include deep-height(280px);
background-color: #FFF;
@include mat-elevation(2);
z-index: 1000;
Expand All @@ -37,7 +37,7 @@ $accent: map-get($theme, accent);

.noc-drawer-body {
padding: 24px 8 100px 0;
min-height: calc(100% - 290px);
min-height: calc(100% - 330px);
}
}

Expand Down
75 changes: 39 additions & 36 deletions src/@noctua.search/components/review-form/review-form.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,9 @@
</mat-radio-button>
</mat-radio-group>
</div> -->
<div class="noc-annoton-group-row mb-4 w-100-p" fxLayout="row" fxLayoutAlign="start stretch">
<div class="noc-annoton-group-row mb-4 w-100-p" fxLayout="column" fxLayoutAlign="start stretch">
<mat-form-field *ngIf="selectedCategoryName === ArtReplaceCategory.term" appearance="outline"
class="noc-sm noc-review-input mr-8">
class="noc-sm noc-review-input">
<mat-label>Find What <strong>(Ontology Term)</strong></mat-label>
<textarea type="text" matInput formControlName="findWhat" [matAutocomplete]="termFindAuto" rows="2"></textarea>
<mat-autocomplete #termFindAuto="matAutocomplete" (optionSelected)="findSelected($event.option.value)"
Expand All @@ -46,41 +46,15 @@
<textarea type="text" matInput formControlName="findWhat" [matAutocomplete]="gpAuto" rows="2"></textarea>
</mat-form-field>
<mat-form-field *ngIf="selectedCategoryName === ArtReplaceCategory.reference" appearance="outline"
class="noc-sm mr-8 noc-review-input">
class="noc-sm noc-review-input">
<mat-label>Find What <strong>(Reference)</strong></mat-label>
<textarea type="text" matInput formControlName="findWhat"></textarea>
</mat-form-field>
<div class="noc-review-actions" fxLayout="row" fxLayoutAlign="start center" fxFlex="">
<div *ngIf="noctuaReviewSearchService.matchedCount===0" class="noc-matched-count">
No Results
</div>
<div *ngIf="noctuaReviewSearchService.matchedCount>0" class="noc-matched-count">
{{noctuaReviewSearchService.matchedCountCursor +1}} of {{noctuaReviewSearchService.matchedCount}}
</div>
<span fxFlex></span>
<div [ngClass]="{'noc-disabled':noctuaReviewSearchService.matchedCount===0}">
<button mat-icon-button (click)="goto('first')" class="noc-icon-button"
[ngClass]="{'noc-disabled': noctuaReviewSearchService.matchedCountCursor===0}" color="primary">
<fa-icon [icon]="['fas', 'angle-double-left']"></fa-icon>
</button>
<button mat-icon-button (click)="findPrevious()" class="noc-icon-button" color="primary">
<fa-icon [icon]="['fas', 'angle-left']"></fa-icon>
</button>
<button mat-icon-button (click)="findNext()" class="noc-icon-button noc-rotate-90" color="primary">
<fa-icon [icon]="['fas', 'angle-right']"></fa-icon>
</button>
<button mat-icon-button (click)="goto('last')" class="noc-icon-button"
[ngClass]="{'noc-disabled': noctuaReviewSearchService.matchedCountCursor===noctuaReviewSearchService.matchedCount-1}"
color="primary">
<fa-icon [icon]="['fas', 'angle-double-right']"></fa-icon>
</button>
</div>
</div>
</div>
<div [ngClass]="{'noc-disabled':!displayReplaceForm.replaceSection}" class="noc-annoton-group-row w-100-p"
fxLayout="row" fxLayoutAlign="start center">
fxLayout="column" fxLayoutAlign="start stretch">
<mat-form-field *ngIf="selectedCategoryName === ArtReplaceCategory.term" appearance="outline"
class="noc-sm mr-8 noc-review-input">
class="noc-sm noc-review-input">
<mat-label>Replace With <strong>(Ontology Term)</strong></mat-label>
<textarea type="text" matInput formControlName="replaceWith" [matAutocomplete]="termReplaceAuto"></textarea>
<mat-autocomplete #termReplaceAuto="matAutocomplete" [displayWith]="termDisplayFn"
Expand All @@ -100,21 +74,50 @@
</mat-autocomplete>
</mat-form-field>
<mat-form-field *ngIf="selectedCategoryName === ArtReplaceCategory.gp" appearance="outline"
class="noc-sm mr-8 noc-review-input">
class="noc-sm noc-review-input">
<mat-label>Replace With <strong>(Gene Product)</strong></mat-label>
<textarea type="text" matInput formControlName="replaceWith" [matAutocomplete]="gpAuto"></textarea>
</mat-form-field>
<mat-form-field *ngIf="selectedCategoryName === ArtReplaceCategory.reference" appearance="outline"
class="noc-sm mr-8 noc-review-input">
class="noc-sm noc-review-input">
<mat-label>Replace With <strong>(Reference)</strong></mat-label>
<textarea type="text" matInput formControlName="replaceWith"></textarea>
</mat-form-field>
</div>
<div class="noc-annoton-group-row mt-8 w-100-p" fxLayout="row" fxLayoutAlign="start center">
<div class="noc-review-actions" fxLayout="row" fxLayoutAlign="start center" fxFlex="">
<span fxFlex></span>
<div *ngIf="noctuaReviewSearchService.matchedCount===0" class="noc-matched-count">
No Results
</div>
<div *ngIf="noctuaReviewSearchService.matchedCount>0" class="noc-matched-count mr-8">
{{noctuaReviewSearchService.matchedCountCursor +1}} of {{noctuaReviewSearchService.matchedCount}}
</div>

<div [ngClass]="{'noc-disabled':noctuaReviewSearchService.matchedCount===0}" class="mr-8">
<button mat-icon-button (click)="goto('first')" class="noc-icon-button"
[ngClass]="{'noc-disabled': noctuaReviewSearchService.matchedCountCursor===0}" color="primary">
<fa-icon [icon]="['fas', 'angle-double-left']"></fa-icon>
</button>
<button mat-icon-button (click)="findPrevious()" class="noc-icon-button" color="primary">
<fa-icon [icon]="['fas', 'angle-left']"></fa-icon>
</button>
<button mat-icon-button (click)="findNext()" class="noc-icon-button noc-rotate-90" color="primary">
<fa-icon [icon]="['fas', 'angle-right']"></fa-icon>
</button>
<button mat-icon-button (click)="goto('last')" class="noc-icon-button"
[ngClass]="{'noc-disabled': noctuaReviewSearchService.matchedCountCursor===noctuaReviewSearchService.matchedCount-1}"
color="primary">
<fa-icon [icon]="['fas', 'angle-double-right']"></fa-icon>
</button>
</div>
</div>
<div [ngClass]="{'noc-disabled':!displayReplaceForm.replaceActions}" class="noc-review-actions" fxLayout="row"
fxLayoutAlign="space-between center">
<button (click)="replace()" mat-raised-button color="warn" class="noc-sm p-0 mr-4 noc-review-btn" fxFlex="50">
fxLayoutAlign="start center">
<button (click)="replace()" mat-raised-button color="warn" class="noc-sm mr-4 noc-review-btn">
Replace
</button>
<button (click)="replaceAll()" mat-raised-button color="warn" class="noc-sm p-0 noc-review-btn" fxFlex="50">
<button (click)="replaceAll()" mat-raised-button color="warn" class="noc-sm noc-review-btn">
Replace All
</button>
</div>
Expand Down
13 changes: 6 additions & 7 deletions src/@noctua.search/components/review-form/review-form.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,9 +26,7 @@ $primary: map-get($theme, primary);
@include deep-height(100%);
background-color: #FFF;

.noc-review-input {
@include deep-width(200px);
}

}

.noc-cams-results {
Expand Down Expand Up @@ -84,7 +82,6 @@ $primary: map-get($theme, primary);
}

.noc-review-actions {
@include deep-width(230px);

.noc-matched-count {

Expand All @@ -94,7 +91,7 @@ $primary: map-get($theme, primary);
align-items: center;
padding: 0 8px;
height: 100%;
font-size: 10
font-size: 12px;
}

.noc-icon-button {
Expand All @@ -108,8 +105,10 @@ $primary: map-get($theme, primary);
}

.noc-review-btn {
height: 35px;
width: 35px;
padding: 0 8px;
height: 30px;
line-height: 28px;
font-size: 12px;
}

.noc-disabled {}
Expand Down

0 comments on commit 08090b4

Please sign in to comment.