JSFiddle - React, Tailwind, and code Playground

File Manager

by Hugo Carneiro

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/tether/1.3.1/js/tether.min.js"></script>
<div class="file-manager-wrapper">

  <div class="file-manager-header">
    <h1><i class="fa fa-folder" aria-hidden="true"></i> File Manager</h1>
    <div class="sort-search-holder">
      <div class="form-group">
        <label for="sort-files" class="select-proxy-display">
          <span class="icon fa fa-chevron-down"></span>
          <span class="select-value-proxy">Show all file types</span>
          <select name="sort_files" id="sort-files" data-label="select" class="hidden-select form-control">
            <option selected value="all">Show all file types</option>
            <option value="documents">Show only document files</option>
            <option value="images">Show only images</option>
            <option value="videos">Show only video files</option>
            <option value="audio">Show only audio files</option>
            <option value="fonts">Show only fonts</option>
          </select>
        </label>
      </div>
      <div class="form-group">
        <input type="search" class="form-control file-manager-search" id="file_search" name="file-search" placeholder="Search all files">
        <button class="btn btn-primary search-files-btn"><i class="fa fa-search" aria-hidden="true"></i></button>
      </div>
    </div>
  </div>

  <div class="file-manager-body">
    <div class="file-manager-leftside">
      <div class="btn btn-primary new-btn">New</div>
      <div class="new-menu">
        <ul>
          <li><i class="fa fa-plus-circle" aria-hidden="true"></i> Create new folder</li>
          <hr>
          <li><i class="fa fa-cloud-upload"...

CSS

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i);
html,
body {
  font-family: "Open Sans", "Helvetica Neue", Arial, Helvetica, sans-serif;
}


/*BUTTONS*/

.btn {
  border-radius: 6px;
  line-height: 44px;
  padding: 0px 15px;
  border: none;
}

.btn-default {
  color: #333;
  background-color: #e4e9eb;
  border-bottom: 2px solid #cfd3d5;
}

.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default:active:focus,
.btn-default:active:hover {
  color: #333;
  background-color: #cfd3d5;
  border-color: #cfd3d5;
  outline: none;
}

.btn-primary {
  color: #FFF;
  background-color: #00abd2;
  border-bottom: 2px solid #0087a6;
}

.btn-primary:focus,
.btn-primary:active,
.btn-primary:active:focus,
.btn-primary:hover,
.btn-primary:active:hover {
  color: #FFF;
  background-color: #0087a6;
  border-color: #0087a6;
  outline: none;
}

.btn-danger {
  color: #FFF;
  background-color: #d9534f;
  border-bottom: 2px solid #c9302c;
}

.btn-danger:focus,
.btn-danger:active,
.btn-danger:active:focus,
.btn-danger:hover,
.btn-danger:active:hover {
  color: #FFF;
  background-color: #c9302c;
  border-color: #c9302c;
  outline: none;
}

.btn-link,
a {
  color: #00abd1;
}


/* FORMS */

.form-group {
  margin-left: -15px;
  margin-right: -15px;
}

.form-control {
  border-radius: 6px;
  border: 1px solid #e4e9eb;
  color: #333;
  height: 44px;
  line-height: 44px;
  padding: 0px 15px;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.form-control:focus {
  border-color: #00abd2;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(0, 171, 210, .6);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(0, 171, 210, .6);
}

.select-proxy-display {
  width: 250px;
  height: 44px;
  margin: 0 auto;
  padding: 0px 44px 0px 15px;
  background: #fff;
  border: 1px solid #e4e9eb;
  border-radius: 6px;
  cursor: pointer;
  outline: 0;
  font-weight: 400;
  line-height: 44px;
  position:...

JavaScript

function startTether(target) {
  new Tether({
    element: '#file-options-menu',
    target: target,
    attachment: 'top left',
    targetAttachment: 'top right',
    constraints: [
      {
        to: 'scrollParent',
        attachment: 'together',
        pin: true
      }
    ]
  });
}

$('#sort-files').on('change', function() {
  var selectedValue = $(this).val();
  var selectedText = $(this).find("option:selected").text();
  $(this).parents('.select-proxy-display').find('.select-value-proxy').html(selectedText);
});

$('.dropdown-menu-holder li').on('click', function(e) {
  e.stopPropagation();
  $('.dropdown-menu-holder').find('li.active').removeClass('active');
  $(this).first().addClass('active');
});

$('.dropdown-menu-holder li > .list-holder .fa').on('click', function(e) {
  e.stopPropagation();
  if ($(this).hasClass('fa-chevron-right')) {
    $(this).removeClass('fa-chevron-right').addClass('fa-chevron-down');
    $(this).parents('.list-holder').next('ul').addClass('expanded');
  } else if ($(this).hasClass('fa-chevron-down')) {
    $(this).removeClass('fa-chevron-down').addClass('fa-chevron-right');
    $(this).parents('.list-holder').next('.expanded').removeClass('expanded');
  }
});

$('.new-btn').on('click', function() {
	$(this).next('.new-menu').toggleClass('active');
});

$('.file-options').click( function(event) {
	$(this).parents('.file-row').toggleClass('active');
  $('#file-options-menu').toggleClass('active');
  startTether($(this));
});