fix: tweaks to conversations (direct) UI (#1137)

- make the url `/direct`
- call it "Direct messages"
- fix sapper export
- retain DM background color
- add test
This commit is contained in:
Nolan Lawson 2019-04-13 11:04:39 -07:00
parent 622dbde258
commit b3098c8c5a
12 changed files with 46 additions and 21 deletions

View file

@ -21,7 +21,7 @@ function processMessage (instanceName, timelineName, message) {
// a timeline of statuses. To have a clean implementation we would need to // a timeline of statuses. To have a clean implementation we would need to
// reproduce what is done for statuses for the conversation. // reproduce what is done for statuses for the conversation.
// //
// It will add new DMs as new conversations intead of updating existing threads // It will add new DMs as new conversations instead of updating existing threads
addStatusOrNotification(instanceName, timelineName, JSON.parse(payload).last_status) addStatusOrNotification(instanceName, timelineName, JSON.parse(payload).last_status)
break break
} }

View file

@ -12,7 +12,7 @@ function getStreamName (timeline) {
return 'user' return 'user'
case 'notifications': case 'notifications':
return 'user:notification' return 'user:notification'
case 'conversations': case 'direct':
return 'direct' return 'direct'
} }
if (timeline.startsWith('tag/')) { if (timeline.startsWith('tag/')) {

View file

@ -12,7 +12,7 @@ function getTimelineUrlPath (timeline) {
return 'notifications' return 'notifications'
case 'favorites': case 'favorites':
return 'favourites' return 'favourites'
case 'conversations': case 'direct':
return 'conversations' return 'conversations'
} }
if (timeline.startsWith('tag/')) { if (timeline.startsWith('tag/')) {
@ -24,7 +24,7 @@ function getTimelineUrlPath (timeline) {
} }
} }
export function getTimeline (instanceName, accessToken, timeline, maxId, since, limit) { export async function getTimeline (instanceName, accessToken, timeline, maxId, since, limit) {
let timelineUrlName = getTimelineUrlPath(timeline) let timelineUrlName = getTimelineUrlPath(timeline)
let url = `${basename(instanceName)}/api/v1/${timelineUrlName}` let url = `${basename(instanceName)}/api/v1/${timelineUrlName}`
@ -63,8 +63,10 @@ export function getTimeline (instanceName, accessToken, timeline, maxId, since,
url += '?' + paramsString(params) url += '?' + paramsString(params)
const timelineRequest = get(url, auth(accessToken), { timeout: DEFAULT_TIMEOUT }) const items = await get(url, auth(accessToken), { timeout: DEFAULT_TIMEOUT })
if (timeline !== 'conversations') return timelineRequest if (timeline === 'direct') {
return timelineRequest.then(items => items.map(item => item.last_status)) return items.map(item => item.last_status)
}
return items
} }

View file

@ -4,7 +4,7 @@
<Shortcut key="g h" on:pressed="goto('/')"/> <Shortcut key="g h" on:pressed="goto('/')"/>
<Shortcut key="g n" on:pressed="goto('/notifications')"/> <Shortcut key="g n" on:pressed="goto('/notifications')"/>
<Shortcut key="g c" on:pressed="goto('/community')"/> <Shortcut key="g c" on:pressed="goto('/community')"/>
<Shortcut key="g d" on:pressed="goto('/conversations')"/> <Shortcut key="g d" on:pressed="goto('/direct')"/>
<Shortcut key="s" on:pressed="goto('/search')"/> <Shortcut key="s" on:pressed="goto('/search')"/>
<Shortcut key="h|?" on:pressed="showShortcutHelpDialog()"/> <Shortcut key="h|?" on:pressed="showShortcutHelpDialog()"/>
<Shortcut key="c" on:pressed="showComposeDialog()"/> <Shortcut key="c" on:pressed="showComposeDialog()"/>

View file

@ -73,6 +73,10 @@
border-bottom: 1px solid var(--main-border); border-bottom: 1px solid var(--main-border);
} }
.status-article.status-direct {
background-color: var(--status-direct-background);
}
.status-article:focus { .status-article:focus {
outline: none; /* focus is on the parent instead */ outline: none; /* focus is on the parent instead */
} }
@ -284,6 +288,7 @@
className: ({ visibility, timelineType, isStatusInOwnThread, $underlineLinks, $disableTapOnStatus }) => (classname( className: ({ visibility, timelineType, isStatusInOwnThread, $underlineLinks, $disableTapOnStatus }) => (classname(
'status-article', 'status-article',
'shortcut-list-item', 'shortcut-list-item',
timelineType !== 'direct' && visibility === 'direct' && 'status-direct',
timelineType !== 'search' && 'status-in-timeline', timelineType !== 'search' && 'status-in-timeline',
isStatusInOwnThread && 'status-in-own-thread', isStatusInOwnThread && 'status-in-own-thread',
$underlineLinks && 'underline-links', $underlineLinks && 'underline-links',

View file

@ -21,8 +21,8 @@
icon="#fa-star" icon="#fa-star"
pinnable="true" pinnable="true"
/> />
<PageListItem href="/conversations" <PageListItem href="/direct"
label="Conversations" label="Direct messages"
icon="#fa-envelope" icon="#fa-envelope"
pinnable="true" pinnable="true"
/> />
@ -89,6 +89,7 @@
<a href="/share">Share</a> <a href="/share">Share</a>
<a href="/federated">Federated</a> <a href="/federated">Federated</a>
<a href="/favorites">Favorites</a> <a href="/favorites">Favorites</a>
<a href="/direct">Conversations</a>
</div> </div>
{/if} {/if}
<style> <style>

View file

@ -1,7 +1,7 @@
{#if $isUserLoggedIn} {#if $isUserLoggedIn}
<TimelinePage timeline="conversations"> <TimelinePage timeline="direct">
{#if $pinnedPage !== '/conversations'} {#if $pinnedPage !== '/direct'}
<DynamicPageBanner title="Conversations" icon="#fa-envelope"/> <DynamicPageBanner title="Direct messages" icon="#fa-envelope"/>
{/if} {/if}
</TimelinePage> </TimelinePage>
{:else} {:else}

View file

@ -24,12 +24,12 @@ export function navComputations (store) {
svg: '#fa-globe', svg: '#fa-globe',
label: 'Federated' label: 'Federated'
} }
} else if (pinnedPage === '/conversations') { } else if (pinnedPage === '/direct') {
pinnedPageObject = { pinnedPageObject = {
name: 'conversations', name: 'direct',
href: '/conversations', href: '/direct',
svg: '#fa-envelope', svg: '#fa-envelope',
label: 'Conversations' label: 'Direct messages'
} }
} else if (pinnedPage === '/favorites') { } else if (pinnedPage === '/favorites') {
pinnedPageObject = { pinnedPageObject = {

View file

@ -26,7 +26,7 @@ export function timelineObservers () {
!( !(
timeline !== 'local' && timeline !== 'local' &&
timeline !== 'federated' && timeline !== 'federated' &&
timeline !== 'conversations' && timeline !== 'direct' &&
!timeline.startsWith('list/') && !timeline.startsWith('list/') &&
!timeline.startsWith('tag/') !timeline.startsWith('tag/')
) )

View file

@ -1,11 +1,11 @@
<Title name="Favorites" /> <Title name="Direct messages" />
<LazyPage {pageComponent} {params} /> <LazyPage {pageComponent} {params} />
<script> <script>
import Title from './_components/Title.html' import Title from './_components/Title.html'
import LazyPage from './_components/LazyPage.html' import LazyPage from './_components/LazyPage.html'
import pageComponent from './_pages/conversations.html' import pageComponent from './_pages/direct.html'
export default { export default {
components: { components: {

View file

@ -51,6 +51,11 @@ export const favorites = [
{ content: 'pinned toot 1' } { content: 'pinned toot 1' }
] ]
export const directMessages = [
{ content: 'notification of direct message' },
{ content: 'direct' }
]
export const quuxStatuses = [ export const quuxStatuses = [
{ content: 'pinned toot 2' }, { content: 'pinned toot 2' },
{ content: 'pinned toot 1' } { content: 'pinned toot 1' }

View file

@ -4,7 +4,7 @@ import {
getFirstVisibleStatus, getNthStatus, getUrl, localTimelineNavButton, notificationsNavButton, getFirstVisibleStatus, getNthStatus, getUrl, localTimelineNavButton, notificationsNavButton,
validateTimeline validateTimeline
} from '../utils' } from '../utils'
import { homeTimeline, notifications, localTimeline, favorites } from '../fixtures' import { homeTimeline, notifications, localTimeline, favorites, directMessages } from '../fixtures'
import { loginAsFoobar } from '../roles' import { loginAsFoobar } from '../roles'
fixture`003-basic-timeline-spec.js` fixture`003-basic-timeline-spec.js`
@ -72,3 +72,15 @@ test('Shows favorites', async t => {
await validateTimeline(t, favorites) await validateTimeline(t, favorites)
}) })
test('Shows direct messages', async t => {
await loginAsFoobar(t)
await t
.expect(getUrl()).eql('http://localhost:4002/')
.expect(getNthStatus(1).exists).ok({ timeout: 30000 })
.click(communityNavButton)
.click($('a').withText('Direct messages'))
.expect(getUrl()).contains('/direct')
await validateTimeline(t, directMessages)
})