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
feat(projects): changes to nav bar (DEV-1101) #790
Merged
Merged
Changes from 10 commits
Commits
Show all changes
11 commits
Select commit
Hold shift + click to select a range
4d67477
feat(projects): changes to nav bar
mdelez 4ca6190
feat(projects): more changes to navbar
mdelez ffbcaea
Merge branch 'main' into wip/dev-1101-labels-cut-off
mdelez 7480607
feat(projects): even more changes to navbar
mdelez 61390f8
feat(project): only show tooltips if the text is cut off
mdelez 5cced8a
test(collaboartion): attempt to fix constantly "failing" test
mdelez 3105f6a
test(permission): attempt to fix constantly "failing" test
mdelez 14b162f
test(collaboration): attempt to fix constantly "failing" test
mdelez 603011a
remove fdescribe
mdelez 6515fac
feat(project): allow click on entire accordion header to open the acc…
mdelez 1b17e0b
feat(project, ontology-class-item): rename method
mdelez File filter
Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
40 changes: 24 additions & 16 deletions
40
src/app/project/beta/ontology-classes/ontology-class-item/ontology-class-item.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,16 +1,24 @@ | ||
<span class="link" [routerLink]="link"> | ||
<h2 matLine class="label mat-subheading-1">{{resClass.label}}</h2> | ||
<span matLine class="instances"> | ||
{{results | i18nPlural: itemPluralMapping['resource']}} | ||
</span> | ||
</span> | ||
|
||
<span class="overlay-buttons hover-only" *ngIf="projectMember"> | ||
<!-- with the following button, it should be possible to edit the resource class in a quick way; but maybe we don't need it | ||
<button mat-icon-button class="conf" [routerLink]="link + '/conf'"> | ||
<mat-icon>tune</mat-icon> | ||
</button> --> | ||
<button mat-icon-button class="add" [routerLink]="link + '/add'"> | ||
<mat-icon>add</mat-icon> | ||
</button> | ||
</span> | ||
<div class="class-item-container"> | ||
<div class="content" [routerLinkActive]="['is-active']"> | ||
<div class="top link" [routerLink]="link"> | ||
<div class="file-icon"> | ||
<div class="icon-wrapper"> | ||
<mat-icon>{{icon}}</mat-icon> | ||
</div> | ||
</div> | ||
<div class="info"> | ||
<p class="label" #classLabel matTooltip="{{resClass.label}}" matTooltipShowDelay="750" | ||
[matTooltipDisabled]="hideTooltip(classLabel)"> {{resClass.label}}</p> | ||
<p class="entries">{{results | i18nPlural: itemPluralMapping['entry']}}</p> | ||
</div> | ||
</div> | ||
<div class="bottom link" *ngIf="projectMember" [routerLink]="link + '/add'"> | ||
<div class="add-icon"> | ||
<mat-icon>add_circle_outline</mat-icon> | ||
</div> | ||
<div class="add-new"> | ||
<p class="add-new-label">Add a new resource</p> | ||
</div> | ||
</div> | ||
</div> | ||
</div> |
94 changes: 71 additions & 23 deletions
94
src/app/project/beta/ontology-classes/ontology-class-item/ontology-class-item.component.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,33 +1,81 @@ | ||
@import "../../../../../assets/style/config"; | ||
:host { | ||
|
||
.class-item-container { | ||
width: 100%; | ||
display: flex; | ||
justify-content: center; | ||
align-content: center; | ||
padding: 10px 0px; | ||
|
||
&:hover { | ||
.hover-only { | ||
display: block; | ||
.content { | ||
width: 90%; | ||
border-radius: 5px; | ||
box-shadow: 0px 1px 3px rgb(0 0 0 / 10%), 0px 1px 2px rgb(0 0 0 / 6%); | ||
border-bottom: 2px solid #F9FAFB; | ||
&.is-active{ | ||
border-bottom: 2px solid #1F2937; | ||
} | ||
} | ||
} | ||
|
||
.mat-line { | ||
width: 100%; | ||
.top { | ||
display: inline-flex; | ||
align-items: center; | ||
padding: 20px 0px; | ||
width: 100%; | ||
|
||
&.label { | ||
display: flex; | ||
flex-direction: row; | ||
.file-icon { | ||
|
||
} | ||
&.instances { | ||
color: $primary_500; | ||
} | ||
} | ||
.icon-wrapper { | ||
display: flex; | ||
justify-content: center; | ||
align-items: center; | ||
width: 48px; | ||
height: 48px; | ||
background: #1F2937; | ||
border-radius: 6px; | ||
margin: 0px 20px; | ||
|
||
.overlay-buttons { | ||
position: absolute; | ||
right: 0; | ||
bottom: 12px; | ||
} | ||
mat-icon { | ||
color: white; | ||
} | ||
} | ||
} | ||
|
||
.hover-only { | ||
display: none; | ||
.info { | ||
|
||
.label { | ||
display: -webkit-box; | ||
-webkit-line-clamp: 2; | ||
-webkit-box-orient: vertical; | ||
overflow: hidden; | ||
padding-right: 16px; | ||
color: #6B7280; | ||
margin: 0px; | ||
} | ||
|
||
.entries { | ||
color: #111827; | ||
font-size: 24px; | ||
margin: 0px; | ||
padding-top: 5px; | ||
} | ||
|
||
} | ||
} | ||
|
||
.bottom { | ||
display: flex; | ||
align-items: center; | ||
background: #F9FAFB; | ||
|
||
.add-icon { | ||
margin: 0px 10px; | ||
|
||
mat-icon { | ||
font-size: 32px; | ||
width: 32px; | ||
height: 32px; | ||
} | ||
} | ||
} | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
4 changes: 2 additions & 2 deletions
4
src/app/project/beta/ontology-classes/ontology-classes.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,5 +1,5 @@ | ||
<mat-list-item *ngFor="let class of classesToDisplay"> | ||
<div *ngFor="let class of classesToDisplay"> | ||
<app-ontology-class-item [resClass]="class" [projectMember]="projectMember"> | ||
|
||
</app-ontology-class-item> | ||
</mat-list-item> | ||
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I would rename the function because it does not directly do something about tool tip. It compares the height of the elements. So I would use something like "compareHeights" or "checkHeights" or "checkElementHeight" etc.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
good point! done in 1b17e0b