Tool-bar menu

by Dhanck

HTML

WITH TEXT
<div class="tool-menu">
  <button class="vrs-btn saveId" title="Save">
    <span class="glyphicon glyphicon-floppy-disk"></span>
    <span class="">Save</span>
  </button>

  <button class="vrs-btn" title="Values...">
    <span class="glyphicon glyphicon-list-alt"></span>
    <span class="">Values...</span>
  </button>

  <button class="vrs-btn" title="Make main primary entity">
    <span class="glyphicon glyphicon-flag"></span>
    <span class="">Entity</span>
  </button>


  <button class="vrs-btn pull-right" title="Help">
    <span class="glyphicon glyphicon-th"></span>
  </button>
  <button class="vrs-btn pull-right" title="Help">
    <span class="glyphicon glyphicon-refresh"></span>
  </button>
  <span class="tool-sep"></span>

  <button class="vrs-btn pull-right" title="Search">
    <span class="glyphicon glyphicon-search"></span>
  </button>
  <input type="text" class="vrs-tool-filter" placeholder="Filter">
  <span class="tool-sep"></span>
  <button class="vrs-btn pull-right" title="Help">
    <span class="glyphicon glyphicon-question-sign"></span>
  </button>
</div>
<br>
<br> NO TEXT

<div class="tool-menu">
  <button class="vrs-btn saveId">
    <span class="glyphicon glyphicon-floppy-disk"></span>
  </button>

  <button class="vrs-btn">
    <span class="glyphicon glyphicon-list-alt"></span>
  </button>

  <button class="vrs-btn">
    <span class="glyphicon glyphicon-flag"></span>
  </button>

  <button class="vrs-btn pull-right">
    <span class="glyphicon glyphicon-question-sign"></span>
  </button>
</div>
<br>
<br> DISABLED
<div class="tool-menu">
  <button class="vrs-btn disabled">
    <span class="glyphicon glyphicon-floppy-disk"></span>
  </button>

  <button class="vrs-btn disabled">
    <span class="glyphicon glyphicon-list-alt"></span>
  </button>

  <button class="vrs-btn disabled">
    <span class="glyphicon glyphicon-flag"></span>
  </button>

  <button class="vrs-btn pull-right disabled">
    <span class="glyphicon...

CSS

body {
  margin: 20px;
  font-family: century gothic;
}

.tool-menu {
  border: 1px solid #dddddd;
}

.tool-sep {
  height: 22px;
  width: 1px;
  background-color: #dddddd;
  float: right;
}

.vrs-btn {
  background-color: #fff;
  border: none;
  color: #626262;
}

.vrs-btn .glyphicon {
  top: 2px;
}

.vrs-btn:hover {
  background-color: #626262;
  color: #fff;
}

.vrs-tool-filter {
  float: right;
  height: 22px;
  border: none;
  padding-left: 5px;
}

.disabled {
  cursor: not-allowed;
  opacity: .40;
  filter: alpha(opacity=40);
  -webkit-box-shadow: none;
  box-shadow: none;
  pointer-events: none;
}

@media only screen and (min-width: 250px) and (max-width: 1024px) {
  .vrs-btn span:not(.glyphicon) {
    display: none;
  }
}


/* btn Animation styling */

.btn-save .text,
.btn-unsave .text {
  font-family: 'Century Gothic';
  padding: 4px;
  font-weight: bold;
}

.green {
  color: green;
}

.red {
  color: red;
}

.bold {
  font-weight: bold;
}

JavaScript

var saveBtnSp1 = $('span.vrs-btn:eq( 0 )');
var saveBtnSp2 = $('.vrs-btn span:eq( 1 )');

$(".saveId").click(function() {
  //alert($(this).html());
  $(this).addClass('disabled');
  $(saveBtnSp2).html('<span class="text">&nbsp;Saving...</span>');
  $(saveBtnSp1).toggleClass('glyphicon-floppy-disk', 'glyphicon-floppy-saved');
  $(saveBtnSp2).html('<span class="text">&nbsp;Saved</span>');
  $(saveBtnSp1).addClass('glyphicon-floppy-saved green bold');
})



//$('.saveId', this).on('click', function() {
//$(this).find(".saveId");
//	grayout();
//  setTimeout(saving, 1000);
//  setTimeout(removefloppy, 3000);
//  setTimeout(savefloppy, 3000);
//  setTimeout(saved, 3000);
//})



function unsave() {
  ungrayout();
  setTimeout(unsaving, 1000);
  setTimeout(unremovefloppy, 3000);
  setTimeout(unsavefloppy, 3000);
  setTimeout(unsaved, 3000);
};


function grayout() {
  $('.vrs-btn').addClass('disabled');
}

function saving() {
  $(saveBtnSp2).html('<span class="text">&nbsp;Saving...</span>');
}

function removefloppy() {
  $('.vrs-btn span:first-child').removeClass('glyphicon-floppy-disk');
}

function saved() {
  $('.vrs-btn span:last-child').html('<span class="text">&nbsp;Saved</span>');
}

function savefloppy() {
  $('.vrs-btn span:first-child').addClass('glyphicon-floppy-saved green bold');
}
/////////////////////////////////////////////////////////////////////////////////////
function ungrayout() {
  $('.btn-unsave').addClass('disabled');
}

function unsaving() {
  $('.btn-unsave span').html('<span class="text">&nbsp;Saving...</span>');
}

function unremovefloppy() {
  $('.btn-unsave span').removeClass('glyphicon-floppy-disk');
}

function unsaved() {
  $('.btn-unsave span').html('<span class="text">&nbsp;Not Saved</span>');
}

function unsavefloppy() {
  $('.btn-unsave span').addClass('glyphicon-floppy-remove red bold');
}