From 929d4d75b4a9a20bbf7835a7f7d8df96e70d4ffc Mon Sep 17 00:00:00 2001 From: Roger Braun Date: Mon, 2 Jan 2017 22:30:11 +0100 Subject: [PATCH 01/61] Use hash routing. --- src/main.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/main.js b/src/main.js index 048706d5..c673dbe5 100644 --- a/src/main.js +++ b/src/main.js @@ -43,7 +43,6 @@ const routes = [ ] const router = new VueRouter({ - mode: 'history', routes, scrollBehavior: (to, from, savedPosition) => { return savedPosition || { x: 0, y: 0 } From 1a5ec7484e82ea74c6f795208247d0bcef3f8715 Mon Sep 17 00:00:00 2001 From: Roger Braun Date: Fri, 20 Jan 2017 23:39:38 +0100 Subject: [PATCH 02/61] Fix style setting in Chrome. --- src/services/style_setter/style_setter.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js index b8c978b4..79b68b38 100644 --- a/src/services/style_setter/style_setter.js +++ b/src/services/style_setter/style_setter.js @@ -22,6 +22,7 @@ const setStyle = (href) => { const setDynamic = () => { const baseEl = document.createElement('div') + body.appendChild(baseEl) baseEl.setAttribute('class', 'base05') const base05Color = window.getComputedStyle(baseEl).getPropertyValue('color') baseEl.setAttribute('class', 'base08') @@ -29,6 +30,7 @@ const setStyle = (href) => { const styleEl = document.createElement('style') head.appendChild(styleEl) const styleSheet = styleEl.sheet + body.removeChild(baseEl) styleSheet.insertRule(`a { color: ${base08Color}`, 'index-max') styleSheet.insertRule(`body { color: ${base05Color}`, 'index-max') From 51473f04842af5f135a248b09b55b3f9a381bc97 Mon Sep 17 00:00:00 2001 From: Roger Braun Date: Fri, 20 Jan 2017 23:58:58 +0100 Subject: [PATCH 03/61] Fix file uploads in Chrome. --- .../status_poster/status_poster.service.js | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/src/services/status_poster/status_poster.service.js b/src/services/status_poster/status_poster.service.js index 850993f7..bc1fd37d 100644 --- a/src/services/status_poster/status_poster.service.js +++ b/src/services/status_poster/status_poster.service.js @@ -20,12 +20,23 @@ const uploadMedia = ({ store, formData }) => { const credentials = store.state.users.currentUser.credentials return apiService.uploadMedia({ credentials, formData }).then((xml) => { - return { + // Firefox and Chrome treat method differently... + let link = xml.getElementsByTagName('link') + + if (link.length === 0) { + link = xml.getElementsByTagName('atom:link') + } + + link = link[0] + + const mediaData = { id: xml.getElementsByTagName('media_id')[0].textContent, url: xml.getElementsByTagName('media_url')[0].textContent, - image: xml.getElementsByTagName('atom:link')[0].getAttribute('href'), - mimetype: xml.getElementsByTagName('atom:link')[0].getAttribute('type') + image: link.getAttribute('href'), + mimetype: link.getAttribute('type') } + + return mediaData }) } From 024230c7f4792d9f6fb9b899b1c9f8738dbacce2 Mon Sep 17 00:00:00 2001 From: Roger Braun Date: Wed, 15 Mar 2017 16:22:36 +0100 Subject: [PATCH 04/61] Basic word position and completion service. --- src/services/completion/completion.js | 70 +++++++++++++++++++ .../services/completion/completion.spec.js | 70 +++++++++++++++++++ 2 files changed, 140 insertions(+) create mode 100644 src/services/completion/completion.js create mode 100644 test/unit/specs/services/completion/completion.spec.js diff --git a/src/services/completion/completion.js b/src/services/completion/completion.js new file mode 100644 index 00000000..8788d837 --- /dev/null +++ b/src/services/completion/completion.js @@ -0,0 +1,70 @@ +import { reduce, find } from 'lodash' + +export const replaceWord = (str, toReplace, replacement) => { + return str.slice(0, toReplace.start) + replacement + str.slice(toReplace.end) +} + +export const wordAtPosition = (str, pos) => { + const words = splitIntoWords(str) + const wordsWithPosition = addPositionToWords(words) + + return find(wordsWithPosition, ({start, end}) => start <= pos && end > pos) +} + +export const addPositionToWords = (words) => { + return reduce(words, (result, word) => { + const data = { + word, + start: 0, + end: word.length + } + + if (result.length > 0) { + const previous = result.pop() + + data.start += previous.end + data.end += previous.end + + result.push(previous) + } + + result.push(data) + + return result + }, []) +} + +export const splitIntoWords = (str) => { + // Split at word boundaries + const regex = /\b/ + const triggers = /[@#]+$/ + + let split = str.split(regex) + + // Add trailing @ and # to the following word. + const words = reduce(split, (result, word) => { + if (result.length > 0) { + let previous = result.pop() + const matches = previous.match(triggers) + if (matches) { + previous = previous.replace(triggers, '') + word = matches[0] + word + } + result.push(previous) + } + result.push(word) + + return result + }, []) + + return words +} + +const completion = { + wordAtPosition, + addPositionToWords, + splitIntoWords, + replaceWord +} + +export default completion diff --git a/test/unit/specs/services/completion/completion.spec.js b/test/unit/specs/services/completion/completion.spec.js new file mode 100644 index 00000000..8a41c653 --- /dev/null +++ b/test/unit/specs/services/completion/completion.spec.js @@ -0,0 +1,70 @@ +import { replaceWord, addPositionToWords, wordAtPosition, splitIntoWords } from '../../../../../src/services/completion/completion.js' + +describe('addPositiontoWords', () => { + it('adds the position to a word list', () => { + const words = ['hey', 'this', 'is', 'fun'] + + const expected = [ + { + word: 'hey', + start: 0, + end: 3 + }, + { + word: 'this', + start: 3, + end: 7 + }, + { + word: 'is', + start: 7, + end: 9 + }, + { + word: 'fun', + start: 9, + end: 12 + } + ] + + const res = addPositionToWords(words) + + expect(res).to.eql(expected) + }) +}) + +describe('splitIntoWords', () => { + it('splits at whitespace boundaries', () => { + const str = 'This is a #nice @test for you, @idiot.' + const expected = ['This', ' ', 'is', ' ', 'a', ' ', '#nice', ' ', '@test', ' ', 'for', ' ', 'you', ', ', '@idiot', '.'] + const res = splitIntoWords(str) + + expect(res).to.eql(expected) + }) +}) + +describe('wordAtPosition', () => { + it('returns the word for a given string and postion, plus the start and end position of that word', () => { + const str = 'Hey this is fun' + + const { word, start, end } = wordAtPosition(str, 4) + + expect(word).to.eql('this') + expect(start).to.eql(4) + expect(end).to.eql(8) + }) +}) + +describe('replaceWord', () => { + it('replaces a word (with start and end) with another word in a given string', () => { + const str = 'hey @take, how are you' + const wordsWithPosition = addPositionToWords(splitIntoWords(str)) + const toReplace = wordsWithPosition[2] + + expect(toReplace.word).to.eql('@take') + + const expected = 'hey @takeshitakenji, how are you' + const res = replaceWord(str, toReplace, '@takeshitakenji') + expect(res).to.eql(expected) + }) +}) From 64153e2303eed47d8206f1851d352d82bb342d81 Mon Sep 17 00:00:00 2001 From: Roger Braun Date: Wed, 15 Mar 2017 16:23:39 +0100 Subject: [PATCH 05/61] Add autowatching test running task. --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index 74706389..b66b8797 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,7 @@ "dev": "node build/dev-server.js", "build": "node build/build.js", "unit": "karma start test/unit/karma.conf.js --single-run", + "unit:watch": "karma start test/unit/karma.conf.js --single-run=false", "e2e": "node test/e2e/runner.js", "test": "npm run unit && npm run e2e", "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs" From df2a39c0d6ed6e2eeca0d0dceb09fb2d92b1c361 Mon Sep 17 00:00:00 2001 From: Roger Braun Date: Wed, 15 Mar 2017 17:06:33 +0100 Subject: [PATCH 06/61] Remove tributejs. --- package.json | 1 - yarn.lock | 4 ---- 2 files changed, 5 deletions(-) diff --git a/package.json b/package.json index b66b8797..669a5932 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,6 @@ "object-path": "^0.11.3", "sanitize-html": "^1.13.0", "sass-loader": "^4.0.2", - "tributejs": "^2.1.0", "vue": "^2.1.0", "vue-router": "^2.2.0", "vue-template-compiler": "^2.1.10", diff --git a/yarn.lock b/yarn.lock index 677c9690..6249966e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5500,10 +5500,6 @@ tough-cookie@~2.3.0: dependencies: punycode "^1.4.1" -tributejs@^2.1.0: - version "2.3.3" - resolved "https://registry.yarnpkg.com/tributejs/-/tributejs-2.3.3.tgz#ec3b9ae3edd0f7e2bc5ca56d11ae43fdd7a8cd28" - trim-newlines@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/trim-newlines/-/trim-newlines-1.0.0.tgz#5887966bb582a4503a41eb524f7d35011815a613" From 5249b1d23ab2c2fb48de9137be529f38dbbceaf2 Mon Sep 17 00:00:00 2001 From: Roger Braun Date: Wed, 15 Mar 2017 17:06:48 +0100 Subject: [PATCH 07/61] Add basic mention completion. --- .../post_status_form/post_status_form.js | 89 ++++++------------- .../post_status_form/post_status_form.vue | 9 +- 2 files changed, 33 insertions(+), 65 deletions(-) diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js index 01aeeb68..be2ecc2f 100644 --- a/src/components/post_status_form/post_status_form.js +++ b/src/components/post_status_form/post_status_form.js @@ -1,10 +1,9 @@ import statusPoster from '../../services/status_poster/status_poster.service.js' import MediaUpload from '../media_upload/media_upload.vue' import fileTypeService from '../../services/file_type/file_type.service.js' -import Tribute from '../../../node_modules/tributejs/src/Tribute.js' -require('../../../node_modules/tributejs/scss/tribute.scss') +import Completion from '../../services/completion/completion.js' -import { merge, reject, map, uniqBy } from 'lodash' +import { take, filter, reject, map, uniqBy } from 'lodash' const buildMentionsString = ({user, attentions}, currentUser) => { let allAttentions = [...attentions] @@ -21,51 +20,6 @@ const buildMentionsString = ({user, attentions}, currentUser) => { return mentions.join(' ') + ' ' } -const defaultCollection = { - // symbol that starts the lookup - trigger: '@', - - // element to target for @mentions - iframe: null, - - // class added in the flyout menu for active item - selectClass: 'highlight', - - // function called on select that returns the content to insert - selectTemplate: function (item) { - return '@' + item.original.screen_name - }, - - // template for displaying item in menu - menuItemTemplate: function (item) { - return `
${item.string}
` - }, - - // template for when no match is found (optional), - // If no template is provided, menu is hidden. - noMatchTemplate: null, - - // specify an alternative parent container for the menu - menuContainer: document.body, - - // column to search against in the object (accepts function or string) - lookup: ({name, screen_name}) => `${name} (@${screen_name})`, // eslint-disable-line camelcase - - // column that contains the content to insert by default - fillAttr: 'screen_name', - - // REQUIRED: array of objects to match - values: [], - - // specify whether a space is required before the trigger character - requireLeadingSpace: true, - - // specify whether a space is allowed in the middle of mentions - allowSpaces: false -} - -const tribute = new Tribute({ collection: [] }) - const PostStatusForm = { props: [ 'replyTo', @@ -89,30 +43,37 @@ const PostStatusForm = { newStatus: { status: statusText, files: [] - } + }, + caret: 0 } }, computed: { + candidates () { + if (this.textAtCaret.charAt(0) === '@') { + const matchedUsers = filter(this.users, (user) => (user.name + user.screen_name).match(this.textAtCaret.slice(1))) + return map(take(matchedUsers, 5), ({screen_name, name}) => screen_name) + } else { + return ['nothing'] + } + }, + textAtCaret () { + return (this.wordAtCaret || {}).word || '' + }, + wordAtCaret () { + const word = Completion.wordAtPosition(this.newStatus.status, this.caret - 1) || {} + return word + }, users () { return this.$store.state.users.users - }, - completions () { - let users = this.users - users = merge({values: users}, defaultCollection) - return [users] } }, - watch: { - completions () { - tribute.collection = this.completions - } - }, - mounted () { - const textarea = this.$el.querySelector('textarea') - tribute.collection = this.completions - tribute.attach(textarea) - }, methods: { + replace (replacement) { + this.newStatus.status = Completion.replaceWord(this.newStatus.status, this.wordAtCaret, replacement) + }, + setCaret ({target: {selectionStart}}) { + this.caret = selectionStart + }, postStatus (newStatus) { statusPoster.postStatus({ status: newStatus.status, diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue index 07280a41..12a9c88a 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 @@
- +
@@ -13,6 +13,13 @@ {{file.url}}
+
+

Word

+

{{textAtCaret}}

+

Candidates

+ +

{{candidate}}

+
From 44923afbee23ef7bd22c20d25bf7776b284f5f88 Mon Sep 17 00:00:00 2001 From: Roger Braun Date: Wed, 15 Mar 2017 17:14:51 +0100 Subject: [PATCH 08/61] Make linter happy. --- src/components/post_status_form/post_status_form.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js index be2ecc2f..797fcdbb 100644 --- a/src/components/post_status_form/post_status_form.js +++ b/src/components/post_status_form/post_status_form.js @@ -51,6 +51,7 @@ const PostStatusForm = { candidates () { if (this.textAtCaret.charAt(0) === '@') { const matchedUsers = filter(this.users, (user) => (user.name + user.screen_name).match(this.textAtCaret.slice(1))) + // eslint-disable-next-line camelcase return map(take(matchedUsers, 5), ({screen_name, name}) => screen_name) } else { return ['nothing'] From dd662469130315396b9bd0cae6f06e940a4a045a Mon Sep 17 00:00:00 2001 From: Shpuld Shpuldson Date: Fri, 14 Apr 2017 20:08:37 +0300 Subject: [PATCH 09/61] Add lang="en" to html to potentially fix font fall-back issues on some language/font setups. --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 668b21bb..b7654cc1 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,5 @@ - + From ca8755a6f368b8239d469b22d7654c211d560581 Mon Sep 17 00:00:00 2001 From: Shpuld Shpuldson Date: Mon, 17 Apr 2017 10:45:12 +0300 Subject: [PATCH 10/61] Make X icon parent position: relative; to prevent it from floating on its own. --- src/components/post_status_form/post_status_form.vue | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue index 07280a41..b5a3c738 100644 --- a/src/components/post_status_form/post_status_form.vue +++ b/src/components/post_status_form/post_status_form.vue @@ -53,6 +53,10 @@ .attachments { padding: 0.5em; + .attachment { + position: relative; + } + i { position: absolute; margin: 10px; From 6b758741369a5adb8f038b8c6a571fa9fce4aacd Mon Sep 17 00:00:00 2001 From: Shpuld Shpuldson Date: Mon, 17 Apr 2017 11:18:06 +0300 Subject: [PATCH 11/61] Move attachments below buttons to prevent the buttons from shifting after uploading. --- .../post_status_form/post_status_form.vue | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue index 07280a41..d2bcba51 100644 --- a/src/components/post_status_form/post_status_form.vue +++ b/src/components/post_status_form/post_status_form.vue @@ -4,6 +4,10 @@
+
+ + +
@@ -13,10 +17,6 @@ {{file.url}}
-
- - -
@@ -44,14 +44,15 @@ .form-bottom { display: flex; padding: 0.5em; + height: 32px; button { - flex: 2; + width: 10em; } } .attachments { - padding: 0.5em; + padding: 0 0.5em; i { position: absolute; From 88309b446f9adc2c074b653661b182f39a07cfbc Mon Sep 17 00:00:00 2001 From: Shpuld Shpuldson Date: Mon, 17 Apr 2017 11:42:33 +0300 Subject: [PATCH 12/61] Adjust attachment preview margins. --- src/components/post_status_form/post_status_form.vue | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue index 13f4d465..c3f1b1f0 100644 --- a/src/components/post_status_form/post_status_form.vue +++ b/src/components/post_status_form/post_status_form.vue @@ -56,6 +56,7 @@ .attachment { position: relative; + margin: 0.5em 0.8em 0.2em 0; } i { From 0c41adccffb73d3ce04ddd6766a96d941c26d890 Mon Sep 17 00:00:00 2001 From: Roger Braun Date: Mon, 24 Apr 2017 20:30:09 +0200 Subject: [PATCH 13/61] Remove tributejs Alternative autocompletion is in the works and this one has injection problems. --- package.json | 1 - .../post_status_form/post_status_form.js | 61 ------------------- yarn.lock | 4 -- 3 files changed, 66 deletions(-) diff --git a/package.json b/package.json index 74706389..3c10483a 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,6 @@ "object-path": "^0.11.3", "sanitize-html": "^1.13.0", "sass-loader": "^4.0.2", - "tributejs": "^2.1.0", "vue": "^2.1.0", "vue-router": "^2.2.0", "vue-template-compiler": "^2.1.10", diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js index 01aeeb68..cba080ea 100644 --- a/src/components/post_status_form/post_status_form.js +++ b/src/components/post_status_form/post_status_form.js @@ -1,8 +1,6 @@ import statusPoster from '../../services/status_poster/status_poster.service.js' import MediaUpload from '../media_upload/media_upload.vue' import fileTypeService from '../../services/file_type/file_type.service.js' -import Tribute from '../../../node_modules/tributejs/src/Tribute.js' -require('../../../node_modules/tributejs/scss/tribute.scss') import { merge, reject, map, uniqBy } from 'lodash' @@ -21,50 +19,6 @@ const buildMentionsString = ({user, attentions}, currentUser) => { return mentions.join(' ') + ' ' } -const defaultCollection = { - // symbol that starts the lookup - trigger: '@', - - // element to target for @mentions - iframe: null, - - // class added in the flyout menu for active item - selectClass: 'highlight', - - // function called on select that returns the content to insert - selectTemplate: function (item) { - return '@' + item.original.screen_name - }, - - // template for displaying item in menu - menuItemTemplate: function (item) { - return `
${item.string}
` - }, - - // template for when no match is found (optional), - // If no template is provided, menu is hidden. - noMatchTemplate: null, - - // specify an alternative parent container for the menu - menuContainer: document.body, - - // column to search against in the object (accepts function or string) - lookup: ({name, screen_name}) => `${name} (@${screen_name})`, // eslint-disable-line camelcase - - // column that contains the content to insert by default - fillAttr: 'screen_name', - - // REQUIRED: array of objects to match - values: [], - - // specify whether a space is required before the trigger character - requireLeadingSpace: true, - - // specify whether a space is allowed in the middle of mentions - allowSpaces: false -} - -const tribute = new Tribute({ collection: [] }) const PostStatusForm = { props: [ @@ -95,23 +49,8 @@ const PostStatusForm = { computed: { users () { return this.$store.state.users.users - }, - completions () { - let users = this.users - users = merge({values: users}, defaultCollection) - return [users] } }, - watch: { - completions () { - tribute.collection = this.completions - } - }, - mounted () { - const textarea = this.$el.querySelector('textarea') - tribute.collection = this.completions - tribute.attach(textarea) - }, methods: { postStatus (newStatus) { statusPoster.postStatus({ diff --git a/yarn.lock b/yarn.lock index 677c9690..6249966e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5500,10 +5500,6 @@ tough-cookie@~2.3.0: dependencies: punycode "^1.4.1" -tributejs@^2.1.0: - version "2.3.3" - resolved "https://registry.yarnpkg.com/tributejs/-/tributejs-2.3.3.tgz#ec3b9ae3edd0f7e2bc5ca56d11ae43fdd7a8cd28" - trim-newlines@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/trim-newlines/-/trim-newlines-1.0.0.tgz#5887966bb582a4503a41eb524f7d35011815a613" From 32d1d2178a82fef48de2b8eebe911313c68c19a3 Mon Sep 17 00:00:00 2001 From: Roger Braun Date: Mon, 24 Apr 2017 20:34:06 +0200 Subject: [PATCH 14/61] Make linter happy. --- src/components/post_status_form/post_status_form.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js index cba080ea..5dd14df5 100644 --- a/src/components/post_status_form/post_status_form.js +++ b/src/components/post_status_form/post_status_form.js @@ -2,7 +2,7 @@ import statusPoster from '../../services/status_poster/status_poster.service.js' import MediaUpload from '../media_upload/media_upload.vue' import fileTypeService from '../../services/file_type/file_type.service.js' -import { merge, reject, map, uniqBy } from 'lodash' +import { reject, map, uniqBy } from 'lodash' const buildMentionsString = ({user, attentions}, currentUser) => { let allAttentions = [...attentions] @@ -19,7 +19,6 @@ const buildMentionsString = ({user, attentions}, currentUser) => { return mentions.join(' ') + ' ' } - const PostStatusForm = { props: [ 'replyTo', From 48725ff9d057ea1a710c28e586dabcdf34d85fc4 Mon Sep 17 00:00:00 2001 From: Roger Braun Date: Mon, 24 Apr 2017 20:34:06 +0200 Subject: [PATCH 15/61] Make linter happy. --- src/components/post_status_form/post_status_form.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js index cba080ea..5dd14df5 100644 --- a/src/components/post_status_form/post_status_form.js +++ b/src/components/post_status_form/post_status_form.js @@ -2,7 +2,7 @@ import statusPoster from '../../services/status_poster/status_poster.service.js' import MediaUpload from '../media_upload/media_upload.vue' import fileTypeService from '../../services/file_type/file_type.service.js' -import { merge, reject, map, uniqBy } from 'lodash' +import { reject, map, uniqBy } from 'lodash' const buildMentionsString = ({user, attentions}, currentUser) => { let allAttentions = [...attentions] @@ -19,7 +19,6 @@ const buildMentionsString = ({user, attentions}, currentUser) => { return mentions.join(' ') + ' ' } - const PostStatusForm = { props: [ 'replyTo', From 2ec7069b3c4ac30c3e0f6ca85615700ee31d9cf1 Mon Sep 17 00:00:00 2001 From: Roger Braun Date: Fri, 12 May 2017 18:54:12 +0200 Subject: [PATCH 16/61] Add user finder. --- src/App.js | 4 +++- src/App.vue | 1 + src/components/user_finder/user_finder.js | 18 ++++++++++++++++++ src/components/user_finder/user_finder.vue | 13 +++++++++++++ src/services/api/api.service.js | 11 ++++++++++- .../backend_interactor_service.js | 5 ++++- 6 files changed, 49 insertions(+), 3 deletions(-) create mode 100644 src/components/user_finder/user_finder.js create mode 100644 src/components/user_finder/user_finder.vue diff --git a/src/App.js b/src/App.js index 2a00b369..a2d891f7 100644 --- a/src/App.js +++ b/src/App.js @@ -1,13 +1,15 @@ import UserPanel from './components/user_panel/user_panel.vue' import NavPanel from './components/nav_panel/nav_panel.vue' import Notifications from './components/notifications/notifications.vue' +import UserFinder from './components/user_finder/user_finder.vue' export default { name: 'app', components: { UserPanel, NavPanel, - Notifications + Notifications, + UserFinder }, data: () => ({ mobileActivePanel: 'timeline' diff --git a/src/App.vue b/src/App.vue index fcfdae97..d0c6671e 100644 --- a/src/App.vue +++ b/src/App.vue @@ -19,6 +19,7 @@
+
diff --git a/src/components/user_finder/user_finder.js b/src/components/user_finder/user_finder.js new file mode 100644 index 00000000..a6bf08b6 --- /dev/null +++ b/src/components/user_finder/user_finder.js @@ -0,0 +1,18 @@ +const UserFinder = { + data: () => ({ + username: undefined + }), + methods: { + findUser (username) { + this.$store.state.api.backendInteractor.externalProfile(username) + .then((user) => { + if (!user.error) { + this.$store.commit('addNewUsers', [user]) + this.$router.push({name: 'user-profile', params: {id: user.id}}) + } + }) + } + } +} + +export default UserFinder diff --git a/src/components/user_finder/user_finder.vue b/src/components/user_finder/user_finder.vue new file mode 100644 index 00000000..2fbf1693 --- /dev/null +++ b/src/components/user_finder/user_finder.vue @@ -0,0 +1,13 @@ + + + + + diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js index 4dfc0a02..1c5e281e 100644 --- a/src/services/api/api.service.js +++ b/src/services/api/api.service.js @@ -17,6 +17,7 @@ const FRIENDS_URL = '/api/statuses/friends.json' const FOLLOWING_URL = '/api/friendships/create.json' const UNFOLLOWING_URL = '/api/friendships/destroy.json' const QVITTER_USER_PREF_URL = '/api/qvitter/set_profile_pref.json' +const EXTERNAL_PROFILE_URL = '/api/externalprofile/show.json' // const USER_URL = '/api/users/show.json' const oldfetch = window.fetch @@ -35,6 +36,13 @@ const authHeaders = (user) => { } } +const externalProfile = (profileUrl) => { + let url = `${EXTERNAL_PROFILE_URL}?profileurl=${profileUrl}` + return fetch(url, { + method: 'GET' + }).then((data) => data.json()) +} + const followUser = ({id, credentials}) => { let url = `${FOLLOWING_URL}?user_id=${id}` return fetch(url, { @@ -198,7 +206,8 @@ const apiService = { uploadMedia, fetchAllFollowing, setUserMute, - fetchMutes + fetchMutes, + externalProfile } export default apiService diff --git a/src/services/backend_interactor_service/backend_interactor_service.js b/src/services/backend_interactor_service/backend_interactor_service.js index bc68d02c..74248bc0 100644 --- a/src/services/backend_interactor_service/backend_interactor_service.js +++ b/src/services/backend_interactor_service/backend_interactor_service.js @@ -36,6 +36,8 @@ const backendInteractorService = (credentials) => { const fetchMutes = () => apiService.fetchMutes({credentials}) + const externalProfile = (profileUrl) => apiService.externalProfile(profileUrl) + const backendInteractorServiceInstance = { fetchStatus, fetchConversation, @@ -46,7 +48,8 @@ const backendInteractorService = (credentials) => { verifyCredentials: apiService.verifyCredentials, startFetching, setUserMute, - fetchMutes + fetchMutes, + externalProfile } return backendInteractorServiceInstance From d389d3a7633f88933586b9660b4ad3510b7f98ee Mon Sep 17 00:00:00 2001 From: Roger Braun Date: Mon, 22 May 2017 13:50:10 +0200 Subject: [PATCH 17/61] Copy cool retweet look. --- src/components/status/status.vue | 21 +++++++++++++++++++-- 1 file changed, 19 insertions(+), 2 deletions(-) diff --git a/src/components/status/status.vue b/src/components/status/status.vue index db33a200..8886b551 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -19,7 +19,8 @@
- + +
@@ -147,7 +148,23 @@ } .status .avatar { - width: 48px; + width: 48px; + height: 48px; + + &.retweeted { + width: 40px; + height: 40px; + margin-right: 8px; + margin-bottom: 8px; + } + } + + .status img.avatar-retweeter { + width: 24px; + height: 24px; + position: absolute; + margin-left: 24px; + margin-top: 24px; } .status.compact .avatar { From e621be1428f844a39fdb0bf44ff6d0f2af7ff253 Mon Sep 17 00:00:00 2001 From: Shpuld Shpuldson Date: Tue, 30 May 2017 00:24:08 +0300 Subject: [PATCH 18/61] Cut notification header length from 3 lines to 1. --- .../notifications/notifications.scss | 4 ++++ .../notifications/notifications.vue | 23 ++++++++++++++----- 2 files changed, 21 insertions(+), 6 deletions(-) diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss index c7c650a9..5619c2d8 100644 --- a/src/components/notifications/notifications.scss +++ b/src/components/notifications/notifications.scss @@ -54,10 +54,14 @@ } h1 { + word-break: break-all; margin: 0 0 0.3em; padding: 0; font-size: 1em; line-height:20px; + small { + font-weight: lighter; + } } padding: 0.3em 0.8em 0.5em; diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue index a326e9cd..9d9028ad 100644 --- a/src/components/notifications/notifications.vue +++ b/src/components/notifications/notifications.vue @@ -12,17 +12,28 @@
-
-

{{ notification.action.user.name }}
favorited your status

-

{{ notification.status.text }}

+

+ {{ notification.action.user.name }} + + +

+

{{ notification.status.text }}

-

{{ notification.action.user.name }}
repeated your status

-

{{ notification.status.text }}

+

+ {{ notification.action.user.name }} + + +

+

{{ notification.status.text }}

-

{{ notification.action.user.name }}
mentioned you

+

+ {{ notification.action.user.name }} + + +

{{ notification.status.text }}

From 5ad4d043e7514a26a395cf72215a74362c4ca2e0 Mon Sep 17 00:00:00 2001 From: Shpuld Shpuldson Date: Wed, 31 May 2017 11:47:18 +0300 Subject: [PATCH 19/61] Enable reply/rt/fav for mention notifications by using a barebones status in place of plain notification content. --- src/components/notifications/notifications.js | 5 +++++ .../notifications/notifications.scss | 4 ++-- .../notifications/notifications.vue | 20 +++++++++---------- src/components/status/status.js | 3 ++- src/components/status/status.vue | 17 +++++++++++++++- 5 files changed, 35 insertions(+), 14 deletions(-) diff --git a/src/components/notifications/notifications.js b/src/components/notifications/notifications.js index c8d5e212..c0c86c68 100644 --- a/src/components/notifications/notifications.js +++ b/src/components/notifications/notifications.js @@ -1,3 +1,5 @@ +import Status from '../status/status.vue' + import { sortBy, take, filter } from 'lodash' const Notifications = { @@ -23,6 +25,9 @@ const Notifications = { return this.unseenNotifications.length } }, + components: { + Status + }, watch: { unseenCount (count) { if (count > 0) { diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss index 5619c2d8..f02ced8d 100644 --- a/src/components/notifications/notifications.scss +++ b/src/components/notifications/notifications.scss @@ -45,11 +45,11 @@ word-wrap: break-word; line-height:18px; - .icon-retweet { + .icon-retweet.lit { color: $green; } - .icon-reply { + .icon-reply.lit { color: $blue; } diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue index 9d9028ad..256d6f7a 100644 --- a/src/components/notifications/notifications.vue +++ b/src/components/notifications/notifications.vue @@ -11,30 +11,30 @@ -
+

{{ notification.action.user.name }}

-

{{ notification.status.text }}

+

{{ notification.action.user.name }} - +

-

{{ notification.status.text }}

+
-

- {{ notification.action.user.name }} - - -

-

{{ notification.status.text }}

+

+ {{ notification.action.user.name }} + + +

+
diff --git a/src/components/status/status.js b/src/components/status/status.js index 5e7bde53..183838a8 100644 --- a/src/components/status/status.js +++ b/src/components/status/status.js @@ -12,7 +12,8 @@ const Status = { 'expandable', 'inConversation', 'focused', - 'highlight' + 'highlight', + 'compact' ], data: () => ({ replying: false, diff --git a/src/components/status/status.vue b/src/components/status/status.vue index db33a200..e06fc29a 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -1,5 +1,20 @@