inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-05-26 17:24:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

#534 improved login background customisation

Browse Source 
- now login background can be defined via property
- readme updates
This commit is contained in:
Denys Vuika 2016-08-23 16:31:37 +01:00
parent b270e60025
commit fc058095f1
5 changed files with 42 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
ng2-components/ng2-alfresco-login/README.md
View File

@ -159,13 +159,8 @@ You can also specify ECM and BPM, in this case both system components
It is possible changing logo and background images to custom values.
```html
<style>

alfresco-login >>> .login-content {

background-image: url(http://images.freeimages.com/images/previews/638/wood-wall-for-background-1634466.jpg) !important;

}

</style>
<alfresco-login

[backgroundImageUrl]="'http://images.freeimages.com/images/previews/638/wood-wall-for-background-1634466.jpg'"
[logoImageUrl]="'http://images.freeimages.com/images/previews/eac/honeybee-with-a-house-1633609.jpg'"
>
</alfresco-login>
```
@ -174,6 +169,15 @@ Should give you something like the following:
![custom login](assets/custom-login.png)
Alternatively you can bind to your component properties and provide values dynamically if needed:
```html
<alfresco-login

[backgroundImageUrl]="myCustomBackground"
[logoImageUrl]="myCustomLogo"
>
</alfresco-login>
```
## Build from sources
Alternatively you can build component from sources with the following commands:

25
ng2-components/ng2-alfresco-login/src/assets/images/background.svg Normal file
View File

@ -0,0 +1,25 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 20.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="2560px"
height="2560px" viewBox="0 0 2560 2560" enable-background="new 0 0 2560 2560" xml:space="preserve">
<g id="B">
<rect y="0" fill="#FAFAFA" width="2560" height="2560"/>
<g>
<defs>
<rect id="SVGID_1_" width="2560" height="2560"/>
</defs>
<clipPath id="SVGID_2_">
<use xlink:href="#SVGID_1_" overflow="visible"/>
</clipPath>
<g clip-path="url(#SVGID_2_)">
<circle opacity="0.8" fill="#8BC34A" cx="16" cy="6272" r="5120"/>
<circle opacity="0.6" fill="#03A9F4" cx="4096" cy="2048" r="2560"/>
<circle opacity="0.8" fill="#FF9800" cx="0" cy="-256" r="1920"/>
<circle opacity="0.3" fill="#FFD600" cx="-384" cy="1280" r="1280"/>
</g>
</g>
</g>
<g id="Layer_2" display="none">
<rect y="640" display="inline" fill="none" stroke="#FFFFFF" stroke-miterlimit="10" width="2560" height="1280"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

3
ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.css
View File

@ -22,7 +22,8 @@
}
:host .content-layout {
background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIwLjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMTI4MHB4Ig0KCSBoZWlnaHQ9IjEyODBweCIgdmlld0JveD0iMCAwIDEyODAgMTI4MCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTI4MCAxMjgwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnIGlkPSJCIj4NCgk8Zz4NCgkJPGRlZnM+DQoJCQk8cmVjdCBpZD0iU1ZHSURfMV8iIHg9Ii01MTIwIiB5PSIwIiB3aWR0aD0iMjU2MCIgaGVpZ2h0PSIyNTYwIi8+DQoJCTwvZGVmcz4NCgkJPGNsaXBQYXRoIGlkPSJTVkdJRF8yXyI+DQoJCQk8dXNlIHhsaW5rOmhyZWY9IiNTVkdJRF8xXyIgIG92ZXJmbG93PSJ2aXNpYmxlIi8+DQoJCTwvY2xpcFBhdGg+DQoJCTxnIGNsaXAtcGF0aD0idXJsKCNTVkdJRF8yXykiPg0KCQkJPGNpcmNsZSBvcGFjaXR5PSIwLjgiIGZpbGw9IiM4QkMzNEEiIGN4PSItNTEwNCIgY3k9IjYyNzIiIHI9IjUxMjAiLz4NCgkJCTxjaXJjbGUgb3BhY2l0eT0iMC42IiBmaWxsPSIjMDNBOUY0IiBjeD0iLTEwMjQiIGN5PSIyMDQ4IiByPSIyNTYwIi8+DQoJCTwvZz4NCgk8L2c+DQoJPHJlY3QgeT0iMCIgZmlsbD0iI0ZBRkFGQSIgd2lkdGg9IjEyODAiIGhlaWdodD0iMTI4MCIvPg0KCTxnPg0KCQk8ZGVmcz4NCgkJCTxyZWN0IGlkPSJTVkdJRF8zXyIgd2lkdGg9IjEyODAiIGhlaWdodD0iMTI4MCIvPg0KCQk8L2RlZnM+DQoJCTxjbGlwUGF0aCBpZD0iU1ZHSURfNF8iPg0KCQkJPHVzZSB4bGluazpocmVmPSIjU1ZHSURfM18iICBvdmVyZmxvdz0idmlzaWJsZSIvPg0KCQk8L2NsaXBQYXRoPg0KCQk8ZyBjbGlwLXBhdGg9InVybCgjU1ZHSURfNF8pIj4NCgkJCTxjaXJjbGUgb3BhY2l0eT0iMC44IiBmaWxsPSIjOEJDMzRBIiBjeD0iOCIgY3k9IjMxMzYiIHI9IjI1NjAiLz4NCgkJCTxjaXJjbGUgb3BhY2l0eT0iMC42IiBmaWxsPSIjMDNBOUY0IiBjeD0iMjA0OCIgY3k9IjEwMjQiIHI9IjEyODAiLz4NCgkJCTxjaXJjbGUgb3BhY2l0eT0iMC44IiBmaWxsPSIjRkY5ODAwIiBjeD0iMCIgY3k9Ii0xMjgiIHI9Ijk2MCIvPg0KCQkJPGNpcmNsZSBvcGFjaXR5PSIwLjMiIGZpbGw9IiNGRkQ2MDAiIGN4PSItMTkyIiBjeT0iNjQwIiByPSI2NDAiLz4NCgkJPC9nPg0KCTwvZz4NCjwvZz4NCjxnIGlkPSJMYXllcl8yIiBkaXNwbGF5PSJub25lIj4NCjwvZz4NCjwvc3ZnPg0K') center / cover;
background-size: cover;
background-position: center;
height: 100%;
padding: 0;
}

3
ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.html
View File

@ -1,4 +1,5 @@
<div class="content-grid mdl-grid content-layout login-content">
<div class="content-grid mdl-grid content-layout login-content"
[style.background-image]="'url(' + (backgroundImageUrl || baseComponentPath + '/../assets/images/background.svg') + ')'">
<div class="login-card-wide mdl-card mdl-shadow--4dp">
<form [ngFormModel]="form" (submit)="onSubmit(form.value, $event)">
<div class="mdl-card__title alfresco-logo">

3
ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.ts
View File

@ -44,6 +44,9 @@ export class AlfrescoLoginComponent {
@Input()
logoImageUrl: string;
@Input()
backgroundImageUrl: string;
@Input()
providers: string [] ;