JSFiddle - React, Tailwind, and code Playground

Salesforce UI - What's New

by Hugo Carneiro

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css">
<div class="content-main"> <!-- YOU DON'T NEED THIS -->
  <div class="row"> <!-- YOU DON'T NEED THIS -->
    <div class="col-sm-8 col-sm-offset-2"> <!-- YOU DON'T NEED THIS -->
      
      <div class="loading-message ready">
        <p>Newly downloaded or updated files will be displayed here.</p>
        <p>Loading</p>
      </div>
      <div class="no-files">
        <p>Newly downloaded or updated files will be displayed here.</p>
        <p>No files found</p>
      </div>
      
      <div class="offline-notification">You're offline</div>
      
      <div class="popup-screen">
        <div class="popup-wrapper">
          <div class="popup-content">
            <p class="popup-title">Updating</p>
            <p>A newer version of the file is being downloaded.</p>
          </div>
          <div class="popup-bottom">
            <div class="progress">
              <div class="progress-bar progress-bar-warning progress-bar-striped active" role="progressbar" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100" style="width: 35%">
                <span class="sr-only">45%</span>
              </div>
            </div>
            <div class="single-button">
              <div class="center-button" id="close-popup">Close</div>
            </div>
            <div class="double-buttons">
              <div class="left-button" id="open-file">Open current version</div>
              <div class="right-button" id="update-file">Wait</div>
            </div>
          </div>
        </div>
      </div>
      
      <div class="list list-default animated fadeIn">
        <ul id="list-holder">
          <li class="linked highlight downloading" data-file-type="pdf">
            <div class="list-desc">
              <p class="list-title">file_name_1.pdf</p>
              <p>Downloaded: 2015/05/25, 19:14:02</p>
            </div>
          </li>
          <li...

CSS

body {
  width: 100%;
  height: 100vh;
  margin: 0;
  background-color: #f1f1f1;
}

.content-main {
  padding-left: 16px;
  padding-right: 16px;
}

.row {
  padding-top: 60px;
}

/* MESSAGES */
.loading-message,
.long-load,
.no-files,
.offline {
  display: none;
  text-align: center;
  font-size: 1.2em;
}

.loading-message.ready,
.long-load.ready,
.no-files.ready,
.offline.ready {
  display: block;
}

.offline-notification {
  position: fixed;
  bottom: -46px;
  left: 0;
  right: 0;
  padding: 12px 16px;
  background-color: #435464;
  color: #FFFFFF;
  font-size: 1em;
  line-height: 22px;
  text-align: center;
  z-index: 2;
  
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.offline-notification.ready {
  bottom: 0;
}

/* LISTS */
.list {
  display: none;
}
.list.ready {
  display: block;
}

.list.list-default ul {
  padding: 0;
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 200;
}

.list.list-default ul > li {
  list-style: none;
  border-bottom: 1px solid rgba(51, 51, 51, 0.2);
  padding: 10px 10px 10px 15px;
  position: relative;
  cursor: pointer;
  color: #333333;
}

.list.list-default ul > li.linked {
  padding-right: 44px;
}

.list.list-default ul > li .list-title {
  font-size: 1em;
  font-weight: 500;
  margin: 0;
}

.list.list-default ul > li p + p {
  color: #C5C5C5;
  margin: 0;
  font-size: 0.8em;
}

.list.list-default ul > li.highlight {
  padding: 10px 10px 10px 10px;
  border-left: 5px solid #FF671B;
  color: #333;
}

.list.list-default ul > li.highlight .list-title {
  font-weight: 600;
}

.list.list-default ul > li.highlight p + p {
  color: #ADADAD;
}

/* POPUP STYLES */
.popup-screen {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0,0,0,0.45);
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.popup-screen.ready {
  opacity: 1;
  visibility: visible;
}

.popup-wrapper {
  position:...

JavaScript

// Just change these values
var haveFiles = true; // TRUE or FALSE

// Where the magic happens
setTimeout(function() {
	showFiles();
}, 1000);

// Setup Listeners
$('li.linked').on('click', function() {
  if ( $(this).hasClass('downloading') ) {
    $('.popup-wrapper').addClass('single');
    $('.popup-content').html('<p class="popup-title">Download in progress</p><p>The file will open when the download is finished.</p>');
    $('.popup-screen').addClass('ready');
  } else if ( $(this).hasClass('update') ) {
    $('.popup-wrapper').addClass('double');
    $('.popup-content').html('<p class="popup-title">Update in progress</p><p>A newer version of the file is being downloaded.</p>');
    $('.popup-screen').addClass('ready');
  } else {
    alert('This will open the file now.');
  }
});

$('#close-popup').on('click', function() {
	$('.popup-screen').removeClass('ready');
  $('.popup-wrapper').removeClass('single');
});

$('#open-file').on('click', function() {
	$('.popup-screen').removeClass('ready');
  $('.popup-wrapper').removeClass('double');
	alert('This will open the file in it\'s current version.');
});

$('#update-file').on('click', function() {
	$('.popup-screen').removeClass('ready');
  $('.popup-wrapper').removeClass('double');
});

// Setup of functions
function showFiles() {
  if (haveFiles) {
    $('.loading-message').removeClass('ready');
    $('.list').addClass('ready');
  } else {
    showNoFiles();
  }
}

function showNoFiles( message ) {
	$('.loading-message').removeClass('ready');
  $('.no-files').addClass('ready');
}

function showOfflineNotif() {
	$('.offline-notification').addClass('ready');
  
  // Time to remove the notification of the screen
  setTimeout(function() {
  	$('.offline-notification').removeClass('ready');
  }, 6000);
}