Started adding action bars
This commit is contained in:
parent
141bc04505
commit
4948cf9c3b
|
@ -19,4 +19,24 @@
|
||||||
outline: 1px solid var(--grey-2);
|
outline: 1px solid var(--grey-2);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&__edit-cover {
|
||||||
|
}
|
||||||
|
|
||||||
|
&__remove {
|
||||||
|
position: absolute;
|
||||||
|
left: 100%;
|
||||||
|
top: 0;
|
||||||
|
max-height: 100%;
|
||||||
|
height: auto;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__sliders {
|
||||||
|
position: absolute;
|
||||||
|
right: 100%;
|
||||||
|
width: auto;
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -10,6 +10,8 @@ import {
|
||||||
SbMode,
|
SbMode,
|
||||||
} from '@components/TreeElement';
|
} from '@components/TreeElement';
|
||||||
|
|
||||||
|
import SbButton from './Button';
|
||||||
|
|
||||||
import './Block.scss';
|
import './Block.scss';
|
||||||
|
|
||||||
interface BlockProps {
|
interface BlockProps {
|
||||||
|
@ -64,7 +66,13 @@ export default defineComponent({
|
||||||
|
|
||||||
return () => (<div class={classes.value}>
|
return () => (<div class={classes.value}>
|
||||||
<div class="sb-block__edit-cover"></div>
|
<div class="sb-block__edit-cover"></div>
|
||||||
<div class="sb-block__mover"></div>
|
<div class="sb-block__remove">
|
||||||
|
<SbButton>x</SbButton>
|
||||||
|
</div>
|
||||||
|
<div class="sb-block__sliders">
|
||||||
|
<SbButton>></SbButton>
|
||||||
|
<SbButton><</SbButton>
|
||||||
|
</div>
|
||||||
<BlockComponent
|
<BlockComponent
|
||||||
data={props.block.data}
|
data={props.block.data}
|
||||||
block-id={props.block.blockId}
|
block-id={props.block.blockId}
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
.sb-toolbar {
|
.sb-toolbar {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 100%;
|
bottom: 100%;
|
||||||
|
left: 0;
|
||||||
width: auto;
|
width: auto;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
height: auto;
|
height: auto;
|
||||||
|
|
Loading…
Reference in a new issue