🎨

src/client/app/admin/views/announcements.vue

@@ -9,10 +9,10 @@
 			<ui-textarea v-model="announcement.text">
 				<span>%i18n:@text%</span>
 			</ui-textarea>
-			<ui-button-group>
-				<ui-button inline @click="save">%fa:save R% %i18n:@save%</ui-button>
-				<ui-button inline @click="remove(i)">%fa:trash-alt R% %i18n:@remove%</ui-button>
-			</ui-button-group>
+			<ui-horizon-group>
+				<ui-button @click="save">%fa:save R% %i18n:@save%</ui-button>
+				<ui-button @click="remove(i)">%fa:trash-alt R% %i18n:@remove%</ui-button>
+			</ui-horizon-group>
 		</section>
 		<section>
 			<ui-button @click="add">%fa:plus% %i18n:@add%</ui-button>

src/client/app/admin/views/emoji.vue

@@ -3,14 +3,16 @@
 	<ui-card>
 		<div slot="title">%fa:plus% %i18n:@add-emoji.title%</div>
 		<section class="fit-top">
-			<ui-input v-model="name">
-				<span>%i18n:@add-emoji.name%</span>
-				<span slot="text">%i18n:@add-emoji.name-desc%</span>
-			</ui-input>
-			<ui-input v-model="aliases">
-				<span>%i18n:@add-emoji.aliases%</span>
-				<span slot="text">%i18n:@add-emoji.aliases-desc%</span>
-			</ui-input>
+			<ui-horizon-group inputs>
+				<ui-input v-model="name">
+					<span>%i18n:@add-emoji.name%</span>
+					<span slot="text">%i18n:@add-emoji.name-desc%</span>
+				</ui-input>
+				<ui-input v-model="aliases">
+					<span>%i18n:@add-emoji.aliases%</span>
+					<span slot="text">%i18n:@add-emoji.aliases-desc%</span>
+				</ui-input>
+			</ui-horizon-group>
 			<ui-input v-model="url">
 				<span>%i18n:@add-emoji.url%</span>
 			</ui-input>
@@ -22,21 +24,23 @@
 		<div slot="title">%fa:grin R% %i18n:@emojis.title%</div>
 		<section v-for="emoji in emojis">
 			<img :src="emoji.url" :alt="emoji.name" style="width: 64px;"/>
-			<ui-input v-model="emoji.name">
-				<span>%i18n:@add-emoji.name%</span>
-				<span slot="text">%i18n:@add-emoji.name-desc%</span>
-			</ui-input>
-			<ui-input v-model="emoji.aliases">
-				<span>%i18n:@add-emoji.aliases%</span>
-				<span slot="text">%i18n:@add-emoji.aliases-desc%</span>
-			</ui-input>
+			<ui-horizon-group inputs>
+				<ui-input v-model="emoji.name">
+					<span>%i18n:@add-emoji.name%</span>
+					<span slot="text">%i18n:@add-emoji.name-desc%</span>
+				</ui-input>
+				<ui-input v-model="emoji.aliases">
+					<span>%i18n:@add-emoji.aliases%</span>
+					<span slot="text">%i18n:@add-emoji.aliases-desc%</span>
+				</ui-input>
+			</ui-horizon-group>
 			<ui-input v-model="emoji.url">
 				<span>%i18n:@add-emoji.url%</span>
 			</ui-input>
-			<ui-button-group>
-				<ui-button inline @click="updateEmoji(emoji)">%fa:save R% %i18n:@emojis.update%</ui-button>
-				<ui-button inline @click="removeEmoji(emoji)">%fa:trash-alt R% %i18n:@emojis.remove%</ui-button>
-			</ui-button-group>
+			<ui-horizon-group>
+				<ui-button @click="updateEmoji(emoji)">%fa:save R% %i18n:@emojis.update%</ui-button>
+				<ui-button @click="removeEmoji(emoji)">%fa:trash-alt R% %i18n:@emojis.remove%</ui-button>
+			</ui-horizon-group>
 		</section>
 	</ui-card>
 </div>

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);

src/client/app/common/views/components/ui/button.vue

 <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,

src/client/app/common/views/components/ui/button-group.vue → src/client/app/common/views/components/ui/horizon-group.vue

 <template>
-<div class="pfzekjfwkwvadvlujpdnnxfggqgqjoze">
+<div class="pfzekjfwkwvadvlujpdnnxfggqgqjoze" :class="{ inputs }">
 	<slot></slot>
 </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
-export default Vue.extend({});
+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
 

src/client/app/common/views/components/ui/input.vue

 <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>