adds vue to title bar: wip

6 files changed, 33 insertions, 10 deletions

diff --git a/app/assets/javascripts/merge_request.js b/app/assets/javascripts/merge_request.js
index b8fa13e70ab..4eb8dc112e9 100644
--- a/app/assets/javascripts/merge_request.js
+++ b/app/assets/javascripts/merge_request.js
@@ -1,9 +1,14 @@
-(function(){
-  window.onload = function() {
+var MR = function(){
+
+  var store = {state:{}};
+
+  var init = function(data){
+    store.state = data;
+    console.log('initting')
     var mrHeader = new Vue({
       el: '#merge-request-header',
       data: {
-        status: $('.status-box').data('status')
+        status: store.state.status
       },
       created: function() {
         console.log('created');
@@ -15,5 +20,7 @@
     };
   } 
 
-
-})()
\ No newline at end of file
+  return {
+    init: init
+  }
+};
\ No newline at end of file
diff --git a/app/assets/stylesheets/framework/blocks.scss b/app/assets/stylesheets/framework/blocks.scss
index fa0e70847f3..6a1d78c4633 100644
--- a/app/assets/stylesheets/framework/blocks.scss
+++ b/app/assets/stylesheets/framework/blocks.scss
@@ -136,3 +136,12 @@
 .block-connector {
   margin-top: -1px;
 }
+
+[v-cloak] {
+  visibility: hidden;
+  -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
+   -moz-animation: fadein 2s; /* Firefox < 16 */
+    -ms-animation: fadein 2s; /* Internet Explorer */
+     -o-animation: fadein 2s; /* Opera < 12.1 */
+        animation: fadein 2s;
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index 82effde0bf3..176a45d65c5 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -200,4 +200,4 @@
 
 .mr-source-target {
   line-height: 31px;
-}
+}
\ No newline at end of file
diff --git a/app/views/projects/merge_requests/_merge_request.html.haml b/app/views/projects/merge_requests/_merge_request.html.haml
index a051729dc32..2470d3b56b6 100644
--- a/app/views/projects/merge_requests/_merge_request.html.haml
+++ b/app/views/projects/merge_requests/_merge_request.html.haml
@@ -60,4 +60,4 @@
         = merge_request.task_status
 
     .pull-right.hidden-xs
-      %span updated #{time_ago_with_tooltip(merge_request.updated_at, placement: 'bottom', html_class: 'merge_request_updated_ago')}
+      %span updated #{time_ago_with_tooltip(merge_request.updated_at, placement: 'bottom', html_class: 'merge_request_updated_ago')}
\ No newline at end of file
diff --git a/app/views/projects/merge_requests/_show.html.haml b/app/views/projects/merge_requests/_show.html.haml
index 095876450a0..66a72676581 100644
--- a/app/views/projects/merge_requests/_show.html.haml
+++ b/app/views/projects/merge_requests/_show.html.haml
@@ -93,3 +93,10 @@
   merge_request = new MergeRequest({
     action: "#{controller.action_name}"
   });
+
+:javascript
+  $(function(){
+    MR().init({
+      status: "#{@merge_request.state_human_name}"
+    });
+  });
diff --git a/app/views/projects/merge_requests/show/_mr_title.html.haml b/app/views/projects/merge_requests/show/_mr_title.html.haml
index 55bfb85122c..dc73c4d7d04 100644
--- a/app/views/projects/merge_requests/show/_mr_title.html.haml
+++ b/app/views/projects/merge_requests/show/_mr_title.html.haml
@@ -1,6 +1,6 @@
-.detail-page-header#merge-request-header
-  .status-box{ class: status_box_class(@merge_request), data:{status: @merge_request.state_human_name} }
-  {{ status }}
+.detail-page-header#merge-request-header{'v-cloak'=> true, transition: "fade"}
+  .status-box{ class: status_box_class(@merge_request)}
+    {{ status }}
   %span.identifier
     Merge Request ##{@merge_request.iid}
   %span.creator