more FA5 stuff with small related refactoring

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

View file

@ -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' ],

View file

@ -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 & {