/src/components/PersonaCard/PersonaCard.hbs

https://github.com/OfficeDev/office-ui-fabric-js · Handlebars · 45 lines · 43 code · 0 blank · 2 comment · 0 complexity · 76788c087f345b29bcd96328f0734c37 MD5 · raw file 

    

  1. <!-- Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. -->
    2. 

  2. <div class="ms-PersonaCard
    3. 

  3.   {{~#if props.modifer}} ms-PersonaCard--{{props.modfier}}{{/if~}}">
    4. 

  4.   <div class="ms-PersonaCard-persona">
    5. 

  5.     {{> Persona props=props.personaProps}}
    6. 

  6.   </div>
    7. 

  7.   <ul class="ms-PersonaCard-actions">
    8. 

  8.     <li data-action-id="chat" class="ms-PersonaCard-action" tabindex="1"><i class="ms-Icon ms-Icon--Chat"></i></li>
    9. 

  9.     <li data-action-id="phone" class="ms-PersonaCard-action is-active" tabindex="2"><i class="ms-Icon ms-Icon--Phone"></i></li>
    10. 

  10.     <li data-action-id="video" class="ms-PersonaCard-action" tabindex="3"><i class="ms-Icon ms-Icon--Video"></i></li>
    11. 

  11.     <li data-action-id="mail" class="ms-PersonaCard-action" tabindex="4"><i class="ms-Icon ms-Icon--Mail"></i></li>
    12. 

  12.     <li class="ms-PersonaCard-overflow" alt="View profile in Delve" title="View profile in Delve" >View profile</li>
    13. 

  13.     <li data-action-id="org" class="ms-PersonaCard-action ms-PersonaCard-orgChart" tabindex="5"><i class="ms-Icon ms-Icon--Org"></i></li>
    14. 

  14.   </ul>
    15. 

  15.   <div class="ms-PersonaCard-actionDetailBox">
    16. 

  16.     <div data-detail-id="mail" class="ms-PersonaCard-details">
    17. 

  17.       <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Personal:</span> <a class="ms-Link" href="mailto:alton.lafferty@outlook.com">alton.lafferty@outlook.com</a></div>
    18. 

  18.       <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Work:</span> <a class="ms-Link" href="mailto:alton.lafferty@outlook.com">altonlafferty@contoso.com</a></div>
    19. 

  19.     </div>
    20. 

  20.     <div data-detail-id="chat" class="ms-PersonaCard-details">
    21. 

  21.       <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Lync:</span>
    22. 

  22.       <a class="ms-Link" href="#">Start Lync call</a></div>
    23. 

  23.     </div>
    24. 

  24.     <div data-detail-id="phone" class="ms-PersonaCard-details">
    25. 

  25.       <div class="ms-PersonaCard-detailExpander"></div>
    26. 

  26.       <div class="ms-PersonaCard-detailLine">
    27. 

  27.         <span class="ms-PersonaCard-detailLabel">Details</span>
    28. 

  28.       </div>
    29. 

  29.       <div class="ms-PersonaCard-detailLine">
    30. 

  30.         <span class="ms-PersonaCard-detailLabel">Personal:</span> 555.206.2443
    31. 

  31.       </div>
    32. 

  32.       <div class="ms-PersonaCard-detailLine">
    33. 

  33.         <span class="ms-PersonaCard-detailLabel">Work:</span> 555.929.8240
    34. 

  34.       </div>
    35. 

  35.     </div>
    36. 

  36.     <div data-detail-id="video" class="ms-PersonaCard-details">
    37. 

  37.       <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Skype:</span>
    38. 

  38.       <a class="ms-Link" href="#">Start Skype call</a></div>
    39. 

  39.     </div>
    40. 

  40.       <!-- org chart -->
    41. 

  41.     <div data-detail-id="org" class="ms-PersonaCard-details">
    42. 

  42.       {{> OrgChart props=props.orgChartProps}}
    43. 

  43.     </div>
    44. 

  44.   </div>
    45. 

  45. </div>
    46.