Mastodon
/
Pinafore-Web-Client-Frontend
mirror of https://github.com/nolanlawson/pinafore
1
0
Fork 0
Code Issues Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
bin/build-svg.js
View File

@ -15,9 +15,10 @@ async function readSvg (svg) {
const optimized = (await svgo.optimize(content))
const $optimized = $(optimized.data)
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>')
.attr('id', svg.id)
.attr('viewBox', $optimized.attr('viewBox'))
.attr('viewBox', viewBox)
.append($path)
return $.xml($symbol)
}

4
bin/svgs.js
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-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-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-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' }
]

10
src/routes/_components/dialog/components/StatusOptionsDialog.html
View File

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

72
src/routes/_pages/community/index.html
View File

@ -12,36 +12,14 @@
</h2>
<PageList label="Timelines">
<PageListItem href="/local"
label="Local Timeline"
icon="#fa-users"
pinnable="true"
pinIndex={0}
/>
<PageListItem href="/federated"
label="Federated Timeline"
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}
/>
{#each staticPinnables as staticPinnable, i}
<PageListItem href={staticPinnable.href}
label={staticPinnable.label}
icon={staticPinnable.icon}
pinnable="true"
pinIndex={i}
/>
{/each}
</PageList>
{#if listsLength}
@ -56,7 +34,7 @@
label={list.title}
icon="#fa-bars"
pinnable="true"
pinIndex={4 + i}
pinIndex={staticPinnablesLength + i}
/>
{/each}
</PageList>
@ -152,13 +130,43 @@
RadioGroup,
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: {
isLockedAccount: ({ $currentVerifyCredentials }) => $currentVerifyCredentials && $currentVerifyCredentials.locked,
followRequestsLabel: ({ $hasFollowRequests, $numberOfFollowRequests }) => (
`Follow requests${$hasFollowRequests ? ` (${$numberOfFollowRequests})` : ''}`
),
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>

3
src/thirdparty/font-awesome-svg-png/white/svg/bookmark.svg vendored
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>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 291 B

After

Width:  |  Height:  |  Size: 356 B

25
tests/spec/135-bookmarks.js Normal file
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'))
})