fix: tidy up bookmarks, add tests

This commit is contained in:
Nolan Lawson 2020-08-25 16:36:41 -07:00
parent 2113ab3d46
commit 5a9e5ae8bc
6 changed files with 76 additions and 41 deletions

View file

@ -15,9 +15,10 @@ async function readSvg (svg) {
const optimized = (await svgo.optimize(content)) const optimized = (await svgo.optimize(content))
const $optimized = $(optimized.data) const $optimized = $(optimized.data)
const $path = $optimized.find('path, circle').removeAttr('fill') const $path = $optimized.find('path, circle').removeAttr('fill')
const viewBox = $optimized.attr('viewBox') || `0 0 ${$optimized.attr('width')} ${$optimized.attr('height')}`
const $symbol = $('<symbol></symbol>') const $symbol = $('<symbol></symbol>')
.attr('id', svg.id) .attr('id', svg.id)
.attr('viewBox', $optimized.attr('viewBox')) .attr('viewBox', viewBox)
.append($path) .append($path)
return $.xml($symbol) return $.xml($symbol)
} }

View file

@ -55,6 +55,6 @@ module.exports = [
{ id: 'fa-info-circle', src: 'src/thirdparty/font-awesome-svg-png/white/svg/info-circle.svg' }, { id: 'fa-info-circle', src: 'src/thirdparty/font-awesome-svg-png/white/svg/info-circle.svg' },
{ id: 'fa-crosshairs', src: 'src/thirdparty/font-awesome-svg-png/white/svg/crosshairs.svg' }, { id: 'fa-crosshairs', src: 'src/thirdparty/font-awesome-svg-png/white/svg/crosshairs.svg' },
{ id: 'fa-magic', src: 'src/thirdparty/font-awesome-svg-png/white/svg/magic.svg' }, { id: 'fa-magic', src: 'src/thirdparty/font-awesome-svg-png/white/svg/magic.svg' },
{ id: 'fa-hashtag', src: 'src/thirdparty/font-awesome-svg-png/white/svg/hashtag.svg' }, { id: 'fa-hashtag', src: 'src/thirdparty/font-awesome-svg-png/white/svg/hashtag.svg' },
{ id: 'fa-bookmark', src: 'src/thirdparty/font-awesome-svg-png/white/svg/bookmark.svg' }, { id: 'fa-bookmark', src: 'src/thirdparty/font-awesome-svg-png/white/svg/bookmark.svg' }
] ]

View file

@ -124,6 +124,11 @@ export default {
label: 'Delete and redraft', label: 'Delete and redraft',
icon: '#fa-pencil' icon: '#fa-pencil'
}, },
{
key: 'bookmark',
label: bookmarkLabel,
icon: '#fa-bookmark'
},
!isUser && { !isUser && {
key: 'report', key: 'report',
label: 'Report toot', label: 'Report toot',
@ -138,11 +143,6 @@ export default {
key: 'copy', key: 'copy',
label: 'Copy link to toot', label: 'Copy link to toot',
icon: '#fa-link' icon: '#fa-link'
},
{
key: 'bookmark',
label: bookmarkLabel,
icon: '#fa-bookmark'
} }
].filter(Boolean)) ].filter(Boolean))
}, },

View file

@ -12,36 +12,14 @@
</h2> </h2>
<PageList label="Timelines"> <PageList label="Timelines">
<PageListItem href="/local" {#each staticPinnables as staticPinnable, i}
label="Local Timeline" <PageListItem href={staticPinnable.href}
icon="#fa-users" label={staticPinnable.label}
pinnable="true" icon={staticPinnable.icon}
pinIndex={0} pinnable="true"
/> pinIndex={i}
<PageListItem href="/federated" />
label="Federated Timeline" {/each}
icon="#fa-globe"
pinnable="true"
pinIndex={1}
/>
<PageListItem href="/favorites"
label="Favorites"
icon="#fa-star"
pinnable="true"
pinIndex={2}
/>
<PageListItem href="/direct"
label="Direct messages"
icon="#fa-envelope"
pinnable="true"
pinIndex={3}
/>
<PageListItem href="/bookmarks"
label="Bookmarks"
icon="#fa-bookmark"
pinnable="true"
pinIndex={4}
/>
</PageList> </PageList>
{#if listsLength} {#if listsLength}
@ -56,7 +34,7 @@
label={list.title} label={list.title}
icon="#fa-bars" icon="#fa-bars"
pinnable="true" pinnable="true"
pinIndex={4 + i} pinIndex={staticPinnablesLength + i}
/> />
{/each} {/each}
</PageList> </PageList>
@ -152,13 +130,43 @@
RadioGroup, RadioGroup,
FocusRestoration FocusRestoration
}, },
data: () => ({
staticPinnables: [
{
href: '/local',
label: 'Local Timeline',
icon: '#fa-users'
},
{
href: '/federated',
label: 'Federated Timeline',
icon: '#fa-globe'
},
{
href: '/favorites',
label: 'Favorites',
icon: '#fa-star'
},
{
href: '/direct',
label: 'Direct messages',
icon: '#fa-envelope'
},
{
href: '/bookmarks',
label: 'Bookmarks',
icon: '#fa-bookmark'
}
]
}),
computed: { computed: {
isLockedAccount: ({ $currentVerifyCredentials }) => $currentVerifyCredentials && $currentVerifyCredentials.locked, isLockedAccount: ({ $currentVerifyCredentials }) => $currentVerifyCredentials && $currentVerifyCredentials.locked,
followRequestsLabel: ({ $hasFollowRequests, $numberOfFollowRequests }) => ( followRequestsLabel: ({ $hasFollowRequests, $numberOfFollowRequests }) => (
`Follow requests${$hasFollowRequests ? ` (${$numberOfFollowRequests})` : ''}` `Follow requests${$hasFollowRequests ? ` (${$numberOfFollowRequests})` : ''}`
), ),
listsLength: ({ $lists }) => $lists ? $lists.length : 0, listsLength: ({ $lists }) => $lists ? $lists.length : 0,
numPinnable: ({ listsLength }) => listsLength + 4 // 4 because of local/federated/favs/direct staticPinnablesLength: ({ staticPinnables }) => staticPinnables.length,
numPinnable: ({ listsLength, staticPinnablesLength }) => listsLength + staticPinnablesLength
} }
} }
</script> </script>

View file

@ -1 +1,2 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1792 1792"><path d="M1420 128q23 0 44 9 33 13 52.5 41t19.5 62v1289q0 34-19.5 62t-52.5 41q-19 8-44 8-48 0-83-32l-441-424-441 424q-36 33-83 33-23 0-44-9-33-13-52.5-41t-19.5-62v-1289q0-34 19.5-62t52.5-41q21-9 44-9h1048z" fill="#fff"/></svg> <?xml version="1.0" encoding="utf-8"?>
<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1420 128q23 0 44 9 33 13 52.5 41t19.5 62v1289q0 34-19.5 62t-52.5 41q-19 8-44 8-48 0-83-32l-441-424-441 424q-36 33-83 33-23 0-44-9-33-13-52.5-41t-19.5-62v-1289q0-34 19.5-62t52.5-41q21-9 44-9h1048z" fill="#fff"/></svg>

Before

Width:  |  Height:  |  Size: 291 B

After

Width:  |  Height:  |  Size: 356 B

View file

@ -0,0 +1,25 @@
import {
communityNavButton, getNthStatus,
getNthStatusOptionsButton, homeNavButton
} from '../utils'
import { loginAsFoobar } from '../roles'
import { Selector as $ } from 'testcafe'
import { postAs } from '../serverActions'
fixture`135-bookmarks.js`
.page`http://localhost:4002`
test('Can open a report UI from a status', async t => {
await postAs('admin', 'hey bookmark this')
await loginAsFoobar(t)
await t
.hover(getNthStatus(1))
.click(getNthStatusOptionsButton(1))
.click($('.modal-dialog button').withText('Bookmark'))
.click(communityNavButton)
.click($('a').withText('Bookmarks'))
.expect(getNthStatus(1).innerText).contains('hey bookmark this')
.click(homeNavButton)
.click(getNthStatusOptionsButton(1))
.click($('.modal-dialog button').withText('Unbookmark'))
})