minicolors

by chrischilcoat

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://yakabod.yakabox.com/custom/css/cache/9b5e646591ad0eecda388878bec13155.css?yakabox-vne-5.27.9-1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.1/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.5.3/css/bootstrap-colorpicker.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.5.3/js/bootstrap-colorpicker.js"></script>
<button class="btn btn-default ybx-proto-inserttask">Insert Items</button>

<h4>
  <i class="ybx-widget-open fa fa-chevron-down" data-atf-element="atf-toggle-itinerary"></i>
  <!-- react-text: 16 -->Tasks
  <!-- /react-text --><span class="pull-right"><!-- react-text: 20 -->  <!-- /react-text --><div class="badge badge-warning">3</div></span></h4>


<div class="panel panel-default ui-yakabox-taskspanel">
  <div class="card text-center">
    <div class="card-header">
      <ul class="nav nav-tabs card-header-tabs">
        <li class="nav-item">
          <a class="nav-link active" href="#">To Me</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">From Me</a>
        </li>
      </ul>
    </div>
    <div class="card-body">
      <ul class="list-group">
        <a class="list-group-item ybx-proto-listitem bg-warning" style="display:none;" href="#">
          <span class="media"> 
            <span class="media-left"> 
              <span class="fa fa-circle"></span> 
            </span> 
            <span class="media-left"> 
              <img src="https://www.nodegraph.se/wp-content/uploads/2019/04/Ellen-L%C3%B6fqvist-NodeGraph-400x400.png" style="width:30px"/>
            </span>    
            <span class="media-body">
            Upload Documents
           ...

SCSS

body {
  padding: 15px;
}

.ui-yakabox-taskspanel {
  .bg-warning {
    background-color: #fcf8e3 !important;
  }
  .list-group {
    margin:2px 0 0;
  }
  .list-group-item {
    border-radius:0 !important;
    border-left:none;
    border-right:none;
    text-align:left;
  }
  .nav {
    margin-left:10px;
  }
  .nav-tabs > li > a {
    border-radius: 0;
    background-color: transparent;
    border-width: 0;
  }
  .ui-yakabox-taskspanel .nav-link.active {
    font-weight: bold;
    border-bottom: 2px solid #337ab7 !important;
  }
  .nav-link.active, 
  .nav>li>a:focus, 
  .nav>li>a:hover {
    border-bottom:2px solid #337ab7;
  }
  .fa-circle {
    color:#337ab7;
  }
  .progress {
    height: 15px;
    margin-top: 5px;
    border-radius: 3px;
    background: black; 
    width: 80px;
    margin-bottom: 0;
  }
  .progress .progress-bar {
    border-right: 0px solid #fff;
  }
  .nav-tabs {
    border-bottom: 0px solid #ddd;
  }
  .label {
    width: 80px;
    display: inline-block;
  }
  .media-left, .media-body, .media-right {
    min-height:30px;
  }
  a.list-group-item:focus, 
  a.list-group-item:hover, 
  button.list-group-item:focus, 
  button.list-group-item:hover,
  .nav>li>a:focus, 
  .nav>li>a:hover {
    background-color:aliceblue;
  }
} 

.fuzzyTime {
  color:gray;
}

JavaScript

$('[data-toggle="tooltip"]').tooltip()

var popoverTemplate = ['<div class="popover">',
  '<div class="arrow"></div>',
  '<div class="popover-content">',
  '</div>',
  '</div>'
].join('');

var content = ['<div class="media">',
  '<div class="media-left"><i class="fa fa-square fa-2x"></i></div>',
  '<div class="media-body"> Product Backlog<br/> <small>Step: 1 of 5</small> </div></div>',
].join('');

$('body').popover({
  selector: '[rel=popover]',
  trigger: 'hover',
  delay: {
    show: "400",
    hide: "100"
  },
  content: content,
  template: popoverTemplate,
  placement: "top",
  html: true
});

var popoverTemplate2 = ['<div class="popover">',
  '<div class="arrow"></div>',
  '<div class="popover-content">',
  '</div>',
  '</div>'
].join('');

var content2 = ['<div class="media">',
  '<div class="media-left"><img src="https://www.nodegraph.se/wp-content/uploads/2019/04/Ellen-L%C3%B6fqvist-NodeGraph-400x400.png" style="width:30px"></div>',
  '<div class="media-left">John Thor<br/> <button class="btn btn-primary btn-sm">Send Message</button> </div></div>',
].join('');

$('[rel=popoverMessage]').popover({
  trigger: 'click',
  content: content2,

  template: popoverTemplate2,
  placement: "top",
  html: true
});

$('.ybx-proto-inserttask').on('click', function() {
  $('.ybx-proto-listitem').slideDown();
  setTimeout(function() {
    $('.ybx-proto-listitem').removeClass('bg-warning');
  }, 2000);
});