Skip to content

Commit

Permalink
SHIBUI-811 Implemented customizable theme
Browse files Browse the repository at this point in the history
  • Loading branch information
rmathis committed Sep 7, 2018
1 parent 4804797 commit 9d79770
Show file tree
Hide file tree
Showing 9 changed files with 172 additions and 23 deletions.
44 changes: 44 additions & 0 deletions ui/src/app/app.brand.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
import { brand as customBrand } from '../brand';
import { Brand } from './core/model/brand';

export const brand: Brand = {
header: {
title: 'Source Management'
},
logo: {
default: '/assets/shibboleth_logowordmark_color.png',
small: '/assets/shibboleth_icon_color_130x130.png',
large: '/assets/shibboleth_logowordmark_color.png',
alt: 'Shibboleth Logo - Click to be directed to www.shibboleth.net',
link: {
label: 'Shibboleth',
url: 'https://www.shibboleth.net/'
}
},
footer: {
links: [
{
label: 'Home Page',
url: 'https://www.shibboleth.net/',
description: 'Shibboleth.net open-source community home page'
},
{
label: 'Wiki',
url: 'https://wiki.shibboleth.net/',
description: 'Shibboleth.net open-source community wiki'
},
{
label: 'Issue Tracker',
url: 'https://issues.shibboleth.net/',
description: 'Shibboleth.net open-source community issue tracker'
},
{
label: 'Mailing List',
url: 'https://www.shibboleth.net/community/lists/',
description: 'Shibboleth.net open-source community mailing list'
}
],
text: 'Links to Shibboleth resources:'
},
...customBrand
};
23 changes: 13 additions & 10 deletions ui/src/app/app.component.html
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
<!--The content below is only a placeholder and can be replaced.-->
<nav class="navbar navbar-expand-md fixed-top">
<a class="navbar-brand" href="https://www.shibboleth.net/" target="_blank">
<img src="/assets/shibboleth_icon_color_130x130.png" width="30" height="30" class="d-inline-block align-top" alt="Shibboleth Logo - Click to be directed to www.shibboleth.net">
<span class="d-lg-inline d-none">Shibboleth</span>
<a class="navbar-brand" [href]="brand.logo.link.url" target="_blank" [title]="brand.logo.link.description">
<img [src]="brand.logo.small" width="30" height="30" class="d-inline-block align-top" [alt]="brand.logo.alt">
<span class="d-lg-inline d-none">{{ brand.logo.link.label }}</span>
</a>
<span class="navbar-text" i18n="@@label--app">Source Management</span>
<span class="navbar-text" i18n="@@label--app">{{ brand.header.title }}</span>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
Expand Down Expand Up @@ -66,11 +66,12 @@
<div class="row">
<div class="col-md-8 copyright">
<ul class="list-inline">
<li class="list-inline-item" i18n="@@link--links-to-shibboleth-resources">Links to Shibboleth resources:</li>
<li class="list-inline-item"><a href="https://www.shibboleth.net/" target="_blank" i18n="@@link--home-page" aria-label="Shibboleth.net open-source community home page">Home Page</a></li>
<li class="list-inline-item"><a href="https://wiki.shibboleth.net/" target="_blank" i18n="@@link--wiki" aria-label="Shibboleth.net open-source community wiki">Wiki</a></li>
<li class="list-inline-item"><a href="https://issues.shibboleth.net/" target="_blank" i18n="@@link--issue-tracker" aria-label="Shibboleth.net open-source community issue tracker">Issue Tracker</a></li>
<li class="list-inline-item"><a href="https://www.shibboleth.net/community/lists/" target="_blank" i18n="@@link--mailing-list" aria-label="Shibboleth.net open-source community mailing list">Mailing List</a></li>
<li class="list-inline-item">{{ brand.footer.text }}</li>
<li class="list-inline-item" *ngFor="let link of brand.footer.links">
<a [href]="link.url" target="_blank" [attr.aria-label]="link.description" [title]="link.description">
{{ link.label }}
</a>
</li>
</ul>
<p>
<ng-container *ngIf="version$ | async">
Expand All @@ -81,7 +82,9 @@
</p>
</div>
<div class="col-md-4 logo">
<a href="https://www.shibboleth.net/" target="_blank"><img src="/assets/shibboleth_logowordmark_color.png" class="img-fluid float-right" alt="Shibboleth Logo - Click to be directed to www.shibboleth.net"></a>
<a [href]="brand.logo.link.url" target="_blank" [title]="brand.logo.link.label">
<img [src]="brand.logo.default" class="img-fluid float-right" [alt]="brand.logo.alt">
</a>
</div>
</div>
</footer>
6 changes: 6 additions & 0 deletions ui/src/app/app.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,9 @@ import { Store } from '@ngrx/store';
import * as fromRoot from './core/reducer';
import { VersionInfo } from './core/model/version';
import { VersionInfoLoadRequestAction } from './core/action/version.action';

import { brand } from './app.brand';
import { Brand } from './core/model/brand';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
Expand All @@ -18,6 +21,9 @@ export class AppComponent implements OnInit {
version: string;
formatted$: Observable<string>;
today = new Date();
year = new Date().getFullYear();

brand: Brand = brand;

formatter = v => v && v.build ? `${v.build.version}-${v.git.commit.id}` : '';

Expand Down
29 changes: 29 additions & 0 deletions ui/src/app/core/model/brand.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
export interface Brand {
logo: Logo;
footer: Footer;
header: Header;
}

export interface Header {
title: string;
}

export interface Logo {
default: string;
small: string;
large: string;
alt: string;
link: Link;
[propName: string]: any;
}

export interface Footer {
links: Link[];
text: string;
}

export interface Link {
label: string;
url: string;
description?: string;
}
10 changes: 10 additions & 0 deletions ui/src/app/shared/pipe/replace.pipe.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import { PipeTransform, Pipe } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Pipe({ name: 'replace' })
export class ReplacePipe implements PipeTransform {
constructor(public sanitizer: DomSanitizer) { }
transform(value: string, query: { [propName: string]: string }): SafeHtml {
return '';
}
}
5 changes: 4 additions & 1 deletion ui/src/app/shared/shared.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import { InfoLabelDirective } from './directive/info-label.directive';
import { PrettyXml } from './pipe/pretty-xml.pipe';
import { ToggleSwitchComponent } from './switch/switch.component';
import { ContenteditableDirective } from './contenteditable/contenteditable.directive';
import { ReplacePipe } from './pipe/replace.pipe';

@NgModule({
imports: [
Expand All @@ -28,6 +29,7 @@ import { ContenteditableDirective } from './contenteditable/contenteditable.dire
ValidFormIconComponent,
InfoLabelDirective,
PrettyXml,
ReplacePipe,
ContenteditableDirective
],
exports: [
Expand All @@ -42,7 +44,8 @@ import { ContenteditableDirective } from './contenteditable/contenteditable.dire
ValidFormIconComponent,
ValidationClassDirective,
InfoLabelDirective,
ContenteditableDirective
ContenteditableDirective,
ReplacePipe
]
})
export class SharedModule { }
31 changes: 31 additions & 0 deletions ui/src/brand.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
//
// Color system
// Override these colors by uncommenting them and changing the value.
//

// $white: #FFF;
// $gray-100: #f8f9fa;
// $gray-200: #e9ecef;
// $gray-300: #dee2e6;
// $gray-400: #ced4da;
// $gray-500: #adb5bd;
// $gray-600: #868e96;
// $gray-700: #495057;
// $gray-800: #343a40;
// $gray-900: #212529;
// $black: #000;

// $blue: #00355f;
// $light-blue: #007db1;
// $indigo: #6610f2;
// $purple: #6f42c1;
// $pink: #e83e8c;
// $red: #d3190f;
// $orange: #fd7e14;
// $yellow: #ffc107;
// $green: #498500;
// $teal: #20c997;
// $cyan: #17a2b8;

// $dark-grey: #666666;
// $light-grey: #EEEEEE;
21 changes: 21 additions & 0 deletions ui/src/brand.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
/*
export const brand = {
logo: {
default: '',
small: '',
large: ''
},
footer: {
links: [
{
label: '',
url: ''
}
],
text: '',
copyright: ''
}
};
*/

export const brand = {};
26 changes: 14 additions & 12 deletions ui/src/theme/_palette.scss
Original file line number Diff line number Diff line change
Expand Up @@ -14,18 +14,6 @@ $gray-800: #343a40;
$gray-900: #212529;
$black: #000;

$grays: (
100: $gray-100,
200: $gray-200,
300: $gray-300,
400: $gray-400,
500: $gray-500,
600: $gray-600,
700: $gray-700,
800: $gray-800,
900: $gray-900
);

$blue: #00355f;
$light-blue: #007db1;
$indigo: #6610f2;
Expand All @@ -41,6 +29,20 @@ $cyan: #17a2b8;
$dark-grey: #666666;
$light-grey: #EEEEEE;

@import "../brand";

$grays: (
100: $gray-100,
200: $gray-200,
300: $gray-300,
400: $gray-400,
500: $gray-500,
600: $gray-600,
700: $gray-700,
800: $gray-800,
900: $gray-900
);

$colors: (
blue: $blue,
indigo: $indigo,
Expand Down

0 comments on commit 9d79770

Please sign in to comment.