Skip to content

Commit 232c8bd

Browse files
jackycutejackycute
committed
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>
1 parent 02feb97 commit 232c8bd

File tree

3 files changed

+148
-0
lines changed

3 files changed

+148
-0
lines changed

‎public/css/index.css‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,32 @@ body.night{
2525
border: 1px solid #343434;
2626
}
2727

28+
.toolbar > .btn-toolbar {
29+
white-space: nowrap;
30+
overflow-y: auto;
31+
scrollbar-width: none;
32+
}
33+
34+
.toolbar > .btn-toolbar::-webkit-scrollbar {
35+
display: none;
36+
}
37+
38+
.toolbar > .btn-toolbar > .btn-group {
39+
float: none;
40+
}
41+
42+
.toolbar > .btn-toolbar > .btn-group > span {
43+
display: inline-block;
44+
float: left;
45+
color: #fff;
46+
padding: 5px;
47+
line-height: 22px;
48+
}
49+
50+
.toolbar > .btn-toolbar > .btn-group > span.separator {
51+
color: #4d4d4d;
52+
}
53+
2854
.toolbar > .btn-toolbar > .btn-group > .btn {
2955
background-color: #1c1c1e;
3056
padding: 5px;

‎public/js/lib/editor/index.js‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import statusBarTemplate from './statusbar.html'
55
import toolBarTemplate from './toolbar.html'
66
import './markdown-lint'
77
import { initTableEditor } from './table-editor'
8+
import { options, Alignment, FormatType } from '@susisu/mte-kernel'
89

910
/* config section */
1011
const isMac = CodeMirror.keyMap.default === CodeMirror.keyMap.macDefault
@@ -161,6 +162,19 @@ export default class Editor {
161162
var makeLine = $('#makeLine')
162163
var makeComment = $('#makeComment')
163164

165+
var insertRow = $('#insertRow')
166+
var deleteRow = $('#deleteRow')
167+
var moveRowUp = $('#moveRowUp')
168+
var moveRowDown = $('#moveRowDown')
169+
var insertColumn = $('#insertColumn')
170+
var deleteColumn = $('#deleteColumn')
171+
var moveColumnLeft = $('#moveColumnLeft')
172+
var moveColumnRight = $('#moveColumnRight')
173+
var alignLeft = $('#alignLeft')
174+
var alignCenter = $('#alignCenter')
175+
var alignRight = $('#alignRight')
176+
var alignNone = $('#alignNone')
177+
164178
makeBold.click(() => {
165179
utils.wrapTextWith(this.editor, this.editor, '**')
166180
this.editor.focus()
@@ -220,6 +234,72 @@ export default class Editor {
220234
makeComment.click(() => {
221235
utils.insertText(this.editor, '> []')
222236
})
237+
238+
// table tools UI
239+
const opts = options({
240+
smartCursor: true,
241+
formatType: FormatType.NORMAL
242+
})
243+
244+
insertRow.click(() => {
245+
this.tableEditor.insertRow(opts)
246+
this.editor.focus()
247+
})
248+
249+
deleteRow.click(() => {
250+
this.tableEditor.deleteRow(opts)
251+
this.editor.focus()
252+
})
253+
254+
moveRowUp.click(() => {
255+
this.tableEditor.moveRow(-1, opts)
256+
this.editor.focus()
257+
})
258+
259+
moveRowDown.click(() => {
260+
this.tableEditor.moveRow(1, opts)
261+
this.editor.focus()
262+
})
263+
264+
insertColumn.click(() => {
265+
this.tableEditor.insertColumn(opts)
266+
this.editor.focus()
267+
})
268+
269+
deleteColumn.click(() => {
270+
this.tableEditor.deleteColumn(opts)
271+
this.editor.focus()
272+
})
273+
274+
moveColumnLeft.click(() => {
275+
this.tableEditor.moveColumn(-1, opts)
276+
this.editor.focus()
277+
})
278+
279+
moveColumnRight.click(() => {
280+
this.tableEditor.moveColumn(1, opts)
281+
this.editor.focus()
282+
})
283+
284+
alignLeft.click(() => {
285+
this.tableEditor.alignColumn(Alignment.LEFT, opts)
286+
this.editor.focus()
287+
})
288+
289+
alignCenter.click(() => {
290+
this.tableEditor.alignColumn(Alignment.CENTER, opts)
291+
this.editor.focus()
292+
})
293+
294+
alignRight.click(() => {
295+
this.tableEditor.alignColumn(Alignment.RIGHT, opts)
296+
this.editor.focus()
297+
})
298+
299+
alignNone.click(() => {
300+
this.tableEditor.alignColumn(Alignment.NONE, opts)
301+
this.editor.focus()
302+
})
223303
}
224304

225305
addStatusBar () {

‎public/js/lib/editor/toolbar.html‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,5 +44,47 @@
4444
<i class="fa fa-comment fa-fw"></i>
4545
</a>
4646
</div>
47+
<span class="btn-group table-tools hidden-xs" style="display: none;">
48+
<span class="separator" style="margin-left: -10px;">|</span>
49+
<span>Row</span>
50+
<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">
51+
<i class="fa fa-plus-circle fa-fw"></i>
52+
</a>
53+
<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">
54+
<i class="fa fa-minus-circle fa-fw"></i>
55+
</a>
56+
<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">
57+
<i class="fa fa-long-arrow-up fa-fw"></i>
58+
</a>
59+
<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">
60+
<i class="fa fa-long-arrow-down fa-fw"></i>
61+
</a>
62+
<span>Column</span>
63+
<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">
64+
<i class="fa fa-plus-circle fa-fw"></i>
65+
</a>
66+
<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">
67+
<i class="fa fa-minus-circle fa-fw"></i>
68+
</a>
69+
<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">
70+
<i class="fa fa-long-arrow-left fa-fw"></i>
71+
</a>
72+
<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">
73+
<i class="fa fa-long-arrow-right fa-fw"></i>
74+
</a>
75+
<span>Alignment</span>
76+
<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">
77+
<i class="fa fa-align-left fa-fw"></i>
78+
</a>
79+
<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">
80+
<i class="fa fa-align-center fa-fw"></i>
81+
</a>
82+
<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">
83+
<i class="fa fa-align-right fa-fw"></i>
84+
</a>
85+
<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">
86+
<i class="fa fa-ban fa-fw"></i>
87+
</a>
88+
</span>
4789
</div>
4890
</div>

0 commit comments

Comments
 (0)