pinafore/routes/_components/IconButton.html
2018-04-29 17:45:03 -07:00

133 lines
3.3 KiB
HTML

{{#if delegateKey}}
<button type="button"
title={{label}}
aria-label={{label}}
aria-pressed={{pressable ? !!pressed : ''}}
class={{computedClass}}
:disabled
delegate-key={{delegateKey}}
focus-key={{focusKey || ''}} >
<svg class="icon-button-svg {{svgClassName || ''}}" ref:svg>
<use xlink:href={{href}} />
</svg>
</button>
{{else}}
<button type="button"
title={{label}}
aria-label={{label}}
aria-pressed={{pressable ? !!pressed : ''}}
class={{computedClass}}
focus-key={{focusKey || ''}}
:disabled
on:click >
<svg class="icon-button-svg {{svgClassName || ''}}" ref:svg>
<use xlink:href={{href}} />
</svg>
</button>
{{/if}}
<style>
.icon-button {
padding: 6px 10px;
background: none;
border: none;
display: flex;
align-items: center;
justify-content: center;
}
.icon-button-svg {
width: 24px;
height: 24px;
fill: var(--action-button-fill-color);
pointer-events: none; /* hack for Edge */
}
.icon-button.big-icon .icon-button-svg {
width: 32px;
height: 32px;
}
/*
* regular styles
*/
.icon-button:hover .icon-button-svg {
fill: var(--action-button-fill-color-hover);
}
.icon-button.not-pressable:active .icon-button-svg {
fill: var(--action-button-fill-color-active);
}
.icon-button.pressed .icon-button-svg {
fill: var(--action-button-fill-color-pressed);
}
.icon-button.pressed:hover .icon-button-svg {
fill: var(--action-button-fill-color-pressed-hover);
}
.icon-button.pressed:active .icon-button-svg {
fill: var(--action-button-fill-color-pressed-active);
}
/*
* muted
*/
.icon-button.muted-style .icon-button-svg {
fill: var(--action-button-deemphasized-fill-color);
}
.icon-button.muted-style:hover .icon-button-svg {
fill: var(--action-button-deemphasized-fill-color-hover);
}
.icon-button.muted-style.not-pressable:active .icon-button-svg {
fill: var(--action-button-deemphasized-fill-color-active);
}
.icon-button.muted-style.pressed .icon-button-svg {
fill: var(--action-button-deemphasized-fill-color-pressed);
}
.icon-button.muted-style.pressed:hover .icon-button-svg {
fill: var(--action-button-deemphasized-fill-color-pressed-hover);
}
.icon-button.muted-style.pressed:active .icon-button-svg {
fill: var(--action-button-deemphasized-fill-color-pressed-active);
}
</style>
<script>
import { classname } from '../_utils/classname'
import { store } from '../_store/store'
export default {
store: () => store,
computed: {
computedClass: (pressable, pressed, big, muted, className) => {
return classname(
'icon-button',
!pressable && 'not-pressable',
pressed && 'pressed',
big && 'big-icon',
muted && 'muted-style',
className
)
}
},
methods: {
animate (animation) {
let { reduceMotion } = this.store.get()
if (!animation || reduceMotion) {
return
}
let svg = this.refs.svg
let animations = animation.map(({properties, options}) => svg.animate(properties, options))
animations.forEach(anim => anim.play())
}
}
}
</script>