From 141bc04505b9c3671bd19a20b5b89324a3a177d8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Benjamin=20B=C3=A4dorf?= Date: Wed, 27 May 2020 20:36:46 +0200 Subject: [PATCH] Added fixes --- src/components/internal/Block.scss | 3 +- src/components/internal/Block.tsx | 16 ++++++---- src/components/internal/BlockPicker.scss | 9 ++++++ src/components/internal/BlockPicker.tsx | 5 ++- src/components/user/Image/edit.tsx | 22 ++++--------- src/components/user/Image/style.scss | 11 ++++--- src/components/user/Layout/edit.tsx | 39 ++++++++++++++++-------- src/components/user/Paragraph/edit.tsx | 23 +++++++++----- 8 files changed, 77 insertions(+), 51 deletions(-) diff --git a/src/components/internal/Block.scss b/src/components/internal/Block.scss index 1e0a32c..f9c5e33 100644 --- a/src/components/internal/Block.scss +++ b/src/components/internal/Block.scss @@ -3,7 +3,7 @@ display: flex; align-items: stretch; justify-items: stretch; - min-height: 50px; + height: auto; > * > .sb-toolbar { opacity: 0; @@ -16,6 +16,7 @@ > * > .sb-toolbar { opacity: 1; pointer-events: all; + outline: 1px solid var(--grey-2); } } } diff --git a/src/components/internal/Block.tsx b/src/components/internal/Block.tsx index 8b2dd4d..d5f893c 100644 --- a/src/components/internal/Block.tsx +++ b/src/components/internal/Block.tsx @@ -17,6 +17,7 @@ interface BlockProps { eventUpdate: (b?: Block) => void; eventInsertBlock: (b?: Block) => void; eventAppendBlock: (b?: Block) => void; + eventRemoveBlock: () => void; } export default defineComponent({ @@ -30,6 +31,7 @@ export default defineComponent({ eventUpdate: { type: Function, default: () => {} }, eventInsertBlock: { type: Function, default: () => {} }, eventAppendBlock: { type: Function, default: () => {} }, + eventRemoveBlock: { type: Function, default: () => {} }, }, setup(props: BlockProps, context) { @@ -51,7 +53,6 @@ export default defineComponent({ }; const BlockComponent = getBlock(props.block.name) as any; - if (mode.value === SbMode.Display) { return () => ( { - $event.stopPropagation(); - activate(); - }} + eventRemoveBlock={props.eventRemoveBlock} {...{ attrs: context.attrs, - on: context.listeners, + nativeOn: { + click: ($event: MouseEvent) => { + $event.stopPropagation(); + activate(); + }, + ...context.listeners, + }, }} /> ); diff --git a/src/components/internal/BlockPicker.scss b/src/components/internal/BlockPicker.scss index 40ef556..718d55c 100644 --- a/src/components/internal/BlockPicker.scss +++ b/src/components/internal/BlockPicker.scss @@ -1,2 +1,11 @@ .sb-block-picker { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + width: 100%; + + &__add-button { + padding: 24px 32px; + } } diff --git a/src/components/internal/BlockPicker.tsx b/src/components/internal/BlockPicker.tsx index b69380c..0ff3426 100644 --- a/src/components/internal/BlockPicker.tsx +++ b/src/components/internal/BlockPicker.tsx @@ -34,10 +34,9 @@ export default defineComponent({ }; return () => ( -
+
{ open.value = true; diff --git a/src/components/user/Image/edit.tsx b/src/components/user/Image/edit.tsx index a230a98..f1820b9 100644 --- a/src/components/user/Image/edit.tsx +++ b/src/components/user/Image/edit.tsx @@ -12,6 +12,7 @@ import { } from '@components/TreeElement'; import SbToolbar from '@internal/Toolbar'; +import SbButton from '@internal/Button'; import { getDefaultData, @@ -41,8 +42,6 @@ export default defineComponent({ alt: props.data.alt, }); - console.log(props); - const fileInput: Ref = ref(null); watch(() => props.data, () => { @@ -73,28 +72,19 @@ export default defineComponent({ return () => (
- Image Edit + {localData.src + ? Change Image + : null} {localData.src ? {localData.alt} - : - } + : Select Image}
); }, diff --git a/src/components/user/Image/style.scss b/src/components/user/Image/style.scss index d2d1767..f7dd570 100644 --- a/src/components/user/Image/style.scss +++ b/src/components/user/Image/style.scss @@ -1,9 +1,10 @@ .sb-image { - max-width: 100%; - max-height: 100%; - img { - max-width: 100%; - max-height: 100%; + @at-root { + & > img, + img#{&} { + width: 100%; + height: auto; + } } } diff --git a/src/components/user/Layout/edit.tsx b/src/components/user/Layout/edit.tsx index 74e64e8..34a573c 100644 --- a/src/components/user/Layout/edit.tsx +++ b/src/components/user/Layout/edit.tsx @@ -65,6 +65,9 @@ export default defineComponent({ const onChildUpdate = (child: Block, updated: Block) => { const index = localData.children.indexOf(child); + if (index === -1) { + return; + } props.eventUpdate({ children: [ ...localData.children.slice(0, index), @@ -78,26 +81,35 @@ export default defineComponent({ }; const appendBlock = (block: Block) => { - props.eventUpdate({ - children: [ - ...localData.children, - block, - ], - }); + localData.children = [ + ...localData.children, + block, + ]; + props.eventUpdate({ children: [...localData.children] }); activate(block.blockId); }; const insertBlock = (index: number, block: Block) => { - props.eventUpdate({ - children: [ - ...localData.children.slice(0, index + 1), - block, - ...localData.children.slice(index + 1), - ], - }); + localData.children = [ + ...localData.children.slice(0, index + 1), + block, + ...localData.children.slice(index + 1), + ]; + props.eventUpdate({ children: [...localData.children] }); activate(block.blockId); }; + const removeBlock = (index: number) => { + localData.children = [ + ...localData.children.slice(0, index), + ...localData.children.slice(index + 1), + ]; + props.eventUpdate({ children: [...localData.children] }); + + const newActiveIndex = Math.max(index - 1, 0); + activate(localData.children[newActiveIndex].blockId); + }; + return () => (
@@ -118,6 +130,7 @@ export default defineComponent({ eventUpdate={(updated: Block) => onChildUpdate(child, updated)} eventInsertBlock={(block: Block) => insertBlock(index, block)} eventAppendBlock={appendBlock} + eventRemoveBlock={() => removeBlock(index)} /> ))} diff --git a/src/components/user/Paragraph/edit.tsx b/src/components/user/Paragraph/edit.tsx index 458ba05..11dfd49 100644 --- a/src/components/user/Paragraph/edit.tsx +++ b/src/components/user/Paragraph/edit.tsx @@ -29,6 +29,7 @@ interface ParagraphProps extends BlockProps { data: ParagraphData; eventUpdate: (b?: ParagraphData) => void; eventInsertBlock: (b?: BlockData) => void; + eventRemoveBlock: () => void; } export default defineComponent({ @@ -44,6 +45,7 @@ export default defineComponent({ }, eventUpdate: { type: Function, default: () => {} }, eventInsertBlock: { type: Function, default: () => {} }, + eventRemoveBlock: { type: Function, default: () => {} }, }, setup(props: ParagraphProps) { @@ -61,16 +63,21 @@ export default defineComponent({ const { isActive, activate } = useActivation(props.blockId); + const focusInput = () => { + if (inputEl.value && isActive.value) { + inputEl.value.focus(); + } + }; + onMounted(() => { + focusInput(); if (inputEl.value) { inputEl.value.innerHTML = localData.value; - - if (isActive.value) { - inputEl.value.focus(); - } } }); + watch(isActive, focusInput); + watch(() => props.data, () => { localData.value = props.data.value; localData.align = props.data.align; @@ -110,8 +117,8 @@ export default defineComponent({ activate(null); }; - const onKeypress = ($event: KeyboardEvent) => { - if ($event.key === 'Enter') { + const onKeyup = ($event: KeyboardEvent) => { + if ($event.key === 'Enter' && !$event.shiftKey) { const blockId = `${+(new Date())}`; props.eventInsertBlock({ blockId, @@ -122,6 +129,8 @@ export default defineComponent({ activate(blockId); $event.preventDefault(); + } else if ($event.key === 'Backspace' && localData.value === '') { + props.eventRemoveBlock(); } }; @@ -144,7 +153,7 @@ export default defineComponent({ onInput={onTextUpdate} onFocus={onFocus} onBlur={onBlur} - onKeypress={onKeypress} + onKeyup={onKeyup} >

);