Activity Timeline

Activity Timelines in Salesforce Lightning Design System

Activity Timelines in Salesforce Lightning Design System

Activity Timelines in Salesforce Lightning Design System

As we all know that the salesforce application are gradually moving to lighting , there is a need to migrate our classic visualforce pages to lightning UI. For this Salesforce has offered the CSS used for lightning. The Lightning Design System CSS could be downloaded here  https://drive.google.com/file/d/0B59oEC6MnukrTndwdERtT2RHcms/view?usp=sharing

Add the downloaded zip to the static resource with the label SLDS.

Now copy and paste the below code to a VF page to experience the Activity Timeline as you witness in the lightning UI.

<apex:page showHeader="true" sidebar="false" standardStylesheets="false">
<apex:stylesheet value="{!URLFOR($Resource.SLDS, 'assets/styles/salesforce-lightning-design-system.min.css')}" />

<center>
<h1> Activity  Timeline </h1> 
</center>
<hr/>
<ul>
  <li>
    <span class="slds-assistive-text">Task</span>
    <div class="slds-media">
      <div class="slds-media__body">
        <div class="slds-media slds-media--timeline slds-timeline__media--task">
          <div class="slds-media__figure slds-timeline__icon">
            <div class="slds-icon_container">
              <svg class="slds-icon slds-icon--small slds-icon-standard-task" aria-hidden="true">
                <use href="{!URLFOR($Resource.SLDS, '/assets/icons/standard-sprite/svg/symbols.svg#task')}"></use>
              </svg>
            </div>
          </div>
          <div class="slds-media__body">
            <div class="slds-media">
              <div class="slds-media__figure">
                <label class="slds-checkbox" for="mark-complete">
                  <input type="checkbox" name="checkbox" id="mark-complete" />
                  <span class="slds-checkbox--faux"></span>
                  <span class="slds-form-element__label slds-assistive-text">mark-complete</span>
                </label>
              </div>
              <div class="slds-media__body">
                <h3 class="slds-truncate" title="Review proposals for EBC deck with larger team and have marketing review this"><a href="javascript:void(0);">Review proposals for EBC deck with larger team and have marketing review this</a></h3>
                <ul class="slds-list--horizontal slds-wrap">
                  <li class="slds-m-right--large">
                    <span class="slds-text-title">Contact:</span>
                    <span class="slds-text-body--small"><a href="javascript:void(0);">Lei Chan</a></span>
                  </li>
                  <li class="slds-m-right--large">
                    <span class="slds-text-title">Assigned to:</span>
                    <span class="slds-text-body--small"><a href="javascript:void(0);">Betty Mason</a></span>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="slds-media__figure slds-media__figure--reverse">
        <div class="slds-timeline__actions">
          <p class="slds-timeline__date">Feb 24</p>
          <button class="slds-button slds-button--icon-border-filled slds-button--icon-x-small" aria-haspopup="true" title="More Options for Task, Review proposals">
            <svg class="slds-button__icon" aria-hidden="true">
              <use href="{!URLFOR($Resource.SLDS, '/assets/icons/utility-sprite/svg/symbols.svg#down')}"></use>
            </svg>
            <span class="slds-assistive-text">More Options for Task, Review proposals</span>
          </button>
        </div>
      </div>
    </div>
  </li>
  <li>
    <span class="slds-assistive-text">Event</span>
    <div class="slds-media">
      <div class="slds-media__body">
        <div class="slds-media slds-media--timeline slds-timeline__media--event">
          <div class="slds-media__figure slds-timeline__icon">
            <div class="slds-icon_container">
              <svg class="slds-icon slds-icon--small slds-icon-standard-event" aria-hidden="true">
                <use href="{!URLFOR($Resource.SLDS, '/assets/icons/standard-sprite/svg/symbols.svg#event')}"></use>
              </svg>
            </div>
          </div>
          <div class="slds-media__body">
            <h3 class="slds-truncate" title="Company One — EBC Meeting"><a href="javascript:void(0);">Company One — EBC Meeting</a></h3>
            <p class="slds-truncate">Let’s get together to review the theater’s layout and facilities. We’ll also discuss potential things that truncate at a certain width.</p>
            <ul class="slds-list--horizontal slds-wrap">
              <li class="slds-m-right--large">
                <span class="slds-text-title">Time:</span>
                <span class="slds-text-body--small"><a href="javascript:void(0);">Feb 23, 2015 11:00am–12:00pm</a></span>
              </li>
              <li class="slds-m-right--large">
                <span class="slds-text-title">Location:</span>
                <span class="slds-text-body--small"><a href="javascript:void(0);">300 Pike St, San Francisco CA</a></span>
              </li>
              <li class="slds-m-right--large">
                <span class="slds-text-title">Name:</span>
                <span class="slds-text-body--small"><a href="javascript:void(0);">Lei Chan</a>, <a href="javascript:void(0);">Jason Dewar</a>, <a href="javascript:void(0);">Gwen Jones</a> and <a href="javascript:void(0);">Pete Schaffer</a></span>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="slds-media__figure slds-media__figure--reverse">
        <div class="slds-timeline__actions">
          <p class="slds-timeline__date">Feb 24</p>
          <button class="slds-button slds-button--icon-border-filled slds-button--icon-x-small" aria-haspopup="true" title="More Options for Event, Company One">
            <svg class="slds-button__icon" aria-hidden="true">
              <use href="{!URLFOR($Resource.SLDS, '/assets/icons/utility-sprite/svg/symbols.svg#down')}"></use>
            </svg>
            <span class="slds-assistive-text">More Options for Event, Company One</span>
          </button>
        </div>
      </div>
    </div>
  </li>
  <li>
    <span class="slds-assistive-text">Call</span>
    <div class="slds-media">
      <div class="slds-media__body">
        <div class="slds-media slds-media--timeline slds-timeline__media--call">
          <div class="slds-media__figure slds-timeline__icon">
            <div class="slds-icon_container">
              <svg class="slds-icon slds-icon--small slds-icon-standard-log-a-call" aria-hidden="true">
                <use href="{!URLFOR($Resource.SLDS, '/assets/icons/standard-sprite/svg/symbols.svg#log_a_call')}"></use>
              </svg>
            </div>
          </div>
          <div class="slds-media__body">
            <h3 class="slds-truncate" title="Mobile conversation on Monday"><a href="javascript:void(0);">Mobile conversation on Monday</a></h3>
            <p class="slds-truncate">Lei seemed interested in closing this deal quickly! Let’s move.</p>
            <ul class="slds-list--horizontal slds-wrap">
              <li class="slds-m-right--large">
                <span class="slds-text-title">Name:</span>
                <span class="slds-text-body--small"><a href="javascript:void(0);">Lei Chan</a></span>
              </li>
              <li class="slds-m-right--large">
                <span class="slds-text-title">Assigned to:</span>
                <span class="slds-text-body--small"><a href="javascript:void(0);">Betty Mason</a></span>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="slds-media__figure slds-media__figure--reverse">
        <div class="slds-timeline__actions">
          <p class="slds-timeline__date">Feb 24</p>
          <button class="slds-button slds-button--icon-border-filled slds-button--icon-x-small" aria-haspopup="true" title="More Options for Call, Mobile conversation">
            <svg class="slds-button__icon" aria-hidden="true">
              <use href="{!URLFOR($Resource.SLDS, '/assets/icons/utility-sprite/svg/symbols.svg#down')}"></use>
            </svg>
            <span class="slds-assistive-text">More Options for Call, Mobile conversation</span>
          </button>
        </div>
      </div>
    </div>
  </li>
  <li>
    <span class="slds-assistive-text">Email</span>
    <div class="slds-media">
      <div class="slds-media__body">
        <div class="slds-media slds-media--timeline slds-timeline__media--email">
          <div class="slds-media__figure slds-timeline__icon">
            <div class="slds-icon_container">
              <svg class="slds-icon slds-icon--small slds-icon-standard-email" aria-hidden="true">
                <use href="{!URLFOR($Resource.SLDS, '/assets/icons/standard-sprite/svg/symbols.svg#email')}"></use>
              </svg>
            </div>
          </div>
          <div class="slds-media__body">
            <h3 class="slds-truncate" title="Mobile conversation on Monday"><a href="javascript:void(0);">Mobile conversation on Monday</a></h3>
            <p class="slds-truncate">Hi guys, Thanks for meeting with the team today and going through the proposals we saw. This goes on until it’s truncated.</p>
            <ul class="slds-list--horizontal slds-wrap">
              <li class="slds-truncate_container--50 slds-m-right--large slds-grid">
                <span class="slds-text-title">To:</span>
                <span class="slds-text-body--small slds-m-left--xx-small slds-truncate" title="Lei Chan with Long Name that might go on for quite some distance futher than you might expect"><a href="javascript:void(0);">Lei Chan with Long Name that might go on for quite some distance futher than you might expect</a></span>
                <span class="slds-no-flex slds-text-body--small"> + 44 more</span>
              </li>
              <li class="slds-m-right--large">
                <span class="slds-text-title">From:</span>
                <span class="slds-text-body--small"><a href="javascript:void(0);">Jason Dewar</a></span>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="slds-media__figure slds-media__figure--reverse">
        <div class="slds-timeline__actions">
          <p class="slds-timeline__date">Feb 24</p>
          <button class="slds-button slds-button--icon-border-filled slds-button--icon-x-small" aria-haspopup="true" title="More Options for Email, Mobile conversation">
            <svg class="slds-button__icon" aria-hidden="true">
              <use href="{!URLFOR($Resource.SLDS, '/assets/icons/utility-sprite/svg/symbols.svg#down')}"></use>
            </svg>
            <span class="slds-assistive-text">More Options for Email, Mobile conversation</span>
          </button>
        </div>
      </div>
    </div>
  </li>
</ul>
</apex:page>
Feel free to Comment or ask questions if you need help!

About Saurabh Dua

0 comments:

Post a Comment

Powered by Blogger.