From 5249b1d23ab2c2fb48de9137be529f38dbbceaf2 Mon Sep 17 00:00:00 2001 From: Roger Braun Date: Wed, 15 Mar 2017 17:06:48 +0100 Subject: 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(-) (limited to 'src/components') 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}}

+
-- cgit v1.2.3-70-g09d2 From 44923afbee23ef7bd22c20d25bf7776b284f5f88 Mon Sep 17 00:00:00 2001 From: Roger Braun Date: Wed, 15 Mar 2017 17:14:51 +0100 Subject: Make linter happy. --- src/components/post_status_form/post_status_form.js | 1 + 1 file changed, 1 insertion(+) (limited to 'src/components') 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'] -- cgit v1.2.3-70-g09d2 From ca8755a6f368b8239d469b22d7654c211d560581 Mon Sep 17 00:00:00 2001 From: Shpuld Shpuldson Date: Mon, 17 Apr 2017 10:45:12 +0300 Subject: 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(+) (limited to 'src/components') 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; -- cgit v1.2.3-70-g09d2 From 6b758741369a5adb8f038b8c6a571fa9fce4aacd Mon Sep 17 00:00:00 2001 From: Shpuld Shpuldson Date: Mon, 17 Apr 2017 11:18:06 +0300 Subject: Move attachments below buttons to prevent the buttons from shifting after uploading. --- src/components/post_status_form/post_status_form.vue | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) (limited to 'src/components') 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; -- cgit v1.2.3-70-g09d2 From 88309b446f9adc2c074b653661b182f39a07cfbc Mon Sep 17 00:00:00 2001 From: Shpuld Shpuldson Date: Mon, 17 Apr 2017 11:42:33 +0300 Subject: Adjust attachment preview margins. --- src/components/post_status_form/post_status_form.vue | 1 + 1 file changed, 1 insertion(+) (limited to 'src/components') 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 { -- cgit v1.2.3-70-g09d2 From 0c41adccffb73d3ce04ddd6766a96d941c26d890 Mon Sep 17 00:00:00 2001 From: Roger Braun Date: Mon, 24 Apr 2017 20:30:09 +0200 Subject: 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(-) (limited to 'src/components') 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" -- cgit v1.2.3-70-g09d2 From 32d1d2178a82fef48de2b8eebe911313c68c19a3 Mon Sep 17 00:00:00 2001 From: Roger Braun Date: Mon, 24 Apr 2017 20:34:06 +0200 Subject: Make linter happy. --- src/components/post_status_form/post_status_form.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) (limited to 'src/components') 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', -- cgit v1.2.3-70-g09d2 From 48725ff9d057ea1a710c28e586dabcdf34d85fc4 Mon Sep 17 00:00:00 2001 From: Roger Braun Date: Mon, 24 Apr 2017 20:34:06 +0200 Subject: Make linter happy. --- src/components/post_status_form/post_status_form.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) (limited to 'src/components') 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', -- cgit v1.2.3-70-g09d2 From 2ec7069b3c4ac30c3e0f6ca85615700ee31d9cf1 Mon Sep 17 00:00:00 2001 From: Roger Braun Date: Fri, 12 May 2017 18:54:12 +0200 Subject: 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 (limited to 'src/components') 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 -- cgit v1.2.3-70-g09d2 From d389d3a7633f88933586b9660b4ad3510b7f98ee Mon Sep 17 00:00:00 2001 From: Roger Braun Date: Mon, 22 May 2017 13:50:10 +0200 Subject: Copy cool retweet look. --- src/components/status/status.vue | 21 +++++++++++++++++++-- 1 file changed, 19 insertions(+), 2 deletions(-) (limited to 'src/components') 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 { -- cgit v1.2.3-70-g09d2 From e621be1428f844a39fdb0bf44ff6d0f2af7ff253 Mon Sep 17 00:00:00 2001 From: Shpuld Shpuldson Date: Tue, 30 May 2017 00:24:08 +0300 Subject: Cut notification header length from 3 lines to 1. --- src/components/notifications/notifications.scss | 4 ++++ src/components/notifications/notifications.vue | 23 +++++++++++++++++------ 2 files changed, 21 insertions(+), 6 deletions(-) (limited to 'src/components') 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 }}

-- cgit v1.2.3-70-g09d2 From 5ad4d043e7514a26a395cf72215a74362c4ca2e0 Mon Sep 17 00:00:00 2001 From: Shpuld Shpuldson Date: Wed, 31 May 2017 11:47:18 +0300 Subject: Enable reply/rt/fav for mention notifications by using a barebones status in place of plain notification content. --- src/components/notifications/notifications.js | 5 +++++ src/components/notifications/notifications.scss | 4 ++-- src/components/notifications/notifications.vue | 20 ++++++++++---------- src/components/status/status.js | 3 ++- src/components/status/status.vue | 17 ++++++++++++++++- 5 files changed, 35 insertions(+), 14 deletions(-) (limited to 'src/components') 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 @@