mirror of
https://gitlab.com/openlp/web-remote.git
synced 2024-12-22 03:22:48 +00:00
Add new OpenLP light theme based on Angular Material v3.
This commit is contained in:
Chris Witterholt
parent
b297759c82
commit
aaa1b7d085
@ -61,9 +61,9 @@
|
||||
"@types/jasminewd2": "~2.0.13",
|
||||
"@types/jest": "^29.5.12",
|
||||
"@types/node": "~20.14.2",
|
||||
"@typescript-eslint/eslint-plugin": "7.12.0",
|
||||
"@typescript-eslint/parser": "7.12.0",
|
||||
"@typescript-eslint/utils": "7.12.0",
|
||||
"@typescript-eslint/eslint-plugin": "7.13.0",
|
||||
"@typescript-eslint/parser": "7.13.0",
|
||||
"@typescript-eslint/utils": "7.13.0",
|
||||
"axios": "^1.7.2",
|
||||
"browserslist": "^4.23.1",
|
||||
"browserslist-useragent-regexp": "^4.1.3",
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
<mat-toolbar color="primary">
|
||||
<mat-toolbar class="header">
|
||||
<mat-toolbar-row>
|
||||
<button mat-icon-button (click)="menu.toggle()">
|
||||
<button mat-icon-button class="header" (click)="menu.toggle()">
|
||||
<mat-icon>menu</mat-icon>
|
||||
</button>
|
||||
<span class="page-title">{{ pageTitle | translate | titlecase }}</span>
|
||||
<span class="spacer"></span>
|
||||
@if (showLogin) {
|
||||
<button
|
||||
mat-button
|
||||
mat-raised-button
|
||||
(click)="login()">
|
||||
{{ 'LOGIN' | translate | titlecase }}
|
||||
</button>
|
||||
@ -16,8 +16,8 @@
|
||||
<button
|
||||
mat-icon-button
|
||||
(click)="forceWebSocketReconnection()"
|
||||
class="connection-status"
|
||||
matTooltip="{{ 'CONNECTED_TO_OPENLP' | translate | titlecase }}">
|
||||
class="header connection-status"
|
||||
matTooltip="{{ ('CONNECTED_TO_OPENLP' | translate | titlecase).replace('Openlp', 'OpenLP') }}">
|
||||
<mat-icon>link</mat-icon>
|
||||
</button>
|
||||
}
|
||||
@ -25,7 +25,7 @@
|
||||
<button
|
||||
mat-icon-button
|
||||
(click)="forceWebSocketReconnection()"
|
||||
class="connection-status"
|
||||
class="header connection-status"
|
||||
matTooltip="{{ 'DISCONNECTED' | translate | titlecase }}">
|
||||
<mat-icon>link_off</mat-icon>
|
||||
</button>
|
||||
|
||||
@ -3,18 +3,13 @@
|
||||
mat-list-item
|
||||
(click)="onSlideSelected(slide)"
|
||||
[class.selected]="selected">
|
||||
<mat-card-content>
|
||||
<div class="verse-tag">{{ slide?.tag }}</div>
|
||||
<mat-card-header>
|
||||
<mat-card-subtitle class="slide-title">{{ slide?.tag }}</mat-card-subtitle>
|
||||
</mat-card-header>
|
||||
@if (slide?.img) {
|
||||
<div class="verse-img-container">
|
||||
<img src="{{ slide?.img }}" />
|
||||
<div class="img-verse-text">
|
||||
{{ slide?.text }}
|
||||
</div>
|
||||
</div>
|
||||
<img mat-card-image src="{{ slide?.img }}" alt="{{ slide?.tag }}" />
|
||||
}
|
||||
@else {
|
||||
<div class="verse-text">{{ slide?.text }}</div>
|
||||
@if (slide?.text) {
|
||||
<mat-card-content>{{ slide?.text }}</mat-card-content>
|
||||
}
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
.slide {
|
||||
cursor: pointer;
|
||||
margin-left: 2.5rem;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.selected {
|
||||
@ -7,29 +9,6 @@
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.verse-tag {
|
||||
float: left;
|
||||
.slide-title {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.verse-text {
|
||||
margin-left: 2.5rem;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
/* Styles for displaying thumbnails */
|
||||
.verse-img-container {
|
||||
/* CSS for formatting DIV containing the image */
|
||||
margin-left: 2.5rem;
|
||||
display: inline-block;
|
||||
}
|
||||
.verse-img-container img {
|
||||
/* Roughly basing these values off of the current thumbnail size */
|
||||
/* Images sent from OpenLP should be larger and should be sized based on viewer screen size */
|
||||
max-height: 75%;
|
||||
min-height: 88px;
|
||||
width: 100%;
|
||||
}
|
||||
.img-verse-text {
|
||||
font-size: 1.1rem;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
|
||||
14
src/assets/themes/_header-theme.scss
Normal file
14
src/assets/themes/_header-theme.scss
Normal file
@ -0,0 +1,14 @@
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
@mixin color($theme) {
|
||||
.header {
|
||||
color: mat.get-theme-color($theme, primary, 100);
|
||||
background-color: mat.get-theme-color($theme, primary, 50);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin theme($theme) {
|
||||
@if mat.theme-has($theme, color) {
|
||||
@include color($theme);
|
||||
}
|
||||
}
|
||||
144
src/assets/themes/openlp-light-theme.scss
Normal file
144
src/assets/themes/openlp-light-theme.scss
Normal file
@ -0,0 +1,144 @@
|
||||
// This file was generated by running 'ng generate @angular/material:m3-theme'.
|
||||
// Proceed with caution if making changes to this file.
|
||||
|
||||
@use 'sass:map';
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
// Note: Color palettes are generated from primary: #3D6ABD
|
||||
$_palettes: (
|
||||
primary: (
|
||||
0: #000000,
|
||||
10: #001a42,
|
||||
20: #002e6b,
|
||||
25: #003880,
|
||||
30: #034395,
|
||||
35: #1c50a1,
|
||||
40: #2d5cae,
|
||||
50: #4975c9,
|
||||
60: #658fe5,
|
||||
70: #82aaff,
|
||||
80: #aec6ff,
|
||||
90: #d8e2ff,
|
||||
95: #edf0ff,
|
||||
98: #faf9ff,
|
||||
99: #fefbff,
|
||||
100: #ffffff,
|
||||
),
|
||||
secondary: (
|
||||
0: #000000,
|
||||
10: #141b2c,
|
||||
20: #293041,
|
||||
25: #343b4d,
|
||||
30: #3f4759,
|
||||
35: #4b5265,
|
||||
40: #575e71,
|
||||
50: #6f778b,
|
||||
60: #8990a5,
|
||||
70: #a4abc0,
|
||||
80: #bfc6dc,
|
||||
90: #dbe2f9,
|
||||
95: #edf0ff,
|
||||
98: #faf9ff,
|
||||
99: #fefbff,
|
||||
100: #ffffff,
|
||||
),
|
||||
tertiary: (
|
||||
0: #000000,
|
||||
10: #2a132d,
|
||||
20: #402843,
|
||||
25: #4c324f,
|
||||
30: #583e5a,
|
||||
35: #654967,
|
||||
40: #715573,
|
||||
50: #8b6d8d,
|
||||
60: #a686a7,
|
||||
70: #c2a1c2,
|
||||
80: #dfbbde,
|
||||
90: #fcd7fb,
|
||||
95: #ffebfc,
|
||||
98: #fff7fa,
|
||||
99: #fffbff,
|
||||
100: #ffffff,
|
||||
),
|
||||
neutral: (
|
||||
0: #000000,
|
||||
10: #1b1b1f,
|
||||
20: #303034,
|
||||
25: #3b3b3f,
|
||||
30: #46464a,
|
||||
35: #525256,
|
||||
40: #5e5e62,
|
||||
50: #77777a,
|
||||
60: #919094,
|
||||
70: #ababaf,
|
||||
80: #c7c6ca,
|
||||
90: #e3e2e6,
|
||||
95: #f2f0f4,
|
||||
98: #faf8fd,
|
||||
99: #fefbff,
|
||||
100: #ffffff,
|
||||
4: #0d0e11,
|
||||
6: #121316,
|
||||
12: #1f1f23,
|
||||
17: #292a2d,
|
||||
22: #343538,
|
||||
24: #38393c,
|
||||
87: #dbd9dd,
|
||||
92: #e9e7ec,
|
||||
94: #efedf1,
|
||||
96: #f5f3f7,
|
||||
),
|
||||
neutral-variant: (
|
||||
0: #000000,
|
||||
10: #191b23,
|
||||
20: #2e3038,
|
||||
25: #393b43,
|
||||
30: #44474f,
|
||||
35: #50525a,
|
||||
40: #5c5e67,
|
||||
50: #75777f,
|
||||
60: #8e9099,
|
||||
70: #a9abb4,
|
||||
80: #c5c6d0,
|
||||
90: #e1e2ec,
|
||||
95: #eff0fa,
|
||||
98: #faf9ff,
|
||||
99: #fefbff,
|
||||
100: #ffffff,
|
||||
),
|
||||
error: (
|
||||
0: #000000,
|
||||
10: #410002,
|
||||
20: #690005,
|
||||
25: #7e0007,
|
||||
30: #93000a,
|
||||
35: #a80710,
|
||||
40: #ba1a1a,
|
||||
50: #de3730,
|
||||
60: #ff5449,
|
||||
70: #ff897d,
|
||||
80: #ffb4ab,
|
||||
90: #ffdad6,
|
||||
95: #ffedea,
|
||||
98: #fff8f7,
|
||||
99: #fffbff,
|
||||
100: #ffffff,
|
||||
),
|
||||
);
|
||||
|
||||
$_rest: (
|
||||
secondary: map.get($_palettes, secondary),
|
||||
neutral: map.get($_palettes, neutral),
|
||||
neutral-variant: map.get($_palettes, neutral-variant),
|
||||
error: map.get($_palettes, error),
|
||||
);
|
||||
$_primary: map.merge(map.get($_palettes, primary), $_rest);
|
||||
$_tertiary: map.merge(map.get($_palettes, tertiary), $_rest);
|
||||
|
||||
$light-theme: mat.define-theme((
|
||||
color: (
|
||||
theme-type: light,
|
||||
primary: $_primary,
|
||||
tertiary: $_tertiary,
|
||||
),
|
||||
));
|
||||
@ -1,24 +1,8 @@
|
||||
/* You can add global styles to this file, and also import other style files */
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
@use './assets/themes/openlp-light-theme.scss';
|
||||
@use './assets/themes/_header-theme.scss' as header;
|
||||
@include mat.core();
|
||||
$olp-primary: mat.m2-define-palette(mat.$m2-indigo-palette, 500);
|
||||
$olp-accent: mat.m2-define-palette(mat.$m2-pink-palette, A200, A100, A400);
|
||||
|
||||
// The "warn" palette is optional and defaults to red if not specified.
|
||||
$olp-warn: mat.m2-define-palette(mat.$m2-red-palette);
|
||||
|
||||
$olp-theme: mat.m2-define-light-theme((
|
||||
color: (
|
||||
primary: $olp-primary,
|
||||
accent: $olp-accent,
|
||||
warn: $olp-warn,
|
||||
),
|
||||
density: 0,
|
||||
));
|
||||
|
||||
// Including only used components
|
||||
@include mat.all-component-themes($olp-theme);
|
||||
|
||||
* {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
@ -26,6 +10,8 @@ $olp-theme: mat.m2-define-light-theme((
|
||||
}
|
||||
|
||||
body {
|
||||
@include mat.all-component-themes(openlp-light-theme.$light-theme);
|
||||
@include header.theme(openlp-light-theme.$light-theme);
|
||||
font: 500 20px/32px Roboto, "Helvetica Neue", sans-serif;
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user