Merge pull request #625 from weseek/feat/improve-handsontable-modal-button-design

Imprv/improve handsontable modal button 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 class="handsontable-modal-trigger" 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

@@ -128,6 +128,35 @@
 
 } // }}}
 
+
+/**
+ * for table with handsontable modal button
+ */
+.editable-with-handsontable {
+  position: relative;
+
+  .handsontable-modal-trigger {
+    opacity: 0;
+    position: absolute;
+    top: 11px;
+    right: 10px;
+    padding: 0;
+    border: none;
+    background-color: transparent;
+    font-size: 16px;
+    line-height: 1;
+    vertical-align: bottom;
+  }
+
+  .page-mobile & .handsontable-modal-trigger {
+    opacity: 0.3;
+  }
+
+  &:hover .handsontable-modal-trigger {
+    opacity: 1;
+  }
+}
+
 /*
  * for Presentation
  */