sendnrw/misskey
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve MisskeyPages

Browse Source
This commit is contained in:
syuilo
2019-04-30 12:15:41 +09:00
parent 59782973be
commit 759719d124
21 changed files with 520 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/client/app/common/views/components/page-editor/els/page-editor.el.if.vue
View File

@@ -72,7 +72,7 @@ export default Vue.extend({
type: null,
title: this.$t('choose-block'),
select: {
items: this.getPageBlockList()
groupedItems: this.getPageBlockList()
},
showCancelButton: true
});

61
src/client/app/common/views/components/page-editor/els/page-editor.el.input.vue
View File

@@ -1,61 +0,0 @@
<template>
<x-container @remove="() => $emit('remove')">
<template #header><fa :icon="faBolt"/> {{ $t('blocks.input') }}</template>
<section class="dnvasjon">
<ui-input v-model="value.name"><template #prefix><fa :icon="faSquareRootAlt"/></template><span>{{ $t('blocks._input.name') }}</span></ui-input>
<ui-input v-model="value.text"><span>{{ $t('blocks._input.text') }}</span></ui-input>
<ui-select v-model="value.inputType">
<template #label>{{ $t('blocks._input.inputType') }}</template>
<option value="string">{{ $t('blocks._input._inputType.string') }}</option>
<option value="number">{{ $t('blocks._input._inputType.number') }}</option>
</ui-select>
<ui-input v-model="value.default" :type="value.inputType"><span>{{ $t('blocks._input.default') }}</span></ui-input>
</section>
</x-container>
</template>
<script lang="ts">
import Vue from 'vue';
import { faBolt, faSquareRootAlt } from '@fortawesome/free-solid-svg-icons';
import i18n from '../../../../../i18n';
import XContainer from '../page-editor.container.vue';
export default Vue.extend({
i18n: i18n('pages'),
components: {
XContainer
},
props: {
value: {
required: true
},
},
data() {
return {
faBolt, faSquareRootAlt
};
},
created() {
if (this.value.name == null) Vue.set(this.value, 'name', '');
if (this.value.inputType == null) Vue.set(this.value, 'inputType', 'string');
this.$watch('value.inputType', t => {
if (this.value.default != null) {
if (t === 'number') this.value.default = parseInt(this.value.default, 10);
if (t === 'string') this.value.default = this.value.default.toString();
}
});
},
});
</script>
<style lang="stylus" scoped>
.dnvasjon
padding 0 16px 0 16px
</style>

42
src/client/app/common/views/components/page-editor/els/page-editor.el.number-input.vue Normal file
View File

@@ -0,0 +1,42 @@
<template>
<x-container @remove="() => $emit('remove')">
<template #header><fa :icon="faBolt"/> {{ $t('blocks.numberInput') }}</template>
<section style="padding: 0 16px 0 16px;">
<ui-input v-model="value.name"><template #prefix><fa :icon="faSquareRootAlt"/></template><span>{{ $t('blocks._numberInput.name') }}</span></ui-input>
<ui-input v-model="value.text"><span>{{ $t('blocks._numberInput.text') }}</span></ui-input>
<ui-input v-model="value.default" type="number"><span>{{ $t('blocks._numberInput.default') }}</span></ui-input>
</section>
</x-container>
</template>
<script lang="ts">
import Vue from 'vue';
import { faBolt, faSquareRootAlt } from '@fortawesome/free-solid-svg-icons';
import i18n from '../../../../../i18n';
import XContainer from '../page-editor.container.vue';
export default Vue.extend({
i18n: i18n('pages'),
components: {
XContainer
},
props: {
value: {
required: true
},
},
data() {
return {
faBolt, faSquareRootAlt
};
},
created() {
if (this.value.name == null) Vue.set(this.value, 'name', '');
},
});
</script>

44
src/client/app/common/views/components/page-editor/els/page-editor.el.post.vue Normal file
View File

@@ -0,0 +1,44 @@
<template>
<x-container @remove="() => $emit('remove')">
<template #header><fa :icon="faPaperPlane"/> {{ $t('blocks.post') }}</template>
<section>
<textarea v-model="value.text"></textarea>
</section>
</x-container>
</template>
<script lang="ts">
import Vue from 'vue';
import { faPaperPlane } from '@fortawesome/free-regular-svg-icons';
import i18n from '../../../../../i18n';
import XContainer from '../page-editor.container.vue';
export default Vue.extend({
i18n: i18n('pages'),
components: {
XContainer
},
props: {
value: {
required: true
},
},
data() {
return {
faPaperPlane
};
},
beforeCreate() {
this.$options.components.XBlock = require('../page-editor.block.vue').default
},
created() {
if (this.value.text == null) Vue.set(this.value, 'text', '');
},
});
</script>

2
src/client/app/common/views/components/page-editor/els/page-editor.el.section.vue
View File

@@ -84,7 +84,7 @@ export default Vue.extend({
type: null,
title: this.$t('choose-block'),
select: {
items: this.getPageBlockList()
groupedItems: this.getPageBlockList()
},
showCancelButton: true
});

42
src/client/app/common/views/components/page-editor/els/page-editor.el.text-input.vue Normal file
View File

@@ -0,0 +1,42 @@
<template>
<x-container @remove="() => $emit('remove')">
<template #header><fa :icon="faBolt"/> {{ $t('blocks.textInput') }}</template>
<section style="padding: 0 16px 0 16px;">
<ui-input v-model="value.name"><template #prefix><fa :icon="faSquareRootAlt"/></template><span>{{ $t('blocks._textInput.name') }}</span></ui-input>
<ui-input v-model="value.text"><span>{{ $t('blocks._textInput.text') }}</span></ui-input>
<ui-input v-model="value.default" type="text"><span>{{ $t('blocks._textInput.default') }}</span></ui-input>
</section>
</x-container>
</template>
<script lang="ts">
import Vue from 'vue';
import { faBolt, faSquareRootAlt } from '@fortawesome/free-solid-svg-icons';
import i18n from '../../../../../i18n';
import XContainer from '../page-editor.container.vue';
export default Vue.extend({
i18n: i18n('pages'),
components: {
XContainer
},
props: {
value: {
required: true
},
},
data() {
return {
faBolt, faSquareRootAlt
};
},
created() {
if (this.value.name == null) Vue.set(this.value, 'name', '');
},
});
</script>

42
src/client/app/common/views/components/page-editor/els/page-editor.el.textarea-input.vue Normal file
View File

@@ -0,0 +1,42 @@
<template>
<x-container @remove="() => $emit('remove')">
<template #header><fa :icon="faBolt"/> {{ $t('blocks.textareaInput') }}</template>
<section style="padding: 0 16px 16px 16px;">
<ui-input v-model="value.name"><template #prefix><fa :icon="faSquareRootAlt"/></template><span>{{ $t('blocks._textareaInput.name') }}</span></ui-input>
<ui-input v-model="value.text"><span>{{ $t('blocks._textareaInput.text') }}</span></ui-input>
<ui-textarea v-model="value.default"><span>{{ $t('blocks._textareaInput.default') }}</span></ui-textarea>
</section>
</x-container>
</template>
<script lang="ts">
import Vue from 'vue';
import { faBolt, faSquareRootAlt } from '@fortawesome/free-solid-svg-icons';
import i18n from '../../../../../i18n';
import XContainer from '../page-editor.container.vue';
export default Vue.extend({
i18n: i18n('pages'),
components: {
XContainer
},
props: {
value: {
required: true
},
},
data() {
return {
faBolt, faSquareRootAlt
};
},
created() {
if (this.value.name == null) Vue.set(this.value, 'name', '');
},
});
</script>

58
src/client/app/common/views/components/page-editor/els/page-editor.el.textarea.vue Normal file
View File

@@ -0,0 +1,58 @@
<template>
<x-container @remove="() => $emit('remove')">
<template #header><fa :icon="faAlignLeft"/> {{ $t('blocks.textarea') }}</template>
<section class="ihymsbbe">
<textarea v-model="value.text"></textarea>
</section>
</x-container>
</template>
<script lang="ts">
import Vue from 'vue';
import { faAlignLeft } from '@fortawesome/free-solid-svg-icons';
import i18n from '../../../../../i18n';
import XContainer from '../page-editor.container.vue';
export default Vue.extend({
i18n: i18n('pages'),
components: {
XContainer
},
props: {
value: {
required: true
},
},
data() {
return {
faAlignLeft,
};
},
created() {
if (this.value.text == null) Vue.set(this.value, 'text', '');
},
});
</script>
<style lang="stylus" scoped>
.ihymsbbe
> textarea
display block
-webkit-appearance none
-moz-appearance none
appearance none
width 100%
min-width 100%
min-height 150px
border none
box-shadow none
padding 16px
background transparent
color var(--text)
font-size 14px
</style>

8
src/client/app/common/views/components/page-editor/page-editor.block.vue
View File

@@ -6,15 +6,19 @@
import Vue from 'vue';
import XSection from './els/page-editor.el.section.vue';
import XText from './els/page-editor.el.text.vue';
import XTextarea from './els/page-editor.el.textarea.vue';
import XImage from './els/page-editor.el.image.vue';
import XButton from './els/page-editor.el.button.vue';
import XInput from './els/page-editor.el.input.vue';
import XTextInput from './els/page-editor.el.text-input.vue';
import XTextareaInput from './els/page-editor.el.textarea-input.vue';
import XNumberInput from './els/page-editor.el.text-input.vue';
import XSwitch from './els/page-editor.el.switch.vue';
import XIf from './els/page-editor.el.if.vue';
import XPost from './els/page-editor.el.post.vue';
export default Vue.extend({
components: {
XSection, XText, XImage, XButton, XInput, XSwitch, XIf
XSection, XText, XImage, XButton, XTextarea, XTextInput, XTextareaInput, XNumberInput, XSwitch, XIf, XPost
},
props: {

33
src/client/app/common/views/components/page-editor/page-editor.vue
View File

@@ -259,7 +259,7 @@ export default Vue.extend({
type: null,
title: this.$t('choose-block'),
select: {
items: this.getPageBlockList()
groupedItems: this.getPageBlockList()
},
showCancelButton: true
});
@@ -323,19 +323,28 @@ export default Vue.extend({
getPageBlockList() {
return [{
value: 'section', text: this.$t('blocks.section')
label: this.$t('content-blocks'),
items: [
{ value: 'section', text: this.$t('blocks.section') },
{ value: 'text', text: this.$t('blocks.text') },
{ value: 'image', text: this.$t('blocks.image') },
{ value: 'textarea', text: this.$t('blocks.textarea') },
]
}, {
value: 'text', text: this.$t('blocks.text')
label: this.$t('input-blocks'),
items: [
{ value: 'button', text: this.$t('blocks.button') },
{ value: 'textInput', text: this.$t('blocks.textInput') },
{ value: 'textareaInput', text: this.$t('blocks.textareaInput') },
{ value: 'numberInput', text: this.$t('blocks.numberInput') },
{ value: 'switch', text: this.$t('blocks.switch') }
]
}, {
value: 'image', text: this.$t('blocks.image')
}, {
value: 'button', text: this.$t('blocks.button')
}, {
value: 'input', text: this.$t('blocks.input')
}, {
value: 'switch', text: this.$t('blocks.switch')
}, {
value: 'if', text: this.$t('blocks.if')
label: this.$t('special-blocks'),
items: [
{ value: 'if', text: this.$t('blocks.if') },
{ value: 'post', text: this.$t('blocks.post') }
]
}];
},

8
src/client/app/common/views/pages/page/page.block.vue
View File

@@ -8,13 +8,17 @@ import XText from './page.text.vue';
import XSection from './page.section.vue';
import XImage from './page.image.vue';
import XButton from './page.button.vue';
import XInput from './page.input.vue';
import XNumberInput from './page.number-input.vue';
import XTextInput from './page.text-input.vue';
import XTextareaInput from './page.textarea-input.vue';
import XSwitch from './page.switch.vue';
import XIf from './page.if.vue';
import XTextarea from './page.textarea.vue';
import XPost from './page.post.vue';
export default Vue.extend({
components: {
XText, XSection, XImage, XButton, XInput, XSwitch, XIf
XText, XSection, XImage, XButton, XNumberInput, XTextInput, XTextareaInput, XTextarea, XPost, XSwitch, XIf
},
props: {

6
src/client/app/common/views/pages/page/page.input.vue → src/client/app/common/views/pages/page/page.number-input.vue
View File

@@ -1,6 +1,6 @@
<template>
<div>
<ui-input class="kudkigyw" v-model="v" :type="value.inputType">{{ script.interpolate(value.text) }}</ui-input>
<ui-input class="kudkigyw" v-model="v" type="number">{{ script.interpolate(value.text) }}</ui-input>
</div>
</template>
@@ -25,9 +25,7 @@ export default Vue.extend({
watch: {
v() {
let v = this.v;
if (this.value.inputType === 'number') v = parseInt(v, 10);
this.script.aiScript.updatePageVar(this.value.name, v);
this.script.aiScript.updatePageVar(this.value.name, this.v);
this.script.reEval();
}
}

68
src/client/app/common/views/pages/page/page.post.vue Normal file
View File

@@ -0,0 +1,68 @@
<template>
<div class="ngbfujlo">
<ui-textarea class="textarea" :value="text" readonly></ui-textarea>
<ui-button primary @click="post()" :disabled="posting || posted">{{ posted ? $t('posted-from-post-form') : $t('post-from-post-form') }}</ui-button>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import i18n from '../../../../i18n';
export default Vue.extend({
i18n: i18n('pages'),
props: {
value: {
required: true
},
script: {
required: true
}
},
data() {
return {
text: this.script.interpolate(this.value.text),
posted: false,
posting: false,
};
},
created() {
this.$watch('script.vars', () => {
this.text = this.script.interpolate(this.value.text);
}, { deep: true });
},
methods: {
post() {
this.posting = true;
this.$root.api('notes/create', {
text: this.text,
}).then(() => {
this.posted = true;
this.$root.dialog({
type: 'success',
splash: true
});
});
}
}
});
</script>
<style lang="stylus" scoped>
.ngbfujlo
padding 0 32px 32px 32px
border solid 2px var(--pageBlockBorder)
border-radius 6px
@media (max-width 600px)
padding 0 16px 16px 16px
> .textarea
margin-top 16px
margin-bottom 16px
</style>

41
src/client/app/common/views/pages/page/page.text-input.vue Normal file
View File

@@ -0,0 +1,41 @@
<template>
<div>
<ui-input class="kudkigyw" v-model="v" type="text">{{ script.interpolate(value.text) }}</ui-input>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
props: {
value: {
required: true
},
script: {
required: true
}
},
data() {
return {
v: this.value.default,
};
},
watch: {
v() {
this.script.aiScript.updatePageVar(this.value.name, this.v);
this.script.reEval();
}
}
});
</script>
<style lang="stylus" scoped>
.kudkigyw
display inline-block
min-width 300px
max-width 450px
margin 8px 0
</style>

36
src/client/app/common/views/pages/page/page.textarea-input.vue Normal file
View File

@@ -0,0 +1,36 @@
<template>
<div>
<ui-textarea class="" v-model="v">{{ script.interpolate(value.text) }}</ui-textarea>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
props: {
value: {
required: true
},
script: {
required: true
}
},
data() {
return {
v: this.value.default,
};
},
watch: {
v() {
this.script.aiScript.updatePageVar(this.value.name, this.v);
this.script.reEval();
}
}
});
</script>
<style lang="stylus" scoped>
</style>

33
src/client/app/common/views/pages/page/page.textarea.vue Normal file
View File

@@ -0,0 +1,33 @@
<template>
<ui-textarea class="" :value="text" readonly></ui-textarea>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
props: {
value: {
required: true
},
script: {
required: true
}
},
data() {
return {
text: this.script.interpolate(this.value.text),
};
},
created() {
this.$watch('script.vars', () => {
this.text = this.script.interpolate(this.value.text);
}, { deep: true });
}
});
</script>
<style lang="stylus" scoped>
</style>

5
src/client/app/common/views/pages/page/page.vue
View File

@@ -23,6 +23,7 @@ import { faSave, faStickyNote } from '@fortawesome/free-regular-svg-icons';
import XBlock from './page.block.vue';
import { AiScript } from '../../../scripts/aiscript';
import { collectPageVars } from '../../../scripts/collect-page-vars';
import { url } from '../../../../config';
class Script {
public aiScript: AiScript;
@@ -82,7 +83,9 @@ export default Vue.extend({
this.script = new Script(new AiScript(this.page.variables, pageVars, {
randomSeed: Math.random(),
user: page.user,
visitor: this.$store.state.i
visitor: this.$store.state.i,
page: page,
url: url
}));
});
},