staff.html

<!--
Title: staff
Description: A button which works with QUEUE (UnrealIRCd module by Valware)
Author: uMut @ Ayna.org
License: GPLv3
-->
<template id="valware-unrealircd-queue">
    <a @click="confirmAction" data-intro="Contact Network Staff" data-step="5">
        <span v-if="$state.ui.app_width > 769" class="p-unreal-queue-button">
            <i class="fa fa-exclamation" aria-hidden="true"></i>
            Contact Network Staff
        </span>
        <div v-else class="p-unreal-queue-button">
            <i class="fa fa-exclamation" aria-hidden="true"></i>
        </div>
    </a>
</template>


<template id="queue_button">
        <a @click="confirmAction" data-intro="Contact Network Staff" data-step="5" class="kiwi-userbox-action" style="border: 1px solid #CB4335;">
            <span >
                <i class="fa fa-exclamation" aria-hidden="true"></i>
                Contact Network Staff
            </span>
        </a>
</template>

<script>
kiwi.plugin('valware-unrealircd-queue', (kiwi, log) => {

    const buttonMethods = {
        confirmAction() {
            // Ask for confirmation
            if (confirm("Are you sure you want to contact network staff?")) {
                // If confirmed, execute buttonClicked
                this.buttonClicked();
            }
        },
        buttonClicked() {
            kiwi.emit('input.raw', '/RAW QUEUE ');

            // Give the user the feedback
            const network = this.$state.getActiveNetwork();
            const buffer = kiwi.state.getActiveBuffer();
            kiwi.state.addMessage(buffer, {
                'message': network.nick + ' Thank you, a member of staff will write to you shortly, please keep an eye out for a private message.',
                'bodyTemplate': '',
                'nick': 'INFO',
                'ident': 'INFO',
                'hostname': 'INFO',
                'target': network.nick,
            });
        }
    }

    const headerButton = {
        template: '#valware-unrealircd-queue',
        methods: buttonMethods,
    };

    const userboxButton = {
        template: '#queue_button',
        methods: buttonMethods,
    };

    kiwi.addUi('header_channel', headerButton);
    kiwi.addUi('header_query', headerButton);
    kiwi.addUi('userbox_button', userboxButton);
});
</script>

<style>
    .p-unreal-queue-button {
        background: #578bad;
        color: #fff;
        border: 1px solid #578bad;
        border-radius: 10px;
        padding: 8px 10px 5px 10px;
		cursor: pointer;
    }
	
 .p-unreal-queue-button:hover {
  background-color: #578bad;
  color: black;
}

    .p-unreal-queue-button i {
        float: none;
    }
</style>