Merge pull request #273 from fluent/use-bootstrap-vue-more

Use bootstrap-vue

app/views/fluentd/settings/in_tail/_form.html.haml

@@ -23,11 +23,11 @@
 = form.field(:tag)
 = form.field(:pos_file)
 
-.well.well-sm
-  %h4{"data-toggle" => "collapse", "href" => "#advanced-setting"}
+.card.mb-3
+  %h4.card-header{"data-toggle" => "collapse", "href" => "#advanced-setting"}
     = icon('fa-caret-down')
     = t('terms.advanced_setting')
-  #advanced-setting.collapse
+  #advanced-setting.card-body.collapse
     .form-group
       = form.field(:rotate_wait)
     .form-group

app/views/fluentd/settings/in_tail/after_file_choose.html.haml

@@ -12,7 +12,7 @@
     = f.text_field :path, class: "form-control", disabled: true
   = render "shared/vue/in_tail_parse", setting: @setting
 
-  .card
+  .card.mb-3
     %pre.card-body= file_tail(@setting.path, Settings.in_tail_preview_line_count).join("\n")
 
   %p

app/views/shared/vue/_aws_credential.html.haml

@@ -1,10 +1,8 @@
 = render "shared/vue/config_field"
 
 %script{type: "text/x-template", id: "vue-aws-credential"}
-  .form-group.card.bg-light.mb-3
-    .card-body
-      %label{"for" => "aws-credential"}
-        AWS credential
+  .form-group.mb-3
+    %b-card{"header" => "AWS credential", "bg-variant" => "light"}
       %select{"id" => "aws-credential",
               "class" => "form-control mb-3",
               "v-model" => "credentialType",

app/views/shared/vue/_grep_container.html.haml

@@ -1,10 +1,10 @@
 = render "shared/vue/grep_pattern"
 %script{type: "text/x-template", id: "vue-grep-container"}
-  .form-group.card
-    .card-header
-      %a.btn.btn-xs{"v-on:click" => "add", "v-if" => "index == 0"}
+  %b-card.form-group
+    %template{"slot" => "header"}
+      %b-button{"v-on:click" => "add", "size" => "sm", "variant" => "light", "v-if" => "index === 0"}
         = icon("fa-plus")
-      %a.btn.btn-xs{"v-on:click" => "remove", "v-if" => "index != 0"}
+      %b-button{"v-on:click" => "remove", "size" => "sm", "variant" => "light", "v-if" => "index !== 0"}
         = icon("fa-minus")
       %label
         {{ containerType | humanize }}
@@ -20,13 +20,12 @@
                "v-bind:name" => "inputName(index)",
                "v-model" => "grepType"}
         Exclude
-    .card-body
-      .row
-        %template{"v-for" => "(enabled, i) in patterns"}
-          %grep-pattern.col-xl-3{"v-if" => "enabled",
-                                 "v-bind:container-type" => "containerType",
-                                 "v-bind:grep-type" => "grepType",
-                                 "v-bind:index" => "index",
-                                 "v-bind:subIndex" => "i",
-                                 "v-on:add-grep-pattern" => "addGrepPattern",
-                                 "v-on:remove-grep-pattern" => "removeGrepPattern"}
+    .row
+      %template{"v-for" => "(enabled, i) in patterns"}
+        %grep-pattern.col-xl-3{"v-if" => "enabled",
+                               "v-bind:container-type" => "containerType",
+                               "v-bind:grep-type" => "grepType",
+                               "v-bind:index" => "index",
+                               "v-bind:subIndex" => "i",
+                               "v-on:add-grep-pattern" => "addGrepPattern",
+                               "v-on:remove-grep-pattern" => "removeGrepPattern"}

app/views/shared/vue/_grep_pattern.html.haml

@@ -1,8 +1,8 @@
 %script{type: "text/x-template", id: "vue-grep-pattern"}
   %div
-    %a.btn.btn-xs{"v-on:click" => "add", "v-if" => "subIndex == 0"}
+    %b-button{"v-on:click" => "add", "size" => "sm", "variant" => "light", "v-if" => "subIndex === 0"}
       = icon("fa-plus")
-    %a.btn.btn-xs{"v-on:click" => "remove", "v-if" => "subIndex != 0"}
+    %b-button{"v-on:click" => "remove", "size" => "sm", "variant" => "light", "v-if" => "subIndex !== 0"}
       = icon("fa-minus")
     %label
       {{ grepType | humanize }}

app/views/shared/vue/_in_tail_parse.html.haml

@@ -12,9 +12,9 @@
                       "v-on:change-plugin-name" => "onChangePluginName",
                       "v-on:change-formats" => "onChangeFormats"}
 
-  .card.mb-3
-    %pre{"class" => "card-body", "v-html" => "highlightedLines"}
+  %b-card.mb-3
+    %pre{"v-html" => "highlightedLines"}
 
-  .card.md-3
-    %p.card-body.pb-0
+  %b-card.mb-3
+    %p.pb-0.mb-0
       =raw(t("fluentd.settings.in_tail_option_guide"))

app/views/shared/vue/_parser_plugin_form.html.haml

@@ -2,7 +2,7 @@
 = render "shared/vue/config_field"
 
 %script{type: "text/x-template", id: "vue-parser-plugin-form"}
-  .form-group.card.bg-light.mb-3{"v-bind:id" => "id"}
+  .form-group.mb-3{"v-bind:id" => "id"}
     %b-card{"bg-variant" => "light"}
       %label{"v-bind:for" => "selectId(pluginType)"}
         {{ pluginLabel }}

app/views/shared/vue/_treeview.html.erb

@@ -1,33 +0,0 @@
-<% add_javascript_pack_tag("treeview") %>
-<% name ||= "" %>
-<% action ||= "" %>
-<% submit_button ||= "" %>
-<%= form_tag(action, method: :post) do %>
-  <div id="treeview">
-    <div class="card">
-      <pre class="card-body pb-0">{{ path }}</pre>
-    </div>
-    <input type="hidden" name="<%= name %>" v-model="path" />
-    <div class="dirs">
-      <span v-for="(dir, index) in currentDirs">
-        <span v-if="index > 0">
-          <%= icon('fa-caret-right') %>
-        </span>
-        <span v-on:click="selectPath(dir)" class="dir">{{ basename(dir) }}</span>
-     </span>
-   </div>
-   <div class="tree">
-     <span v-on:click="selectPath(value.path)" class="vue-path" v-bind:class="{ selected: isSelected(value.path) }" v-for="value in paths">
-       <span v-if="value.is_dir"><%= icon("fa-folder") %></span>
-       <span v-if="!value.is_dir"><%= icon("fa-file-o") %></span>
-       {{ basename(value.path) }}
-       <br />
-     </span>
-   </div>
-
-   <pre v-if="preview" class="preview">{{ preview }}</pre>
-   <p>
-     <%= submit_tag submit_button, class: "btn btn-lg btn-primary float-right", "v-bind:disabled" => "selectedIsDir" %>
-   </p>
-  </div>
-<% end %>

app/views/shared/vue/_treeview.html.haml

@@ -0,0 +1,30 @@
+:ruby
+  add_javascript_pack_tag("treeview")
+  name ||= ""
+  action ||= ""
+  submit_button ||= ""
+
+= form_tag(action, method: :post) do
+  #treeview
+    %b-card{"variant" => "light"}
+      %pre.pb-0.mb-0
+        {{ path }}
+    %input{"type" => "hidden", "name" => name, "v-model" => "path"}
+    .dirs
+      %span{"v-for" => "(dir, index) in currentDirs"}
+        %span{"v-if" => "index > 0"}= icon("fa-caret-right")
+        %span.dir{"v-on:click" => "selectPath(dir)"}
+          {{ basename(dir) }}
+    .tree
+      %span{"v-on:click" => "selectPath(value.path)",
+            "v-bind:class" => "{ selected: isSelected(value.path) }",
+            "v-for" => "value in paths"}
+        %span{"v-if" => "value.is_dir"}= icon("fa-folder")
+        %span{"v-if" => "!value.is_dir"}= icon("fa-file-o")
+        {{ basename(value.path) }}
+        %br
+
+    %pre.preview{"v-if" => "preview"}
+      {{ preview }}
+    %p.mt-3
+      = submit_tag(submit_button, class: "btn btn-lg btn-primary float-right", "v-bind:disabled" => "selectedIsDir")