diff --git a/package.json b/package.json index 568aa87a..e7aa7241 100644 --- a/package.json +++ b/package.json @@ -17,9 +17,9 @@ "babel-plugin-lodash": "^3.2.11", "diff": "^3.0.1", "karma-mocha-reporter": "^2.2.1", + "lz-string": "^1.4.4", "node-sass": "^3.10.1", "object-path": "^0.11.3", - "pako": "^1.0.4", "sanitize-html": "^1.13.0", "sass-loader": "^4.0.2", "tributejs": "^2.1.0", @@ -84,7 +84,7 @@ "sinon-chai": "^2.8.0", "url-loader": "^0.5.7", "vue-loader": "^11.1.0", - "vue-style-loader": "^1.0.0", + "vue-style-loader": "^2.0.0", "webpack": "^1.13.2", "webpack-dev-middleware": "^1.8.3", "webpack-hot-middleware": "^2.12.2", diff --git a/src/App.scss b/src/App.scss index 431aeb32..0945c76b 100644 --- a/src/App.scss +++ b/src/App.scss @@ -32,9 +32,10 @@ a { button{ border: none; border-radius: 5px; + cursor: pointer; &:hover { - background-color: white; + opacity: 0.8; } } @@ -102,11 +103,11 @@ main-router { flex-direction: column; margin: 0.5em; - border-radius: 0.5em; + border-radius: 10px; } .panel-heading { - border-radius: 0.5em 0.5em 0 0; + border-radius: 10px 10px 0 0; background-size: cover; padding: 0.6em 0; text-align: center; @@ -115,7 +116,7 @@ main-router { } .panel-footer { - border-radius: 0 0 0.5em 0.5em; + border-radius: 0 0 10px 10px; } .panel-body > p { @@ -128,7 +129,7 @@ main-router { #content { margin: auto; max-width: 980px; - border-radius: 1em; + border-radius: 10px; padding-bottom: 1em; background-color: rgba(0,0,0,0.1); } @@ -142,46 +143,10 @@ main-router { min-width: 0px; } -.user-info { - color: white; - padding: 1em; - img { - border: 2px solid; - border-radius: 0.5em - } - text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); - .user-name{ - margin-top: 0.2em; - } - .user-screen-name { - margin-top: 0.3em; - font-weight: lighter; - padding-right: 0.1em; - } -} - -.user-counts { - display: flex; - line-height:16px; - padding: 1em 1.5em 0em 1em; - text-align: center; -} - -.user-count { - flex: 1; - - h5 { - font-size:1em; - font-weight: bolder; - margin: 0 0 0.25em; - } -} - .fa { color: grey; } - .status-actions { width: 50%; display: flex; @@ -210,7 +175,7 @@ status-text-container { margin-top: 0.2em; float: right; margin-right: 0.3em; - border-radius: 20%; + border-radius: 5px; } } diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js index 57d21b28..f4f6aebf 100644 --- a/src/components/attachment/attachment.js +++ b/src/components/attachment/attachment.js @@ -7,16 +7,19 @@ const Attachment = { 'nsfw', 'statusId' ], - data: () => ({ - nsfwImage, - showHidden: false - }), + data () { + return { + nsfwImage, + hideNsfwLocal: this.$store.state.config.hideNsfw, + showHidden: false + } + }, computed: { type () { return fileTypeService.fileType(this.attachment.mimetype) }, hidden () { - return this.nsfw && !this.showHidden + return this.nsfw && this.hideNsfwLocal && !this.showHidden } }, methods: { diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue index 738a1e86..ad60acf9 100644 --- a/src/components/attachment/attachment.vue +++ b/src/components/attachment/attachment.vue @@ -3,7 +3,7 @@ -
+
Hide
@@ -16,8 +16,6 @@ - Don't know how to display this... -
@@ -36,14 +34,15 @@ .attachments { display: flex; flex-wrap: wrap; + margin-right: -0.8em; .attachment { flex: 1 0 30%; - display: flex; - margin: 0.5em 0.8em 0.6em 0.1em; + margin: 0.5em 0.8em 0.6em 0.0em; align-self: flex-start; &.html { flex-basis: 100%; + display: flex; } .hider { @@ -51,14 +50,14 @@ margin: 10px; padding: 5px; background: rgba(230,230,230,0.6); - border-radius: 0.5em; + border-radius: 5px; font-weight: bold; } video { height: 100%; border: 1px solid; - border-radius: 0.5em; + border-radius: 5px; width: 100%; } @@ -71,7 +70,7 @@ height: 100%; flex: 1; border: 1px solid; - border-radius: 0.5em; + border-radius: 5px; } @@ -91,7 +90,7 @@ flex: 1; img { border: 0px; - border-radius: 0; + border-radius: 5px; height: 100%; object-fit: cover; } @@ -115,7 +114,7 @@ width: 100%; border-style: solid; border-width: 1px; - border-radius: 0.5em; + border-radius: 5px; width: 100%; height: 100%; /* If this isn't here, chrome will stretch the images */ } 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/login_form/login_form.vue b/src/components/login_form/login_form.vue index c0169a08..c0ea4313 100644 --- a/src/components/login_form/login_form.vue +++ b/src/components/login_form/login_form.vue @@ -1,11 +1,11 @@ + + diff --git a/src/components/media_upload/media_upload.js b/src/components/media_upload/media_upload.js index 3f2e3964..8b4e7ad4 100644 --- a/src/components/media_upload/media_upload.js +++ b/src/components/media_upload/media_upload.js @@ -3,12 +3,22 @@ import statusPosterService from '../../services/status_poster/status_poster.serv const mediaUpload = { mounted () { - const store = this.$store const input = this.$el.querySelector('input') - const self = this input.addEventListener('change', ({target}) => { const file = target.files[0] + this.uploadFile(file) + }) + }, + data () { + return { + uploading: false + } + }, + methods: { + uploadFile (file) { + const self = this + const store = this.$store const formData = new FormData() formData.append('media', file) @@ -19,15 +29,34 @@ 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' + } + } }, - data () { - return { - uploading: false + props: [ + 'dropFiles' + ], + watch: { + 'dropFiles': function (fileInfos) { + if (!this.uploading) { + this.uploadFile(fileInfos[0]) + } } } } 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 @@