🎨
This commit is contained in:
syuilo
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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>
|
||||
@@ -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,
|
||||
|
||||
35
src/client/app/common/views/components/ui/horizon-group.vue
Normal file
35
src/client/app/common/views/components/ui/horizon-group.vue
Normal file
@@ -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>
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user