From e0cb5136e47b62fc65a125e5aaf5678a23a1aa4f Mon Sep 17 00:00:00 2001
From: C?dric Krier <ced@b2ck.com>
Date: Thu, 22 Oct 2015 11:41:56 +0200
Subject: [PATCH] Stick navbar of tab

review23561004
---
 src/sao.less | 19 ++++++++++++++++++-
 src/tab.js   | 41 ++++++++++++++++++++++++++++++++++++++---
 2 files changed, 56 insertions(+), 4 deletions(-)

diff --git a/src/sao.less b/src/sao.less
index 447f0fc..29c98e8 100644
--- a/src/sao.less
+++ b/src/sao.less
@@ -1,12 +1,20 @@
 @import "variables";
 
+.navbar {
+    z-index: @zindex-navbar;
+}
+
 .tab-form {
-    & .toolbar {
+    & nav.toolbar {
         margin-bottom: 1px;
         & ul.nav > li > a {
             padding-right: 0px;
         }
     }
+    & nav.toolbar.affix {
+        top: @navbar-height + 1px;
+        z-index: @zindex-navbar - 1;
+    }
 }
 
 .nav-tabs > li .close {
@@ -14,6 +22,15 @@
     font-size: 18px;
 }
 
+@media screen and (max-width: 768px) {
+    .tab-form {
+        .navbar-nav > li {
+            float: left;
+            width: 50%;
+        }
+    }
+}
+
 input[type='color'] {
     & .btn {
         height: @line-height-base;
diff --git a/src/tab.js b/src/tab.js
index 8635969..32ee2a2 100644
--- a/src/tab.js
+++ b/src/tab.js
@@ -15,13 +15,12 @@
                 'class': this.class_
             });
 
-            this.title = jQuery('<h4/>').appendTo(this.el);
-
             if (this.info_bar) {
                 this.el.append(this.info_bar.el);
             }
 
-            this.create_toolbar().appendTo(this.el);
+            var toolbar = this.create_toolbar().appendTo(this.el);
+            this.title = toolbar.find('a.navbar-brand');
         },
         set_menu: function(menu) {
             this.menu_def.forEach(function(definition) {
@@ -53,6 +52,7 @@
                     '<nav class="navbar navbar-default toolbar" role="navigation">' +
                     '<div class="container-fluid">' +
                     '<div class="navbar-header">' +
+                    '<a class="navbar-brand" href="#"></a>' +
                     '<button type="button" class="navbar-toggle collapsed" ' +
                     'data-toggle="collapse" ' +
                     'data-target="#navbar-' + this.id + '">' +
@@ -112,6 +112,22 @@
                 // TODO tooltip
             };
             this.toolbar_def.forEach(add_button.bind(this));
+            var tabs = jQuery('#tabs');
+            toolbar.affix({
+                'target': tabs.parent(),
+                'offset': {
+                    'top': function() {
+                        return tabs.find('.nav-tabs').height();
+                    }
+                }
+            });
+            toolbar.on('affixed.bs.affix', function() {
+                Sao.Tab.affix_set_with(toolbar);
+            });
+            toolbar.on('affixed-top.bs.affix affixed-bottom.bs.affix',
+                    function() {
+                        Sao.Tab.affix_unset_width(toolbar);
+                    });
             return toolbar;
         },
         close: function() {
@@ -140,6 +156,25 @@
         }
     });
 
+    Sao.Tab.affix_set_with = function(toolbar) {
+        var width = jQuery(toolbar.parent()).width();
+        toolbar.css('width', width);
+    };
+    Sao.Tab.affix_unset_width = function(toolbar) {
+        toolbar.css('width', '');
+    };
+    jQuery(window).resize(function() {
+        jQuery('.toolbar').each(function(i, toolbar) {
+            toolbar = jQuery(toolbar);
+            toolbar.affix('checkPosition');
+            if (toolbar.hasClass('affix')) {
+                Sao.Tab.affix_set_with(toolbar);
+            } else {
+                Sao.Tab.affix_unset_width(toolbar);
+            }
+        });
+    });
+
     Sao.Tab.counter = 0;
     Sao.Tab.tabs = [];
     Sao.Tab.tabs.close = function(warning) {