change design

src/client/js/util/markdown-it/table-with-handsontable-button.js

@@ -8,7 +8,7 @@ export default class TableWithHandsontableButtonConfigurer {
     md.renderer.rules.table_open = (tokens, idx) => {
       const beginLine = tokens[idx].map[0] + 1;
       const endLine  = tokens[idx].map[1];
-      return `<div><button onClick="crowi.launchHandsontableModal('page', ${beginLine}, ${endLine})"><i class="fa fa-table"></i></button><table class="table table-bordered">`;
+      return `<div class="editable-with-handsontable"><button onClick="crowi.launchHandsontableModal('page', ${beginLine}, ${endLine})"><i class="icon-note"></i></button><table class="table table-bordered">`;
     };
 
     md.renderer.rules.table_close = (tokens, idx) => {

src/client/styles/agile-admin/inverse/colors/_apply-colors.scss

@@ -279,6 +279,16 @@ $active-nav-tabs-bgcolor: $bodycolor !default;
       color: $wikilinktext-hover;
     }
   }
+
+  // table with handsontable modal button
+  .editable-with-handsontable {
+    button {
+      color: $wikilinktext;
+    }
+    button:hover {
+      color: $wikilinktext-hover;
+    }
+  }
 }
 
 

src/client/styles/scss/_page.scss

@@ -80,6 +80,28 @@
   #page-status-alert .myadmin-alert {
     display: block;
   }
+
+  // table with handsontable modal button
+  .editable-with-handsontable {
+    position: relative;
+
+    button {
+      display: none;
+    }
+
+    &:hover button {
+      display: block;
+      position: absolute;
+      top: 11px;
+      right: 10px;
+      padding: 0;
+      border: none;
+      background-color: transparent;
+      font-size: 16px;
+      line-height: 1;
+      vertical-align: bottom;
+    }
+  }
 }
 
 .main-container .main .content-main .revision-history { // {{{