cleanup + fixes
This commit is contained in:
Henry Jameson
parent
4887d37110
commit
5a085d8e36
8 changed files with 119 additions and 81 deletions
|
|
@ -48,13 +48,15 @@
|
|||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.dropdown-item:not(button, a) {
|
||||
.dropdown-item {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
a.dropdown-item,
|
||||
button.dropdown-item,
|
||||
.dropdown-item:not(button, a) {
|
||||
.popover-wrapper {
|
||||
box-sizing: border-box;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.extra-button {
|
||||
border-left: 1px solid var(--icon);
|
||||
padding-left: calc(var(--__horizontal-gap) - 1px);
|
||||
|
|
@ -64,6 +66,7 @@
|
|||
}
|
||||
|
||||
.main-button {
|
||||
width: 100%;
|
||||
padding: var(--__horizontal-gap) var(--__horizontal-gap);
|
||||
grid-gap: var(--__horizontal-gap);
|
||||
grid-template-columns: 1fr var(--__line-height);
|
||||
|
|
@ -125,5 +128,11 @@
|
|||
padding-left: calc(var(--__line-height) + var(--__horizontal-gap) * 2);
|
||||
}
|
||||
}
|
||||
|
||||
&.-icon-double {
|
||||
.main-button {
|
||||
grid-template-columns: var(--__line-height) var(--__line-height) 1fr;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<span
|
||||
class="popover-wrapper"
|
||||
@mouseenter="onMouseenter"
|
||||
@mouseleave="onMouseleave"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
role="menu"
|
||||
>
|
||||
<div role="group">
|
||||
<div class="menu-item dropdown-item -icon">
|
||||
<div class="menu-item dropdown-item -icon-double">
|
||||
<button
|
||||
class="main-button"
|
||||
:aria-checked="conversationDisplay === 'tree'"
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
/> {{ $t('settings.conversation_display_tree_quick') }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="menu-item dropdown-item -icon">
|
||||
<div class="menu-item dropdown-item -icon-double">
|
||||
<button
|
||||
class="main-button"
|
||||
:aria-checked="conversationDisplay === 'linear'"
|
||||
|
|
|
|||
56
src/components/status_action_buttons/action_button.scss
Normal file
56
src/components/status_action_buttons/action_button.scss
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
@import "../../mixins";
|
||||
/* stylelint-disable declaration-no-important */
|
||||
|
||||
.action-button {
|
||||
&.-quick {
|
||||
display: grid;
|
||||
grid-template-columns: max-content auto;
|
||||
grid-gap: 1em;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.-active {
|
||||
&.reply-button:not(.disabled) {
|
||||
.svg-inline--fa {
|
||||
color: var(--cBlue);
|
||||
}
|
||||
}
|
||||
|
||||
&.retweet-button:not(.disabled) {
|
||||
.svg-inline--fa {
|
||||
color: var(--cGreen);
|
||||
}
|
||||
}
|
||||
|
||||
&.favorite-button:not(.disabled) {
|
||||
.svg-inline--fa {
|
||||
color: var(--cOrange);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include unfocused-style {
|
||||
.focus-marker {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.active-marker {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
@include focused-style {
|
||||
.focus-marker {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.active-marker {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -2,10 +2,11 @@
|
|||
<div>
|
||||
<component
|
||||
:is="getComponent(button)"
|
||||
class="main-button"
|
||||
class="main-button action-button"
|
||||
:class="buttonClass"
|
||||
role="menuitem"
|
||||
:tabindex="0"
|
||||
:disabled="getClass(button).disabled"
|
||||
:disabled="buttonClass.disabled"
|
||||
:href="getComponent(button) == 'a' ? button.link?.(funcArg) || getRemoteInteractionLink : undefined"
|
||||
@click.stop="getComponent(button) === 'button' && doAction(button)"
|
||||
@click="close"
|
||||
|
|
@ -15,25 +16,25 @@
|
|||
class="fa-scale-110"
|
||||
:icon="button.icon(funcArg)"
|
||||
:spin="!extra && button.animated?.() && animationState[button.name]"
|
||||
:fixed-width="extra"
|
||||
fixed-width
|
||||
/>
|
||||
<template v-if="!getClass(button).disabled && button.toggleable?.(funcArg) && button.active">
|
||||
<template v-if="!buttonClass.disabled && button.toggleable?.(funcArg) && button.active">
|
||||
<FAIcon
|
||||
v-if="button.active(funcArg)"
|
||||
class="active-marker"
|
||||
transform="shrink-6 up-9 right-12"
|
||||
transform="shrink-6 up-9 right-15"
|
||||
:icon="button.activeIndicator?.(funcArg) || 'check'"
|
||||
/>
|
||||
<FAIcon
|
||||
v-if="!button.active(funcArg)"
|
||||
class="focus-marker"
|
||||
transform="shrink-6 up-9 right-12"
|
||||
transform="shrink-6 up-9 right-15"
|
||||
:icon="button.openIndicator?.(funcArg) || 'plus'"
|
||||
/>
|
||||
<FAIcon
|
||||
v-else
|
||||
class="focus-marker"
|
||||
transform="shrink-6 up-9 right-12"
|
||||
transform="shrink-6 up-9 right-15"
|
||||
:icon="button.closeIndicator?.(funcArg) || 'minus'"
|
||||
/>
|
||||
</template>
|
||||
|
|
@ -108,6 +109,19 @@ export default {
|
|||
'getComponent',
|
||||
'doAction',
|
||||
'close'
|
||||
]
|
||||
],
|
||||
computed: {
|
||||
buttonClass () {
|
||||
return {
|
||||
[this.button.name + '-button']: true,
|
||||
'-extra': this.extra,
|
||||
'-quick': !this.extra,
|
||||
'-active': this.button.active?.(this.funcArg),
|
||||
disabled: this.button.interactive ? !this.button.interactive(this.funcArg) : false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" src="./action_button.scss"/>
|
||||
|
|
|
|||
|
|
@ -159,8 +159,8 @@ const BUTTONS = [{
|
|||
name: 'pin',
|
||||
icon: 'thumbtack',
|
||||
label: ({ status }) => status.pinned
|
||||
? 'status.pin'
|
||||
: 'status.unpin',
|
||||
? 'status.unpin'
|
||||
: 'status.pin',
|
||||
if ({ status, loggedIn, currentUser }) {
|
||||
return loggedIn &&
|
||||
status.user.id === currentUser.id &&
|
||||
|
|
@ -179,9 +179,11 @@ const BUTTONS = [{
|
|||
// =========
|
||||
name: 'bookmark',
|
||||
icon: 'bookmark',
|
||||
toggleable: true,
|
||||
active: ({ status }) => status.bookmarked,
|
||||
label: ({ status }) => status.bookmarked
|
||||
? 'status.bookmark'
|
||||
: 'status.unbookmark',
|
||||
? 'status.unbookmark'
|
||||
: 'status.bookmark',
|
||||
if: ({ loggedIn }) => loggedIn,
|
||||
action ({ status, dispatch, emit }) {
|
||||
if (status.bookmarked) {
|
||||
|
|
|
|||
|
|
@ -13,17 +13,6 @@
|
|||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
|
||||
.action-button {
|
||||
display: grid;
|
||||
grid-template-columns: max-content auto;
|
||||
grid-gap: 1em;
|
||||
align-items: center;
|
||||
|
||||
&.disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
&.-pin {
|
||||
margin: calc(-2px - 0.25em);
|
||||
padding: 0.25em;
|
||||
|
|
@ -106,56 +95,6 @@
|
|||
padding: var(--__horizontal-gap) var(--__horizontal-gap);
|
||||
}
|
||||
}
|
||||
|
||||
> 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 {
|
||||
color: var(--cBlue);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.retweet-button:not(.disabled) {
|
||||
&:hover,
|
||||
&.-active {
|
||||
.svg-inline--fa {
|
||||
color: var(--cGreen);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.favorite-button:not(.disabled) {
|
||||
&:hover,
|
||||
&.-active {
|
||||
.svg-inline--fa {
|
||||
color: var(--cOrange);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* stylelint-enable no-descending-specificity */
|
||||
|
|
|
|||
|
|
@ -130,7 +130,24 @@
|
|||
/>
|
||||
</template>
|
||||
<template #content>
|
||||
<StatusBookmarkFolderMenu v-if="button.name === 'mute'" :status="funcArg.status" />
|
||||
<template v-if="button.name === 'mute'">
|
||||
<div
|
||||
v-for="folder in folders"
|
||||
:key="folder.id"
|
||||
class="menu-item dropdown-item -icon"
|
||||
>
|
||||
<button
|
||||
class="main-button"
|
||||
@click="toggleFolder(folder.id)"
|
||||
>
|
||||
<span
|
||||
class="input menu-checkbox -radio"
|
||||
:class="{ 'menu-checkbox-checked': status.bookmark_folder_id == folder.id }"
|
||||
/>
|
||||
{{ folder.name }}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</Popover>
|
||||
<Popover
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue