This commit is contained in:
syuilo 2018-12-13 01:18:17 +09:00
parent f3ee63fcbe
commit 8045bbff1c
No known key found for this signature in database
GPG key ID: BDC4C49D06AB9D69
2 changed files with 45 additions and 91 deletions

View file

@ -1,7 +1,7 @@
<template> <template>
<component class="dmtdnykelhudezerjlfpbhgovrgnqqgr" <component class="dmtdnykelhudezerjlfpbhgovrgnqqgr"
:is="link ? 'a' : 'button'" :is="link ? 'a' : 'button'"
:class="[styl, { inline, primary }]" :class="{ inline, primary, wait }"
:type="type" :type="type"
@click="$emit('click')" @click="$emit('click')"
@mousedown="onMousedown" @mousedown="onMousedown"
@ -48,11 +48,11 @@ export default Vue.extend({
required: false, required: false,
default: false default: false
}, },
wait: {
type: Boolean,
required: false,
default: false
}, },
data() {
return {
styl: 'fill'
};
}, },
mounted() { mounted() {
if (this.autofocus) { if (this.autofocus) {
@ -121,6 +121,24 @@ export default Vue.extend({
box-shadow none box-shadow none
text-decoration none text-decoration none
user-select none user-select none
color var(--text)
background var(--buttonBg)
&:not(:disabled):hover
background var(--buttonHoverBg)
&:not(:disabled):active
background var(--buttonActiveBg)
&.primary
color var(--primaryForeground)
background var(--primary)
&:not(:disabled):hover
background var(--primaryLighten5)
&:not(:disabled):active
background var(--primaryDarken5)
* *
pointer-events none pointer-events none
@ -152,35 +170,25 @@ export default Vue.extend({
&.primary &.primary
font-weight bold font-weight bold
&.fill &.wait
color var(--text) background linear-gradient(
background var(--buttonBg) 45deg,
var(--primaryDarken10) 25%,
var(--primary) 25%,
var(--primary) 50%,
var(--primaryDarken10) 50%,
var(--primaryDarken10) 75%,
var(--primary) 75%,
var(--primary)
)
background-size 32px 32px
animation stripe-bg 1.5s linear infinite
opacity 0.7
cursor wait
&:not(:disabled):hover @keyframes stripe-bg
background var(--buttonHoverBg) from {background-position: 0 0;}
to {background-position: -64px 32px;}
&:not(:disabled):active
background var(--buttonActiveBg)
&.primary
color var(--primaryForeground)
background var(--primary)
&:not(:disabled):hover
background var(--primaryLighten5)
&:not(:disabled):active
background var(--primaryDarken5)
&:not(.fill)
color var(--primary)
background none
&:not(:disabled):hover
color var(--primaryDarken5)
&:not(:disabled):active
background var(--primaryAlpha03)
> .ripples > .ripples
position absolute position absolute

View file

@ -16,7 +16,7 @@
<b>{{ $t('recent-tags') }}:</b> <b>{{ $t('recent-tags') }}:</b>
<a v-for="tag in recentHashtags.slice(0, 5)" @click="addTag(tag)" :title="$t('click-to-tagging')">#{{ tag }}</a> <a v-for="tag in recentHashtags.slice(0, 5)" @click="addTag(tag)" :title="$t('click-to-tagging')">#{{ tag }}</a>
</div> </div>
<div class="local-only" v-if="this.localOnly == true">{{ $t('local-only-message') }}</div> <div class="local-only" v-if="localOnly == true">{{ $t('local-only-message') }}</div>
<input v-show="useCw" ref="cw" v-model="cw" :placeholder="$t('annotations')" v-autocomplete="'cw'"> <input v-show="useCw" ref="cw" v-model="cw" :placeholder="$t('annotations')" v-autocomplete="'cw'">
<div class="textarea"> <div class="textarea">
<textarea :class="{ with: (files.length != 0 || poll) }" <textarea :class="{ with: (files.length != 0 || poll) }"
@ -54,9 +54,9 @@
<span v-if="visibility === 'private'"><fa icon="lock"/></span> <span v-if="visibility === 'private'"><fa icon="lock"/></span>
</button> </button>
<p class="text-count" :class="{ over: trimmedLength(text) > maxNoteTextLength }">{{ maxNoteTextLength - trimmedLength(text) }}</p> <p class="text-count" :class="{ over: trimmedLength(text) > maxNoteTextLength }">{{ maxNoteTextLength - trimmedLength(text) }}</p>
<button :class="{ posting }" class="submit" :disabled="!canPost" @click="post"> <ui-button primary :wait="posting" class="submit" :disabled="!canPost" @click="post">
{{ posting ? $t('posting') : submitText }}<mk-ellipsis v-if="posting"/> {{ posting ? $t('posting') : submitText }}<mk-ellipsis v-if="posting"/>
</button> </ui-button>
<input ref="file" type="file" multiple="multiple" tabindex="-1" @change="onChangeFile"/> <input ref="file" type="file" multiple="multiple" tabindex="-1" @change="onChangeFile"/>
<div class="dropzone" v-if="draghover"></div> <div class="dropzone" v-if="draghover"></div>
</div> </div>
@ -684,62 +684,8 @@ export default Vue.extend({
position absolute position absolute
bottom 16px bottom 16px
right 16px right 16px
cursor pointer
padding 0
margin 0
width 110px width 110px
height 40px height 40px
font-size 1em
color var(--primaryForeground)
background var(--primary)
outline none
border none
border-radius 4px
&:not(:disabled)
font-weight bold
&:hover:not(:disabled)
background var(--primaryLighten5)
&:active:not(:disabled)
background var(--primaryDarken5)
&:focus
&:after
content ""
pointer-events none
position absolute
top -5px
right -5px
bottom -5px
left -5px
border 2px solid var(--primaryAlpha03)
border-radius 8px
&:disabled
opacity 0.7
cursor default
&.wait
background linear-gradient(
45deg,
var(--primaryDarken10) 25%,
var(--primary) 25%,
var(--primary) 50%,
var(--primaryDarken10) 50%,
var(--primaryDarken10) 75%,
var(--primary) 75%,
var(--primary)
)
background-size 32px 32px
animation stripe-bg 1.5s linear infinite
opacity 0.7
cursor wait
@keyframes stripe-bg
from {background-position: 0 0;}
to {background-position: -64px 32px;}
> .text-count > .text-count
pointer-events none pointer-events none