natty
/
calckey
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

wip

This commit is contained in:
syuilo 2020-09-12 12:48:47 +09:00
parent 354c7fcaf6
commit 7268e29b59
10 changed files with 61 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
package.json
View File

@ -247,9 +247,10 @@
"vue-color": "2.7.1", "vue-color": "2.7.1",
"vue-content-loading": "1.6.0", "vue-content-loading": "1.6.0",
"vue-cropperjs": "4.1.0", "vue-cropperjs": "4.1.0",
"vue-i18n": "9.0.0-alpha.13", "vue-draggable-next": "1.0.5",
"vue-i18n": "9.0.0-alpha.17",
"vue-json-pretty": "1.6.7", "vue-json-pretty": "1.6.7",
"vue-loader": "16.0.0-beta.5", "vue-loader": "16.0.0-beta.7",
"vue-marquee-text-component": "1.1.1", "vue-marquee-text-component": "1.1.1",
"vue-meta": "2.4.0", "vue-meta": "2.4.0",
"vue-prism-component": "1.2.0", "vue-prism-component": "1.2.0",
@ -258,7 +259,6 @@
"vue-style-loader": "4.1.2", "vue-style-loader": "4.1.2",
"vue-svg-inline-loader-corejs3": "1.5.0", "vue-svg-inline-loader-corejs3": "1.5.0",
"vue-template-compiler": "2.6.12", "vue-template-compiler": "2.6.12",
"vuedraggable": "2.24.1",
"vuex": "4.0.0-beta.4", "vuex": "4.0.0-beta.4",
"vuex-persistedstate": "3.1.0", "vuex-persistedstate": "3.1.0",
"web-push": "3.4.4", "web-push": "3.4.4",

5
src/client/components/deck/widgets-column.vue
View File

@ -29,8 +29,7 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent, defineAsyncComponent } from 'vue';
import * as XDraggable from 'vuedraggable';
import { v4 as uuid } from 'uuid'; import { v4 as uuid } from 'uuid';
import { faWindowMaximize, faTimes, faCog, faPlus } from '@fortawesome/free-solid-svg-icons'; import { faWindowMaximize, faTimes, faCog, faPlus } from '@fortawesome/free-solid-svg-icons';
import MkSelect from '@/components/ui/select.vue'; import MkSelect from '@/components/ui/select.vue';
@ -42,7 +41,7 @@ import * as os from '@/os';
export default defineComponent({ export default defineComponent({
components: { components: {
XColumn, XColumn,
XDraggable, XDraggable: defineAsyncComponent(() => import('vue-draggable-next').then(x => x.VueDraggableNext)),
MkSelect, MkSelect,
MkButton, MkButton,
}, },

52
src/client/components/image-viewer.vue
View File

@ -1,19 +1,17 @@
<template> <template>
<x-modal ref="modal" @closed="() => { $emit('closed'); destroyDom(); }"> <div class="xubzgfga">
<img class="xubzgfga" ref="img" :src="image.url" :alt="image.name" :title="image.name" @click="close" tabindex="-1"/> <header>{{ image.name }}</header>
</x-modal> <img :src="image.url" :alt="image.name" :title="image.name" @click="close"/>
<footer>{{ image.type }}, {{ bytes(image.size) }}</footer>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import XModal from './modal.vue';
import * as os from '@/os'; import * as os from '@/os';
import bytes from '@/filters/bytes';
export default defineComponent({ export default defineComponent({
components: {
XModal,
},
props: { props: {
image: { image: {
type: Object, type: Object,
@ -21,32 +19,34 @@ export default defineComponent({
}, },
}, },
mounted() {
this.$nextTick(() => {
this.$refs.img.focus();
});
},
methods: { methods: {
close() { close() {
this.$refs.modal.close(); this.$emit('done');
}, },
bytes,
} }
}); });
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.xubzgfga { .xubzgfga {
position: fixed; max-width: 1024px;
z-index: 2;
top: 0; > header {
right: 0; margin-bottom: 8px;
bottom: 0; }
left: 0;
max-width: 100%; > img {
max-height: 100%; display: block;
margin: auto; max-width: 100%;
cursor: zoom-out; cursor: zoom-out;
image-orientation: from-image; image-orientation: from-image;
}
> footer {
margin-top: 8px;
opacity: 0.7;
}
} }
</style> </style>

5
src/client/components/media-image.vue
View File

@ -72,12 +72,9 @@ export default defineComponent({
if (this.$store.state.device.imageNewTab) { if (this.$store.state.device.imageNewTab) {
window.open(this.image.url, '_blank'); window.open(this.image.url, '_blank');
} else { } else {
const viewer = os.modal(ImageViewer, { os.modal(ImageViewer, {
image: this.image image: this.image
}); });
this.$once('hook:beforeDestroy', () => {
viewer.close();
});
} }
} }
} }

6
src/client/components/modal.vue
View File

@ -166,8 +166,10 @@ export default defineComponent({
max-height: calc(100% - 16px); max-height: calc(100% - 16px);
overflow: auto; overflow: auto;
display: flex; display: flex;
justify-content: center;
align-items: center; > * {
margin: auto;
}
} }
> .content.popup { > .content.popup {

5
src/client/components/post-form-attaches.vue
View File

@ -13,8 +13,7 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent, defineAsyncComponent } from 'vue';
import * as XDraggable from 'vuedraggable';
import { faTimesCircle, faEye, faEyeSlash } from '@fortawesome/free-regular-svg-icons'; import { faTimesCircle, faEye, faEyeSlash } from '@fortawesome/free-regular-svg-icons';
import { faExclamationTriangle, faICursor } from '@fortawesome/free-solid-svg-icons'; import { faExclamationTriangle, faICursor } from '@fortawesome/free-solid-svg-icons';
import XFileThumbnail from './drive-file-thumbnail.vue' import XFileThumbnail from './drive-file-thumbnail.vue'
@ -22,7 +21,7 @@ import * as os from '@/os';
export default defineComponent({ export default defineComponent({
components: { components: {
XDraggable, XDraggable: defineAsyncComponent(() => import('vue-draggable-next').then(x => x.VueDraggableNext)),
XFileThumbnail XFileThumbnail
}, },

2
src/client/default.vue
View File

@ -104,7 +104,7 @@ export default defineComponent({
XSidebar, XSidebar,
XClock: defineAsyncComponent(() => import('@/components/header-clock.vue')), XClock: defineAsyncComponent(() => import('@/components/header-clock.vue')),
MkButton: defineAsyncComponent(() => import('@/components/ui/button.vue')), MkButton: defineAsyncComponent(() => import('@/components/ui/button.vue')),
XDraggable: defineAsyncComponent(() => import('vuedraggable')), XDraggable: defineAsyncComponent(() => import('vue-draggable-next').then(x => x.VueDraggableNext)),
}, },
data() { data() {

6
src/client/pages/page-editor/page-editor.blocks.vue
View File

@ -5,8 +5,7 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent, defineAsyncComponent } from 'vue';
import * as XDraggable from 'vuedraggable';
import XSection from './els/page-editor.el.section.vue'; import XSection from './els/page-editor.el.section.vue';
import XText from './els/page-editor.el.text.vue'; import XText from './els/page-editor.el.text.vue';
import XTextarea from './els/page-editor.el.textarea.vue'; import XTextarea from './els/page-editor.el.textarea.vue';
@ -25,7 +24,8 @@ import * as os from '@/os';
export default defineComponent({ export default defineComponent({
components: { components: {
XDraggable, XSection, XText, XImage, XButton, XTextarea, XTextInput, XTextareaInput, XNumberInput, XSwitch, XIf, XPost, XCounter, XRadioButton, XCanvas XDraggable: defineAsyncComponent(() => import('vue-draggable-next').then(x => x.VueDraggableNext)),
XSection, XText, XImage, XButton, XTextarea, XTextInput, XTextareaInput, XNumberInput, XSwitch, XIf, XPost, XCounter, XRadioButton, XCanvas
}, },
props: { props: {

6
src/client/pages/page-editor/page-editor.vue
View File

@ -83,8 +83,7 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent, defineAsyncComponent } from 'vue';
import * as XDraggable from 'vuedraggable';
import 'prismjs'; import 'prismjs';
import { highlight, languages } from 'prismjs/components/prism-core'; import { highlight, languages } from 'prismjs/components/prism-core';
import 'prismjs/components/prism-clike'; import 'prismjs/components/prism-clike';
@ -112,7 +111,8 @@ import * as os from '@/os';
export default defineComponent({ export default defineComponent({
components: { components: {
XDraggable, XVariable, XBlocks, MkTextarea, MkContainer, MkButton, MkSelect, MkSwitch, MkInput, PrismEditor XDraggable: defineAsyncComponent(() => import('vue-draggable-next').then(x => x.VueDraggableNext)),
XVariable, XBlocks, MkTextarea, MkContainer, MkButton, MkSelect, MkSwitch, MkInput, PrismEditor
}, },
props: { props: {

32
yarn.lock
View File

@ -8749,7 +8749,7 @@ sort-keys@^2.0.0:
dependencies: dependencies:
is-plain-obj "^1.0.0" is-plain-obj "^1.0.0"
sortablejs@^1.10.1: sortablejs@^1.10.2:
version "1.10.2" version "1.10.2"
resolved "https://registry.yarnpkg.com/sortablejs/-/sortablejs-1.10.2.tgz#6e40364d913f98b85a14f6678f92b5c1221f5290" resolved "https://registry.yarnpkg.com/sortablejs/-/sortablejs-1.10.2.tgz#6e40364d913f98b85a14f6678f92b5c1221f5290"
integrity sha512-YkPGufevysvfwn5rfdlGyrGjt7/CRHwvRPogD/lC+TnvcN29jDpCifKP+rBqf+LRldfXSTh+0CGLcSg0VIxq3A== integrity sha512-YkPGufevysvfwn5rfdlGyrGjt7/CRHwvRPogD/lC+TnvcN29jDpCifKP+rBqf+LRldfXSTh+0CGLcSg0VIxq3A==
@ -10091,6 +10091,13 @@ vue-cropperjs@4.1.0:
dependencies: dependencies:
cropperjs "^1.5.6" cropperjs "^1.5.6"
vue-draggable-next@1.0.5:
version "1.0.5"
resolved "https://registry.yarnpkg.com/vue-draggable-next/-/vue-draggable-next-1.0.5.tgz#ec872539c6d5ef383a5b17e5fe153eb5741be40f"
integrity sha512-YeR0INdg7Kgp13qCUrFsF+q7Cy+E6I7dyFhfAtRkCGb1gaSh6WdQwEa3k33HR/kjB0rAXWmoxcE7T1d+N3eGcg==
dependencies:
sortablejs "^1.10.2"
vue-eslint-parser@^7.1.0: vue-eslint-parser@^7.1.0:
version "7.1.0" version "7.1.0"
resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-7.1.0.tgz#9cdbcc823e656b087507a1911732b867ac101e83" resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-7.1.0.tgz#9cdbcc823e656b087507a1911732b867ac101e83"
@ -10103,20 +10110,20 @@ vue-eslint-parser@^7.1.0:
esquery "^1.0.1" esquery "^1.0.1"
lodash "^4.17.15" lodash "^4.17.15"
vue-i18n@9.0.0-alpha.13: vue-i18n@9.0.0-alpha.17:
version "9.0.0-alpha.13" version "9.0.0-alpha.17"
resolved "https://registry.yarnpkg.com/vue-i18n/-/vue-i18n-9.0.0-alpha.13.tgz#6354915cfaee66e9973b21669c8bcb6cf81eeab2" resolved "https://registry.yarnpkg.com/vue-i18n/-/vue-i18n-9.0.0-alpha.17.tgz#a096c8ed0ccc51e16d835192aa8421e89157802b"
integrity sha512-0kkZYImEcLwmcEqHuQIRUKxISOrm1iAWDOUPvtQ0yWW7MGkKAMHCTgn6toGQywPc4v48P+YDTgsGsBpHFpQJFA== integrity sha512-5GIDvYKHPU8DuysdQM7tcALWmBlFbwtM9jKWGI4wBDbych4dK9OMjGCVrC2PvaGD/zo96VLJMYLNpgg0GCk6QA==
vue-json-pretty@1.6.7: vue-json-pretty@1.6.7:
version "1.6.7" version "1.6.7"
resolved "https://registry.yarnpkg.com/vue-json-pretty/-/vue-json-pretty-1.6.7.tgz#7dbc0d50d7b30f2ad99dade6541cd57479ff3725" resolved "https://registry.yarnpkg.com/vue-json-pretty/-/vue-json-pretty-1.6.7.tgz#7dbc0d50d7b30f2ad99dade6541cd57479ff3725"
integrity sha512-M7fGSj6yQxl9x3n4cViD5OUUXeXeIfjVfnOQOH+T95qo4wz2BzthBDZzRsKKsf9W5YIFbC1ZWkw50j9cPxxs9w== integrity sha512-M7fGSj6yQxl9x3n4cViD5OUUXeXeIfjVfnOQOH+T95qo4wz2BzthBDZzRsKKsf9W5YIFbC1ZWkw50j9cPxxs9w==
vue-loader@16.0.0-beta.5: vue-loader@16.0.0-beta.7:
version "16.0.0-beta.5" version "16.0.0-beta.7"
resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-16.0.0-beta.5.tgz#04edc889492b03a445e7ac66e9226a70175ca8a0" resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-16.0.0-beta.7.tgz#6f2726fa0e2b1fbae67895c47593bbf69f2b9ab8"
integrity sha512-ciWfzNefqWlmzKznCWY9hl+fPP4KlQ0A9MtHbJ/8DpyY+dAM8gDrjufIdxwTgC4szE4EZC3A6ip/BbrqM84GqA== integrity sha512-xQ8/GZmRPdQ3EinnE0IXwdVoDzh7Dowo0MowoyBuScEBXrRabw6At5/IdtD3waKklKW5PGokPsm8KRN6rvQ1cw==
dependencies: dependencies:
"@types/mini-css-extract-plugin" "^0.9.1" "@types/mini-css-extract-plugin" "^0.9.1"
chalk "^3.0.0" chalk "^3.0.0"
@ -10194,13 +10201,6 @@ vue@^2.5.13, vue@^2.5.17:
resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.11.tgz#76594d877d4b12234406e84e35275c6d514125c5" resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.11.tgz#76594d877d4b12234406e84e35275c6d514125c5"
integrity sha512-VfPwgcGABbGAue9+sfrD4PuwFar7gPb1yl1UK1MwXoQPAw0BKSqWfoYCT/ThFrdEVWoI51dBuyCoiNU9bZDZxQ== integrity sha512-VfPwgcGABbGAue9+sfrD4PuwFar7gPb1yl1UK1MwXoQPAw0BKSqWfoYCT/ThFrdEVWoI51dBuyCoiNU9bZDZxQ==
vuedraggable@2.24.1:
version "2.24.1"
resolved "https://registry.yarnpkg.com/vuedraggable/-/vuedraggable-2.24.1.tgz#304abd7644dde05c1f199a227bf9e9107f56197a"
integrity sha512-G1fxO1oshx+WLdieSGl6jSJdlHOQFga1FpjuUpgXldbpKNzxpjsGn4xYNnRHVrOAqm8aG5FfpdQlh5LHesxCeA==
dependencies:
sortablejs "^1.10.1"
vuex-persistedstate@3.1.0: vuex-persistedstate@3.1.0:
version "3.1.0" version "3.1.0"
resolved "https://registry.yarnpkg.com/vuex-persistedstate/-/vuex-persistedstate-3.1.0.tgz#a710d01000bff8336bc3b03fa3ef42e376094b71" resolved "https://registry.yarnpkg.com/vuex-persistedstate/-/vuex-persistedstate-3.1.0.tgz#a710d01000bff8336bc3b03fa3ef42e376094b71"