Merge branch 'feature/attachment-form-improvements' into 'develop'

Fix bugs related to uploading attachments

See merge request !5
This commit is contained in:
lambadalambda 2016-11-26 06:43:02 -05:00
commit b1f9f6395c
19 changed files with 155 additions and 91 deletions

View file

@ -1,4 +1,5 @@
import nsfwImage from '../../assets/nsfw.jpg'
import fileTypeService from '../../services/file_type/file_type.service.js'
const Attachment = {
props: [
@ -9,25 +10,7 @@ const Attachment = {
data: () => ({ nsfwImage }),
computed: {
type () {
let type = 'unknown'
if (this.attachment.mimetype.match(/text\/html/)) {
type = 'html'
}
if (this.attachment.mimetype.match(/image/)) {
type = 'image'
}
if (this.attachment.mimetype.match(/video\/(webm|mp4)/)) {
type = 'video'
};
if (this.attachment.mimetype.match(/ogg|audio/)) {
type = 'audio'
}
return type
return fileTypeService.fileType(this.attachment.mimetype)
}
},
methods: {
@ -37,4 +20,4 @@ const Attachment = {
}
}
export default Attachment
export default Attachment

View file

@ -4,7 +4,10 @@
<img :key="nsfwImage" :src="nsfwImage"></img>
</a>
<a class="image-attachment" v-if="type === 'image' && !nsfw" :href="attachment.url" target="_blank"><img :src="attachment.url"></img></a>
<a class="image-attachment" v-if="type === 'image' && !nsfw"
:href="attachment.url" target="_blank">
<img :src="attachment.url"></img>
</a>
<video v-if="type === 'video' && !nsfw" :src="attachment.url" controls></video>

View file

@ -15,4 +15,8 @@
font-size: 26px;
flex: 1;
}
.icon-upload {
cursor: pointer;
}
</style>

View file

@ -1,5 +1,6 @@
import statusPoster from '../../services/status_poster/status_poster.service.js'
import MediaUpload from '../media_upload/media_upload.vue'
import fileTypeService from '../../services/file_type/file_type.service.js'
import { reject, map, uniqBy } from 'lodash'
@ -36,6 +37,7 @@ const PostStatusForm = {
}
return {
submitDisabled: false,
newStatus: {
status: statusText,
files: []
@ -58,6 +60,20 @@ const PostStatusForm = {
},
addMediaFile (fileInfo) {
this.newStatus.files.push(fileInfo)
this.enableSubmit()
},
removeMediaFile (fileInfo) {
let index = this.newStatus.files.indexOf(fileInfo)
this.newStatus.files.splice(index, 1)
},
disableSubmit () {
this.submitDisabled = true
},
enableSubmit () {
this.submitDisabled = false
},
type (fileInfo) {
return fileTypeService.fileType(fileInfo.mimetype)
}
}
}

View file

@ -1,17 +1,21 @@
<template>
<div class="post-status-form">
<form v-on:submit.prevent="postStatus(newStatus)">
<form @submit.prevent="postStatus(newStatus)">
<div class="form-group" >
<textarea v-model="newStatus.status" placeholder="Just landed in L.A." rows="3" class="form-control"></textarea>
</div>
<div class="attachments">
<div class="attachment" v-for="file in newStatus.files">
<img class="thumbnail media-upload" :src="file.image"></img>
<img class="thumbnail media-upload" :src="file.image" v-if="type(file) === 'image'"></img>
<video v-if="type(file) === 'video'" :src="file.image" controls></video>
<audio v-if="type(file) === 'audio'" :src="file.image" controls></audio>
<a v-if="type(file) === 'unknown'" :href="file.image">{{file.url}}</a>
<i class="fa icon-cancel" @click="removeMediaFile(file)"></i>
</div>
</div>
<div class='form-bottom'>
<media-upload v-on:uploaded="addMediaFile"></media-upload>
<button type="submit" class="btn btn-default" >Submit</button>
<media-upload @uploading="disableSubmit" @uploaded="addMediaFile" @upload-failed="enableSubmit"></media-upload>
<button :disabled="submitDisabled" type="submit" class="btn btn-default">Submit</button>
</div>
</form>
</div>
@ -45,6 +49,18 @@
flex-direction: column;
padding: 0.5em;
}
.btn {
cursor: pointer;
}
.btn[disabled] {
cursor: not-allowed;
}
.icon-cancel {
cursor: pointer;
}
}
</style>

View file

@ -0,0 +1,27 @@
const fileType = (typeString) => {
let type = 'unknown'
if (typeString.match(/text\/html/)) {
type = 'html'
}
if (typeString.match(/image/)) {
type = 'image'
}
if (typeString.match(/video\/(webm|mp4)/)) {
type = 'video'
}
if (typeString.match(/audio|ogg/)) {
type = 'audio'
}
return type
}
const fileTypeService = {
fileType
}
export default fileTypeService

View file

@ -19,7 +19,8 @@ const uploadMedia = ({ store, formData }) => {
return {
id: xml.getElementsByTagName('media_id')[0].textContent,
url: xml.getElementsByTagName('media_url')[0].textContent,
image: xml.getElementsByTagName('atom:link')[0].getAttribute('href')
image: xml.getElementsByTagName('atom:link')[0].getAttribute('href'),
mimetype: xml.getElementsByTagName('atom:link')[0].getAttribute('type')
}
})
}

View file

@ -7,11 +7,29 @@
"ascent": 850,
"glyphs": [
{
"uid": "09feb4465d9bd1364f4e301c9ddbaa92",
"css": "retweet",
"uid": "9bd60140934a1eb9236fd7a8ab1ff6ba",
"css": "spin4",
"code": 59444,
"src": "fontelico"
},
{
"uid": "5211af474d3a9848f67f945e2ccaf143",
"css": "cancel",
"code": 59392,
"src": "fontawesome"
},
{
"uid": "eeec3208c90b7b48e804919d0d2d4a41",
"css": "upload",
"code": 59393,
"src": "fontawesome"
},
{
"uid": "2a6740fc2f9d0edea54205963f662594",
"css": "spin3",
"code": 59442,
"src": "fontelico"
},
{
"uid": "c6be5a58ee4e63a5ec399c2b0d15cf2c",
"css": "reply",
@ -21,32 +39,20 @@
{
"uid": "474656633f79ea2f1dad59ff63f6bf07",
"css": "star",
"code": 59393,
"code": 59394,
"src": "fontawesome"
},
{
"uid": "d17030afaecc1e1c22349b99f3c4992a",
"css": "star-empty",
"code": 59394,
"src": "fontawesome"
},
{
"uid": "eeec3208c90b7b48e804919d0d2d4a41",
"css": "upload",
"code": 59395,
"src": "fontawesome"
},
{
"uid": "9bd60140934a1eb9236fd7a8ab1ff6ba",
"css": "spin4",
"code": 59444,
"src": "fontelico"
},
{
"uid": "2a6740fc2f9d0edea54205963f662594",
"css": "spin3",
"code": 59442,
"src": "fontelico"
"uid": "09feb4465d9bd1364f4e301c9ddbaa92",
"css": "retweet",
"code": 59396,
"src": "fontawesome"
}
]
}

View file

@ -1,8 +1,9 @@
.icon-retweet:before { content: '\e800'; } /* '' */
.icon-star:before { content: '\e801'; } /* '' */
.icon-star-empty:before { content: '\e802'; } /* '' */
.icon-upload:before { content: '\e803'; } /* '' */
.icon-cancel:before { content: '\e800'; } /* '' */
.icon-upload:before { content: '\e801'; } /* '' */
.icon-star:before { content: '\e802'; } /* '' */
.icon-star-empty:before { content: '\e803'; } /* '' */
.icon-retweet:before { content: '\e804'; } /* '' */
.icon-spin3:before { content: '\e832'; } /* '' */
.icon-spin4:before { content: '\e834'; } /* '' */
.icon-reply:before { content: '\f112'; } /* '' */

File diff suppressed because one or more lines are too long

View file

@ -1,8 +1,9 @@
.icon-retweet { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe800;&nbsp;'); }
.icon-star { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe801;&nbsp;'); }
.icon-star-empty { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe802;&nbsp;'); }
.icon-upload { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe803;&nbsp;'); }
.icon-cancel { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe800;&nbsp;'); }
.icon-upload { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe801;&nbsp;'); }
.icon-star { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe802;&nbsp;'); }
.icon-star-empty { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe803;&nbsp;'); }
.icon-retweet { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe804;&nbsp;'); }
.icon-spin3 { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe832;&nbsp;'); }
.icon-spin4 { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe834;&nbsp;'); }
.icon-reply { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf112;&nbsp;'); }

View file

@ -10,10 +10,11 @@
/* font-size: 120%; */
}
.icon-retweet { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe800;&nbsp;'); }
.icon-star { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe801;&nbsp;'); }
.icon-star-empty { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe802;&nbsp;'); }
.icon-upload { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe803;&nbsp;'); }
.icon-cancel { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe800;&nbsp;'); }
.icon-upload { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe801;&nbsp;'); }
.icon-star { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe802;&nbsp;'); }
.icon-star-empty { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe803;&nbsp;'); }
.icon-retweet { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe804;&nbsp;'); }
.icon-spin3 { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe832;&nbsp;'); }
.icon-spin4 { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe834;&nbsp;'); }
.icon-reply { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf112;&nbsp;'); }

View file

@ -1,11 +1,11 @@
@font-face {
font-family: 'fontello';
src: url('../font/fontello.eot?84025004');
src: url('../font/fontello.eot?84025004#iefix') format('embedded-opentype'),
url('../font/fontello.woff2?84025004') format('woff2'),
url('../font/fontello.woff?84025004') format('woff'),
url('../font/fontello.ttf?84025004') format('truetype'),
url('../font/fontello.svg?84025004#fontello') format('svg');
src: url('../font/fontello.eot?49728550');
src: url('../font/fontello.eot?49728550#iefix') format('embedded-opentype'),
url('../font/fontello.woff2?49728550') format('woff2'),
url('../font/fontello.woff?49728550') format('woff'),
url('../font/fontello.ttf?49728550') format('truetype'),
url('../font/fontello.svg?49728550#fontello') format('svg');
font-weight: normal;
font-style: normal;
}
@ -15,7 +15,7 @@
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: 'fontello';
src: url('../font/fontello.svg?84025004#fontello') format('svg');
src: url('../font/fontello.svg?49728550#fontello') format('svg');
}
}
*/
@ -55,10 +55,11 @@
/* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}
.icon-retweet:before { content: '\e800'; } /* '' */
.icon-star:before { content: '\e801'; } /* '' */
.icon-star-empty:before { content: '\e802'; } /* '' */
.icon-upload:before { content: '\e803'; } /* '' */
.icon-cancel:before { content: '\e800'; } /* '' */
.icon-upload:before { content: '\e801'; } /* '' */
.icon-star:before { content: '\e802'; } /* '' */
.icon-star-empty:before { content: '\e803'; } /* '' */
.icon-retweet:before { content: '\e804'; } /* '' */
.icon-spin3:before { content: '\e832'; } /* '' */
.icon-spin4:before { content: '\e834'; } /* '' */
.icon-reply:before { content: '\f112'; } /* '' */

View file

@ -229,11 +229,11 @@ body {
}
@font-face {
font-family: 'fontello';
src: url('./font/fontello.eot?69028437');
src: url('./font/fontello.eot?69028437#iefix') format('embedded-opentype'),
url('./font/fontello.woff?69028437') format('woff'),
url('./font/fontello.ttf?69028437') format('truetype'),
url('./font/fontello.svg?69028437#fontello') format('svg');
src: url('./font/fontello.eot?17074388');
src: url('./font/fontello.eot?17074388#iefix') format('embedded-opentype'),
url('./font/fontello.woff?17074388') format('woff'),
url('./font/fontello.ttf?17074388') format('truetype'),
url('./font/fontello.svg?17074388#fontello') format('svg');
font-weight: normal;
font-style: normal;
}
@ -301,12 +301,13 @@ body {
</div>
<div id="icons" class="container">
<div class="row">
<div title="Code: 0xe800" class="the-icons span3"><i class="demo-icon icon-retweet">&#xe800;</i> <span class="i-name">icon-retweet</span><span class="i-code">0xe800</span></div>
<div title="Code: 0xe801" class="the-icons span3"><i class="demo-icon icon-star">&#xe801;</i> <span class="i-name">icon-star</span><span class="i-code">0xe801</span></div>
<div title="Code: 0xe802" class="the-icons span3"><i class="demo-icon icon-star-empty">&#xe802;</i> <span class="i-name">icon-star-empty</span><span class="i-code">0xe802</span></div>
<div title="Code: 0xe803" class="the-icons span3"><i class="demo-icon icon-upload">&#xe803;</i> <span class="i-name">icon-upload</span><span class="i-code">0xe803</span></div>
<div title="Code: 0xe800" class="the-icons span3"><i class="demo-icon icon-cancel">&#xe800;</i> <span class="i-name">icon-cancel</span><span class="i-code">0xe800</span></div>
<div title="Code: 0xe801" class="the-icons span3"><i class="demo-icon icon-upload">&#xe801;</i> <span class="i-name">icon-upload</span><span class="i-code">0xe801</span></div>
<div title="Code: 0xe802" class="the-icons span3"><i class="demo-icon icon-star">&#xe802;</i> <span class="i-name">icon-star</span><span class="i-code">0xe802</span></div>
<div title="Code: 0xe803" class="the-icons span3"><i class="demo-icon icon-star-empty">&#xe803;</i> <span class="i-name">icon-star-empty</span><span class="i-code">0xe803</span></div>
</div>
<div class="row">
<div title="Code: 0xe804" class="the-icons span3"><i class="demo-icon icon-retweet">&#xe804;</i> <span class="i-name">icon-retweet</span><span class="i-code">0xe804</span></div>
<div title="Code: 0xe832" class="the-icons span3"><i class="demo-icon icon-spin3 animate-spin">&#xe832;</i> <span class="i-name">icon-spin3</span><span class="i-code">0xe832</span></div>
<div title="Code: 0xe834" class="the-icons span3"><i class="demo-icon icon-spin4 animate-spin">&#xe834;</i> <span class="i-name">icon-spin4</span><span class="i-code">0xe834</span></div>
<div title="Code: 0xf112" class="the-icons span3"><i class="demo-icon icon-reply">&#xf112;</i> <span class="i-name">icon-reply</span><span class="i-code">0xf112</span></div>

Binary file not shown.

View file

@ -6,13 +6,15 @@
<font id="fontello" horiz-adv-x="1000" >
<font-face font-family="fontello" font-weight="400" font-stretch="normal" units-per-em="1000" ascent="850" descent="-150" />
<missing-glyph horiz-adv-x="1000" />
<glyph glyph-name="retweet" unicode="&#xe800;" d="M714 11q0-7-5-13t-13-5h-535q-5 0-8 1t-5 4-3 4-2 7 0 6v335h-107q-15 0-25 11t-11 25q0 13 8 23l179 214q11 12 27 12t28-12l178-214q9-10 9-23 0-15-11-25t-25-11h-107v-214h321q9 0 14-6l89-108q4-5 4-11z m357 232q0-13-8-23l-178-214q-12-13-28-13t-27 13l-179 214q-8 10-8 23 0 14 11 25t25 11h107v214h-322q-9 0-14 7l-89 107q-4 5-4 11 0 7 5 12t13 6h536q4 0 7-1t5-4 3-5 2-6 1-7v-334h107q14 0 25-11t10-25z" horiz-adv-x="1071.4" />
<glyph glyph-name="cancel" unicode="&#xe800;" d="M724 112q0-22-15-38l-76-76q-16-15-38-15t-38 15l-164 165-164-165q-16-15-38-15t-38 15l-76 76q-16 16-16 38t16 38l164 164-164 164q-16 16-16 38t16 38l76 76q16 16 38 16t38-16l164-164 164 164q16 16 38 16t38-16l76-76q15-15 15-38t-15-38l-164-164 164-164q15-15 15-38z" horiz-adv-x="785.7" />
<glyph glyph-name="star" unicode="&#xe801;" d="M929 489q0-12-15-27l-202-197 48-279q0-4 0-12 0-11-6-19t-17-9q-10 0-22 7l-251 132-250-132q-12-7-23-7-11 0-17 9t-6 19q0 4 1 12l48 279-203 197q-14 15-14 27 0 21 31 26l280 40 126 254q11 23 27 23t28-23l125-254 280-40q32-5 32-26z" horiz-adv-x="928.6" />
<glyph glyph-name="upload" unicode="&#xe801;" d="M714 29q0 14-10 25t-25 10-25-10-11-25 11-25 25-11 25 11 10 25z m143 0q0 14-10 25t-26 10-25-10-10-25 10-25 25-11 26 11 10 25z m72 125v-179q0-22-16-38t-38-16h-821q-23 0-38 16t-16 38v179q0 22 16 38t38 15h238q12-31 39-51t62-20h143q34 0 61 20t40 51h238q22 0 38-15t16-38z m-182 361q-9-22-33-22h-143v-250q0-15-10-25t-25-11h-143q-15 0-25 11t-11 25v250h-143q-23 0-33 22-9 22 8 39l250 250q10 10 25 10t25-10l250-250q18-17 8-39z" horiz-adv-x="928.6" />
<glyph glyph-name="star-empty" unicode="&#xe802;" d="M635 290l170 166-235 34-106 213-105-213-236-34 171-166-41-235 211 111 211-111z m294 199q0-12-15-27l-202-197 48-279q0-4 0-12 0-28-23-28-10 0-22 7l-251 132-250-132q-12-7-23-7-11 0-17 9t-6 19q0 4 1 12l48 279-203 197q-14 15-14 27 0 21 31 26l280 40 126 254q11 23 27 23t28-23l125-254 280-40q32-5 32-26z" horiz-adv-x="928.6" />
<glyph glyph-name="star" unicode="&#xe802;" d="M929 489q0-12-15-27l-202-197 48-279q0-4 0-12 0-11-6-19t-17-9q-10 0-22 7l-251 132-250-132q-12-7-23-7-11 0-17 9t-6 19q0 4 1 12l48 279-203 197q-14 15-14 27 0 21 31 26l280 40 126 254q11 23 27 23t28-23l125-254 280-40q32-5 32-26z" horiz-adv-x="928.6" />
<glyph glyph-name="upload" unicode="&#xe803;" d="M714 29q0 14-10 25t-25 10-25-10-11-25 11-25 25-11 25 11 10 25z m143 0q0 14-10 25t-26 10-25-10-10-25 10-25 25-11 26 11 10 25z m72 125v-179q0-22-16-38t-38-16h-821q-23 0-38 16t-16 38v179q0 22 16 38t38 15h238q12-31 39-51t62-20h143q34 0 61 20t40 51h238q22 0 38-15t16-38z m-182 361q-9-22-33-22h-143v-250q0-15-10-25t-25-11h-143q-15 0-25 11t-11 25v250h-143q-23 0-33 22-9 22 8 39l250 250q10 10 25 10t25-10l250-250q18-17 8-39z" horiz-adv-x="928.6" />
<glyph glyph-name="star-empty" unicode="&#xe803;" d="M635 290l170 166-235 34-106 213-105-213-236-34 171-166-41-235 211 111 211-111z m294 199q0-12-15-27l-202-197 48-279q0-4 0-12 0-28-23-28-10 0-22 7l-251 132-250-132q-12-7-23-7-11 0-17 9t-6 19q0 4 1 12l48 279-203 197q-14 15-14 27 0 21 31 26l280 40 126 254q11 23 27 23t28-23l125-254 280-40q32-5 32-26z" horiz-adv-x="928.6" />
<glyph glyph-name="retweet" unicode="&#xe804;" d="M714 11q0-7-5-13t-13-5h-535q-5 0-8 1t-5 4-3 4-2 7 0 6v335h-107q-15 0-25 11t-11 25q0 13 8 23l179 214q11 12 27 12t28-12l178-214q9-10 9-23 0-15-11-25t-25-11h-107v-214h321q9 0 14-6l89-108q4-5 4-11z m357 232q0-13-8-23l-178-214q-12-13-28-13t-27 13l-179 214q-8 10-8 23 0 14 11 25t25 11h107v214h-322q-9 0-14 7l-89 107q-4 5-4 11 0 7 5 12t13 6h536q4 0 7-1t5-4 3-5 2-6 1-7v-334h107q14 0 25-11t10-25z" horiz-adv-x="1071.4" />
<glyph glyph-name="spin3" unicode="&#xe832;" d="M494 850c-266 0-483-210-494-472-1-19 13-20 13-20l84 0c16 0 19 10 19 18 10 199 176 358 378 358 107 0 205-45 273-118l-58-57c-11-12-11-27 5-31l247-50c21-5 46 11 37 44l-58 227c-2 9-16 22-29 13l-65-60c-89 91-214 148-352 148z m409-508c-16 0-19-10-19-18-10-199-176-358-377-358-108 0-205 45-274 118l59 57c10 12 10 27-5 31l-248 50c-21 5-46-11-37-44l58-227c2-9 16-22 30-13l64 60c89-91 214-148 353-148 265 0 482 210 493 473 1 18-13 19-13 19l-84 0z" horiz-adv-x="1000" />

Before

Width:  |  Height:  |  Size: 3.3 KiB

After

Width:  |  Height:  |  Size: 3.6 KiB

Binary file not shown.

Binary file not shown.

Binary file not shown.