refs #118 Remove images before toot
This commit is contained in:
parent
215ca53184
commit
bf750fc165
|
@ -12,17 +12,18 @@
|
||||||
<div class="preview">
|
<div class="preview">
|
||||||
<div class="image-wrapper" v-for="media in attachedMedias" v-on:key="media.id">
|
<div class="image-wrapper" v-for="media in attachedMedias" v-on:key="media.id">
|
||||||
<img :src="media.preview_url" class="preview-image" />
|
<img :src="media.preview_url" class="preview-image" />
|
||||||
<icon class="remove-image" name="times-circle" @click="removeAttachment(media)"></icon>
|
<el-button size="small" type="text" @click="removeAttachment(media)" class="remove-image"><icon name="times-circle"></icon></el-button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div slot="footer" class="dialog-footer">
|
<div slot="footer" class="dialog-footer">
|
||||||
<div class="upload-image">
|
<div class="upload-image">
|
||||||
<el-button size="small" type="text" @click="selectImage"><icon name="camera"></icon></el-button>
|
<el-button size="small" type="text" @click="selectImage"><icon name="camera"></icon></el-button>
|
||||||
<input name="image" type="file" class="image-input" ref="image" @change="updateImage"/>
|
<input name="image" type="file" class="image-input" ref="image" @change="updateImage" :key="attachedImageId"/>
|
||||||
</div>
|
</div>
|
||||||
<span class="text-count">{{ 500 - status.length }}</span>
|
<span class="text-count">{{ 500 - status.length }}</span>
|
||||||
<el-button @click="close">Cancel</el-button>
|
<el-button @click="close">Cancel</el-button>
|
||||||
<el-button type="primary" @click="toot" v-loading="blockSubmit">Toot</el-button>
|
<el-button type="primary" @click="toot" v-loading="blockSubmit">Toot</el-button>
|
||||||
|
<div class="clearfix"></div>
|
||||||
</div>
|
</div>
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
</template>
|
</template>
|
||||||
|
@ -34,7 +35,8 @@ export default {
|
||||||
name: 'new-toot',
|
name: 'new-toot',
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
ctrlPressed: false
|
ctrlPressed: false,
|
||||||
|
attachedImageId: 0
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
@ -73,6 +75,7 @@ export default {
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
close () {
|
close () {
|
||||||
|
this.resetImage()
|
||||||
this.$store.dispatch('TimelineSpace/Modals/NewToot/changeModal', false)
|
this.$store.dispatch('TimelineSpace/Modals/NewToot/changeModal', false)
|
||||||
},
|
},
|
||||||
keydown (e) {
|
keydown (e) {
|
||||||
|
@ -137,6 +140,7 @@ export default {
|
||||||
this.$refs.image.click()
|
this.$refs.image.click()
|
||||||
},
|
},
|
||||||
updateImage (e) {
|
updateImage (e) {
|
||||||
|
this.resetImage()
|
||||||
if (e.target.files.item(0) === null || e.target.files.item(0) === undefined) {
|
if (e.target.files.item(0) === null || e.target.files.item(0) === undefined) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
@ -156,7 +160,10 @@ export default {
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
removeAttachment (media) {
|
removeAttachment (media) {
|
||||||
// TODO:
|
this.$store.commit('TimelineSpace/Modals/NewToot/removeMedia', media)
|
||||||
|
},
|
||||||
|
resetImage () {
|
||||||
|
++this.attachedImageId
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -208,12 +215,14 @@ export default {
|
||||||
|
|
||||||
.preview-image {
|
.preview-image {
|
||||||
width: 60px;
|
width: 60px;
|
||||||
|
margin-right: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.remove-image {
|
.remove-image {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
|
padding: 0;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -225,6 +234,7 @@ export default {
|
||||||
|
|
||||||
.upload-image {
|
.upload-image {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
|
float: left;
|
||||||
|
|
||||||
.image-input {
|
.image-input {
|
||||||
display: none;
|
display: none;
|
||||||
|
|
|
@ -28,6 +28,9 @@ const NewToot = {
|
||||||
},
|
},
|
||||||
clearAttachedMedias (state) {
|
clearAttachedMedias (state) {
|
||||||
state.attachedMedias = []
|
state.attachedMedias = []
|
||||||
|
},
|
||||||
|
removeMedia (state, media) {
|
||||||
|
state.attachedMedias = state.attachedMedias.filter(m => m.id !== media.id)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
actions: {
|
actions: {
|
||||||
|
|
Loading…
Reference in New Issue