feature: チャンネル投稿はフォームに色がつくとうれしい (#12686)
This commit is contained in:
		
							parent
							
								
									6df9c79bb7
								
							
						
					
					
						commit
						c167f20643
					
				
					 1 changed files with 13 additions and 0 deletions
				
			
		| 
						 | 
				
			
			@ -67,6 +67,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 | 
			
		|||
	<MkInfo v-if="hasNotSpecifiedMentions" warn :class="$style.hasNotSpecifiedMentions">{{ i18n.ts.notSpecifiedMentionWarning }} - <button class="_textButton" @click="addMissingMention()">{{ i18n.ts.add }}</button></MkInfo>
 | 
			
		||||
	<input v-show="useCw" ref="cwInputEl" v-model="cw" :class="$style.cw" :placeholder="i18n.ts.annotation" @keydown="onKeydown">
 | 
			
		||||
	<div :class="[$style.textOuter, { [$style.withCw]: useCw }]">
 | 
			
		||||
		<div v-if="channel" :class="$style.colorBar" :style="{ background: channel.color }"></div>
 | 
			
		||||
		<textarea ref="textareaEl" v-model="text" :class="[$style.text]" :disabled="posting || posted" :readonly="textAreaReadOnly" :placeholder="placeholder" data-cy-post-form-text @keydown="onKeydown" @paste="onPaste" @compositionupdate="onCompositionUpdate" @compositionend="onCompositionEnd"/>
 | 
			
		||||
		<div v-if="maxTextLength - textLength < 100" :class="['_acrylic', $style.textCount, { [$style.textOver]: textLength > maxTextLength }]">{{ maxTextLength - textLength }}</div>
 | 
			
		||||
	</div>
 | 
			
		||||
| 
						 | 
				
			
			@ -1038,6 +1039,17 @@ defineExpose({
 | 
			
		|||
	}
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
.colorBar {
 | 
			
		||||
	position: absolute;
 | 
			
		||||
	top: 0px;
 | 
			
		||||
	left: 12px;
 | 
			
		||||
	width: 5px;
 | 
			
		||||
	height: 100% ;
 | 
			
		||||
	border-radius: 999px;
 | 
			
		||||
	pointer-events: none;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.submitInner {
 | 
			
		||||
	padding: 0 12px;
 | 
			
		||||
	line-height: 34px;
 | 
			
		||||
| 
						 | 
				
			
			@ -1296,5 +1308,6 @@ defineExpose({
 | 
			
		|||
	.headerRight {
 | 
			
		||||
		gap: 0;
 | 
			
		||||
	}
 | 
			
		||||
 | 
			
		||||
}
 | 
			
		||||
</style>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue