From daff0977cb2824536880e27fea38728a100ece77 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Wed, 20 Feb 2019 13:38:48 +0900
Subject: Resolve #747

---
 .../views/components/integrations.integration.vue  | 44 ++++++++++++++++++++++
 .../app/common/views/components/integrations.vue   | 26 +++++++++++++
 2 files changed, 70 insertions(+)
 create mode 100644 src/client/app/common/views/components/integrations.integration.vue
 create mode 100644 src/client/app/common/views/components/integrations.vue

(limited to 'src/client/app/common')

diff --git a/src/client/app/common/views/components/integrations.integration.vue b/src/client/app/common/views/components/integrations.integration.vue
new file mode 100644
index 0000000000..4008054b68
--- /dev/null
+++ b/src/client/app/common/views/components/integrations.integration.vue
@@ -0,0 +1,44 @@
+<template>
+<a class="zxrjzpcj" :href="url" :class="service" target="_blank">
+	<fa :icon="icon" size="lg" fixed-width /><span>{{ text }}</span>
+</a>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	props: ['url', 'text', 'icon', 'service']
+});
+</script>
+
+<style lang="stylus" scoped>
+.zxrjzpcj
+	padding 6px 8px 6px 6px
+	border-radius 32px
+
+	&:hover
+		text-decoration none
+
+	&.twitter
+		color #fff
+		background #1da1f3
+
+		&:hover
+			background #0c87cf
+
+	&.github
+		color #fff
+		background #171515
+
+		&:hover
+			background #000
+
+	&.discord
+		color #fff
+		background #7289da
+
+		&:hover
+			background #4968ce
+
+</style>
diff --git a/src/client/app/common/views/components/integrations.vue b/src/client/app/common/views/components/integrations.vue
new file mode 100644
index 0000000000..7a341a14fd
--- /dev/null
+++ b/src/client/app/common/views/components/integrations.vue
@@ -0,0 +1,26 @@
+<template>
+<div class="nbogcrmo" :v-if="user.twitter || user.github || user.discord">
+	<x-integration v-if="user.twitter" service="twitter" :url="`https://twitter.com/${user.twitter.screenName}`" :text="user.twitter.screenName" :icon="['fab', 'twitter']"/>
+	<x-integration v-if="user.github" service="github" :url="`https://github.com/${user.github.login}`" :text="user.github.login" :icon="['fab', 'github']"/>
+	<x-integration v-if="user.discord" service="discord" :url="`https://discordapp.com/users/${user.discord.id}`" :text="`${user.discord.username}#${user.discord.discriminator}`" :icon="['fab', 'discord']"/>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import XIntegration from './integrations.integration.vue';
+
+export default Vue.extend({
+	components: {
+		XIntegration
+	},
+	props: ['user']
+});
+</script>
+
+<style lang="stylus" scoped>
+.nbogcrmo
+	> *
+		margin-right 10px
+
+</style>
-- 
cgit v1.2.3-freya