[Client] Improve UI
This commit is contained in:
		
							parent
							
								
									90429b787c
								
							
						
					
					
						commit
						d063d59a91
					
				
					 4 changed files with 38 additions and 20 deletions
				
			
		| 
						 | 
					@ -141,11 +141,10 @@ export default (opts: Opts = {}) => ({
 | 
				
			||||||
			this.$root.api('notes/favorites/create', {
 | 
								this.$root.api('notes/favorites/create', {
 | 
				
			||||||
				noteId: this.appearNote.id
 | 
									noteId: this.appearNote.id
 | 
				
			||||||
			}).then(() => {
 | 
								}).then(() => {
 | 
				
			||||||
				// TODO
 | 
									this.$root.alert({
 | 
				
			||||||
				/*this.$root.alert({
 | 
										type: 'success',
 | 
				
			||||||
					pointer: false,
 | 
										splash: true
 | 
				
			||||||
					autoClose: true
 | 
									});
 | 
				
			||||||
				});*/
 | 
					 | 
				
			||||||
			});
 | 
								});
 | 
				
			||||||
		},
 | 
							},
 | 
				
			||||||
 | 
					
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -1,11 +1,11 @@
 | 
				
			||||||
<template>
 | 
					<template>
 | 
				
			||||||
<div class="felqjxyj" :class="{ pointer }">
 | 
					<div class="felqjxyj" :class="{ splash }">
 | 
				
			||||||
	<div class="bg" ref="bg" @click="onBgClick"></div>
 | 
						<div class="bg" ref="bg" @click="onBgClick"></div>
 | 
				
			||||||
	<div class="main" ref="main">
 | 
						<div class="main" ref="main">
 | 
				
			||||||
		<div class="icon" :class="type"><fa :icon="icon"/></div>
 | 
							<div class="icon" :class="type"><fa :icon="icon"/></div>
 | 
				
			||||||
		<header v-if="title" v-html="title"></header>
 | 
							<header v-if="title" v-html="title"></header>
 | 
				
			||||||
		<div class="body" v-if="text" v-html="text"></div>
 | 
							<div class="body" v-if="text" v-html="text"></div>
 | 
				
			||||||
		<ui-horizon-group no-grow class="buttons">
 | 
							<ui-horizon-group no-grow class="buttons" v-if="!splash">
 | 
				
			||||||
			<ui-button @click="ok" primary autofocus>OK</ui-button>
 | 
								<ui-button @click="ok" primary autofocus>OK</ui-button>
 | 
				
			||||||
			<ui-button @click="cancel" v-if="showCancelButton">Cancel</ui-button>
 | 
								<ui-button @click="cancel" v-if="showCancelButton">Cancel</ui-button>
 | 
				
			||||||
		</ui-horizon-group>
 | 
							</ui-horizon-group>
 | 
				
			||||||
| 
						 | 
					@ -31,15 +31,15 @@ export default Vue.extend({
 | 
				
			||||||
		},
 | 
							},
 | 
				
			||||||
		text: {
 | 
							text: {
 | 
				
			||||||
			type: String,
 | 
								type: String,
 | 
				
			||||||
			required: true
 | 
								required: false
 | 
				
			||||||
		},
 | 
							},
 | 
				
			||||||
		showCancelButton: {
 | 
							showCancelButton: {
 | 
				
			||||||
			type: Boolean,
 | 
								type: Boolean,
 | 
				
			||||||
			default: false
 | 
								default: false
 | 
				
			||||||
		},
 | 
							},
 | 
				
			||||||
		pointer: {
 | 
							splash: {
 | 
				
			||||||
			type: Boolean,
 | 
								type: Boolean,
 | 
				
			||||||
			default: true
 | 
								default: false
 | 
				
			||||||
		}
 | 
							}
 | 
				
			||||||
	},
 | 
						},
 | 
				
			||||||
 | 
					
 | 
				
			||||||
| 
						 | 
					@ -72,6 +72,12 @@ export default Vue.extend({
 | 
				
			||||||
				duration: 300,
 | 
									duration: 300,
 | 
				
			||||||
				easing: [0, 0.5, 0.5, 1]
 | 
									easing: [0, 0.5, 0.5, 1]
 | 
				
			||||||
			});
 | 
								});
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
								if (this.splash) {
 | 
				
			||||||
 | 
									setTimeout(() => {
 | 
				
			||||||
 | 
										this.close();
 | 
				
			||||||
 | 
									}, 1000);
 | 
				
			||||||
 | 
								}
 | 
				
			||||||
		});
 | 
							});
 | 
				
			||||||
	},
 | 
						},
 | 
				
			||||||
 | 
					
 | 
				
			||||||
| 
						 | 
					@ -125,8 +131,13 @@ export default Vue.extend({
 | 
				
			||||||
	width 100%
 | 
						width 100%
 | 
				
			||||||
	height 100%
 | 
						height 100%
 | 
				
			||||||
 | 
					
 | 
				
			||||||
	&:not(.pointer)
 | 
						&.splash
 | 
				
			||||||
		pointer-events none
 | 
							&, *
 | 
				
			||||||
 | 
								pointer-events none !important
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
							> .main
 | 
				
			||||||
 | 
								min-width 0
 | 
				
			||||||
 | 
								width initial
 | 
				
			||||||
 | 
					
 | 
				
			||||||
	> .bg
 | 
						> .bg
 | 
				
			||||||
		display block
 | 
							display block
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -78,8 +78,10 @@ export default Vue.extend({
 | 
				
			||||||
			this.$root.api('i/pin', {
 | 
								this.$root.api('i/pin', {
 | 
				
			||||||
				noteId: this.note.id
 | 
									noteId: this.note.id
 | 
				
			||||||
			}).then(() => {
 | 
								}).then(() => {
 | 
				
			||||||
				// TODO
 | 
									this.$root.alert({
 | 
				
			||||||
				//this.$root.new(Ok);
 | 
										type: 'success',
 | 
				
			||||||
 | 
										splash: true
 | 
				
			||||||
 | 
									});
 | 
				
			||||||
				this.destroyDom();
 | 
									this.destroyDom();
 | 
				
			||||||
			});
 | 
								});
 | 
				
			||||||
		},
 | 
							},
 | 
				
			||||||
| 
						 | 
					@ -112,8 +114,10 @@ export default Vue.extend({
 | 
				
			||||||
			this.$root.api('notes/favorites/create', {
 | 
								this.$root.api('notes/favorites/create', {
 | 
				
			||||||
				noteId: this.note.id
 | 
									noteId: this.note.id
 | 
				
			||||||
			}).then(() => {
 | 
								}).then(() => {
 | 
				
			||||||
				// TODO
 | 
									this.$root.alert({
 | 
				
			||||||
				//this.$root.new(Ok);
 | 
										type: 'success',
 | 
				
			||||||
 | 
										splash: true
 | 
				
			||||||
 | 
									});
 | 
				
			||||||
				this.destroyDom();
 | 
									this.destroyDom();
 | 
				
			||||||
			});
 | 
								});
 | 
				
			||||||
		},
 | 
							},
 | 
				
			||||||
| 
						 | 
					@ -122,8 +126,10 @@ export default Vue.extend({
 | 
				
			||||||
			this.$root.api('notes/favorites/delete', {
 | 
								this.$root.api('notes/favorites/delete', {
 | 
				
			||||||
				noteId: this.note.id
 | 
									noteId: this.note.id
 | 
				
			||||||
			}).then(() => {
 | 
								}).then(() => {
 | 
				
			||||||
				// TODO
 | 
									this.$root.alert({
 | 
				
			||||||
				//this.$root.new(Ok);
 | 
										type: 'success',
 | 
				
			||||||
 | 
										splash: true
 | 
				
			||||||
 | 
									});
 | 
				
			||||||
				this.destroyDom();
 | 
									this.destroyDom();
 | 
				
			||||||
			});
 | 
								});
 | 
				
			||||||
		},
 | 
							},
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -307,8 +307,10 @@ export default Vue.extend({
 | 
				
			||||||
							listId: list.id,
 | 
												listId: list.id,
 | 
				
			||||||
							userId: this.user.id
 | 
												userId: this.user.id
 | 
				
			||||||
						});
 | 
											});
 | 
				
			||||||
						// TODO
 | 
											this.$root.alert({
 | 
				
			||||||
						//this.$root.new(Ok);
 | 
												type: 'success',
 | 
				
			||||||
 | 
												splash: true
 | 
				
			||||||
 | 
											});
 | 
				
			||||||
					});
 | 
										});
 | 
				
			||||||
				}
 | 
									}
 | 
				
			||||||
			}];
 | 
								}];
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue