moon
/
pleroma-fe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
1 changed files with 20 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/status/status.vue
View File

@ -73,18 +73,21 @@
<div class='status-actions'>
<div>
<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>
</div>
<retweet-button :status=status></retweet-button>
<favorite-button :status=status></favorite-button>
<delete-button :status=status></delete-button>
</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 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>
</div>
</template>
@ -141,6 +144,10 @@
color: $blue;
}
.icon-reply-active {
color: $blue;
}
.status .avatar {
width: 48px;
}
@ -172,4 +179,14 @@
margin-bottom: 1em;
margin-top: 0.2em;
}
.reply-left {
flex: 0;
min-width: 48px;
}
.reply-body {
flex: 1;
}
</style>