diff --git a/.eslintrc.js b/.eslintrc.js index 3c48baa8..4868f360 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -21,6 +21,8 @@ module.exports = { 'generator-star-spacing': 0, // allow debugger during development 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0, - 'vue/require-prop-types': 0 + 'vue/require-prop-types': 0, + 'vue/no-unused-vars': 0, + 'no-tabs': 0 } } diff --git a/.gitignore b/.gitignore index 479d57c4..c8beda86 100644 --- a/.gitignore +++ b/.gitignore @@ -7,3 +7,4 @@ test/e2e/reports selenium-debug.log .idea/ config/local.json +config/local.*.json diff --git a/.woodpecker.yml b/.woodpecker.yml new file mode 100644 index 00000000..9e66f523 --- /dev/null +++ b/.woodpecker.yml @@ -0,0 +1,54 @@ +pipeline: + lint: + when: + event: + - push + - pull_request + image: node:16 + commands: + - yarn + - yarn lint + - yarn stylelint + + test: + when: + event: + - push + - pull_request + image: node:16 + commands: + - apt update + - apt install firefox-esr -y --no-install-recommends + - yarn + - yarn unit + + build: + when: + event: + - push + branch: + - develop + image: node:16 + commands: + - yarn + - yarn build + + release: + when: + event: + - push + branch: + - develop + image: node:16 + secrets: + - SCW_ACCESS_KEY + - SCW_SECRET_KEY + - SCW_DEFAULT_ORGANIZATION_ID + commands: + - apt-get update && apt-get install -y rclone wget zip + - wget https://github.com/scaleway/scaleway-cli/releases/download/v2.5.1/scaleway-cli_2.5.1_linux_amd64 + - mv scaleway-cli_2.5.1_linux_amd64 scaleway-cli + - chmod +x scaleway-cli + - ./scaleway-cli object config install type=rclone + - zip akkoma-fe.zip -r dist + - rclone copyto akkoma-fe.zip scaleway:akkoma-updates/frontend/akkoma-fe.zip diff --git a/CHANGELOG.md b/CHANGELOG.md index d7cc6994..fac68ac0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -37,6 +37,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/). - Media modal now also displays description and counter position in gallery (i.e. 1/5) - Ability to rearrange order of attachments when uploading - Enabled users to zoom and pan images in media viewer with mouse and touch +- Added frontend ui for account migration ## [2.4.2] - 2022-01-09 diff --git a/index.html b/index.html index baf6d276..1f4e798c 100644 --- a/index.html +++ b/index.html @@ -3,6 +3,12 @@ + Pleroma + + + + + diff --git a/package.json b/package.json index 58aeb363..405b6fe4 100644 --- a/package.json +++ b/package.json @@ -33,6 +33,7 @@ "escape-html": "1.0.3", "js-cookie": "^3.0.1", "localforage": "1.10.0", + "mfm-js": "^0.22.1", "parse-link-header": "1.0.1", "phoenix": "1.6.2", "punycode.js": "2.1.0", diff --git a/src/App.vue b/src/App.vue index 21f6f686..d1d4217b 100644 --- a/src/App.vue +++ b/src/App.vue @@ -15,8 +15,12 @@ class="app-layout container" :class="classes" > -
-
+
+
-
+
-
+
{ const validateAuthenticatedRoute = (to, from, next) => { @@ -69,7 +72,10 @@ export default (store) => { { name: 'search', path: '/search', component: Search, props: (route) => ({ query: route.query.query }) }, { name: 'who-to-follow', path: '/who-to-follow', component: WhoToFollow, beforeEnter: validateAuthenticatedRoute }, { name: 'about', path: '/about', component: About }, - { name: 'user-profile', path: '/:_(users)?/:name', component: UserProfile } + { name: 'user-profile', path: '/:_(users)?/:name', component: UserProfile }, + { name: 'lists', path: '/lists', component: Lists }, + { name: 'list-timeline', path: '/lists/:id', component: ListTimeline }, + { name: 'list-edit', path: '/lists/:id/edit', component: ListEdit } ] if (store.state.instance.pleromaChatMessagesAvailable) { diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js index 66ff7a01..78994145 100644 --- a/src/components/attachment/attachment.js +++ b/src/components/attachment/attachment.js @@ -197,6 +197,26 @@ const Attachment = { const width = image.naturalWidth const height = image.naturalHeight this.$emit('naturalSizeLoad', { id: this.attachment.id, width, height }) + }, + resize (e) { + const target = e.target || e + if (!(target instanceof window.Element)) { return } + + // Reset to default height for empty form, nothing else to do here. + if (target.value === '') { + target.style.height = null + this.$emit('resize') + return + } + + const paddingString = getComputedStyle(target)['padding'] + // remove -px suffix + const padding = Number(paddingString.substring(0, paddingString.length - 2)) + + target.style.height = 'auto' + const newHeight = Math.floor(target.scrollHeight - padding * 2) + target.style.height = `${newHeight}px` + this.$emit('resize', newHeight) } } } diff --git a/src/components/attachment/attachment.scss b/src/components/attachment/attachment.scss index b2dea98d..2ef5cf4d 100644 --- a/src/components/attachment/attachment.scss +++ b/src/components/attachment/attachment.scss @@ -16,7 +16,7 @@ .attachment-wrapper { flex: 1 1 auto; - height: 100%; + height: 200px; position: relative; overflow: hidden; } @@ -33,7 +33,8 @@ line-height: 1.5; padding: 0.5em; margin: 0; - white-space: nowrap; + white-space: pre-line; + word-break: break-word; text-overflow: ellipsis; overflow: hidden; } @@ -52,6 +53,19 @@ .description-field { flex: 1; min-width: 0; + + box-sizing: content-box; + overflow: hidden; + transition: min-height 200ms 100ms; + + padding-bottom: var(--_padding); + height: calc(var(--post-line-height) * 1em); + min-height: calc(var(--post-line-height) * 1em); + resize: none; + + &.scrollable-form { + overflow-y: auto; + } } & .placeholder-container, diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue index 2a89886d..f2354524 100644 --- a/src/components/attachment/attachment.vue +++ b/src/components/attachment/attachment.vue @@ -248,14 +248,15 @@ class="description-container" :class="{ '-static': !edit }" > - + rows="1" + cols="1" + @input="resize" + />

{{ localDescription }}

diff --git a/src/components/chat_title/chat_title.vue b/src/components/chat_title/chat_title.vue index 7f6aaaa4..1fafbf9a 100644 --- a/src/components/chat_title/chat_title.vue +++ b/src/components/chat_title/chat_title.vue @@ -4,8 +4,8 @@ :title="title" > + + + + diff --git a/src/components/list_edit/list_edit.js b/src/components/list_edit/list_edit.js new file mode 100644 index 00000000..9d828506 --- /dev/null +++ b/src/components/list_edit/list_edit.js @@ -0,0 +1,91 @@ +import { mapState, mapGetters } from 'vuex' +import BasicUserCard from '../basic_user_card/basic_user_card.vue' +import ListUserSearch from '../list_user_search/list_user_search.vue' +import UserAvatar from '../user_avatar/user_avatar.vue' +import { library } from '@fortawesome/fontawesome-svg-core' +import { + faSearch, + faChevronLeft +} from '@fortawesome/free-solid-svg-icons' + +library.add( + faSearch, + faChevronLeft +) + +const ListNew = { + components: { + BasicUserCard, + UserAvatar, + ListUserSearch + }, + data () { + return { + title: '', + userIds: [], + selectedUserIds: [] + } + }, + created () { + this.$store.dispatch('fetchList', { id: this.id }) + .then(() => { this.title = this.findListTitle(this.id) }) + this.$store.dispatch('fetchListAccounts', { id: this.id }) + .then(() => { + this.selectedUserIds = this.findListAccounts(this.id) + this.selectedUserIds.forEach(userId => { + this.$store.dispatch('fetchUserIfMissing', userId) + }) + }) + }, + computed: { + id () { + return this.$route.params.id + }, + users () { + return this.userIds.map(userId => this.findUser(userId)) + }, + selectedUsers () { + return this.selectedUserIds.map(userId => this.findUser(userId)).filter(user => user) + }, + ...mapState({ + currentUser: state => state.users.currentUser + }), + ...mapGetters(['findUser', 'findListTitle', 'findListAccounts']) + }, + methods: { + onInput () { + this.search(this.query) + }, + selectUser (user) { + if (this.selectedUserIds.includes(user.id)) { + this.removeUser(user.id) + } else { + this.addUser(user) + } + }, + isSelected (user) { + return this.selectedUserIds.includes(user.id) + }, + addUser (user) { + this.selectedUserIds.push(user.id) + }, + removeUser (userId) { + this.selectedUserIds = this.selectedUserIds.filter(id => id !== userId) + }, + onResults (results) { + this.userIds = results + }, + updateList () { + this.$store.dispatch('setList', { id: this.id, title: this.title }) + this.$store.dispatch('setListAccounts', { id: this.id, accountIds: this.selectedUserIds }) + + this.$router.push({ name: 'list-timeline', params: { id: this.id } }) + }, + deleteList () { + this.$store.dispatch('deleteList', { id: this.id }) + this.$router.push({ name: 'lists' }) + } + } +} + +export default ListNew diff --git a/src/components/list_edit/list_edit.vue b/src/components/list_edit/list_edit.vue new file mode 100644 index 00000000..af46c4b8 --- /dev/null +++ b/src/components/list_edit/list_edit.vue @@ -0,0 +1,108 @@ + + + + + diff --git a/src/components/list_new/list_new.js b/src/components/list_new/list_new.js new file mode 100644 index 00000000..07ababe5 --- /dev/null +++ b/src/components/list_new/list_new.js @@ -0,0 +1,79 @@ +import { mapState, mapGetters } from 'vuex' +import BasicUserCard from '../basic_user_card/basic_user_card.vue' +import UserAvatar from '../user_avatar/user_avatar.vue' +import ListUserSearch from '../list_user_search/list_user_search.vue' +import { library } from '@fortawesome/fontawesome-svg-core' +import { + faSearch, + faChevronLeft +} from '@fortawesome/free-solid-svg-icons' + +library.add( + faSearch, + faChevronLeft +) + +const ListNew = { + components: { + BasicUserCard, + UserAvatar, + ListUserSearch + }, + data () { + return { + title: '', + userIds: [], + selectedUserIds: [] + } + }, + computed: { + users () { + return this.userIds.map(userId => this.findUser(userId)) + }, + selectedUsers () { + return this.selectedUserIds.map(userId => this.findUser(userId)) + }, + ...mapState({ + currentUser: state => state.users.currentUser + }), + ...mapGetters(['findUser']) + }, + methods: { + goBack () { + this.$emit('cancel') + }, + onInput () { + this.search(this.query) + }, + selectUser (user) { + if (this.selectedUserIds.includes(user.id)) { + this.removeUser(user.id) + } else { + this.addUser(user) + } + }, + isSelected (user) { + return this.selectedUserIds.includes(user.id) + }, + addUser (user) { + this.selectedUserIds.push(user.id) + }, + removeUser (userId) { + this.selectedUserIds = this.selectedUserIds.filter(id => id !== userId) + }, + onResults (results) { + this.userIds = results + }, + createList () { + // the API has two different endpoints for "creating a list with a name" + // and "updating the accounts on the list". + this.$store.dispatch('createList', { title: this.title }) + .then((list) => { + this.$store.dispatch('setListAccounts', { id: list.id, accountIds: this.selectedUserIds }) + this.$router.push({ name: 'list-timeline', params: { id: list.id } }) + }) + } + } +} + +export default ListNew diff --git a/src/components/list_new/list_new.vue b/src/components/list_new/list_new.vue new file mode 100644 index 00000000..a713b852 --- /dev/null +++ b/src/components/list_new/list_new.vue @@ -0,0 +1,95 @@ + + + + + diff --git a/src/components/list_timeline/list_timeline.js b/src/components/list_timeline/list_timeline.js new file mode 100644 index 00000000..e17abb32 --- /dev/null +++ b/src/components/list_timeline/list_timeline.js @@ -0,0 +1,25 @@ +import Timeline from '../timeline/timeline.vue' +const ListTimeline = { + data () { + return { + listId: null + } + }, + components: { + Timeline + }, + computed: { + timeline () { return this.$store.state.statuses.timelines.list } + }, + created () { + this.listId = this.$route.params.id + this.$store.dispatch('fetchList', { id: this.listId }) + this.$store.dispatch('startFetchingTimeline', { timeline: 'list', listId: this.listId }) + }, + unmounted () { + this.$store.dispatch('stopFetchingTimeline', 'list') + this.$store.commit('clearTimeline', { timeline: 'list' }) + } +} + +export default ListTimeline diff --git a/src/components/list_timeline/list_timeline.vue b/src/components/list_timeline/list_timeline.vue new file mode 100644 index 00000000..a368f861 --- /dev/null +++ b/src/components/list_timeline/list_timeline.vue @@ -0,0 +1,10 @@ + + + diff --git a/src/components/list_user_search/list_user_search.js b/src/components/list_user_search/list_user_search.js new file mode 100644 index 00000000..ab349df3 --- /dev/null +++ b/src/components/list_user_search/list_user_search.js @@ -0,0 +1,46 @@ +import { library } from '@fortawesome/fontawesome-svg-core' +import { + faSearch, + faChevronLeft +} from '@fortawesome/free-solid-svg-icons' +import { debounce } from 'lodash' +import Checkbox from '../checkbox/checkbox.vue' + +library.add( + faSearch, + faChevronLeft +) + +const ListUserSearch = { + components: { + Checkbox + }, + data () { + return { + loading: false, + query: '', + followingOnly: true + } + }, + methods: { + onInput: debounce(function () { + this.search(this.query) + }, 2000), + search (query) { + if (!query) { + this.loading = false + return + } + + this.loading = true + this.userIds = [] + this.$store.dispatch('search', { q: query, resolve: true, type: 'accounts', following: this.followingOnly }) + .then(data => { + this.loading = false + this.$emit('results', data.accounts.map(a => a.id)) + }) + } + } +} + +export default ListUserSearch diff --git a/src/components/list_user_search/list_user_search.vue b/src/components/list_user_search/list_user_search.vue new file mode 100644 index 00000000..fcd2f7da --- /dev/null +++ b/src/components/list_user_search/list_user_search.vue @@ -0,0 +1,45 @@ + + + + diff --git a/src/components/lists/lists.js b/src/components/lists/lists.js new file mode 100644 index 00000000..09c49407 --- /dev/null +++ b/src/components/lists/lists.js @@ -0,0 +1,32 @@ +import ListCard from '../list_card/list_card.vue' +import ListNew from '../list_new/list_new.vue' + +const Lists = { + data () { + return { + isNew: false + } + }, + components: { + ListCard, + ListNew + }, + created () { + this.$store.dispatch('startFetchingLists') + }, + computed: { + lists () { + return this.$store.state.lists.allLists + } + }, + methods: { + cancelNewList () { + this.isNew = false + }, + newList () { + this.isNew = true + } + } +} + +export default Lists diff --git a/src/components/lists/lists.vue b/src/components/lists/lists.vue new file mode 100644 index 00000000..f11a2a02 --- /dev/null +++ b/src/components/lists/lists.vue @@ -0,0 +1,31 @@ + + + diff --git a/src/components/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue index dea1c8c6..7c2af3b9 100644 --- a/src/components/media_modal/media_modal.vue +++ b/src/components/media_modal/media_modal.vue @@ -182,7 +182,8 @@ $modal-view-button-icon-margin: 0.5em; min-height: 1em; max-width: 500px; max-height: 9.5em; - word-break: break-all; + word-break: break-word; + white-space: pre-line; } .modal-image { diff --git a/src/components/mention_link/mention_link.scss b/src/components/mention_link/mention_link.scss index 1d856ff9..cbc68d17 100644 --- a/src/components/mention_link/mention_link.scss +++ b/src/components/mention_link/mention_link.scss @@ -57,7 +57,7 @@ &.-you { & .shortName, & .full { - font-weight: 600; + //font-weight: 600; } } diff --git a/src/components/mention_link/mention_link.vue b/src/components/mention_link/mention_link.vue index 022f04c7..13d663b3 100644 --- a/src/components/mention_link/mention_link.vue +++ b/src/components/mention_link/mention_link.vue @@ -22,18 +22,7 @@ @click.prevent="onClick" > - {{ !useAtIcon ? '@' : '' }}@ { + if (t == null) return null + return t.match(/^[0-9.]+s$/) ? t : null + } + + const genEl = (ast) => concat(ast.map((token) => { + switch (token.type) { + case 'text': { + const text = token.props.text.replace(/(\r\n|\n|\r)/g, '\n') + + const res = [] + for (const t of text.split('\n')) { + res.push(h('br')) + res.push(t) + } + res.shift() + return res + } + + case 'bold': { + return [h('b', genEl(token.children))] + } + + case 'strike': { + return [h('del', genEl(token.children))] + } + + case 'italic': { + return h('i', { + style: 'font-style: oblique;' + }, genEl(token.children)) + } + + case 'fn': { + // TODO: CSSを文字列で組み立てていくと token.props.args.~~~ 経由でCSSインジェクションできるのでよしなにやる + let style + switch (token.props.name) { + case 'tada': { + style = `font-size: 150%;` + 'animation: tada 1s linear infinite both;' + break + } + case 'jelly': { + const speed = validTime(token.props.args.speed) || '1s' + style = `animation: mfm-rubberBand ${speed} linear infinite both;` + break + } + case 'twitch': { + const speed = validTime(token.props.args.speed) || '0.5s' + style = `animation: mfm-twitch ${speed} ease infinite;` + break + } + case 'shake': { + const speed = validTime(token.props.args.speed) || '0.5s' + style = `animation: mfm-shake ${speed} ease infinite;` + break + } + case 'spin': { + const direction = + token.props.args.left ? 'reverse' + : token.props.args.alternate ? 'alternate' + : 'normal' + const anime = + token.props.args.x ? 'mfm-spinX' + : token.props.args.y ? 'mfm-spinY' + : 'mfm-spin' + const speed = validTime(token.props.args.speed) || '1.5s' + style = `animation: ${anime} ${speed} linear infinite; animation-direction: ${direction};` + break + } + case 'jump': { + style = 'animation: mfm-jump 0.75s linear infinite;' + break + } + case 'bounce': { + style = 'animation: mfm-bounce 0.75s linear infinite; transform-origin: center bottom;' + break + } + case 'flip': { + const transform = + (token.props.args.h && token.props.args.v) ? 'scale(-1, -1)' + : token.props.args.v ? 'scaleY(-1)' + : 'scaleX(-1)' + style = `transform: ${transform};` + break + } + case 'x2': { + style = `font-size: 200%;` + break + } + case 'x3': { + style = `font-size: 400%;` + break + } + case 'x4': { + style = `font-size: 600%;` + break + } + case 'font': { + const family = + token.props.args.serif ? 'serif' + : token.props.args.monospace ? 'monospace' + : token.props.args.cursive ? 'cursive' + : token.props.args.fantasy ? 'fantasy' + : token.props.args.emoji ? 'emoji' + : token.props.args.math ? 'math' + : null + if (family) style = `font-family: ${family};` + break + } + case 'blur': { + return h('span', { + class: '_mfm_blur_' + }, genEl(token.children)) + } + case 'rainbow': { + style = 'animation: mfm-rainbow 1s linear infinite;' + break + } + case 'rotate': { + const degrees = parseInt(token.props.args.deg) || '90' + style = `transform: rotate(${degrees}deg); transform-origin: center center;` + break + } + } + if (style == null) { + return h('span', {}, ['$[', token.props.name, ' ', ...genEl(token.children), ']']) + } else { + return h('span', { + style: 'display: inline-block;' + style + }, genEl(token.children)) + } + } + + case 'small': { + return [h('small', { + style: 'opacity: 0.7;' + }, genEl(token.children))] + } + + case 'center': { + return [h('div', { + style: 'text-align:center;' + }, genEl(token.children))] + } + + case 'url': { + return [h('a', { + key: Math.random(), + href: token.props.url, + rel: 'nofollow noopener' + }, token.props.url)] + } + + case 'link': { + console.log(token.props) + return [h('a', { + key: Math.random(), + href: token.props.url, + rel: 'nofollow noopener' + }, genEl(token.children))] + } + + case 'mention': { + const user = this.status.attentions.find((mention) => `@${mention.screen_name}` === token.props.acct || mention.screen_name === token.props.username) + if (user) { + return [h(MentionLink, { + url: user.statusnet_profile_url, + content: token.props.acct, + userScreenName: token.props.acct + })] + } + return null + } + + case 'hashtag': { + return [h('a', { + rel: 'noopener noreferrer', + target: '_blank', + key: token.props.hashtag, + href: this.status.tags.find((hash) => hash.name === token.props.hashtag).url + }, `#${token.props.hashtag}`)] + } + + case 'blockCode': { + return [h('pre', { + key: Math.random(), + lang: token.props.lang + }, token.props.code)] + } + + case 'inlineCode': { + return [h('code', { + key: Math.random(), + display: 'inline' + }, token.props.code)] + } + + case 'quote': { + if (!this.nowrap) { + return [h('div', { + class: 'quote' + }, genEl(token.children))] + } else { + return [h('span', { + class: 'quote' + }, genEl(token.children))] + } + } + + case 'emojiCode': { + const emoj = this.status.emojis.find((emoji) => emoji.shortcode === token.props.name) + if (emoj) { + return [h('div', { + class: 'still-image emoji img' + }, + [h('img', { + key: Math.random(), + title: token.props.name, + alt: token.props.name, + src: this.status.emojis.find((emoji) => emoji.shortcode === token.props.name).static_url + })] + )] + } else { + return `:${token.props.name}:` + } + } + + case 'unicodeEmoji': { + return token.props.emoji + } + + case 'math': { + return [h('pre', { + key: Math.random(), + code: token.props.code + })] + } + + case 'mathInline': { + return [h('pre', { + key: Math.random(), + code: token.props.code, + inline: true + })] + } + + case 'search': { + return [h('a', { + href: `https://www.google.com/search?q=${token.props.query}` + }, token.props.content) + ] + } + + default: { + console.error('unrecognized ast type:', token.type) + + return [] + } + } + })) + + // Parse ast to DOM + return h('span', genEl(ast)) + } +}) diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue index d2d48a03..8d63fe7f 100644 --- a/src/components/mobile_nav/mobile_nav.vue +++ b/src/components/mobile_nav/mobile_nav.vue @@ -67,11 +67,10 @@
-
+ />
+
  • + + {{ $t("nav.lists") }} + +
  • - {{ notification.emoji }} + + + {{ notification.emoji }} + diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue index b46c06aa..e778e27b 100644 --- a/src/components/notifications/notifications.vue +++ b/src/components/notifications/notifications.vue @@ -1,5 +1,8 @@