mirror of https://github.com/status-im/codimd.git
feat: add toolbar buttons for table tools
and hide scrollbar of the toolbar to avoid overlapping the buttons Signed-off-by: Max Wu <jackymaxj@gmail.com>
This commit is contained in:
Max Wu
parent
02feb973e1
commit
232c8bd870
|
|
@ -25,6 +25,32 @@ body.night{
|
|||
border: 1px solid #343434;
|
||||
}
|
||||
|
||||
.toolbar > .btn-toolbar {
|
||||
white-space: nowrap;
|
||||
overflow-y: auto;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.toolbar > .btn-toolbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.toolbar > .btn-toolbar > .btn-group {
|
||||
float: none;
|
||||
}
|
||||
|
||||
.toolbar > .btn-toolbar > .btn-group > span {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
color: #fff;
|
||||
padding: 5px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.toolbar > .btn-toolbar > .btn-group > span.separator {
|
||||
color: #4d4d4d;
|
||||
}
|
||||
|
||||
.toolbar > .btn-toolbar > .btn-group > .btn {
|
||||
background-color: #1c1c1e;
|
||||
padding: 5px;
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import statusBarTemplate from './statusbar.html'
|
|||
import toolBarTemplate from './toolbar.html'
|
||||
import './markdown-lint'
|
||||
import { initTableEditor } from './table-editor'
|
||||
import { options, Alignment, FormatType } from '@susisu/mte-kernel'
|
||||
|
||||
/* config section */
|
||||
const isMac = CodeMirror.keyMap.default === CodeMirror.keyMap.macDefault
|
||||
|
|
@ -161,6 +162,19 @@ export default class Editor {
|
|||
var makeLine = $('#makeLine')
|
||||
var makeComment = $('#makeComment')
|
||||
|
||||
var insertRow = $('#insertRow')
|
||||
var deleteRow = $('#deleteRow')
|
||||
var moveRowUp = $('#moveRowUp')
|
||||
var moveRowDown = $('#moveRowDown')
|
||||
var insertColumn = $('#insertColumn')
|
||||
var deleteColumn = $('#deleteColumn')
|
||||
var moveColumnLeft = $('#moveColumnLeft')
|
||||
var moveColumnRight = $('#moveColumnRight')
|
||||
var alignLeft = $('#alignLeft')
|
||||
var alignCenter = $('#alignCenter')
|
||||
var alignRight = $('#alignRight')
|
||||
var alignNone = $('#alignNone')
|
||||
|
||||
makeBold.click(() => {
|
||||
utils.wrapTextWith(this.editor, this.editor, '**')
|
||||
this.editor.focus()
|
||||
|
|
@ -220,6 +234,72 @@ export default class Editor {
|
|||
makeComment.click(() => {
|
||||
utils.insertText(this.editor, '> []')
|
||||
})
|
||||
|
||||
// table tools UI
|
||||
const opts = options({
|
||||
smartCursor: true,
|
||||
formatType: FormatType.NORMAL
|
||||
})
|
||||
|
||||
insertRow.click(() => {
|
||||
this.tableEditor.insertRow(opts)
|
||||
this.editor.focus()
|
||||
})
|
||||
|
||||
deleteRow.click(() => {
|
||||
this.tableEditor.deleteRow(opts)
|
||||
this.editor.focus()
|
||||
})
|
||||
|
||||
moveRowUp.click(() => {
|
||||
this.tableEditor.moveRow(-1, opts)
|
||||
this.editor.focus()
|
||||
})
|
||||
|
||||
moveRowDown.click(() => {
|
||||
this.tableEditor.moveRow(1, opts)
|
||||
this.editor.focus()
|
||||
})
|
||||
|
||||
insertColumn.click(() => {
|
||||
this.tableEditor.insertColumn(opts)
|
||||
this.editor.focus()
|
||||
})
|
||||
|
||||
deleteColumn.click(() => {
|
||||
this.tableEditor.deleteColumn(opts)
|
||||
this.editor.focus()
|
||||
})
|
||||
|
||||
moveColumnLeft.click(() => {
|
||||
this.tableEditor.moveColumn(-1, opts)
|
||||
this.editor.focus()
|
||||
})
|
||||
|
||||
moveColumnRight.click(() => {
|
||||
this.tableEditor.moveColumn(1, opts)
|
||||
this.editor.focus()
|
||||
})
|
||||
|
||||
alignLeft.click(() => {
|
||||
this.tableEditor.alignColumn(Alignment.LEFT, opts)
|
||||
this.editor.focus()
|
||||
})
|
||||
|
||||
alignCenter.click(() => {
|
||||
this.tableEditor.alignColumn(Alignment.CENTER, opts)
|
||||
this.editor.focus()
|
||||
})
|
||||
|
||||
alignRight.click(() => {
|
||||
this.tableEditor.alignColumn(Alignment.RIGHT, opts)
|
||||
this.editor.focus()
|
||||
})
|
||||
|
||||
alignNone.click(() => {
|
||||
this.tableEditor.alignColumn(Alignment.NONE, opts)
|
||||
this.editor.focus()
|
||||
})
|
||||
}
|
||||
|
||||
addStatusBar () {
|
||||
|
|
|
|||
|
|
@ -44,5 +44,47 @@
|
|||
<i class="fa fa-comment fa-fw"></i>
|
||||
</a>
|
||||
</div>
|
||||
<span class="btn-group table-tools hidden-xs" style="display: none;">
|
||||
<span class="separator" style="margin-left: -10px;">|</span>
|
||||
<span>Row</span>
|
||||
<a id="insertRow" class="btn btn-sm btn-dark text-uppercase" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" title="Insert Row">
|
||||
<i class="fa fa-plus-circle fa-fw"></i>
|
||||
</a>
|
||||
<a id="deleteRow" class="btn btn-sm btn-dark text-uppercase" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" title="Delete Row">
|
||||
<i class="fa fa-minus-circle fa-fw"></i>
|
||||
</a>
|
||||
<a id="moveRowUp" class="btn btn-sm btn-dark text-uppercase" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" title="Move Row Up">
|
||||
<i class="fa fa-long-arrow-up fa-fw"></i>
|
||||
</a>
|
||||
<a id="moveRowDown" class="btn btn-sm btn-dark text-uppercase" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" title="Move Row Down">
|
||||
<i class="fa fa-long-arrow-down fa-fw"></i>
|
||||
</a>
|
||||
<span>Column</span>
|
||||
<a id="insertColumn" class="btn btn-sm btn-dark text-uppercase" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" title="Insert Column">
|
||||
<i class="fa fa-plus-circle fa-fw"></i>
|
||||
</a>
|
||||
<a id="deleteColumn" class="btn btn-sm btn-dark text-uppercase" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" title="Delete Column">
|
||||
<i class="fa fa-minus-circle fa-fw"></i>
|
||||
</a>
|
||||
<a id="moveColumnLeft" class="btn btn-sm btn-dark text-uppercase" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" title="Move Column Left">
|
||||
<i class="fa fa-long-arrow-left fa-fw"></i>
|
||||
</a>
|
||||
<a id="moveColumnRight" class="btn btn-sm btn-dark text-uppercase" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" title="Move Column Right">
|
||||
<i class="fa fa-long-arrow-right fa-fw"></i>
|
||||
</a>
|
||||
<span>Alignment</span>
|
||||
<a id="alignLeft" class="btn btn-sm btn-dark text-uppercase" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" title="Align Left">
|
||||
<i class="fa fa-align-left fa-fw"></i>
|
||||
</a>
|
||||
<a id="alignCenter" class="btn btn-sm btn-dark text-uppercase" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" title="Align Center">
|
||||
<i class="fa fa-align-center fa-fw"></i>
|
||||
</a>
|
||||
<a id="alignRight" class="btn btn-sm btn-dark text-uppercase" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" title="Align Right">
|
||||
<i class="fa fa-align-right fa-fw"></i>
|
||||
</a>
|
||||
<a id="alignNone" class="btn btn-sm btn-dark text-uppercase" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" title="Align None">
|
||||
<i class="fa fa-ban fa-fw"></i>
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue