aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--src/components/conversation/conversation.vue4
-rw-r--r--src/components/delete_button/delete_button.js4
-rw-r--r--src/components/media_upload/media_upload.js16
-rw-r--r--src/components/media_upload/media_upload.vue2
-rw-r--r--src/components/notifications/notifications.js4
-rw-r--r--src/components/notifications/notifications.scss62
-rw-r--r--src/components/notifications/notifications.vue34
-rw-r--r--src/components/post_status_form/post_status_form.js5
-rw-r--r--src/components/post_status_form/post_status_form.vue2
-rw-r--r--src/components/settings/settings.js10
-rw-r--r--src/components/settings/settings.vue5
-rw-r--r--src/components/status/status.js1
-rw-r--r--src/components/status/status.vue12
-rw-r--r--src/main.js2
-rw-r--r--src/modules/config.js3
15 files changed, 104 insertions, 62 deletions
diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index 9675e69f..b1aff884 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -1,5 +1,5 @@
<template>
- <div class="timeline panel panel-default base00-background">
+ <div class="timeline panel panel-default base00-background conversation">
<div class="panel-heading base01-background base04">
Conversation
<div v-if="collapsable">
@@ -8,7 +8,7 @@
</div>
<div class="panel-body">
<div class="timeline">
- <status v-for="status in conversation" :key="status.id" v-bind:statusoid="status":expandable='false'></status>
+ <status v-for="status in conversation" :key="status.id" v-bind:statusoid="status" :expandable='false'></status>
</div>
</div>
</div>
diff --git a/src/components/delete_button/delete_button.js b/src/components/delete_button/delete_button.js
index 726509d0..77da1b87 100644
--- a/src/components/delete_button/delete_button.js
+++ b/src/components/delete_button/delete_button.js
@@ -2,7 +2,7 @@ const DeleteButton = {
props: [ 'status' ],
methods: {
deleteStatus () {
- const confirmed = confirm('Do you really want to delete this status?')
+ const confirmed = window.confirm('Do you really want to delete this status?')
if (confirmed) {
this.$store.dispatch('deleteStatus', { id: this.status.id })
}
@@ -10,7 +10,7 @@ const DeleteButton = {
},
computed: {
currentUser () { return this.$store.state.users.currentUser },
- canDelete () { return this.currentUser.rights.delete_others_notice || this.status.user.id == this.currentUser.id }
+ canDelete () { return this.currentUser.rights.delete_others_notice || this.status.user.id === this.currentUser.id }
}
}
diff --git a/src/components/media_upload/media_upload.js b/src/components/media_upload/media_upload.js
index 746970aa..8b4e7ad4 100644
--- a/src/components/media_upload/media_upload.js
+++ b/src/components/media_upload/media_upload.js
@@ -29,10 +29,24 @@ const mediaUpload = {
.then((fileData) => {
self.$emit('uploaded', fileData)
self.uploading = false
- }, (error) => {
+ }, (error) => { // eslint-disable-line handle-callback-err
self.$emit('upload-failed')
self.uploading = false
})
+ },
+ fileDrop (e) {
+ if (e.dataTransfer.files.length > 0) {
+ e.preventDefault() // allow dropping text like before
+ this.uploadFile(e.dataTransfer.files[0])
+ }
+ },
+ fileDrag (e) {
+ let types = e.dataTransfer.types
+ if (types.contains('Files')) {
+ e.dataTransfer.dropEffect = 'copy'
+ } else {
+ e.dataTransfer.dropEffect = 'none'
+ }
}
},
props: [
diff --git a/src/components/media_upload/media_upload.vue b/src/components/media_upload/media_upload.vue
index 3302db37..b839067b 100644
--- a/src/components/media_upload/media_upload.vue
+++ b/src/components/media_upload/media_upload.vue
@@ -1,5 +1,5 @@
<template>
- <div class="media-upload">
+ <div class="media-upload" @drop.prevent @dragover.prevent="fileDrag" @drop="fileDrop">
<label class="btn btn-default">
<i class="fa icon-spin4 animate-spin" v-if="uploading"></i>
<i class="fa icon-upload" v-if="!uploading"></i>
diff --git a/src/components/notifications/notifications.js b/src/components/notifications/notifications.js
index c8d5e212..390ade6a 100644
--- a/src/components/notifications/notifications.js
+++ b/src/components/notifications/notifications.js
@@ -1,4 +1,5 @@
import { sortBy, take, filter } from 'lodash'
+import Status from '../status/status.vue'
const Notifications = {
data () {
@@ -6,6 +7,9 @@ const Notifications = {
visibleNotificationCount: 10
}
},
+ components: {
+ Status
+ },
computed: {
notifications () {
return this.$store.state.statuses.notifications
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index 517afeaa..65efb103 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -1,42 +1,44 @@
@import '../../_variables.scss';
.notification {
- padding: 0.4em 0 0 0.7em;
- display: flex;
border-bottom: 1px solid silver;
- .text {
- min-width: 0px;
- word-wrap: break-word;
- line-height:18px;
+ .notification-base {
+ padding: 0.4em 0 0 0.7em;
+ display: flex;
+ .avatar {
+ padding-top: 0.3em;
+ width: 32px;
+ height: 32px;
+ border-radius: 50%;
+ }
- .icon-retweet {
- color: $green;
- }
+ .text {
+ min-width: 0px;
+ word-wrap: break-word;
+ line-height:18px;
- .icon-reply {
- color: $blue;
- }
+ .icon-retweet {
+ color: $green;
+ }
- h1 {
- margin: 0 0 0.3em;
- padding: 0;
- font-size: 1em;
- line-height:20px;
- }
+ .icon-reply {
+ color: $blue;
+ }
- padding: 0.3em 0.8em 0.5em;
- p {
- margin: 0;
- margin-top: 0;
- margin-bottom: 0.3em;
- }
- }
+ h1 {
+ margin: 0 0 0.3em;
+ padding: 0;
+ font-size: 1em;
+ line-height:20px;
+ }
- .avatar {
- padding-top: 0.3em;
- width: 32px;
- height: 32px;
- border-radius: 50%;
+ padding: 0.3em 0.8em 0.5em;
+ p {
+ margin: 0;
+ margin-top: 0;
+ margin-bottom: 0.3em;
+ }
+ }
}
&:last-child {
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index 785cc019..c14abf27 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -4,24 +4,26 @@
<div class="panel-heading base01-background base04">Notifications ({{unseenCount}}) <button @click.prevent="markAsSeen">Read!</button></div>
<div class="panel-body">
<div v-for="notification in visibleNotifications" class="notification" :class='{"base01-background": notification.seen}'>
- <a :href="notification.action.user.statusnet_profile_url">
- <img class='avatar' :src="notification.action.user.profile_image_url_original">
- </a>
- <div class='text'>
- <timeago :since="notification.action.created_at" :auto-update="240"></timeago>
- <div v-if="notification.type === 'favorite'">
- <h1>{{ notification.action.user.name }}<br><i class="fa icon-star"></i> favorited your <router-link :to="{ name: 'conversation', params: { id: notification.status.id } }">status</h1>
- <p>{{ notification.status.text }}</p>
- </div>
- <div v-if="notification.type === 'repeat'">
- <h1>{{ notification.action.user.name }}<br><i class="fa icon-retweet"></i> repeated your <router-link :to="{ name: 'conversation', params: { id: notification.status.id } }">status</h1>
- <p>{{ notification.status.text }}</p>
- </div>
- <div v-if="notification.type === 'mention'">
- <h1>{{ notification.action.user.name }}<br><i class="fa icon-reply"></i> <router-link :to="{ name: 'conversation', params: { id: notification.status.id } }">mentioned</router-link> you</h1>
- <p>{{ notification.status.text }}</p>
+ <div class="notification-base">
+ <a :href="notification.action.user.statusnet_profile_url">
+ <img class='avatar' :src="notification.action.user.profile_image_url_original">
+ </a>
+ <div class='text'>
+ <timeago :since="notification.action.created_at" :auto-update="240"></timeago>
+ <div v-if="notification.type === 'favorite'">
+ <h1>{{ notification.action.user.name }}<br><i class="fa icon-star"></i> favorited your <router-link :to="{ name: 'conversation', params: { id: notification.status.id } }">status</h1>
+ <p>{{ notification.status.text }}</p>
+ </div>
+ <div v-if="notification.type === 'repeat'">
+ <h1>{{ notification.action.user.name }}<br><i class="fa icon-retweet"></i> repeated your <router-link :to="{ name: 'conversation', params: { id: notification.status.id } }">status</h1>
+ <p>{{ notification.status.text }}</p>
+ </div>
+ <div v-if="notification.type === 'mention'">
+ <h1>{{ notification.action.user.name }}<br><i class="fa icon-reply"></i> <router-link :to="{ name: 'conversation', params: { id: notification.status.id } }">mentioned</router-link> you</h1>
+ </div>
</div>
</div>
+ <status v-if="notification.type === 'mention'" :statusoid="notification.action" :expandable="false"></status>
</div>
</div>
</div>
diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index d55525bb..01aeeb68 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -49,7 +49,7 @@ const defaultCollection = {
menuContainer: document.body,
// column to search against in the object (accepts function or string)
- lookup: ({name, screen_name}) => `${name} (@${screen_name})`,
+ lookup: ({name, screen_name}) => `${name} (@${screen_name})`, // eslint-disable-line camelcase
// column that contains the content to insert by default
fillAttr: 'screen_name',
@@ -148,6 +148,9 @@ const PostStatusForm = {
e.preventDefault() // allow dropping text like before
this.dropFiles = e.dataTransfer.files
}
+ },
+ fileDrag (e) {
+ e.dataTransfer.dropEffect = 'copy'
}
}
}
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index eceef4a2..d345ec13 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -2,7 +2,7 @@
<div class="post-status-form">
<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" @keyup.meta.enter="postStatus(newStatus)" @keyup.ctrl.enter="postStatus(newStatus)" @drop="fileDrop"></textarea>
+ <textarea v-model="newStatus.status" placeholder="Just landed in L.A." rows="3" class="form-control" @keyup.meta.enter="postStatus(newStatus)" @keyup.ctrl.enter="postStatus(newStatus)" @drop="fileDrop" @dragover.prevent="fileDrag"></textarea>
</div>
<div class="attachments">
<div class="attachment" v-for="file in newStatus.files">
diff --git a/src/components/settings/settings.js b/src/components/settings/settings.js
index f979e7ab..61236af2 100644
--- a/src/components/settings/settings.js
+++ b/src/components/settings/settings.js
@@ -1,8 +1,18 @@
import StyleSwitcher from '../style_switcher/style_switcher.vue'
const settings = {
+ data () {
+ return {
+ hideAttachmentsLocal: this.$store.state.config.hideAttachments
+ }
+ },
components: {
StyleSwitcher
+ },
+ watch: {
+ hideAttachmentsLocal (value) {
+ this.$store.dispatch('setOption', { name: 'hideAttachments', value })
+ }
}
}
diff --git a/src/components/settings/settings.vue b/src/components/settings/settings.vue
index 57aafac8..f2f83953 100644
--- a/src/components/settings/settings.vue
+++ b/src/components/settings/settings.vue
@@ -8,6 +8,11 @@
<h2>Theme</h2>
<style-switcher></style-switcher>
</div>
+ <div class="setting-item">
+ <h2>Attachments</h2>
+ <input type="checkbox" id="hideAttachments" v-model="hideAttachmentsLocal">
+ <label for="hideAttachments">Hide Attachments</label>
+ </div>
</div>
</div>
</template>
diff --git a/src/components/status/status.js b/src/components/status/status.js
index 46add8aa..22292ffa 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -17,6 +17,7 @@ const Status = {
userExpanded: false
}),
computed: {
+ hideAttachments () { return this.$store.state.config.hideAttachments },
retweet () { return !!this.statusoid.retweeted_status },
retweeter () { return this.statusoid.user.name },
status () {
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index a97e6b75..15efc558 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -1,5 +1,5 @@
<template>
- <div class="status-el base00-background" v-if="!status.deleted" v-bind:class="{ 'expanded-status': !expandable }">
+ <div class="status-el base00-background" v-if="!status.deleted">
<template v-if="muted">
<div class="media status container muted">
<small><router-link :to="{ name: 'user-profile', params: { id: status.user.id } }">{{status.user.screen_name}}</router-link></small>
@@ -57,7 +57,7 @@
<div @click.prevent="linkClicked" class="status-content" v-html="status.statusnet_html"></div>
<div v-if='status.attachments' class='attachments'>
- <attachment :status-id="status.id" :nsfw="status.nsfw" :attachment="attachment" v-for="attachment in status.attachments">
+ <attachment v-if="!hideAttachments" :status-id="status.id" :nsfw="status.nsfw" :attachment="attachment" v-for="attachment in status.attachments">
</attachment>
</div>
</div>
@@ -121,10 +121,6 @@
}
}
- .expanded-status {
- border-left: 4px solid rgba(255, 48, 16, 0.65);
- }
-
.status-actions {
padding-top: 5px;
}
@@ -160,4 +156,8 @@
border-radius: 0.5em;
margin-bottom: 1em;
}
+
+ .conversation .status-el {
+ border-left: 4px solid rgba(255, 48, 16, 0.65);
+ }
</style>
diff --git a/src/main.js b/src/main.js
index 22879b34..51d281fa 100644
--- a/src/main.js
+++ b/src/main.js
@@ -29,7 +29,7 @@ Vue.use(VueTimeago, {
})
const persistedStateOptions = {
- paths: ['users.users', 'statuses.notifications']
+ paths: ['users.users', 'statuses.notifications', 'config.hideAttachments']
}
const store = new Vuex.Store({
diff --git a/src/modules/config.js b/src/modules/config.js
index 30155f45..25de98ea 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -3,7 +3,8 @@ import StyleSetter from '../services/style_setter/style_setter.js'
const defaultState = {
name: 'Pleroma FE',
- colors: {}
+ colors: {},
+ hideAttachments: false
}
const config = {