:art:

5 files changed, 60 insertions, 26 deletions

diff --git a/src/client/app/common/views/components/index.ts b/src/client/app/common/views/components/index.ts
index 98f781fa91..a3ddf10820 100644
--- a/src/client/app/common/views/components/index.ts
+++ b/src/client/app/common/views/components/index.ts
@@ -42,7 +42,7 @@ import Reversi from './games/reversi/reversi.vue';
 import welcomeTimeline from './welcome-timeline.vue';
 import uiInput from './ui/input.vue';
 import uiButton from './ui/button.vue';
-import uiButtonGroup from './ui/button-group.vue';
+import uiHorizonGroup from './ui/horizon-group.vue';
 import uiCard from './ui/card.vue';
 import uiForm from './ui/form.vue';
 import uiTextarea from './ui/textarea.vue';
@@ -95,7 +95,7 @@ Vue.component('mk-reversi', Reversi);
 Vue.component('mk-welcome-timeline', welcomeTimeline);
 Vue.component('ui-input', uiInput);
 Vue.component('ui-button', uiButton);
-Vue.component('ui-button-group', uiButtonGroup);
+Vue.component('ui-horizon-group', uiHorizonGroup);
 Vue.component('ui-card', uiCard);
 Vue.component('ui-form', uiForm);
 Vue.component('ui-textarea', uiTextarea);
diff --git a/src/client/app/common/views/components/ui/button-group.vue b/src/client/app/common/views/components/ui/button-group.vue
deleted file mode 100644
index 0db3b5ee70..0000000000
--- a/src/client/app/common/views/components/ui/button-group.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<template>
-<div class="pfzekjfwkwvadvlujpdnnxfggqgqjoze">
-	<slot></slot>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-export default Vue.extend({});
-</script>
-
-<style lang="stylus" scoped>
-.pfzekjfwkwvadvlujpdnnxfggqgqjoze
-	display flex
-
-	> *
-		flex 1
-
-		&:not(:last-child)
-			margin-right 16px
-</style>
diff --git a/src/client/app/common/views/components/ui/button.vue b/src/client/app/common/views/components/ui/button.vue
index a509632520..5a898f33d3 100644
--- a/src/client/app/common/views/components/ui/button.vue
+++ b/src/client/app/common/views/components/ui/button.vue
@@ -1,5 +1,10 @@
 <template>
-<component class="dmtdnykelhudezerjlfpbhgovrgnqqgr" :is="link ? 'a' : 'button'" :class="[styl, { inline, primary }]" :type="type" @click="$emit('click')">
+<component class="dmtdnykelhudezerjlfpbhgovrgnqqgr"
+	:is="link ? 'a' : 'button'"
+	:class="[styl, { inline, primary }]"
+	:type="type"
+	@click="$emit('click')"
+>
 	<slot></slot>
 </component>
 </template>
@@ -7,6 +12,7 @@
 <script lang="ts">
 import Vue from 'vue';
 export default Vue.extend({
+	inject: ['horizonGrouped'],
 	props: {
 		type: {
 			type: String,
@@ -20,7 +26,9 @@ export default Vue.extend({
 		inline: {
 			type: Boolean,
 			required: false,
-			default: false
+			default(): boolean {
+				return this.horizonGrouped;
+			}
 		},
 		link: {
 			type: Boolean,
diff --git a/src/client/app/common/views/components/ui/horizon-group.vue b/src/client/app/common/views/components/ui/horizon-group.vue
new file mode 100644
index 0000000000..b9c7cf5cbe
--- /dev/null
+++ b/src/client/app/common/views/components/ui/horizon-group.vue
@@ -0,0 +1,35 @@
+<template>
+<div class="pfzekjfwkwvadvlujpdnnxfggqgqjoze" :class="{ inputs }">
+	<slot></slot>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+export default Vue.extend({
+	provide: {
+		horizonGrouped: true
+	},
+	props: {
+		inputs: {
+			type: Boolean,
+			required: false,
+			default: false
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.pfzekjfwkwvadvlujpdnnxfggqgqjoze
+	display flex
+
+	&.inputs
+		margin 32px 0
+
+	> *
+		flex 1
+
+		&:not(:last-child)
+			margin-right 16px
+</style>
diff --git a/src/client/app/common/views/components/ui/input.vue b/src/client/app/common/views/components/ui/input.vue
index 7e1a16bb3f..f624b96e41 100644
--- a/src/client/app/common/views/components/ui/input.vue
+++ b/src/client/app/common/views/components/ui/input.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="ui-input" :class="[{ focused, filled }, styl]">
+<div class="ui-input" :class="[{ focused, filled, inline }, styl]">
 	<div class="icon" ref="icon"><slot name="icon"></slot></div>
 	<div class="input">
 		<div class="password-meter" v-if="withPasswordMeter" v-show="passwordStrength != ''" :data-strength="passwordStrength">
@@ -41,6 +41,7 @@ import Vue from 'vue';
 const getPasswordStrength = require('syuilo-password-strength');
 
 export default Vue.extend({
+	inject: ['horizonGrouped'],
 	props: {
 		value: {
 			required: false
@@ -72,6 +73,13 @@ export default Vue.extend({
 			required: false,
 			default: false
 		},
+		inline: {
+			type: Boolean,
+			required: false,
+			default(): boolean {
+				return this.horizonGrouped;
+			}
+		},
 		styl: {
 			type: String,
 			required: false,
@@ -337,4 +345,8 @@ root(fill)
 	&:not(.fill)
 		root(false)
 
+	&.inline
+		display inline-block
+		margin 0
+
 </style>