Separate reply form from inside status to make it resistant to hilighting, make the reply button light up when reply window is open.

This commit is contained in:
shpuld 2017-03-09 21:32:54 +02:00
parent 2f0fcd14c9
commit df4dad1804

View file

@ -73,18 +73,21 @@
<div class='status-actions'> <div class='status-actions'>
<div> <div>
<a href="#" v-on:click.prevent="toggleReplying"> <a href="#" v-on:click.prevent="toggleReplying">
<i class='fa icon-reply'></i> <i class="fa icon-reply icon-reply-active" v-if="replying"></i>
<i class="fa icon-reply" v-else></i>
</a> </a>
</div> </div>
<retweet-button :status=status></retweet-button> <retweet-button :status=status></retweet-button>
<favorite-button :status=status></favorite-button> <favorite-button :status=status></favorite-button>
<delete-button :status=status></delete-button> <delete-button :status=status></delete-button>
</div> </div>
<post-status-form v-if="replying" :reply-to="status.id" :attentions="status.attentions" :repliedUser="status.user" v-on:posted="toggleReplying"></post-status-form>
</div> </div>
</div> </div>
</div> </div>
<div class="status base00-background container" v-if="replying">
<div class="reply-left"/>
<post-status-form class="reply-body" :reply-to="status.id" :attentions="status.attentions" :repliedUser="status.user" v-on:posted="toggleReplying"/>
</div>
</template> </template>
</div> </div>
</template> </template>
@ -141,6 +144,10 @@
color: $blue; color: $blue;
} }
.icon-reply-active {
color: $blue;
}
.status .avatar { .status .avatar {
width: 48px; width: 48px;
} }
@ -172,4 +179,14 @@
margin-bottom: 1em; margin-bottom: 1em;
margin-top: 0.2em; margin-top: 0.2em;
} }
.reply-left {
flex: 0;
min-width: 48px;
}
.reply-body {
flex: 1;
}
</style> </style>