sam/pleroma-fe
sam
/
pleroma-fe
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

resolve merge conflicts

This commit is contained in:
Absturztaube 2020-12-29 13:00:48 +01:00
parent 026dc263e5 34d8893f1c
commit 381c4e7f82
32 changed files with 200 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
CHANGELOG.md
View File

@ -5,11 +5,16 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
## [Unreleased]
### Fixed
- Follows/Followers tabs on user profiles now display the content properly.
## [2.2.2] - 2020-12-22
### Added
- Mouseover titles for emojis in reaction picker
- Support to input emoji into the search box in reaction picker
- Added some missing unicode emoji
- Added the upload limit to the Features panel in the About page
- Support for solid color wallpaper, instance doesn't have to define a wallpaper anymore
### Fixed
- Fixed the occasional bug where screen would scroll 1px when typing into a reply form
@ -18,13 +23,18 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
- Fixed custom emoji not working in profile field names
- Fixed pinned statuses not appearing in user profiles
- Fixed some elements not being keyboard navigation friendly
- Fixed error handling when updating various profile images
- Fixed your latest chat messages disappearing when closing chat view and opening it again during the same session
- Fixed custom emoji not showing in poll options before voting
- Fixed link color not applied to instance name in topbar
### Changed
- Errors when fetching are now shown with popup errors instead of "Error fetching updates" in panel headers
- Made reply/fav/repeat etc buttons easier to hit
- Adjusted timeline menu clickable area to match the visible button
- Moved external source link from status heading to the ellipsis menu
- Disabled horizontal textarea resize
- Wallpaper is now top-aligned, horizontally centered.
## [2.2.1] - 2020-11-11

2
package.json
View File

@ -55,7 +55,7 @@
"babel-plugin-lodash": "^3.3.4",
"chai": "^3.5.0",
"chalk": "^1.1.3",
"chromedriver": "^2.21.2",
"chromedriver": "^87.0.1",
"connect-history-api-fallback": "^1.1.0",
"cross-spawn": "^4.0.2",
"css-loader": "^0.28.0",

23
src/App.js
View File

@ -16,6 +16,7 @@ import UserReportingModal from './components/user_reporting_modal/user_reporting
import PostStatusModal from './components/post_status_modal/post_status_modal.vue'
import GlobalNoticeList from './components/global_notice_list/global_notice_list.vue'
import { windowWidth, windowHeight } from './services/window_utils/window_utils'
import { mapGetters } from 'vuex'
export default {
name: 'app',
@ -52,17 +53,18 @@ export default {
},
computed: {
currentUser () { return this.$store.state.users.currentUser },
background () {
return this.currentUser.background_image || this.$store.state.instance.background
userBackground () { return this.currentUser.background_image },
instanceBackground () {
return this.mergedConfig.hideInstanceWallpaper
? null
: this.$store.state.instance.background
},
background () { return this.userBackground || this.instanceBackground },
bgStyle () {
return {
'background-image': `url(${this.background})`
}
},
bgAppStyle () {
return {
'--body-background-image': `url(${this.background})`
if (this.background) {
return {
'--body-background-image': `url(${this.background})`
}
}
},
chat () { return this.$store.state.chat.channel.state === 'joined' },
@ -87,7 +89,8 @@ export default {
return {
'max-width': this.$store.getters.mergedConfig.showThirdColumn ? '1400px' : '980px'
}
}
},
...mapGetters(['mergedConfig'])
},
methods: {
updateMobileState () {

4
src/App.scss
View File

@ -14,7 +14,9 @@
right: -20px;
background-size: cover;
background-repeat: no-repeat;
background-position: 0 50%;
background-color: var(--wallpaper);
background-image: var(--body-background-image);
background-position: 50% 50px;
}
i[class^='icon-'] {

3
src/App.vue
View File

@ -1,12 +1,11 @@
<template>
<div
id="app"
:style="bgAppStyle"
:style="bgStyle"
>
<div
id="app_bg_wrapper"
class="app-bg-wrapper"
:style="bgStyle"
/>
<MobileNav v-if="isMobileLayout" />
<DesktopNav v-else />

4
src/components/desktop_nav/desktop_nav.scss
View File

@ -5,6 +5,10 @@
width: 100%;
position: fixed;
a {
color: var(--topBarLink, $fallback--link);
}
.inner-nav {
display: grid;
grid-template-rows: 50px;

6
src/components/extra_buttons/extra_buttons.js
View File

@ -5,7 +5,8 @@ import {
faBookmark,
faEyeSlash,
faThumbtack,
faShareAlt
faShareAlt,
faExternalLinkAlt
} from '@fortawesome/free-solid-svg-icons'
import {
faBookmark as faBookmarkReg
@ -17,7 +18,8 @@ library.add(
faBookmarkReg,
faEyeSlash,
faThumbtack,
faShareAlt
faShareAlt,
faExternalLinkAlt
)
const ExtraButtons = {

29
src/components/extra_buttons/extra_buttons.vue
View File

@ -1,5 +1,6 @@
<template>
<Popover
class="ExtraButtons"
trigger="click"
placement="top"
:offset="{ y: 5 }"
@ -96,11 +97,23 @@
icon="share-alt"
/><span>{{ $t("status.copy_link") }}</span>
</button>
<a
v-if="!status.is_local"
class="button-default dropdown-item dropdown-item-icon"
title="Source"
:href="status.external_url"
target="_blank"
>
<FAIcon
fixed-width
icon="external-link-alt"
/><span>{{ $t("status.external_source") }}</span>
</a>
</div>
</div>
<span
slot="trigger"
class="ExtraButtons"
class="popover-trigger"
>
<FAIcon
class="fa-scale-110 fa-old-padding"
@ -116,13 +129,15 @@
@import '../../_variables.scss';
.ExtraButtons {
position: static;
padding: 10px;
margin: -10px;
.popover-trigger {
position: static;
padding: 10px;
margin: -10px;
&:hover .svg-inline--fa {
color: $fallback--text;
color: var(--text, $fallback--text);
&:hover .svg-inline--fa {
color: $fallback--text;
color: var(--text, $fallback--text);
}
}
}
</style>

25
src/components/global_notice_list/global_notice_list.vue
View File

@ -9,11 +9,15 @@
<div class="notice-message">
{{ $t(notice.messageKey, notice.messageArgs) }}
</div>
<FAIcon
class="fa-scale-110 fa-old-padding"
icon="times"
<button
class="button-unstyled close-notice"
@click="closeNotice(notice)"
/>
>
<FAIcon
class="fa-scale-110 fa-old-padding"
icon="times"
/>
</button>
</div>
</div>
</template>
@ -54,7 +58,7 @@
.global-error {
background-color: var(--alertPopupError, $fallback--cRed);
color: var(--alertPopupErrorText, $fallback--text);
i {
.svg-inline--fa {
color: var(--alertPopupErrorText, $fallback--text);
}
}
@ -62,7 +66,7 @@
.global-warning {
background-color: var(--alertPopupWarning, $fallback--cOrange);
color: var(--alertPopupWarningText, $fallback--text);
i {
.svg-inline--fa {
color: var(--alertPopupWarningText, $fallback--text);
}
}
@ -70,9 +74,16 @@
.global-info {
background-color: var(--alertPopupNeutral, $fallback--fg);
color: var(--alertPopupNeutralText, $fallback--text);
i {
.svg-inline--fa {
color: var(--alertPopupNeutralText, $fallback--text);
}
}
.close-notice {
padding-right: 0.2em;
.svg-inline--fa:hover {
opacity: 0.6;
}
}
}
</style>

15
src/components/image_cropper/image_cropper.js
View File

@ -2,12 +2,10 @@ import Cropper from 'cropperjs'
import 'cropperjs/dist/cropper.css'
import { library } from '@fortawesome/fontawesome-svg-core'
import {
faTimes,
faCircleNotch
} from '@fortawesome/free-solid-svg-icons'
library.add(
faTimes,
faCircleNotch
)
@ -53,8 +51,7 @@ const ImageCropper = {
cropper: undefined,
dataUrl: undefined,
filename: undefined,
submitting: false,
submitError: null
submitting: false
}
},
computed: {
@ -66,9 +63,6 @@ const ImageCropper = {
},
cancelText () {
return this.cancelButtonLabel || this.$t('image_cropper.cancel')
},
submitErrorMsg () {
return this.submitError && this.submitError instanceof Error ? this.submitError.toString() : this.submitError
}
},
methods: {
@ -82,12 +76,8 @@ const ImageCropper = {
},
submit (cropping = true) {
this.submitting = true
this.avatarUploadError = null
this.submitHandler(cropping && this.cropper, this.file)
.then(() => this.destroy())
.catch((err) => {
this.submitError = err
})
.finally(() => {
this.submitting = false
})
@ -113,9 +103,6 @@ const ImageCropper = {
reader.readAsDataURL(this.file)
this.$emit('changed', this.file, reader)
}
},
clearError () {
this.submitError = null
}
},
mounted () {

11
src/components/image_cropper/image_cropper.vue
View File

@ -37,17 +37,6 @@
icon="circle-notch"
/>
</div>
<div
v-if="submitError"
class="alert error"
>
{{ submitErrorMsg }}
<FAIcon
class="fa-scale-110 fa-old-padding"
icon="times"
@click="clearError"
/>
</div>
</div>
<input
ref="input"

1
src/components/popover/popover.vue
View File

@ -95,6 +95,7 @@
box-shadow: none;
width: 100%;
height: 100%;
box-sizing: border-box;
--btnText: var(--popoverText, $fallback--text);

4
src/components/settings_modal/tabs/general_tab.js
View File

@ -34,6 +34,10 @@ const GeneralTab = {
return this.$store.state.instance.postFormats || []
},
instanceSpecificPanelPresent () { return this.$store.state.instance.showInstanceSpecificPanel },
instanceWallpaperUsed () {
return this.$store.state.instance.background &&
!this.$store.state.users.currentUser.background_image
},
...SharedComputedObject()
}
}

5
src/components/settings_modal/tabs/general_tab.vue
View File

@ -16,6 +16,11 @@
{{ $t('settings.show_third_column') }}
</Checkbox>
</li>
<li v-if="instanceWallpaperUsed">
<Checkbox v-model="hideInstanceWallpaper">
{{ $t('settings.hide_wallpaper') }}
</Checkbox>
</li>
</ul>
</div>
<div class="setting-item">

48
src/components/settings_modal/tabs/profile_tab.js
View File

@ -45,9 +45,7 @@ const ProfileTab = {
banner: null,
bannerPreview: null,
background: null,
backgroundPreview: null,
bannerUploadError: null,
backgroundUploadError: null
backgroundPreview: null
}
},
components: {
@ -162,18 +160,18 @@ const ProfileTab = {
if (file.size > this.$store.state.instance[slot + 'limit']) {
const filesize = fileSizeFormatService.fileSizeFormat(file.size)
const allowedsize = fileSizeFormatService.fileSizeFormat(this.$store.state.instance[slot + 'limit'])
this[slot + 'UploadError'] = [
this.$t('upload.error.base'),
this.$t(
'upload.error.file_too_big',
{
this.$store.dispatch('pushGlobalNotice', {
messageKey: 'upload.error.message',
messageArgs: [
this.$t('upload.error.file_too_big', {
filesize: filesize.num,
filesizeunit: filesize.unit,
allowedsize: allowedsize.num,
allowedsizeunit: allowedsize.unit
}
)
].join(' ')
})
],
level: 'error'
})
return
}
// eslint-disable-next-line no-undef
@ -213,8 +211,9 @@ const ProfileTab = {
that.$store.commit('setCurrentUser', user)
resolve()
})
.catch((err) => {
reject(new Error(that.$t('upload.error.base') + ' ' + err.message))
.catch((error) => {
that.displayUploadError(error)
reject(error)
})
}
@ -235,24 +234,27 @@ const ProfileTab = {
this.$store.commit('setCurrentUser', user)
this.bannerPreview = null
})
.catch((err) => {
this.bannerUploadError = this.$t('upload.error.base') + ' ' + err.message
})
.then(() => { this.bannerUploading = false })
.catch(this.displayUploadError)
.finally(() => { this.bannerUploading = false })
},
submitBackground (background) {
if (!this.backgroundPreview && background !== '') { return }
this.backgroundUploading = true
this.$store.state.api.backendInteractor.updateProfileImages({ background }).then((data) => {
if (!data.error) {
this.$store.state.api.backendInteractor.updateProfileImages({ background })
.then((data) => {
this.$store.commit('addNewUsers', [data])
this.$store.commit('setCurrentUser', data)
this.backgroundPreview = null
} else {
this.backgroundUploadError = this.$t('upload.error.base') + data.error
}
this.backgroundUploading = false
})
.catch(this.displayUploadError)
.finally(() => { this.backgroundUploading = false })
},
displayUploadError (error) {
this.$store.dispatch('pushGlobalNotice', {
messageKey: 'upload.error.message',
messageArgs: [error.message],
level: 'error'
})
}
}

23
src/components/settings_modal/tabs/profile_tab.vue
View File

@ -229,17 +229,6 @@
>
{{ $t('general.submit') }}
</button>
<div
v-if="bannerUploadError"
class="alert error"
>
Error: {{ bannerUploadError }}
<FAIcon
class="fa-scale-110 fa-old-padding"
icon="times"
@click="clearUploadError('banner')"
/>
</div>
</div>
<div class="setting-item">
<h2>{{ $t('settings.profile_background') }}</h2>
@ -279,18 +268,6 @@
>
{{ $t('general.submit') }}
</button>
<div
v-if="backgroundUploadError"
class="alert error"
>
Error: {{ backgroundUploadError }}
<FAIcon
size="lg"
class="fa-scale-110 fa-old-padding"
icon="times"
@click="clearUploadError('background')"
/>
</div>
</div>
</div>
</template>

3
src/components/settings_modal/tabs/theme_tab/theme_tab.scss
View File

@ -165,7 +165,8 @@
border-color: var(--border, $fallback--border);
margin: 1em 0;
padding: 1em;
background: var(--body-background-image);
background-color: var(--wallpaper);
background-image: var(--body-background-image);
background-size: cover;
background-position: 50% 50%;

9
src/components/settings_modal/tabs/theme_tab/theme_tab.vue
View File

@ -616,6 +616,15 @@
:disabled="underlayOpacityLocal === 'transparent'"
/>
</div>
<div class="color-item">
<h4>{{ $t('settings.style.advanced_colors.wallpaper') }}</h4>
<ColorInput
v-model="wallpaperColorLocal"
name="wallpaper"
:label="$t('settings.style.advanced_colors.wallpaper')"
:fallback="previewTheme.colors.wallpaper"
/>
</div>
<div class="color-item">
<h4>{{ $t('settings.style.advanced_colors.poll') }}</h4>
<ColorInput

2
src/components/status/status.js
View File

@ -26,7 +26,6 @@ import {
faTimes,
faRetweet,
faReply,
faExternalLinkSquareAlt,
faPlusSquare,
faSmileBeam,
faEllipsisH,
@ -44,7 +43,6 @@ library.add(
faTimes,
faRetweet,
faReply,
faExternalLinkSquareAlt,
faPlusSquare,
faStar,
faSmileBeam,

14
src/components/status/status.scss
View File

@ -139,6 +139,20 @@ $status-margin: 0.75em;
.heading-right {
display: flex;
flex-shrink: 0;
.button-unstyled {
padding: 5px;
margin: -5px;
&:hover svg {
color: $fallback--lightText;
color: var(--lightText, $fallback--lightText);
}
}
.svg-inline--fa {
margin-left: 0.25em;
}
}
.timeago {

23
src/components/status/status.vue
View File

@ -184,30 +184,20 @@
:title="status.visibility | capitalize"
>
<FAIcon
class="fa-scale-110 fa-old-padding"
fixed-width
class="fa-scale-110"
:icon="visibilityIcon(status.visibility)"
/>
</span>
<a
v-if="!status.is_local && !isPreview"
:href="status.external_url"
target="_blank"
class="source_url"
title="Source"
>
<FAIcon
class="fa-scale-110 fa-old-padding"
icon="external-link-square-alt"
/>
</a>
<button
v-if="expandable && !isPreview"
class="button-unstyled"
title="Expand"
:title="$t('status.expand')"
@click.prevent="toggleExpanded"
>
<FAIcon
class="fa-scale-110 fa-old-padding"
fixed-width
class="fa-scale-110"
icon="plus-square"
/>
</button>
@ -217,8 +207,9 @@
@click.prevent="toggleMute"
>
<FAIcon
fixed-width
icon="eye-slash"
class="fa-scale-110 fa-old-padding"
class="fa-scale-110"
/>
</button>
</span>

1
src/components/timeline/timeline.vue
View File

@ -102,6 +102,7 @@
.timeline-heading {
max-width: 100%;
flex-wrap: nowrap;
align-items: center;
.loadmore-button {
flex-shrink: 0;
}

8
src/components/timeline_menu/timeline_menu.js
View File

@ -59,6 +59,14 @@ const TimelineMenu = {
this.isOpen = true
}, 25)
},
blockOpen (event) {
// For the blank area inside the button element.
// Just setting @click.stop="" makes unintuitive behavior when
// menu is open and clicking on the blank area doesn't close it.
if (!this.isOpen) {
event.stopPropagation()
}
},
timelineName () {
const route = this.$route.name
if (route === 'tag-timeline') {

22
src/components/timeline_menu/timeline_menu.vue
View File

@ -65,10 +65,16 @@
slot="trigger"
class="title timeline-menu-title"
>
<span>{{ timelineName() }}</span>
<FAIcon
size="sm"
icon="chevron-down"
<span class="timeline-title">{{ timelineName() }}</span>
<span>
<FAIcon
size="sm"
icon="chevron-down"
/>
</span>
<span
class="click-blocker"
@click="blockOpen"
/>
</div>
</Popover>
@ -117,8 +123,9 @@
cursor: pointer;
user-select: none;
width: 100%;
display: flex;
span {
.timeline-menu-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@ -128,6 +135,11 @@
margin-left: 0.6em;
transition: transform 100ms;
}
.click-blocker {
cursor: default;
flex-grow: 1;
}
}
&.open .timeline-menu-title svg {

16
src/hocs/with_load_more/with_load_more.js
View File

@ -29,12 +29,8 @@ const withLoadMore = ({
return {
loading: false,
bottomedOut: false,
error: false
}
},
computed: {
entries () {
return select(this.$props, this.$store) || []
error: false,
entries: []
}
},
created () {
@ -48,6 +44,11 @@ const withLoadMore = ({
destroy && destroy(this.$props, this.$store)
},
methods: {
// Entries is not a computed because computed can't track the dynamic
// selector for changes and won't trigger after fetch.
updateEntries () {
this.entries = select(this.$props, this.$store) || []
},
fetchEntries () {
if (!this.loading) {
this.loading = true
@ -61,6 +62,9 @@ const withLoadMore = ({
this.loading = false
this.error = true
})
.finally(() => {
this.updateEntries()
})
}
},
scrollLoad (e) {

7
src/i18n/en.json
View File

@ -330,6 +330,7 @@
"max_thumbnails": "Maximum amount of thumbnails per post",
"hide_isp": "Hide instance-specific panel",
"show_third_column": "Move Notifications to a seperate column",
"hide_wallpaper": "Hide instance wallpaper",
"preload_images": "Preload images",
"use_one_click_nsfw": "Open NSFW attachments with just one click",
"hide_post_stats": "Hide post statistics (e.g. the number of favorites)",
@ -517,6 +518,7 @@
"inputs": "Input fields",
"faint_text": "Faded text",
"underlay": "Underlay",
"wallpaper": "Wallpaper",
"poll": "Poll graph",
"icons": "Icons",
"highlight": "Highlighted elements",
@ -663,6 +665,7 @@
"unmute_conversation": "Unmute conversation",
"status_unavailable": "Status unavailable",
"copy_link": "Copy link to status",
"external_source": "External source",
"thread_muted": "Thread muted",
"thread_muted_and_words": ", has words:",
"show_full_subject": "Show full subject",
@ -670,7 +673,8 @@
"show_content": "Show content",
"hide_content": "Hide content",
"status_deleted": "This post was deleted",
"nsfw": "NSFW"
"nsfw": "NSFW",
"expand": "Expand"
},
"user_card": {
"approve": "Approve",
@ -760,6 +764,7 @@
"upload": {
"error": {
"base": "Upload failed.",
"message": "Upload failed: {0}",
"file_too_big": "File too big [{filesize}{filesizeunit} / {allowedsize}{allowedsizeunit}]",
"default": "Try again later"
},

1
src/modules/config.js
View File

@ -21,6 +21,7 @@ export const defaultState = {
showThirdColumn: false,
customThemeSource: undefined,
hideISP: false,
hideInstanceWallpaper: false,
// bad name: actually hides posts of muted USERS
hideMutedPosts: undefined, // instance default
collapseMessageWithSubject: undefined, // instance default

7
src/services/api/api.service.js
View File

@ -162,7 +162,12 @@ const updateProfileImages = ({ credentials, avatar = null, banner = null, backgr
body: form
})
.then((data) => data.json())
.then((data) => parseUser(data))
.then((data) => {
if (data.error) {
throw new Error(data.error)
}
return parseUser(data)
})
}
const updateProfile = ({ credentials, params }) => {

4
src/services/theme_data/pleromafe.js
View File

@ -84,6 +84,10 @@ export const SLOT_INHERITANCE = {
opacity: 'bg',
priority: 1
},
wallpaper: {
depends: ['bg'],
color: (mod, bg) => brightness(-2 * mod, bg).rgb
},
fg: {
depends: [],
priority: 1

1
static/themes/redmond-xx-se.json
View File

@ -267,6 +267,7 @@
},
"colors": {
"bg": "#c0c0c0",
"wallpaper": "#008080",
"text": "#000000",
"link": "#0000ff",
"accent": "#000080",

1
static/themes/redmond-xx.json
View File

@ -258,6 +258,7 @@
},
"colors": {
"bg": "#c0c0c0",
"wallpaper": "#008080",
"text": "#000000",
"link": "#0000ff",
"accent": "#000080",

1
static/themes/redmond-xxi.json
View File

@ -240,6 +240,7 @@
},
"colors": {
"bg": "#d6d6ce",
"wallpaper": "#396ba5",
"text": "#000000",
"link": "#0000ff",
"accent": "#0a246a",