Improved sync state reports

[marcusboon]

From Brendan Heywood:

Here is some working html / css.

Marcus the main gotcha here is that the inner two percentages are expressed as a percentage of the next % higher up.

So lets say that 40% of the files are local, 40% are dual, and 20% are external, then this means that 'isexternal' should be 40+40 = 80%, and 'deleted' should is 40 / (40+40) = .5 = 50%. Eventually when all the files get pushed and deleted then the isextenal and deleted should both be 100%.

Buzz me if you need more context.

<div class="ofs-bar-total" style="width:90%;">
  <div class="ofs-bar-isexternal" style="width: 70%;">
    <div class="ofs-bar-deleted" style="width: 57%;">35.1GB</div>
  </div>
</div>

styles:

<style>
.ofs-bar-deleted {
    background: hsla(120, 75%, 75%, 1);
}
.ofs-bar-isexternal {
    background: hsla(39, 75%, 75%, 1);
}
.ofs-bar-total {
    background: hsla(0, 75%, 75%, 1);
}
</style>