Improve user operations

Resolve #2197
Resolve #3367

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

@@ -27,9 +27,17 @@ export default Vue.extend({
 
 <style lang="stylus" scoped>
 .vnxwkwuf
+	margin 16px 0
+
 	&.inputs
 		margin 32px 0
 
+	&.fit-top
+		margin-top 0
+
+	&.fit-bottom
+		margin-bottom 0
+
 	&:not(.noGrow)
 		display flex
 
@@ -37,5 +45,6 @@ export default Vue.extend({
 			flex 1
 
 	> *:not(:last-child)
-		margin-right 16px
+		margin-right 16px !important
+
 </style>

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

@@ -9,27 +9,30 @@
 		<div class="prefix" ref="prefix"><slot name="prefix"></slot></div>
 		<template v-if="type != 'file'">
 			<input ref="input"
-					:type="type"
-					v-model="v"
-					:disabled="disabled"
-					:required="required"
-					:readonly="readonly"
-					:pattern="pattern"
-					:autocomplete="autocomplete"
-					:spellcheck="spellcheck"
-					@focus="focused = true"
-					@blur="focused = false">
+				:type="type"
+				v-model="v"
+				:disabled="disabled"
+				:required="required"
+				:readonly="readonly"
+				:pattern="pattern"
+				:autocomplete="autocomplete"
+				:spellcheck="spellcheck"
+				@focus="focused = true"
+				@blur="focused = false"
+			>
 		</template>
 		<template v-else>
 			<input ref="input"
-					type="text"
-					:value="placeholder"
-					readonly
-					@click="chooseFile">
+				type="text"
+				:value="placeholder"
+				readonly
+				@click="chooseFile"
+			>
 			<input ref="file"
-					type="file"
-					:value="value"
-					@change="onChangeFile">
+				type="file"
+				:value="value"
+				@change="onChangeFile"
+			>
 		</template>
 		<div class="suffix" ref="suffix"><slot name="suffix"></slot></div>
 	</div>
@@ -325,6 +328,9 @@ root(fill)
 		margin 6px 0
 		font-size 13px
 
+		&:empty
+			display none
+
 		*
 			margin 0
 

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

@@ -1,15 +1,17 @@
 <template>
-<div class="ui-select" :class="[{ focused, filled }, styl]">
+<div class="ui-select" :class="[{ focused, disabled, filled, inline }, styl]">
 	<div class="icon" ref="icon"><slot name="icon"></slot></div>
 	<div class="input" @click="focus">
 		<span class="label" ref="label"><slot name="label"></slot></span>
 		<div class="prefix" ref="prefix"><slot name="prefix"></slot></div>
 		<select ref="input"
-				:value="v"
-				:required="required"
-				@input="$emit('input', $event.target.value)"
-				@focus="focused = true"
-				@blur="focused = false">
+			:value="v"
+			:required="required"
+			:disabled="disabled"
+			@input="$emit('input', $event.target.value)"
+			@focus="focused = true"
+			@blur="focused = false"
+		>
 			<slot></slot>
 		</select>
 		<div class="suffix"><slot name="suffix"></slot></div>
@@ -22,6 +24,11 @@
 import Vue from 'vue';
 
 export default Vue.extend({
+	inject: {
+		horizonGrouped: {
+			default: false
+		}
+	},
 	props: {
 		value: {
 			required: false
@@ -30,11 +37,22 @@ export default Vue.extend({
 			type: Boolean,
 			required: false
 		},
+		disabled: {
+			type: Boolean,
+			required: false
+		},
 		styl: {
 			type: String,
 			required: false,
 			default: 'line'
-		}
+		},
+		inline: {
+			type: Boolean,
+			required: false,
+			default(): boolean {
+				return this.horizonGrouped;
+			}
+		},
 	},
 	data() {
 		return {
@@ -122,7 +140,7 @@ root(fill)
 			transition-duration 0.3s
 			font-size 16px
 			line-height 32px
-			color rgba(#000, 0.54)
+			color var(--inputLabel)
 			pointer-events none
 			//will-change transform
 			transform-origin top left
@@ -171,6 +189,9 @@ root(fill)
 		margin 6px 0
 		font-size 13px
 
+		&:empty
+			display none
+
 		*
 			margin 0
 
@@ -200,4 +221,14 @@ root(fill)
 	&:not(.fill)
 		root(false)
 
+	&.inline
+		display inline-block
+		margin 0
+
+	&.disabled
+		opacity 0.7
+
+		&, *
+			cursor not-allowed !important
+
 </style>