Skip to content

Commit

Permalink
Merged in feature/SHIBUI-811 (pull request #192)
Browse files Browse the repository at this point in the history
SHIBUI-811 Implemented customizable theme

Approved-by: Shibui Jenkins <shibui.jenkins@gmail.com>
Approved-by: Ryan Mathis <rmathis@unicon.net>
  • Loading branch information
rmathis committed Sep 11, 2018
2 parents 03b2f50 + 22483fd commit 8db57a7
Show file tree
Hide file tree
Showing 12 changed files with 267 additions and 35 deletions.
60 changes: 60 additions & 0 deletions ui/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,66 @@ For Providers and Filters, the forms in SHIB-UI are built based on the standard

[Bootstrap](http://getbootstrap.com/) 4 is used for the css framework in SHIB-UI, and provides our base theme, a responsive grid system, consistent styling across all major browsers, and pre-styled components which are connected to Angular using ng-bootstrap, a 3rd party framework.

# Customizing UI

Within the `ui > src` folder, there are two files which can be used to customize the user interface quickly.

### Color Scheme
The `Brand.scss` contains the palette information used by bootstrap to color the user interface buttons and other components. Uncomment the color you wish to override and change the hex value accordingly and rebuild the user interface.

For example:

`// $blue: #00355f;`

change to...

`$blue: #0000FF;`

If you wish to change the __"primary"__ color or any other mapping according to Bootstrap's conventions, there is a block of mappings at the bottom of the `Brand.scss` file to accomodate this as well. Uncomment and change the value allocated to the corresponding aspect of the theme you wish to change.

The supported values are:

`$brand-primary: $blue;` - The primary color used throughout the site. Default: dark blue.

`$brand-secondary: $gray-700;` - An accept color used throughout the site. Default: dark gray.

`$brand-success: $green;` - Indicates success or some other positive action. Default: green.

`$brand-info: $light-blue;` - Indicates some sort of informative text or action for the user. Default: light blue.

`$brand-warning: $yellow;` - Indicates a warning to the user. Default: yellow.

`$brand-danger: $red;` - Indicates a dangerous action or error. Default: red.

`$brand-light: $light-grey;` - Color used for accents, text, etc throughout application. Default: light grey.

`$brand-dark: $dark-grey;` - Color used for accents, text, etc throughout application. Default: dark grey.

### Logos / Footer
The `Brand.ts` contains the links, text, and image paths to modify the logos, text, and links found within the header and footer. Override the values within this Typescript file and rebuild the user interface to view changes. If the local server should host these files, they should be added to the assets folder.

For example:

`export const brand = {};`

change to...

`export const brand = {
header: 'Metadata Management'
};`

### Sitewide text
Finally, this project has support for internationalization (i18n). In the folder `backend > src > main > resources > i18n` folder there is a group of files which can be used to modify the text seen throughout the application. In order to change the default value, you can override the text in the messages_en file with the desired text.

For example:

`action.logout=Logout`

change to...

`action.logout=Sign Out`


# Development

## Scaffolding
Expand Down
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;
}
4 changes: 2 additions & 2 deletions ui/src/app/metadata/manager/container/manager.component.scss
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,10 @@
}

.nav-tabs, .nav-link.active {
border-color: $blue;
border-color: $brand-primary;
}

.nav-link:hover {
border-bottom-color: $blue;
border-bottom-color: $brand-primary;
}
}
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 { }
4 changes: 2 additions & 2 deletions ui/src/app/shared/switch/switch.component.scss
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@

$transition-duration: 400ms;

$off-color: $red;
$on-color: $light-blue;
$off-color: $brand-danger;
$on-color: $brand-info;

$distance: 26px;

Expand Down
44 changes: 44 additions & 0 deletions ui/src/brand.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
//
// 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;

/*
*** Brand definitions
*/

// $brand-primary: $blue;
// $brand-secondary: $gray-700;
// $brand-success: $green;
// $brand-info: $light-blue;
// $brand-warning: $yellow;
// $brand-danger: $red;
// $brand-light: $light-grey;
// $brand-dark: $dark-grey;
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 = {};
Loading

0 comments on commit 8db57a7

Please sign in to comment.