iceshrimp/src/client/app/common/views/components/ui/button.vue

225 lines
4.3 KiB
Vue
Raw Normal View History

2018-06-14 07:22:50 +09:00
<template>
2018-11-04 14:23:28 +09:00
<component class="dmtdnykelhudezerjlfpbhgovrgnqqgr"
:is="link ? 'a' : 'button'"
2019-04-29 14:38:06 +09:00
:class="{ inline, primary, wait, round: $store.state.device.roundedCorners }"
2018-11-04 14:23:28 +09:00
:type="type"
@click="$emit('click')"
2018-12-04 01:02:19 +09:00
@mousedown="onMousedown"
2018-11-04 14:23:28 +09:00
>
2018-12-04 01:02:19 +09:00
<div ref="ripples" class="ripples"></div>
<div class="content">
<slot></slot>
</div>
2018-10-03 02:57:31 +09:00
</component>
2018-06-14 07:22:50 +09:00
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
2018-11-05 10:29:57 +09:00
inject: {
horizonGrouped: {
default: false
}
},
2018-06-14 07:22:50 +09:00
props: {
type: {
type: String,
required: false
2018-09-28 20:39:32 +09:00
},
primary: {
type: Boolean,
required: false,
default: false
},
inline: {
type: Boolean,
required: false,
2018-11-04 14:23:28 +09:00
default(): boolean {
return this.horizonGrouped;
}
2018-10-03 02:57:31 +09:00
},
link: {
type: Boolean,
required: false,
default: false
2018-11-14 20:17:12 +09:00
},
autofocus: {
type: Boolean,
required: false,
default: false
},
2018-12-13 01:18:17 +09:00
wait: {
type: Boolean,
required: false,
default: false
},
2018-11-14 20:17:12 +09:00
},
mounted() {
if (this.autofocus) {
this.$nextTick(() => {
this.$el.focus();
});
}
2018-12-04 01:02:19 +09:00
},
methods: {
onMousedown(e: MouseEvent) {
function distance(p, q) {
2019-08-22 02:36:19 +09:00
return Math.hypot(p.x - q.x, p.y - q.y);
2018-12-04 01:02:19 +09:00
}
function calcCircleScale(boxW, boxH, circleCenterX, circleCenterY) {
const origin = {x: circleCenterX, y: circleCenterY};
const dist1 = distance({x: 0, y: 0}, origin);
const dist2 = distance({x: boxW, y: 0}, origin);
const dist3 = distance({x: 0, y: boxH}, origin);
const dist4 = distance({x: boxW, y: boxH }, origin);
return Math.max(dist1, dist2, dist3, dist4) * 2;
}
const rect = e.target.getBoundingClientRect();
const ripple = document.createElement('div');
ripple.style.top = (e.clientY - rect.top - 1).toString() + 'px';
ripple.style.left = (e.clientX - rect.left - 1).toString() + 'px';
this.$refs.ripples.appendChild(ripple);
const circleCenterX = e.clientX - rect.left;
const circleCenterY = e.clientY - rect.top;
const scale = calcCircleScale(e.target.clientWidth, e.target.clientHeight, circleCenterX, circleCenterY);
setTimeout(() => {
ripple.style.transform = 'scale(' + (scale / 2) + ')';
}, 1);
setTimeout(() => {
ripple.style.transition = 'all 1s ease';
ripple.style.opacity = '0';
}, 1000);
setTimeout(() => {
if (this.$refs.ripples) this.$refs.ripples.removeChild(ripple);
}, 2000);
}
2018-06-14 07:22:50 +09:00
}
});
</script>
<style lang="stylus" scoped>
2018-09-28 20:39:32 +09:00
.dmtdnykelhudezerjlfpbhgovrgnqqgr
display block
width 100%
margin 0
padding 8px 10px
2018-10-03 02:57:31 +09:00
text-align center
2018-09-28 20:39:32 +09:00
font-weight normal
2019-05-19 02:47:31 +09:00
font-size 14px
2018-11-14 16:30:58 +09:00
line-height 24px
2018-09-28 20:39:32 +09:00
border none
outline none
box-shadow none
2018-10-03 02:57:31 +09:00
text-decoration none
user-select none
2018-12-13 01:18:17 +09:00
color var(--text)
background var(--buttonBg)
2019-04-29 14:38:06 +09:00
&.round
border-radius 6px
2018-12-13 01:18:17 +09:00
&: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)
2018-10-03 02:57:31 +09:00
*
pointer-events none
2018-11-25 05:10:48 +09:00
user-select none
&:disabled
opacity 0.7
2018-09-28 20:39:32 +09:00
2018-09-29 00:20:49 +09:00
&:focus
&:after
content ""
pointer-events none
position absolute
top -5px
right -5px
bottom -5px
left -5px
border 2px solid var(--primaryAlpha03)
2019-04-29 14:38:06 +09:00
&.round:focus:after
border-radius 10px
2018-09-29 00:20:49 +09:00
2018-09-29 00:01:11 +09:00
&:not(.inline) + .dmtdnykelhudezerjlfpbhgovrgnqqgr
margin-top 16px
2018-09-28 20:39:32 +09:00
&.inline
display inline-block
width auto
2018-11-14 16:30:58 +09:00
min-width 100px
2018-09-28 20:39:32 +09:00
&.primary
2018-06-14 07:22:50 +09:00
font-weight bold
2018-12-13 01:18:17 +09:00
&.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
2018-06-14 18:57:54 +09:00
2018-12-13 01:18:17 +09:00
@keyframes stripe-bg
from {background-position: 0 0;}
to {background-position: -64px 32px;}
2018-06-14 14:52:37 +09:00
2018-12-04 01:02:19 +09:00
> .ripples
position absolute
z-index 0
top 0
left 0
width 100%
height 100%
overflow hidden
>>> div
position absolute
width 2px
height 2px
border-radius 100%
background rgba(0, 0, 0, 0.1)
opacity 1
transform scale(1)
transition all 0.5s cubic-bezier(0, .5, .5, 1)
2019-04-29 14:38:06 +09:00
&.round > .ripples
border-radius 6px
2018-12-04 01:02:19 +09:00
&.primary > .ripples >>> div
background rgba(0, 0, 0, 0.15)
> .content
z-index 1
2018-06-14 07:22:50 +09:00
</style>