diff --git a/src/components/popover/popover.scss b/src/components/popover/popover.scss index 9ec1ff110..5dfedf729 100644 --- a/src/components/popover/popover.scss +++ b/src/components/popover/popover.scss @@ -65,7 +65,6 @@ grid-template-columns: 1fr var(--__line-height); grid-auto-flow: column; grid-auto-columns: auto; - cursor: pointer; .menu-checkbox { display: inline-block; @@ -102,4 +101,18 @@ .dropdown-item-icon:not(button, a) > a:first-child { grid-template-columns: var(--__line-height) 1fr; } + + a.dropdown-item:not(.disabled), + button.dropdown:not(.disabled), + .dropdown-item:not(.disabled, button, a) > button:first-child, + .dropdown-item:not(.disabled, button, a) > a:first-child { + cursor: pointer; + } + + a.dropdown-item.disabled, + button.dropdown.disabled, + .dropdown-item.disabled:not(button, a) > button:first-child, + .dropdown-item.disabled:not(button, a) > a:first-child { + cursor: not-allowed; + } } diff --git a/src/components/status_action_buttons/status_action_buttons.js b/src/components/status_action_buttons/status_action_buttons.js index 0ce3b4a5d..c45aa8227 100644 --- a/src/components/status_action_buttons/status_action_buttons.js +++ b/src/components/status_action_buttons/status_action_buttons.js @@ -86,7 +86,7 @@ const BUTTONS = [{ active: ({ status }) => status.repeated, counter: ({ status }) => status.repeat_num, anonLink: true, - interactive: ({ status }) => !PRIVATE_SCOPES.has(status.visibility), + interactive: ({ status, loggedIn }) => loggedIn && !PRIVATE_SCOPES.has(status.visibility), toggleable: true, confirm: ({ status, getters }) => !status.repeated && getters.mergedConfig.modalOnRepeat, confirmStrings: { @@ -284,6 +284,10 @@ const StatusActionButtons = { emits: ['toggleReplying'], data () { return { + animationState: { + retweet: false, + favorite: false + }, showPin: false, showingConfirmDialog: false, currentConfirmTitle: '', @@ -353,9 +357,11 @@ const StatusActionButtons = { } }, doActionReal (button) { + this.animationState[button.name] = true button.action(this.funcArg) .then(() => this.$emit('onSuccess')) .catch(err => this.$emit('onError', err.error.error)) + .finally(() => setTimeout(() => { this.animationState[button.name] = false })) }, isPinned (button) { console.log(this.pinnedItems, button.name) @@ -381,10 +387,10 @@ const StatusActionButtons = { getClass (button) { return { [button.name + '-button']: true, + disabled: button.interactive ? !button.interactive(this.funcArg) : false, '-pin-edit': this.showPin, '-dropdown': button.dropdown?.(), - '-active': button.active?.(this.funcArg), - '-interactive': !!this.$store.state.users.currentUser + '-active': button.active?.(this.funcArg) } }, getRemoteInteractionLink () { diff --git a/src/components/status_action_buttons/status_action_buttons.scss b/src/components/status_action_buttons/status_action_buttons.scss index 5a230af8e..a366c61d3 100644 --- a/src/components/status_action_buttons/status_action_buttons.scss +++ b/src/components/status_action_buttons/status_action_buttons.scss @@ -18,6 +18,10 @@ grid-template-columns: max-content auto; grid-gap: 1em; align-items: center; + + &.disabled { + cursor: not-allowed; + } } &.-pin { @@ -32,7 +36,7 @@ grid-template-columns: 1fr max-content; } - .reply-button { + .reply-button:not(.disabled) { &:hover, &.-active { .svg-inline--fa { @@ -41,7 +45,7 @@ } } - .retweet-button { + .retweet-button:not(.disabled) { &:hover, &.-active { .svg-inline--fa { @@ -50,7 +54,7 @@ } } - .favorite-button { + .favorite-button:not(.disabled) { &:hover, &.-active { .svg-inline--fa { @@ -103,7 +107,30 @@ } } - .reply-button { + > a, + > button { + @include unfocused-style { + .focus-marker { + visibility: hidden; + } + + .active-marker { + visibility: visible; + } + } + + @include focused-style { + .focus-marker { + visibility: visible; + } + + .active-marker { + visibility: hidden; + } + } + } + + .reply-button:not(.disabled) { &:hover, &.-active { .svg-inline--fa { @@ -112,7 +139,7 @@ } } - .retweet-button { + .retweet-button:not(.disabled) { &:hover, &.-active { .svg-inline--fa { @@ -121,7 +148,7 @@ } } - .favorite-button { + .favorite-button:not(.disabled) { &:hover, &.-active { .svg-inline--fa { diff --git a/src/components/status_action_buttons/status_action_buttons.vue b/src/components/status_action_buttons/status_action_buttons.vue index 41356942e..a0a58461d 100644 --- a/src/components/status_action_buttons/status_action_buttons.vue +++ b/src/components/status_action_buttons/status_action_buttons.vue @@ -11,6 +11,7 @@ :is="component(button)" class="button-unstyled action-button" :class="getClass(button)" + :disabled="getClass(button).disabled" role="button" :tabindex="0" :title="$t(button.label(funcArg))" @@ -22,7 +23,7 @@ class="fa-scale-110" :icon="button.icon(funcArg)" /> -