Drive history UI

customize.dist/src/less2/include/toolbar-history.less

@@ -49,6 +49,26 @@
             }
         }
 
+        &.cp-history-drive {
+            .cp-history-timeline-container {
+                height: 20px !important;
+            }
+            .cp-history-timeline-users {
+                display: none !important;
+            }
+            .cp-history-timeline-legend {
+                display: none !important;
+            }
+            .cp-history-timeline-pos {
+                height: 18px !important;
+            }
+            .cp-toolbar-history-loadmore {
+                font-size: 10px !important;
+            }
+            .cp-history-timeline-actions {
+                margin-left: 21px !important;
+            }
+        }
         &.cp-smallpatch {
             .cp-history-snapshot {
                 border: none !important;

www/common/sframe-common-history.js

@@ -159,19 +159,27 @@ define([
                         title: snapshotsData[hash].title
                     }, h('i.fa.fa-camera')));
                 }
-                check(user, getAuthor(i, 1), i);
-                check(users, getAuthor(i, 2), i);
+                if (config.drive) {
+                    // Display only one bar, split by patch
+                    check(user, i, i);
+                } else {
+                    // Display two bars, split by author(s)
+                    check(user, getAuthor(i, 1), i);
+                    check(users, getAuthor(i, 2), i);
+                }
             }
 
             if (snapshotsOnly) {
                 // We only want to redraw the snapshots
-                $bar.find('.cp-history-snapshotsi').html('').append([
+                $bar.find('.cp-history-snapshots').html('').append([
                     $pos,
                     snapshotsEl
                 ]);
             } else {
                 $(user.el).css('width', (100*(max + 1 - user.i)/max)+'%');
-                $(users.el).css('width', (100*(max + 1 - users.i)/max)+'%');
+                if (!config.drive) {
+                    $(users.el).css('width', (100*(max + 1 - users.i)/max)+'%');
+                }
 
                 $bar.html('').append([
                     h('span.cp-history-timeline-users', users.list),
@@ -415,7 +423,7 @@ define([
             var prev = h('button.cp-toolbar-history-previous', { title: Messages.history_prev }, [
                 h('i.fa.fa-step-backward')
             ]);
-            var fastNext = h('button.cp-toolbar-history-next', { title: Messages.history_next }, [
+            var fastNext = h('button.cp-toolbar-history-next', { title: Messages.history_fastNnext }, [
                 h('i.fa.fa-users'),
                 h('i.fa.fa-step-forward'),
             ]);
@@ -423,9 +431,18 @@ define([
                 h('i.fa.fa-user'),
                 h('i.fa.fa-step-forward'),
             ]);
-            var next = h('button.cp-toolbar-history-next', { title: Messages.history_fastNext }, [
+            var next = h('button.cp-toolbar-history-next', { title: Messages.history_next }, [
                 h('i.fa.fa-step-forward')
             ]);
+            if (config.drive) {
+                fastNext = h('button.cp-toolbar-history-next', { title: Messages.history_next }, [
+                    h('i.fa.fa-fast-forward'),
+                ]);
+                fastPrev = h('button.cp-toolbar-history-previous', {title: Messages.history_prev}, [
+                    h('i.fa.fa-fast-backward'),
+                ]);
+            }
+
             var $fastPrev = $(fastPrev);
             var $userPrev = $(userPrev);
             var $prev = $(prev);
@@ -456,13 +473,13 @@ define([
                 h('div.cp-history-timeline-actions', [
                     h('span.cp-history-timeline-prev', [
                         fastPrev,
-                        userPrev,
+                        config.drive ? undefined : userPrev,
                         prev,
                     ]),
                     time,
                     h('span.cp-history-timeline-next', [
                         next,
-                        userNext,
+                        config.drive ? undefined : userNext,
                         fastNext
                     ])
                 ])
@@ -506,6 +523,7 @@ define([
                 restore.disabled = true;
             }
             if (config.drive) {
+                $hist.addClass('cp-history-drive');
                 snapshot.disabled = true;
                 share.disabled = true;
             }
@@ -552,10 +570,17 @@ define([
             // Version buttons
             $prev.click(function () { render(get(c - 1)); });
             $next.click(function () { render(get(c + 1)); });
-            $userPrev.click(function () { render(get(c - 1, false, 1)); });
-            $userNext.click(function () { render(get(c + 1, false, 1)); });
-            $fastPrev.click(function () { render(get(c - 1, false, 2)); });
-            $fastNext.click(function () { render(get(c + 1, false, 2)); });
+            if (config.drive) {
+                $fastPrev.click(function () { render(get(c - 10)); });
+                $fastNext.click(function () { render(get(c + 10)); });
+                $userPrev.click(function () { render(get(c - 10)); });
+                $userNext.click(function () { render(get(c + 10)); });
+            } else {
+                $userPrev.click(function () { render(get(c - 1, false, 1)); });
+                $userNext.click(function () { render(get(c + 1, false, 1)); });
+                $fastPrev.click(function () { render(get(c - 1, false, 2)); });
+                $fastNext.click(function () { render(get(c + 1, false, 2)); });
+            }
             onKeyDown = function (e) {
                 var p = function () { e.preventDefault(); };
                 if (e.which === 39) { p(); return $next.click(); } // Right