opti: optimization the table tool bar style and float box style

.eslintignore

@@ -2,3 +2,4 @@ test/unit/coverage/**
 test/unit/*.js
 test/e2e/*.js
 src/editor/parser/marked.js
+src/editor/assets/symbolIcon/index.js

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2018 Jocs
+Copyright (c) 2017-2018 Jocs
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

src/editor/assets/symbolIcon/index.css

@@ -0,0 +1,6 @@
+.icon {
+  width: 1em; height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}

src/editor/contentState/tableBlockCtrl.js

@@ -1,9 +1,4 @@
 import { isLengthEven } from '../utils'
-import TableIcon from '../assets/icons/table.svg'
-import LeftIcon from '../assets/icons/align-left.svg'
-import CenterIcon from '../assets/icons/align-center.svg'
-import RightIcon from '../assets/icons/align-right.svg'
-import DeleteIcon from '../assets/icons/delete.svg'
 import tablePicker from '../tablePicker'
 // import selection from '../selection'
 
@@ -16,27 +11,27 @@ const tableBlockCtrl = ContentState => {
     const ul = this.createBlock('ul')
     const tools = [{
       label: 'table',
-      icon: TableIcon
+      icon: 'icon-table'
     }, {
       label: 'left',
-      icon: LeftIcon
+      icon: 'icon-alignleft'
     }, {
       label: 'center',
-      icon: CenterIcon
+      icon: 'icon-aligncenter'
     }, {
       label: 'right',
-      icon: RightIcon
+      icon: 'icon-alignright'
     }, {
       label: 'delete',
-      icon: DeleteIcon
+      icon: 'icon-del'
     }]
 
     tools.forEach(tool => {
       const toolBlock = this.createBlock('li')
-      const imgBlock = this.createBlock('img')
-      imgBlock.src = tool.icon
+      const svgBlock = this.createBlock('svg')
+      svgBlock.icon = tool.icon
       toolBlock.label = tool.label
-      this.appendChild(toolBlock, imgBlock)
+      this.appendChild(toolBlock, svgBlock)
       this.appendChild(ul, toolBlock)
     })
     this.appendChild(toolBar, ul)
@@ -228,7 +223,7 @@ const tableBlockCtrl = ContentState => {
           this.render()
         }
 
-        tablePicker.toogle({ row, column }, { left, top }, handler.bind(this))
+        tablePicker.toggle({ row, column }, { left, top }, handler.bind(this))
         // tablePicker.status ? tableLable.classList.add('active') : tableLable.classList.remove('active')
       }
     }

src/editor/floatBox/index.css

@@ -0,0 +1,63 @@
+.ag-float-box {
+  position: absolute;
+  display: none;
+  opacity: 0;
+  height: 168px;
+  min-width: 130px;
+  max-width: 150px;
+  margin: 0;
+  padding: 5px 0;
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
+  list-style: none;
+  transform: scale(0);
+  transition: transform, opacity .5s ease-out;
+  overflow: auto;
+  background: #fff;
+  z-index: 10000;
+}
+
+.ag-show-float-box {
+  display: block;
+  opacity: 1;
+  transform: scale(1);
+}
+
+.ag-float-item {
+  padding: 0 .5em;
+  height: 28px;
+  line-height: 28px;
+  box-sizing: border-box;
+  color: #606266;
+  cursor: pointer;
+  font-size: 12px;
+  display: flex;
+  font-weight: 400;
+}
+
+.ag-float-item span:nth-of-type(2n) {
+  overflow: hidden;
+  text-overflow:ellipsis;
+  white-space: nowrap;
+}
+
+.ag-float-box:hover .ag-float-item-active {
+   background: #fff;
+   color: #606266;
+}
+.ag-float-item-active, .ag-float-box .ag-float-item:hover {
+  background-color: #ecf5ff;
+  color: #66b1ff;
+}
+
+.ag-float-item-icon {
+  font-size: 14px;
+  width: 28px;
+  height: 28px;
+  text-align: center;
+  display: inline-block;
+  vertical-align: middle;
+  flex-shrink: 0;
+  margin-right: .5em;
+}

src/editor/floatBox/index.js

@@ -3,7 +3,9 @@ import {
 } from '../config'
 import eventCenter from '../event'
 
-const FLOAT_BOX_HEIGHT = 170
+import './index.css'
+
+const FLOAT_BOX_HEIGHT = 180
 const ITEM_HEIGHT = 28
 
 class FloatBox {
@@ -83,7 +85,7 @@ class FloatBox {
       this.position = { left, top }
       const viewHeight = document.documentElement.offsetHeight
       if (viewHeight - top <= FLOAT_BOX_HEIGHT + 25) {
-        top = top - FLOAT_BOX_HEIGHT
+        top = top - (FLOAT_BOX_HEIGHT + 5) // left 5px between floatbox and input element
       } else {
         top = top + 25
       }

src/editor/index.css

@@ -50,18 +50,23 @@ figure {
   margin-right: 3px;
   cursor: pointer;
   border-radius: 3px;
+  color: #606266;
 }
-.ag-table-tool-bar ul li img {
-  width: 14px;
-  height: 14px;
+
+.ag-table-tool-bar ul li[data-label=delete] {
+  color: #E6A23C;
 }
 
 .ag-table-tool-bar ul li.active {
-  background: #aaa;
+  color: #409eff;
 }
 
-.ag-table-tool-bar ul li:hover {
-  background: #bbb;
+.ag-table-tool-bar ul li svg {
+  transition: transform .2s ease-in-out;
+}
+
+.ag-table-tool-bar ul li:hover svg {
+  transform: scale(1.1);
 }
 
 figure.ag-active .ag-table-tool-bar {
@@ -142,70 +147,6 @@ hr {
   cursor: default;
 }
 
-.ag-float-box {
-  position: absolute;
-  display: none;
-  opacity: 0;
-  height: 168px;
-  min-width: 130px;
-  max-width: 150px;
-  margin: 0;
-  padding: 0;
-  border: 1px solid #dfe2e5;
-  border-radius: 3px;
-  box-shadow: 0 0 5px rgba(27,31,35,0.1);
-  list-style: none;
-  transform: scale(0);
-  transition: transform, opacity .5s ease-out;
-  overflow: auto;
-  background: #fff;
-  z-index: 10000;
-}
-
-.ag-show-float-box {
-  display: block;
-  opacity: 1;
-  transform: scale(1);
-}
-
-.ag-float-item {
-  padding: 0 .5em;
-  height: 28px;
-  line-height: 28px;
-  box-sizing: border-box;
-  border-bottom: 1px solid #dfe2e5;
-  color: #000;
-  cursor: pointer;
-  font-size: 12px;
-  display: flex;
-  font-weight: 400;
-}
-
-.ag-float-item span:nth-of-type(2n) {
-  overflow: hidden;
-  text-overflow:ellipsis;
-  white-space: nowrap;
-}
-
-.ag-float-box:hover .ag-float-item-active {
-   background: #fff;
-   color: #000;
-}
-.ag-float-item-active, .ag-float-box .ag-float-item:hover {
-  background: #0366d6;
-  color: #fff;
-}
-
-.ag-float-item-icon {
-  font-size: 14px;
-  width: 28px;
-  height: 28px;
-  text-align: center;
-  display: inline-block;
-  vertical-align: middle;
-  flex-shrink: 0;
-  margin-right: .5em;
-}
 span.ag-emoji-marked-text {
   position: relative;
   color: aqua;

src/editor/index.js

@@ -13,6 +13,9 @@ import ExportStyledHTML from './utils/exportStyledHTML'
 import exportHtml from './utils/exportUnstylishHtml'
 import tablePicker from './tablePicker'
 
+import './assets/symbolIcon' // import symbol icons
+import './assets/symbolIcon/index.css'
+
 class Aganippe {
   constructor (container, options) {
     this.container = container
@@ -278,13 +281,22 @@ class Aganippe {
 
   dispatchTableToolBar () {
     const { container, eventCenter } = this
+    const getToolItem = target => {
+      // poor implement， fix me
+      const parent = target.parentNode
+      const grandPa = parent && parent.parentNode
+      if (target.hasAttribute('data-label')) return target
+      if (parent && parent.hasAttribute('data-label')) return parent
+      if (grandPa && grandPa.hasAttribute('data-label')) return grandPa
+      return null
+    }
     const handler = event => {
       const target = event.target
-      const parent = target.parentNode
-      if (parent && parent.hasAttribute('data-label')) {
+      const toolItem = getToolItem(target)
+      if (toolItem) {
         event.preventDefault()
         event.stopPropagation()
-        const type = parent.getAttribute('data-label')
+        const type = toolItem.getAttribute('data-label')
         this.contentState.tableToolBarClick(type)
       }
     }

src/editor/parser/StateRender.js

@@ -129,10 +129,15 @@ class StateRender {
           }
         }
 
-        if (/img/.test(block.type)) {
-          const { src } = block
-          Object.assign(data.attrs, { src })
-          children = ''
+        if (/svg/.test(block.type)) {
+          const { icon } = block
+          blockSelector += '.icon'
+          Object.assign(data.attrs, { 'aria-hidden': 'true' })
+          children = [
+            h('use', {
+              attrs: { 'xlink:href': `#${icon}` }
+            })
+          ]
         }
         if (/^h\d$/.test(block.type)) {
           Object.assign(data.dataset, { head: block.type })

src/editor/tablePicker/index.js

@@ -60,7 +60,7 @@ class TablePicker {
     this.cb = noop
   }
 
-  toogle ({ row, column }, { left, top }, cb) {
+  toggle ({ row, column }, { left, top }, cb) {
     const { container, status, rowInput, columnInput } = this
     if (status) {
       this.hide()

src/editor/themes/github.css

@@ -255,25 +255,25 @@ table {
 }
 
 table tr {
-  border-top: 1px solid #cccccc;
   margin: 0;
   padding: 0;
 }
 
+table thead tr,
 table tr:nth-child(2n) {
-  background-color: #f8f8f8;
+  background-color: #fafafa;
 }
 
 table tr th {
   font-weight: bold;
-  border: 1px solid #cccccc;
+  border: 1px solid #ebeef5;
   text-align: left;
   margin: 0;
   padding: 6px 13px;
 }
 
 table tr td {
-  border: 1px solid #cccccc;
+  border: 1px solid #ebeef5;
   text-align: left;
   margin: 0;
   padding: 6px 13px;

src/editor/utils/exportStyledHTML.js

@@ -15,7 +15,7 @@ class ExportHTML {
       <html lang="en">
       <head>
         <meta charset="UTF-8">
-        <title>Aganippe</title>
+        <title>Mark Text</title>
         <style>
         ${style}
         a {