Skip to content
Snippets Groups Projects
Commit a4a4be99 authored by lotte's avatar lotte Committed by Art Lowel
Browse files

added different themes, issue with ngrx

parent 6ba7fb34
Branches
Tags
No related merge requests found
......@@ -155,5 +155,13 @@ module.exports = {
edit: {
undoTimeout: 10000 // 10 seconds
}
}
},
themes: [
{
name: 'Preview Release',
cssClass: 'preview-release'
}
]
};
:host {
//color: red;
}
\ No newline at end of file
}
:host-context(.preview-release) {
color: green;
}
\ No newline at end of file
......@@ -32,7 +32,9 @@ 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';
import { isNotEmpty } from './shared/empty.util';
@Component({
selector: 'ds-app',
......@@ -63,6 +65,7 @@ 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
......@@ -89,6 +92,11 @@ export class AppComponent implements OnInit, AfterViewInit {
}
ngOnInit() {
const availableThemes: Theme[] = this.config.themes;
if (isNotEmpty(availableThemes)) {
this.themeService.setCurrentTheme(availableThemes[0]);
}
this.theme = this.themeService.getCurrentTheme();
const env: string = this.config.production ? 'Production' : 'Development';
const color: string = this.config.production ? 'red' : 'green';
......
......@@ -5,6 +5,7 @@ import { AuthEffects } from './auth/auth.effects';
import { JsonPatchOperationsEffects } from './json-patch/json-patch-operations.effects';
import { ServerSyncBufferEffects } from './cache/server-sync-buffer.effects';
import { ObjectUpdatesEffects } from './data/object-updates/object-updates.effects';
import { ThemeEffects } from './theme/theme.effects';
export const coreEffects = [
RequestEffects,
......@@ -14,4 +15,5 @@ export const coreEffects = [
JsonPatchOperationsEffects,
ServerSyncBufferEffects,
ObjectUpdatesEffects,
ThemeEffects
];
......@@ -87,6 +87,7 @@ import { MyDSpaceResponseParsingService } from './data/mydspace-response-parsing
import { ClaimedTaskDataService } from './tasks/claimed-task-data.service';
import { PoolTaskDataService } from './tasks/pool-task-data.service';
import { TaskResponseParsingService } from './tasks/task-response-parsing.service';
import { ThemeService } from './theme/theme.service';
const IMPORTS = [
CommonModule,
......@@ -175,6 +176,7 @@ const PROVIDERS = [
TaskResponseParsingService,
ClaimedTaskDataService,
PoolTaskDataService,
ThemeService,
// register AuthInterceptor as HttpInterceptor
{
provide: HTTP_INTERCEPTORS,
......
......@@ -13,6 +13,7 @@ import {
objectUpdatesReducer,
ObjectUpdatesState
} from './data/object-updates/object-updates.reducer';
import { themeReducer, ThemeState } from './theme/theme.reducer';
export interface CoreState {
'cache/object': ObjectCacheState,
......@@ -21,7 +22,8 @@ export interface CoreState {
'data/request': RequestState,
'index': MetaIndexState,
'auth': AuthState,
'json/patch': JsonPatchOperationsState
'json/patch': JsonPatchOperationsState,
'theme': ThemeState
}
export const coreReducers: ActionReducerMap<CoreState> = {
......@@ -31,5 +33,6 @@ export const coreReducers: ActionReducerMap<CoreState> = {
'data/request': requestReducer,
'index': indexReducer,
'auth': authReducer,
'json/patch': jsonPatchOperationsReducer
'json/patch': jsonPatchOperationsReducer,
'theme': themeReducer
};
/**
* 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;
import { Inject, Injectable } from '@angular/core';
import { Action, Store } from '@ngrx/store';
import { Actions, Effect } from '@ngrx/effects';
import { CoreState } from '../core.reducers';
import { SetThemeAction } from './theme.actions';
import { GLOBAL_CONFIG, GlobalConfig } from '../../../config';
import { Theme } from '../../../config/theme.inferface';
import { isNotEmpty } from '../../shared/empty.util';
import { asyncScheduler, defer, Observable, of as observableOf } from 'rxjs';
@Injectable()
export class ThemeEffects {
// @Effect() setInitialTheme: Observable<Action> = defer(() => {
// console.log('set theme');
// const availableThemes: Theme[] = this.config.themes;
// if (isNotEmpty(availableThemes)) {
// return observableOf(new SetThemeAction(availableThemes[0]), asyncScheduler);
// }
// });
//
// constructor(private actions: Actions, private store: Store<CoreState>, @Inject(GLOBAL_CONFIG) public config: GlobalConfig) {
// console.log("theme effects");
// }
}
import { Theme } from '../../../config/theme.inferface';
import { ThemeAction, ThemeActionTypes } from './theme.actions';
export interface ThemeState {
theme: Theme
}
// Object.create(null) ensures the object has no default js properties (e.g. `__proto__`)
const initialState = Object.create(null);
export function themeReducer(state = initialState, action: ThemeAction): ThemeState {
switch (action.type) {
case ThemeActionTypes.SET: {
const newState = Object.assign({}, state, { theme: action.payload.theme });
console.log(newState);
return newState;
}
}
}
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';
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 {
constructor(private store: Store<CoreState>) {
}
public getCurrentTheme(): Observable<Theme> {
return this.store.pipe(
select(themeStateSelector()),
map((state: ThemeState) => state.theme)
);
}
public setCurrentTheme(theme: Theme): void {
return this.store.dispatch(new SetThemeAction(theme));
}
}
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment