Troplo/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Merge branch 'fix/use-semantically-correct-buttons' into 'develop'

Browse source 
Fix #1001 Accessibility: Use semantically correct buttons (almost) everywhere

Closes #1001

See merge request pleroma/pleroma-fe!1293
This commit is contained in:
Shpuld Shpludson 2020-12-01 11:02:46 +00:00
commit fdfb8810c1
67 changed files with 547 additions and 445 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
CHANGELOG.md
View file

@ -14,12 +14,13 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
- Fixed the occasional bug where screen would scroll 1px when typing into a reply form - Fixed the occasional bug where screen would scroll 1px when typing into a reply form
- Fixed timeline errors locking timelines - Fixed timeline errors locking timelines
- Fixed missing highlighted border in expanded conversations - Fixed missing highlighted border in expanded conversations
- 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
### Changed ### Changed
- Errors when fetching are now shown with popup errors instead of "Error fetching updates" in panel headers - Errors when fetching are now shown with popup errors instead of "Error fetching updates" in panel headers
- Fixed custom emoji not working in profile field names - Made reply/fav/repeat etc buttons easier to hit
- Fixed pinned statuses not appearing in user profiles
- Fixed username autocomplete being jumpy
## [2.2.1] - 2020-11-11 ## [2.2.1] - 2020-11-11

65
src/App.scss
View file

@ -33,6 +33,7 @@ h4 {
max-width: 980px; max-width: 980px;
align-content: flex-start; align-content: flex-start;
} }
.underlay { .underlay {
background-color: rgba(0,0,0,0.15); background-color: rgba(0,0,0,0.15);
background-color: var(--underlay, rgba(0,0,0,0.15)); background-color: var(--underlay, rgba(0,0,0,0.15));
@ -69,7 +70,7 @@ a {
color: var(--link, $fallback--link); color: var(--link, $fallback--link);
} }
button { .button-default {
user-select: none; user-select: none;
color: $fallback--text; color: $fallback--text;
color: var(--btnText, $fallback--text); color: var(--btnText, $fallback--text);
@ -85,7 +86,8 @@ button {
font-family: sans-serif; font-family: sans-serif;
font-family: var(--interfaceFont, sans-serif); font-family: var(--interfaceFont, sans-serif);
i[class*=icon-], .svg-inline--fa { i[class*=icon-],
.svg-inline--fa {
color: $fallback--text; color: $fallback--text;
color: var(--btnText, $fallback--text); color: var(--btnText, $fallback--text);
} }
@ -107,7 +109,8 @@ button {
background-color: $fallback--fg; background-color: $fallback--fg;
background-color: var(--btnPressed, $fallback--fg); background-color: var(--btnPressed, $fallback--fg);
svg, i { svg,
i {
color: $fallback--text; color: $fallback--text;
color: var(--btnPressedText, $fallback--text); color: var(--btnPressedText, $fallback--text);
} }
@ -120,7 +123,8 @@ button {
background-color: $fallback--fg; background-color: $fallback--fg;
background-color: var(--btnDisabled, $fallback--fg); background-color: var(--btnDisabled, $fallback--fg);
svg, i { svg,
i {
color: $fallback--text; color: $fallback--text;
color: var(--btnDisabledText, $fallback--text); color: var(--btnDisabledText, $fallback--text);
} }
@ -134,7 +138,8 @@ button {
box-shadow: 0px 0px 4px 0px rgba(255, 255, 255, 0.3), 0px 1px 0px 0px rgba(0, 0, 0, 0.2) inset, 0px -1px 0px 0px rgba(255, 255, 255, 0.2) inset; box-shadow: 0px 0px 4px 0px rgba(255, 255, 255, 0.3), 0px 1px 0px 0px rgba(0, 0, 0, 0.2) inset, 0px -1px 0px 0px rgba(255, 255, 255, 0.2) inset;
box-shadow: var(--buttonPressedShadow); box-shadow: var(--buttonPressedShadow);
svg, i { svg,
i {
color: $fallback--text; color: $fallback--text;
color: var(--btnToggledText, $fallback--text); color: var(--btnToggledText, $fallback--text);
} }
@ -149,6 +154,30 @@ button {
} }
} }
.button-unstyled {
background: none;
border: none;
outline: none;
display: inline;
text-align: initial;
font-size: 100%;
font-family: inherit;
padding: 0;
line-height: unset;
cursor: pointer;
box-sizing: content-box;
color: inherit;
&.-link {
color: $fallback--link;
color: var(--link, $fallback--link);
}
&.-fullwidth {
width: 100%;
}
}
input, textarea, .select, .input { input, textarea, .select, .input {
&.unstyled { &.unstyled {
@ -442,6 +471,7 @@ main-router {
color: $fallback--faint; color: $fallback--faint;
color: var(--panelFaint, $fallback--faint); color: var(--panelFaint, $fallback--faint);
} }
.faint-link { .faint-link {
color: $fallback--faint; color: $fallback--faint;
color: var(--faintLink, $fallback--faint); color: var(--faintLink, $fallback--faint);
@ -453,11 +483,8 @@ main-router {
overflow-x: hidden; overflow-x: hidden;
} }
button { .button-default,
flex-shrink: 0; .alert {
}
button, .alert {
// height: 100%; // height: 100%;
line-height: 21px; line-height: 21px;
min-height: 0; min-height: 0;
@ -468,8 +495,11 @@ main-router {
align-self: stretch; align-self: stretch;
} }
button { .button-default {
&, i[class*=icon-] { flex-shrink: 0;
&,
i[class*=icon-] {
color: $fallback--text; color: $fallback--text;
color: var(--btnPanelText, $fallback--text); color: var(--btnPanelText, $fallback--text);
} }
@ -492,7 +522,8 @@ main-router {
} }
} }
a { a,
.-link {
color: $fallback--link; color: $fallback--link;
color: var(--panelLink, $fallback--link) color: var(--panelLink, $fallback--link)
} }
@ -507,15 +538,15 @@ main-router {
border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius; border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;
border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius); border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);
.faint { .faint {
color: $fallback--faint; color: $fallback--faint;
color: var(--panelFaint, $fallback--faint); color: var(--panelFaint, $fallback--faint);
} }
a { a,
.-link {
color: $fallback--link; color: $fallback--link;
color: var(--panelLink, $fallback--link) color: var(--panelLink, $fallback--link);
} }
} }
@ -797,7 +828,7 @@ nav {
} }
} }
.btn.btn-default { .btn.button-default {
min-height: 28px; min-height: 28px;
} }

15
src/components/account_actions/account_actions.vue
View file

@ -4,6 +4,7 @@
trigger="click" trigger="click"
placement="bottom" placement="bottom"
:bound-to="{ x: 'container' }" :bound-to="{ x: 'container' }"
remove-padding
> >
<div <div
slot="content" slot="content"
@ -13,14 +14,14 @@
<template v-if="relationship.following"> <template v-if="relationship.following">
<button <button
v-if="relationship.showing_reblogs" v-if="relationship.showing_reblogs"
class="btn btn-default dropdown-item" class="btn button-default dropdown-item"
@click="hideRepeats" @click="hideRepeats"
> >
{{ $t('user_card.hide_repeats') }} {{ $t('user_card.hide_repeats') }}
</button> </button>
<button <button
v-if="!relationship.showing_reblogs" v-if="!relationship.showing_reblogs"
class="btn btn-default dropdown-item" class="btn button-default dropdown-item"
@click="showRepeats" @click="showRepeats"
> >
{{ $t('user_card.show_repeats') }} {{ $t('user_card.show_repeats') }}
@ -32,27 +33,27 @@
</template> </template>
<button <button
v-if="relationship.blocking" v-if="relationship.blocking"
class="btn btn-default btn-block dropdown-item" class="btn button-default btn-block dropdown-item"
@click="unblockUser" @click="unblockUser"
> >
{{ $t('user_card.unblock') }} {{ $t('user_card.unblock') }}
</button> </button>
<button <button
v-else v-else
class="btn btn-default btn-block dropdown-item" class="btn button-default btn-block dropdown-item"
@click="blockUser" @click="blockUser"
> >
{{ $t('user_card.block') }} {{ $t('user_card.block') }}
</button> </button>
<button <button
class="btn btn-default btn-block dropdown-item" class="btn button-default btn-block dropdown-item"
@click="reportUser" @click="reportUser"
> >
{{ $t('user_card.report') }} {{ $t('user_card.report') }}
</button> </button>
<button <button
v-if="pleromaChatMessagesAvailable" v-if="pleromaChatMessagesAvailable"
class="btn btn-default btn-block dropdown-item" class="btn button-default btn-block dropdown-item"
@click="openChat" @click="openChat"
> >
{{ $t('user_card.message') }} {{ $t('user_card.message') }}
@ -61,7 +62,7 @@
</div> </div>
<div <div
slot="trigger" slot="trigger"
class="btn btn-default ellipsis-button" class="ellipsis-button"
> >
<FAIcon <FAIcon
class="icon" class="icon"

2
src/components/async_component_error/async_component_error.vue
View file

@ -8,7 +8,7 @@
{{ $t('general.error_retry') }} {{ $t('general.error_retry') }}
</p> </p>
<button <button
class="btn" class="btn button-default"
@click="retry" @click="retry"
> >
{{ $t('general.retry') }} {{ $t('general.retry') }}

6
src/components/attachment/attachment.js
View file

@ -9,7 +9,8 @@ import {
faMusic, faMusic,
faImage, faImage,
faVideo, faVideo,
faPlayCircle faPlayCircle,
faTimes
} from '@fortawesome/free-solid-svg-icons' } from '@fortawesome/free-solid-svg-icons'
library.add( library.add(
@ -17,7 +18,8 @@ library.add(
faMusic, faMusic,
faImage, faImage,
faVideo, faVideo,
faPlayCircle faPlayCircle,
faTimes
) )
const Attachment = { const Attachment = {

30
src/components/attachment/attachment.vue
View file

@ -42,15 +42,13 @@
icon="play-circle" icon="play-circle"
/> />
</a> </a>
<div <button
v-if="nsfw && hideNsfwLocal && !hidden" v-if="nsfw && hideNsfwLocal && !hidden"
class="hider" class="button-unstyled hider"
>
<a
href="#"
@click.prevent="toggleHidden" @click.prevent="toggleHidden"
>Hide</a> >
</div> <FAIcon icon="times" />
</button>
<a <a
v-if="type === 'image' && (!hidden || preloadImage)" v-if="type === 'image' && (!hidden || preloadImage)"
@ -234,15 +232,23 @@
.hider { .hider {
position: absolute; position: absolute;
right: 0; right: 0;
white-space: nowrap;
margin: 10px; margin: 10px;
padding: 5px; padding: 0;
background: rgba(230,230,230,0.6);
font-weight: bold;
z-index: 4; z-index: 4;
line-height: 1;
border-radius: $fallback--tooltipRadius; border-radius: $fallback--tooltipRadius;
border-radius: var(--tooltipRadius, $fallback--tooltipRadius); border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
text-align: center;
width: 2em;
height: 2em;
font-size: 1.25em;
// TODO: theming? hard to theme with unknown background image color
background: rgba(230, 230, 230, 0.7);
.svg-inline--fa {
color: rgba(0, 0, 0, 0.6);
}
&:hover .svg-inline--fa {
color: rgba(0, 0, 0, 0.9);
}
} }
video { video {

4
src/components/block_card/block_card.vue
View file

@ -3,7 +3,7 @@
<div class="block-card-content-container"> <div class="block-card-content-container">
<button <button
v-if="blocked" v-if="blocked"
class="btn btn-default" class="btn button-default"
:disabled="progress" :disabled="progress"
@click="unblockUser" @click="unblockUser"
> >
@ -16,7 +16,7 @@
</button> </button>
<button <button
v-else v-else
class="btn btn-default" class="btn button-default"
:disabled="progress" :disabled="progress"
@click="blockUser" @click="blockUser"
> >

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

@ -10,7 +10,10 @@
<span class="title"> <span class="title">
{{ $t("chats.chats") }} {{ $t("chats.chats") }}
</span> </span>
<button @click="newChat"> <button
class="button-default"
@click="newChat"
>
{{ $t("chats.new") }} {{ $t("chats.new") }}
</button> </button>
</div> </div>

3
src/components/chat_message/chat_message.scss
View file

@ -31,9 +31,6 @@
color: $fallback--text; color: $fallback--text;
color: var(--text, $fallback--text); color: var(--text, $fallback--text);
} }
border-radius: $fallback--chatMessageRadius;
border-radius: var(--chatMessageRadius, $fallback--chatMessageRadius);
} }
.popover { .popover {

4
src/components/chat_message/chat_message.vue
View file

@ -53,7 +53,7 @@
<div slot="content"> <div slot="content">
<div class="dropdown-menu"> <div class="dropdown-menu">
<button <button
class="dropdown-item dropdown-item-icon" class="button-default dropdown-item dropdown-item-icon"
@click="deleteMessage" @click="deleteMessage"
> >
<FAIcon icon="times" /> {{ $t("chats.delete") }} <FAIcon icon="times" /> {{ $t("chats.delete") }}
@ -62,7 +62,7 @@
</div> </div>
<button <button
slot="trigger" slot="trigger"
class="menu-icon" class="button-default menu-icon"
:title="$t('chats.more')" :title="$t('chats.more')"
> >
<FAIcon icon="ellipsis-h" /> <FAIcon icon="ellipsis-h" />

11
src/components/conversation/conversation.vue
View file

@ -10,12 +10,13 @@
class="panel-heading conversation-heading" class="panel-heading conversation-heading"
> >
<span class="title"> {{ $t('timeline.conversation') }} </span> <span class="title"> {{ $t('timeline.conversation') }} </span>
<span v-if="collapsable"> <button
<a v-if="collapsable"
href="#" class="button-unstyled -link"
@click.prevent="toggleExpanded" @click.prevent="toggleExpanded"
>{{ $t('timeline.collapse') }}</a> >
</span> {{ $t('timeline.collapse') }}
</button>
</div> </div>
<status <status
v-for="status in conversation" v-for="status in conversation"

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

@ -21,7 +21,7 @@
grid-template-areas: "logo sitename actions"; grid-template-areas: "logo sitename actions";
} }
button { .button-default {
&, svg { &, svg {
color: $fallback--text; color: $fallback--text;
color: var(--btnTopBarText, $fallback--text); color: var(--btnTopBarText, $fallback--text);
@ -80,13 +80,14 @@
.nav-icon { .nav-icon {
margin-left: 0.2em; margin-left: 0.2em;
width: 2em; width: 2em;
height: 100%;
text-align: center; text-align: center;
}
a, a svg { .svg-inline--fa {
color: $fallback--link; color: $fallback--link;
color: var(--topBarLink, $fallback--link); color: var(--topBarLink, $fallback--link);
} }
}
.sitename { .sitename {
grid-area: sitename; grid-area: sitename;

24
src/components/desktop_nav/desktop_nav.vue
View file

@ -36,9 +36,8 @@
@toggled="onSearchBarToggled" @toggled="onSearchBarToggled"
@click.stop.native @click.stop.native
/> />
<a <button
href="#" class="button-unstyled nav-icon"
class="nav-icon"
@click.stop="openSettingsModal" @click.stop="openSettingsModal"
> >
<FAIcon <FAIcon
@ -47,29 +46,32 @@
icon="cog" icon="cog"
:title="$t('nav.preferences')" :title="$t('nav.preferences')"
/> />
</a> </button>
<a <a
v-if="currentUser && currentUser.role === 'admin'" v-if="currentUser && currentUser.role === 'admin'"
href="/pleroma/admin/#/login-pleroma" href="/pleroma/admin/#/login-pleroma"
class="nav-icon" class="nav-icon"
target="_blank" target="_blank"
><FAIcon >
<FAIcon
fixed-width fixed-width
class="fa-scale-110 fa-old-padding" class="fa-scale-110 fa-old-padding"
icon="tachometer-alt" icon="tachometer-alt"
:title="$t('nav.administration')" :title="$t('nav.administration')"
/></a> />
<a </a>
<button
v-if="currentUser" v-if="currentUser"
href="#" class="button-unstyled nav-icon"
class="nav-icon"
@click.prevent="logout" @click.prevent="logout"
><FAIcon >
<FAIcon
fixed-width fixed-width
class="fa-scale-110 fa-old-padding" class="fa-scale-110 fa-old-padding"
icon="sign-out-alt" icon="sign-out-alt"
:title="$t('login.logout')" :title="$t('login.logout')"
/></a> />
</button>
</div> </div>
</div> </div>
</nav> </nav>

4
src/components/domain_mute_card/domain_mute_card.vue
View file

@ -6,7 +6,7 @@
<ProgressButton <ProgressButton
v-if="muted" v-if="muted"
:click="unmuteDomain" :click="unmuteDomain"
class="btn btn-default" class="btn button-default"
> >
{{ $t('domain_mute_card.unmute') }} {{ $t('domain_mute_card.unmute') }}
<template slot="progress"> <template slot="progress">
@ -16,7 +16,7 @@
<ProgressButton <ProgressButton
v-else v-else
:click="muteDomain" :click="muteDomain"
class="btn btn-default" class="btn button-default"
> >
{{ $t('domain_mute_card.mute') }} {{ $t('domain_mute_card.mute') }}
<template slot="progress"> <template slot="progress">

6
src/components/emoji_input/emoji_input.vue
View file

@ -6,13 +6,13 @@
> >
<slot /> <slot />
<template v-if="enableEmojiPicker"> <template v-if="enableEmojiPicker">
<div <button
v-if="!hideEmojiButton" v-if="!hideEmojiButton"
class="emoji-picker-icon" class="button-unstyled emoji-picker-icon"
@click.prevent="togglePicker" @click.prevent="togglePicker"
> >
<FAIcon :icon="['far', 'smile-beam']" /> <FAIcon :icon="['far', 'smile-beam']" />
</div> </button>
<EmojiPicker <EmojiPicker
v-if="enableEmojiPicker" v-if="enableEmojiPicker"
ref="picker" ref="picker"

2
src/components/emoji_reactions/emoji_reactions.vue
View file

@ -6,7 +6,7 @@
:users="accountsForEmoji[reaction.name]" :users="accountsForEmoji[reaction.name]"
> >
<button <button
class="emoji-reaction btn btn-default" class="emoji-reaction btn button-default"
:class="{ 'picked-reaction': reactedWith(reaction.name), 'not-clickable': !loggedIn }" :class="{ 'picked-reaction': reactedWith(reaction.name), 'not-clickable': !loggedIn }"
@click="emojiOnClick(reaction.name, $event)" @click="emojiOnClick(reaction.name, $event)"
@mouseenter="fetchEmojiReactionsByIfMissing()" @mouseenter="fetchEmojiReactionsByIfMissing()"

4
src/components/export_import/export_import.vue
View file

@ -2,13 +2,13 @@
<div class="import-export-container"> <div class="import-export-container">
<slot name="before" /> <slot name="before" />
<button <button
class="btn" class="btn button-default"
@click="exportData" @click="exportData"
> >
{{ exportLabel }} {{ exportLabel }}
</button> </button>
<button <button
class="btn" class="btn button-default"
@click="importData" @click="importData"
> >
{{ importLabel }} {{ importLabel }}

2
src/components/exporter/exporter.vue
View file

@ -11,7 +11,7 @@
</div> </div>
<button <button
v-else v-else
class="btn btn-default" class="btn button-default"
@click="process" @click="process"
> >
{{ exportButtonLabel }} {{ exportButtonLabel }}

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

@ -2,8 +2,9 @@
<Popover <Popover
trigger="click" trigger="click"
placement="top" placement="top"
class="extra-button-popover" :offset="{ y: 5 }"
:bound-to="{ x: 'container' }" :bound-to="{ x: 'container' }"
remove-padding
> >
<div <div
slot="content" slot="content"
@ -12,7 +13,7 @@
<div class="dropdown-menu"> <div class="dropdown-menu">
<button <button
v-if="canMute && !status.thread_muted" v-if="canMute && !status.thread_muted"
class="dropdown-item dropdown-item-icon" class="button-default dropdown-item dropdown-item-icon"
@click.prevent="muteConversation" @click.prevent="muteConversation"
> >
<FAIcon <FAIcon
@ -22,7 +23,7 @@
</button> </button>
<button <button
v-if="canMute && status.thread_muted" v-if="canMute && status.thread_muted"
class="dropdown-item dropdown-item-icon" class="button-default dropdown-item dropdown-item-icon"
@click.prevent="unmuteConversation" @click.prevent="unmuteConversation"
> >
<FAIcon <FAIcon
@ -32,7 +33,7 @@
</button> </button>
<button <button
v-if="!status.pinned && canPin" v-if="!status.pinned && canPin"
class="dropdown-item dropdown-item-icon" class="button-default dropdown-item dropdown-item-icon"
@click.prevent="pinStatus" @click.prevent="pinStatus"
@click="close" @click="close"
> >
@ -43,7 +44,7 @@
</button> </button>
<button <button
v-if="status.pinned && canPin" v-if="status.pinned && canPin"
class="dropdown-item dropdown-item-icon" class="button-default dropdown-item dropdown-item-icon"
@click.prevent="unpinStatus" @click.prevent="unpinStatus"
@click="close" @click="close"
> >
@ -54,7 +55,7 @@
</button> </button>
<button <button
v-if="!status.bookmarked" v-if="!status.bookmarked"
class="dropdown-item dropdown-item-icon" class="button-default dropdown-item dropdown-item-icon"
@click.prevent="bookmarkStatus" @click.prevent="bookmarkStatus"
@click="close" @click="close"
> >
@ -65,7 +66,7 @@
</button> </button>
<button <button
v-if="status.bookmarked" v-if="status.bookmarked"
class="dropdown-item dropdown-item-icon" class="button-default dropdown-item dropdown-item-icon"
@click.prevent="unbookmarkStatus" @click.prevent="unbookmarkStatus"
@click="close" @click="close"
> >
@ -76,7 +77,7 @@
</button> </button>
<button <button
v-if="canDelete" v-if="canDelete"
class="dropdown-item dropdown-item-icon" class="button-default dropdown-item dropdown-item-icon"
@click.prevent="deleteStatus" @click.prevent="deleteStatus"
@click="close" @click="close"
> >
@ -86,7 +87,7 @@
/><span>{{ $t("status.delete") }}</span> /><span>{{ $t("status.delete") }}</span>
</button> </button>
<button <button
class="dropdown-item dropdown-item-icon" class="button-default dropdown-item dropdown-item-icon"
@click.prevent="copyLink" @click.prevent="copyLink"
@click="close" @click="close"
> >
@ -97,9 +98,12 @@
</button> </button>
</div> </div>
</div> </div>
<span slot="trigger"> <span
slot="trigger"
class="ExtraButtons"
>
<FAIcon <FAIcon
class="ExtraButtons fa-scale-110 fa-old-padding" class="fa-scale-110 fa-old-padding"
icon="ellipsis-h" icon="ellipsis-h"
/> />
</span> </span>
@ -112,11 +116,11 @@
@import '../../_variables.scss'; @import '../../_variables.scss';
.ExtraButtons { .ExtraButtons {
cursor: pointer;
position: static; position: static;
padding: 10px;
margin: -10px;
&:hover, &:hover .svg-inline--fa {
.extra-button-popover.open & {
color: $fallback--text; color: $fallback--text;
color: var(--text, $fallback--text); color: var(--text, $fallback--text);
} }

5
src/components/favorite_button/favorite_button.js
View file

@ -31,11 +31,6 @@ const FavoriteButton = {
} }
}, },
computed: { computed: {
classes () {
return {
'-favorited': this.status.favorited
}
},
...mapGetters(['mergedConfig']) ...mapGetters(['mergedConfig'])
} }
} }

55
src/components/favorite_button/favorite_button.vue
View file

@ -1,23 +1,31 @@
<template> <template>
<div v-if="loggedIn"> <div class="FavoriteButton">
<FAIcon <button
:class="classes" v-if="loggedIn"
class="FavoriteButton fa-scale-110 fa-old-padding -interactive" class="button-unstyled interactive"
:class="status.favorited && '-favorited'"
:title="$t('tool_tip.favorite')" :title="$t('tool_tip.favorite')"
@click.prevent="favorite()"
>
<FAIcon
class="fa-scale-110 fa-old-padding"
:icon="[status.favorited ? 'fas' : 'far', 'star']" :icon="[status.favorited ? 'fas' : 'far', 'star']"
:spin="animated" :spin="animated"
@click.prevent="favorite()"
/> />
<span v-if="!mergedConfig.hidePostStats && status.fave_num > 0">{{ status.fave_num }}</span> </button>
</div> <span v-else>
<div v-else>
<FAIcon <FAIcon
:class="classes" class="fa-scale-110 fa-old-padding"
class="FavoriteButton fa-scale-110 fa-old-padding"
:title="$t('tool_tip.favorite')" :title="$t('tool_tip.favorite')"
:icon="['far', 'star']" :icon="['far', 'star']"
/> />
<span v-if="!mergedConfig.hidePostStats && status.fave_num > 0">{{ status.fave_num }}</span> </span>
<span
v-if="!mergedConfig.hidePostStats && status.fave_num > 0"
class="action-counter"
>
{{ status.fave_num }}
</span>
</div> </div>
</template> </template>
@ -27,19 +35,28 @@
@import '../../_variables.scss'; @import '../../_variables.scss';
.FavoriteButton { .FavoriteButton {
&.-interactive { display: flex;
cursor: pointer;
> :first-child {
padding: 10px;
margin: -10px -8px -10px -10px;
}
.action-counter {
pointer-events: none;
user-select: none;
}
.interactive {
.svg-inline--fa {
animation-duration: 0.6s; animation-duration: 0.6s;
}
&:hover { &:hover .svg-inline--fa,
&.-favorited .svg-inline--fa {
color: $fallback--cOrange; color: $fallback--cOrange;
color: var(--cOrange, $fallback--cOrange); color: var(--cOrange, $fallback--cOrange);
} }
} }
&.-favorited {
color: $fallback--cOrange;
color: var(--cOrange, $fallback--cOrange);
}
} }
</style> </style>

2
src/components/follow_button/follow_button.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<button <button
class="btn btn-default follow-button" class="btn button-default follow-button"
:class="{ toggled: isPressed }" :class="{ toggled: isPressed }"
:disabled="inProgress" :disabled="inProgress"
:title="title" :title="title"

4
src/components/follow_request_card/follow_request_card.vue
View file

@ -2,13 +2,13 @@
<basic-user-card :user="user"> <basic-user-card :user="user">
<div class="follow-request-card-content-container"> <div class="follow-request-card-content-container">
<button <button
class="btn btn-default" class="btn button-default"
@click="approveUser" @click="approveUser"
> >
{{ $t('user_card.approve') }} {{ $t('user_card.approve') }}
</button> </button>
<button <button
class="btn btn-default" class="btn button-default"
@click="denyUser" @click="denyUser"
> >
{{ $t('user_card.deny') }} {{ $t('user_card.deny') }}

6
src/components/image_cropper/image_cropper.vue
View file

@ -11,21 +11,21 @@
</div> </div>
<div class="image-cropper-buttons-wrapper"> <div class="image-cropper-buttons-wrapper">
<button <button
class="btn" class="button-default btn"
type="button" type="button"
:disabled="submitting" :disabled="submitting"
@click="submit()" @click="submit()"
v-text="saveText" v-text="saveText"
/> />
<button <button
class="btn" class="button-default btn"
type="button" type="button"
:disabled="submitting" :disabled="submitting"
@click="destroy" @click="destroy"
v-text="cancelText" v-text="cancelText"
/> />
<button <button
class="btn" class="button-default btn"
type="button" type="button"
:disabled="submitting" :disabled="submitting"
@click="submit(false)" @click="submit(false)"

2
src/components/importer/importer.vue
View file

@ -15,7 +15,7 @@
/> />
<button <button
v-else v-else
class="btn btn-default" class="btn button-default"
@click="submit" @click="submit"
> >
{{ submitButtonLabel }} {{ submitButtonLabel }}

2
src/components/login_form/login_form.vue
View file

@ -61,7 +61,7 @@
<button <button
:disabled="loggingIn" :disabled="loggingIn"
type="submit" type="submit"
class="btn btn-default" class="btn button-default"
> >
{{ $t('login.login') }} {{ $t('login.login') }}
</button> </button>

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

@ -1,10 +1,7 @@
<template> <template>
<div <label
class="media-upload" class="media-upload"
:class="{ disabled: disabled }" :class="{ disabled: disabled }"
>
<label
class="label"
:title="$t('tool_tip.media_upload')" :title="$t('tool_tip.media_upload')"
> >
<FAIcon <FAIcon
@ -27,7 +24,6 @@
@change="change" @change="change"
> >
</label> </label>
</div>
</template> </template>
<script src="./media_upload.js" ></script> <script src="./media_upload.js" ></script>
@ -36,12 +32,6 @@
@import '../../_variables.scss'; @import '../../_variables.scss';
.media-upload { .media-upload {
.label {
display: inline-block;
}
.new-icon {
cursor: pointer; cursor: pointer;
}
} }
</style> </style>

14
src/components/mfa_form/recovery_form.vue
View file

@ -23,23 +23,23 @@
<div class="form-group"> <div class="form-group">
<div class="login-bottom"> <div class="login-bottom">
<div> <div>
<a <button
href="#" class="button-unstyled -link"
@click.prevent="requireTOTP" @click.prevent="requireTOTP"
> >
{{ $t('login.enter_two_factor_code') }} {{ $t('login.enter_two_factor_code') }}
</a> </button>
<br> <br>
<a <button
href="#" class="button-unstyled -link"
@click.prevent="abortMFA" @click.prevent="abortMFA"
> >
{{ $t('general.cancel') }} {{ $t('general.cancel') }}
</a> </button>
</div> </div>
<button <button
type="submit" type="submit"
class="btn btn-default" class="btn button-default"
> >
{{ $t('general.verify') }} {{ $t('general.verify') }}
</button> </button>

14
src/components/mfa_form/totp_form.vue
View file

@ -25,23 +25,23 @@
<div class="form-group"> <div class="form-group">
<div class="login-bottom"> <div class="login-bottom">
<div> <div>
<a <button
href="#" class="button-unstyled -link"
@click.prevent="requireRecovery" @click.prevent="requireRecovery"
> >
{{ $t('login.enter_recovery_code') }} {{ $t('login.enter_recovery_code') }}
</a> </button>
<br> <br>
<a <button
href="#" class="button-unstyled -link"
@click.prevent="abortMFA" @click.prevent="abortMFA"
> >
{{ $t('general.cancel') }} {{ $t('general.cancel') }}
</a> </button>
</div> </div>
<button <button
type="submit" type="submit"
class="btn btn-default" class="btn button-default"
> >
{{ $t('general.verify') }} {{ $t('general.verify') }}
</button> </button>

14
src/components/mobile_nav/mobile_nav.vue
View file

@ -9,9 +9,8 @@
@click="scrollToTop()" @click="scrollToTop()"
> >
<div class="item"> <div class="item">
<a <button
href="#" class="button-unstyled mobile-nav-button"
class="mobile-nav-button"
@click.stop.prevent="toggleMobileSidebar()" @click.stop.prevent="toggleMobileSidebar()"
> >
<FAIcon <FAIcon
@ -22,7 +21,7 @@
v-if="unreadChatCount" v-if="unreadChatCount"
class="alert-dot" class="alert-dot"
/> />
</a> </button>
<router-link <router-link
v-if="!hideSitename" v-if="!hideSitename"
class="site-name" class="site-name"
@ -33,10 +32,9 @@
</router-link> </router-link>
</div> </div>
<div class="item right"> <div class="item right">
<a <button
v-if="currentUser" v-if="currentUser"
class="mobile-nav-button" class="button-unstyled mobile-nav-button"
href="#"
@click.stop.prevent="openMobileNotifications()" @click.stop.prevent="openMobileNotifications()"
> >
<FAIcon <FAIcon
@ -47,7 +45,7 @@
v-if="unseenNotificationsCount" v-if="unseenNotificationsCount"
class="alert-dot" class="alert-dot"
/> />
</a> </button>
</div> </div>
</nav> </nav>
<div <div

2
src/components/mobile_post_status_button/mobile_post_status_button.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<div v-if="isLoggedIn"> <div v-if="isLoggedIn">
<button <button
class="new-status-button" class="button-default new-status-button"
:class="{ 'hidden': isHidden }" :class="{ 'hidden': isHidden }"
@click="openPostForm" @click="openPostForm"
> >

28
src/components/moderation_tools/moderation_tools.vue
View file

@ -12,13 +12,13 @@
<div class="dropdown-menu"> <div class="dropdown-menu">
<span v-if="user.is_local"> <span v-if="user.is_local">
<button <button
class="dropdown-item" class="button-default dropdown-item"
@click="toggleRight(&quot;admin&quot;)" @click="toggleRight(&quot;admin&quot;)"
> >
{{ $t(!!user.rights.admin ? 'user_card.admin_menu.revoke_admin' : 'user_card.admin_menu.grant_admin') }} {{ $t(!!user.rights.admin ? 'user_card.admin_menu.revoke_admin' : 'user_card.admin_menu.grant_admin') }}
</button> </button>
<button <button
class="dropdown-item" class="button-default dropdown-item"
@click="toggleRight(&quot;moderator&quot;)" @click="toggleRight(&quot;moderator&quot;)"
> >
{{ $t(!!user.rights.moderator ? 'user_card.admin_menu.revoke_moderator' : 'user_card.admin_menu.grant_moderator') }} {{ $t(!!user.rights.moderator ? 'user_card.admin_menu.revoke_moderator' : 'user_card.admin_menu.grant_moderator') }}
@ -29,13 +29,13 @@
/> />
</span> </span>
<button <button
class="dropdown-item" class="button-default dropdown-item"
@click="toggleActivationStatus()" @click="toggleActivationStatus()"
> >
{{ $t(!!user.deactivated ? 'user_card.admin_menu.activate_account' : 'user_card.admin_menu.deactivate_account') }} {{ $t(!!user.deactivated ? 'user_card.admin_menu.activate_account' : 'user_card.admin_menu.deactivate_account') }}
</button> </button>
<button <button
class="dropdown-item" class="button-default dropdown-item"
@click="deleteUserDialog(true)" @click="deleteUserDialog(true)"
> >
{{ $t('user_card.admin_menu.delete_account') }} {{ $t('user_card.admin_menu.delete_account') }}
@ -47,7 +47,7 @@
/> />
<span v-if="hasTagPolicy"> <span v-if="hasTagPolicy">
<button <button
class="dropdown-item" class="button-default dropdown-item"
@click="toggleTag(tags.FORCE_NSFW)" @click="toggleTag(tags.FORCE_NSFW)"
> >
{{ $t('user_card.admin_menu.force_nsfw') }} {{ $t('user_card.admin_menu.force_nsfw') }}
@ -57,7 +57,7 @@
/> />
</button> </button>
<button <button
class="dropdown-item" class="button-default dropdown-item"
@click="toggleTag(tags.STRIP_MEDIA)" @click="toggleTag(tags.STRIP_MEDIA)"
> >
{{ $t('user_card.admin_menu.strip_media') }} {{ $t('user_card.admin_menu.strip_media') }}
@ -67,7 +67,7 @@
/> />
</button> </button>
<button <button
class="dropdown-item" class="button-default dropdown-item"
@click="toggleTag(tags.FORCE_UNLISTED)" @click="toggleTag(tags.FORCE_UNLISTED)"
> >
{{ $t('user_card.admin_menu.force_unlisted') }} {{ $t('user_card.admin_menu.force_unlisted') }}
@ -77,7 +77,7 @@
/> />
</button> </button>
<button <button
class="dropdown-item" class="button-default dropdown-item"
@click="toggleTag(tags.SANDBOX)" @click="toggleTag(tags.SANDBOX)"
> >
{{ $t('user_card.admin_menu.sandbox') }} {{ $t('user_card.admin_menu.sandbox') }}
@ -88,7 +88,7 @@
</button> </button>
<button <button
v-if="user.is_local" v-if="user.is_local"
class="dropdown-item" class="button-default dropdown-item"
@click="toggleTag(tags.DISABLE_REMOTE_SUBSCRIPTION)" @click="toggleTag(tags.DISABLE_REMOTE_SUBSCRIPTION)"
> >
{{ $t('user_card.admin_menu.disable_remote_subscription') }} {{ $t('user_card.admin_menu.disable_remote_subscription') }}
@ -99,7 +99,7 @@
</button> </button>
<button <button
v-if="user.is_local" v-if="user.is_local"
class="dropdown-item" class="button-default dropdown-item"
@click="toggleTag(tags.DISABLE_ANY_SUBSCRIPTION)" @click="toggleTag(tags.DISABLE_ANY_SUBSCRIPTION)"
> >
{{ $t('user_card.admin_menu.disable_any_subscription') }} {{ $t('user_card.admin_menu.disable_any_subscription') }}
@ -110,7 +110,7 @@
</button> </button>
<button <button
v-if="user.is_local" v-if="user.is_local"
class="dropdown-item" class="button-default dropdown-item"
@click="toggleTag(tags.QUARANTINE)" @click="toggleTag(tags.QUARANTINE)"
> >
{{ $t('user_card.admin_menu.quarantine') }} {{ $t('user_card.admin_menu.quarantine') }}
@ -124,7 +124,7 @@
</div> </div>
<button <button
slot="trigger" slot="trigger"
class="btn btn-default btn-block" class="btn button-default btn-block"
:class="{ toggled }" :class="{ toggled }"
> >
{{ $t('user_card.admin_menu.moderation') }} {{ $t('user_card.admin_menu.moderation') }}
@ -141,13 +141,13 @@
<p>{{ $t('user_card.admin_menu.delete_user_confirmation') }}</p> <p>{{ $t('user_card.admin_menu.delete_user_confirmation') }}</p>
<template slot="footer"> <template slot="footer">
<button <button
class="btn btn-default" class="btn button-default"
@click="deleteUserDialog(false)" @click="deleteUserDialog(false)"
> >
{{ $t('general.cancel') }} {{ $t('general.cancel') }}
</button> </button>
<button <button
class="btn btn-default danger" class="btn button-default danger"
@click="deleteUser()" @click="deleteUser()"
> >
{{ $t('user_card.admin_menu.delete_user') }} {{ $t('user_card.admin_menu.delete_user') }}

4
src/components/mute_card/mute_card.vue
View file

@ -3,7 +3,7 @@
<div class="mute-card-content-container"> <div class="mute-card-content-container">
<button <button
v-if="muted" v-if="muted"
class="btn btn-default" class="btn button-default"
:disabled="progress" :disabled="progress"
@click="unmuteUser" @click="unmuteUser"
> >
@ -16,7 +16,7 @@
</button> </button>
<button <button
v-else v-else
class="btn btn-default" class="btn button-default"
:disabled="progress" :disabled="progress"
@click="muteUser" @click="muteUser"
> >

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

@ -14,14 +14,15 @@
{{ notification.from_profile.screen_name }} {{ notification.from_profile.screen_name }}
</router-link> </router-link>
</small> </small>
<a <button
href="#" class="button-unstyled unmute"
class="unmute"
@click.prevent="toggleMute" @click.prevent="toggleMute"
><FAIcon >
<FAIcon
class="fa-scale-110 fa-old-padding" class="fa-scale-110 fa-old-padding"
icon="eye-slash" icon="eye-slash"
/></a> />
</button>
</div> </div>
<div <div
v-else v-else
@ -132,14 +133,16 @@
/> />
</span> </span>
</div> </div>
<a <button
v-if="needMute" v-if="needMute"
href="#" class="button-unstyled"
@click.prevent="toggleMute" @click.prevent="toggleMute"
><FAIcon >
<FAIcon
class="fa-scale-110 fa-old-padding" class="fa-scale-110 fa-old-padding"
icon="eye-slash" icon="eye-slash"
/></a> />
</button>
</span> </span>
<div <div
v-if="notification.type === 'follow' || notification.type === 'follow_request'" v-if="notification.type === 'follow' || notification.type === 'follow_request'"

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

@ -17,7 +17,7 @@
</div> </div>
<button <button
v-if="unseenCount" v-if="unseenCount"
class="read-button" class="button-default read-button"
@click.prevent="markAsSeen" @click.prevent="markAsSeen"
> >
{{ $t('notifications.read') }} {{ $t('notifications.read') }}
@ -41,15 +41,15 @@
> >
{{ $t('notifications.no_more_notifications') }} {{ $t('notifications.no_more_notifications') }}
</div> </div>
<a <button
v-else-if="!loading" v-else-if="!loading"
href="#" class="button-unstyled -link -fullwidth"
@click.prevent="fetchOlderNotifications()" @click.prevent="fetchOlderNotifications()"
> >
<div class="new-status-notification text-center panel-footer"> <div class="new-status-notification text-center panel-footer">
{{ minimalMode ? $t('interactions.load_older') : $t('notifications.load_older') }} {{ minimalMode ? $t('interactions.load_older') : $t('notifications.load_older') }}
</div> </div>
</a> </button>
<div <div
v-else v-else
class="new-status-notification text-center panel-footer" class="new-status-notification text-center panel-footer"

2
src/components/password_reset/password_reset.vue
View file

@ -51,7 +51,7 @@
<button <button
:disabled="isPending" :disabled="isPending"
type="submit" type="submit"
class="btn btn-default btn-block" class="btn button-default btn-block"
> >
{{ $t('general.submit') }} {{ $t('general.submit') }}
</button> </button>

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

@ -49,7 +49,7 @@
<div class="footer faint"> <div class="footer faint">
<button <button
v-if="!showResults" v-if="!showResults"
class="btn btn-default poll-vote-button" class="btn button-default poll-vote-button"
type="button" type="button"
:disabled="isDisabled" :disabled="isDisabled"
@click="vote" @click="vote"

13
src/components/popover/popover.js
View file

@ -21,7 +21,10 @@ const Popover = {
// Replaces the classes you may want for the popover container. // Replaces the classes you may want for the popover container.
// Use 'popover-default' in addition to get the default popover // Use 'popover-default' in addition to get the default popover
// styles with your custom class. // styles with your custom class.
popoverClass: String popoverClass: String,
// If true, subtract padding when calculating position for the popover,
// use it when popover offset looks to be different on top vs bottom.
removePadding: Boolean
}, },
data () { data () {
return { return {
@ -96,9 +99,15 @@ const Popover = {
if (origin.y + content.offsetHeight > yBounds.max) usingTop = true if (origin.y + content.offsetHeight > yBounds.max) usingTop = true
if (origin.y - content.offsetHeight < yBounds.min) usingTop = false if (origin.y - content.offsetHeight < yBounds.min) usingTop = false
let vPadding = 0
if (this.removePadding && usingTop) {
const anchorStyle = getComputedStyle(anchorEl)
vPadding = parseFloat(anchorStyle.paddingTop) + parseFloat(anchorStyle.paddingBottom)
}
const yOffset = (this.offset && this.offset.y) || 0 const yOffset = (this.offset && this.offset.y) || 0
const translateY = usingTop const translateY = usingTop
? -anchorEl.offsetHeight - yOffset - content.offsetHeight ? -anchorEl.offsetHeight + vPadding - yOffset - content.offsetHeight
: yOffset : yOffset
const xOffset = (this.offset && this.offset.x) || 0 const xOffset = (this.offset && this.offset.x) || 0

9
src/components/popover/popover.vue
View file

@ -3,12 +3,13 @@
@mouseenter="onMouseenter" @mouseenter="onMouseenter"
@mouseleave="onMouseleave" @mouseleave="onMouseleave"
> >
<div <button
ref="trigger" ref="trigger"
class="button-unstyled -fullwidth popover-trigger-button"
@click="onClick" @click="onClick"
> >
<slot name="trigger" /> <slot name="trigger" />
</div> </button>
<div <div
v-if="!hidden" v-if="!hidden"
ref="content" ref="content"
@ -30,6 +31,10 @@
<style lang="scss"> <style lang="scss">
@import '../../_variables.scss'; @import '../../_variables.scss';
.popover-trigger-button {
display: block;
}
.popover { .popover {
z-index: 8; z-index: 8;
position: absolute; position: absolute;

28
src/components/post_status_form/post_status_form.vue
View file

@ -24,12 +24,12 @@
tag="p" tag="p"
class="visibility-notice" class="visibility-notice"
> >
<a <button
href="#" class="button-unstyled -link"
@click="openProfileTab" @click="openProfileTab"
> >
{{ $t('post_status.account_not_locked_warning_link') }} {{ $t('post_status.account_not_locked_warning_link') }}
</a> </button>
</i18n> </i18n>
<p <p
v-if="!hideScopeNotice && newStatus.visibility === 'public'" v-if="!hideScopeNotice && newStatus.visibility === 'public'"
@ -243,38 +243,34 @@
@upload-failed="uploadFailed" @upload-failed="uploadFailed"
@all-uploaded="finishedUploadingFiles" @all-uploaded="finishedUploadingFiles"
/> />
<div <button
class="emoji-icon" class="emoji-icon button-unstyled"
>
<div
:title="$t('emoji.add_emoji')" :title="$t('emoji.add_emoji')"
class="btn btn-default"
@click="showEmojiPicker" @click="showEmojiPicker"
> >
<FAIcon icon="smile-beam" /> <FAIcon icon="smile-beam" />
</div> </button>
</div> <button
<div
v-if="pollsAvailable" v-if="pollsAvailable"
class="poll-icon" class="poll-icon button-unstyled"
:class="{ selected: pollFormVisible }" :class="{ selected: pollFormVisible }"
:title="$t('polls.add_poll')" :title="$t('polls.add_poll')"
@click="togglePollForm" @click="togglePollForm"
> >
<FAIcon icon="poll-h" /> <FAIcon icon="poll-h" />
</div> </button>
</div> </div>
<button <button
v-if="posting" v-if="posting"
disabled disabled
class="btn btn-default" class="btn button-default"
> >
{{ $t('post_status.posting') }} {{ $t('post_status.posting') }}
</button> </button>
<button <button
v-else-if="isOverLengthLimit" v-else-if="isOverLengthLimit"
disabled disabled
class="btn btn-default" class="btn button-default"
> >
{{ $t('general.submit') }} {{ $t('general.submit') }}
</button> </button>
@ -282,7 +278,7 @@
<button <button
v-else v-else
:disabled="uploadingFiles || disableSubmit" :disabled="uploadingFiles || disableSubmit"
class="btn btn-default" class="btn button-default"
@touchstart.stop.prevent="postStatus($event, newStatus)" @touchstart.stop.prevent="postStatus($event, newStatus)"
@click.stop.prevent="postStatus($event, newStatus)" @click.stop.prevent="postStatus($event, newStatus)"
> >

20
src/components/react_button/react_button.vue
View file

@ -3,8 +3,8 @@
trigger="click" trigger="click"
placement="top" placement="top"
:offset="{ y: 5 }" :offset="{ y: 5 }"
class="react-button-popover"
:bound-to="{ x: 'container' }" :bound-to="{ x: 'container' }"
remove-padding
> >
<div <div
slot="content" slot="content"
@ -40,11 +40,14 @@
<div class="reaction-bottom-fader" /> <div class="reaction-bottom-fader" />
</div> </div>
</div> </div>
<span slot="trigger"> <span
<FAIcon slot="trigger"
class="fa-scale-110 fa-old-padding add-reaction-button" class="ReactButton"
:icon="['far', 'smile-beam']"
:title="$t('tool_tip.add_reaction')" :title="$t('tool_tip.add_reaction')"
>
<FAIcon
class="fa-scale-110 fa-old-padding"
:icon="['far', 'smile-beam']"
/> />
</span> </span>
</Popover> </Popover>
@ -104,10 +107,11 @@
} }
} }
.add-reaction-button { .ReactButton {
cursor: pointer; padding: 10px;
margin: -10px;
&:hover { &:hover .svg-inline--fa {
color: $fallback--text; color: $fallback--text;
color: var(--text, $fallback--text); color: var(--text, $fallback--text);
} }

2
src/components/registration/registration.vue
View file

@ -211,7 +211,7 @@
<button <button
:disabled="isPending" :disabled="isPending"
type="submit" type="submit"
class="btn btn-default" class="btn button-default"
> >
{{ $t('general.submit') }} {{ $t('general.submit') }}
</button> </button>

45
src/components/reply_button/reply_button.vue
View file

@ -1,20 +1,28 @@
<template> <template>
<div> <div class="ReplyButton">
<FAIcon <button
v-if="loggedIn" v-if="loggedIn"
class="ReplyButton fa-scale-110 fa-old-padding -interactive" class="button-unstyled interactive"
icon="reply"
:title="$t('tool_tip.reply')"
:class="{'-active': replying}" :class="{'-active': replying}"
:title="$t('tool_tip.reply')"
@click.prevent="$emit('toggle')" @click.prevent="$emit('toggle')"
/> >
<FAIcon <FAIcon
v-else class="fa-scale-110 fa-old-padding"
icon="reply" icon="reply"
class="ReplyButton fa-scale-110 fa-old-padding" />
</button>
<span v-else>
<FAIcon
icon="reply"
class="fa-scale-110 fa-old-padding"
:title="$t('tool_tip.reply')" :title="$t('tool_tip.reply')"
/> />
<span v-if="status.replies_count > 0"> </span>
<span
v-if="status.replies_count > 0"
class="action-counter"
>
{{ status.replies_count }} {{ status.replies_count }}
</span> </span>
</div> </div>
@ -26,14 +34,25 @@
@import '../../_variables.scss'; @import '../../_variables.scss';
.ReplyButton { .ReplyButton {
&.-interactive { display: flex;
cursor: pointer;
&:hover, > :first-child {
&.-active { padding: 10px;
margin: -10px -8px -10px -10px;
}
.action-counter {
pointer-events: none;
user-select: none;
}
.interactive {
&:hover .svg-inline--fa,
&.-active .svg-inline--fa {
color: $fallback--cBlue; color: $fallback--cBlue;
color: var(--cBlue, $fallback--cBlue); color: var(--cBlue, $fallback--cBlue);
} }
} }
} }
</style> </style>

5
src/components/retweet_button/retweet_button.js
View file

@ -24,11 +24,6 @@ const RetweetButton = {
} }
}, },
computed: { computed: {
classes () {
return {
'-repeated': this.status.repeated
}
},
mergedConfig () { mergedConfig () {
return this.$store.getters.mergedConfig return this.$store.getters.mergedConfig
} }

66
src/components/retweet_button/retweet_button.vue
View file

@ -1,33 +1,38 @@
<template> <template>
<div v-if="loggedIn"> <div class="RetweetButton">
<template v-if="visibility !== 'private' && visibility !== 'direct'"> <button
<FAIcon v-if="visibility !== 'private' && visibility !== 'direct' && loggedIn"
:class="classes" class="button-unstyled interactive"
class="RetweetButton fa-scale-110 fa-old-padding -interactive" :class="status.repeated && '-repeated'"
icon="retweet"
:spin="animated"
:title="$t('tool_tip.repeat')" :title="$t('tool_tip.repeat')"
@click.prevent="retweet()" @click.prevent="retweet()"
/> >
<span v-if="!mergedConfig.hidePostStats && status.repeat_num > 0">{{ status.repeat_num }}</span>
</template>
<template v-else>
<FAIcon <FAIcon
:class="classes" class="fa-scale-110 fa-old-padding"
class="RetweetButton fa-scale-110 fa-old-padding" icon="retweet"
:spin="animated"
/>
</button>
<span v-else-if="loggedIn">
<FAIcon
class="fa-scale-110 fa-old-padding"
icon="lock" icon="lock"
:title="$t('timeline.no_retweet_hint')" :title="$t('timeline.no_retweet_hint')"
/> />
</template> </span>
</div> <span v-else>
<div v-else-if="!loggedIn">
<FAIcon <FAIcon
:class="classes"
class="fa-scale-110 fa-old-padding" class="fa-scale-110 fa-old-padding"
icon="retweet" icon="retweet"
:title="$t('tool_tip.repeat')" :title="$t('tool_tip.repeat')"
/> />
<span v-if="!mergedConfig.hidePostStats && status.repeat_num > 0">{{ status.repeat_num }}</span> </span>
<span
v-if="!mergedConfig.hidePostStats && status.repeat_num > 0"
class="no-event"
>
{{ status.repeat_num }}
</span>
</div> </div>
</template> </template>
@ -37,19 +42,28 @@
@import '../../_variables.scss'; @import '../../_variables.scss';
.RetweetButton { .RetweetButton {
&.-interactive { display: flex;
cursor: pointer;
> :first-child {
padding: 10px;
margin: -10px -8px -10px -10px;
}
.action-counter {
pointer-events: none;
user-select: none;
}
.interactive {
.svg-inline--fa {
animation-duration: 0.6s; animation-duration: 0.6s;
}
&:hover { &:hover .svg-inline--fa,
&.-repeated .svg-inline--fa {
color: $fallback--cGreen; color: $fallback--cGreen;
color: var(--cGreen, $fallback--cGreen); color: var(--cGreen, $fallback--cGreen);
} }
} }
&.-repeated {
color: $fallback--cGreen;
color: var(--cGreen, $fallback--cGreen);
}
} }
</style> </style>

24
src/components/scope_selector/scope_selector.vue
View file

@ -3,9 +3,9 @@
v-if="!showNothing" v-if="!showNothing"
class="ScopeSelector" class="ScopeSelector"
> >
<span <button
v-if="showDirect" v-if="showDirect"
class="scope" class="button-unstyled scope"
:class="css.direct" :class="css.direct"
:title="$t('post_status.scope.direct')" :title="$t('post_status.scope.direct')"
@click="changeVis('direct')" @click="changeVis('direct')"
@ -14,10 +14,10 @@
icon="envelope" icon="envelope"
class="fa-scale-110 fa-old-padding" class="fa-scale-110 fa-old-padding"
/> />
</span> </button>
<span <button
v-if="showPrivate" v-if="showPrivate"
class="scope" class="button-unstyled scope"
:class="css.private" :class="css.private"
:title="$t('post_status.scope.private')" :title="$t('post_status.scope.private')"
@click="changeVis('private')" @click="changeVis('private')"
@ -26,10 +26,10 @@
icon="lock" icon="lock"
class="fa-scale-110 fa-old-padding" class="fa-scale-110 fa-old-padding"
/> />
</span> </button>
<span <button
v-if="showUnlisted" v-if="showUnlisted"
class="scope" class="button-unstyled scope"
:class="css.unlisted" :class="css.unlisted"
:title="$t('post_status.scope.unlisted')" :title="$t('post_status.scope.unlisted')"
@click="changeVis('unlisted')" @click="changeVis('unlisted')"
@ -38,10 +38,10 @@
icon="lock-open" icon="lock-open"
class="fa-scale-110 fa-old-padding" class="fa-scale-110 fa-old-padding"
/> />
</span> </button>
<span <button
v-if="showPublic" v-if="showPublic"
class="scope" class="button-unstyled scope"
:class="css.public" :class="css.public"
:title="$t('post_status.scope.public')" :title="$t('post_status.scope.public')"
@click="changeVis('public')" @click="changeVis('public')"
@ -50,7 +50,7 @@
icon="globe" icon="globe"
class="fa-scale-110 fa-old-padding" class="fa-scale-110 fa-old-padding"
/> />
</span> </button>
</div> </div>
</template> </template>

2
src/components/search/search.vue
View file

@ -14,7 +14,7 @@
@keyup.enter="newQuery(searchTerm)" @keyup.enter="newQuery(searchTerm)"
> >
<button <button
class="btn search-button" class="btn button-default search-button"
@click="newQuery(searchTerm)" @click="newQuery(searchTerm)"
> >
<FAIcon icon="search" /> <FAIcon icon="search" />

28
src/components/search_bar/search_bar.vue
View file

@ -3,17 +3,18 @@
class="SearchBar" class="SearchBar"
:class="{ '-expanded': !hidden }" :class="{ '-expanded': !hidden }"
> >
<a <button
v-if="hidden" v-if="hidden"
href="#" class="button-unstyled nav-icon"
class="nav-icon"
:title="$t('nav.search')" :title="$t('nav.search')"
><FAIcon @click.prevent.stop="toggleHidden"
>
<FAIcon
fixed-width fixed-width
class="fa-scale-110 fa-old-padding" class="fa-scale-110 fa-old-padding"
icon="search" icon="search"
@click.prevent.stop="toggleHidden" />
/></a> </button>
<template v-else> <template v-else>
<input <input
id="search-bar-input" id="search-bar-input"
@ -25,7 +26,7 @@
@keyup.enter="find(searchTerm)" @keyup.enter="find(searchTerm)"
> >
<button <button
class="btn search-button" class="button-default search-button"
@click="find(searchTerm)" @click="find(searchTerm)"
> >
<FAIcon <FAIcon
@ -33,14 +34,16 @@
icon="search" icon="search"
/> />
</button> </button>
<span> <button
class="button-unstyled cancel-search"
@click.prevent.stop="toggleHidden"
>
<FAIcon <FAIcon
fixed-width fixed-width
icon="times" icon="times"
class="cancel-icon fa-scale-110 fa-old-padding" class="cancel-icon fa-scale-110 fa-old-padding"
@click.prevent.stop="toggleHidden"
/> />
</span> </button>
</template> </template>
</div> </div>
</template> </template>
@ -69,8 +72,11 @@
flex: 1 0 auto; flex: 1 0 auto;
} }
.cancel-search {
height: 50px;
}
.cancel-icon { .cancel-icon {
cursor: pointer;
color: $fallback--text; color: $fallback--text;
color: var(--btnTopBarText, $fallback--text); color: var(--btnTopBarText, $fallback--text);
} }

4
src/components/settings_modal/settings_modal.vue
View file

@ -30,13 +30,13 @@
</template> </template>
</transition> </transition>
<button <button
class="btn" class="btn button-default"
@click="peekModal" @click="peekModal"
> >
{{ $t('general.peek') }} {{ $t('general.peek') }}
</button> </button>
<button <button
class="btn" class="btn button-default"
@click="closeModal" @click="closeModal"
> >
{{ $t('general.close') }} {{ $t('general.close') }}

10
src/components/settings_modal/tabs/mutes_and_blocks_tab.vue
View file

@ -27,7 +27,7 @@
<div class="bulk-actions"> <div class="bulk-actions">
<ProgressButton <ProgressButton
v-if="selected.length > 0" v-if="selected.length > 0"
class="btn btn-default bulk-action-button" class="btn button-default bulk-action-button"
:click="() => blockUsers(selected)" :click="() => blockUsers(selected)"
> >
{{ $t('user_card.block') }} {{ $t('user_card.block') }}
@ -37,7 +37,7 @@
</ProgressButton> </ProgressButton>
<ProgressButton <ProgressButton
v-if="selected.length > 0" v-if="selected.length > 0"
class="btn btn-default" class="btn button-default"
:click="() => unblockUsers(selected)" :click="() => unblockUsers(selected)"
> >
{{ $t('user_card.unblock') }} {{ $t('user_card.unblock') }}
@ -85,7 +85,7 @@
<div class="bulk-actions"> <div class="bulk-actions">
<ProgressButton <ProgressButton
v-if="selected.length > 0" v-if="selected.length > 0"
class="btn btn-default" class="btn button-default"
:click="() => muteUsers(selected)" :click="() => muteUsers(selected)"
> >
{{ $t('user_card.mute') }} {{ $t('user_card.mute') }}
@ -95,7 +95,7 @@
</ProgressButton> </ProgressButton>
<ProgressButton <ProgressButton
v-if="selected.length > 0" v-if="selected.length > 0"
class="btn btn-default" class="btn button-default"
:click="() => unmuteUsers(selected)" :click="() => unmuteUsers(selected)"
> >
{{ $t('user_card.unmute') }} {{ $t('user_card.unmute') }}
@ -141,7 +141,7 @@
<div class="bulk-actions"> <div class="bulk-actions">
<ProgressButton <ProgressButton
v-if="selected.length > 0" v-if="selected.length > 0"
class="btn btn-default" class="btn button-default"
:click="() => unmuteDomains(selected)" :click="() => unmuteDomains(selected)"
> >
{{ $t('domain_mute_card.unmute') }} {{ $t('domain_mute_card.unmute') }}

2
src/components/settings_modal/tabs/notifications_tab.vue
View file

@ -21,7 +21,7 @@
<p>{{ $t('settings.notification_mutes') }}</p> <p>{{ $t('settings.notification_mutes') }}</p>
<p>{{ $t('settings.notification_blocks') }}</p> <p>{{ $t('settings.notification_blocks') }}</p>
<button <button
class="btn btn-default" class="btn button-default"
@click="updateNotificationSettings" @click="updateNotificationSettings"
> >
{{ $t('general.submit') }} {{ $t('general.submit') }}

8
src/components/settings_modal/tabs/profile_tab.vue
View file

@ -150,7 +150,7 @@
</p> </p>
<button <button
:disabled="newName && newName.length === 0" :disabled="newName && newName.length === 0"
class="btn btn-default" class="btn button-default"
@click="updateProfile" @click="updateProfile"
> >
{{ $t('general.submit') }} {{ $t('general.submit') }}
@ -179,7 +179,7 @@
<button <button
v-show="pickAvatarBtnVisible" v-show="pickAvatarBtnVisible"
id="pick-avatar" id="pick-avatar"
class="btn" class="button-default btn"
type="button" type="button"
> >
{{ $t('settings.upload_a_photo') }} {{ $t('settings.upload_a_photo') }}
@ -224,7 +224,7 @@
/> />
<button <button
v-else-if="bannerPreview" v-else-if="bannerPreview"
class="btn btn-default" class="btn button-default"
@click="submitBanner(banner)" @click="submitBanner(banner)"
> >
{{ $t('general.submit') }} {{ $t('general.submit') }}
@ -274,7 +274,7 @@
/> />
<button <button
v-else-if="backgroundPreview" v-else-if="backgroundPreview"
class="btn btn-default" class="btn button-default"
@click="submitBackground(background)" @click="submitBackground(background)"
> >
{{ $t('general.submit') }} {{ $t('general.submit') }}

4
src/components/settings_modal/tabs/security_tab/confirm.vue
View file

@ -2,14 +2,14 @@
<div> <div>
<slot /> <slot />
<button <button
class="btn btn-default" class="btn button-default"
:disabled="disabled" :disabled="disabled"
@click="confirm" @click="confirm"
> >
{{ $t('general.confirm') }} {{ $t('general.confirm') }}
</button> </button>
<button <button
class="btn btn-default" class="btn button-default"
:disabled="disabled" :disabled="disabled"
@click="cancel" @click="cancel"
> >

10
src/components/settings_modal/tabs/security_tab/mfa.vue
View file

@ -29,7 +29,7 @@
/> />
<button <button
v-if="!confirmNewBackupCodes" v-if="!confirmNewBackupCodes"
class="btn btn-default" class="btn button-default"
@click="getBackupCodes" @click="getBackupCodes"
> >
{{ $t('settings.mfa.generate_new_recovery_codes') }} {{ $t('settings.mfa.generate_new_recovery_codes') }}
@ -61,7 +61,7 @@
<button <button
v-if="canSetupOTP" v-if="canSetupOTP"
class="btn btn-default" class="btn button-default"
@click="cancelSetup" @click="cancelSetup"
> >
{{ $t('general.cancel') }} {{ $t('general.cancel') }}
@ -69,7 +69,7 @@
<button <button
v-if="canSetupOTP" v-if="canSetupOTP"
class="btn btn-default" class="btn button-default"
@click="setupOTP" @click="setupOTP"
> >
{{ $t('settings.mfa.setup_otp') }} {{ $t('settings.mfa.setup_otp') }}
@ -108,13 +108,13 @@
> >
<div class="confirm-otp-actions"> <div class="confirm-otp-actions">
<button <button
class="btn btn-default" class="btn button-default"
@click="doConfirmOTP" @click="doConfirmOTP"
> >
{{ $t('settings.mfa.confirm_and_enable') }} {{ $t('settings.mfa.confirm_and_enable') }}
</button> </button>
<button <button
class="btn btn-default" class="btn button-default"
@click="cancelSetup" @click="cancelSetup"
> >
{{ $t('general.cancel') }} {{ $t('general.cancel') }}

4
src/components/settings_modal/tabs/security_tab/mfa_totp.vue
View file

@ -4,7 +4,7 @@
<strong>{{ $t('settings.mfa.otp') }}</strong> <strong>{{ $t('settings.mfa.otp') }}</strong>
<button <button
v-if="!isActivated" v-if="!isActivated"
class="btn btn-default" class="btn button-default"
@click="doActivate" @click="doActivate"
> >
{{ $t('general.enable') }} {{ $t('general.enable') }}
@ -12,7 +12,7 @@
<button <button
v-if="isActivated" v-if="isActivated"
class="btn btn-default" class="btn button-default"
:disabled="deactivate" :disabled="deactivate"
@click="doDeactivate" @click="doDeactivate"
> >

10
src/components/settings_modal/tabs/security_tab/security_tab.vue
View file

@ -19,7 +19,7 @@
> >
</div> </div>
<button <button
class="btn btn-default" class="btn button-default"
@click="changeEmail" @click="changeEmail"
> >
{{ $t('general.submit') }} {{ $t('general.submit') }}
@ -57,7 +57,7 @@
> >
</div> </div>
<button <button
class="btn btn-default" class="btn button-default"
@click="changePassword" @click="changePassword"
> >
{{ $t('general.submit') }} {{ $t('general.submit') }}
@ -92,7 +92,7 @@
<td>{{ oauthToken.validUntil }}</td> <td>{{ oauthToken.validUntil }}</td>
<td class="actions"> <td class="actions">
<button <button
class="btn btn-default" class="btn button-default"
@click="revokeToken(oauthToken.id)" @click="revokeToken(oauthToken.id)"
> >
{{ $t('settings.revoke_token') }} {{ $t('settings.revoke_token') }}
@ -116,7 +116,7 @@
type="password" type="password"
> >
<button <button
class="btn btn-default" class="btn button-default"
@click="deleteAccount" @click="deleteAccount"
> >
{{ $t('settings.delete_account') }} {{ $t('settings.delete_account') }}
@ -130,7 +130,7 @@
</p> </p>
<button <button
v-if="!deletingAccount" v-if="!deletingAccount"
class="btn btn-default" class="btn button-default"
@click="confirmDelete" @click="confirmDelete"
> >
{{ $t('general.submit') }} {{ $t('general.submit') }}

4
src/components/settings_modal/tabs/theme_tab/preview.vue
View file

@ -15,7 +15,7 @@
<span class="alert error"> <span class="alert error">
{{ $t('settings.style.preview.error') }} {{ $t('settings.style.preview.error') }}
</span> </span>
<button class="btn"> <button class="btn button-default">
{{ $t('settings.style.preview.button') }} {{ $t('settings.style.preview.button') }}
</button> </button>
</div> </div>
@ -102,7 +102,7 @@
> >
<label for="preview_checkbox">{{ $t('settings.style.preview.checkbox') }}</label> <label for="preview_checkbox">{{ $t('settings.style.preview.checkbox') }}</label>
</span> </span>
<button class="btn"> <button class="btn button-default">
{{ $t('settings.style.preview.button') }} {{ $t('settings.style.preview.button') }}
</button> </button>
</div> </div>

28
src/components/settings_modal/tabs/theme_tab/theme_tab.vue
View file

@ -12,13 +12,13 @@
<div class="buttons"> <div class="buttons">
<template v-if="themeWarning.type === 'snapshot_source_mismatch'"> <template v-if="themeWarning.type === 'snapshot_source_mismatch'">
<button <button
class="btn" class="btn button-default"
@click="forceLoad" @click="forceLoad"
> >
{{ $t('settings.style.switcher.use_source') }} {{ $t('settings.style.switcher.use_source') }}
</button> </button>
<button <button
class="btn" class="btn button-default"
@click="forceSnapshot" @click="forceSnapshot"
> >
{{ $t('settings.style.switcher.use_snapshot') }} {{ $t('settings.style.switcher.use_snapshot') }}
@ -26,7 +26,7 @@
</template> </template>
<template v-else-if="themeWarning.noActionsPossible"> <template v-else-if="themeWarning.noActionsPossible">
<button <button
class="btn" class="btn button-default"
@click="dismissWarning" @click="dismissWarning"
> >
{{ $t('general.dismiss') }} {{ $t('general.dismiss') }}
@ -34,13 +34,13 @@
</template> </template>
<template v-else> <template v-else>
<button <button
class="btn" class="btn button-default"
@click="forceLoad" @click="forceLoad"
> >
{{ $t('settings.style.switcher.load_theme') }} {{ $t('settings.style.switcher.load_theme') }}
</button> </button>
<button <button
class="btn" class="btn button-default"
@click="dismissWarning" @click="dismissWarning"
> >
{{ $t('settings.style.switcher.keep_as_is') }} {{ $t('settings.style.switcher.keep_as_is') }}
@ -131,13 +131,13 @@
<p>{{ $t('settings.theme_help') }}</p> <p>{{ $t('settings.theme_help') }}</p>
<div class="tab-header-buttons"> <div class="tab-header-buttons">
<button <button
class="btn" class="btn button-default"
@click="clearOpacity" @click="clearOpacity"
> >
{{ $t('settings.style.switcher.clear_opacity') }} {{ $t('settings.style.switcher.clear_opacity') }}
</button> </button>
<button <button
class="btn" class="btn button-default"
@click="clearV1" @click="clearV1"
> >
{{ $t('settings.style.switcher.clear_all') }} {{ $t('settings.style.switcher.clear_all') }}
@ -238,13 +238,13 @@
<div class="tab-header"> <div class="tab-header">
<p>{{ $t('settings.theme_help') }}</p> <p>{{ $t('settings.theme_help') }}</p>
<button <button
class="btn" class="btn button-default"
@click="clearOpacity" @click="clearOpacity"
> >
{{ $t('settings.style.switcher.clear_opacity') }} {{ $t('settings.style.switcher.clear_opacity') }}
</button> </button>
<button <button
class="btn" class="btn button-default"
@click="clearV1" @click="clearV1"
> >
{{ $t('settings.style.switcher.clear_all') }} {{ $t('settings.style.switcher.clear_all') }}
@ -806,7 +806,7 @@
<div class="tab-header"> <div class="tab-header">
<p>{{ $t('settings.radii_help') }}</p> <p>{{ $t('settings.radii_help') }}</p>
<button <button
class="btn" class="btn button-default"
@click="clearRoundness" @click="clearRoundness"
> >
{{ $t('settings.style.switcher.clear_all') }} {{ $t('settings.style.switcher.clear_all') }}
@ -936,7 +936,7 @@
/> />
</div> </div>
<button <button
class="btn" class="btn button-default"
@click="clearShadows" @click="clearShadows"
> >
{{ $t('settings.style.switcher.clear_all') }} {{ $t('settings.style.switcher.clear_all') }}
@ -980,7 +980,7 @@
<div class="tab-header"> <div class="tab-header">
<p>{{ $t('settings.style.fonts.help') }}</p> <p>{{ $t('settings.style.fonts.help') }}</p>
<button <button
class="btn" class="btn button-default"
@click="clearFonts" @click="clearFonts"
> >
{{ $t('settings.style.switcher.clear_all') }} {{ $t('settings.style.switcher.clear_all') }}
@ -1017,14 +1017,14 @@
<div class="apply-container"> <div class="apply-container">
<button <button
class="btn submit" class="btn button-default submit"
:disabled="!themeValid" :disabled="!themeValid"
@click="setCustomTheme" @click="setCustomTheme"
> >
{{ $t('general.apply') }} {{ $t('general.apply') }}
</button> </button>
<button <button
class="btn" class="btn button-default"
@click="clearAll" @click="clearAll"
> >
{{ $t('settings.style.switcher.reset') }} {{ $t('settings.style.switcher.reset') }}

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

@ -84,7 +84,7 @@
/> />
</label> </label>
<button <button
class="btn btn-default" class="btn button-default"
:disabled="!ready || !present" :disabled="!ready || !present"
@click="del" @click="del"
> >
@ -94,7 +94,7 @@
/> />
</button> </button>
<button <button
class="btn btn-default" class="btn button-default"
:disabled="!moveUpValid" :disabled="!moveUpValid"
@click="moveUp" @click="moveUp"
> >
@ -104,7 +104,7 @@
/> />
</button> </button>
<button <button
class="btn btn-default" class="btn button-default"
:disabled="!moveDnValid" :disabled="!moveDnValid"
@click="moveDn" @click="moveDn"
> >
@ -114,7 +114,7 @@
/> />
</button> </button>
<button <button
class="btn btn-default" class="btn button-default"
:disabled="usingFallback" :disabled="usingFallback"
@click="add" @click="add"
> >

14
src/components/side_drawer/side_drawer.vue
View file

@ -144,8 +144,8 @@
</router-link> </router-link>
</li> </li>
<li @click="toggleDrawer"> <li @click="toggleDrawer">
<a <button
href="#" class="button-unstyled -link -fullwidth"
@click="openSettingsModal" @click="openSettingsModal"
> >
<FAIcon <FAIcon
@ -153,7 +153,7 @@
class="fa-scale-110 fa-old-padding" class="fa-scale-110 fa-old-padding"
icon="cog" icon="cog"
/> {{ $t("settings.settings") }} /> {{ $t("settings.settings") }}
</a> </button>
</li> </li>
<li @click="toggleDrawer"> <li @click="toggleDrawer">
<router-link :to="{ name: 'about'}"> <router-link :to="{ name: 'about'}">
@ -183,8 +183,8 @@
v-if="currentUser" v-if="currentUser"
@click="toggleDrawer" @click="toggleDrawer"
> >
<a <button
href="#" class="button-unstyled -link -fullwidth"
@click="doLogout" @click="doLogout"
> >
<FAIcon <FAIcon
@ -192,7 +192,7 @@
class="fa-scale-110 fa-old-padding" class="fa-scale-110 fa-old-padding"
icon="sign-out-alt" icon="sign-out-alt"
/> {{ $t("login.logout") }} /> {{ $t("login.logout") }}
</a> </button>
</li> </li>
</ul> </ul>
</div> </div>
@ -331,7 +331,7 @@
.side-drawer li { .side-drawer li {
padding: 0; padding: 0;
a { a, button {
box-sizing: border-box; box-sizing: border-box;
display: block; display: block;
height: 3em; height: 3em;

35
src/components/status/status.vue
View file

@ -47,16 +47,15 @@
> >
{{ muteWordHits.join(', ') }} {{ muteWordHits.join(', ') }}
</small> </small>
<a <button
href="#" class="unmute button-unstyled"
class="unmute fa-scale-110 fa-old-padding"
@click.prevent="toggleMute" @click.prevent="toggleMute"
> >
<FAIcon <FAIcon
icon="eye-slash" icon="eye-slash"
class="fa-scale-110 fa-old-padding" class="fa-scale-110 fa-old-padding"
/> />
</a> </button>
</div> </div>
</template> </template>
<template v-else> <template v-else>
@ -201,9 +200,9 @@
icon="external-link-square-alt" icon="external-link-square-alt"
/> />
</a> </a>
<a <button
v-if="expandable && !isPreview" v-if="expandable && !isPreview"
href="#" class="button-unstyled"
title="Expand" title="Expand"
@click.prevent="toggleExpanded" @click.prevent="toggleExpanded"
> >
@ -211,17 +210,17 @@
class="fa-scale-110 fa-old-padding" class="fa-scale-110 fa-old-padding"
icon="plus-square" icon="plus-square"
/> />
</a> </button>
<a <button
v-if="unmuted" v-if="unmuted"
href="#" class="button-unstyled"
@click.prevent="toggleMute" @click.prevent="toggleMute"
> >
<FAIcon <FAIcon
icon="eye-slash" icon="eye-slash"
class="fa-scale-110 fa-old-padding" class="fa-scale-110 fa-old-padding"
/> />
</a> </button>
</span> </span>
</div> </div>
@ -237,9 +236,8 @@
style="min-width: 0" style="min-width: 0"
:class="{ '-strikethrough': !status.parent_visible }" :class="{ '-strikethrough': !status.parent_visible }"
> >
<a <button
class="reply-to" class="button-unstyled reply-to"
href="#"
:aria-label="$t('tool_tip.reply')" :aria-label="$t('tool_tip.reply')"
@click.prevent="gotoOriginal(status.in_reply_to_status_id)" @click.prevent="gotoOriginal(status.in_reply_to_status_id)"
> >
@ -253,7 +251,7 @@
> >
{{ $t('status.reply_to') }} {{ $t('status.reply_to') }}
</span> </span>
</a> </button>
</StatusPopover> </StatusPopover>
<span <span
@ -286,11 +284,12 @@
:key="reply.id" :key="reply.id"
:status-id="reply.id" :status-id="reply.id"
> >
<a <button
href="#" class="button-unstyled -link reply-link"
class="reply-link"
@click.prevent="gotoOriginal(reply.id)" @click.prevent="gotoOriginal(reply.id)"
>{{ reply.name }}</a> >
{{ reply.name }}
</button>
</StatusPopover> </StatusPopover>
</div> </div>
</div> </div>

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

@ -12,35 +12,34 @@
@click.prevent="linkClicked" @click.prevent="linkClicked"
v-html="status.summary_html" v-html="status.summary_html"
/> />
<a <button
v-if="longSubject && showingLongSubject" v-if="longSubject && showingLongSubject"
href="#" class="button-unstyled -link tall-subject-hider"
class="tall-subject-hider"
@click.prevent="showingLongSubject=false" @click.prevent="showingLongSubject=false"
>{{ $t("status.hide_full_subject") }}</a> >
<a {{ $t("status.hide_full_subject") }}
</button>
<button
v-else-if="longSubject" v-else-if="longSubject"
class="tall-subject-hider" class="button-unstyled -link tall-subject-hider"
:class="{ 'tall-subject-hider_focused': focused }" :class="{ 'tall-subject-hider_focused': focused }"
href="#"
@click.prevent="showingLongSubject=true" @click.prevent="showingLongSubject=true"
> >
{{ $t("status.show_full_subject") }} {{ $t("status.show_full_subject") }}
</a> </button>
</div> </div>
<div <div
:class="{'tall-status': hideTallStatus}" :class="{'tall-status': hideTallStatus}"
class="status-content-wrapper" class="status-content-wrapper"
> >
<a <button
v-if="hideTallStatus" v-if="hideTallStatus"
class="tall-status-hider" class="button-unstyled -link tall-status-hider"
:class="{ 'tall-status-hider_focused': focused }" :class="{ 'tall-status-hider_focused': focused }"
href="#"
@click.prevent="toggleShowMore" @click.prevent="toggleShowMore"
> >
{{ $t("general.show_more") }} {{ $t("general.show_more") }}
</a> </button>
<div <div
v-if="!hideSubjectStatus" v-if="!hideSubjectStatus"
:class="{ 'single-line': singleLine }" :class="{ 'single-line': singleLine }"
@ -48,10 +47,9 @@
@click.prevent="linkClicked" @click.prevent="linkClicked"
v-html="postBodyHtml" v-html="postBodyHtml"
/> />
<a <button
v-if="hideSubjectStatus" v-if="hideSubjectStatus"
href="#" class="button-unstyled -link cw-status-hider"
class="cw-status-hider"
@click.prevent="toggleShowMore" @click.prevent="toggleShowMore"
> >
{{ $t("status.show_content") }} {{ $t("status.show_content") }}
@ -79,15 +77,14 @@
v-if="status.card" v-if="status.card"
icon="link" icon="link"
/> />
</a> </button>
<a <button
v-if="showingMore && !fullContent" v-if="showingMore && !fullContent"
href="#" class="button-unstyled -link status-unhider"
class="status-unhider"
@click.prevent="toggleShowMore" @click.prevent="toggleShowMore"
> >
{{ tallStatus ? $t("general.show_less") : $t("status.hide_content") }} {{ tallStatus ? $t("general.show_less") : $t("status.hide_content") }}
</a> </button>
</div> </div>
<div v-if="status.poll && status.poll.options && !hideSubjectStatus"> <div v-if="status.poll && status.poll.options && !hideSubjectStatus">

2
src/components/tab_switcher/tab_switcher.js
View file

@ -81,7 +81,7 @@ export default Vue.component('tab-switcher', {
const tabs = this.$slots.default const tabs = this.$slots.default
.map((slot, index) => { .map((slot, index) => {
if (!slot.tag) return if (!slot.tag) return
const classesTab = ['tab'] const classesTab = ['tab', 'button-default']
const classesWrapper = ['tab-wrapper'] const classesWrapper = ['tab-wrapper']
if (this.activeIndex === index) { if (this.activeIndex === index) {
classesTab.push('active') classesTab.push('active')

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

@ -4,7 +4,7 @@
<TimelineMenu v-if="!embedded" /> <TimelineMenu v-if="!embedded" />
<button <button
v-if="showLoadButton" v-if="showLoadButton"
class="loadmore-button" class="button-default loadmore-button"
@click.prevent="showNewStatuses" @click.prevent="showNewStatuses"
> >
{{ loadButtonString }} {{ loadButtonString }}
@ -61,13 +61,15 @@
> >
{{ $t('timeline.no_more_statuses') }} {{ $t('timeline.no_more_statuses') }}
</div> </div>
<a <button
v-else-if="!timeline.loading" v-else-if="!timeline.loading"
href="#" class="button-unstyled -link -fullwidth"
@click.prevent="fetchOlderStatuses()" @click.prevent="fetchOlderStatuses()"
> >
<div class="new-status-notification text-center panel-footer">{{ $t('timeline.load_older') }}</div> <div class="new-status-notification text-center panel-footer">
</a> {{ $t('timeline.load_older') }}
</div>
</button>
<div <div
v-else v-else
class="new-status-notification text-center panel-footer" class="new-status-notification text-center panel-footer"

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

@ -162,7 +162,7 @@
<template v-if="relationship.following"> <template v-if="relationship.following">
<ProgressButton <ProgressButton
v-if="!relationship.subscribing" v-if="!relationship.subscribing"
class="btn btn-default" class="btn button-default"
:click="subscribeUser" :click="subscribeUser"
:title="$t('user_card.subscribe')" :title="$t('user_card.subscribe')"
> >
@ -170,7 +170,7 @@
</ProgressButton> </ProgressButton>
<ProgressButton <ProgressButton
v-else v-else
class="btn btn-default toggled" class="btn button-default toggled"
:click="unsubscribeUser" :click="unsubscribeUser"
:title="$t('user_card.unsubscribe')" :title="$t('user_card.unsubscribe')"
> >
@ -192,14 +192,14 @@
<div> <div>
<button <button
v-if="relationship.muting" v-if="relationship.muting"
class="btn btn-default btn-block toggled" class="btn button-default btn-block toggled"
@click="unmuteUser" @click="unmuteUser"
> >
{{ $t('user_card.muted') }} {{ $t('user_card.muted') }}
</button> </button>
<button <button
v-else v-else
class="btn btn-default btn-block" class="btn button-default btn-block"
@click="muteUser" @click="muteUser"
> >
{{ $t('user_card.mute') }} {{ $t('user_card.mute') }}
@ -207,7 +207,7 @@
</div> </div>
<div> <div>
<button <button
class="btn btn-default btn-block" class="btn button-default btn-block"
@click="mentionUser" @click="mentionUser"
> >
{{ $t('user_card.mention') }} {{ $t('user_card.mention') }}

2
src/components/user_reporting_modal/user_reporting_modal.vue
View file

@ -29,7 +29,7 @@
</div> </div>
<div> <div>
<button <button
class="btn btn-default" class="btn button-default"
:disabled="processing" :disabled="processing"
@click="reportUser" @click="reportUser"
> >

6
src/hocs/with_load_more/with_load_more.js
View file

@ -91,7 +91,11 @@ const withLoadMore = ({
{children} {children}
</WrappedComponent> </WrappedComponent>
<div class="with-load-more-footer"> <div class="with-load-more-footer">
{this.error && <a onClick={this.fetchEntries} class="alert error">{this.$t('general.generic_error')}</a>} {this.error &&
<button onClick={this.fetchEntries} class="button-unstyled -link -fullwidth alert error">
{this.$t('general.generic_error')}
</button>
}
{!this.error && this.loading && <FAIcon spin icon="circle-notch"/>} {!this.error && this.loading && <FAIcon spin icon="circle-notch"/>}
{!this.error && !this.loading && !this.bottomedOut && <a onClick={this.fetchEntries}>{this.$t('general.more')}</a>} {!this.error && !this.loading && !this.bottomedOut && <a onClick={this.fetchEntries}>{this.$t('general.more')}</a>}
</div> </div>