26b84c435a
Also only show the halo when we're actually scrolled down, because the point is to make it more visible against arbitrary content.
77 lines
1.8 KiB
HTML
77 lines
1.8 KiB
HTML
<div class="compose-box-button-halo {sticky ? 'compose-box-button-halo-sticky' : ''}">
|
|
<button class="primary compose-box-button"
|
|
{disabled}
|
|
aria-label={sticky ? 'Compose' : 'Toot!'}
|
|
on:click>
|
|
<span class={$postingStatus || sticky ? 'hidden' : ''}>
|
|
Toot!
|
|
</span>
|
|
<div class="compose-box-button-spinner"
|
|
aria-hidden="true">
|
|
<svg class="compose-box-button-svg {$postingStatus ? 'spin' : 'hidden'}">
|
|
<use xlink:href="#fa-spinner" />
|
|
</svg>
|
|
</div>
|
|
|
|
<div class="compose-box-button-compose {sticky ? '' : 'hidden'}"
|
|
aria-hidden="true">
|
|
<svg class="compose-box-button-svg">
|
|
<use xlink:href="#fa-pencil" />
|
|
</svg>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
<style>
|
|
.compose-box-button-halo {
|
|
border-radius: 2px;
|
|
margin: 5px 15px 15px 5px;
|
|
pointer-events: auto;
|
|
}
|
|
.compose-box-button-halo-sticky {
|
|
background-color: var(--compose-button-halo);
|
|
}
|
|
.compose-box-button {
|
|
grid-area: button;
|
|
justify-self: right;
|
|
text-transform: uppercase;
|
|
position: relative;
|
|
margin: 5px;
|
|
pointer-events: auto;
|
|
}
|
|
.compose-box-button-spinner, .compose-box-button-compose {
|
|
position: absolute;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
z-index: 10;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
.compose-box-button-svg {
|
|
width: 24px;
|
|
height: 24px;
|
|
fill: var(--button-primary-text);
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
.compose-box-button-halo {
|
|
margin: 5px;
|
|
}
|
|
.compose-box-button {
|
|
margin: 5px;
|
|
}
|
|
}
|
|
</style>
|
|
<script>
|
|
import { store } from '../../_store/store'
|
|
|
|
export default {
|
|
store: () => store,
|
|
computed: {
|
|
disabled: ({ $postingStatus, overLimit }) => $postingStatus || overLimit
|
|
}
|
|
}
|
|
</script>
|