diff --git a/client/src/entrypoints/contrib/typed_table_block/typed_table_block.js b/client/src/entrypoints/contrib/typed_table_block/typed_table_block.js index ea052f6686..fe0acb33d2 100644 --- a/client/src/entrypoints/contrib/typed_table_block/typed_table_block.js +++ b/client/src/entrypoints/contrib/typed_table_block/typed_table_block.js @@ -45,12 +45,16 @@ export class TypedTableBlock {
- +
+ +
- + `); $(placeholder).replaceWith(dom); @@ -193,9 +197,11 @@ export class TypedTableBlock { column.headingInput = document.createElement('input'); column.headingInput.name = this.prefix + '-column-' + column.id + '-heading'; + column.headingInput.placeholder = 'Column heading'; newHeaderCell.appendChild(column.headingInput); - const prependColumnButton = $(''); + const prependColumnButton = $(``); $(newHeaderCell).append(prependColumnButton); prependColumnButton.on('click', () => { this.toggleAddColumnMenu(prependColumnButton, (chosenBlockDef) => { @@ -203,7 +209,8 @@ export class TypedTableBlock { }); }); - const deleteColumnButton = $(''); + const deleteColumnButton = $(``); $(newHeaderCell).append(deleteColumnButton); deleteColumnButton.on('click', () => { this.deleteColumn(column.position); @@ -294,13 +301,15 @@ export class TypedTableBlock { row.positionInput.value = row.position; controlCell.appendChild(row.positionInput); - const prependRowButton = $(''); + const prependRowButton = $(``); $(controlCell).append(prependRowButton); prependRowButton.on('click', () => { this.insertRow(row.position); }); - const deleteRowButton = $(''); + const deleteRowButton = $(``); $(controlCell).append(deleteRowButton); deleteRowButton.on('click', () => { this.deleteRow(row.position); diff --git a/gulpfile.js/config.js b/gulpfile.js/config.js index 6377b98799..5acfaa2290 100644 --- a/gulpfile.js/config.js +++ b/gulpfile.js/config.js @@ -33,6 +33,7 @@ var apps = [ new App(path.join('wagtail', 'contrib', 'styleguide'), {'appName': 'wagtailstyleguide'}), new App(path.join('wagtail', 'contrib', 'settings'), {'appName': 'wagtailsettings'}), new App(path.join('wagtail', 'contrib', 'modeladmin'), {'appName': 'wagtailmodeladmin'}), + new App(path.join('wagtail', 'contrib', 'typed_table_block'), {'appName': 'typed_table_block'}), ]; module.exports = { diff --git a/wagtail/contrib/typed_table_block/blocks.py b/wagtail/contrib/typed_table_block/blocks.py index 4a4b5600f9..ded0bcb2c3 100644 --- a/wagtail/contrib/typed_table_block/blocks.py +++ b/wagtail/contrib/typed_table_block/blocks.py @@ -303,7 +303,11 @@ class TypedTableBlockAdapter(Adapter): def media(self): return forms.Media(js=[ versioned_static('typed_table_block/js/typed_table_block.js'), - ]) + ], css={ + 'all': [ + versioned_static('typed_table_block/css/typed_table_block.css'), + ] + }) register(TypedTableBlockAdapter(), TypedTableBlock) diff --git a/wagtail/contrib/typed_table_block/static_src/typed_table_block/scss/typed_table_block.scss b/wagtail/contrib/typed_table_block/static_src/typed_table_block/scss/typed_table_block.scss new file mode 100644 index 0000000000..b6fdf6519d --- /dev/null +++ b/wagtail/contrib/typed_table_block/static_src/typed_table_block/scss/typed_table_block.scss @@ -0,0 +1,32 @@ +.typed-table-block { + table { + margin-top: 1.5em; + margin-left: 1.5em; + } + + th { + position: relative; + + button.prepend-column { + position: absolute; + left: -1.2em; + top: -2.2em; + } + + button.delete-column { + position: absolute; + right: 8px; + top: 1em; + } + } + + tbody tr { + position: relative; + + button.prepend-row { + left: -2.5em; + position: absolute; + top: -1em; + } + } +}