Troplo/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

improved post form's icons at bottom display

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/components/media_upload/media_upload.vue
View file

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

36
src/components/post_status_form/post_status_form.vue
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 {
color: $fallback--lightText; display: block;
color: var(--lightText, $fallback--lightText); 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 { .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 {