more FA5 stuff with small related refactoring
This commit is contained in:
parent
3814218277
commit
8b3a7ae8c0
30 changed files with 221 additions and 101 deletions
|
@ -1,8 +1,24 @@
|
|||
import Popover from '../popover/popover.vue'
|
||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||
import { faEllipsisH } from '@fortawesome/free-solid-svg-icons'
|
||||
import {
|
||||
faEllipsisH,
|
||||
faBookmark,
|
||||
faEyeSlash,
|
||||
faThumbtack,
|
||||
faShareAlt
|
||||
} from '@fortawesome/free-solid-svg-icons'
|
||||
import {
|
||||
faBookmark as faBookmarkReg,
|
||||
} from '@fortawesome/free-regular-svg-icons'
|
||||
|
||||
library.add(faEllipsisH)
|
||||
library.add(
|
||||
faEllipsisH,
|
||||
faBookmark,
|
||||
faBookmarkReg,
|
||||
faEyeSlash,
|
||||
faThumbtack,
|
||||
faShareAlt
|
||||
)
|
||||
|
||||
const ExtraButtons = {
|
||||
props: [ 'status' ],
|
||||
|
|
|
@ -15,14 +15,14 @@
|
|||
class="dropdown-item dropdown-item-icon"
|
||||
@click.prevent="muteConversation"
|
||||
>
|
||||
<i class="icon-eye-off" /><span>{{ $t("status.mute_conversation") }}</span>
|
||||
<FAIcon size="md" fixed-width icon="eye-slash" /><span>{{ $t("status.mute_conversation") }}</span>
|
||||
</button>
|
||||
<button
|
||||
v-if="canMute && status.thread_muted"
|
||||
class="dropdown-item dropdown-item-icon"
|
||||
@click.prevent="unmuteConversation"
|
||||
>
|
||||
<i class="icon-eye-off" /><span>{{ $t("status.unmute_conversation") }}</span>
|
||||
<FAIcon size="md" fixed-width icon="eye-slash" /><span>{{ $t("status.unmute_conversation") }}</span>
|
||||
</button>
|
||||
<button
|
||||
v-if="!status.pinned && canPin"
|
||||
|
@ -30,7 +30,7 @@
|
|||
@click.prevent="pinStatus"
|
||||
@click="close"
|
||||
>
|
||||
<i class="icon-pin" /><span>{{ $t("status.pin") }}</span>
|
||||
<FAIcon size="md" fixed-width icon="thumbtack" /><span>{{ $t("status.pin") }}</span>
|
||||
</button>
|
||||
<button
|
||||
v-if="status.pinned && canPin"
|
||||
|
@ -38,7 +38,7 @@
|
|||
@click.prevent="unpinStatus"
|
||||
@click="close"
|
||||
>
|
||||
<i class="icon-pin" /><span>{{ $t("status.unpin") }}</span>
|
||||
<FAIcon size="md" fixed-width icon="thumbtack" /><span>{{ $t("status.unpin") }}</span>
|
||||
</button>
|
||||
<button
|
||||
v-if="!status.bookmarked"
|
||||
|
@ -46,7 +46,7 @@
|
|||
@click.prevent="bookmarkStatus"
|
||||
@click="close"
|
||||
>
|
||||
<i class="icon-bookmark-empty" /><span>{{ $t("status.bookmark") }}</span>
|
||||
<FAIcon size="md" fixed-width :icon="['far', 'bookmark']" /><span>{{ $t("status.bookmark") }}</span>
|
||||
</button>
|
||||
<button
|
||||
v-if="status.bookmarked"
|
||||
|
@ -54,7 +54,7 @@
|
|||
@click.prevent="unbookmarkStatus"
|
||||
@click="close"
|
||||
>
|
||||
<i class="icon-bookmark" /><span>{{ $t("status.unbookmark") }}</span>
|
||||
<FAIcon size="md" fixed-width icon="bookmark" /><span>{{ $t("status.unbookmark") }}</span>
|
||||
</button>
|
||||
<button
|
||||
v-if="canDelete"
|
||||
|
@ -62,23 +62,24 @@
|
|||
@click.prevent="deleteStatus"
|
||||
@click="close"
|
||||
>
|
||||
<i class="icon-cancel" /><span>{{ $t("status.delete") }}</span>
|
||||
<FAIcon size="md" fixed-width icon="times" /><span>{{ $t("status.delete") }}</span>
|
||||
</button>
|
||||
<button
|
||||
class="dropdown-item dropdown-item-icon"
|
||||
@click.prevent="copyLink"
|
||||
@click="close"
|
||||
>
|
||||
<i class="icon-share" /><span>{{ $t("status.copy_link") }}</span>
|
||||
<FAIcon size="md" fixed-width icon="share-alt" /><span>{{ $t("status.copy_link") }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<FAIcon
|
||||
slot="trigger"
|
||||
class="button-icon"
|
||||
icon="ellipsis-h"
|
||||
size="lg"
|
||||
/>
|
||||
<span slot="trigger">
|
||||
<FAIcon
|
||||
class="ExtraButtons button-icon"
|
||||
icon="ellipsis-h"
|
||||
size="md"
|
||||
/>
|
||||
</span>
|
||||
</Popover>
|
||||
</template>
|
||||
|
||||
|
@ -87,8 +88,9 @@
|
|||
<style lang="scss">
|
||||
@import '../../_variables.scss';
|
||||
|
||||
.icon-ellipsis {
|
||||
.ExtraButtons {
|
||||
cursor: pointer;
|
||||
position: static;
|
||||
|
||||
&:hover,
|
||||
.extra-button-popover.open & {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue