From 28105f5315c4d2b29f96fa08d25d21d25d6c29b6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Benjamin=20B=C3=A4dorf?= <hello@benjaminbaedorf.eu>
Date: Thu, 28 May 2020 22:55:03 +0200
Subject: [PATCH] More UI improvements

---
 src/components/internal/Block.tsx         |  1 -
 src/components/internal/BlockOrdering.tsx |  1 +
 src/components/internal/Select.scss       | 25 +++++++++++++++++++++++
 src/components/internal/Select.tsx        | 25 +++++++++++++++++++++++
 src/components/internal/Toolbar.tsx       |  1 +
 src/components/user/Paragraph/edit.tsx    |  6 +++---
 6 files changed, 55 insertions(+), 4 deletions(-)
 create mode 100644 src/components/internal/Select.scss
 create mode 100644 src/components/internal/Select.tsx

diff --git a/src/components/internal/Block.tsx b/src/components/internal/Block.tsx
index e15996e..f3b9eb4 100644
--- a/src/components/internal/Block.tsx
+++ b/src/components/internal/Block.tsx
@@ -85,7 +85,6 @@ export default defineComponent({
     return () => <div
       ref={el}
       class={classes.value}
-      onClick={($event: MouseEvent) => $event.stopPropagation()}
     >
       <div class="sb-block__edit-cover"></div>
       {props.sortable
diff --git a/src/components/internal/BlockOrdering.tsx b/src/components/internal/BlockOrdering.tsx
index 311b2ea..7ce76db 100644
--- a/src/components/internal/BlockOrdering.tsx
+++ b/src/components/internal/BlockOrdering.tsx
@@ -55,6 +55,7 @@ export default defineComponent({
       <div
         class={classes.value}
         style={styles}
+        onClick={($event: MouseEvent) => $event.stopPropagation()}
       >
         <SbButton onClick={props.eventMoveUp}>{props.sortable === 'vertical' ? '↑' : '←'}</SbButton>
         <SbButton onClick={props.eventRemoveBlock}>x</SbButton>
diff --git a/src/components/internal/Select.scss b/src/components/internal/Select.scss
new file mode 100644
index 0000000..de3326b
--- /dev/null
+++ b/src/components/internal/Select.scss
@@ -0,0 +1,25 @@
+.sb-select {
+  background-color: var(--grey-0);
+  border: 1px solid var(--grey-2);
+  position: relative;
+
+  &:hover {
+    border: 1px solid var(--interact);
+  }
+
+  &::after {
+    position: absolute;
+    content: '⯆';
+    top: 6px;
+    height: 100%;
+    right: 12px;
+    pointer-events: none;
+  }
+
+  &__input {
+    background: transparent;
+    appearance: none;
+    border: 0;
+    padding: 8px 32px 8px 12px;
+  }
+}
diff --git a/src/components/internal/Select.tsx b/src/components/internal/Select.tsx
new file mode 100644
index 0000000..b875108
--- /dev/null
+++ b/src/components/internal/Select.tsx
@@ -0,0 +1,25 @@
+import { defineComponent } from '@vue/composition-api';
+
+import './Select.scss';
+
+export default defineComponent({
+  name: 'sb-select',
+
+  inheritAttrs: false,
+
+  setup(props, context) {
+    return () => (
+      <div class="sb-select">
+        <select
+          class="sb-select__input"
+          {...{
+            attrs: context.attrs,
+            on: context.listeners,
+          }}
+        >
+          {context.slots.default()}
+        </select>
+      </div>
+    );
+  },
+});
diff --git a/src/components/internal/Toolbar.tsx b/src/components/internal/Toolbar.tsx
index 73d361a..962f564 100644
--- a/src/components/internal/Toolbar.tsx
+++ b/src/components/internal/Toolbar.tsx
@@ -36,6 +36,7 @@ export default defineComponent({
       <div
         class="sb-toolbar"
         style={styles}
+        onClick={($event: MouseEvent) => $event.stopPropagation()}
       >
         {context.slots.default()}
       </div>
diff --git a/src/components/user/Paragraph/edit.tsx b/src/components/user/Paragraph/edit.tsx
index 074fd0b..209bca3 100644
--- a/src/components/user/Paragraph/edit.tsx
+++ b/src/components/user/Paragraph/edit.tsx
@@ -17,6 +17,7 @@ import {
 } from '@components/TreeElement';
 
 import SbToolbar from '@internal/Toolbar';
+import SbSelect from '@internal/Select';
 
 import {
   getDefaultData,
@@ -114,7 +115,6 @@ export default defineComponent({
         value: localData.value,
         align: localData.align,
       });
-      activate(null);
     };
 
     const onKeydown = ($event: KeyboardEvent) => {
@@ -141,14 +141,14 @@ export default defineComponent({
     return () => (
       <div class={classes.value}>
         <SbToolbar>
-          <select
+          <SbSelect
             value={localData.align}
             onChange={setAlignment}
           >
             <option>left</option>
             <option>center</option>
             <option>right</option>
-          </select>
+          </SbSelect>
         </SbToolbar>
         <p
           class="sb-paragraph__input"