diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/attachment/attachment.js | 16 | ||||
| -rw-r--r-- | src/components/attachment/attachment.vue | 19 | ||||
| -rw-r--r-- | src/components/status/status.js | 10 | ||||
| -rw-r--r-- | src/components/status/status.vue | 16 | ||||
| -rw-r--r-- | src/components/timeline/timeline.vue | 7 | ||||
| -rw-r--r-- | src/components/user_profile/user_profile.vue | 7 |
6 files changed, 49 insertions, 26 deletions
diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js index 9f751863..c88497a2 100644 --- a/src/components/attachment/attachment.js +++ b/src/components/attachment/attachment.js @@ -1,4 +1,4 @@ -import nsfwImage from '../../assets/nsfw.jpg' +import nsfwImage from '../../assets/nsfw.png' import fileTypeService from '../../services/file_type/file_type.service.js' const Attachment = { @@ -7,17 +7,23 @@ const Attachment = { 'nsfw', 'statusId' ], - data: () => ({ nsfwImage }), + data: () => ({ + nsfwImage, + showHidden: false + }), computed: { type () { return fileTypeService.fileType(this.attachment.mimetype) + }, + hidden () { + return this.nsfw && !this.showHidden } }, methods: { - showNsfw () { - this.$store.commit('setNsfw', { id: this.statusId, nsfw: false }) + toggleHidden () { + this.showHidden = !this.showHidden } } } -export default Attachment
\ No newline at end of file +export default Attachment diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue index 1e49cbeb..6bc0356a 100644 --- a/src/components/attachment/attachment.vue +++ b/src/components/attachment/attachment.vue @@ -1,15 +1,18 @@ <template> <div class="attachment"> - <a class="image-attachment" v-if="nsfw" v-on:click.prevent="showNsfw()"> + <a class="image-attachment" v-if="hidden" v-on:click.prevent="toggleHidden()"> <img :key="nsfwImage" :src="nsfwImage"></img> </a> + <div class="hider" v-if="nsfw && !hidden"> + <a href="#" @click.prevent="toggleHidden()">Hide</a> + </div> - <a class="image-attachment" v-if="type === 'image' && !nsfw" + <a class="image-attachment" v-if="type === 'image' && !hidden" :href="attachment.url" target="_blank"> <img :src="attachment.url"></img> </a> - <video v-if="type === 'video' && !nsfw" :src="attachment.url" controls></video> + <video v-if="type === 'video' && !hidden" :src="attachment.url" controls></video> <audio v-if="type === 'audio'" :src="attachment.url" controls></audio> @@ -34,12 +37,20 @@ display: flex; flex-wrap: wrap; .attachment { - flex: 1 0 30%; display: flex; margin: 0.2em; align-self: flex-start; + .hider { + position: absolute; + margin: 10px; + padding: 5px; + background: rgba(230,230,230,0.6); + border-radius: 0.5em; + font-weight: bold; + } + video { height: 100%; border: 1px solid; diff --git a/src/components/status/status.js b/src/components/status/status.js index 0bf2ecde..8b2561cf 100644 --- a/src/components/status/status.js +++ b/src/components/status/status.js @@ -20,7 +20,9 @@ const Status = { }, loggedIn () { return !!this.$store.state.users.currentUser - } + }, + deleted () { return this.statusoid.deleted }, + canDelete () { return this.statusoid.user.rights.delete_others_notice || this.statusoid.user.id == this.$store.state.users.currentUser.id } }, components: { Attachment, @@ -31,6 +33,12 @@ const Status = { methods: { toggleReplying () { this.replying = !this.replying + }, + deleteStatus () { + const confirmed = confirm('Do you really want to delete this status?') + if (confirmed) { + this.$store.dispatch('deleteStatus', { id: this.status.id }) + } } } } diff --git a/src/components/status/status.vue b/src/components/status/status.vue index 86632876..6b9bca5b 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -1,8 +1,8 @@ <template> - <div class="status-el"> + <div class="status-el" v-if="!status.deleted"> <div v-if="retweet" class="media container retweet-info"> <div class="media-left"> - <i class='fa icon-retweet'></i> + <i class='fa icon-retweet retweeted'></i> </div> <div class="media-body"> Retweeted by {{retweeter}} @@ -52,6 +52,11 @@ </div> <retweet-button :status=status></retweet-button> <favorite-button :status=status></favorite-button> + <div v-if="canDelete"> + <a href="#" v-on:click.prevent="deleteStatus"> + <i class='fa icon-cancel delete-status'></i> + </a> + </div> </div> <post-status-form v-if="replying" :reply-to="status.id" :attentions="status.attentions" :repliedUser="status.user" v-on:posted="toggleReplying"></post-status-form> @@ -125,4 +130,11 @@ .status-el:last-child .status { border: none } + + .icon-cancel,.delete-status { + cursor: pointer; + &:hover { + color: $red; + } + } </style> diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue index fef96e4e..7de3ffca 100644 --- a/src/components/timeline/timeline.vue +++ b/src/components/timeline/timeline.vue @@ -18,10 +18,3 @@ </div> </template> <script src="./timeline.js"></script> - -<style> - .timeline.panel { - flex: 2; - flex-basis: 500px; - } -</style> diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue index 767982c5..eaa5396d 100644 --- a/src/components/user_profile/user_profile.vue +++ b/src/components/user_profile/user_profile.vue @@ -5,10 +5,3 @@ </template> <script src="./user_profile.js"></script> - -<style> - .user-profile { - flex: 2; - flex-basis: 500px; - } -</style> |