diff --git a/CHANGELOG.md b/CHANGELOG.md index ad03c7602..49ec550cd 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,7 +4,9 @@ All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/). ## [Unreleased] ### Changed +- Greentext now has separate color slot for it - Removed the use of with_move parameters when fetching notifications +- Push notifications now are the same as normal notfication, and are localized. ### Fixed - Weird bug related to post being sent seemingly after pasting with keyboard (hopefully) @@ -15,6 +17,12 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/). - Added private notifications option for push notifications - 'Copy link' button for statuses (in the ellipsis menu) - Autocomplete domains from list of known instances +- 'Bot' settings option and badge +- Added profile meta data fields that can be set in profile settings +- Added option to reset avatar/banner in profile settings +- Descriptions can be set on uploaded files before posting +- Added status preview option to preview your statuses before posting +- When a post is a reply to an unavailable post, the 'Reply to'-text has a strike-through style ### Changed - Registration page no longer requires email if the server is configured not to require it @@ -22,13 +30,24 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/). - Close the media modal on navigation events - Add colons to the emoji alt text, to make them copyable - Add better visual indication for drag-and-drop for files +- When disabling attachments, the placeholder links now show an icon and the description instead of just IMAGE or VIDEO etc ### Fixed +- Custom Emoji will display in poll options now. - Status ellipsis menu closes properly when selecting certain options - Cropped images look correct in Chrome - Newlines in the muted words settings work again - Clicking on non-latin hashtags won't open a new window - Uploading and drag-dropping multiple files works correctly now. +- Subject field now appears disabled when posting +- Fix status ellipsis menu being cut off in notifications column +- Fixed autocomplete sometimes not returning the right user when there's already some results +- Videos and audio and misc files show description as alt/title properly now +- Clicking on non-image/video files no longer opens an empty modal +- Audio files can now be played back in the frontend with hidden attachments +- Videos are not cropped awkwardly in the uploads section anymore +- Reply filtering options in Settings -> Filtering now work again using filtering on server +- Don't show just blank-screen when cookies are disabled ## [2.0.3] - 2020-05-02 ### Fixed @@ -90,6 +109,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/). - Ability to change user's email - About page - Added remote user redirect +- Bookmarks ### Changed - changed the way fading effects for user profile/long statuses works, now uses css-mask instead of gradient background hacks which weren't exactly compatible with semi-transparent themes ### Fixed diff --git a/docs/USER_GUIDE.md b/docs/USER_GUIDE.md index f417f33d7..241ad331b 100644 --- a/docs/USER_GUIDE.md +++ b/docs/USER_GUIDE.md @@ -8,8 +8,6 @@ > > --Catbag -Pleroma-FE user interface is modeled after Qvitter which is modeled after older Twitter design. It provides a simple 2-column interface for microblogging. While being simple by default it also provides many powerful customization options. - ## Posting, reading, basic functions. After registering and logging in you're presented with your timeline in right column and new post form with timeline list and notifications in the left column. diff --git a/docs/index.md b/docs/index.md new file mode 100644 index 000000000..8764f9ab2 --- /dev/null +++ b/docs/index.md @@ -0,0 +1,8 @@ +# Introduction to Pleroma-FE +## What is Pleroma-FE? + +Pleroma-FE is the default user-facing frontend for Pleroma. It's user interface is modeled after Qvitter which is modeled after an older Twitter design. It provides a simple 2-column interface for microblogging. While being simple by default it also provides many powerful customization options. + +## How can I use it? + +If your instance uses Pleroma-FE, you can acces it by going to your instance (e.g. ). You can read more about it's basic functionality in the [Pleroma-FE User Guide](./USER_GUIDE.md). We also have [a guide for administrators](./CONFIGURATION.md) and for [hackers/contributors](./HACKING.md). diff --git a/package.json b/package.json index 4d68cc6ee..962311719 100644 --- a/package.json +++ b/package.json @@ -22,12 +22,10 @@ "cropperjs": "^1.4.3", "diff": "^3.0.1", "escape-html": "^1.0.3", - "karma-mocha-reporter": "^2.2.1", + "parse-link-header": "^1.0.1", "localforage": "^1.5.0", - "object-path": "^0.11.3", "phoenix": "^1.3.0", "portal-vue": "^2.1.4", - "sanitize-html": "^1.13.0", "v-click-outside": "^2.1.1", "vue": "^2.6.11", "vue-chat-scroll": "^1.2.1", @@ -35,10 +33,10 @@ "vue-router": "^3.0.1", "vue-template-compiler": "^2.6.11", "vuelidate": "^0.7.4", - "vuex": "^3.0.1", - "whatwg-fetch": "^2.0.3" + "vuex": "^3.0.1" }, "devDependencies": { + "karma-mocha-reporter": "^2.2.1", "@babel/core": "^7.7.5", "@babel/plugin-transform-runtime": "^7.7.6", "@babel/preset-env": "^7.7.6", diff --git a/src/App.js b/src/App.js index 040138c97..92c4e2f58 100644 --- a/src/App.js +++ b/src/App.js @@ -13,6 +13,7 @@ import MobilePostStatusButton from './components/mobile_post_status_button/mobil import MobileNav from './components/mobile_nav/mobile_nav.vue' import UserReportingModal from './components/user_reporting_modal/user_reporting_modal.vue' import PostStatusModal from './components/post_status_modal/post_status_modal.vue' +import GlobalNoticeList from './components/global_notice_list/global_notice_list.vue' import { windowWidth } from './services/window_utils/window_utils' export default { @@ -32,7 +33,8 @@ export default { MobileNav, SettingsModal, UserReportingModal, - PostStatusModal + PostStatusModal, + GlobalNoticeList }, data: () => ({ mobileActivePanel: 'timeline', diff --git a/src/App.scss b/src/App.scss index f2972eda5..6597b6f41 100644 --- a/src/App.scss +++ b/src/App.scss @@ -858,6 +858,10 @@ nav { display: block; margin-right: 0.8em; } + + .main { + margin-bottom: 7em; + } } .select-multiple { diff --git a/src/App.vue b/src/App.vue index 7b9ad3dc1..03b632ecc 100644 --- a/src/App.vue +++ b/src/App.vue @@ -128,6 +128,7 @@ + diff --git a/src/boot/after_store.js b/src/boot/after_store.js index 0db035475..302b278c5 100644 --- a/src/boot/after_store.js +++ b/src/boot/after_store.js @@ -8,38 +8,64 @@ import backendInteractorService from '../services/backend_interactor_service/bac import { CURRENT_VERSION } from '../services/theme_data/theme_data.service.js' import { applyTheme } from '../services/style_setter/style_setter.js' -const getStatusnetConfig = async ({ store }) => { +let staticInitialResults = null + +const parsedInitialResults = () => { + if (!document.getElementById('initial-results')) { + return null + } + if (!staticInitialResults) { + staticInitialResults = JSON.parse(document.getElementById('initial-results').textContent) + } + return staticInitialResults +} + +const preloadFetch = async (request) => { + const data = parsedInitialResults() + if (!data || !data[request]) { + return window.fetch(request) + } + const requestData = JSON.parse(atob(data[request])) + return { + ok: true, + json: () => requestData, + text: () => requestData + } +} + +const getInstanceConfig = async ({ store }) => { try { - const res = await window.fetch('/api/statusnet/config.json') + const res = await preloadFetch('/api/v1/instance') if (res.ok) { const data = await res.json() - const { name, closed: registrationClosed, textlimit, uploadlimit, server, vapidPublicKey, safeDMMentionsEnabled } = data.site + const textlimit = data.max_toot_chars + const vapidPublicKey = data.pleroma.vapid_public_key - store.dispatch('setInstanceOption', { name: 'name', value: name }) - store.dispatch('setInstanceOption', { name: 'registrationOpen', value: (registrationClosed === '0') }) - store.dispatch('setInstanceOption', { name: 'textlimit', value: parseInt(textlimit) }) - store.dispatch('setInstanceOption', { name: 'server', value: server }) - store.dispatch('setInstanceOption', { name: 'safeDM', value: safeDMMentionsEnabled !== '0' }) - - // TODO: default values for this stuff, added if to not make it break on - // my dev config out of the box. - if (uploadlimit) { - store.dispatch('setInstanceOption', { name: 'uploadlimit', value: parseInt(uploadlimit.uploadlimit) }) - store.dispatch('setInstanceOption', { name: 'avatarlimit', value: parseInt(uploadlimit.avatarlimit) }) - store.dispatch('setInstanceOption', { name: 'backgroundlimit', value: parseInt(uploadlimit.backgroundlimit) }) - store.dispatch('setInstanceOption', { name: 'bannerlimit', value: parseInt(uploadlimit.bannerlimit) }) - } + store.dispatch('setInstanceOption', { name: 'textlimit', value: textlimit }) if (vapidPublicKey) { store.dispatch('setInstanceOption', { name: 'vapidPublicKey', value: vapidPublicKey }) } - - return data.site.pleromafe } else { throw (res) } } catch (error) { - console.error('Could not load statusnet config, potentially fatal') + console.error('Could not load instance config, potentially fatal') + console.error(error) + } +} + +const getBackendProvidedConfig = async ({ store }) => { + try { + const res = await window.fetch('/api/pleroma/frontend_configurations') + if (res.ok) { + const data = await res.json() + return data.pleroma_fe + } else { + throw (res) + } + } catch (error) { + console.error('Could not load backend-provided frontend config, potentially fatal') console.error(error) } } @@ -132,7 +158,7 @@ const getTOS = async ({ store }) => { const getInstancePanel = async ({ store }) => { try { - const res = await window.fetch('/instance/panel.html') + const res = await preloadFetch('/instance/panel.html') if (res.ok) { const html = await res.text() store.dispatch('setInstanceOption', { name: 'instanceSpecificPanelContent', value: html }) @@ -189,24 +215,33 @@ const getAppSecret = async ({ store }) => { const resolveStaffAccounts = ({ store, accounts }) => { const nicknames = accounts.map(uri => uri.split('/').pop()) - nicknames.map(nickname => store.dispatch('fetchUser', nickname)) store.dispatch('setInstanceOption', { name: 'staffAccounts', value: nicknames }) } const getNodeInfo = async ({ store }) => { try { - const res = await window.fetch('/nodeinfo/2.0.json') + const res = await preloadFetch('/nodeinfo/2.0.json') if (res.ok) { const data = await res.json() const metadata = data.metadata const features = metadata.features + store.dispatch('setInstanceOption', { name: 'name', value: metadata.nodeName }) + store.dispatch('setInstanceOption', { name: 'registrationOpen', value: data.openRegistrations }) store.dispatch('setInstanceOption', { name: 'mediaProxyAvailable', value: features.includes('media_proxy') }) + store.dispatch('setInstanceOption', { name: 'safeDM', value: features.includes('safe_dm_mentions') }) store.dispatch('setInstanceOption', { name: 'chatAvailable', value: features.includes('chat') }) store.dispatch('setInstanceOption', { name: 'gopherAvailable', value: features.includes('gopher') }) store.dispatch('setInstanceOption', { name: 'pollsAvailable', value: features.includes('polls') }) store.dispatch('setInstanceOption', { name: 'pollLimits', value: metadata.pollLimits }) store.dispatch('setInstanceOption', { name: 'mailerEnabled', value: metadata.mailerEnabled }) + const uploadLimits = metadata.uploadLimits + store.dispatch('setInstanceOption', { name: 'uploadlimit', value: parseInt(uploadLimits.general) }) + store.dispatch('setInstanceOption', { name: 'avatarlimit', value: parseInt(uploadLimits.avatar) }) + store.dispatch('setInstanceOption', { name: 'backgroundlimit', value: parseInt(uploadLimits.background) }) + store.dispatch('setInstanceOption', { name: 'bannerlimit', value: parseInt(uploadLimits.banner) }) + store.dispatch('setInstanceOption', { name: 'fieldsLimits', value: metadata.fieldsLimits }) + store.dispatch('setInstanceOption', { name: 'restrictedNicknames', value: metadata.restrictedNicknames }) store.dispatch('setInstanceOption', { name: 'postFormats', value: metadata.postFormats }) @@ -257,7 +292,7 @@ const getNodeInfo = async ({ store }) => { const setConfig = async ({ store }) => { // apiConfig, staticConfig - const configInfos = await Promise.all([getStatusnetConfig({ store }), getStaticConfig()]) + const configInfos = await Promise.all([getBackendProvidedConfig({ store }), getStaticConfig()]) const apiConfig = configInfos[0] const staticConfig = configInfos[1] @@ -280,6 +315,11 @@ const checkOAuthToken = async ({ store }) => { const afterStoreSetup = async ({ store, i18n }) => { const width = windowWidth() store.dispatch('setMobileLayout', width <= 800) + + const overrides = window.___pleromafe_dev_overrides || {} + const server = (typeof overrides.target !== 'undefined') ? overrides.target : window.location.origin + store.dispatch('setInstanceOption', { name: 'server', value: server }) + await setConfig({ store }) const { customTheme, customThemeSource } = store.state.config @@ -299,16 +339,18 @@ const afterStoreSetup = async ({ store, i18n }) => { } // Now we can try getting the server settings and logging in + // Most of these are preloaded into the index.html so blocking is minimized await Promise.all([ checkOAuthToken({ store }), - getTOS({ store }), getInstancePanel({ store }), - getStickers({ store }), - getNodeInfo({ store }) + getNodeInfo({ store }), + getInstanceConfig({ store }) ]) // Start fetching things that don't need to block the UI store.dispatch('fetchMutes') + getTOS({ store }) + getStickers({ store }) const router = new VueRouter({ mode: 'history', diff --git a/src/boot/routes.js b/src/boot/routes.js index d98a3b503..f63d8adfa 100644 --- a/src/boot/routes.js +++ b/src/boot/routes.js @@ -2,6 +2,7 @@ import PublicTimeline from 'components/public_timeline/public_timeline.vue' import PublicAndExternalTimeline from 'components/public_and_external_timeline/public_and_external_timeline.vue' import FriendsTimeline from 'components/friends_timeline/friends_timeline.vue' import TagTimeline from 'components/tag_timeline/tag_timeline.vue' +import BookmarkTimeline from 'components/bookmark_timeline/bookmark_timeline.vue' import ConversationPage from 'components/conversation-page/conversation-page.vue' import Interactions from 'components/interactions/interactions.vue' import DMs from 'components/dm_timeline/dm_timeline.vue' @@ -40,6 +41,7 @@ export default (store) => { { name: 'public-timeline', path: '/main/public', component: PublicTimeline }, { name: 'friends', path: '/main/friends', component: FriendsTimeline, beforeEnter: validateAuthenticatedRoute }, { name: 'tag-timeline', path: '/tag/:tag', component: TagTimeline }, + { name: 'bookmarks', path: '/bookmarks', component: BookmarkTimeline }, { name: 'conversation', path: '/notice/:id', component: ConversationPage, meta: { dontScroll: true } }, { name: 'remote-user-profile-acct', path: '/remote-users/(@?):username([^/@]+)@:hostname([^/@]+)', diff --git a/src/components/account_actions/account_actions.vue b/src/components/account_actions/account_actions.vue index 744b77d53..029e70968 100644 --- a/src/components/account_actions/account_actions.vue +++ b/src/components/account_actions/account_actions.vue @@ -3,6 +3,7 @@
@@ -85,6 +91,8 @@
.panel-body { height: 100%; overflow-y: hidden; diff --git a/src/components/settings_modal/tabs/filtering_tab.js b/src/components/settings_modal/tabs/filtering_tab.js index 224a7f479..3b2df5560 100644 --- a/src/components/settings_modal/tabs/filtering_tab.js +++ b/src/components/settings_modal/tabs/filtering_tab.js @@ -37,6 +37,9 @@ const FilteringTab = { }) }, deep: true + }, + replyVisibility () { + this.$store.dispatch('queueFlushAll') } } } diff --git a/src/components/settings_modal/tabs/profile_tab.js b/src/components/settings_modal/tabs/profile_tab.js index 8658b0977..bd6bef6ab 100644 --- a/src/components/settings_modal/tabs/profile_tab.js +++ b/src/components/settings_modal/tabs/profile_tab.js @@ -1,4 +1,5 @@ import unescape from 'lodash/unescape' +import merge from 'lodash/merge' import ImageCropper from 'src/components/image_cropper/image_cropper.vue' import ScopeSelector from 'src/components/scope_selector/scope_selector.vue' import fileSizeFormatService from 'src/components/../services/file_size_format/file_size_format.js' @@ -16,6 +17,7 @@ const ProfileTab = { newLocked: this.$store.state.users.currentUser.locked, newNoRichText: this.$store.state.users.currentUser.no_rich_text, newDefaultScope: this.$store.state.users.currentUser.default_scope, + newFields: this.$store.state.users.currentUser.fields.map(field => ({ name: field.name, value: field.value })), hideFollows: this.$store.state.users.currentUser.hide_follows, hideFollowers: this.$store.state.users.currentUser.hide_followers, hideFollowsCount: this.$store.state.users.currentUser.hide_follows_count, @@ -23,6 +25,7 @@ const ProfileTab = { showRole: this.$store.state.users.currentUser.show_role, role: this.$store.state.users.currentUser.role, discoverable: this.$store.state.users.currentUser.discoverable, + bot: this.$store.state.users.currentUser.bot, allowFollowingMove: this.$store.state.users.currentUser.allow_following_move, pickAvatarBtnVisible: true, bannerUploading: false, @@ -62,6 +65,45 @@ const ProfileTab = { ...this.$store.state.instance.emoji, ...this.$store.state.instance.customEmoji ] }) + }, + userSuggestor () { + return suggestor({ + users: this.$store.state.users.users, + updateUsersList: (query) => this.$store.dispatch('searchUsers', { query }) + }) + }, + fieldsLimits () { + return this.$store.state.instance.fieldsLimits + }, + maxFields () { + return this.fieldsLimits ? this.fieldsLimits.maxFields : 0 + }, + defaultAvatar () { + return this.$store.state.instance.server + this.$store.state.instance.defaultAvatar + }, + defaultBanner () { + return this.$store.state.instance.server + this.$store.state.instance.defaultBanner + }, + isDefaultAvatar () { + const baseAvatar = this.$store.state.instance.defaultAvatar + return !(this.$store.state.users.currentUser.profile_image_url) || + this.$store.state.users.currentUser.profile_image_url.includes(baseAvatar) + }, + isDefaultBanner () { + const baseBanner = this.$store.state.instance.defaultBanner + return !(this.$store.state.users.currentUser.cover_photo) || + this.$store.state.users.currentUser.cover_photo.includes(baseBanner) + }, + isDefaultBackground () { + return !(this.$store.state.users.currentUser.background_image) + }, + avatarImgSrc () { + const src = this.$store.state.users.currentUser.profile_image_url_original + return (!src) ? this.defaultAvatar : src + }, + bannerImgSrc () { + const src = this.$store.state.users.currentUser.cover_photo + return (!src) ? this.defaultBanner : src } }, methods: { @@ -74,17 +116,21 @@ const ProfileTab = { // Backend notation. /* eslint-disable camelcase */ display_name: this.newName, + fields_attributes: this.newFields.filter(el => el != null), default_scope: this.newDefaultScope, no_rich_text: this.newNoRichText, hide_follows: this.hideFollows, hide_followers: this.hideFollowers, discoverable: this.discoverable, + bot: this.bot, allow_following_move: this.allowFollowingMove, hide_follows_count: this.hideFollowsCount, hide_followers_count: this.hideFollowersCount, show_role: this.showRole /* eslint-enable camelcase */ } }).then((user) => { + this.newFields.splice(user.fields.length) + merge(this.newFields, user.fields) this.$store.commit('addNewUsers', [user]) this.$store.commit('setCurrentUser', user) }) @@ -92,6 +138,16 @@ const ProfileTab = { changeVis (visibility) { this.newDefaultScope = visibility }, + addField () { + if (this.newFields.length < this.maxFields) { + this.newFields.push({ name: '', value: '' }) + return true + } + return false + }, + deleteField (index, event) { + this.$delete(this.newFields, index) + }, uploadFile (slot, e) { const file = e.target.files[0] if (!file) { return } @@ -121,11 +177,29 @@ const ProfileTab = { } reader.readAsDataURL(file) }, + resetAvatar () { + const confirmed = window.confirm(this.$t('settings.reset_avatar_confirm')) + if (confirmed) { + this.submitAvatar(undefined, '') + } + }, + resetBanner () { + const confirmed = window.confirm(this.$t('settings.reset_banner_confirm')) + if (confirmed) { + this.submitBanner('') + } + }, + resetBackground () { + const confirmed = window.confirm(this.$t('settings.reset_background_confirm')) + if (confirmed) { + this.submitBackground('') + } + }, submitAvatar (cropper, file) { const that = this return new Promise((resolve, reject) => { function updateAvatar (avatar) { - that.$store.state.api.backendInteractor.updateAvatar({ avatar }) + that.$store.state.api.backendInteractor.updateProfileImages({ avatar }) .then((user) => { that.$store.commit('addNewUsers', [user]) that.$store.commit('setCurrentUser', user) @@ -143,11 +217,11 @@ const ProfileTab = { } }) }, - submitBanner () { - if (!this.bannerPreview) { return } + submitBanner (banner) { + if (!this.bannerPreview && banner !== '') { return } this.bannerUploading = true - this.$store.state.api.backendInteractor.updateBanner({ banner: this.banner }) + this.$store.state.api.backendInteractor.updateProfileImages({ banner }) .then((user) => { this.$store.commit('addNewUsers', [user]) this.$store.commit('setCurrentUser', user) @@ -158,11 +232,11 @@ const ProfileTab = { }) .then(() => { this.bannerUploading = false }) }, - submitBg () { - if (!this.backgroundPreview) { return } - let background = this.background + submitBackground (background) { + if (!this.backgroundPreview && background !== '') { return } + this.backgroundUploading = true - this.$store.state.api.backendInteractor.updateBg({ background }).then((data) => { + this.$store.state.api.backendInteractor.updateProfileImages({ background }).then((data) => { if (!data.error) { this.$store.commit('addNewUsers', [data]) this.$store.commit('setCurrentUser', data) diff --git a/src/components/settings_modal/tabs/profile_tab.scss b/src/components/settings_modal/tabs/profile_tab.scss index 4aab81eb7..e14cf054c 100644 --- a/src/components/settings_modal/tabs/profile_tab.scss +++ b/src/components/settings_modal/tabs/profile_tab.scss @@ -13,8 +13,14 @@ height: auto; } - .banner { + .banner-background-preview { max-width: 100%; + width: 300px; + position: relative; + + img { + width: 100%; + } } .uploading { @@ -26,18 +32,40 @@ width: 100%; } - .bg { - max-width: 100%; + .current-avatar-container { + position: relative; + width: 150px; + height: 150px; } .current-avatar { display: block; - width: 150px; - height: 150px; + width: 100%; + height: 100%; border-radius: $fallback--avatarRadius; border-radius: var(--avatarRadius, $fallback--avatarRadius); } + .reset-button { + position: absolute; + top: 0.2em; + right: 0.2em; + border-radius: $fallback--tooltipRadius; + border-radius: var(--tooltipRadius, $fallback--tooltipRadius); + background-color: rgba(0, 0, 0, 0.6); + opacity: 0.7; + color: white; + width: 1.5em; + height: 1.5em; + text-align: center; + line-height: 1.5em; + font-size: 1.5em; + cursor: pointer; + &:hover { + opacity: 1; + } + } + .oauth-tokens { width: 100%; @@ -79,4 +107,22 @@ .setting-subitem { margin-left: 1.75em; } + + .profile-fields { + display: flex; + + &>.emoji-input { + flex: 1 1 auto; + margin: 0 .2em .5em; + min-width: 0; + } + + &>.icon-container { + width: 20px; + + &>.icon-cancel { + vertical-align: sub; + } + } + } } diff --git a/src/components/settings_modal/tabs/profile_tab.vue b/src/components/settings_modal/tabs/profile_tab.vue index fff4f970c..cf88c4e4f 100644 --- a/src/components/settings_modal/tabs/profile_tab.vue +++ b/src/components/settings_modal/tabs/profile_tab.vue @@ -95,6 +95,59 @@ {{ $t('settings.discoverable') }}

+
+

{{ $t('settings.profile_fields.label') }}

+
+ + + + + + +
+ +
+
+ + + {{ $t("settings.profile_fields.add_field") }} + +
+

+ + {{ $t('settings.bot') }} + +

@@ -172,10 +238,20 @@

{{ $t('settings.profile_background') }}

+

{{ $t('settings.set_new_profile_background') }}

@@ -191,7 +267,7 @@ diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.vue b/src/components/settings_modal/tabs/theme_tab/theme_tab.vue index fcfad23b6..d14f854ca 100644 --- a/src/components/settings_modal/tabs/theme_tab/theme_tab.vue +++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.vue @@ -256,6 +256,13 @@ :label="$t('settings.links')" /> + +

{{ $t('settings.style.advanced_colors.alert') }}

{{ $t("nav.timeline") }} +
  • + + {{ $t("nav.bookmarks") }} + +
  • this.$store.dispatch('fetchUserIfMissing', nickname)) + }, components: { BasicUserCard }, diff --git a/src/components/status/status.js b/src/components/status/status.js index 4b21b700a..465a51f0e 100644 --- a/src/components/status/status.js +++ b/src/components/status/status.js @@ -143,7 +143,7 @@ const Status = { return this.mergedConfig.hideFilteredStatuses }, hideStatus () { - return (this.hideReply || this.deleted) || (this.muted && this.hideFilteredStatuses) || this.virtualHidden + return this.deleted || (this.muted && this.hideFilteredStatuses) || this.virtualHidden }, isFocused () { // retweet or root of an expanded conversation @@ -166,37 +166,6 @@ const Status = { return user && user.screen_name } }, - hideReply () { - if (this.mergedConfig.replyVisibility === 'all') { - return false - } - if (this.inConversation || !this.isReply) { - return false - } - if (this.status.user.id === this.currentUser.id) { - return false - } - if (this.status.type === 'retweet') { - return false - } - const checkFollowing = this.mergedConfig.replyVisibility === 'following' - for (var i = 0; i < this.status.attentions.length; ++i) { - if (this.status.user.id === this.status.attentions[i].id) { - continue - } - // There's zero guarantee of this working. If we happen to have that user and their - // relationship in store then it will work, but there's kinda little chance of having - // them for people you're not following. - const relationship = this.$store.state.users.relationships[this.status.attentions[i].id] - if (checkFollowing && relationship && relationship.following) { - return false - } - if (this.status.attentions[i].id === this.currentUser.id) { - return false - } - } - return this.status.attentions.length > 0 - }, replySubject () { if (!this.status.summary) return '' const decodedSummary = unescape(this.status.summary) diff --git a/src/components/status/status.vue b/src/components/status/status.vue index 7286c5478..c6b34aabe 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -200,7 +200,7 @@ > @@ -211,7 +211,12 @@ @click.prevent="gotoOriginal(status.in_reply_to_status_id)" > - {{ $t('status.reply_to') }} + + {{ $t('status.reply_to') }} + @@ -394,9 +399,6 @@ $status-margin: 0.75em; } .status-el { - overflow-wrap: break-word; - word-wrap: break-word; - word-break: break-word; border-left-width: 0px; min-width: 0; border-color: $fallback--border; @@ -440,7 +442,7 @@ $status-margin: 0.75em; max-width: 85%; font-weight: bold; - img { + img.emoji { width: 14px; height: 14px; vertical-align: middle; @@ -548,6 +550,10 @@ $status-margin: 0.75em; margin: 0 0.4em 0 0.2em; } + .strikethrough { + text-decoration: line-through; + } + .replies-separator { margin-left: 0.4em; } diff --git a/src/components/status_content/status_content.js b/src/components/status_content/status_content.js index c0a71e8f7..67d9bd3ca 100644 --- a/src/components/status_content/status_content.js +++ b/src/components/status_content/status_content.js @@ -44,14 +44,14 @@ const StatusContent = { return lengthScore > 20 }, longSubject () { - return this.status.summary.length > 900 + return this.status.summary.length > 240 }, // When a status has a subject and is also tall, we should only have one show more/less button. If the default is to collapse statuses with subjects, we just treat it like a status with a subject; otherwise, we just treat it like a tall status. mightHideBecauseSubject () { - return this.status.summary && (!this.tallStatus || this.localCollapseSubjectDefault) + return !!this.status.summary && this.localCollapseSubjectDefault }, mightHideBecauseTall () { - return this.tallStatus && (!this.status.summary || !this.localCollapseSubjectDefault) + return this.tallStatus && !(this.status.summary && this.localCollapseSubjectDefault) }, hideSubjectStatus () { return this.mightHideBecauseSubject && !this.expandingSubject @@ -99,15 +99,8 @@ const StatusContent = { file => !fileType.fileMatchesSomeType(this.galleryTypes, file) ) }, - hasImageAttachments () { - return this.status.attachments.some( - file => fileType.fileType(file.mimetype) === 'image' - ) - }, - hasVideoAttachments () { - return this.status.attachments.some( - file => fileType.fileType(file.mimetype) === 'video' - ) + attachmentTypes () { + return this.status.attachments.map(file => fileType.fileType(file.mimetype)) }, maxThumbnails () { return this.mergedConfig.maxThumbnails @@ -142,12 +135,6 @@ const StatusContent = { return html } }, - contentHtml () { - if (!this.status.summary_html) { - return this.postBodyHtml - } - return this.status.summary_html + '
    ' + this.postBodyHtml - }, ...mapGetters(['mergedConfig']), ...mapState({ betterShadow: state => state.interface.browserSupport.cssFilter, diff --git a/src/components/status_content/status_content.vue b/src/components/status_content/status_content.vue index 2add2fed6..e0221d07b 100644 --- a/src/components/status_content/status_content.vue +++ b/src/components/status_content/status_content.vue @@ -3,45 +3,32 @@
    +
    {{ $t("status.hide_full_subject") }} + - {{ $t("general.show_more") }} - - - + {{ $t("status.show_full_subject") }} -
    @@ -51,31 +38,51 @@ :class="{ 'tall-status-hider_focused': focused }" href="#" @click.prevent="toggleShowMore" - >{{ $t("general.show_more") }} + > + {{ $t("general.show_more") }} +
    -
    {{ $t("general.show_more") }} + > + {{ $t("status.show_content") }} + + + + + + {{ $t("general.show_less") }} + > + {{ tallStatus ? $t("general.show_less") : $t("status.hide_content") }} +
    @@ -131,6 +138,12 @@ $status-margin: 0.75em; flex: 1; min-width: 0; + .status-content-wrapper { + display: flex; + flex-direction: column; + flex-wrap: nowrap; + } + .tall-status { position: relative; height: 220px; @@ -138,7 +151,7 @@ $status-margin: 0.75em; overflow-y: hidden; z-index: 1; .status-content { - height: 100%; + min-height: 0; mask: linear-gradient(to top, white, transparent) bottom/100% 70px no-repeat, linear-gradient(to top, white, white); /* Autoprefixed seem to ignore this one, and also syntax is different */ @@ -166,22 +179,57 @@ $status-margin: 0.75em; word-break: break-all; } + img, video { + max-width: 100%; + max-height: 400px; + vertical-align: middle; + object-fit: contain; + + &.emoji { + width: 32px; + height: 32px; + } + } + + .summary-wrapper { + margin-bottom: 0.5em; + border-style: solid; + border-width: 0 0 1px 0; + border-color: var(--border, $fallback--border); + flex-grow: 0; + } + + .summary { + font-style: italic; + padding-bottom: 0.5em; + } + + .tall-subject { + position: relative; + .summary { + max-height: 2em; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + } + + .tall-subject-hider { + display: inline-block; + word-break: break-all; + // position: absolute; + width: 100%; + text-align: center; + padding-bottom: 0.5em; + } + .status-content { font-family: var(--postFont, sans-serif); line-height: 1.4em; white-space: pre-wrap; - - img, video { - max-width: 100%; - max-height: 400px; - vertical-align: middle; - object-fit: contain; - - &.emoji { - width: 32px; - height: 32px; - } - } + overflow-wrap: break-word; + word-wrap: break-word; + word-break: break-word; blockquote { margin: 0.2em 0 0.2em 2em; @@ -228,7 +276,7 @@ $status-margin: 0.75em; .greentext { color: $fallback--cGreen; - color: var(--cGreen, $fallback--cGreen); + color: var(--postGreentext, $fallback--cGreen); } .timeline :not(.panel-disabled) > { diff --git a/src/components/status_popover/status_popover.js b/src/components/status_popover/status_popover.js index 159132a9e..51e7680c6 100644 --- a/src/components/status_popover/status_popover.js +++ b/src/components/status_popover/status_popover.js @@ -22,6 +22,10 @@ const StatusPopover = { methods: { enter () { if (!this.status) { + if (!this.statusId) { + this.error = true + return + } this.$store.dispatch('fetchStatus', this.statusId) .then(data => (this.error = false)) .catch(e => (this.error = true)) diff --git a/src/components/still-image/still-image.js b/src/components/still-image/still-image.js index cc9880801..8044e9943 100644 --- a/src/components/still-image/still-image.js +++ b/src/components/still-image/still-image.js @@ -4,7 +4,8 @@ const StillImage = { 'referrerpolicy', 'mimetype', 'imageLoadError', - 'imageLoadHandler' + 'imageLoadHandler', + 'alt' ], data () { return { diff --git a/src/components/still-image/still-image.vue b/src/components/still-image/still-image.vue index 08af26f6c..2ebf33ba9 100644 --- a/src/components/still-image/still-image.vue +++ b/src/components/still-image/still-image.vue @@ -11,6 +11,8 @@ @import '../../_variables.scss'; -.contain-fit { - .still-image { - img { - height: 100%; - } - } -} .still-image { position: relative; @@ -38,6 +33,7 @@ width: 100%; height: 100%; display: flex; + align-items: center; &:hover canvas { display: none; @@ -45,8 +41,8 @@ img { width: 100%; + min-height: 100%; object-fit: contain; - align-self: center; } &.animated { diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js index ff2c77ecc..580072f05 100644 --- a/src/components/timeline/timeline.js +++ b/src/components/timeline/timeline.js @@ -46,11 +46,15 @@ const Timeline = { newStatusCount () { return this.timeline.newStatusCount }, - newStatusCountStr () { + showLoadButton () { + if (this.timelineError || this.errorData) return false + return this.timeline.newStatusCount > 0 || this.timeline.flushMarker !== 0 + }, + loadButtonString () { if (this.timeline.flushMarker !== 0) { - return '' + return this.$t('timeline.reload') } else { - return ` (${this.newStatusCount})` + return `${this.$t('timeline.show_new')} (${this.newStatusCount})` } }, classes () { @@ -123,8 +127,6 @@ const Timeline = { if (e.key === '.') this.showNewStatuses() }, showNewStatuses () { - if (this.newStatusCount === 0) return - if (this.timeline.flushMarker !== 0) { this.$store.commit('clearTimeline', { timeline: this.timelineName, excludeUserId: true }) this.$store.commit('queueFlush', { timeline: this.timelineName, id: 0 }) @@ -146,7 +148,7 @@ const Timeline = { showImmediately: true, userId: this.userId, tag: this.tag - }).then(statuses => { + }).then(({ statuses }) => { store.commit('setLoading', { timeline: this.timelineName, value: false }) if (statuses && statuses.length === 0) { this.bottomedOut = true diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue index ef3bb4c86..373eb638f 100644 --- a/src/components/timeline/timeline.vue +++ b/src/components/timeline/timeline.vue @@ -19,14 +19,14 @@ {{ errorData.statusText }}
    diff --git a/src/components/user_avatar/user_avatar.js b/src/components/user_avatar/user_avatar.js index 4adf82113..946530048 100644 --- a/src/components/user_avatar/user_avatar.js +++ b/src/components/user_avatar/user_avatar.js @@ -8,26 +8,20 @@ const UserAvatar = { ], data () { return { - showPlaceholder: false + showPlaceholder: false, + defaultAvatar: `${this.$store.state.instance.server + this.$store.state.instance.defaultAvatar}` } }, components: { StillImage }, - computed: { - imgSrc () { - return this.showPlaceholder ? '/images/avi.png' : this.user.profile_image_url_original - } - }, methods: { + imgSrc (src) { + return (!src || this.showPlaceholder) ? this.defaultAvatar : src + }, imageLoadError () { this.showPlaceholder = true } - }, - watch: { - src () { - this.showPlaceholder = false - } } } diff --git a/src/components/user_avatar/user_avatar.vue b/src/components/user_avatar/user_avatar.vue index 9ffb28d88..3545b8017 100644 --- a/src/components/user_avatar/user_avatar.vue +++ b/src/components/user_avatar/user_avatar.vue @@ -3,7 +3,7 @@ class="avatar" :alt="user.screen_name" :title="user.screen_name" - :src="imgSrc" + :src="imgSrc(user.profile_image_url_original)" :class="{ 'avatar-compact': compact, 'better-shadow': betterShadow }" :image-load-error="imageLoadError" /> diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue index c4a5ce9d6..9529d7f6c 100644 --- a/src/components/user_card/user_card.vue +++ b/src/components/user_card/user_card.vue @@ -70,10 +70,20 @@ > @{{ user.screen_name }} - {{ visibleRole }} + - +
    +