adds vue to title bar: wip

app/assets/javascripts/merge_request.js

-(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

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

app/assets/stylesheets/pages/merge_requests.scss

@@ -200,4 +200,4 @@
 .mr-source-target {
   line-height: 31px;
-}
+}
\ No newline at end of file

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

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}"
+    });
+  });

app/views/projects/merge_requests/show/_mr_title.html.haml

-.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