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

@ -32,11 +32,13 @@
<style> <style>
.media-upload { .media-upload {
font-size: 26px;
min-width: 50px;
}
.icon-upload { .icon-upload {
cursor: pointer; cursor: pointer;
} }
label {
display: block;
width: 100%;
}
}
</style> </style>

View file

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