From 4c98a82e4ff80e025c832736399173adb85d352d Mon Sep 17 00:00:00 2001 From: Thiago Sampaio Date: Thu, 16 May 2024 17:10:00 -0300 Subject: [PATCH] =?UTF-8?q?cria=C3=A7=C3=A3o=20de=20botoes=20de=20criar=20?= =?UTF-8?q?paragrafo=20na=20tabela?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../icons/Editor/corner-down-left-line.svg | 1 + .../icons/Editor/corner-down-right-line.svg | 1 + src/extensions/table/TableView.ts | 3 ++ src/extensions/table/itensModalTable.ts | 11 +++- src/extensions/table/tableFocus.ts | 53 +++++++++++++++++++ src/public/style.css | 44 +++++++++++++-- 6 files changed, 109 insertions(+), 4 deletions(-) create mode 100644 src/assets/icons/Editor/corner-down-left-line.svg create mode 100644 src/assets/icons/Editor/corner-down-right-line.svg create mode 100644 src/extensions/table/tableFocus.ts diff --git a/src/assets/icons/Editor/corner-down-left-line.svg b/src/assets/icons/Editor/corner-down-left-line.svg new file mode 100644 index 0000000..5044154 --- /dev/null +++ b/src/assets/icons/Editor/corner-down-left-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/Editor/corner-down-right-line.svg b/src/assets/icons/Editor/corner-down-right-line.svg new file mode 100644 index 0000000..ec34402 --- /dev/null +++ b/src/assets/icons/Editor/corner-down-right-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/extensions/table/TableView.ts b/src/extensions/table/TableView.ts index 80ac514..709447a 100644 --- a/src/extensions/table/TableView.ts +++ b/src/extensions/table/TableView.ts @@ -18,6 +18,7 @@ import { Balloon } from '../../editor/ui/Balloon' import { criaTabelaModal } from './itensModalTable' import { objParaCss } from './table' +import TableFocus from './tableFocus' import { criaDropCell, criaDropColuna, criaDropLinhas } from './tableToolbarItens' function clickHandler(table: TableView) { @@ -128,6 +129,8 @@ export class TableView implements NodeView { updateColumns(node, this.colgroup, this.table, this.cellMinWidth) this.contentDOM = this.table.appendChild(document.createElement('tbody')) + new TableFocus(this) + const configStorage = { celumnsTable: { toolbarButtonConfig: { diff --git a/src/extensions/table/itensModalTable.ts b/src/extensions/table/itensModalTable.ts index bf6a97a..45d80c4 100644 --- a/src/extensions/table/itensModalTable.ts +++ b/src/extensions/table/itensModalTable.ts @@ -252,7 +252,16 @@ function itensModalTable(editor: ExitusEditor) { dropdownContent.appendChild(botaoConfirma) const botaoCancela = createButton(editor, 'Cancelar', () => { - // o que acontece quando clicar no botão + ;(editor.commands as any).setWrapperStyle({ + Direita: 'auto', + Esquerda: 'auto' + }) + ;(editor.commands as any).setTableStyle({ + height: ``, + width: ``, + background: ``, + border: `` + }) }) botaoCancela.className = 'botaoCancela' const iconeCancela = document.createElement('span') diff --git a/src/extensions/table/tableFocus.ts b/src/extensions/table/tableFocus.ts new file mode 100644 index 0000000..8414f44 --- /dev/null +++ b/src/extensions/table/tableFocus.ts @@ -0,0 +1,53 @@ +import { Button } from '@editor/ui' +import setaCima from '@icons/corner-down-left-line.svg' +import setaBaixo from '@icons/corner-down-right-line.svg' +import type ExitusEditor from 'src/ExitusEditor' + +import { type TableView } from './TableView' + +export default class TableFocus { + tableView: TableView + FocarCima!: HTMLElement + FocarBaixo!: HTMLElement + + constructor(tableView: TableView, editor: ExitusEditor) { + this.tableView = tableView + this.focaTabela(editor) + } + + private focaTabela(editor: ExitusEditor) { + const element = this.tableView.tableWrapper + element.style.position = 'relative' + + const botaoCima = createButton(editor, setaCima, () => { + this.moveAlvoParaCima() + }) + this.FocarCima = element.appendChild(botaoCima) + this.FocarCima.classList.add('bolinha', 'bolinha-cima') + + const botaoBaixo = createButton(editor, setaBaixo, () => { + this.moveAlvoParaBaixo() + }) + this.FocarBaixo = element.appendChild(botaoBaixo) + this.FocarBaixo.classList.add('bolinha', 'bolinha-baixo') + } + + private moveAlvoParaCima() { + const paragrafo = '

' + this.tableView.dom.insertAdjacentHTML('beforebegin', paragrafo) + } + + private moveAlvoParaBaixo() { + const paragrafo = '

' + this.tableView.dom.insertAdjacentHTML('afterend', paragrafo) + } +} + +function createButton(editor: ExitusEditor, icone: string, onClick: () => void) { + const button = new Button(editor, { + icon: icone, + classList: ['bolinha'] + }) + button.bind('click', onClick) + return button.render() +} diff --git a/src/public/style.css b/src/public/style.css index 3e12108..4ae8941 100644 --- a/src/public/style.css +++ b/src/public/style.css @@ -84,6 +84,10 @@ outline-color: #ffc83d; } + .tiptap-widget:hover > .bolinha{ + display: block; + } + .ex-selected { outline-color: hsl(218,81.8%,56.9%)!important; } @@ -123,15 +127,23 @@ display: none!important; } - .ex-toolbar-button:hover { + .ex-toolbar-button:not(.bolinha):hover { background: #f0f0f0; - } +} .ex-toolbar-button svg { width: 20px; height: 20px; } + .bolinha svg { + width: 15px; + height: 15px; + color: #fff; + margin: -1px -1px; +} + + .resize-cursor { cursor: ew-resize; cursor: col-resize; @@ -495,4 +507,30 @@ top: 135px; left: 65px; right: auto; -} \ No newline at end of file +} + + +.bolinha { + width: 18px; + height: 18px; + background-color: #007bff; + border-radius: 50%; + position: absolute; + cursor: pointer; + z-index: 0; + display: none; +} + + +.bolinha-cima { + top: -12px; + left: 4%; + transform: translateX(-50%); +} + + +.bolinha-baixo { + bottom: -12px; + left: 96%; + transform: translateX(-50%); +}