logo

pleroma-fe

My custom branche(s) on git.pleroma.social/pleroma/pleroma-fe git clone https://hacktivis.me/git/pleroma-fe.git
commit: fdfb8810c1d8ab64969c38aa1a6bce1daf013249
parent c655699935ce6fd8b5d0a744dafd6403e32277b7
Author: Shpuld Shpludson <shp@cock.li>
Date:   Tue,  1 Dec 2020 11:02:46 +0000

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

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

Closes #1001

See merge request pleroma/pleroma-fe!1293

Diffstat:

MCHANGELOG.md7++++---
Msrc/App.scss65++++++++++++++++++++++++++++++++++++++++++++++++-----------------
Msrc/components/account_actions/account_actions.vue15++++++++-------
Msrc/components/async_component_error/async_component_error.vue2+-
Msrc/components/attachment/attachment.js6++++--
Msrc/components/attachment/attachment.vue30++++++++++++++++++------------
Msrc/components/block_card/block_card.vue4++--
Msrc/components/chat_list/chat_list.vue5++++-
Msrc/components/chat_message/chat_message.scss3---
Msrc/components/chat_message/chat_message.vue4++--
Msrc/components/conversation/conversation.vue13+++++++------
Msrc/components/desktop_nav/desktop_nav.scss11++++++-----
Msrc/components/desktop_nav/desktop_nav.vue40+++++++++++++++++++++-------------------
Msrc/components/domain_mute_card/domain_mute_card.vue4++--
Msrc/components/emoji_input/emoji_input.vue6+++---
Msrc/components/emoji_reactions/emoji_reactions.vue2+-
Msrc/components/export_import/export_import.vue4++--
Msrc/components/exporter/exporter.vue2+-
Msrc/components/extra_buttons/extra_buttons.vue32++++++++++++++++++--------------
Msrc/components/favorite_button/favorite_button.js5-----
Msrc/components/favorite_button/favorite_button.vue69+++++++++++++++++++++++++++++++++++++++++++--------------------------
Msrc/components/follow_button/follow_button.vue2+-
Msrc/components/follow_request_card/follow_request_card.vue4++--
Msrc/components/image_cropper/image_cropper.vue6+++---
Msrc/components/importer/importer.vue2+-
Msrc/components/login_form/login_form.vue2+-
Msrc/components/media_upload/media_upload.vue54++++++++++++++++++++++--------------------------------
Msrc/components/mfa_form/recovery_form.vue14+++++++-------
Msrc/components/mfa_form/totp_form.vue14+++++++-------
Msrc/components/mobile_nav/mobile_nav.vue14++++++--------
Msrc/components/mobile_post_status_button/mobile_post_status_button.vue2+-
Msrc/components/moderation_tools/moderation_tools.vue28++++++++++++++--------------
Msrc/components/mute_card/mute_card.vue4++--
Msrc/components/notification/notification.vue29++++++++++++++++-------------
Msrc/components/notifications/notifications.vue8++++----
Msrc/components/password_reset/password_reset.vue2+-
Msrc/components/poll/poll.vue2+-
Msrc/components/popover/popover.js13+++++++++++--
Msrc/components/popover/popover.vue9+++++++--
Msrc/components/post_status_form/post_status_form.vue34+++++++++++++++-------------------
Msrc/components/react_button/react_button.vue18+++++++++++-------
Msrc/components/registration/registration.vue2+-
Msrc/components/reply_button/reply_button.vue53++++++++++++++++++++++++++++++++++++-----------------
Msrc/components/retweet_button/retweet_button.js5-----
Msrc/components/retweet_button/retweet_button.vue74++++++++++++++++++++++++++++++++++++++++++++------------------------------
Msrc/components/scope_selector/scope_selector.vue24++++++++++++------------
Msrc/components/search/search.vue2+-
Msrc/components/search_bar/search_bar.vue32+++++++++++++++++++-------------
Msrc/components/settings_modal/settings_modal.vue4++--
Msrc/components/settings_modal/tabs/mutes_and_blocks_tab.vue10+++++-----
Msrc/components/settings_modal/tabs/notifications_tab.vue2+-
Msrc/components/settings_modal/tabs/profile_tab.vue8++++----
Msrc/components/settings_modal/tabs/security_tab/confirm.vue4++--
Msrc/components/settings_modal/tabs/security_tab/mfa.vue10+++++-----
Msrc/components/settings_modal/tabs/security_tab/mfa_totp.vue4++--
Msrc/components/settings_modal/tabs/security_tab/security_tab.vue10+++++-----
Msrc/components/settings_modal/tabs/theme_tab/preview.vue4++--
Msrc/components/settings_modal/tabs/theme_tab/theme_tab.vue28++++++++++++++--------------
Msrc/components/shadow_control/shadow_control.vue8++++----
Msrc/components/side_drawer/side_drawer.vue14+++++++-------
Msrc/components/status/status.vue35+++++++++++++++++------------------
Msrc/components/status_content/status_content.vue37+++++++++++++++++--------------------
Msrc/components/tab_switcher/tab_switcher.js2+-
Msrc/components/timeline/timeline.vue12+++++++-----
Msrc/components/user_card/user_card.vue10+++++-----
Msrc/components/user_reporting_modal/user_reporting_modal.vue2+-
Msrc/hocs/with_load_more/with_load_more.js6+++++-
67 files changed, 547 insertions(+), 445 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md @@ -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 timeline errors locking timelines - 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 - 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 -- Fixed pinned statuses not appearing in user profiles -- Fixed username autocomplete being jumpy +- Made reply/fav/repeat etc buttons easier to hit ## [2.2.1] - 2020-11-11 diff --git a/src/App.scss b/src/App.scss @@ -33,6 +33,7 @@ h4 { max-width: 980px; align-content: flex-start; } + .underlay { background-color: 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); } -button { +.button-default { user-select: none; color: $fallback--text; color: var(--btnText, $fallback--text); @@ -85,7 +86,8 @@ button { font-family: sans-serif; font-family: var(--interfaceFont, sans-serif); - i[class*=icon-], .svg-inline--fa { + i[class*=icon-], + .svg-inline--fa { color: $fallback--text; color: var(--btnText, $fallback--text); } @@ -107,7 +109,8 @@ button { background-color: $fallback--fg; background-color: var(--btnPressed, $fallback--fg); - svg, i { + svg, + i { color: $fallback--text; color: var(--btnPressedText, $fallback--text); } @@ -120,7 +123,8 @@ button { background-color: $fallback--fg; background-color: var(--btnDisabled, $fallback--fg); - svg, i { + svg, + i { color: $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: var(--buttonPressedShadow); - svg, i { + svg, + i { color: $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 { &.unstyled { @@ -442,6 +471,7 @@ main-router { color: $fallback--faint; color: var(--panelFaint, $fallback--faint); } + .faint-link { color: $fallback--faint; color: var(--faintLink, $fallback--faint); @@ -453,11 +483,8 @@ main-router { overflow-x: hidden; } - button { - flex-shrink: 0; - } - - button, .alert { + .button-default, + .alert { // height: 100%; line-height: 21px; min-height: 0; @@ -468,8 +495,11 @@ main-router { align-self: stretch; } - button { - &, i[class*=icon-] { + .button-default { + flex-shrink: 0; + + &, + i[class*=icon-] { color: $fallback--text; color: var(--btnPanelText, $fallback--text); } @@ -492,7 +522,8 @@ main-router { } } - a { + a, + .-link { color: $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 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius); - .faint { color: $fallback--faint; color: var(--panelFaint, $fallback--faint); } - a { + a, + .-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; } diff --git a/src/components/account_actions/account_actions.vue b/src/components/account_actions/account_actions.vue @@ -4,6 +4,7 @@ trigger="click" placement="bottom" :bound-to="{ x: 'container' }" + remove-padding > <div slot="content" @@ -13,14 +14,14 @@ <template v-if="relationship.following"> <button v-if="relationship.showing_reblogs" - class="btn btn-default dropdown-item" + class="btn button-default dropdown-item" @click="hideRepeats" > {{ $t('user_card.hide_repeats') }} </button> <button v-if="!relationship.showing_reblogs" - class="btn btn-default dropdown-item" + class="btn button-default dropdown-item" @click="showRepeats" > {{ $t('user_card.show_repeats') }} @@ -32,27 +33,27 @@ </template> <button v-if="relationship.blocking" - class="btn btn-default btn-block dropdown-item" + class="btn button-default btn-block dropdown-item" @click="unblockUser" > {{ $t('user_card.unblock') }} </button> <button v-else - class="btn btn-default btn-block dropdown-item" + class="btn button-default btn-block dropdown-item" @click="blockUser" > {{ $t('user_card.block') }} </button> <button - class="btn btn-default btn-block dropdown-item" + class="btn button-default btn-block dropdown-item" @click="reportUser" > {{ $t('user_card.report') }} </button> <button v-if="pleromaChatMessagesAvailable" - class="btn btn-default btn-block dropdown-item" + class="btn button-default btn-block dropdown-item" @click="openChat" > {{ $t('user_card.message') }} @@ -61,7 +62,7 @@ </div> <div slot="trigger" - class="btn btn-default ellipsis-button" + class="ellipsis-button" > <FAIcon class="icon" diff --git a/src/components/async_component_error/async_component_error.vue b/src/components/async_component_error/async_component_error.vue @@ -8,7 +8,7 @@ {{ $t('general.error_retry') }} </p> <button - class="btn" + class="btn button-default" @click="retry" > {{ $t('general.retry') }} diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js @@ -9,7 +9,8 @@ import { faMusic, faImage, faVideo, - faPlayCircle + faPlayCircle, + faTimes } from '@fortawesome/free-solid-svg-icons' library.add( @@ -17,7 +18,8 @@ library.add( faMusic, faImage, faVideo, - faPlayCircle + faPlayCircle, + faTimes ) const Attachment = { diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue @@ -42,15 +42,13 @@ icon="play-circle" /> </a> - <div + <button v-if="nsfw && hideNsfwLocal && !hidden" - class="hider" + class="button-unstyled hider" + @click.prevent="toggleHidden" > - <a - href="#" - @click.prevent="toggleHidden" - >Hide</a> - </div> + <FAIcon icon="times" /> + </button> <a v-if="type === 'image' && (!hidden || preloadImage)" @@ -234,15 +232,23 @@ .hider { position: absolute; right: 0; - white-space: nowrap; margin: 10px; - padding: 5px; - background: rgba(230,230,230,0.6); - font-weight: bold; + padding: 0; z-index: 4; - line-height: 1; border-radius: $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 { diff --git a/src/components/block_card/block_card.vue b/src/components/block_card/block_card.vue @@ -3,7 +3,7 @@ <div class="block-card-content-container"> <button v-if="blocked" - class="btn btn-default" + class="btn button-default" :disabled="progress" @click="unblockUser" > @@ -16,7 +16,7 @@ </button> <button v-else - class="btn btn-default" + class="btn button-default" :disabled="progress" @click="blockUser" > diff --git a/src/components/chat_list/chat_list.vue b/src/components/chat_list/chat_list.vue @@ -10,7 +10,10 @@ <span class="title"> {{ $t("chats.chats") }} </span> - <button @click="newChat"> + <button + class="button-default" + @click="newChat" + > {{ $t("chats.new") }} </button> </div> diff --git a/src/components/chat_message/chat_message.scss b/src/components/chat_message/chat_message.scss @@ -31,9 +31,6 @@ color: $fallback--text; color: var(--text, $fallback--text); } - - border-radius: $fallback--chatMessageRadius; - border-radius: var(--chatMessageRadius, $fallback--chatMessageRadius); } .popover { diff --git a/src/components/chat_message/chat_message.vue b/src/components/chat_message/chat_message.vue @@ -53,7 +53,7 @@ <div slot="content"> <div class="dropdown-menu"> <button - class="dropdown-item dropdown-item-icon" + class="button-default dropdown-item dropdown-item-icon" @click="deleteMessage" > <FAIcon icon="times" /> {{ $t("chats.delete") }} @@ -62,7 +62,7 @@ </div> <button slot="trigger" - class="menu-icon" + class="button-default menu-icon" :title="$t('chats.more')" > <FAIcon icon="ellipsis-h" /> diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue @@ -10,12 +10,13 @@ class="panel-heading conversation-heading" > <span class="title"> {{ $t('timeline.conversation') }} </span> - <span v-if="collapsable"> - <a - href="#" - @click.prevent="toggleExpanded" - >{{ $t('timeline.collapse') }}</a> - </span> + <button + v-if="collapsable" + class="button-unstyled -link" + @click.prevent="toggleExpanded" + > + {{ $t('timeline.collapse') }} + </button> </div> <status v-for="status in conversation" diff --git a/src/components/desktop_nav/desktop_nav.scss b/src/components/desktop_nav/desktop_nav.scss @@ -21,7 +21,7 @@ grid-template-areas: "logo sitename actions"; } - button { + .button-default { &, svg { color: $fallback--text; color: var(--btnTopBarText, $fallback--text); @@ -80,12 +80,13 @@ .nav-icon { margin-left: 0.2em; width: 2em; + height: 100%; text-align: center; - } - a, a svg { - color: $fallback--link; - color: var(--topBarLink, $fallback--link); + .svg-inline--fa { + color: $fallback--link; + color: var(--topBarLink, $fallback--link); + } } .sitename { diff --git a/src/components/desktop_nav/desktop_nav.vue b/src/components/desktop_nav/desktop_nav.vue @@ -36,9 +36,8 @@ @toggled="onSearchBarToggled" @click.stop.native /> - <a - href="#" - class="nav-icon" + <button + class="button-unstyled nav-icon" @click.stop="openSettingsModal" > <FAIcon @@ -47,29 +46,32 @@ icon="cog" :title="$t('nav.preferences')" /> - </a> + </button> <a v-if="currentUser && currentUser.role === 'admin'" href="/pleroma/admin/#/login-pleroma" class="nav-icon" target="_blank" - ><FAIcon - fixed-width - class="fa-scale-110 fa-old-padding" - icon="tachometer-alt" - :title="$t('nav.administration')" - /></a> - <a + > + <FAIcon + fixed-width + class="fa-scale-110 fa-old-padding" + icon="tachometer-alt" + :title="$t('nav.administration')" + /> + </a> + <button v-if="currentUser" - href="#" - class="nav-icon" + class="button-unstyled nav-icon" @click.prevent="logout" - ><FAIcon - fixed-width - class="fa-scale-110 fa-old-padding" - icon="sign-out-alt" - :title="$t('login.logout')" - /></a> + > + <FAIcon + fixed-width + class="fa-scale-110 fa-old-padding" + icon="sign-out-alt" + :title="$t('login.logout')" + /> + </button> </div> </div> </nav> diff --git a/src/components/domain_mute_card/domain_mute_card.vue b/src/components/domain_mute_card/domain_mute_card.vue @@ -6,7 +6,7 @@ <ProgressButton v-if="muted" :click="unmuteDomain" - class="btn btn-default" + class="btn button-default" > {{ $t('domain_mute_card.unmute') }} <template slot="progress"> @@ -16,7 +16,7 @@ <ProgressButton v-else :click="muteDomain" - class="btn btn-default" + class="btn button-default" > {{ $t('domain_mute_card.mute') }} <template slot="progress"> diff --git a/src/components/emoji_input/emoji_input.vue b/src/components/emoji_input/emoji_input.vue @@ -6,13 +6,13 @@ > <slot /> <template v-if="enableEmojiPicker"> - <div + <button v-if="!hideEmojiButton" - class="emoji-picker-icon" + class="button-unstyled emoji-picker-icon" @click.prevent="togglePicker" > <FAIcon :icon="['far', 'smile-beam']" /> - </div> + </button> <EmojiPicker v-if="enableEmojiPicker" ref="picker" diff --git a/src/components/emoji_reactions/emoji_reactions.vue b/src/components/emoji_reactions/emoji_reactions.vue @@ -6,7 +6,7 @@ :users="accountsForEmoji[reaction.name]" > <button - class="emoji-reaction btn btn-default" + class="emoji-reaction btn button-default" :class="{ 'picked-reaction': reactedWith(reaction.name), 'not-clickable': !loggedIn }" @click="emojiOnClick(reaction.name, $event)" @mouseenter="fetchEmojiReactionsByIfMissing()" diff --git a/src/components/export_import/export_import.vue b/src/components/export_import/export_import.vue @@ -2,13 +2,13 @@ <div class="import-export-container"> <slot name="before" /> <button - class="btn" + class="btn button-default" @click="exportData" > {{ exportLabel }} </button> <button - class="btn" + class="btn button-default" @click="importData" > {{ importLabel }} diff --git a/src/components/exporter/exporter.vue b/src/components/exporter/exporter.vue @@ -11,7 +11,7 @@ </div> <button v-else - class="btn btn-default" + class="btn button-default" @click="process" > {{ exportButtonLabel }} diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue @@ -2,8 +2,9 @@ <Popover trigger="click" placement="top" - class="extra-button-popover" + :offset="{ y: 5 }" :bound-to="{ x: 'container' }" + remove-padding > <div slot="content" @@ -12,7 +13,7 @@ <div class="dropdown-menu"> <button v-if="canMute && !status.thread_muted" - class="dropdown-item dropdown-item-icon" + class="button-default dropdown-item dropdown-item-icon" @click.prevent="muteConversation" > <FAIcon @@ -22,7 +23,7 @@ </button> <button v-if="canMute && status.thread_muted" - class="dropdown-item dropdown-item-icon" + class="button-default dropdown-item dropdown-item-icon" @click.prevent="unmuteConversation" > <FAIcon @@ -32,7 +33,7 @@ </button> <button v-if="!status.pinned && canPin" - class="dropdown-item dropdown-item-icon" + class="button-default dropdown-item dropdown-item-icon" @click.prevent="pinStatus" @click="close" > @@ -43,7 +44,7 @@ </button> <button v-if="status.pinned && canPin" - class="dropdown-item dropdown-item-icon" + class="button-default dropdown-item dropdown-item-icon" @click.prevent="unpinStatus" @click="close" > @@ -54,7 +55,7 @@ </button> <button v-if="!status.bookmarked" - class="dropdown-item dropdown-item-icon" + class="button-default dropdown-item dropdown-item-icon" @click.prevent="bookmarkStatus" @click="close" > @@ -65,7 +66,7 @@ </button> <button v-if="status.bookmarked" - class="dropdown-item dropdown-item-icon" + class="button-default dropdown-item dropdown-item-icon" @click.prevent="unbookmarkStatus" @click="close" > @@ -76,7 +77,7 @@ </button> <button v-if="canDelete" - class="dropdown-item dropdown-item-icon" + class="button-default dropdown-item dropdown-item-icon" @click.prevent="deleteStatus" @click="close" > @@ -86,7 +87,7 @@ /><span>{{ $t("status.delete") }}</span> </button> <button - class="dropdown-item dropdown-item-icon" + class="button-default dropdown-item dropdown-item-icon" @click.prevent="copyLink" @click="close" > @@ -97,9 +98,12 @@ </button> </div> </div> - <span slot="trigger"> + <span + slot="trigger" + class="ExtraButtons" + > <FAIcon - class="ExtraButtons fa-scale-110 fa-old-padding" + class="fa-scale-110 fa-old-padding" icon="ellipsis-h" /> </span> @@ -112,11 +116,11 @@ @import '../../_variables.scss'; .ExtraButtons { - cursor: pointer; position: static; + padding: 10px; + margin: -10px; - &:hover, - .extra-button-popover.open & { + &:hover .svg-inline--fa { color: $fallback--text; color: var(--text, $fallback--text); } diff --git a/src/components/favorite_button/favorite_button.js b/src/components/favorite_button/favorite_button.js @@ -31,11 +31,6 @@ const FavoriteButton = { } }, computed: { - classes () { - return { - '-favorited': this.status.favorited - } - }, ...mapGetters(['mergedConfig']) } } diff --git a/src/components/favorite_button/favorite_button.vue b/src/components/favorite_button/favorite_button.vue @@ -1,23 +1,31 @@ <template> - <div v-if="loggedIn"> - <FAIcon - :class="classes" - class="FavoriteButton fa-scale-110 fa-old-padding -interactive" + <div class="FavoriteButton"> + <button + v-if="loggedIn" + class="button-unstyled interactive" + :class="status.favorited && '-favorited'" :title="$t('tool_tip.favorite')" - :icon="[status.favorited ? 'fas' : 'far', 'star']" - :spin="animated" @click.prevent="favorite()" - /> - <span v-if="!mergedConfig.hidePostStats && status.fave_num > 0">{{ status.fave_num }}</span> - </div> - <div v-else> - <FAIcon - :class="classes" - class="FavoriteButton fa-scale-110 fa-old-padding" - :title="$t('tool_tip.favorite')" - :icon="['far', 'star']" - /> - <span v-if="!mergedConfig.hidePostStats && status.fave_num > 0">{{ status.fave_num }}</span> + > + <FAIcon + class="fa-scale-110 fa-old-padding" + :icon="[status.favorited ? 'fas' : 'far', 'star']" + :spin="animated" + /> + </button> + <span v-else> + <FAIcon + class="fa-scale-110 fa-old-padding" + :title="$t('tool_tip.favorite')" + :icon="['far', 'star']" + /> + </span> + <span + v-if="!mergedConfig.hidePostStats && status.fave_num > 0" + class="action-counter" + > + {{ status.fave_num }} + </span> </div> </template> @@ -27,19 +35,28 @@ @import '../../_variables.scss'; .FavoriteButton { - &.-interactive { - cursor: pointer; - animation-duration: 0.6s; + display: flex; + + > :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; + } - &:hover { + &:hover .svg-inline--fa, + &.-favorited .svg-inline--fa { color: $fallback--cOrange; color: var(--cOrange, $fallback--cOrange); } } - - &.-favorited { - color: $fallback--cOrange; - color: var(--cOrange, $fallback--cOrange); - } } </style> diff --git a/src/components/follow_button/follow_button.vue b/src/components/follow_button/follow_button.vue @@ -1,6 +1,6 @@ <template> <button - class="btn btn-default follow-button" + class="btn button-default follow-button" :class="{ toggled: isPressed }" :disabled="inProgress" :title="title" diff --git a/src/components/follow_request_card/follow_request_card.vue b/src/components/follow_request_card/follow_request_card.vue @@ -2,13 +2,13 @@ <basic-user-card :user="user"> <div class="follow-request-card-content-container"> <button - class="btn btn-default" + class="btn button-default" @click="approveUser" > {{ $t('user_card.approve') }} </button> <button - class="btn btn-default" + class="btn button-default" @click="denyUser" > {{ $t('user_card.deny') }} diff --git a/src/components/image_cropper/image_cropper.vue b/src/components/image_cropper/image_cropper.vue @@ -11,21 +11,21 @@ </div> <div class="image-cropper-buttons-wrapper"> <button - class="btn" + class="button-default btn" type="button" :disabled="submitting" @click="submit()" v-text="saveText" /> <button - class="btn" + class="button-default btn" type="button" :disabled="submitting" @click="destroy" v-text="cancelText" /> <button - class="btn" + class="button-default btn" type="button" :disabled="submitting" @click="submit(false)" diff --git a/src/components/importer/importer.vue b/src/components/importer/importer.vue @@ -15,7 +15,7 @@ /> <button v-else - class="btn btn-default" + class="btn button-default" @click="submit" > {{ submitButtonLabel }} diff --git a/src/components/login_form/login_form.vue b/src/components/login_form/login_form.vue @@ -61,7 +61,7 @@ <button :disabled="loggingIn" type="submit" - class="btn btn-default" + class="btn button-default" > {{ $t('login.login') }} </button> diff --git a/src/components/media_upload/media_upload.vue b/src/components/media_upload/media_upload.vue @@ -1,33 +1,29 @@ <template> - <div + <label class="media-upload" :class="{ disabled: disabled }" + :title="$t('tool_tip.media_upload')" > - <label - class="label" - :title="$t('tool_tip.media_upload')" + <FAIcon + v-if="uploading" + class="progress-icon" + icon="circle-notch" + spin + /> + <FAIcon + v-if="!uploading" + class="new-icon" + icon="upload" + /> + <input + v-if="uploadReady" + :disabled="disabled" + type="file" + style="position: fixed; top: -100em" + multiple="true" + @change="change" > - <FAIcon - v-if="uploading" - class="progress-icon" - icon="circle-notch" - spin - /> - <FAIcon - v-if="!uploading" - class="new-icon" - icon="upload" - /> - <input - v-if="uploadReady" - :disabled="disabled" - type="file" - style="position: fixed; top: -100em" - multiple="true" - @change="change" - > - </label> - </div> + </label> </template> <script src="./media_upload.js" ></script> @@ -36,12 +32,6 @@ @import '../../_variables.scss'; .media-upload { - .label { - display: inline-block; - } - - .new-icon { - cursor: pointer; - } + cursor: pointer; } </style> diff --git a/src/components/mfa_form/recovery_form.vue b/src/components/mfa_form/recovery_form.vue @@ -23,23 +23,23 @@ <div class="form-group"> <div class="login-bottom"> <div> - <a - href="#" + <button + class="button-unstyled -link" @click.prevent="requireTOTP" > {{ $t('login.enter_two_factor_code') }} - </a> + </button> <br> - <a - href="#" + <button + class="button-unstyled -link" @click.prevent="abortMFA" > {{ $t('general.cancel') }} - </a> + </button> </div> <button type="submit" - class="btn btn-default" + class="btn button-default" > {{ $t('general.verify') }} </button> diff --git a/src/components/mfa_form/totp_form.vue b/src/components/mfa_form/totp_form.vue @@ -25,23 +25,23 @@ <div class="form-group"> <div class="login-bottom"> <div> - <a - href="#" + <button + class="button-unstyled -link" @click.prevent="requireRecovery" > {{ $t('login.enter_recovery_code') }} - </a> + </button> <br> - <a - href="#" + <button + class="button-unstyled -link" @click.prevent="abortMFA" > {{ $t('general.cancel') }} - </a> + </button> </div> <button type="submit" - class="btn btn-default" + class="btn button-default" > {{ $t('general.verify') }} </button> diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue @@ -9,9 +9,8 @@ @click="scrollToTop()" > <div class="item"> - <a - href="#" - class="mobile-nav-button" + <button + class="button-unstyled mobile-nav-button" @click.stop.prevent="toggleMobileSidebar()" > <FAIcon @@ -22,7 +21,7 @@ v-if="unreadChatCount" class="alert-dot" /> - </a> + </button> <router-link v-if="!hideSitename" class="site-name" @@ -33,10 +32,9 @@ </router-link> </div> <div class="item right"> - <a + <button v-if="currentUser" - class="mobile-nav-button" - href="#" + class="button-unstyled mobile-nav-button" @click.stop.prevent="openMobileNotifications()" > <FAIcon @@ -47,7 +45,7 @@ v-if="unseenNotificationsCount" class="alert-dot" /> - </a> + </button> </div> </nav> <div diff --git a/src/components/mobile_post_status_button/mobile_post_status_button.vue b/src/components/mobile_post_status_button/mobile_post_status_button.vue @@ -1,7 +1,7 @@ <template> <div v-if="isLoggedIn"> <button - class="new-status-button" + class="button-default new-status-button" :class="{ 'hidden': isHidden }" @click="openPostForm" > diff --git a/src/components/moderation_tools/moderation_tools.vue b/src/components/moderation_tools/moderation_tools.vue @@ -12,13 +12,13 @@ <div class="dropdown-menu"> <span v-if="user.is_local"> <button - class="dropdown-item" + class="button-default dropdown-item" @click="toggleRight(&quot;admin&quot;)" > {{ $t(!!user.rights.admin ? 'user_card.admin_menu.revoke_admin' : 'user_card.admin_menu.grant_admin') }} </button> <button - class="dropdown-item" + class="button-default dropdown-item" @click="toggleRight(&quot;moderator&quot;)" > {{ $t(!!user.rights.moderator ? 'user_card.admin_menu.revoke_moderator' : 'user_card.admin_menu.grant_moderator') }} @@ -29,13 +29,13 @@ /> </span> <button - class="dropdown-item" + class="button-default dropdown-item" @click="toggleActivationStatus()" > {{ $t(!!user.deactivated ? 'user_card.admin_menu.activate_account' : 'user_card.admin_menu.deactivate_account') }} </button> <button - class="dropdown-item" + class="button-default dropdown-item" @click="deleteUserDialog(true)" > {{ $t('user_card.admin_menu.delete_account') }} @@ -47,7 +47,7 @@ /> <span v-if="hasTagPolicy"> <button - class="dropdown-item" + class="button-default dropdown-item" @click="toggleTag(tags.FORCE_NSFW)" > {{ $t('user_card.admin_menu.force_nsfw') }} @@ -57,7 +57,7 @@ /> </button> <button - class="dropdown-item" + class="button-default dropdown-item" @click="toggleTag(tags.STRIP_MEDIA)" > {{ $t('user_card.admin_menu.strip_media') }} @@ -67,7 +67,7 @@ /> </button> <button - class="dropdown-item" + class="button-default dropdown-item" @click="toggleTag(tags.FORCE_UNLISTED)" > {{ $t('user_card.admin_menu.force_unlisted') }} @@ -77,7 +77,7 @@ /> </button> <button - class="dropdown-item" + class="button-default dropdown-item" @click="toggleTag(tags.SANDBOX)" > {{ $t('user_card.admin_menu.sandbox') }} @@ -88,7 +88,7 @@ </button> <button v-if="user.is_local" - class="dropdown-item" + class="button-default dropdown-item" @click="toggleTag(tags.DISABLE_REMOTE_SUBSCRIPTION)" > {{ $t('user_card.admin_menu.disable_remote_subscription') }} @@ -99,7 +99,7 @@ </button> <button v-if="user.is_local" - class="dropdown-item" + class="button-default dropdown-item" @click="toggleTag(tags.DISABLE_ANY_SUBSCRIPTION)" > {{ $t('user_card.admin_menu.disable_any_subscription') }} @@ -110,7 +110,7 @@ </button> <button v-if="user.is_local" - class="dropdown-item" + class="button-default dropdown-item" @click="toggleTag(tags.QUARANTINE)" > {{ $t('user_card.admin_menu.quarantine') }} @@ -124,7 +124,7 @@ </div> <button slot="trigger" - class="btn btn-default btn-block" + class="btn button-default btn-block" :class="{ toggled }" > {{ $t('user_card.admin_menu.moderation') }} @@ -141,13 +141,13 @@ <p>{{ $t('user_card.admin_menu.delete_user_confirmation') }}</p> <template slot="footer"> <button - class="btn btn-default" + class="btn button-default" @click="deleteUserDialog(false)" > {{ $t('general.cancel') }} </button> <button - class="btn btn-default danger" + class="btn button-default danger" @click="deleteUser()" > {{ $t('user_card.admin_menu.delete_user') }} diff --git a/src/components/mute_card/mute_card.vue b/src/components/mute_card/mute_card.vue @@ -3,7 +3,7 @@ <div class="mute-card-content-container"> <button v-if="muted" - class="btn btn-default" + class="btn button-default" :disabled="progress" @click="unmuteUser" > @@ -16,7 +16,7 @@ </button> <button v-else - class="btn btn-default" + class="btn button-default" :disabled="progress" @click="muteUser" > diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue @@ -14,14 +14,15 @@ {{ notification.from_profile.screen_name }} </router-link> </small> - <a - href="#" - class="unmute" + <button + class="button-unstyled unmute" @click.prevent="toggleMute" - ><FAIcon - class="fa-scale-110 fa-old-padding" - icon="eye-slash" - /></a> + > + <FAIcon + class="fa-scale-110 fa-old-padding" + icon="eye-slash" + /> + </button> </div> <div v-else @@ -132,14 +133,16 @@ /> </span> </div> - <a + <button v-if="needMute" - href="#" + class="button-unstyled" @click.prevent="toggleMute" - ><FAIcon - class="fa-scale-110 fa-old-padding" - icon="eye-slash" - /></a> + > + <FAIcon + class="fa-scale-110 fa-old-padding" + icon="eye-slash" + /> + </button> </span> <div v-if="notification.type === 'follow' || notification.type === 'follow_request'" diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue @@ -17,7 +17,7 @@ </div> <button v-if="unseenCount" - class="read-button" + class="button-default read-button" @click.prevent="markAsSeen" > {{ $t('notifications.read') }} @@ -41,15 +41,15 @@ > {{ $t('notifications.no_more_notifications') }} </div> - <a + <button v-else-if="!loading" - href="#" + class="button-unstyled -link -fullwidth" @click.prevent="fetchOlderNotifications()" > <div class="new-status-notification text-center panel-footer"> {{ minimalMode ? $t('interactions.load_older') : $t('notifications.load_older') }} </div> - </a> + </button> <div v-else class="new-status-notification text-center panel-footer" diff --git a/src/components/password_reset/password_reset.vue b/src/components/password_reset/password_reset.vue @@ -51,7 +51,7 @@ <button :disabled="isPending" type="submit" - class="btn btn-default btn-block" + class="btn button-default btn-block" > {{ $t('general.submit') }} </button> diff --git a/src/components/poll/poll.vue b/src/components/poll/poll.vue @@ -49,7 +49,7 @@ <div class="footer faint"> <button v-if="!showResults" - class="btn btn-default poll-vote-button" + class="btn button-default poll-vote-button" type="button" :disabled="isDisabled" @click="vote" diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js @@ -21,7 +21,10 @@ const Popover = { // Replaces the classes you may want for the popover container. // Use 'popover-default' in addition to get the default popover // 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 () { return { @@ -96,9 +99,15 @@ const Popover = { if (origin.y + content.offsetHeight > yBounds.max) usingTop = true 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 translateY = usingTop - ? -anchorEl.offsetHeight - yOffset - content.offsetHeight + ? -anchorEl.offsetHeight + vPadding - yOffset - content.offsetHeight : yOffset const xOffset = (this.offset && this.offset.x) || 0 diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue @@ -3,12 +3,13 @@ @mouseenter="onMouseenter" @mouseleave="onMouseleave" > - <div + <button ref="trigger" + class="button-unstyled -fullwidth popover-trigger-button" @click="onClick" > <slot name="trigger" /> - </div> + </button> <div v-if="!hidden" ref="content" @@ -30,6 +31,10 @@ <style lang="scss"> @import '../../_variables.scss'; +.popover-trigger-button { + display: block; +} + .popover { z-index: 8; position: absolute; diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue @@ -24,12 +24,12 @@ tag="p" class="visibility-notice" > - <a - href="#" + <button + class="button-unstyled -link" @click="openProfileTab" > {{ $t('post_status.account_not_locked_warning_link') }} - </a> + </button> </i18n> <p v-if="!hideScopeNotice && newStatus.visibility === 'public'" @@ -243,38 +243,34 @@ @upload-failed="uploadFailed" @all-uploaded="finishedUploadingFiles" /> - <div - class="emoji-icon" + <button + class="emoji-icon button-unstyled" + :title="$t('emoji.add_emoji')" + @click="showEmojiPicker" > - <div - :title="$t('emoji.add_emoji')" - class="btn btn-default" - @click="showEmojiPicker" - > - <FAIcon icon="smile-beam" /> - </div> - </div> - <div + <FAIcon icon="smile-beam" /> + </button> + <button v-if="pollsAvailable" - class="poll-icon" + class="poll-icon button-unstyled" :class="{ selected: pollFormVisible }" :title="$t('polls.add_poll')" @click="togglePollForm" > <FAIcon icon="poll-h" /> - </div> + </button> </div> <button v-if="posting" disabled - class="btn btn-default" + class="btn button-default" > {{ $t('post_status.posting') }} </button> <button v-else-if="isOverLengthLimit" disabled - class="btn btn-default" + class="btn button-default" > {{ $t('general.submit') }} </button> @@ -282,7 +278,7 @@ <button v-else :disabled="uploadingFiles || disableSubmit" - class="btn btn-default" + class="btn button-default" @touchstart.stop.prevent="postStatus($event, newStatus)" @click.stop.prevent="postStatus($event, newStatus)" > diff --git a/src/components/react_button/react_button.vue b/src/components/react_button/react_button.vue @@ -3,8 +3,8 @@ trigger="click" placement="top" :offset="{ y: 5 }" - class="react-button-popover" :bound-to="{ x: 'container' }" + remove-padding > <div slot="content" @@ -40,11 +40,14 @@ <div class="reaction-bottom-fader" /> </div> </div> - <span slot="trigger"> + <span + slot="trigger" + class="ReactButton" + :title="$t('tool_tip.add_reaction')" + > <FAIcon - class="fa-scale-110 fa-old-padding add-reaction-button" + class="fa-scale-110 fa-old-padding" :icon="['far', 'smile-beam']" - :title="$t('tool_tip.add_reaction')" /> </span> </Popover> @@ -104,10 +107,11 @@ } } -.add-reaction-button { - cursor: pointer; +.ReactButton { + padding: 10px; + margin: -10px; - &:hover { + &:hover .svg-inline--fa { color: $fallback--text; color: var(--text, $fallback--text); } diff --git a/src/components/registration/registration.vue b/src/components/registration/registration.vue @@ -211,7 +211,7 @@ <button :disabled="isPending" type="submit" - class="btn btn-default" + class="btn button-default" > {{ $t('general.submit') }} </button> diff --git a/src/components/reply_button/reply_button.vue b/src/components/reply_button/reply_button.vue @@ -1,20 +1,28 @@ <template> - <div> - <FAIcon + <div class="ReplyButton"> + <button v-if="loggedIn" - class="ReplyButton fa-scale-110 fa-old-padding -interactive" - icon="reply" - :title="$t('tool_tip.reply')" + class="button-unstyled interactive" :class="{'-active': replying}" - @click.prevent="$emit('toggle')" - /> - <FAIcon - v-else - icon="reply" - class="ReplyButton fa-scale-110 fa-old-padding" :title="$t('tool_tip.reply')" - /> - <span v-if="status.replies_count > 0"> + @click.prevent="$emit('toggle')" + > + <FAIcon + class="fa-scale-110 fa-old-padding" + icon="reply" + /> + </button> + <span v-else> + <FAIcon + icon="reply" + class="fa-scale-110 fa-old-padding" + :title="$t('tool_tip.reply')" + /> + </span> + <span + v-if="status.replies_count > 0" + class="action-counter" + > {{ status.replies_count }} </span> </div> @@ -26,14 +34,25 @@ @import '../../_variables.scss'; .ReplyButton { - &.-interactive { - cursor: pointer; + display: flex; - &:hover, - &.-active { + > :first-child { + 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: var(--cBlue, $fallback--cBlue); } } + } </style> diff --git a/src/components/retweet_button/retweet_button.js b/src/components/retweet_button/retweet_button.js @@ -24,11 +24,6 @@ const RetweetButton = { } }, computed: { - classes () { - return { - '-repeated': this.status.repeated - } - }, mergedConfig () { return this.$store.getters.mergedConfig } diff --git a/src/components/retweet_button/retweet_button.vue b/src/components/retweet_button/retweet_button.vue @@ -1,33 +1,38 @@ <template> - <div v-if="loggedIn"> - <template v-if="visibility !== 'private' && visibility !== 'direct'"> + <div class="RetweetButton"> + <button + v-if="visibility !== 'private' && visibility !== 'direct' && loggedIn" + class="button-unstyled interactive" + :class="status.repeated && '-repeated'" + :title="$t('tool_tip.repeat')" + @click.prevent="retweet()" + > <FAIcon - :class="classes" - class="RetweetButton fa-scale-110 fa-old-padding -interactive" + class="fa-scale-110 fa-old-padding" icon="retweet" :spin="animated" - :title="$t('tool_tip.repeat')" - @click.prevent="retweet()" /> - <span v-if="!mergedConfig.hidePostStats && status.repeat_num > 0">{{ status.repeat_num }}</span> - </template> - <template v-else> + </button> + <span v-else-if="loggedIn"> <FAIcon - :class="classes" - class="RetweetButton fa-scale-110 fa-old-padding" + class="fa-scale-110 fa-old-padding" icon="lock" :title="$t('timeline.no_retweet_hint')" /> - </template> - </div> - <div v-else-if="!loggedIn"> - <FAIcon - :class="classes" - class="fa-scale-110 fa-old-padding" - icon="retweet" - :title="$t('tool_tip.repeat')" - /> - <span v-if="!mergedConfig.hidePostStats && status.repeat_num > 0">{{ status.repeat_num }}</span> + </span> + <span v-else> + <FAIcon + class="fa-scale-110 fa-old-padding" + icon="retweet" + :title="$t('tool_tip.repeat')" + /> + </span> + <span + v-if="!mergedConfig.hidePostStats && status.repeat_num > 0" + class="no-event" + > + {{ status.repeat_num }} + </span> </div> </template> @@ -37,19 +42,28 @@ @import '../../_variables.scss'; .RetweetButton { - &.-interactive { - cursor: pointer; - animation-duration: 0.6s; + display: flex; - &:hover { + > :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; + } + + &:hover .svg-inline--fa, + &.-repeated .svg-inline--fa { color: $fallback--cGreen; color: var(--cGreen, $fallback--cGreen); } } - - &.-repeated { - color: $fallback--cGreen; - color: var(--cGreen, $fallback--cGreen); - } } </style> diff --git a/src/components/scope_selector/scope_selector.vue b/src/components/scope_selector/scope_selector.vue @@ -3,9 +3,9 @@ v-if="!showNothing" class="ScopeSelector" > - <span + <button v-if="showDirect" - class="scope" + class="button-unstyled scope" :class="css.direct" :title="$t('post_status.scope.direct')" @click="changeVis('direct')" @@ -14,10 +14,10 @@ icon="envelope" class="fa-scale-110 fa-old-padding" /> - </span> - <span + </button> + <button v-if="showPrivate" - class="scope" + class="button-unstyled scope" :class="css.private" :title="$t('post_status.scope.private')" @click="changeVis('private')" @@ -26,10 +26,10 @@ icon="lock" class="fa-scale-110 fa-old-padding" /> - </span> - <span + </button> + <button v-if="showUnlisted" - class="scope" + class="button-unstyled scope" :class="css.unlisted" :title="$t('post_status.scope.unlisted')" @click="changeVis('unlisted')" @@ -38,10 +38,10 @@ icon="lock-open" class="fa-scale-110 fa-old-padding" /> - </span> - <span + </button> + <button v-if="showPublic" - class="scope" + class="button-unstyled scope" :class="css.public" :title="$t('post_status.scope.public')" @click="changeVis('public')" @@ -50,7 +50,7 @@ icon="globe" class="fa-scale-110 fa-old-padding" /> - </span> + </button> </div> </template> diff --git a/src/components/search/search.vue b/src/components/search/search.vue @@ -14,7 +14,7 @@ @keyup.enter="newQuery(searchTerm)" > <button - class="btn search-button" + class="btn button-default search-button" @click="newQuery(searchTerm)" > <FAIcon icon="search" /> diff --git a/src/components/search_bar/search_bar.vue b/src/components/search_bar/search_bar.vue @@ -3,17 +3,18 @@ class="SearchBar" :class="{ '-expanded': !hidden }" > - <a + <button v-if="hidden" - href="#" - class="nav-icon" + class="button-unstyled nav-icon" :title="$t('nav.search')" - ><FAIcon - fixed-width - class="fa-scale-110 fa-old-padding" - icon="search" @click.prevent.stop="toggleHidden" - /></a> + > + <FAIcon + fixed-width + class="fa-scale-110 fa-old-padding" + icon="search" + /> + </button> <template v-else> <input id="search-bar-input" @@ -25,7 +26,7 @@ @keyup.enter="find(searchTerm)" > <button - class="btn search-button" + class="button-default search-button" @click="find(searchTerm)" > <FAIcon @@ -33,14 +34,16 @@ icon="search" /> </button> - <span> + <button + class="button-unstyled cancel-search" + @click.prevent.stop="toggleHidden" + > <FAIcon fixed-width icon="times" class="cancel-icon fa-scale-110 fa-old-padding" - @click.prevent.stop="toggleHidden" /> - </span> + </button> </template> </div> </template> @@ -69,8 +72,11 @@ flex: 1 0 auto; } + .cancel-search { + height: 50px; + } + .cancel-icon { - cursor: pointer; color: $fallback--text; color: var(--btnTopBarText, $fallback--text); } diff --git a/src/components/settings_modal/settings_modal.vue b/src/components/settings_modal/settings_modal.vue @@ -30,13 +30,13 @@ </template> </transition> <button - class="btn" + class="btn button-default" @click="peekModal" > {{ $t('general.peek') }} </button> <button - class="btn" + class="btn button-default" @click="closeModal" > {{ $t('general.close') }} diff --git a/src/components/settings_modal/tabs/mutes_and_blocks_tab.vue b/src/components/settings_modal/tabs/mutes_and_blocks_tab.vue @@ -27,7 +27,7 @@ <div class="bulk-actions"> <ProgressButton v-if="selected.length > 0" - class="btn btn-default bulk-action-button" + class="btn button-default bulk-action-button" :click="() => blockUsers(selected)" > {{ $t('user_card.block') }} @@ -37,7 +37,7 @@ </ProgressButton> <ProgressButton v-if="selected.length > 0" - class="btn btn-default" + class="btn button-default" :click="() => unblockUsers(selected)" > {{ $t('user_card.unblock') }} @@ -85,7 +85,7 @@ <div class="bulk-actions"> <ProgressButton v-if="selected.length > 0" - class="btn btn-default" + class="btn button-default" :click="() => muteUsers(selected)" > {{ $t('user_card.mute') }} @@ -95,7 +95,7 @@ </ProgressButton> <ProgressButton v-if="selected.length > 0" - class="btn btn-default" + class="btn button-default" :click="() => unmuteUsers(selected)" > {{ $t('user_card.unmute') }} @@ -141,7 +141,7 @@ <div class="bulk-actions"> <ProgressButton v-if="selected.length > 0" - class="btn btn-default" + class="btn button-default" :click="() => unmuteDomains(selected)" > {{ $t('domain_mute_card.unmute') }} diff --git a/src/components/settings_modal/tabs/notifications_tab.vue b/src/components/settings_modal/tabs/notifications_tab.vue @@ -21,7 +21,7 @@ <p>{{ $t('settings.notification_mutes') }}</p> <p>{{ $t('settings.notification_blocks') }}</p> <button - class="btn btn-default" + class="btn button-default" @click="updateNotificationSettings" > {{ $t('general.submit') }} diff --git a/src/components/settings_modal/tabs/profile_tab.vue b/src/components/settings_modal/tabs/profile_tab.vue @@ -150,7 +150,7 @@ </p> <button :disabled="newName && newName.length === 0" - class="btn btn-default" + class="btn button-default" @click="updateProfile" > {{ $t('general.submit') }} @@ -179,7 +179,7 @@ <button v-show="pickAvatarBtnVisible" id="pick-avatar" - class="btn" + class="button-default btn" type="button" > {{ $t('settings.upload_a_photo') }} @@ -224,7 +224,7 @@ /> <button v-else-if="bannerPreview" - class="btn btn-default" + class="btn button-default" @click="submitBanner(banner)" > {{ $t('general.submit') }} @@ -274,7 +274,7 @@ /> <button v-else-if="backgroundPreview" - class="btn btn-default" + class="btn button-default" @click="submitBackground(background)" > {{ $t('general.submit') }} diff --git a/src/components/settings_modal/tabs/security_tab/confirm.vue b/src/components/settings_modal/tabs/security_tab/confirm.vue @@ -2,14 +2,14 @@ <div> <slot /> <button - class="btn btn-default" + class="btn button-default" :disabled="disabled" @click="confirm" > {{ $t('general.confirm') }} </button> <button - class="btn btn-default" + class="btn button-default" :disabled="disabled" @click="cancel" > diff --git a/src/components/settings_modal/tabs/security_tab/mfa.vue b/src/components/settings_modal/tabs/security_tab/mfa.vue @@ -29,7 +29,7 @@ /> <button v-if="!confirmNewBackupCodes" - class="btn btn-default" + class="btn button-default" @click="getBackupCodes" > {{ $t('settings.mfa.generate_new_recovery_codes') }} @@ -61,7 +61,7 @@ <button v-if="canSetupOTP" - class="btn btn-default" + class="btn button-default" @click="cancelSetup" > {{ $t('general.cancel') }} @@ -69,7 +69,7 @@ <button v-if="canSetupOTP" - class="btn btn-default" + class="btn button-default" @click="setupOTP" > {{ $t('settings.mfa.setup_otp') }} @@ -108,13 +108,13 @@ > <div class="confirm-otp-actions"> <button - class="btn btn-default" + class="btn button-default" @click="doConfirmOTP" > {{ $t('settings.mfa.confirm_and_enable') }} </button> <button - class="btn btn-default" + class="btn button-default" @click="cancelSetup" > {{ $t('general.cancel') }} diff --git a/src/components/settings_modal/tabs/security_tab/mfa_totp.vue b/src/components/settings_modal/tabs/security_tab/mfa_totp.vue @@ -4,7 +4,7 @@ <strong>{{ $t('settings.mfa.otp') }}</strong> <button v-if="!isActivated" - class="btn btn-default" + class="btn button-default" @click="doActivate" > {{ $t('general.enable') }} @@ -12,7 +12,7 @@ <button v-if="isActivated" - class="btn btn-default" + class="btn button-default" :disabled="deactivate" @click="doDeactivate" > diff --git a/src/components/settings_modal/tabs/security_tab/security_tab.vue b/src/components/settings_modal/tabs/security_tab/security_tab.vue @@ -19,7 +19,7 @@ > </div> <button - class="btn btn-default" + class="btn button-default" @click="changeEmail" > {{ $t('general.submit') }} @@ -57,7 +57,7 @@ > </div> <button - class="btn btn-default" + class="btn button-default" @click="changePassword" > {{ $t('general.submit') }} @@ -92,7 +92,7 @@ <td>{{ oauthToken.validUntil }}</td> <td class="actions"> <button - class="btn btn-default" + class="btn button-default" @click="revokeToken(oauthToken.id)" > {{ $t('settings.revoke_token') }} @@ -116,7 +116,7 @@ type="password" > <button - class="btn btn-default" + class="btn button-default" @click="deleteAccount" > {{ $t('settings.delete_account') }} @@ -130,7 +130,7 @@ </p> <button v-if="!deletingAccount" - class="btn btn-default" + class="btn button-default" @click="confirmDelete" > {{ $t('general.submit') }} diff --git a/src/components/settings_modal/tabs/theme_tab/preview.vue b/src/components/settings_modal/tabs/theme_tab/preview.vue @@ -15,7 +15,7 @@ <span class="alert error"> {{ $t('settings.style.preview.error') }} </span> - <button class="btn"> + <button class="btn button-default"> {{ $t('settings.style.preview.button') }} </button> </div> @@ -102,7 +102,7 @@ > <label for="preview_checkbox">{{ $t('settings.style.preview.checkbox') }}</label> </span> - <button class="btn"> + <button class="btn button-default"> {{ $t('settings.style.preview.button') }} </button> </div> diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.vue b/src/components/settings_modal/tabs/theme_tab/theme_tab.vue @@ -12,13 +12,13 @@ <div class="buttons"> <template v-if="themeWarning.type === 'snapshot_source_mismatch'"> <button - class="btn" + class="btn button-default" @click="forceLoad" > {{ $t('settings.style.switcher.use_source') }} </button> <button - class="btn" + class="btn button-default" @click="forceSnapshot" > {{ $t('settings.style.switcher.use_snapshot') }} @@ -26,7 +26,7 @@ </template> <template v-else-if="themeWarning.noActionsPossible"> <button - class="btn" + class="btn button-default" @click="dismissWarning" > {{ $t('general.dismiss') }} @@ -34,13 +34,13 @@ </template> <template v-else> <button - class="btn" + class="btn button-default" @click="forceLoad" > {{ $t('settings.style.switcher.load_theme') }} </button> <button - class="btn" + class="btn button-default" @click="dismissWarning" > {{ $t('settings.style.switcher.keep_as_is') }} @@ -131,13 +131,13 @@ <p>{{ $t('settings.theme_help') }}</p> <div class="tab-header-buttons"> <button - class="btn" + class="btn button-default" @click="clearOpacity" > {{ $t('settings.style.switcher.clear_opacity') }} </button> <button - class="btn" + class="btn button-default" @click="clearV1" > {{ $t('settings.style.switcher.clear_all') }} @@ -238,13 +238,13 @@ <div class="tab-header"> <p>{{ $t('settings.theme_help') }}</p> <button - class="btn" + class="btn button-default" @click="clearOpacity" > {{ $t('settings.style.switcher.clear_opacity') }} </button> <button - class="btn" + class="btn button-default" @click="clearV1" > {{ $t('settings.style.switcher.clear_all') }} @@ -806,7 +806,7 @@ <div class="tab-header"> <p>{{ $t('settings.radii_help') }}</p> <button - class="btn" + class="btn button-default" @click="clearRoundness" > {{ $t('settings.style.switcher.clear_all') }} @@ -936,7 +936,7 @@ /> </div> <button - class="btn" + class="btn button-default" @click="clearShadows" > {{ $t('settings.style.switcher.clear_all') }} @@ -980,7 +980,7 @@ <div class="tab-header"> <p>{{ $t('settings.style.fonts.help') }}</p> <button - class="btn" + class="btn button-default" @click="clearFonts" > {{ $t('settings.style.switcher.clear_all') }} @@ -1017,14 +1017,14 @@ <div class="apply-container"> <button - class="btn submit" + class="btn button-default submit" :disabled="!themeValid" @click="setCustomTheme" > {{ $t('general.apply') }} </button> <button - class="btn" + class="btn button-default" @click="clearAll" > {{ $t('settings.style.switcher.reset') }} diff --git a/src/components/shadow_control/shadow_control.vue b/src/components/shadow_control/shadow_control.vue @@ -84,7 +84,7 @@ /> </label> <button - class="btn btn-default" + class="btn button-default" :disabled="!ready || !present" @click="del" > @@ -94,7 +94,7 @@ /> </button> <button - class="btn btn-default" + class="btn button-default" :disabled="!moveUpValid" @click="moveUp" > @@ -104,7 +104,7 @@ /> </button> <button - class="btn btn-default" + class="btn button-default" :disabled="!moveDnValid" @click="moveDn" > @@ -114,7 +114,7 @@ /> </button> <button - class="btn btn-default" + class="btn button-default" :disabled="usingFallback" @click="add" > diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue @@ -144,8 +144,8 @@ </router-link> </li> <li @click="toggleDrawer"> - <a - href="#" + <button + class="button-unstyled -link -fullwidth" @click="openSettingsModal" > <FAIcon @@ -153,7 +153,7 @@ class="fa-scale-110 fa-old-padding" icon="cog" /> {{ $t("settings.settings") }} - </a> + </button> </li> <li @click="toggleDrawer"> <router-link :to="{ name: 'about'}"> @@ -183,8 +183,8 @@ v-if="currentUser" @click="toggleDrawer" > - <a - href="#" + <button + class="button-unstyled -link -fullwidth" @click="doLogout" > <FAIcon @@ -192,7 +192,7 @@ class="fa-scale-110 fa-old-padding" icon="sign-out-alt" /> {{ $t("login.logout") }} - </a> + </button> </li> </ul> </div> @@ -331,7 +331,7 @@ .side-drawer li { padding: 0; - a { + a, button { box-sizing: border-box; display: block; height: 3em; diff --git a/src/components/status/status.vue b/src/components/status/status.vue @@ -47,16 +47,15 @@ > {{ muteWordHits.join(', ') }} </small> - <a - href="#" - class="unmute fa-scale-110 fa-old-padding" + <button + class="unmute button-unstyled" @click.prevent="toggleMute" > <FAIcon icon="eye-slash" class="fa-scale-110 fa-old-padding" /> - </a> + </button> </div> </template> <template v-else> @@ -201,9 +200,9 @@ icon="external-link-square-alt" /> </a> - <a + <button v-if="expandable && !isPreview" - href="#" + class="button-unstyled" title="Expand" @click.prevent="toggleExpanded" > @@ -211,17 +210,17 @@ class="fa-scale-110 fa-old-padding" icon="plus-square" /> - </a> - <a + </button> + <button v-if="unmuted" - href="#" + class="button-unstyled" @click.prevent="toggleMute" > <FAIcon icon="eye-slash" class="fa-scale-110 fa-old-padding" /> - </a> + </button> </span> </div> @@ -237,9 +236,8 @@ style="min-width: 0" :class="{ '-strikethrough': !status.parent_visible }" > - <a - class="reply-to" - href="#" + <button + class="button-unstyled reply-to" :aria-label="$t('tool_tip.reply')" @click.prevent="gotoOriginal(status.in_reply_to_status_id)" > @@ -253,7 +251,7 @@ > {{ $t('status.reply_to') }} </span> - </a> + </button> </StatusPopover> <span @@ -286,11 +284,12 @@ :key="reply.id" :status-id="reply.id" > - <a - href="#" - class="reply-link" + <button + class="button-unstyled -link reply-link" @click.prevent="gotoOriginal(reply.id)" - >{{ reply.name }}</a> + > + {{ reply.name }} + </button> </StatusPopover> </div> </div> diff --git a/src/components/status_content/status_content.vue b/src/components/status_content/status_content.vue @@ -12,35 +12,34 @@ @click.prevent="linkClicked" v-html="status.summary_html" /> - <a + <button v-if="longSubject && showingLongSubject" - href="#" - class="tall-subject-hider" + class="button-unstyled -link tall-subject-hider" @click.prevent="showingLongSubject=false" - >{{ $t("status.hide_full_subject") }}</a> - <a + > + {{ $t("status.hide_full_subject") }} + </button> + <button v-else-if="longSubject" - class="tall-subject-hider" + class="button-unstyled -link tall-subject-hider" :class="{ 'tall-subject-hider_focused': focused }" - href="#" @click.prevent="showingLongSubject=true" > {{ $t("status.show_full_subject") }} - </a> + </button> </div> <div :class="{'tall-status': hideTallStatus}" class="status-content-wrapper" > - <a + <button v-if="hideTallStatus" - class="tall-status-hider" + class="button-unstyled -link tall-status-hider" :class="{ 'tall-status-hider_focused': focused }" - href="#" @click.prevent="toggleShowMore" > {{ $t("general.show_more") }} - </a> + </button> <div v-if="!hideSubjectStatus" :class="{ 'single-line': singleLine }" @@ -48,10 +47,9 @@ @click.prevent="linkClicked" v-html="postBodyHtml" /> - <a + <button v-if="hideSubjectStatus" - href="#" - class="cw-status-hider" + class="button-unstyled -link cw-status-hider" @click.prevent="toggleShowMore" > {{ $t("status.show_content") }} @@ -79,15 +77,14 @@ v-if="status.card" icon="link" /> - </a> - <a + </button> + <button v-if="showingMore && !fullContent" - href="#" - class="status-unhider" + class="button-unstyled -link status-unhider" @click.prevent="toggleShowMore" > {{ tallStatus ? $t("general.show_less") : $t("status.hide_content") }} - </a> + </button> </div> <div v-if="status.poll && status.poll.options && !hideSubjectStatus"> diff --git a/src/components/tab_switcher/tab_switcher.js b/src/components/tab_switcher/tab_switcher.js @@ -81,7 +81,7 @@ export default Vue.component('tab-switcher', { const tabs = this.$slots.default .map((slot, index) => { if (!slot.tag) return - const classesTab = ['tab'] + const classesTab = ['tab', 'button-default'] const classesWrapper = ['tab-wrapper'] if (this.activeIndex === index) { classesTab.push('active') diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue @@ -4,7 +4,7 @@ <TimelineMenu v-if="!embedded" /> <button v-if="showLoadButton" - class="loadmore-button" + class="button-default loadmore-button" @click.prevent="showNewStatuses" > {{ loadButtonString }} @@ -61,13 +61,15 @@ > {{ $t('timeline.no_more_statuses') }} </div> - <a + <button v-else-if="!timeline.loading" - href="#" + class="button-unstyled -link -fullwidth" @click.prevent="fetchOlderStatuses()" > - <div class="new-status-notification text-center panel-footer">{{ $t('timeline.load_older') }}</div> - </a> + <div class="new-status-notification text-center panel-footer"> + {{ $t('timeline.load_older') }} + </div> + </button> <div v-else class="new-status-notification text-center panel-footer" diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue @@ -162,7 +162,7 @@ <template v-if="relationship.following"> <ProgressButton v-if="!relationship.subscribing" - class="btn btn-default" + class="btn button-default" :click="subscribeUser" :title="$t('user_card.subscribe')" > @@ -170,7 +170,7 @@ </ProgressButton> <ProgressButton v-else - class="btn btn-default toggled" + class="btn button-default toggled" :click="unsubscribeUser" :title="$t('user_card.unsubscribe')" > @@ -192,14 +192,14 @@ <div> <button v-if="relationship.muting" - class="btn btn-default btn-block toggled" + class="btn button-default btn-block toggled" @click="unmuteUser" > {{ $t('user_card.muted') }} </button> <button v-else - class="btn btn-default btn-block" + class="btn button-default btn-block" @click="muteUser" > {{ $t('user_card.mute') }} @@ -207,7 +207,7 @@ </div> <div> <button - class="btn btn-default btn-block" + class="btn button-default btn-block" @click="mentionUser" > {{ $t('user_card.mention') }} diff --git a/src/components/user_reporting_modal/user_reporting_modal.vue b/src/components/user_reporting_modal/user_reporting_modal.vue @@ -29,7 +29,7 @@ </div> <div> <button - class="btn btn-default" + class="btn button-default" :disabled="processing" @click="reportUser" > diff --git a/src/hocs/with_load_more/with_load_more.js b/src/hocs/with_load_more/with_load_more.js @@ -91,7 +91,11 @@ const withLoadMore = ({ {children} </WrappedComponent> <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 && !this.bottomedOut && <a onClick={this.fetchEntries}>{this.$t('general.more')}</a>} </div>