wip
This commit is contained in:
		
							parent
							
								
									354c7fcaf6
								
							
						
					
					
						commit
						7268e29b59
					
				|  | @ -247,9 +247,10 @@ | |||
| 		"vue-color": "2.7.1", | ||||
| 		"vue-content-loading": "1.6.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-loader": "16.0.0-beta.5", | ||||
| 		"vue-loader": "16.0.0-beta.7", | ||||
| 		"vue-marquee-text-component": "1.1.1", | ||||
| 		"vue-meta": "2.4.0", | ||||
| 		"vue-prism-component": "1.2.0", | ||||
|  | @ -258,7 +259,6 @@ | |||
| 		"vue-style-loader": "4.1.2", | ||||
| 		"vue-svg-inline-loader-corejs3": "1.5.0", | ||||
| 		"vue-template-compiler": "2.6.12", | ||||
| 		"vuedraggable": "2.24.1", | ||||
| 		"vuex": "4.0.0-beta.4", | ||||
| 		"vuex-persistedstate": "3.1.0", | ||||
| 		"web-push": "3.4.4", | ||||
|  |  | |||
|  | @ -29,8 +29,7 @@ | |||
| </template> | ||||
| 
 | ||||
| <script lang="ts"> | ||||
| import { defineComponent } from 'vue'; | ||||
| import * as XDraggable from 'vuedraggable'; | ||||
| import { defineComponent, defineAsyncComponent } from 'vue'; | ||||
| import { v4 as uuid } from 'uuid'; | ||||
| import { faWindowMaximize, faTimes, faCog, faPlus } from '@fortawesome/free-solid-svg-icons'; | ||||
| import MkSelect from '@/components/ui/select.vue'; | ||||
|  | @ -42,7 +41,7 @@ import * as os from '@/os'; | |||
| export default defineComponent({ | ||||
| 	components: { | ||||
| 		XColumn, | ||||
| 		XDraggable, | ||||
| 		XDraggable: defineAsyncComponent(() => import('vue-draggable-next').then(x => x.VueDraggableNext)), | ||||
| 		MkSelect, | ||||
| 		MkButton, | ||||
| 	}, | ||||
|  |  | |||
|  | @ -1,19 +1,17 @@ | |||
| <template> | ||||
| <x-modal ref="modal" @closed="() => { $emit('closed'); destroyDom(); }"> | ||||
| 	<img class="xubzgfga" ref="img" :src="image.url" :alt="image.name" :title="image.name" @click="close" tabindex="-1"/> | ||||
| </x-modal> | ||||
| <div class="xubzgfga"> | ||||
| 	<header>{{ image.name }}</header> | ||||
| 	<img :src="image.url" :alt="image.name" :title="image.name" @click="close"/> | ||||
| 	<footer>{{ image.type }}, {{ bytes(image.size) }}</footer> | ||||
| </div> | ||||
| </template> | ||||
| 
 | ||||
| <script lang="ts"> | ||||
| import { defineComponent } from 'vue'; | ||||
| import XModal from './modal.vue'; | ||||
| import * as os from '@/os'; | ||||
| import bytes from '@/filters/bytes'; | ||||
| 
 | ||||
| export default defineComponent({ | ||||
| 	components: { | ||||
| 		XModal, | ||||
| 	}, | ||||
| 
 | ||||
| 	props: { | ||||
| 		image: { | ||||
| 			type: Object, | ||||
|  | @ -21,32 +19,34 @@ export default defineComponent({ | |||
| 		}, | ||||
| 	}, | ||||
| 
 | ||||
| 	mounted() { | ||||
| 		this.$nextTick(() => { | ||||
| 			this.$refs.img.focus(); | ||||
| 		}); | ||||
| 	}, | ||||
| 
 | ||||
| 	methods: { | ||||
| 		close() { | ||||
| 			this.$refs.modal.close(); | ||||
| 			this.$emit('done'); | ||||
| 		}, | ||||
| 
 | ||||
| 		bytes, | ||||
| 	} | ||||
| }); | ||||
| </script> | ||||
| 
 | ||||
| <style lang="scss" scoped> | ||||
| .xubzgfga { | ||||
| 	position: fixed; | ||||
| 	z-index: 2; | ||||
| 	top: 0; | ||||
| 	right: 0; | ||||
| 	bottom: 0; | ||||
| 	left: 0; | ||||
| 	max-width: 100%; | ||||
| 	max-height: 100%; | ||||
| 	margin: auto; | ||||
| 	cursor: zoom-out; | ||||
| 	image-orientation: from-image; | ||||
| 	max-width: 1024px; | ||||
| 
 | ||||
| 	> header { | ||||
| 		margin-bottom: 8px; | ||||
| 	} | ||||
| 
 | ||||
| 	> img { | ||||
| 		display: block; | ||||
| 		max-width: 100%; | ||||
| 		cursor: zoom-out; | ||||
| 		image-orientation: from-image; | ||||
| 	} | ||||
| 
 | ||||
| 	> footer { | ||||
| 		margin-top: 8px; | ||||
| 		opacity: 0.7; | ||||
| 	} | ||||
| } | ||||
| </style> | ||||
|  |  | |||
|  | @ -72,12 +72,9 @@ export default defineComponent({ | |||
| 			if (this.$store.state.device.imageNewTab) { | ||||
| 				window.open(this.image.url, '_blank'); | ||||
| 			} else { | ||||
| 				const viewer = os.modal(ImageViewer, { | ||||
| 				os.modal(ImageViewer, { | ||||
| 					image: this.image | ||||
| 				}); | ||||
| 				this.$once('hook:beforeDestroy', () => { | ||||
| 					viewer.close(); | ||||
| 				}); | ||||
| 			} | ||||
| 		} | ||||
| 	} | ||||
|  |  | |||
|  | @ -166,8 +166,10 @@ export default defineComponent({ | |||
| 		max-height: calc(100% - 16px); | ||||
| 		overflow: auto; | ||||
| 		display: flex; | ||||
| 		justify-content: center; | ||||
| 		align-items: center; | ||||
| 
 | ||||
| 		> * { | ||||
| 			margin: auto; | ||||
| 		} | ||||
| 	} | ||||
| 
 | ||||
| 	> .content.popup { | ||||
|  |  | |||
|  | @ -13,8 +13,7 @@ | |||
| </template> | ||||
| 
 | ||||
| <script lang="ts"> | ||||
| import { defineComponent } from 'vue'; | ||||
| import * as XDraggable from 'vuedraggable'; | ||||
| import { defineComponent, defineAsyncComponent } from 'vue'; | ||||
| import { faTimesCircle, faEye, faEyeSlash } from '@fortawesome/free-regular-svg-icons'; | ||||
| import { faExclamationTriangle, faICursor } from '@fortawesome/free-solid-svg-icons'; | ||||
| import XFileThumbnail from './drive-file-thumbnail.vue' | ||||
|  | @ -22,7 +21,7 @@ import * as os from '@/os'; | |||
| 
 | ||||
| export default defineComponent({ | ||||
| 	components: { | ||||
| 		XDraggable, | ||||
| 		XDraggable: defineAsyncComponent(() => import('vue-draggable-next').then(x => x.VueDraggableNext)), | ||||
| 		XFileThumbnail | ||||
| 	}, | ||||
| 
 | ||||
|  |  | |||
|  | @ -104,7 +104,7 @@ export default defineComponent({ | |||
| 		XSidebar, | ||||
| 		XClock: defineAsyncComponent(() => import('@/components/header-clock.vue')), | ||||
| 		MkButton: defineAsyncComponent(() => import('@/components/ui/button.vue')), | ||||
| 		XDraggable: defineAsyncComponent(() => import('vuedraggable')), | ||||
| 		XDraggable: defineAsyncComponent(() => import('vue-draggable-next').then(x => x.VueDraggableNext)), | ||||
| 	}, | ||||
| 
 | ||||
| 	data() { | ||||
|  |  | |||
|  | @ -5,8 +5,7 @@ | |||
| </template> | ||||
| 
 | ||||
| <script lang="ts"> | ||||
| import { defineComponent } from 'vue'; | ||||
| import * as XDraggable from 'vuedraggable'; | ||||
| import { defineComponent, defineAsyncComponent } 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'; | ||||
|  | @ -25,7 +24,8 @@ import * as os from '@/os'; | |||
| 
 | ||||
| export default defineComponent({ | ||||
| 	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: { | ||||
|  |  | |||
|  | @ -83,8 +83,7 @@ | |||
| </template> | ||||
| 
 | ||||
| <script lang="ts"> | ||||
| import { defineComponent } from 'vue'; | ||||
| import * as XDraggable from 'vuedraggable'; | ||||
| import { defineComponent, defineAsyncComponent } from 'vue'; | ||||
| import 'prismjs'; | ||||
| import { highlight, languages } from 'prismjs/components/prism-core'; | ||||
| import 'prismjs/components/prism-clike'; | ||||
|  | @ -112,7 +111,8 @@ import * as os from '@/os'; | |||
| 
 | ||||
| export default defineComponent({ | ||||
| 	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: { | ||||
|  |  | |||
							
								
								
									
										32
									
								
								yarn.lock
								
								
								
								
							
							
						
						
									
										32
									
								
								yarn.lock
								
								
								
								
							|  | @ -8749,7 +8749,7 @@ sort-keys@^2.0.0: | |||
|   dependencies: | ||||
|     is-plain-obj "^1.0.0" | ||||
| 
 | ||||
| sortablejs@^1.10.1: | ||||
| sortablejs@^1.10.2: | ||||
|   version "1.10.2" | ||||
|   resolved "https://registry.yarnpkg.com/sortablejs/-/sortablejs-1.10.2.tgz#6e40364d913f98b85a14f6678f92b5c1221f5290" | ||||
|   integrity sha512-YkPGufevysvfwn5rfdlGyrGjt7/CRHwvRPogD/lC+TnvcN29jDpCifKP+rBqf+LRldfXSTh+0CGLcSg0VIxq3A== | ||||
|  | @ -10091,6 +10091,13 @@ vue-cropperjs@4.1.0: | |||
|   dependencies: | ||||
|     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: | ||||
|   version "7.1.0" | ||||
|   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" | ||||
|     lodash "^4.17.15" | ||||
| 
 | ||||
| vue-i18n@9.0.0-alpha.13: | ||||
|   version "9.0.0-alpha.13" | ||||
|   resolved "https://registry.yarnpkg.com/vue-i18n/-/vue-i18n-9.0.0-alpha.13.tgz#6354915cfaee66e9973b21669c8bcb6cf81eeab2" | ||||
|   integrity sha512-0kkZYImEcLwmcEqHuQIRUKxISOrm1iAWDOUPvtQ0yWW7MGkKAMHCTgn6toGQywPc4v48P+YDTgsGsBpHFpQJFA== | ||||
| vue-i18n@9.0.0-alpha.17: | ||||
|   version "9.0.0-alpha.17" | ||||
|   resolved "https://registry.yarnpkg.com/vue-i18n/-/vue-i18n-9.0.0-alpha.17.tgz#a096c8ed0ccc51e16d835192aa8421e89157802b" | ||||
|   integrity sha512-5GIDvYKHPU8DuysdQM7tcALWmBlFbwtM9jKWGI4wBDbych4dK9OMjGCVrC2PvaGD/zo96VLJMYLNpgg0GCk6QA== | ||||
| 
 | ||||
| vue-json-pretty@1.6.7: | ||||
|   version "1.6.7" | ||||
|   resolved "https://registry.yarnpkg.com/vue-json-pretty/-/vue-json-pretty-1.6.7.tgz#7dbc0d50d7b30f2ad99dade6541cd57479ff3725" | ||||
|   integrity sha512-M7fGSj6yQxl9x3n4cViD5OUUXeXeIfjVfnOQOH+T95qo4wz2BzthBDZzRsKKsf9W5YIFbC1ZWkw50j9cPxxs9w== | ||||
| 
 | ||||
| vue-loader@16.0.0-beta.5: | ||||
|   version "16.0.0-beta.5" | ||||
|   resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-16.0.0-beta.5.tgz#04edc889492b03a445e7ac66e9226a70175ca8a0" | ||||
|   integrity sha512-ciWfzNefqWlmzKznCWY9hl+fPP4KlQ0A9MtHbJ/8DpyY+dAM8gDrjufIdxwTgC4szE4EZC3A6ip/BbrqM84GqA== | ||||
| vue-loader@16.0.0-beta.7: | ||||
|   version "16.0.0-beta.7" | ||||
|   resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-16.0.0-beta.7.tgz#6f2726fa0e2b1fbae67895c47593bbf69f2b9ab8" | ||||
|   integrity sha512-xQ8/GZmRPdQ3EinnE0IXwdVoDzh7Dowo0MowoyBuScEBXrRabw6At5/IdtD3waKklKW5PGokPsm8KRN6rvQ1cw== | ||||
|   dependencies: | ||||
|     "@types/mini-css-extract-plugin" "^0.9.1" | ||||
|     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" | ||||
|   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: | ||||
|   version "3.1.0" | ||||
|   resolved "https://registry.yarnpkg.com/vuex-persistedstate/-/vuex-persistedstate-3.1.0.tgz#a710d01000bff8336bc3b03fa3ef42e376094b71" | ||||
|  |  | |||
		Loading…
	
		Reference in New Issue