graphite/Sharkey
1
0
Fork 0
mirror of https://git.joinsharkey.org/Sharkey/Sharkey.git synced 2024-11-23 23:53:09 +02:00
Code Issues 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"> <ui-textarea v-model="announcement.text">
<span>%i18n:@text%</span> <span>%i18n:@text%</span>
</ui-textarea> </ui-textarea>
<ui-button-group> <ui-horizon-group>
<ui-button inline @click="save">%fa:save R% %i18n:@save%</ui-button> <ui-button @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 @click="remove(i)">%fa:trash-alt R% %i18n:@remove%</ui-button>
</ui-button-group> </ui-horizon-group>
</section> </section>
<section> <section>
<ui-button @click="add">%fa:plus% %i18n:@add%</ui-button> <ui-button @click="add">%fa:plus% %i18n:@add%</ui-button>

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

@ -3,14 +3,16 @@
<ui-card> <ui-card>
<div slot="title">%fa:plus% %i18n:@add-emoji.title%</div> <div slot="title">%fa:plus% %i18n:@add-emoji.title%</div>
<section class="fit-top"> <section class="fit-top">
<ui-input v-model="name"> <ui-horizon-group inputs>
<span>%i18n:@add-emoji.name%</span> <ui-input v-model="name">
<span slot="text">%i18n:@add-emoji.name-desc%</span> <span>%i18n:@add-emoji.name%</span>
</ui-input> <span slot="text">%i18n:@add-emoji.name-desc%</span>
<ui-input v-model="aliases"> </ui-input>
<span>%i18n:@add-emoji.aliases%</span> <ui-input v-model="aliases">
<span slot="text">%i18n:@add-emoji.aliases-desc%</span> <span>%i18n:@add-emoji.aliases%</span>
</ui-input> <span slot="text">%i18n:@add-emoji.aliases-desc%</span>
</ui-input>
</ui-horizon-group>
<ui-input v-model="url"> <ui-input v-model="url">
<span>%i18n:@add-emoji.url%</span> <span>%i18n:@add-emoji.url%</span>
</ui-input> </ui-input>
@ -22,21 +24,23 @@
<div slot="title">%fa:grin R% %i18n:@emojis.title%</div> <div slot="title">%fa:grin R% %i18n:@emojis.title%</div>
<section v-for="emoji in emojis"> <section v-for="emoji in emojis">
<img :src="emoji.url" :alt="emoji.name" style="width: 64px;"/> <img :src="emoji.url" :alt="emoji.name" style="width: 64px;"/>
<ui-input v-model="emoji.name"> <ui-horizon-group inputs>
<span>%i18n:@add-emoji.name%</span> <ui-input v-model="emoji.name">
<span slot="text">%i18n:@add-emoji.name-desc%</span> <span>%i18n:@add-emoji.name%</span>
</ui-input> <span slot="text">%i18n:@add-emoji.name-desc%</span>
<ui-input v-model="emoji.aliases"> </ui-input>
<span>%i18n:@add-emoji.aliases%</span> <ui-input v-model="emoji.aliases">
<span slot="text">%i18n:@add-emoji.aliases-desc%</span> <span>%i18n:@add-emoji.aliases%</span>
</ui-input> <span slot="text">%i18n:@add-emoji.aliases-desc%</span>
</ui-input>
</ui-horizon-group>
<ui-input v-model="emoji.url"> <ui-input v-model="emoji.url">
<span>%i18n:@add-emoji.url%</span> <span>%i18n:@add-emoji.url%</span>
</ui-input> </ui-input>
<ui-button-group> <ui-horizon-group>
<ui-button inline @click="updateEmoji(emoji)">%fa:save R% %i18n:@emojis.update%</ui-button> <ui-button @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 @click="removeEmoji(emoji)">%fa:trash-alt R% %i18n:@emojis.remove%</ui-button>
</ui-button-group> </ui-horizon-group>
</section> </section>
</ui-card> </ui-card>
</div> </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 welcomeTimeline from './welcome-timeline.vue';
import uiInput from './ui/input.vue'; import uiInput from './ui/input.vue';
import uiButton from './ui/button.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 uiCard from './ui/card.vue';
import uiForm from './ui/form.vue'; import uiForm from './ui/form.vue';
import uiTextarea from './ui/textarea.vue'; import uiTextarea from './ui/textarea.vue';
@ -95,7 +95,7 @@ Vue.component('mk-reversi', Reversi);
Vue.component('mk-welcome-timeline', welcomeTimeline); Vue.component('mk-welcome-timeline', welcomeTimeline);
Vue.component('ui-input', uiInput); Vue.component('ui-input', uiInput);
Vue.component('ui-button', uiButton); 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-card', uiCard);
Vue.component('ui-form', uiForm); Vue.component('ui-form', uiForm);
Vue.component('ui-textarea', uiTextarea); 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> <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> <slot></slot>
</component> </component>
</template> </template>
@ -7,6 +12,7 @@
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
export default Vue.extend({ export default Vue.extend({
inject: ['horizonGrouped'],
props: { props: {
type: { type: {
type: String, type: String,
@ -20,7 +26,9 @@ export default Vue.extend({
inline: { inline: {
type: Boolean, type: Boolean,
required: false, required: false,
default: false default(): boolean {
return this.horizonGrouped;
}
}, },
link: { link: {
type: Boolean, 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> <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="icon" ref="icon"><slot name="icon"></slot></div>
<div class="input"> <div class="input">
<div class="password-meter" v-if="withPasswordMeter" v-show="passwordStrength != ''" :data-strength="passwordStrength"> <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'); const getPasswordStrength = require('syuilo-password-strength');
export default Vue.extend({ export default Vue.extend({
inject: ['horizonGrouped'],
props: { props: {
value: { value: {
required: false required: false
@ -72,6 +73,13 @@ export default Vue.extend({
required: false, required: false,
default: false default: false
}, },
inline: {
type: Boolean,
required: false,
default(): boolean {
return this.horizonGrouped;
}
},
styl: { styl: {
type: String, type: String,
required: false, required: false,
@ -337,4 +345,8 @@ root(fill)
&:not(.fill) &:not(.fill)
root(false) root(false)
&.inline
display inline-block
margin 0
</style> </style>