therwi/sunkkoma
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

more FA5 stuff with small related refactoring

Browse source
This commit is contained in:
Henry Jameson 2020-10-19 22:35:46 +03:00
parent 3814218277
commit 8b3a7ae8c0
30 changed files with 221 additions and 101 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -7,6 +7,28 @@ import Timeago from '../timeago/timeago.vue'
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'
import { library } from '@fortawesome/fontawesome-svg-core'
import {
faCheck,
faTimes,
faStar,
faRetweet,
faUserPlus,
faEyeSlash,
faUser,
faSuitcaseRolling
} from '@fortawesome/free-solid-svg-icons'
library.add(
faCheck,
faTimes,
faStar,
faRetweet,
faUserPlus,
faUser,
faEyeSlash,
faSuitcaseRolling
)
const Notification = {
data () {

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

@ -1,3 +1,5 @@
@import '../../_variables.scss';
// TODO Copypaste from Status, should unify it somehow
.Notification {
&.-muted {
@ -49,4 +51,34 @@
display: block;
}
}
.type-icon {
margin: 0 0.1em;
}
&.-type--repeat .type-icon {
color: $fallback--cGreen;
color: var(--cGreen, $fallback--cGreen);
}
&.-type--follow .type-icon {
color: $fallback--cBlue;
color: var(--cBlue, $fallback--cBlue);
}
&.-type--follow-request .type-icon {
color: $fallback--cBlue;
color: var(--cBlue, $fallback--cBlue);
}
&.-type--like .type-icon {
color: orange;
color: $fallback--cOrange;
color: var(--cOrange, $fallback--cOrange);
}
&.-type--move .type-icon {
color: $fallback--cBlue;
color: var(--cBlue, $fallback--cBlue);
}
}

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

@ -1,5 +1,5 @@
<template>
<status
<Status
v-if="notification.type === 'mention'"
:compact="true"
:statusoid="notification.status"
@ -18,12 +18,12 @@
href="#"
class="unmute"
@click.prevent="toggleMute"
><i class="button-icon icon-eye-off" /></a>
><FAIcon class="button-icon" icon="eye-slash" /></a>
</div>
<div
v-else
class="non-mention"
:class="[userClass, { highlighted: userStyle }]"
class="Notification non-mention"
:class="[userClass, { highlighted: userStyle }, '-type--' + notification.type]"
:style="[ userStyle ]"
>
<a
@ -60,26 +60,26 @@
:title="'@'+notification.from_profile.screen_name"
>{{ notification.from_profile.name }}</span>
<span v-if="notification.type === 'like'">
<i class="fa icon-star lit" />
<FAIcon class="type-icon" icon="star" />
<small>{{ $t('notifications.favorited_you') }}</small>
</span>
<span v-if="notification.type === 'repeat'">
<i
class="fa icon-retweet lit"
<FAIcon
class="type-icon" icon="retweet"
:title="$t('tool_tip.repeat')"
/>
<small>{{ $t('notifications.repeated_you') }}</small>
</span>
<span v-if="notification.type === 'follow'">
<i class="fa icon-user-plus lit" />
<FAIcon class="type-icon" icon="user-plus" />
<small>{{ $t('notifications.followed_you') }}</small>
</span>
<span v-if="notification.type === 'follow_request'">
<i class="fa icon-user lit" />
<FAIcon class="type-icon" icon="user" />
<small>{{ $t('notifications.follow_request') }}</small>
</span>
<span v-if="notification.type === 'move'">
<i class="fa icon-arrow-curved lit" />
<FAIcon class="type-icon" icon="suitcase-rolling" />
<small>{{ $t('notifications.migrated_to') }}</small>
</span>
<span v-if="notification.type === 'pleroma:emoji_reaction'">
@ -120,7 +120,7 @@
v-if="needMute"
href="#"
@click.prevent="toggleMute"
><i class="button-icon icon-eye-off" /></a>
><FAIcon class="button-icon" icon="eye-slash" /></a>
</span>
<div
v-if="notification.type === 'follow' || notification.type === 'follow_request'"
@ -136,13 +136,15 @@
v-if="notification.type === 'follow_request'"
style="white-space: nowrap;"
>
<i
class="icon-ok button-icon follow-request-accept"
<FAIcon
icon="check"
class="button-icon follow-request-accept"
:title="$t('tool_tip.accept_follow_request')"
@click="approveUser()"
/>
<i
class="icon-cancel button-icon follow-request-reject"
<FAIcon
icon="times"
class="button-icon follow-request-reject"
:title="$t('tool_tip.reject_follow_request')"
@click="denyUser()"
/>