More UI improvements

This commit is contained in:
Benjamin Bädorf 2020-05-28 22:55:03 +02:00
parent 191778b440
commit 28105f5315
No known key found for this signature in database
GPG key ID: 4406E80E13CD656C
6 changed files with 55 additions and 4 deletions

View file

@ -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

View file

@ -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>

View file

@ -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;
}
}

View file

@ -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>
);
},
});

View file

@ -36,6 +36,7 @@ export default defineComponent({
<div
class="sb-toolbar"
style={styles}
onClick={($event: MouseEvent) => $event.stopPropagation()}
>
{context.slots.default()}
</div>

View file

@ -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"