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

cleaned up theming code

Browse Source
This commit is contained in:
lotte
2019-03-28 11:57:11 +01:00
parent dc858d334d
commit a994ba1927
13 changed files with 10 additions and 241 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
config/environment.default.js
View File

@@ -155,13 +155,5 @@ module.exports = {
edit: {
undoTimeout: 10000 // 10 seconds
}
},
themes: [
{
name: 'Preview Release',
cssClass: 'preview-release'
}
]
};

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

@@ -1,4 +1,4 @@
<div class="outer-wrapper" [ngClass]="(theme | async)?.cssClass">
<div class="outer-wrapper preview-release">
<ds-admin-sidebar></ds-admin-sidebar>
<div class="inner-wrapper" [@slideSidebarPadding]="{
value: (!(sidebarVisible | async) ? 'hidden' : (slideSidebarOver | async) ? 'shown' : 'expanded'),

2
src/app/app.component.spec.ts
View File

@@ -40,7 +40,6 @@ import { CSSVariableServiceStub } from './shared/testing/css-variable-service-st
import { MenuServiceStub } from './shared/testing/menu-service-stub';
import { HostWindowService } from './shared/host-window.service';
import { HostWindowServiceStub } from './shared/testing/host-window-service-stub';
import { ThemeService } from './core/theme/theme.service';
import { ActivatedRoute, Router } from '@angular/router';
import { RouteService } from './shared/services/route.service';
import { MockActivatedRoute } from './shared/mocks/mock-active-router';
@@ -79,7 +78,6 @@ describe('App component', () => {
{ provide: MenuService, useValue: menuService },
{ provide: CSSVariableService, useClass: CSSVariableServiceStub },
{ provide: HostWindowService, useValue: new HostWindowServiceStub(800) },
{ provide: ThemeService, useValue: {getCurrentTheme: () => {/* No implementation */}} },
AppComponent,
RouteService
],

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

@@ -32,7 +32,6 @@ import { Observable } from 'rxjs/internal/Observable';
import { slideSidebarPadding } from './shared/animations/slide';
import { combineLatest as combineLatestObservable, of } from 'rxjs';
import { HostWindowService } from './shared/host-window.service';
import { ThemeService } from './core/theme/theme.service';
import { Theme } from '../config/theme.inferface';
@Component({
@@ -64,7 +63,6 @@ export class AppComponent implements OnInit, AfterViewInit {
private cssService: CSSVariableService,
private menuService: MenuService,
private windowService: HostWindowService,
private themeService: ThemeService
) {
// Load all the languages that are defined as active from the config file
@@ -91,7 +89,6 @@ export class AppComponent implements OnInit, AfterViewInit {
}
ngOnInit() {
this.theme = this.themeService.getCurrentTheme();
const env: string = this.config.production ? 'Production' : 'Development';
const color: string = this.config.production ? 'red' : 'green';

2
src/app/core/core.module.ts
View File

@@ -81,7 +81,6 @@ import { DSOChangeAnalyzer } from './data/dso-change-analyzer.service';
import { ObjectUpdatesService } from './data/object-updates/object-updates.service';
import { DefaultChangeAnalyzer } from './data/default-change-analyzer.service';
import { SearchService } from '../+search-page/search-service/search.service';
import { ThemeService } from './theme/theme.service';
import { RoleService } from './roles/role.service';
import { MyDSpaceGuard } from '../+my-dspace-page/my-dspace.guard';
import { MyDSpaceResponseParsingService } from './data/mydspace-response-parsing.service';
@@ -171,7 +170,6 @@ const PROVIDERS = [
MenuService,
ObjectUpdatesService,
SearchService,
ThemeService,
MyDSpaceGuard,
RoleService,
TaskResponseParsingService,

3
src/app/core/core.reducers.ts
View File

@@ -13,7 +13,6 @@ import {
objectUpdatesReducer,
ObjectUpdatesState
} from './data/object-updates/object-updates.reducer';
import { themeReducer, ThemeState } from './theme/theme.reducer';
export interface CoreState {
'cache/object': ObjectCacheState,
@@ -22,7 +21,6 @@ export interface CoreState {
'data/request': RequestState,
'index': MetaIndexState,
'auth': AuthState,
'theme': ThemeState
'json/patch': JsonPatchOperationsState
}
@@ -33,6 +31,5 @@ export const coreReducers: ActionReducerMap<CoreState> = {
'data/request': requestReducer,
'index': indexReducer,
'auth': authReducer,
'theme': themeReducer,
'json/patch': jsonPatchOperationsReducer
};

37
src/app/core/theme/theme.actions.ts
View File

@@ -1,37 +0,0 @@
/**
* The list of ObjectUpdatesAction type definitions
*/
import { type } from '../../shared/ngrx/type';
import { Action } from '@ngrx/store';
import { Theme } from '../../../config/theme.inferface';
export const ThemeActionTypes = {
SET: type('dspace/core/theme/SET'),
};
/* tslint:disable:max-classes-per-file */
/**
* An ngrx action to set a the repository's current theme
*/
export class SetThemeAction implements Action {
type = ThemeActionTypes.SET;
payload: {
theme: Theme
};
/**
* Create a new SetThemeAction
*
* @param theme
* the theme configuration to change the current theme to
*/
constructor(
theme: Theme
) {
this.payload = { theme };
}
}
export type ThemeAction
= SetThemeAction;

46
src/app/core/theme/theme.reducer.spec.ts
View File

@@ -1,46 +0,0 @@
import * as deepFreeze from 'deep-freeze';
import { SetThemeAction } from './theme.actions';
import { themeReducer } from './theme.reducer';
import { Theme } from '../../../config/theme.inferface';
class NullAction extends SetThemeAction {
type = null;
payload = null;
constructor() {
super(null);
}
}
const newTheme: Theme = { name: 'New theme', cssClass: 'new-class' };
describe('themeReducer', () => {
const testState = { theme: { name: 'test theme', cssClass: 'test-class' } };
deepFreeze(testState);
it('should return the current state when no valid actions have been made', () => {
const action = new NullAction();
const newState = themeReducer(testState, action);
expect(newState).toEqual(testState);
});
it('should start with an empty object', () => {
const action = new NullAction();
const initialState = themeReducer(undefined, action);
expect(initialState).toEqual({} as any);
});
it('should perform the SET action without affecting the previous state', () => {
const action = new SetThemeAction(newTheme);
// testState has already been frozen above
themeReducer(testState, action);
});
it('should return a new state with the new theme when calling the SET action with this new theme', () => {
const action = new SetThemeAction(newTheme);
const newState = themeReducer(testState, action);
expect(newState.theme).toEqual(newTheme);
});
});

26
src/app/core/theme/theme.reducer.ts
View File

@@ -1,26 +0,0 @@
import { Theme } from '../../../config/theme.inferface';
import { ThemeAction, ThemeActionTypes } from './theme.actions';
/**
* Represents the state of the current theme in the store
*/
export interface ThemeState {
theme: Theme
}
// Object.create(null) ensures the object has no default js properties (e.g. `__proto__`)
const initialState = Object.create(null);
/**
* Reducer the current theme state to the new state depending on a given action
* @param state The previous state, equal to the initial state when it was not defined before
* @param action The action to perform on the current theme state
*/
export function themeReducer(state = initialState, action: ThemeAction): ThemeState {
switch (action.type) {
case ThemeActionTypes.SET: {
return Object.assign({}, state, { theme: action.payload.theme });
}
}
return state;
}

60
src/app/core/theme/theme.service.spec.ts
View File

@@ -1,60 +0,0 @@
import { Store } from '@ngrx/store';
import { CoreState } from '../core.reducers';
import { ThemeService } from './theme.service';
import { SetThemeAction } from './theme.actions';
import * as ngrx from '@ngrx/store';
import { Theme } from '../../../config/theme.inferface';
import { of as observableOf } from 'rxjs';
import { first } from 'rxjs/operators';
describe('ThemeService', () => {
let service: ThemeService;
let store: Store<CoreState>;
const initialTheme: Theme = {
name: 'test theme',
cssClass: 'test-class'
};
const config = {
themes: [initialTheme]
} as any;
beforeEach(() => {
store = new Store<CoreState>(undefined, undefined, undefined);
spyOn(store, 'dispatch');
service = new ThemeService(store, config);
});
describe('when the service is created', () => {
beforeEach(() => {
spyOn(ThemeService.prototype, 'setCurrentTheme');
service = new ThemeService(store, config);
});
it('should call setCurrentTheme action on itself with the theme from the configuration', () => {
expect(service.setCurrentTheme).toHaveBeenCalledWith(initialTheme);
});
});
describe('when setCurrentTheme op the service is called', () => {
it('should dispatch a SET action on the store', () => {
service.setCurrentTheme(initialTheme);
expect(store.dispatch).toHaveBeenCalledWith(new SetThemeAction(initialTheme));
});
});
describe('when getCurrentTheme op the service is called', () => {
beforeEach(() => {
spyOnProperty(ngrx, 'select').and.callFake(() => {
return () => {
return () => observableOf({ theme: initialTheme });
};
});
});
it('should select the current theme from the store', () => {
const theme = service.getCurrentTheme();
theme.pipe(first()).subscribe((newTheme) => {
expect(newTheme).toEqual(initialTheme);
});
});
});
});

50
src/app/core/theme/theme.service.ts
View File

@@ -1,50 +0,0 @@
import { createSelector, MemoizedSelector, select, Store } from '@ngrx/store';
import { coreSelector, CoreState } from '../core.reducers';
import { Inject, Injectable } from '@angular/core';
import { Theme } from '../../../config/theme.inferface';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { ThemeState } from './theme.reducer';
import { SetThemeAction } from './theme.actions';
import { isNotEmpty } from '../../shared/empty.util';
import { GLOBAL_CONFIG, GlobalConfig } from '../../../config';
function themeStateSelector(): MemoizedSelector<CoreState, ThemeState> {
return createSelector(coreSelector, (state: CoreState) => state.theme);
}
/**
* Service that dispatches to and reads from the Theme state in the store
*/
@Injectable()
export class ThemeService {
/**
* Sets the initial theme read from configuration
* @param store The current store for the core state
* @param config The global configuration
*/
constructor(private store: Store<CoreState>, @Inject(GLOBAL_CONFIG) public config: GlobalConfig) {
const availableThemes: Theme[] = this.config.themes;
if (isNotEmpty(availableThemes)) {
this.setCurrentTheme(availableThemes[0]);
}
}
/**
* Returns the current theme from the store
*/
public getCurrentTheme(): Observable<Theme> {
return this.store.pipe(
select(themeStateSelector()),
map((state: ThemeState) => state.theme)
);
}
/**
* Sets the current theme in the store
* @param theme The new theme
*/
public setCurrentTheme(theme: Theme): void {
return this.store.dispatch(new SetThemeAction(theme));
}
}

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

@@ -40,8 +40,14 @@ export class SearchFormComponent {
*/
@Input() scopes: DSpaceObject[];
/**
* Whether or not the search button should be displayed large
*/
@Input() large = false;
/**
* The brand color of the search button
*/
@Input() brandColor = 'primary';
constructor(private router: Router) {