improved post form's icons at bottom display

This commit is contained in:
Henry Jameson 2019-09-15 12:28:52 +03:00
parent e366adbb6c
commit a1ed1b9b53
2 changed files with 38 additions and 14 deletions

View file

@ -31,12 +31,14 @@
<script src="./media_upload.js" ></script>
<style>
.media-upload {
font-size: 26px;
min-width: 50px;
}
.media-upload {
.icon-upload {
cursor: pointer;
}
label {
display: block;
width: 100%;
}
}
</style>

View file

@ -159,6 +159,7 @@
<div class="form-bottom-left">
<media-upload
ref="mediaUpload"
class="media-upload-icon"
:drop-files="dropFiles"
@uploading="disableSubmit"
@uploaded="addMediaFile"
@ -176,11 +177,11 @@
<div
v-if="pollsAvailable"
class="poll-icon"
:class="{ selected: pollFormVisible }"
>
<i
:title="$t('polls.add_poll')"
class="icon-chart-bar btn btn-default"
:class="pollFormVisible && 'selected'"
@click="togglePollForm"
/>
</div>
@ -316,6 +317,8 @@
.form-bottom-left {
display: flex;
flex: 1;
padding-right: 7px;
margin-right: 7px;
}
.text-format {
@ -325,19 +328,38 @@
}
}
.poll-icon, .emoji-icon {
.media-upload-icon, .poll-icon, .emoji-icon {
font-size: 26px;
flex: 1;
.selected {
i {
display: block;
width: 100%;
}
&.selected, &:hover {
// needs to be specific to override icon default color
i, label {
color: $fallback--lightText;
color: var(--lightText, $fallback--lightText);
}
}
}
// Order is not necessary but a good indicator
.media-upload-icon {
order: 1;
text-align: left;
}
.emoji-icon {
flex: 0;
min-width: 50px;
order: 2;
text-align: center;
}
.poll-icon {
order: 3;
text-align: right;
}
.icon-chart-bar {