helene/FoundKey
2
0
Fork 0
forked from FoundKeyGang/FoundKey
Code Issues Pull requests Projects Releases Packages Wiki Activity

🎨

Browse source
This commit is contained in:
syuilo 2018-11-04 14:23:28 +09:00
parent 1080fa63a9
commit 675e573a8c
No known key found for this signature in database
GPG key ID: BDC4C49D06AB9D69
7 changed files with 88 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/client/app/admin/views/announcements.vue
View file

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

12
src/client/app/admin/views/emoji.vue
View file

@ -3,6 +3,7 @@
<ui-card>
<div slot="title">%fa:plus% %i18n:@add-emoji.title%</div>
<section class="fit-top">
<ui-horizon-group inputs>
<ui-input v-model="name">
<span>%i18n:@add-emoji.name%</span>
<span slot="text">%i18n:@add-emoji.name-desc%</span>
@ -11,6 +12,7 @@
<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,6 +24,7 @@
<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-horizon-group inputs>
<ui-input v-model="emoji.name">
<span>%i18n:@add-emoji.name%</span>
<span slot="text">%i18n:@add-emoji.name-desc%</span>
@ -30,13 +33,14 @@
<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>

4
src/client/app/common/views/components/index.ts
View file

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

21
src/client/app/common/views/components/ui/button-group.vue
View file

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

12
src/client/app/common/views/components/ui/button.vue
View file

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

14
src/client/app/common/views/components/ui/input.vue
View file

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