serverless-ircd 0.6.0 → 0.8.0

package/apps/web/upstream/src/components/inputtools/Emoji.vue

@@ -0,0 +1,67 @@
+<template>
+    <div class="kiwi-inputtool-emoji">
+        <div class="kiwi-inputtool-emoji-palette" @mousedown.prevent @click.prevent>
+            <div
+                v-for="(text, eCode) in emojis"
+                :key="eCode"
+                :style="{'background-image':`url(${location}${eCode})`}"
+                :data-code="text"
+                class="kiwi-inputtool-emoji-emoji"
+                @click="onImgClick"
+            />
+        </div>
+    </div>
+</template>
+
+<script>
+'kiwi public';
+
+import _ from 'lodash';
+import * as Misc from '@/helpers/Misc';
+
+export default {
+    props: ['ircinput'],
+    computed: {
+        emojis() {
+            let list = {};
+            let available = this.$state.setting('emojis');
+            _.each(available, (code, ascii) => {
+                if (!code) {
+                    // Emoji has an empty value, skip
+                    return;
+                }
+                list[code] = ascii;
+            });
+            return list;
+        },
+        location() {
+            return this.$state.setting('emojiLocation');
+        },
+    },
+    methods: {
+        onImgClick: function onImgClick(event) {
+            let url = window.getComputedStyle(event.target, null)
+                .getPropertyValue('background-image');
+
+            url = Misc.extractURL(url);
+            let code = event.target.dataset.code;
+            this.ircinput.addImg(code, url);
+        },
+    },
+};
+</script>
+
+<style>
+
+.kiwi-inputtool-emoji-emoji {
+    display: block;
+    float: left;
+    height: 30px;
+    width: 30px;
+    cursor: pointer;
+    box-sizing: border-box;
+    margin: 2px;
+    background-size: contain;
+}
+
+</style>

package/apps/web/upstream/src/components/inputtools/TextStyle.vue

@@ -0,0 +1,142 @@
+<template>
+    <div class="kiwi-inputtool-colours">
+        <div class="kiwi-inputtool-colours-palette" @mousedown.prevent @click.prevent>
+            <div
+                class="kiwi-inputtools-colours-colour irc-bg-colour-white"
+                data-code="00" @click="onColourClick"
+            />
+            <div
+                class="kiwi-inputtools-colours-colour irc-bg-colour-black"
+                data-code="01" @click="onColourClick"
+            />
+            <div
+                class="kiwi-inputtools-colours-colour irc-bg-colour-blue"
+                data-code="02" @click="onColourClick"
+            />
+            <div
+                class="kiwi-inputtools-colours-colour irc-bg-colour-green"
+                data-code="03" @click="onColourClick"
+            />
+            <div
+                class="kiwi-inputtools-colours-colour irc-bg-colour-light-red"
+                data-code="04" @click="onColourClick"
+            />
+            <div
+                class="kiwi-inputtools-colours-colour irc-bg-colour-brown"
+                data-code="05" @click="onColourClick"
+            />
+            <div
+                class="kiwi-inputtools-colours-colour irc-bg-colour-purple"
+                data-code="06" @click="onColourClick"
+            />
+            <div
+                class="kiwi-inputtools-colours-colour irc-bg-colour-orange"
+                data-code="07" @click="onColourClick"
+            />
+            <div
+                class="kiwi-inputtools-colours-colour irc-bg-colour-yellow"
+                data-code="08" @click="onColourClick"
+            />
+            <div
+                class="kiwi-inputtools-colours-colour irc-bg-colour-light-green"
+                data-code="09" @click="onColourClick"
+            />
+            <div
+                class="kiwi-inputtools-colours-colour irc-bg-colour-cyan"
+                data-code="10" @click="onColourClick"
+            />
+            <div
+                class="kiwi-inputtools-colours-colour irc-bg-colour-light-cyan"
+                data-code="11" @click="onColourClick"
+            />
+            <div
+                class="kiwi-inputtools-colours-colour irc-bg-colour-light-blue"
+                data-code="12" @click="onColourClick"
+            />
+            <div
+                class="kiwi-inputtools-colours-colour irc-bg-colour-pink"
+                data-code="13" @click="onColourClick"
+            />
+            <div
+                class="kiwi-inputtools-colours-colour irc-bg-colour-grey"
+                data-code="14" @click="onColourClick"
+            />
+            <div
+                class="kiwi-inputtools-colours-colour irc-bg-colour-light-grey"
+                data-code="15" @click="onColourClick"
+            />
+            <div
+                class="kiwi-inputtools-colours-colour kiwi-inputtools-colours-reset"
+                @click="onResetClick"
+            ><i class="fa fa-ban" aria-hidden="true" /></div>
+        </div>
+    </div>
+</template>
+
+<script>
+'kiwi public';
+
+import * as Colours from '@/helpers/Colours';
+
+export default {
+    props: ['ircinput'],
+    data: function data() {
+        return {
+        };
+    },
+
+    methods: {
+        onColourClick: function onColourClick(event) {
+            let colour = window.getComputedStyle(event.target, null)
+                .getPropertyValue('background-color');
+            // Convert rgb(x,x,x) to its hex form
+            let m = colour.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
+            if (m) {
+                let rgbObj = {
+                    r: parseInt(m[1], 10),
+                    g: parseInt(m[2], 10),
+                    b: parseInt(m[3], 10),
+                };
+                colour = Colours.rgb2hex(rgbObj);
+            }
+
+            let code = event.target.dataset.code;
+            this.ircinput.setColour(code, colour);
+        },
+        onResetClick: function onResetClick() {
+            this.ircinput.resetStyles();
+        },
+    },
+};
+</script>
+
+<style lang="less">
+
+.kiwi-inputtools-colours {
+    bottom: 100%;
+    right: 0;
+    overflow: hidden;
+    position: absolute;
+    height: 30px;
+}
+
+.kiwi-inputtools-colours-colour {
+    display: block;
+    float: left;
+    height: 30px;
+    width: 30px;
+    cursor: pointer;
+    box-sizing: border-box;
+    border: 1px solid gray;
+    margin: 0;
+}
+
+.kiwi-inputtools-colours-reset {
+    font-size: 23px;
+    line-height: 30px;
+    text-align: center;
+    background: #000;
+    color: #cacaca;
+}
+
+</style>

package/apps/web/upstream/src/components/startups/CommonLayout.vue

@@ -0,0 +1,208 @@
+<template>
+    <div
+        :class="[
+            closing ? 'kiwi-startup-common--closing' : '',
+            backgroundImage ? '' : 'kiwi-startup-common--no-bg',
+        ]" :style="backgroundStyle" class="kiwi-startup-common"
+    >
+        <div class="kiwi-startup-common-section kiwi-startup-common-section-connection">
+            <slot name="connection" />
+        </div>
+        <div
+            :style="backgroundStyle"
+            class="kiwi-startup-common-section kiwi-startup-common-section-info"
+        >
+            <div
+                v-if="infoContent"
+                class="kiwi-startup-common-section-info-content"
+                v-html="infoContent"
+            />
+        </div>
+        <div class="kiwi-fontawesome-preload">
+            <i class="fa fa-spinner" aria-hidden="true" />
+        </div>
+    </div>
+</template>
+
+<script>
+'kiwi public';
+
+export default {
+    data() {
+        return {
+            closing: false,
+        };
+    },
+    computed: {
+        backgroundStyle() {
+            let style = {};
+            let options = this.$state.settings.startupOptions;
+
+            if (options.infoBackground) {
+                style['background-image'] = `url(${options.infoBackground})`;
+            }
+            return style;
+        },
+        backgroundImage() {
+            return this.$state.settings.startupOptions.infoBackground || '';
+        },
+        infoContent() {
+            return this.$state.settings.startupOptions.infoContent || '';
+        },
+    },
+    methods: {
+        close() {
+            this.closing = true;
+            let startApp = (event) => {
+                this.$el.removeEventListener('transitionend', startApp);
+                this.$state.persistence.watchStateForChanges();
+                // Hacky to be using $parent but this component should only be used in a sepcific
+                // scope within startup screens
+                this.$parent.$emit('start');
+            };
+
+            this.$el.addEventListener('transitionend', startApp, false);
+        },
+    },
+};
+</script>
+
+<style>
+
+.kiwi-startup-common {
+    height: 100%;
+    text-align: center;
+    display: flex;
+}
+
+.kiwi-startup-common-section {
+    padding: 1em;
+    box-sizing: border-box;
+    height: 100%;
+    overflow-x: hidden;
+    overflow-y: auto;
+
+    /* transition the 2 sections out when the page closes. right+left defaults */
+    transition: transform 0.4s;
+}
+
+.kiwi-startup-common-section-connection {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40%;
+    max-width: 500px;
+}
+
+/** Right side */
+.kiwi-startup-common-section-info {
+    color: #fff;
+    display: flex;
+    flex: 1;
+    align-items: center;
+    justify-content: center;
+}
+
+.kiwi-startup-common-section-info-content {
+    background: rgba(255, 255, 255, 0.74);
+    margin: 2em;
+    color: #1b1b1b;
+    font-size: 1.5em;
+    padding: 2em;
+    border-radius: 5px;
+    line-height: 1.6em;
+}
+
+.kiwi-fontawesome-preload {
+    position: absolute;
+    top: 0;
+    left: -50px;
+    width: 1px;
+    height: 1px;
+}
+
+@media (min-width: 850px) {
+    /** Closing - the wiping away of the screen **/
+    .kiwi-startup-common--closing .kiwi-startup-common-section-connection {
+        transform: translateX(-100%);
+    }
+
+    .kiwi-startup-common--closing .kiwi-startup-common-section-info {
+        transform: translateX(100%);
+    }
+}
+
+/** Smaller screen... **/
+@media (max-width: 850px) {
+    .kiwi-startup-common {
+        font-size: 0.9em;
+        display: block;
+        overflow-y: auto;
+    }
+
+    .kiwi-startup-common-section {
+        width: 100%;
+        min-height: auto;
+        max-width: none;
+        height: auto;
+        align-items: flex-start;
+    }
+
+    /** Closing - the wiping away of the screen **/
+    .kiwi-startup-common--closing {
+        transition: transform 0.3s;
+        transform: translateY(100%);
+    }
+
+    .kiwi-startup-common-section-connection {
+        padding-top: 2em;
+    }
+
+    .kiwi-startup-common-section-connection > * {
+        max-width: 450px;
+    }
+}
+
+/** Background / border switching between screen sizes **/
+/* stylelint-disable  no-duplicate-selectors */
+.kiwi-startup-common {
+    background-size: 0;
+    background-position: bottom;
+}
+
+.kiwi-startup-common-section-info {
+    background-size: cover;
+    background-position: bottom;
+    border-left: 5px solid #42b992;
+}
+
+.kiwi-startup-common--no-bg .kiwi-startup-common-section-info {
+    background-color: rgb(51, 51, 51);
+}
+
+/* stylint-enable */
+
+@media (max-width: 850px) {
+    /* Apply some flex so that the info panel fills the rest of the bottom screen */
+    .kiwi-startup-common {
+        background-size: cover;
+    }
+
+    .kiwi-startup-common-section-info {
+        background-size: 0;
+        border-left: none;
+        flex: 1 0;
+        display: block;
+    }
+
+    .kiwi-startup-common--no-bg .kiwi-startup-common-section-info {
+        border-top: 5px solid #42b992;
+    }
+}
+
+@media (max-width: 500px) {
+    .kiwi-startup-common-section-info-content {
+        margin: 1em;
+    }
+}
+</style>