xarvos/pleroma-fe
1
0
Fork 0
forked from AkkomaGang/akkoma-fe
Code Issues Pull requests Projects Releases Packages Wiki Activity

richcontent support in polls, user cards and user profiles

Browse source
This commit is contained in:
Henry Jameson 2021-08-13 13:06:42 +03:00
parent 6c6df29ed3
commit 4c974f5ca2
14 changed files with 69 additions and 86 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/components/basic_user_card/basic_user_card.js
View file

@ -1,5 +1,6 @@
import UserCard from '../user_card/user_card.vue'
import UserAvatar from '../user_avatar/user_avatar.vue'
import RichContent from 'src/components/rich_content/rich_content.jsx'
import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
const BasicUserCard = {
@ -13,7 +14,8 @@ const BasicUserCard = {
},
components: {
UserCard,
UserAvatar
UserAvatar,
RichContent
},
methods: {
toggleUserExpanded () {

12
src/components/basic_user_card/basic_user_card.vue
View file

@ -25,17 +25,11 @@
:title="user.name"
class="basic-user-card-user-name"
>
<!-- eslint-disable vue/no-v-html -->
<span
v-if="user.name_html"
<RichContent
class="basic-user-card-user-name-value"
v-html="user.name_html"
:html="user.name"
:emoji="user.emoji"
/>
<!-- eslint-enable vue/no-v-html -->
<span
v-else
class="basic-user-card-user-name-value"
>{{ user.name }}</span>
</div>
<div>
<router-link

4
src/components/notification/notification.js
View file

@ -4,6 +4,7 @@ import Status from '../status/status.vue'
import UserAvatar from '../user_avatar/user_avatar.vue'
import UserCard from '../user_card/user_card.vue'
import Timeago from '../timeago/timeago.vue'
import RichContent from 'src/components/rich_content/rich_content.jsx'
import { isStatusNotification } from '../../services/notification_utils/notification_utils.js'
import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
@ -44,7 +45,8 @@ const Notification = {
UserAvatar,
UserCard,
Timeago,
Status
Status,
RichContent
},
methods: {
toggleUserExpanded () {

2
src/components/notification/notification.scss
View file

@ -2,6 +2,8 @@
// TODO Copypaste from Status, should unify it somehow
.Notification {
--emoji-size: 14px;
&.-muted {
padding: 0.25em 0.6em;
height: 1.2em;

8
src/components/notification/notification.vue
View file

@ -51,12 +51,14 @@
<span class="notification-details">
<div class="name-and-action">
<!-- eslint-disable vue/no-v-html -->
<bdi
v-if="!!notification.from_profile.name_html"
<bdi v-if="!!notification.from_profile.name_html">
<RichContent
class="username"
:title="'@'+notification.from_profile.screen_name_ui"
v-html="notification.from_profile.name_html"
:html="notification.from_profile.name_html"
:emoji="notification.from_profile.emoji"
/>
</bdi>
<!-- eslint-enable vue/no-v-html -->
<span
v-else

7
src/components/notifications/notifications.scss
View file

@ -148,13 +148,6 @@
max-width: 100%;
text-overflow: ellipsis;
white-space: nowrap;
img {
width: 14px;
height: 14px;
vertical-align: middle;
object-fit: contain
}
}
.timeago {

12
src/components/poll/poll.vue
View file

@ -17,7 +17,11 @@
<span class="result-percentage">
{{ percentageForOption(option.votes_count) }}%
</span>
<RichContent :html="option.title_html" :handle-links="false" :emoji="emoji" />
<RichContent
:html="option.title_html"
:handle-links="false"
:emoji="emoji"
/>
</div>
<div
class="result-fill"
@ -41,7 +45,11 @@
:value="index"
>
<label class="option-vote">
<RichContent :html="option.title_html" :handle-links="false" :emoji="emoji" />
<RichContent
:html="option.title_html"
:handle-links="false"
:emoji="emoji"
/>
</label>
</div>
</div>

1
src/components/rich_content/rich_content.scss
View file

@ -49,6 +49,7 @@
}
.emoji {
display: inline-block;
width: var(--emoji-size, 32px);
height: var(--emoji-size, 32px);
}

5
src/components/status_content/status_content.vue
View file

@ -7,7 +7,10 @@
@parseReady="$emit('parseReady', $event)"
>
<div v-if="status.poll && status.poll.options">
<poll :base-poll="status.poll" :emoji="status.emojis" />
<Poll
:base-poll="status.poll"
:emoji="status.emojis"
/>
</div>
<div

4
src/components/user_card/user_card.js
View file

@ -5,6 +5,7 @@ import FollowButton from '../follow_button/follow_button.vue'
import ModerationTools from '../moderation_tools/moderation_tools.vue'
import AccountActions from '../account_actions/account_actions.vue'
import Select from '../select/select.vue'
import RichContent from 'src/components/rich_content/rich_content.jsx'
import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
import { mapGetters } from 'vuex'
import { library } from '@fortawesome/fontawesome-svg-core'
@ -118,7 +119,8 @@ export default {
AccountActions,
ProgressButton,
FollowButton,
Select
Select,
RichContent
},
methods: {
muteUser () {

61
src/components/user_card/user_card.vue
View file

@ -38,21 +38,12 @@
</router-link>
<div class="user-summary">
<div class="top-line">
<!-- eslint-disable vue/no-v-html -->
<div
v-if="user.name_html"
<RichContent
:title="user.name"
class="user-name"
v-html="user.name_html"
:html="user.name"
:emoji="user.emoji"
/>
<!-- eslint-enable vue/no-v-html -->
<div
v-else
:title="user.name"
class="user-name"
>
{{ user.name }}
</div>
<button
v-if="isOtherUser && !user.is_local"
:href="user.statusnet_profile_url"
@ -255,20 +246,12 @@
<span>{{ hideFollowersCount ? $t('user_card.hidden') : user.followers_count }}</span>
</div>
</div>
<!-- eslint-disable vue/no-v-html -->
<p
v-if="!hideBio && user.description_html"
<RichContent
v-if="!hideBio"
class="user-card-bio"
@click.prevent="linkClicked"
v-html="user.description_html"
:html="user.description_html"
:emoji="user.emoji"
/>
<!-- eslint-enable vue/no-v-html -->
<p
v-else-if="!hideBio"
class="user-card-bio"
>
{{ user.description }}
</p>
</div>
</div>
</template>
@ -281,9 +264,10 @@
.user-card {
position: relative;
&:hover .Avatar {
&:hover {
--_still-image-img-visibility: visible;
--_still-image-canvas-visibility: hidden;
--_still-image-label-visibility: hidden;
}
.panel-heading {
@ -327,12 +311,12 @@
}
}
p {
margin-bottom: 0;
}
&-bio {
text-align: center;
display: block;
line-height: 18px;
padding: 1em;
margin: 0;
a {
color: $fallback--link;
@ -344,11 +328,6 @@
vertical-align: middle;
max-width: 100%;
max-height: 400px;
&.emoji {
width: 32px;
height: 32px;
}
}
}
@ -450,13 +429,6 @@
// big one
z-index: 1;
img {
width: 26px;
height: 26px;
vertical-align: middle;
object-fit: contain
}
.top-line {
display: flex;
}
@ -469,12 +441,7 @@
margin-right: 1em;
font-size: 15px;
img {
object-fit: contain;
height: 16px;
width: 16px;
vertical-align: middle;
}
--emoji-size: 14px;
}
.bottom-line {

4
src/components/user_profile/user_profile.js
View file

@ -4,6 +4,7 @@ import FollowCard from '../follow_card/follow_card.vue'
import Timeline from '../timeline/timeline.vue'
import Conversation from '../conversation/conversation.vue'
import TabSwitcher from 'src/components/tab_switcher/tab_switcher.js'
import RichContent from 'src/components/rich_content/rich_content.jsx'
import List from '../list/list.vue'
import withLoadMore from '../../hocs/with_load_more/with_load_more'
import { library } from '@fortawesome/fontawesome-svg-core'
@ -164,7 +165,8 @@ const UserProfile = {
FriendList,
FollowCard,
TabSwitcher,
Conversation
Conversation,
RichContent
}
}

16
src/components/user_profile/user_profile.vue
View file

@ -20,20 +20,24 @@
:key="index"
class="user-profile-field"
>
<!-- eslint-disable vue/no-v-html -->
<dt
:title="user.fields_text[index].name"
class="user-profile-field-name"
@click.prevent="linkClicked"
v-html="field.name"
>
<RichContent
:html="field.name"
:emoji="user.emoji"
/>
</dt>
<dd
:title="user.fields_text[index].value"
class="user-profile-field-value"
@click.prevent="linkClicked"
v-html="field.value"
>
<RichContent
:html="field.value"
:emoji="user.emoji"
/>
<!-- eslint-enable vue/no-v-html -->
</dd>
</dl>
</div>
<tab-switcher

5
src/services/entity_normalizer/entity_normalizer.service.js
View file

@ -56,10 +56,11 @@ export const parseUser = (data) => {
output.emoji = data.emojis
output.name = data.display_name
output.name_html = addEmojis(escape(data.display_name), data.emojis)
output.name_html = escape(data.display_name)
output.description = data.note
output.description_html = addEmojis(data.note, data.emojis)
// TODO cleanup this shit, output.description is overriden with source data
output.description_html = data.note
output.fields = data.fields
output.fields_html = data.fields.map(field => {