Added asl icons support

.babelrc

@@ -0,0 +1,15 @@
+{
+  "presets": [
+    ["env", {
+      "useBuiltIns": "usage"
+    }],
+    "stage-2"
+  ],
+  "plugins": ["transform-runtime"],
+  "comments": false,
+  "env": {
+    "test": {
+      "plugins": [ "istanbul" ]
+    }
+  }
+}

package.json

@@ -1,7 +1,7 @@
 {
     "name": "plugin-custom-welcome-asl",
     "version": "0.0.1",
-    "main": "custom-welcome.js",
+    "main": "./src/plugin.js",
     "license": "Apache-2.0",
     "private": true,
     "scripts": {
@@ -16,6 +16,8 @@
         "babel-core": "^6.26.0",
         "babel-eslint": "^8.1.2",
         "babel-loader": "7.1.1",
+        "babel-plugin-transform-runtime": "^6.23.0",
+        "babel-preset-env": "^1.7.0",
         "css-loader": "^0.28.8",
         "eslint": "^4.15.0",
         "eslint-config-airbnb-base": "^12.1.0",
@@ -25,13 +27,14 @@
         "eslint-plugin-promise": "^3.4.0",
         "eslint-plugin-standard": "^3.0.1",
         "eslint-plugin-vue": "^4.5.0",
+        "exports-loader": "^0.7.0",
         "less": "^3.8.1",
         "less-loader": "^4.1.0",
         "style-loader": "^0.21.0",
         "stylelint": "^9.3.0",
         "stylelint-config-standard": "^18.2.0",
         "vue-loader": "^15.2.4",
-        "vue-template-compiler": "^2.0.0",
+        "vue-template-compiler": "^2.6.10",
         "webpack": "^4.6.0",
         "webpack-cli": "^2.1.2",
         "webpack-dev-server": "^3.1.3"

src/components/CustomNicklistUser.vue

@@ -0,0 +1,184 @@
+<template>
+    <div
+        :class="[
+            nicklist.userMode(user) ? 'kiwi-nicklist-user--mode-' + nicklist.userMode(user) : '',
+            user.away ? 'kiwi-nicklist-user--away' : '',
+            user.ignore ? 'kiwi-nicklist-user--ignore' : '',
+            user.gender ? 'kiwi-nicklist-user--gender-' + user.gender : '',
+        ]"
+        :data-nick="(user.nick||'').toLowerCase()"
+        class="kiwi-nicklist-user"
+        @click="nicklist.openUserbox(user)"
+    >
+        <div v-if="shouldShowAvatars" class="kiwi-avatar-container">
+            <Avatar
+                v-if="user"
+                :user="user"
+                size="small"
+            />
+            <away-status-indicator
+                :network="network"
+                :user="user"
+                :toggle="false"
+            />
+        </div>
+        <div v-else>
+            <away-status-indicator
+                :network="network"
+                :user="user"
+                :toggle="false"
+            />
+        </div>
+        <span class="kiwi-nicklist-user-prefix">{{ nicklist.userModePrefix(user) }}</span><span
+            :style="{ 'color': userColour }"
+            class="kiwi-nicklist-user-nick"
+        >{{ user.nick }}
+        </span>
+        <span class="kiwi-nicklist-messageuser" @click.stop="nicklist.openQuery(user)">
+            <i class="fa fa-comment" aria-hidden="true"/>
+        </span>
+        <typing-status-indicator :user="user" :buffer="nicklist.buffer" />
+    </div>
+</template>
+
+<script>
+'kiwi public';
+
+let AwayStatusIndicator = kiwi.require('components/AwayStatusIndicator');
+let TypingStatusIndicator = kiwi.require('components/TypingStatusIndicator');
+let Avatar = kiwi.require('components/Avatar');
+
+export default {
+    components: {
+        AwayStatusIndicator,
+        TypingStatusIndicator,
+	Avatar,
+    },
+    props: ['network', 'user', 'nicklist'],
+    computed: {
+        userColour() {
+            if (this.nicklist.useColouredNicks) {
+                return this.user.getColour();
+            }
+            return '';
+        },
+        shouldShowAvatars() {
+            return this.nicklist.buffer.setting('nicklist_avatars');
+        },
+    },
+};
+</script>
+
+<style>
+
+.kiwi-nicklist-user {
+    line-height: 26px;
+    padding: 0 12px 0 12px;
+    border-left: 4px solid;
+    margin: 0 0 0 0;
+    position: relative;
+    box-sizing: border-box;
+    transition: all 0.1s;
+    cursor: pointer;
+    white-space: nowrap;
+    display: flex;
+    align-items: center;
+}
+
+.kiwi-nicklist--avatars .kiwi-nicklist-user {
+    line-height: 32px;
+    padding-bottom: 6px;
+}
+
+.kiwi-nicklist-user--gender-Male .kiwi-nicklist-user-nick::after {
+    content:"\f222";
+    font-size: 0.25em;
+    vertical-align: super;
+    font-family: fontawesome;
+}
+
+.kiwi-nicklist-user--gender-Female .kiwi-nicklist-user-nick::after {
+    content:"\f221";
+    font-size: 0.25em;
+    vertical-align: super;
+    font-family: fontawesome;
+}
+
+.kiwi-nicklist-user--gender-Other .kiwi-nicklist-user-nick::after {
+    content:"\f224";
+    font-size: 0.25em;
+    vertical-align: super;
+    font-family: fontawesome;
+}
+
+.kiwi-nicklist-user--away.kiwi-nicklist-user--gender-Male .kiwi-nicklist-user-nick::after {
+    content:"\f222 Away";
+    font-size: 0.25em;
+    vertical-align: super;
+    font-family: fontawesome;
+}
+
+.kiwi-nicklist-user--away.kiwi-nicklist-user--gender-Female .kiwi-nicklist-user-nick::after {
+    content:"\f221 Away";
+    font-size: 0.25em;
+    vertical-align: super;
+    font-family: fontawesome;
+}
+
+.kiwi-nicklist-user--away.kiwi-nicklist-user--gender-Other .kiwi-nicklist-user-nick::after {
+    content:"\f224 Away";
+    font-size: 0.25em;
+    vertical-align: super;
+    font-family: fontawesome;
+}
+
+.kiwi-nicklist-user-nick {
+    font-weight: bold;
+    cursor: pointer;
+    flex: 1;
+}
+
+.kiwi-nicklist-messageuser {
+    position: absolute;
+    content: '\f075';
+    right: -1em;
+    font-family: fontAwesome, sans-serif;
+    line-height: 26px;
+    opacity: 0;
+}
+
+.kiwi-nicklist-messageuser:hover {
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.kiwi-nicklist-user:hover .kiwi-nicklist-messageuser {
+    opacity: 1;
+    right: 1em;
+    transition: all 0.2s;
+    transition-delay: 0.1s;
+}
+
+.kiwi-avatar-container {
+    position: relative;
+    margin-right: 10px;
+    flex: 0;
+}
+
+.kiwi-avatar-container .kiwi-avatar {
+    width: 30px;
+    height: 30px;
+}
+
+.kiwi-avatar-container .kiwi-awaystatusindicator {
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+}
+
+.kiwi-avatar-container-user-prefix {
+    flex: 0;
+}
+
+</style>