88 lines
2.5 KiB
Vue
88 lines
2.5 KiB
Vue
<template>
|
|
<div
|
|
class="action-button"
|
|
:class="buttonClass"
|
|
>
|
|
<component
|
|
:is="getComponent(button)"
|
|
class="action-button-inner"
|
|
:class="buttonInnerClass"
|
|
role="menuitem"
|
|
:tabindex="0"
|
|
:disabled="buttonClass.disabled"
|
|
:href="getComponent(button) == 'a' ? button.link?.(funcArg) || getRemoteInteractionLink : undefined"
|
|
@click.stop="getComponent(button) === 'button' && doAction(button)"
|
|
@click="close"
|
|
>
|
|
<FALayers>
|
|
<FAIcon
|
|
class="fa-scale-110"
|
|
:icon="button.icon(funcArg)"
|
|
:spin="!extra && button.animated?.() && animationState[button.name]"
|
|
fixed-width
|
|
/>
|
|
<template v-if="!buttonClass.disabled && button.toggleable?.(funcArg) && button.active">
|
|
<FAIcon
|
|
v-if="button.active(funcArg)"
|
|
class="active-marker"
|
|
transform="shrink-6 up-9 right-15"
|
|
:icon="button.activeIndicator?.(funcArg) || 'check'"
|
|
/>
|
|
<FAIcon
|
|
v-if="!button.active(funcArg)"
|
|
class="focus-marker"
|
|
transform="shrink-6 up-9 right-15"
|
|
:icon="button.openIndicator?.(funcArg) || 'plus'"
|
|
/>
|
|
<FAIcon
|
|
v-else
|
|
class="focus-marker"
|
|
transform="shrink-6 up-9 right-15"
|
|
:icon="button.closeIndicator?.(funcArg) || 'minus'"
|
|
/>
|
|
</template>
|
|
</FALayers>
|
|
<span
|
|
v-if="extra"
|
|
class="action-label"
|
|
>
|
|
{{ $t(button.label(funcArg)) }}
|
|
</span>
|
|
<span
|
|
v-if="!extra && button.counter?.(funcArg) > 0"
|
|
class="action-counter"
|
|
>
|
|
{{ button.counter?.(funcArg) }}
|
|
</span>
|
|
<FAIcon
|
|
v-if="button.dropdown?.()"
|
|
class="chevron-icon"
|
|
size="lg"
|
|
:icon="extra ? 'chevron-right' : 'chevron-up'"
|
|
fixed-width
|
|
/>
|
|
</component>
|
|
<Popover
|
|
trigger="hover"
|
|
:placement="extra ? 'right' : 'top'"
|
|
:trigger-attrs="{ class: 'extra-button' }"
|
|
v-if="button.name === 'bookmark'"
|
|
>
|
|
<template #trigger>
|
|
<FAIcon
|
|
class="chevron-icon"
|
|
size="lg"
|
|
:icon="extra ? 'chevron-right' : 'chevron-up'"
|
|
fixed-width
|
|
/>
|
|
</template>
|
|
<template #content>
|
|
<StatusBookmarkFolderMenu v-if="button.name === 'bookmark'" :status="status" />
|
|
</template>
|
|
</Popover>
|
|
</div>
|
|
</template>
|
|
|
|
<script src="./action_button.js"/>
|
|
|
|
<style lang="scss" src="./action_button.scss"/>
|