pinafore/routes/_components/IconButton.html

78 lines
1.7 KiB
HTML
Raw Normal View History

2018-02-28 08:18:07 +01:00
{{#if delegateKey}}
2018-01-28 21:51:48 +01:00
<button type="button"
aria-label="{{label}}"
2018-02-28 08:18:07 +01:00
aria-pressed="{{pressable ? !!pressed : ''}}"
2018-02-24 23:49:28 +01:00
class="{{computedClass}}"
2018-02-28 08:18:07 +01:00
:disabled
delegate-key="{{delegateKey}}" >
2018-01-28 21:51:48 +01:00
<svg>
<use xlink:href="{{href}}" />
</svg>
</button>
{{else}}
<button type="button"
aria-label="{{label}}"
2018-02-28 08:18:07 +01:00
aria-pressed="{{pressable ? !!pressed : ''}}"
2018-02-24 23:49:28 +01:00
class="{{computedClass}}"
2018-02-28 08:18:07 +01:00
:disabled
on:click >
2018-01-28 21:51:48 +01:00
<svg>
<use xlink:href="{{href}}" />
</svg>
</button>
{{/if}}
<style>
button.icon-button {
padding: 6px 10px;
background: none;
border: none;
}
button.icon-button svg {
width: 24px;
height: 24px;
fill: var(--action-button-fill-color);
}
button.icon-button.big-icon svg {
width: 32px;
height: 32px;
}
button.icon-button:hover svg {
fill: var(--action-button-fill-color-hover);
}
2018-02-24 23:49:28 +01:00
button.icon-button.not-pressable:active svg {
2018-01-28 21:51:48 +01:00
fill: var(--action-button-fill-color-active);
}
button.icon-button.pressed svg {
fill: var(--action-button-fill-color-pressed)
}
button.icon-button.pressed:hover svg {
fill: var(--action-button-fill-color-pressed-hover);
}
button.icon-button.pressed:active svg {
fill: var(--action-button-fill-color-pressed-active);
}
2018-02-24 23:49:28 +01:00
</style>
<script>
import identity from 'lodash/identity'
export default {
computed: {
2018-03-03 06:55:04 +01:00
computedClass: (pressable, pressed, big, className) => {
2018-02-24 23:49:28 +01:00
return [
'icon-button',
!pressable && 'not-pressable',
pressed && 'pressed',
big && 'big-icon',
2018-03-03 06:55:04 +01:00
className
2018-02-24 23:49:28 +01:00
].filter(identity).join(' ')
}
}
}
</script>