added custom theming

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

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'),

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;

View File

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

View File

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

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]
})

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>

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;
}
}

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';

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],
})

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]
})

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>

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]
})

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>

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]
})

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>

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>

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
}
}

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',
})
/**

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>

View File

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

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';

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'
})
/**
@@ -20,7 +21,7 @@ export class SearchSettingsComponent implements OnInit {
/**
* The configuration for the current paginated search results
*/
*/
searchOptions$: Observable<PaginatedSearchOptions>;
/**

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>

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
}
}

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;
}

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">

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';

View File

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

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;
}
}

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';

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 {

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>

View File

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

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'
})
/**

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>

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;

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';

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;