This repository has been archived by the owner on Jun 14, 2018. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 66
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
d9741bc
commit 227405d
Showing
10 changed files
with
1,572 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| !demo/index.js |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,268 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
|
|
||
| <head> | ||
| <title>ngOfficeUiFabric | uif-persona-card demo</title> | ||
| <meta charset="utf-8" /> | ||
|
|
||
| <!-- office ui fabric css --> | ||
| <link rel="stylesheet" href="../../../../node_modules/office-ui-fabric/dist/css/fabric.min.css" /> | ||
| <link rel="stylesheet" href="../../../../node_modules/office-ui-fabric/dist/css/fabric.components.min.css" /> | ||
| <!-- angular library --> | ||
| <script src="../../../../node_modules/angular/angular.min.js"></script> | ||
| <!-- ngofficeuifabric library --> | ||
| <script src="../../../../dist/ngOfficeUIFabric.js"></script> | ||
| <script src="index.js"></script> | ||
| </head> | ||
|
|
||
| <body ng-app="demoApp"> | ||
|
|
||
| <h1 class="ms-font-su">Persona Card Demo | <uif-persona-card></h1> | ||
| <em>In order for this demo to work you must first build the library in debug mode.</em> | ||
|
|
||
| <p> </p> | ||
|
|
||
|
|
||
|
|
||
| <div ng-controller="personaCardController"> | ||
|
|
||
| <p> | ||
| You can control presence of the user, e.g.: | ||
| <uif-dropdown ng-model="vm.presence"> | ||
| <uif-dropdown-option ng-repeat="(key, val) in vm.presenceOptions" value="{{key}}">{{val}}</uif-dropdown-option> | ||
| </uif-dropdown> | ||
| </p> | ||
|
|
||
| <p> | ||
| You can control size of the persona card, e.g.: | ||
| <uif-dropdown ng-model="vm.size"> | ||
| <uif-dropdown-option ng-repeat="(key, val) in vm.sizeOptions" value="{{key}}">{{val}}</uif-dropdown-option> | ||
| </uif-dropdown> | ||
| </p> | ||
|
|
||
| <p> | ||
| You can control style of the persona card, e.g.: | ||
| <uif-dropdown ng-model="vm.style"> | ||
| <uif-dropdown-option ng-repeat="(key, val) in vm.styleOptions" value="{{key}}">{{val}}</uif-dropdown-option> | ||
| </uif-dropdown> | ||
| </p> | ||
|
|
||
| <p> </p> | ||
|
|
||
| <div> | ||
| <uif-persona-card uif-style="{{vm.style}}" uif-size="{{vm.size}}" uif-presence="{{vm.presence}}" uif-image-url="Persona.Person2.png"> | ||
| <uif-persona-card-primary-text>Alton Lafferty</uif-persona-card-primary-text> | ||
| <uif-persona-card-secondary-text>Interior Designer, Contoso</uif-persona-card-secondary-text> | ||
| <uif-persona-card-tertiary-text>Office: 7/1234</uif-persona-card-tertiary-text> | ||
| <uif-persona-card-optional-text>Available - Video capable</uif-persona-card-optional-text> | ||
| <uif-persona-card-action uif-icon="chat" uif-placeholder="regular"> | ||
| <uif-persona-card-detail-line> | ||
| <uif-persona-card-detail-label>Lync:</uif-persona-card-detail-label> | ||
| <uif-link ng-href="#">Start Lync call</uif-link> | ||
| </uif-persona-card-detail-line> | ||
| </uif-persona-card-action> | ||
| <uif-persona-card-action uif-icon="phone" uif-placeholder="regular"> | ||
| <uif-persona-card-detail-line> | ||
| <uif-persona-card-detail-label>Personal:</uif-persona-card-detail-label> 555.206.2443 | ||
| </uif-persona-card-detail-line> | ||
| <uif-persona-card-detail-line> | ||
| <uif-persona-card-detail-label>Work:</uif-persona-card-detail-label> 555.929.8240 | ||
| </uif-persona-card-detail-line> | ||
| </uif-persona-card-action> | ||
| <uif-persona-card-action uif-icon="video" uif-placeholder="regular"> | ||
| <uif-persona-card-detail-line> | ||
| <uif-persona-card-detail-label>Skype:</uif-persona-card-detail-label> | ||
| <uif-link ng-href="#">Start Skype call</uif-link> | ||
| </uif-persona-card-detail-line> | ||
| </uif-persona-card-action> | ||
| <uif-persona-card-action uif-icon="mail" uif-placeholder="regular"> | ||
| <uif-persona-card-detail-line> | ||
| <uif-persona-card-detail-label>Personal:</uif-persona-card-detail-label> | ||
| <uif-link ng-href="mailto:alton.lafferty@outlook.com">alton.lafferty@outlook.com</uif-link> | ||
| </uif-persona-card-detail-line> | ||
| <uif-persona-card-detail-line> | ||
| <uif-persona-card-detail-label>Work:</uif-persona-card-detail-label> | ||
| <uif-link ng-href="mailto:alton.lafferty@outlook.com">altonlafferty@contoso.com</uif-link> | ||
| </uif-persona-card-detail-line> | ||
| </uif-persona-card-action> | ||
| <uif-persona-card-action uif-icon="org" uif-placeholder="topright"> | ||
| <div class="ms-OrgChart"> | ||
| <div class="ms-OrgChart-group"> | ||
| <ul class="ms-OrgChart-list"> | ||
| <li class="ms-OrgChart-listItem"> | ||
| <button class="ms-OrgChart-listItemBtn"> | ||
| <div class="ms-Persona"> | ||
| <div class="ms-Persona-imageArea"> | ||
| <div class="ms-Persona-initials ms-Persona-initials--darkBlue">RM</div> | ||
| <img class="ms-Persona-image" src="Persona.Person2.png"> | ||
| </div> | ||
| <div class="ms-Persona-presence"></div> | ||
| <div class="ms-Persona-details"> | ||
| <div class="ms-Persona-primaryText">Russel Miller</div> | ||
| <div class="ms-Persona-secondaryText">Sales</div> | ||
| </div> | ||
| </div> | ||
| </button> | ||
| </li> | ||
| <li class="ms-OrgChart-listItem"> | ||
| <button class="ms-OrgChart-listItemBtn"> | ||
| <div class="ms-Persona"> | ||
| <div class="ms-Persona-imageArea"> | ||
| <div class="ms-Persona-initials ms-Persona-initials--green">DF</div> | ||
| <img class="ms-Persona-image" src="Persona.Person2.png"> | ||
| </div> | ||
| <div class="ms-Persona-presence"></div> | ||
| <div class="ms-Persona-details"> | ||
| <div class="ms-Persona-primaryText">Douglas Fielder</div> | ||
| <div class="ms-Persona-secondaryText">Public Relations</div> | ||
| </div> | ||
| </div> | ||
| </button> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| <div class="ms-OrgChart-group"> | ||
| <div class="ms-OrgChart-groupTitle">Manager</div> | ||
| <ul class="ms-OrgChart-list"> | ||
| <li class="ms-OrgChart-listItem"> | ||
| <button class="ms-OrgChart-listItemBtn"> | ||
| <div class="ms-Persona"> | ||
| <div class="ms-Persona-imageArea"> | ||
| <div class="ms-Persona-initials ms-Persona-initials--red">GS</div> | ||
| <img class="ms-Persona-image" src="Persona.Person2.png"> | ||
| </div> | ||
| <div class="ms-Persona-presence"></div> | ||
| <div class="ms-Persona-details"> | ||
| <div class="ms-Persona-primaryText">Grant Steel</div> | ||
| <div class="ms-Persona-secondaryText">Sales</div> | ||
| </div> | ||
| </div> | ||
| </button> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| <div class="ms-OrgChart-group"> | ||
| <div class="ms-OrgChart-groupTitle">Staff</div> | ||
| <ul class="ms-OrgChart-list"> | ||
| <li class="ms-OrgChart-listItem"> | ||
| <button class="ms-OrgChart-listItemBtn"> | ||
| <div class="ms-Persona"> | ||
| <div class="ms-Persona-imageArea"> | ||
| <div class="ms-Persona-initials ms-Persona-initials--teal">HW</div> | ||
| <img class="ms-Persona-image" src="Persona.Person2.png"> | ||
| </div> | ||
| <div class="ms-Persona-presence"></div> | ||
| <div class="ms-Persona-details"> | ||
| <div class="ms-Persona-primaryText">Harvey Wallin</div> | ||
| <div class="ms-Persona-secondaryText">Public Relations</div> | ||
| </div> | ||
| </div> | ||
| </button> | ||
| </li> | ||
| <li class="ms-OrgChart-listItem"> | ||
| <button class="ms-OrgChart-listItemBtn"> | ||
| <div class="ms-Persona"> | ||
| <div class="ms-Persona-imageArea"> | ||
| <div class="ms-Persona-initials ms-Persona-initials--purple">ML</div> | ||
| <img class="ms-Persona-image" src="Persona.Person2.png"> | ||
| </div> | ||
| <div class="ms-Persona-presence"></div> | ||
| <div class="ms-Persona-details"> | ||
| <div class="ms-Persona-primaryText">Marcus Lauer</div> | ||
| <div class="ms-Persona-secondaryText">Technical Support</div> | ||
| </div> | ||
| </div> | ||
| </button> | ||
| </li> | ||
| <li class="ms-OrgChart-listItem"> | ||
| <button class="ms-OrgChart-listItemBtn"> | ||
| <div class="ms-Persona"> | ||
| <div class="ms-Persona-imageArea"> | ||
| <div class="ms-Persona-initials ms-Persona-initials--lightBlue">MG</div> | ||
| <img class="ms-Persona-image" src="Persona.Person2.png"> | ||
| </div> | ||
| <div class="ms-Persona-presence"></div> | ||
| <div class="ms-Persona-details"> | ||
| <div class="ms-Persona-primaryText">Marcel Groce</div> | ||
| <div class="ms-Persona-secondaryText">Delivery</div> | ||
| </div> | ||
| </div> | ||
| </button> | ||
| </li> | ||
| <li class="ms-OrgChart-listItem"> | ||
| <button class="ms-OrgChart-listItemBtn"> | ||
| <div class="ms-Persona"> | ||
| <div class="ms-Persona-imageArea"> | ||
| <div class="ms-Persona-initials ms-Persona-initials--green">JF</div> | ||
| <img class="ms-Persona-image" src="Persona.Person2.png"> | ||
| </div> | ||
| <div class="ms-Persona-presence"></div> | ||
| <div class="ms-Persona-details"> | ||
| <div class="ms-Persona-primaryText">Jessica Fischer</div> | ||
| <div class="ms-Persona-secondaryText">Marketing</div> | ||
| </div> | ||
| </div> | ||
| </button> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| </div> | ||
| </uif-persona-card-action> | ||
| <uif-persona-card-action uif-placeholder="overflow"> | ||
| View profile on Delve | ||
| </uif-persona-card-action> | ||
| </uif-persona-card> | ||
| </div> | ||
|
|
||
| <p> | ||
| Above sample is rendered by this sample markup: | ||
| <br /> | ||
| <pre> | ||
| <uif-persona-card uif-style="{{vm.style}}" uif-size="{{vm.size}}" uif-presence="{{vm.presence}}" uif-image-url="Persona.Person2.png"> | ||
| <uif-persona-card-primary-text>Alton Lafferty</uif-persona-card-primary-text> | ||
| <uif-persona-card-secondary-text>Interior Designer, Contoso</uif-persona-card-secondary-text> | ||
| <uif-persona-card-tertiary-text>Office: 7/1234</uif-persona-card-tertiary-text> | ||
| <uif-persona-card-optional-text>Available - Video capable</uif-persona-card-optional-text> | ||
| <uif-persona-card-action uif-icon="chat" uif-placeholder="regular"> | ||
| <uif-persona-card-detail-line> | ||
| <uif-persona-card-detail-label>Lync:</uif-persona-card-detail-label> | ||
| <uif-link ng-href="#">Start Lync call</uif-link> | ||
| </uif-persona-card-detail-line> | ||
| </uif-persona-card-action> | ||
| <uif-persona-card-action uif-icon="phone" uif-placeholder="regular"> | ||
| <uif-persona-card-detail-line> | ||
| <uif-persona-card-detail-label>Personal:</uif-persona-card-detail-label> 555.206.2443 | ||
| </uif-persona-card-detail-line> | ||
| <uif-persona-card-detail-line> | ||
| <uif-persona-card-detail-label>Work:</uif-persona-card-detail-label> 555.929.8240 | ||
| </uif-persona-card-detail-line> | ||
| </uif-persona-card-action> | ||
| <uif-persona-card-action uif-icon="video" uif-placeholder="regular"> | ||
| <uif-persona-card-detail-line> | ||
| <uif-persona-card-detail-label>Skype:</uif-persona-card-detail-label> | ||
| <uif-link ng-href="#">Start Skype call</uif-link> | ||
| </uif-persona-card-detail-line> | ||
| </uif-persona-card-action> | ||
| <uif-persona-card-action uif-icon="mail" uif-placeholder="regular"> | ||
| <uif-persona-card-detail-line> | ||
| <uif-persona-card-detail-label>Personal:</uif-persona-card-detail-label> | ||
| <uif-link ng-href="mailto:alton.lafferty@outlook.com">alton.lafferty@outlook.com</uif-link> | ||
| </uif-persona-card-detail-line> | ||
| <uif-persona-card-detail-line> | ||
| <uif-persona-card-detail-label>Work:</uif-persona-card-detail-label> | ||
| <uif-link ng-href="mailto:alton.lafferty@outlook.com">altonlafferty@contoso.com</uif-link> | ||
| </uif-persona-card-detail-line> | ||
| </uif-persona-card-action> | ||
| <uif-persona-card-action uif-icon="org" uif-placeholder="topright"> | ||
| <!-- Org chart --> | ||
| </uif-persona-card-action> | ||
| <uif-persona-card-action uif-placeholder="overflow"> | ||
| View profile on Delve | ||
| </uif-persona-card-action> | ||
| </uif-persona-card> | ||
| </pre> | ||
| </p> | ||
| </div> | ||
| </body> | ||
|
|
||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| 'use strict'; | ||
|
|
||
| var demoApp = angular.module('demoApp', [ | ||
| 'officeuifabric.core', | ||
| 'officeuifabric.components.personacard', | ||
| 'officeuifabric.components.dropdown' | ||
| ]).controller('personaCardController', ['$scope', personaCardDemoController]); | ||
|
|
||
| function personaCardDemoController($scope) { | ||
| $scope.vm = { | ||
| presence: "dnd", | ||
| size: 'small', | ||
| style: 'round', | ||
| presenceOptions: { | ||
| 'available': 'Available', | ||
| 'away': 'Away', | ||
| 'blocked': 'Blocked', | ||
| 'busy': 'Busy', | ||
| 'dnd': 'Do Not Disturb', | ||
| 'offline': 'Offline' | ||
| }, | ||
| sizeOptions: { | ||
| 'xsmall': 'Extra small', | ||
| 'small': 'Small', | ||
| 'medium': 'Medium', | ||
| 'large': 'Large', | ||
| 'xlarge': 'Extra large' | ||
| }, | ||
| styleOptions: { | ||
| 'round' : 'Round', | ||
| 'square' : 'Square' | ||
| } | ||
| }; | ||
|
|
||
|
|
||
| } |
Oops, something went wrong.