hazza/dspace-angular
1
0
Fork 1
mirror of https://github.com/DSpace/dspace-angular.git synced 2025-10-07 01:54:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

101198: in place links replaced with buttons

Browse Source
This commit is contained in:
lotte
2023-04-19 15:50:00 +02:00
parent ca864379c8
commit 43d5bf372b
8 changed files with 152 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/community-list-page/community-list/community-list.component.html
View File

@@ -8,10 +8,10 @@
<span class="fa fa-chevron-right invisible" aria-hidden="true"></span> <span class="fa fa-chevron-right invisible" aria-hidden="true"></span>
</button> </button>
<div class="align-middle pt-2"> <div class="align-middle pt-2">
<a *ngIf="node!==loadingNode" [routerLink]="[]" (click)="getNextPage(node)" <button *ngIf="node!==loadingNode" (click)="getNextPage(node)"
class="btn btn-outline-primary btn-sm" role="button"> class="btn btn-outline-primary btn-sm" role="button">
<i class="fas fa-angle-down"></i> {{ 'communityList.showMore' | translate }} <i class="fas fa-angle-down"></i> {{ 'communityList.showMore' | translate }}
</a> </button>
<ds-themed-loading *ngIf="node===loadingNode && dataSource.loading$ | async" class="ds-themed-loading"></ds-themed-loading> <ds-themed-loading *ngIf="node===loadingNode && dataSource.loading$ | async" class="ds-themed-loading"></ds-themed-loading>
</div> </div>
</div> </div>

11
src/app/community-list-page/community-list/community-list.component.spec.ts
View File

@@ -16,6 +16,7 @@ import { of as observableOf } from 'rxjs';
import { By } from '@angular/platform-browser'; import { By } from '@angular/platform-browser';
import { isEmpty, isNotEmpty } from '../../shared/empty.util'; import { isEmpty, isNotEmpty } from '../../shared/empty.util';
import { FlatNode } from '../flat-node.model'; import { FlatNode } from '../flat-node.model';
import { RouterLinkWithHref } from '@angular/router';
describe('CommunityListComponent', () => { describe('CommunityListComponent', () => {
let component: CommunityListComponent; let component: CommunityListComponent;
@@ -194,7 +195,7 @@ describe('CommunityListComponent', () => {
}), }),
CdkTreeModule, CdkTreeModule,
RouterTestingModule], RouterTestingModule],
declarations: [CommunityListComponent], declarations: [CommunityListComponent, RouterLinkWithHref],
providers: [CommunityListComponent, providers: [CommunityListComponent,
{ provide: CommunityListService, useValue: communityListServiceStub },], { provide: CommunityListService, useValue: communityListServiceStub },],
schemas: [CUSTOM_ELEMENTS_SCHEMA], schemas: [CUSTOM_ELEMENTS_SCHEMA],
@@ -230,9 +231,14 @@ describe('CommunityListComponent', () => {
expect(showMoreEl).toBeTruthy(); expect(showMoreEl).toBeTruthy();
}); });
it('should not render the show more button as an empty link', () => {
const debugElements = fixture.debugElement.queryAll(By.directive(RouterLinkWithHref));
expect(debugElements).toBeTruthy();
});
describe('when show more of top communities is clicked', () => { describe('when show more of top communities is clicked', () => {
beforeEach(fakeAsync(() => { beforeEach(fakeAsync(() => {
const showMoreLink = fixture.debugElement.query(By.css('.show-more-node a')); const showMoreLink = fixture.debugElement.query(By.css('.show-more-node .btn-outline-primary'));
showMoreLink.triggerEventHandler('click', { showMoreLink.triggerEventHandler('click', {
preventDefault: () => {/**/ preventDefault: () => {/**/
} }
@@ -240,6 +246,7 @@ describe('CommunityListComponent', () => {
tick(); tick();
fixture.detectChanges(); fixture.detectChanges();
})); }));
it('tree contains maximum of currentPage (2) * (2) elementsPerPage of first top communities, or less if there are less communities (3)', () => { it('tree contains maximum of currentPage (2) * (2) elementsPerPage of first top communities, or less if there are less communities (3)', () => {
const expandableNodesFound = fixture.debugElement.queryAll(By.css('.expandable-node a')); const expandableNodesFound = fixture.debugElement.queryAll(By.css('.expandable-node a'));
const childlessNodesFound = fixture.debugElement.queryAll(By.css('.childless-node a')); const childlessNodesFound = fixture.debugElement.queryAll(By.css('.childless-node a'));

4
src/app/item-page/simple/field-components/file-section/file-section.component.html
View File

@@ -8,10 +8,10 @@
</ds-file-download-link> </ds-file-download-link>
<ds-themed-loading *ngIf="isLoading" message="{{'loading.default' | translate}}" [showMessage]="false"></ds-themed-loading> <ds-themed-loading *ngIf="isLoading" message="{{'loading.default' | translate}}" [showMessage]="false"></ds-themed-loading>
<div *ngIf="!isLastPage" class="mt-1" id="view-more"> <div *ngIf="!isLastPage" class="mt-1" id="view-more">
<a class="bitstream-view-more btn btn-outline-secondary btn-sm" [routerLink]="[]" (click)="getNextPage()">{{'item.page.bitstreams.view-more' | translate}}</a> <button class="bitstream-view-more btn btn-outline-secondary btn-sm" (click)="getNextPage()">{{'item.page.bitstreams.view-more' | translate}}</button>
</div> </div>
<div *ngIf="isLastPage && currentPage != 1" class="mt-1" id="collapse"> <div *ngIf="isLastPage && currentPage != 1" class="mt-1" id="collapse">
<a class="bitstream-collapse btn btn-outline-secondary btn-sm" [routerLink]="[]" (click)="currentPage = undefined; getNextPage();">{{'item.page.bitstreams.collapse' | translate}}</a> <button class="bitstream-collapse btn btn-outline-secondary btn-sm" (click)="currentPage = undefined; getNextPage();">{{'item.page.bitstreams.collapse' | translate}}</button>
</div> </div>
</div> </div>
</ds-metadata-field-wrapper> </ds-metadata-field-wrapper>

8
src/app/item-page/simple/metadata-representation-list/metadata-representation-list.component.html
View File

@@ -7,12 +7,12 @@
<ds-themed-loading *ngIf="(i + 1) === objects.length && (i > 0) && (!representations || representations?.length === 0)" message="{{'loading.default' | translate}}"></ds-themed-loading> <ds-themed-loading *ngIf="(i + 1) === objects.length && (i > 0) && (!representations || representations?.length === 0)" message="{{'loading.default' | translate}}"></ds-themed-loading>
<div class="d-inline-block w-100 mt-2" *ngIf="(i + 1) === objects.length && representations?.length > 0"> <div class="d-inline-block w-100 mt-2" *ngIf="(i + 1) === objects.length && representations?.length > 0">
<div *ngIf="(objects.length * incrementBy) < total" class="float-left"> <div *ngIf="(objects.length * incrementBy) < total" class="float-left">
<a [routerLink]="[]" (click)="increase()">{{'item.page.related-items.view-more' | <button class="btn btn-link btn-link-inline" (click)="increase()">{{'item.page.related-items.view-more' |
translate:{ amount: (total - (objects.length * incrementBy) < incrementBy) ? total - (objects.length * incrementBy) : incrementBy } }}</a> translate:{ amount: (total - (objects.length * incrementBy) < incrementBy) ? total - (objects.length * incrementBy) : incrementBy } }}</button>
</div> </div>
<div *ngIf="objects.length > 1" class="float-right"> <div *ngIf="objects.length > 1" class="float-right">
<a [routerLink]="[]" (click)="decrease()">{{'item.page.related-items.view-less' | <button class="btn btn-link btn-link-inline" (click)="decrease()">{{'item.page.related-items.view-less' |
translate:{ amount: representations?.length } }}</a> translate:{ amount: representations?.length } }}</button>
</div> </div>
</div> </div>
</ng-container> </ng-container>

8
src/app/item-page/simple/related-items/related-items.component.html
View File

@@ -7,12 +7,12 @@
<ds-themed-loading *ngIf="(i + 1) === objects.length && (itemsRD || i > 0) && !(itemsRD?.hasSucceeded && itemsRD?.payload && itemsRD?.payload?.page?.length > 0)" message="{{'loading.default' | translate}}"></ds-themed-loading> <ds-themed-loading *ngIf="(i + 1) === objects.length && (itemsRD || i > 0) && !(itemsRD?.hasSucceeded && itemsRD?.payload && itemsRD?.payload?.page?.length > 0)" message="{{'loading.default' | translate}}"></ds-themed-loading>
<div class="d-inline-block w-100 mt-2" *ngIf="(i + 1) === objects.length && itemsRD?.payload?.page?.length > 0"> <div class="d-inline-block w-100 mt-2" *ngIf="(i + 1) === objects.length && itemsRD?.payload?.page?.length > 0">
<div *ngIf="itemsRD?.payload?.totalPages > objects.length" class="float-left" id="view-more"> <div *ngIf="itemsRD?.payload?.totalPages > objects.length" class="float-left" id="view-more">
<a [routerLink]="[]" (click)="increase()">{{'item.page.related-items.view-more' | <button class="btn btn-link btn-link-inline" (click)="increase()">{{'item.page.related-items.view-more' |
translate:{ amount: (itemsRD?.payload?.totalElements - (incrementBy * objects.length) < incrementBy) ? itemsRD?.payload?.totalElements - (incrementBy * objects.length) : incrementBy } }}</a> translate:{ amount: (itemsRD?.payload?.totalElements - (incrementBy * objects.length) < incrementBy) ? itemsRD?.payload?.totalElements - (incrementBy * objects.length) : incrementBy } }}</button>
</div> </div>
<div *ngIf="objects.length > 1" class="float-right" id="view-less"> <div *ngIf="objects.length > 1" class="float-right" id="view-less">
<a [routerLink]="[]" (click)="decrease()">{{'item.page.related-items.view-less' | <button class="btn btn-link btn-link-inline" (click)="decrease()">{{'item.page.related-items.view-less' |
translate:{ amount: itemsRD?.payload?.page?.length } }}</a> translate:{ amount: itemsRD?.payload?.page?.length } }}</button>
</div> </div>
</div> </div>
</ng-container> </ng-container>

4
src/app/search-navbar/search-navbar.component.html
View File

@@ -4,9 +4,9 @@
<input #searchInput [@toggleAnimation]="isExpanded" [attr.aria-label]="('nav.search' | translate)" name="query" <input #searchInput [@toggleAnimation]="isExpanded" [attr.aria-label]="('nav.search' | translate)" name="query"
formControlName="query" type="text" placeholder="{{searchExpanded ? ('nav.search' | translate) : ''}}" formControlName="query" type="text" placeholder="{{searchExpanded ? ('nav.search' | translate) : ''}}"
class="d-inline-block bg-transparent position-absolute form-control dropdown-menu-right p-1" [attr.data-test]="'header-search-box' | dsBrowserOnly"> class="d-inline-block bg-transparent position-absolute form-control dropdown-menu-right p-1" [attr.data-test]="'header-search-box' | dsBrowserOnly">
<a class="submit-icon" [routerLink]="" (click)="searchExpanded ? onSubmit(searchForm.value) : expand()" [attr.data-test]="'header-search-icon' | dsBrowserOnly"> <button class="submit-icon btn btn-link ds-btn-link" type="button" (click)="searchExpanded ? onSubmit(searchForm.value) : expand()" [attr.data-test]="'header-search-icon' | dsBrowserOnly">
<em class="fas fa-search fa-lg fa-fw"></em> <em class="fas fa-search fa-lg fa-fw"></em>
</a> </button>
</form> </form>
</div> </div>
</div> </div>

2
src/app/search-navbar/search-navbar.component.scss
View File

@@ -10,7 +10,7 @@ input[type="text"] {
} }
} }
a.submit-icon { .submit-icon {
cursor: pointer; cursor: pointer;
position: sticky; position: sticky;
top: 0; top: 0;

240
src/styles/_global-styles.scss
View File

@@ -1,206 +1,222 @@
html { html {
position: relative; position: relative;
min-height: 100%; min-height: 100%;
} }
body { body {
overflow-x: hidden; overflow-x: hidden;
} }
// Sticky Footer // Sticky Footer
.outer-wrapper { .outer-wrapper {
display: flex; display: flex;
margin: 0; margin: 0;
} }
.inner-wrapper { .inner-wrapper {
flex: 1 1 auto; flex: 1 1 auto;
flex-flow: column nowrap; flex-flow: column nowrap;
display: flex; display: flex;
min-height: 100vh; min-height: 100vh;
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
position: relative; position: relative;
} }
.main-content { .main-content {
z-index: var(--ds-main-z-index); z-index: var(--ds-main-z-index);
flex: 1 1 100%; flex: 1 1 100%;
margin-top: var(--ds-content-spacing); margin-top: var(--ds-content-spacing);
margin-bottom: var(--ds-content-spacing); margin-bottom: var(--ds-content-spacing);
} }
.alert.hide { .alert.hide {
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
ds-admin-sidebar { ds-admin-sidebar {
position: fixed; position: fixed;
z-index: var(--ds-sidebar-z-index); z-index: var(--ds-sidebar-z-index);
} }
.sticky-top { .sticky-top {
z-index: 0; z-index: 0;
} }
.media-viewer .media-viewer
.change-gallery .change-gallery
.ngx-gallery .ngx-gallery
ngx-gallery-preview.ngx-gallery-active { ngx-gallery-preview.ngx-gallery-active {
right: 0; right: 0;
left: auto; left: auto;
width: calc(100% - 53px); width: calc(100% - 53px);
} }
.ds-submission-reorder-dragging { .ds-submission-reorder-dragging {
.ds-hint, .ds-hint,
button { button {
display: none; display: none;
} }
} }
ngb-modal-backdrop { ngb-modal-backdrop {
// ng-bootsrap animates opacity, causing the fully opaque background to flash briefly before the transition starts // ng-bootsrap animates opacity, causing the fully opaque background to flash briefly before the transition starts
// animating background-color between transparent & a RGBA color instead looks smoother // animating background-color between transparent & a RGBA color instead looks smoother
&.fade { &.fade {
opacity: 1 !important; opacity: 1 !important;
background-color: transparent; background-color: transparent;
transition: background-color 0.15s linear; transition: background-color 0.15s linear;
&.show { &.show {
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.5);
}
} }
}
} }
.dont-break-out { .dont-break-out {
/* These are technically the same, but use both */ /* These are technically the same, but use both */
overflow-wrap: break-word; overflow-wrap: break-word;
word-wrap: break-word; word-wrap: break-word;
-ms-word-break: break-all; -ms-word-break: break-all;
/* This is the dangerous one in WebKit, as it breaks things wherever */ /* This is the dangerous one in WebKit, as it breaks things wherever */
word-break: break-all; word-break: break-all;
/* Instead use this non-standard one: */ /* Instead use this non-standard one: */
word-break: break-word; word-break: break-word;
/* Adds a hyphen where the word breaks, if supported (No Blink) */ /* Adds a hyphen where the word breaks, if supported (No Blink) */
-ms-hyphens: auto; -ms-hyphens: auto;
-moz-hyphens: auto; -moz-hyphens: auto;
-webkit-hyphens: auto; -webkit-hyphens: auto;
hyphens: auto; hyphens: auto;
} }
.researcher-profile-switch button:focus{ .researcher-profile-switch button:focus {
outline: none !important; outline: none !important;
} }
.researcher-profile-switch .switch.checked{
color: #fff; .researcher-profile-switch .switch.checked {
color: #fff;
} }
/* Replicate default spacing look ~ preserveWhitespace=true /* Replicate default spacing look ~ preserveWhitespace=true
To be used e.g. on a div containing buttons that should have a bit of spacing in between To be used e.g. on a div containing buttons that should have a bit of spacing in between
*/ */
.space-children-mr > :not(:last-child) { .space-children-mr > :not(:last-child) {
margin-right: var(--ds-gap); margin-right: var(--ds-gap);
} }
/* Complement .space-children-mr when spaced elements are not on the same level */ /* Complement .space-children-mr when spaced elements are not on the same level */
.mr-gap { .mr-gap {
margin-right: var(--ds-gap); margin-right: var(--ds-gap);
} }
.ml-gap { .ml-gap {
margin-left: var(--ds-gap); margin-left: var(--ds-gap);
} }
.custom-accordion .card-header button { .custom-accordion .card-header button {
-webkit-box-shadow: none!important; -webkit-box-shadow: none !important;
box-shadow: none!important; box-shadow: none !important;
width: 100%; width: 100%;
} }
.custom-accordion .card:first-of-type { .custom-accordion .card:first-of-type {
border-bottom: var(--bs-card-border-width) solid var(--bs-card-border-color) !important; border-bottom: var(--bs-card-border-width) solid var(--bs-card-border-color) !important;
border-bottom-left-radius: var(--bs-card-border-radius) !important; border-bottom-left-radius: var(--bs-card-border-radius) !important;
border-bottom-right-radius: var(--bs-card-border-radius) !important; border-bottom-right-radius: var(--bs-card-border-radius) !important;
} }
ds-dynamic-form-control-container.d-none { ds-dynamic-form-control-container.d-none {
/* Ensures that form-control containers hidden and disabled by type binding collapse and let other fields in /* Ensures that form-control containers hidden and disabled by type binding collapse and let other fields in
the same row expand accordingly the same row expand accordingly
*/ */
visibility: collapse; visibility: collapse;
} }
/* Used for dso administrative functionality */ /* Used for dso administrative functionality */
.btn-dark { .btn-dark {
background-color: var(--ds-admin-sidebar-bg); background-color: var(--ds-admin-sidebar-bg);
} }
.preserve-line-breaks { .preserve-line-breaks {
white-space: pre-line; white-space: pre-line;
} }
/* Thumbnail styles */ /* Thumbnail styles */
.hide-placeholder-text { .hide-placeholder-text {
.thumbnail-placeholder { .thumbnail-placeholder {
color: transparent !important; color: transparent !important;
} }
} }
/* Used to hide the thumbnail column in modals. */ /* Used to hide the thumbnail column in modals. */
.hide-modal-thumbnail-column { .hide-modal-thumbnail-column {
.modal-body ds-listable-object-component-loader div.row > div:first-child { .modal-body ds-listable-object-component-loader div.row > div:first-child {
display: none; display: none;
} }
.modal-body ds-listable-object-component-loader div.row > div:nth-child(2) {
flex: 0 0 100%; .modal-body ds-listable-object-component-loader div.row > div:nth-child(2) {
max-width: 100%; flex: 0 0 100%;
} max-width: 100%;
}
} }
/* The font sizes used in "no thumbnail" placeholder */ /* The font sizes used in "no thumbnail" placeholder */
.thumb-font-0 { .thumb-font-0 {
.thumbnail-placeholder { .thumbnail-placeholder {
@media screen and (max-width: map-get($grid-breakpoints, lg)) { @media screen and (max-width: map-get($grid-breakpoints, lg)) {
font-size: 0.7rem; font-size: 0.7rem;
padding: 0.2rem; padding: 0.2rem;
}
@media screen and (max-width: map-get($grid-breakpoints, sm)) {
font-size: 0.6rem;
padding: 0.1rem;
}
font-size: 0.4rem;
padding: 0.1rem;
} }
@media screen and (max-width: map-get($grid-breakpoints, sm)) {
font-size: 0.6rem;
padding: 0.1rem;
}
font-size: 0.4rem;
padding: 0.1rem;
}
} }
.thumb-font-1 { .thumb-font-1 {
.thumbnail-placeholder { .thumbnail-placeholder {
@media screen and (max-width: map-get($grid-breakpoints, sm)) { @media screen and (max-width: map-get($grid-breakpoints, sm)) {
font-size: 0.9rem; font-size: 0.9rem;
padding: 0.1rem; padding: 0.1rem;
}
@media screen and (max-width: 950px) {
font-size: 0.4rem;
padding: 0.1rem;
}
font-size: 0.5rem;
padding: 0.125rem;
} }
@media screen and (max-width: 950px) {
font-size: 0.4rem;
padding: 0.1rem;
}
font-size: 0.5rem;
padding: 0.125rem;
}
} }
.thumb-font-2 { .thumb-font-2 {
.thumbnail-placeholder { .thumbnail-placeholder {
font-size: 0.9rem; font-size: 0.9rem;
padding: 0.125rem; padding: 0.125rem;
} }
} }
.thumb-font-3 { .thumb-font-3 {
.thumbnail-placeholder { .thumbnail-placeholder {
font-size: 1.25rem; font-size: 1.25rem;
padding: 0.5rem; padding: 0.5rem;
} }
} }
.btn.btn-link.btn-link-inline {
display: inline;
padding: 0;
&:not(:disabled){
&:hover, &:focus {
box-shadow: none;
}
}
}