tweak ui
This commit is contained in:
		
							parent
							
								
									f25777f2d2
								
							
						
					
					
						commit
						23efba6193
					
				
					 1 changed files with 33 additions and 15 deletions
				
			
		|  | @ -1,32 +1,27 @@ | |||
| <template> | ||||
| <FormBase class="relaycxt"> | ||||
| 	<FormButton primary @click="addRelay"><i class="fas fa-plus"></i> {{ $ts.addRelay }}</FormButton> | ||||
| 
 | ||||
| 	<div v-for="relay in relays" :key="relay.inbox" class="_debobigegoItem"> | ||||
| 		<div class="_debobigegoPanel" style="padding: 16px;"> | ||||
| 			<div>{{ relay.inbox }}</div> | ||||
| 			<div>{{ $t(`_relayStatus.${relay.status}`) }}</div> | ||||
| 			<MkButton class="button" inline danger @click="remove(relay.inbox)"><i class="fas fa-trash-alt"></i> {{ $ts.remove }}</MkButton> | ||||
| <MkSpacer :content-max="800"> | ||||
| 	<div v-for="relay in relays" :key="relay.inbox" class="relaycxt _panel _block" style="padding: 16px;"> | ||||
| 		<div>{{ relay.inbox }}</div> | ||||
| 		<div class="status"> | ||||
| 			<i v-if="relay.status === 'accepted'" class="fas fa-check icon accepted"></i> | ||||
| 			<i v-else-if="relay.status === 'rejected'" class="fas fa-ban icon rejected"></i> | ||||
| 			<i v-else class="fas fa-clock icon requesting"></i> | ||||
| 			<span>{{ $t(`_relayStatus.${relay.status}`) }}</span> | ||||
| 		</div> | ||||
| 		<MkButton class="button" inline danger @click="remove(relay.inbox)"><i class="fas fa-trash-alt"></i> {{ $ts.remove }}</MkButton> | ||||
| 	</div> | ||||
| </FormBase> | ||||
| </MkSpacer> | ||||
| </template> | ||||
| 
 | ||||
| <script lang="ts"> | ||||
| import { defineComponent } from 'vue'; | ||||
| import MkButton from '@/components/ui/button.vue'; | ||||
| import MkInput from '@/components/form/input.vue'; | ||||
| import FormBase from '@/components/debobigego/base.vue'; | ||||
| import FormButton from '@/components/debobigego/button.vue'; | ||||
| import * as os from '@/os'; | ||||
| import * as symbols from '@/symbols'; | ||||
| 
 | ||||
| export default defineComponent({ | ||||
| 	components: { | ||||
| 		FormBase, | ||||
| 		FormButton, | ||||
| 		MkButton, | ||||
| 		MkInput, | ||||
| 	}, | ||||
| 
 | ||||
| 	emits: ['info'], | ||||
|  | @ -37,6 +32,12 @@ export default defineComponent({ | |||
| 				title: this.$ts.relays, | ||||
| 				icon: 'fas fa-globe', | ||||
| 				bg: 'var(--bg)', | ||||
| 				actions: [{ | ||||
| 					asFullButton: true, | ||||
| 					icon: 'fas fa-plus', | ||||
| 					text: this.$ts.addRelay, | ||||
| 					handler: this.addRelay, | ||||
| 				}], | ||||
| 			}, | ||||
| 			relays: [], | ||||
| 			inbox: '', | ||||
|  | @ -94,5 +95,22 @@ export default defineComponent({ | |||
| </script> | ||||
| 
 | ||||
| <style lang="scss" scoped> | ||||
| .relaycxt { | ||||
| 	> .status { | ||||
| 		margin: 8px 0; | ||||
| 
 | ||||
| 		> .icon { | ||||
| 			width: 1em; | ||||
| 			margin-right: 0.75em; | ||||
| 
 | ||||
| 			&.accepted { | ||||
| 				color: var(--success); | ||||
| 			} | ||||
| 
 | ||||
| 			&.rejected { | ||||
| 				color: var(--error); | ||||
| 			} | ||||
| 		} | ||||
| 	} | ||||
| } | ||||
| </style> | ||||
|  |  | |||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue