ag-admin
/
OpenSlides
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add custom fonts (WIP) 

Pretty much angular magic
This commit is contained in:
Sean Engelhardt 2019-02-26 11:38:29 +01:00
parent eb78c694fc
commit 0053bb56a2
6 changed files with 154 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
client/src/app/app.component.ts
View File

@ -1,13 +1,14 @@
import { Component } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
import { OperatorService } from './core/core-services/operator.service';
import { LoginDataService } from './core/ui-services/login-data.service';
import { ConfigService } from './core/ui-services/config.service';
import { ConstantsService } from './core/ui-services/constants.service';
import { CountUsersService } from './core/ui-services/count-users.service';
import { LoadFontService } from './core/ui-services/load-font.service';
import { LoginDataService } from './core/ui-services/login-data.service';
import { OperatorService } from './core/core-services/operator.service';
import { ServertimeService } from './core/core-services/servertime.service';
import { ThemeService } from './core/ui-services/theme.service';
import { CountUsersService } from './core/ui-services/count-users.service';
/**
* Angular's global App Component
@ -25,20 +26,26 @@ export class AppComponent {
*
* Handles the altering of Array.toString()
*
* @param autoupdateService
* @param notifyService
* @param translate
* @param translate To set the default language
* @param operator To call the constructor of the OperatorService
* @param loginDataService to call the constructor of the LoginDataService
* @param constantService to call the constructor of the ConstantService
* @param servertimeService executes the scheduler early on
* @param themeService used to listen to theme-changes
* @param countUsersService to call the constructor of the CountUserService
* @param configService to call the constructor of the ConfigService
* @param loadFontService to call the constructor of the LoadFontService
*/
public constructor(
translate: TranslateService,
operator: OperatorService,
configService: ConfigService,
loginDataService: LoginDataService,
constantsService: ConstantsService, // Needs to be started, so it can register itself to the WebsocketService
servertimeService: ServertimeService,
themeService: ThemeService,
countUsersService: CountUsersService // Needed to register itself.
countUsersService: CountUsersService, // Needed to register itself.
configService: ConfigService,
loadFontService: LoadFontService
) {
// manually add the supported languages
translate.addLangs(['en', 'de', 'cs']);
@ -50,7 +57,6 @@ export class AppComponent {
translate.use(translate.getLangs().includes(browserLang) ? browserLang : 'en');
// change default JS functions
this.overloadArrayToString();
servertimeService.startScheduler();
}

12
client/src/app/core/ui-services/load-font.service.spec.ts Normal file
View File

@ -0,0 +1,12 @@
import { TestBed } from '@angular/core/testing';
import { LoadFontService } from './load-font.service';
describe('LoadFontService', () => {
beforeEach(() => TestBed.configureTestingModule({}));
it('should be created', () => {
const service: LoadFontService = TestBed.get(LoadFontService);
expect(service).toBeTruthy();
});
});

82
client/src/app/core/ui-services/load-font.service.ts Normal file
View File

@ -0,0 +1,82 @@
import { Injectable } from '@angular/core';
import { ConfigService } from './config.service';
/**
* Enables the usage of the FontFace constructor
*/
declare let FontFace: any;
/**
* The linter refuses to allow Document['fonts'].
* Since Document.fonts is working draft since 2016, typescript
* dies not yet support it natively (even though it exists in normal browsers)
*/
interface FontDocument extends Document {
fonts: any;
}
/**
* Service to dynamically load and sets custom loaded fonts
* using FontFace.
* Browser support might not be perfect yet.
*/
@Injectable({
providedIn: 'root'
})
export class LoadFontService {
/**
* The prefix to load custom fonts from
*/
private urlPrefix = window.location.origin;
/**
* Constructor
*
* @param configService To observe the config variables
*/
public constructor(private configService: ConfigService) {
this.loadCustomFont();
}
/**
* Observes and loads custom fonts for the projector.
* Currently, normal and regular fonts can be considered, since
* italic fonts can easily be calculated by the browser.
* Falls back to the normal OSFont when no custom font was set.
*/
private loadCustomFont(): void {
this.configService.get<any>('font_regular').subscribe(regular => {
if (regular) {
this.setCustomProjectorFont(regular, 400);
}
});
this.configService.get<any>('font_bold').subscribe(bold => {
if (bold) {
this.setCustomProjectorFont(bold, 500);
}
});
}
/**
* Sets a new font for the custom projector. Weight is required to
* differentiate between bold and normal fonts
*
* @param font the font object from the config service
* @param weight the desired weight of the font
*/
private setCustomProjectorFont(font: any, weight: number): void {
const path = font.path ? font.path : font.default;
const url = font.path ? `${this.urlPrefix}${path}` : path;
const fontFace = new FontFace('customProjectorFont', `url(${url})`, { weight: weight });
fontFace
.load()
.then(res => {
(document as FontDocument).fonts.add(res);
})
.catch(error => {
console.error(error);
});
}
}

1
client/src/app/site/mediafiles/components/mediafile-list/mediafile-list.component.ts
View File

@ -149,7 +149,6 @@ export class MediafileListComponent extends ListViewBaseComponent<ViewMediafile,
* @param file the selected file
*/
public onEditFile(file: ViewMediafile): void {
console.log('edit file ', file);
this.fileToEdit = file;
this.editFile = true;

42
client/src/assets/styles/projector.scss Normal file
View File

@ -0,0 +1,42 @@
#projector {
* {
font-family: customProjectorFont;
}
h2 {
line-height: 40px;
}
h3 {
color: #222;
margin-bottom: 10px;
}
.slidetitle {
border-bottom: 5px solid #d3d3d3;
margin-bottom: 40px;
h1 {
font-size: 1.8em;
line-height: 1.1em;
margin-bottom: 0;
padding-bottom: 0;
}
h2 {
color: #9a9898;
margin-top: 10px;
margin-bottom: 5px;
font-size: 28px;
font-weight: normal;
display: block;
}
}
ul,
ol {
margin: 0 0 10px 0;
}
hr {
margin: 10px 0;
}
}

44
client/src/styles.scss
View File

@ -29,6 +29,9 @@
/** date-time-picker */
@import '~ng-pick-datetime/assets/style/picker.min.css';
/** Load projector specific SCSS values */
@import './assets/styles/projector.scss';
/** Define the classes to switch between themes */
.openslides-theme {
@include angular-material-theme($openslides-theme);
@ -602,47 +605,6 @@ button.mat-menu-item.selected {
font-size: 16px;
}
/*** Projector slides ***/
#slide {
h2 {
line-height: 40px;
}
h3 {
color: #222;
margin-bottom: 10px;
}
.slidetitle {
border-bottom: 5px solid #d3d3d3;
margin-bottom: 40px;
h1 {
font-size: 1.8em;
line-height: 1.1em;
margin-bottom: 0;
padding-bottom: 0;
}
h2 {
color: #9a9898;
margin-top: 10px;
margin-bottom: 5px;
font-size: 28px;
font-weight: normal;
display: block;
}
}
ul,
ol {
margin: 0 0 10px 0;
}
hr {
margin: 10px 0;
}
}
.ellipsis-overflow {
overflow: hidden;
text-overflow: ellipsis;