forked from AkkomaGang/akkoma-fe
Merge branch 'feature/separate-reply-form-from-inside-status' into 'develop'
Make reply window not part of the inner status. See merge request !60
This commit is contained in:
commit
380adc6966
1 changed files with 19 additions and 3 deletions
|
@ -73,18 +73,20 @@
|
||||||
<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" :class="{'icon-reply-active': replying}"></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 +143,10 @@
|
||||||
color: $blue;
|
color: $blue;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.icon-reply-active {
|
||||||
|
color: $blue;
|
||||||
|
}
|
||||||
|
|
||||||
.status .avatar {
|
.status .avatar {
|
||||||
width: 48px;
|
width: 48px;
|
||||||
}
|
}
|
||||||
|
@ -172,4 +178,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>
|
||||||
|
|
Loading…
Reference in a new issue