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

added custom theming

Browse Source
This commit is contained in:
lotte
2019-03-26 16:36:25 +01:00
parent ba14ed88c3
commit ddfbbcc223
41 changed files with 424 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
resources/images/banner.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.0 MiB

37
resources/images/dspace-logo-monochrome.svg Normal file
View File

@@ -0,0 +1,37 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="231.893px" height="167.458px" viewBox="0 0 231.893 167.458" enable-background="new 0 0 231.893 167.458"
xml:space="preserve">
<path fill="#43515F" d="M51.733,143.32c0-1.94,1.65-3.202,4.562-3.202c3.303,0,6.798,1.115,9.419,3.543l3.835-5.146
c-3.202-2.963-7.476-4.516-12.621-4.516c-7.622,0-12.284,4.467-12.284,9.855c0,12.188,18.644,8.254,18.644,13.887
c0,1.893-1.797,3.592-5.632,3.592c-4.466,0-8.011-2.039-10.292-4.418l-3.787,5.39c3.058,3.059,7.525,5.153,13.788,5.153
c8.691,0,12.964-4.474,12.964-10.396C70.329,144.971,51.733,148.418,51.733,143.32z M100.682,134.484H85.534v32.386h6.895v-11.557
h8.254c6.99,0,10.875-4.759,10.875-10.391C111.558,139.243,107.722,134.484,100.682,134.484z M99.71,149.245h-7.283v-8.69h7.283
c2.72,0,4.808,1.651,4.808,4.368C104.518,147.592,102.43,149.245,99.71,149.245z M180.759,140.067c3.302,0,6.215,2.09,7.573,4.71
l5.923-2.913c-2.28-4.078-6.407-7.914-13.496-7.914c-9.759,0-17.283,6.75-17.283,16.75c0,9.954,7.524,16.76,17.283,16.76
c7.089,0,11.216-3.94,13.496-7.971l-5.923-2.865c-1.358,2.623-4.271,4.711-7.573,4.711c-5.924,0-10.194-4.517-10.194-10.635
C170.564,144.583,174.835,140.067,180.759,140.067z M131.958,134.484l-12.485,32.386h7.823l2.04-5.486h13.887l2.038,5.486h7.816
l-12.479-32.386H131.958z M131.228,155.313l5.05-13.936l5.05,13.936H131.228z M231.892,140.553v-6.069h-22.916v32.386h22.916v-6.07
H215.87v-7.379h15.684v-6.069H215.87v-6.797L231.892,140.553L231.892,140.553z"/>
<path fill="#43515F" d="M29.956,150.652c0-9.71-7.04-16.168-17.187-16.168H0v32.386h12.817
C22.916,166.87,29.956,160.458,29.956,150.652z M12.769,160.799H6.894v-20.246h5.924c6.603,0,10.098,4.418,10.098,10.099
C22.916,156.187,19.177,160.799,12.769,160.799z"/>
<path fill="#43515F" d="M120.726,58.569l0.109-0.006l0.116-0.01l0.106-0.013l0.11-0.01l0.11-0.023l0.109-0.019l0.106-0.023
l0.106-0.029l0.105-0.023l0.106-0.033l0.103-0.034l0.097-0.035l0.104-0.04l0.101-0.042l0.1-0.042v-0.001l0.096-0.045l0,0
l0.095-0.044l0.097-0.049l0.091-0.056v-0.001l0.094-0.05v-0.002l0.09-0.056v-0.001l0.093-0.06l0.083-0.056v-0.001l0.085-0.063
l0.088-0.065v-0.002l0.087-0.062v-0.001c0.816-0.683,1.393-1.646,1.561-2.738l0.013-0.104V54.72l0.014-0.101v-0.011l0.009-0.098
v-0.012l0.009-0.101V54.38l0.005-0.095v-0.016l0.002-0.105v-16.46l-0.002-0.105v-0.016l-0.005-0.095v-0.013l-0.009-0.101v-0.012
l-0.009-0.098v-0.011l-0.014-0.1v-0.01l-0.013-0.104c-0.167-1.092-0.744-2.057-1.561-2.738V34.3l-0.087-0.063v-0.002l-0.088-0.065
l-0.085-0.063v-0.001l-0.083-0.056l-0.093-0.061l0,0l-0.09-0.056V33.93l-0.094-0.05v-0.001l-0.091-0.056l-0.097-0.049l-0.095-0.043
V33.73l-0.096-0.045v-0.001l-0.1-0.043l-0.101-0.042l-0.104-0.04l-0.097-0.035l-0.103-0.031l-0.106-0.036l-0.105-0.023l-0.106-0.028
l-0.106-0.024l-0.109-0.019l-0.11-0.023l-0.11-0.009l-0.106-0.014l-0.116-0.01l-0.109-0.006l-0.114-0.005h-7.89
c-9.716,0-15.858-7.838-15.858-17.15V6.92c0-3.812-3.102-6.915-6.914-6.915H74.085c-3.813,0-6.92,3.106-6.92,6.915v16.682
c0,3.806,3.104,6.909,6.92,6.909h8.414c9.169,0,16.906,5.95,17.146,15.403v0.04c-0.24,9.453-7.978,15.402-17.146,15.402h-8.414
c-3.815,0-6.92,3.103-6.92,6.909v16.682c0,3.81,3.106,6.915,6.92,6.915H89.95c3.812,0,6.914-3.104,6.914-6.915v-9.223
c0-9.312,6.144-17.149,15.858-17.149h7.89L120.726,58.569z M154.772,9.956C148.631,3.814,140.15,0,130.816,0h-15.024v17.424h15.024
c4.526,0,8.647,1.858,11.64,4.849c2.99,2.99,4.849,7.112,4.849,11.639v24.042c0,4.538-1.853,8.665-4.832,11.655l-0.017-0.016
c-2.991,2.991-7.113,4.849-11.64,4.849h-15.024v17.424h15.024c9.333,0,17.814-3.814,23.956-9.956v-0.033
c6.142-6.143,9.955-14.614,9.955-23.923V33.912C164.727,24.578,160.914,16.097,154.772,9.956z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

2
src/app/+admin/admin-sidebar/admin-sidebar.component.html
View File

@@ -1,4 +1,4 @@
<nav @slideHorizontal class="navbar navbar-dark bg-dark p-0"
<nav @slideHorizontal class="navbar navbar-dark p-0"
[ngClass]="{'active': sidebarOpen, 'inactive': sidebarClosed}"
[@slideSidebar]="{
value: (!(sidebarExpanded | async) ? 'collapsed' : 'expanded'),

3
src/app/+admin/admin-sidebar/admin-sidebar.component.scss
View File

@@ -8,6 +8,7 @@ $icon-z-index: 10;
height: 100vh;
flex: 1 1 auto;
nav {
background-color: $admin-sidebar-bg;
height: 100%;
flex-direction: column;
> div {
@@ -44,7 +45,7 @@ $icon-z-index: 10;
.sidebar-section {
display: flex;
align-content: stretch;
background-color: $dark;
background-color: $admin-sidebar-bg;
.nav-item {
padding-top: $spacer;
padding-bottom: $spacer;

2
src/app/+home-page/home-page.component.default.scss
View File

@@ -1,3 +1,3 @@
:host {
color: red;
//color: red;
}

2
src/app/+home-page/themes/home-page.component.preview-release.scss
View File

@@ -1,3 +1,3 @@
:host-context(.preview-release) {
color: green;
//color: green;
}

3
src/app/+search-page/search-filters/search-filter/search-boolean-filter/search-boolean-filter.component.ts
View File

@@ -9,7 +9,8 @@ import {
@Component({
selector: 'ds-search-boolean-filter',
styleUrls: ['./search-boolean-filter.component.scss'],
templateUrl: './search-boolean-filter.component.html',
// templateUrl: './search-boolean-filter.component.html',
templateUrl: './themes/search-boolean-filter.component.preview-release.html',
animations: [facetLoad]
})

34
src/app/+search-page/search-filters/search-filter/search-boolean-filter/themes/search-boolean-filter.component.preview-release.html Normal file
View File

@@ -0,0 +1,34 @@
<div>
<div class="filters py-2">
<a *ngFor="let value of (selectedValues | async)" class="d-flex flex-row"
[routerLink]="[getSearchLink()]"
[queryParams]="getRemoveParams(value) | async" queryParamsHandling="merge">
<input type="checkbox" [checked]="true" class="my-1 align-self-stretch"/>
<span class="filter-value pl-1">{{value}}</span>
</a>
<ng-container *ngFor="let page of (filterValues$ | async)?.payload">
<div [@facetLoad]="animationState">
<ng-container *ngFor="let value of page.page; let i=index">
<a *ngIf="!(selectedValues | async).includes(value.value)" class="d-flex flex-row"
[routerLink]="[getSearchLink()]"
[queryParams]="getAddParams(value.value) | async" queryParamsHandling="merge">
<input type="checkbox" [checked]="false" class="my-1 align-self-stretch"/>
<span class="filter-value px-1">{{value.value}}</span>
<span class="float-right filter-value-count ml-auto">
<span class="badge badge-primary badge-pill">{{value.count}}</span>
</span>
</a>
</ng-container>
</div>
</ng-container>
<div class="clearfix toggle-more-filters">
<a class="float-left" *ngIf="!(isLastPage$ | async)"
(click)="showMore()">{{"search.filters.filter.show-more"
| translate}}</a>
<a class="float-right" *ngIf="(currentPage | async) > 1"
(click)="showFirstPageOnly()">{{"search.filters.filter.show-less"
| translate}}</a>
</div>
</div>
</div>

13
src/app/+search-page/search-filters/search-filter/search-filter.component.default.scss Normal file
View File

@@ -0,0 +1,13 @@
@import '../../../../styles/variables.scss';
@import '../../../../styles/mixins.scss';
:host {
border: 1px solid map-get($theme-colors, light);
cursor: pointer;
.search-filter-wrapper.closed {
overflow: hidden;
}
.filter-toggle {
line-height: $line-height-base;
}
}

15
src/app/+search-page/search-filters/search-filter/search-filter.component.scss
View File

@@ -1,13 +1,2 @@
@import '../../../../styles/variables.scss';
@import '../../../../styles/mixins.scss';
:host .facet-filter {
border: 1px solid map-get($theme-colors, light);
cursor: pointer;
.search-filter-wrapper.closed {
overflow: hidden;
}
.filter-toggle {
line-height: $line-height-base;
}
}
@import './search-filter.component.default';
@import './themes/*.scss';

3
src/app/+search-page/search-filters/search-filter/search-filter.component.ts
View File

@@ -14,7 +14,8 @@ import { SEARCH_CONFIG_SERVICE } from '../../../+my-dspace-page/my-dspace-page.c
@Component({
selector: 'ds-search-filter',
styleUrls: ['./search-filter.component.scss'],
templateUrl: './search-filter.component.html',
// templateUrl: './search-filter.component.html',
templateUrl: './themes/search-filter.component.preview-release.html',
animations: [slide],
})

3
src/app/+search-page/search-filters/search-filter/search-hierarchy-filter/search-hierarchy-filter.component.ts
View File

@@ -9,7 +9,8 @@ import {
@Component({
selector: 'ds-search-hierarchy-filter',
styleUrls: ['./search-hierarchy-filter.component.scss'],
templateUrl: './search-hierarchy-filter.component.html',
// templateUrl: './search-hierarchy-filter.component.html',
templateUrl: './themes/search-hierarchy-filter.component.preview-release.html',
animations: [facetLoad]
})

43
src/app/+search-page/search-filters/search-filter/search-hierarchy-filter/themes/search-hierarchy-filter.component.preview-release.html Normal file
View File

@@ -0,0 +1,43 @@
<div>
<div class="filters py-2">
<a *ngFor="let value of (selectedValues | async)" class="d-flex flex-row"
[routerLink]="[getSearchLink()]"
[queryParams]="getRemoveParams(value) | async" queryParamsHandling="merge">
<input type="checkbox" [checked]="true" class="my-1 align-self-stretch"/>
<span class="filter-value pl-1">{{value}}</span>
</a>
<ng-container *ngFor="let page of (filterValues$ | async)?.payload">
<div [@facetLoad]="animationState">
<ng-container *ngFor="let value of page.page; let i=index">
<a *ngIf="!(selectedValues | async).includes(value.value)" class="d-flex flex-row"
[routerLink]="[getSearchLink()]"
[queryParams]="getAddParams(value.value) | async" queryParamsHandling="merge" >
<input type="checkbox" [checked]="false" class="my-1 align-self-stretch"/>
<span class="filter-value px-1">{{value.value}}</span>
<span class="float-right filter-value-count ml-auto">
<span class="badge badge-primary badge-pill">{{value.count}}</span>
</span>
</a>
</ng-container>
</div>
</ng-container>
<div class="clearfix toggle-more-filters">
<a class="float-left" *ngIf="!(isLastPage$ | async)"
(click)="showMore()">{{"search.filters.filter.show-more"
| translate}}</a>
<a class="float-right" *ngIf="(currentPage | async) > 1"
(click)="showFirstPageOnly()">{{"search.filters.filter.show-less"
| translate}}</a>
</div>
</div>
<ds-input-suggestions [suggestions]="(filterSearchResults | async)"
[placeholder]="'search.filters.filter.' + filterConfig.name + '.placeholder'| translate"
[action]="getCurrentUrl()"
[name]="filterConfig.paramName"
[(ngModel)]="filter"
(submitSuggestion)="onSubmit($event)"
(clickSuggestion)="onClick($event)"
(findSuggestions)="findSuggestions($event)"
ngDefaultControl
></ds-input-suggestions>
</div>

3
src/app/+search-page/search-filters/search-filter/search-range-filter/search-range-filter.component.ts
View File

@@ -42,7 +42,8 @@ const dateFormats = ['YYYY', 'YYYY-MM', 'YYYY-MM-DD'];
@Component({
selector: 'ds-search-range-filter',
styleUrls: ['./search-range-filter.component.scss'],
templateUrl: './search-range-filter.component.html',
// templateUrl: './search-range-filter.component.html',
templateUrl: './themes/search-range-filter.component.preview-release.html',
animations: [facetLoad]
})

40
src/app/+search-page/search-filters/search-filter/search-range-filter/themes/search-range-filter.component.preview-release.html Normal file
View File

@@ -0,0 +1,40 @@
<div>
<div class="filters py-2">
<form #form="ngForm" (ngSubmit)="onSubmit()" class="add-filter row"
[action]="getCurrentUrl()">
<div class="col-6">
<input type="text" [(ngModel)]="range[0]" [name]="filterConfig.paramName + '.min'"
class="form-control" (blur)="onSubmit()"
aria-label="Mininum value"
[placeholder]="'search.filters.filter.' + filterConfig.name + '.min.placeholder'| translate"/>
</div>
<div class="col-6">
<input type="text" [(ngModel)]="range[1]" [name]="filterConfig.paramName + '.max'"
class="form-control" (blur)="onSubmit()"
aria-label="Maximum value"
[placeholder]="'search.filters.filter.' + filterConfig.name + '.max.placeholder'| translate"/>
</div>
<input type="submit" class="d-none"/>
</form>
<ng-container *ngIf="shouldShowSlider()">
<nouislider [connect]="true" [min]="min" [max]="max" [step]="1"
[(ngModel)]="range" (change)="onSubmit()" ngDefaultControl></nouislider>
</ng-container>
<ng-container *ngFor="let page of (filterValues$ | async)?.payload">
<div [@facetLoad]="animationState">
<ng-container *ngFor="let value of page.page; let i=index">
<a *ngIf="!(selectedValues | async).includes(value.value)" class="d-flex flex-row"
[routerLink]="[getSearchLink()]"
[queryParams]="getChangeParams(value.value) | async" queryParamsHandling="merge">
<span class="filter-value px-1">{{value.value}}</span>
<span class="float-right filter-value-count ml-auto">
<span class="badge badge-primary badge-pill">{{value.count}}</span>
</span>
</a>
</ng-container>
</div>
</ng-container>
</div>
</div>

3
src/app/+search-page/search-filters/search-filter/search-text-filter/search-text-filter.component.ts
View File

@@ -15,7 +15,8 @@ import { renderFacetFor } from '../search-filter-type-decorator';
@Component({
selector: 'ds-search-text-filter',
styleUrls: ['./search-text-filter.component.scss'],
templateUrl: './search-text-filter.component.html',
// templateUrl: './search-text-filter.component.html',
templateUrl: './themes/search-text-filter.component.preview-release.html',
animations: [facetLoad]
})

45
src/app/+search-page/search-filters/search-filter/search-text-filter/themes/search-text-filter.component.preview-release.html Normal file
View File

@@ -0,0 +1,45 @@
<div>
<div class="filters py-2">
<a *ngFor="let value of (selectedValues | async)" class="d-flex flex-row"
[routerLink]="[getSearchLink()]"
[queryParams]="getRemoveParams(value) | async" queryParamsHandling="merge">
<input type="checkbox" [checked]="true" class="my-1 align-self-stretch"/>
<span class="filter-value pl-1">{{value}}</span>
</a>
<ng-container *ngVar="(filterValues$ | async) as filterValuesRD">
<div [@facetLoad]="animationState">
<ng-container *ngFor="let page of filterValuesRD?.payload">
<ng-container *ngFor="let value of page.page; let i=index">
<a *ngIf="!(selectedValues | async).includes(value.value)" class="d-flex flex-row"
[routerLink]="[getSearchLink()]"
[queryParams]="getAddParams(value.value) | async" queryParamsHandling="merge" >
<input type="checkbox" [checked]="false" class="my-1 align-self-stretch"/>
<span class="filter-value px-1">{{value.value}}</span>
<span class="float-right filter-value-count ml-auto">
<span class="badge badge-primary badge-pill">{{value.count}}</span>
</span>
</a>
</ng-container>
</ng-container>
</div>
</ng-container>
<div class="clearfix toggle-more-filters">
<a class="float-left" *ngIf="!(isLastPage$ | async)"
(click)="showMore()">{{"search.filters.filter.show-more"
| translate}}</a>
<a class="float-right" *ngIf="(currentPage | async) > 1"
(click)="showFirstPageOnly()">{{"search.filters.filter.show-less"
| translate}}</a>
</div>
</div>
<ds-input-suggestions [suggestions]="(filterSearchResults | async)"
[placeholder]="'search.filters.filter.' + filterConfig.name + '.placeholder'| translate"
[action]="getCurrentUrl()"
[name]="filterConfig.paramName"
[(ngModel)]="filter"
(submitSuggestion)="onSubmit($event)"
(clickSuggestion)="onClick($event)"
(findSuggestions)="findSuggestions($event)"
ngDefaultControl
></ds-input-suggestions>
</div>

7
src/app/+search-page/search-filters/search-filter/themes/search-filter.component.preview-release.html Normal file
View File

@@ -0,0 +1,7 @@
<div>
<div (click)="toggle()" class="filter-name"><h5 class="d-inline-block mb-0">{{'search.filters.filter.' + filter.name + '.head'| translate}}</h5> <span class="filter-toggle fas float-right text-info"
[ngClass]="(isCollapsed() | async) ? 'fa-caret-down' : 'fa-caret-up'"></span></div>
<div [@slide]="(isCollapsed() | async) ? 'collapsed' : 'expanded'" (@slide.start)="startSlide($event)" (@slide.done)="finishSlide($event)" class="search-filter-wrapper" [ngClass]="{'closed' : collapsed}">
<ds-search-facet-filter-wrapper [filterConfig]="filter"></ds-search-facet-filter-wrapper>
</div>
</div>

11
src/app/+search-page/search-filters/search-filter/themes/search-filter.component.preview-release.scss Normal file
View File

@@ -0,0 +1,11 @@
@import '../../../../../styles/variables.scss';
@import '../../../../../styles/mixins.scss';
:host-context(.preview-release) {
background-color: map-get($theme-colors, light);
border-radius: $border-radius;
h5 {
font-size: 1.1rem
}
}

2
src/app/+search-page/search-filters/search-filters.component.ts
View File

@@ -14,7 +14,7 @@ import { SEARCH_CONFIG_SERVICE } from '../../+my-dspace-page/my-dspace-page.comp
@Component({
selector: 'ds-search-filters',
styleUrls: ['./search-filters.component.scss'],
templateUrl: './search-filters.component.html',
templateUrl: './themes/search-filters.component.preview-release.html',
})
/**

7
src/app/+search-page/search-filters/themes/search-filters.component.preview-release.html Normal file
View File

@@ -0,0 +1,7 @@
<h3>{{"search.filters.head" | translate}}</h3>
<div *ngIf="(filters | async)?.hasSucceeded">
<div *ngFor="let filter of (filters | async)?.payload">
<ds-search-filter *ngIf="isActive(filter) | async" class="d-block mb-3 px-3 py-2" [filter]="filter"></ds-search-filter>
</div>
</div>
<a class="btn btn-primary" [routerLink]="[getSearchLink()]" [queryParams]="clearParams | async" queryParamsHandling="merge" role="button">{{"search.filters.reset" | translate}}</a>

5
src/app/+search-page/search-settings/search-settings.component.default.scss Normal file
View File

@@ -0,0 +1,5 @@
@import '../../../styles/variables.scss';
.setting-option {
border: 1px solid map-get($theme-colors, light);
}

7
src/app/+search-page/search-settings/search-settings.component.scss
View File

@@ -1,5 +1,2 @@
@import '../../../styles/variables.scss';
.setting-option {
border: 1px solid map-get($theme-colors, light);
}
@import './search-settings.component.default';
@import './themes/*.scss';

3
src/app/+search-page/search-settings/search-settings.component.ts
View File

@@ -10,7 +10,8 @@ import { SEARCH_CONFIG_SERVICE } from '../../+my-dspace-page/my-dspace-page.comp
@Component({
selector: 'ds-search-settings',
styleUrls: ['./search-settings.component.scss'],
templateUrl: './search-settings.component.html'
// templateUrl: './search-settings.component.html'
templateUrl: './themes/search-settings.component.preview-release.html'
})
/**

24
src/app/+search-page/search-settings/themes/search-settings.component.preview-release.html Normal file
View File

@@ -0,0 +1,24 @@
<ng-container *ngVar="(searchOptions$ | async) as config">
<h3>{{ 'search.sidebar.settings.title' | translate}}</h3>
<div *ngIf="config?.sort" class="setting-option result-order-settings mb-3 px-3 py-2">
<h5 class="mb-0">{{ 'search.sidebar.settings.sort-by' | translate}}</h5>
<select class="form-control my-2" (change)="reloadOrder($event)">
<option *ngFor="let sortOption of searchOptionPossibilities"
[value]="sortOption.field + ',' + sortOption.direction.toString()"
[selected]="sortOption.field === config?.sort.field && sortOption.direction === (config?.sort.direction)? 'selected': null">
{{'sorting.' + sortOption.field + '.' + sortOption.direction | translate}}
</option>
</select>
</div>
<div class="setting-option page-size-settings mb-3 px-3 py-2">
<h5 class="mb-0">{{ 'search.sidebar.settings.rpp' | translate}}</h5>
<select class="form-control my-2" (change)="reloadRPP($event)">
<option *ngFor="let pageSizeOption of config?.pagination.pageSizeOptions"
[value]="pageSizeOption"
[selected]="pageSizeOption === +config?.pagination.pageSize ? 'selected': null">
{{pageSizeOption}}
</option>
</select>
</div>
</ng-container>

10
src/app/+search-page/search-settings/themes/search-settings.component.preview-release.scss Normal file
View File

@@ -0,0 +1,10 @@
@import '../../../../styles/variables.scss';
:host-context(.preview-release) .setting-option {
background-color: map-get($theme-colors, light);
border-radius: $border-radius;
h5 {
font-size: 1.1rem
}
}

12
src/app/header/header.component.default.scss Normal file
View File

@@ -0,0 +1,12 @@
@import '../../styles/variables.scss';
.navbar-brand img {
height: $header-logo-height;
@media screen and (max-width: map-get($grid-breakpoints, sm)) {
height: $header-logo-height-xs;
}
}
.navbar-toggler .navbar-toggler-icon {
background-image: none !important;
line-height: 1.5;
}

2
src/app/header/header.component.html
View File

@@ -1,7 +1,7 @@
<header>
<div class="container">
<a class="navbar-brand my-2" routerLink="/home">
<img src="assets/images/dspace-logo.svg"/>
<img src="assets/images/dspace-logo-monochrome.svg"/>
</a>
<nav class="navbar navbar-light navbar-expand-md float-right px-0">

14
src/app/header/header.component.scss
View File

@@ -1,12 +1,2 @@
@import '../../styles/variables.scss';
.navbar-brand img {
height: $header-logo-height;
@media screen and (max-width: map-get($grid-breakpoints, sm)) {
height: $header-logo-height-xs;
}
}
.navbar-toggler .navbar-toggler-icon {
background-image: none !important;
line-height: 1.5;
}
@import './header.component.default';
@import './themes/*.scss';

7
src/app/header/themes/header.component.preview-release.scss Normal file
View File

@@ -0,0 +1,7 @@
@import '../../../styles/variables.scss';
:host-context(.preview-release) {
::ng-deep a {
color: $dark;
}
}

39
src/app/navbar/navbar.component.default.scss Normal file
View File

@@ -0,0 +1,39 @@
@import '../../styles/variables.scss';
nav.navbar {
border-bottom: 1px $gray-400 solid;
align-items: baseline;
}
/** Mobile menu styling **/
@media screen and (max-width: map-get($grid-breakpoints, md)) {
.navbar {
width: 100%;
background-color: $white;
position: absolute;
overflow: hidden;
height: 0;
&.open {
height: 100vh; //doesn't matter because wrapper is sticky
}
}
}
@media screen and (min-width: map-get($grid-breakpoints, md)) {
.reset-padding-md {
margin-left: -$spacer/2;
margin-right: -$spacer/2;
}
}
/* TODO remove when https://github.com/twbs/bootstrap/issues/24726 is fixed */
.navbar-expand-md.navbar-container {
@media screen and (max-width: map-get($grid-breakpoints, md)) {
> .container {
padding: 0 $spacer;
}
padding: 0;
}
}

40
src/app/navbar/navbar.component.scss
View File

@@ -1,39 +1,3 @@
@import '../../styles/variables.scss';
nav.navbar {
border-bottom: 1px $gray-400 solid;
align-items: baseline;
}
/** Mobile menu styling **/
@media screen and (max-width: map-get($grid-breakpoints, md)) {
.navbar {
width: 100%;
background-color: $white;
position: absolute;
overflow: hidden;
height: 0;
&.open {
height: 100vh; //doesn't matter because wrapper is sticky
}
}
}
@media screen and (min-width: map-get($grid-breakpoints, md)) {
.reset-padding-md {
margin-left: -$spacer/2;
margin-right: -$spacer/2;
}
}
/* TODO remove when https://github.com/twbs/bootstrap/issues/24726 is fixed */
.navbar-expand-md.navbar-container {
@media screen and (max-width: map-get($grid-breakpoints, md)) {
> .container {
padding: 0 $spacer;
}
padding: 0;
}
}
@import './navbar.component.default';
@import './themes/*.scss';

3
src/app/navbar/navbar.component.ts
View File

@@ -13,7 +13,8 @@ import { HostWindowService } from '../shared/host-window.service';
@Component({
selector: 'ds-navbar',
styleUrls: ['navbar.component.scss'],
templateUrl: 'navbar.component.html',
// templateUrl: './navbar.component.html',
templateUrl: './themes/navbar.component.preview-release.html',
animations: [slideMobileNav]
})
export class NavbarComponent extends MenuComponent implements OnInit {

16
src/app/navbar/themes/navbar.component.preview-release.html Normal file
View File

@@ -0,0 +1,16 @@
<nav [ngClass]="{'open': !(menuCollapsed | async)}"
[@slideMobileNav]="!(windowService.isXsOrSm() | async) ? 'default' : ((menuCollapsed | async) ? 'collapsed' : 'expanded')"
class="navbar navbar-dark bg-info navbar-expand-md p-md-0 navbar-container"> <!-- TODO remove navbar-container class when https://github.com/twbs/bootstrap/issues/24726 is fixed -->
<div class="container">
<div class="reset-padding-md w-100">
<div id="collapsingNav">
<ul class="navbar-nav mr-auto shadow-none">
<ng-container *ngFor="let section of (sections | async)">
<ng-container
*ngComponentOutlet="sectionComponents.get(section.id); injector: sectionInjectors.get(section.id);"></ng-container>
</ng-container>
</ul>
</div>
</div>
</div>
</nav>

7
src/app/navbar/themes/navbar.component.preview-release.scss Normal file
View File

@@ -0,0 +1,7 @@
@import '../../styles/variables.scss';
nav.navbar {
border-bottom: 5px $dark solid;
}

3
src/app/shared/search-form/search-form.component.ts
View File

@@ -14,7 +14,8 @@ import { MYDSPACE_ROUTE } from '../../+my-dspace-page/my-dspace-page.component';
@Component({
selector: 'ds-search-form',
styleUrls: ['./search-form.component.scss'],
templateUrl: './search-form.component.html'
// templateUrl: './search-form.component.html',
templateUrl: './themes/search-form.component.preview-release.html'
})
/**

16
src/app/shared/search-form/themes/search-form.component.preview-release.html Normal file
View File

@@ -0,0 +1,16 @@
<form #form="ngForm" (ngSubmit)="onSubmit(form.value)" class="row" action="/search">
<div *ngIf="isNotEmpty(scopes)" class="col-12 col-sm-3">
<select [(ngModel)]="scope" name="scope" class="form-control" aria-label="Search scope" (change)="onScopeChange($event.target.value)">
<option value>{{'search.form.search_dspace' | translate}}</option>
<option *ngFor="let scopeOption of scopes" [value]="scopeOption.id">{{scopeOption?.name ? scopeOption.name : 'search.form.search_dspace' | translate}}</option>
</select>
</div>
<div [ngClass]="{'col-sm-9': isNotEmpty(scopes)}" class="col-12">
<div class="form-group input-group">
<input type="text" [(ngModel)]="query" name="query" class="form-control" aria-label="Search input">
<span class="input-group-append">
<button type="submit" class="search-button btn btn-primary">{{ ('search.form.search' | translate) }}</button>
</span>
</div>
</div>
</form>

6
src/styles/_custom_variables.scss
View File

@@ -20,9 +20,9 @@ $sidebar-z-index: 20;
$header-logo-height: 80px;
$header-logo-height-xs: 50px;
$admin-sidebar-bg: $dark;
$admin-sidebar-active-bg: darken($dark, 3%);
$admin-sidebar-header-bg: darken($dark, 7%);
$admin-sidebar-bg: darken(#2B4E72, 17%);
$admin-sidebar-active-bg: darken($admin-sidebar-bg, 3%);
$admin-sidebar-header-bg: darken($admin-sidebar-bg, 7%);
$dark-scrollbar-background: $admin-sidebar-active-bg;
$dark-scrollbar-foreground: #47495d;

2
src/styles/_variables.scss
View File

@@ -1,5 +1,7 @@
@import '_functions.scss';
@import '../../node_modules/bootstrap/scss/functions.scss';
@import 'themes/bootstrap_variables.preview-release.scss';
@import 'bootstrap_variables.scss';
@import '../../node_modules/bootstrap/scss/variables.scss';
@import 'themes/custom_variables.preview-release.scss';
@import 'custom_variables.scss';

14
src/styles/themes/_bootstrap_variables.preview-release.scss Normal file
View File

@@ -0,0 +1,14 @@
$gray-100: #e8ebf3 !default; // #eee
$gray-800: #444444 !default; // #444
$navbar-dark-color: #FFFFFF;
/* Reassign color vars to semantic color scheme */
$blue: #43515f !default;
$green: #92C642 !default;
$cyan: #56ab9c !default;
$yellow: #ec9433 !default;
$red: #CF4444 !default;
$dark: #43515f !default;
$body-color: $gray-800 !default;

0
src/styles/themes/_custom_variables.preview-release.scss Normal file
View File