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
// 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)
break
}

View file

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

View file

@ -12,7 +12,7 @@ function getTimelineUrlPath (timeline) {
return 'notifications'
case 'favorites':
return 'favourites'
case 'conversations':
case 'direct':
return 'conversations'
}
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 url = `${basename(instanceName)}/api/v1/${timelineUrlName}`
@ -63,8 +63,10 @@ export function getTimeline (instanceName, accessToken, timeline, maxId, since,
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
return timelineRequest.then(items => items.map(item => item.last_status))
if (timeline === 'direct') {
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 n" on:pressed="goto('/notifications')"/>
<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="h|?" on:pressed="showShortcutHelpDialog()"/>
<Shortcut key="c" on:pressed="showComposeDialog()"/>

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -4,7 +4,7 @@ import {
getFirstVisibleStatus, getNthStatus, getUrl, localTimelineNavButton, notificationsNavButton,
validateTimeline
} from '../utils'
import { homeTimeline, notifications, localTimeline, favorites } from '../fixtures'
import { homeTimeline, notifications, localTimeline, favorites, directMessages } from '../fixtures'
import { loginAsFoobar } from '../roles'
fixture`003-basic-timeline-spec.js`
@ -72,3 +72,15 @@ test('Shows favorites', async t => {
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)
})