diff options
| -rw-r--r-- | src/components/conversation/conversation.vue | 4 | ||||
| -rw-r--r-- | src/components/delete_button/delete_button.js | 4 | ||||
| -rw-r--r-- | src/components/media_upload/media_upload.js | 16 | ||||
| -rw-r--r-- | src/components/media_upload/media_upload.vue | 2 | ||||
| -rw-r--r-- | src/components/notifications/notifications.js | 4 | ||||
| -rw-r--r-- | src/components/notifications/notifications.scss | 62 | ||||
| -rw-r--r-- | src/components/notifications/notifications.vue | 34 | ||||
| -rw-r--r-- | src/components/post_status_form/post_status_form.js | 5 | ||||
| -rw-r--r-- | src/components/post_status_form/post_status_form.vue | 2 | ||||
| -rw-r--r-- | src/components/settings/settings.js | 10 | ||||
| -rw-r--r-- | src/components/settings/settings.vue | 5 | ||||
| -rw-r--r-- | src/components/status/status.js | 1 | ||||
| -rw-r--r-- | src/components/status/status.vue | 12 | ||||
| -rw-r--r-- | src/main.js | 2 | ||||
| -rw-r--r-- | src/modules/config.js | 3 |
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 = { |
