moon
/
pleroma-fe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

buttons look great now, including unstyled ones menu items work too

This commit is contained in:
Henry Jameson 2024-02-12 17:26:08 +02:00
parent 1c5f156af0
commit ae345d2c45
33 changed files with 224 additions and 249 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/App.scss
View File

@ -372,14 +372,24 @@ nav {
} }
} }
.menu-item {
border: none;
outline: none;
text-align: initial;
font-size: inherit;
font-family: inherit;
cursor: pointer;
color: inherit;
}
.button-unstyled { .button-unstyled {
background: none;
border: none; border: none;
outline: none; outline: none;
display: inline; display: inline;
text-align: initial; text-align: initial;
font-size: 100%; font-size: 100%;
font-family: inherit; font-family: inherit;
box-shadow: var(--shadow);
padding: 0; padding: 0;
line-height: unset; line-height: unset;
cursor: pointer; cursor: pointer;
@ -393,13 +403,6 @@ nav {
&.-fullwidth { &.-fullwidth {
width: 100%; width: 100%;
} }
&.-hover-highlight {
&:hover svg {
color: $fallback--lightText;
color: var(--lightText, $fallback--lightText);
}
}
} }
input, input,

5
src/components/account_actions/account_actions.vue
View File

@ -130,11 +130,6 @@
margin: -0.5em 0; margin: -0.5em 0;
padding: 0.5em 0; padding: 0.5em 0;
text-align: center; text-align: center;
&:not(:hover) .icon {
color: $fallback--lightText;
color: var(--lightText, $fallback--lightText);
}
} }
} }
</style> </style>

52
src/components/button.style.js
View File

@ -10,6 +10,14 @@ const border = (top, shadow) => ({
const buttonInsetFakeBorders = [border(true, false), border(false, true)] const buttonInsetFakeBorders = [border(true, false), border(false, true)]
const inputInsetFakeBorders = [border(true, true), border(false, false)] const inputInsetFakeBorders = [border(true, true), border(false, false)]
const buttonOuterShadow = {
x: 0,
y: 0,
blur: 2,
spread: 0,
color: '#000000',
alpha: 1
}
const hoverGlow = { const hoverGlow = {
x: 0, x: 0,
@ -22,7 +30,7 @@ const hoverGlow = {
export default { export default {
name: 'Button', // Name of the component name: 'Button', // Name of the component
selector: '.button', // CSS selector/prefix selector: '.button-default', // CSS selector/prefix
// outOfTreeSelector: '' // out-of-tree selector is used when other components are laid over it but it's not part of the tree, see Underlay component // outOfTreeSelector: '' // out-of-tree selector is used when other components are laid over it but it's not part of the tree, see Underlay component
// States, system witll calculate ALL possible combinations of those and prepend "normal" to them + standalone "normal" state // States, system witll calculate ALL possible combinations of those and prepend "normal" to them + standalone "normal" state
states: { states: {
@ -39,8 +47,8 @@ export default {
// Variants are mutually exclusive, each component implicitly has "normal" variant, and all other variants inherit from it. // Variants are mutually exclusive, each component implicitly has "normal" variant, and all other variants inherit from it.
variants: { variants: {
// Variants save on computation time since adding new variant just adds one more "set". // Variants save on computation time since adding new variant just adds one more "set".
normal: '-default', // you can override normal variant, it will be appenended to the main class // normal: '', // you can override normal variant, it will be appenended to the main class
danger: '-default.danger' danger: '.danger'
// Overall the compuation difficulty is N*((1/6)M^3+M) where M is number of distinct states and N is number of variants. // Overall the compuation difficulty is N*((1/6)M^3+M) where M is number of distinct states and N is number of variants.
// This (currently) is further multipled by number of places where component can exist. // This (currently) is further multipled by number of places where component can exist.
}, },
@ -56,21 +64,7 @@ export default {
// like within it // like within it
directives: { directives: {
background: '--fg', background: '--fg',
shadow: [{ shadow: [buttonOuterShadow, ...buttonInsetFakeBorders]
x: 0,
y: 0,
blur: 2,
spread: 0,
color: '#000000',
alpha: 1
}, ...buttonInsetFakeBorders]
}
},
{
variant: 'unstyled',
directives: {
background: '--fg',
opacity: 0
} }
}, },
{ {
@ -82,7 +76,7 @@ export default {
{ {
state: ['pressed'], state: ['pressed'],
directives: { directives: {
shadow: [...inputInsetFakeBorders] shadow: [buttonOuterShadow, ...inputInsetFakeBorders]
} }
}, },
{ {
@ -95,7 +89,7 @@ export default {
state: ['toggled'], state: ['toggled'],
directives: { directives: {
background: '--accent,-24.2', background: '--accent,-24.2',
shadow: [...inputInsetFakeBorders] shadow: [buttonOuterShadow, ...inputInsetFakeBorders]
} }
}, },
{ {
@ -112,6 +106,13 @@ export default {
shadow: [...buttonInsetFakeBorders] shadow: [...buttonInsetFakeBorders]
} }
}, },
{
state: ['disabled', 'hover'],
directives: {
background: '$blend(--background, 0.25, --parent)',
shadow: [...buttonInsetFakeBorders]
}
},
{ {
component: 'Text', component: 'Text',
parent: { parent: {
@ -122,6 +123,17 @@ export default {
textOpacity: 0.25, textOpacity: 0.25,
textOpacityMode: 'blend' textOpacityMode: 'blend'
} }
},
{
component: 'Text',
parent: {
component: 'Button',
state: ['disabled', 'hover']
},
directives: {
textOpacity: 0.25,
textOpacityMode: 'blend'
}
} }
] ]
} }

88
src/components/button_unstyled.style.js Normal file
View File

@ -0,0 +1,88 @@
export default {
name: 'ButtonUnstyled',
selector: '.button-unstyled',
states: {
disabled: ':disabled',
toggled: '.toggled',
pressed: ':active',
hover: ':hover',
focused: ':focus-within'
},
validInnerComponents: [
'Text',
'Icon'
],
defaultRules: [
{
directives: {
background: '--fg',
shadow: [],
opacity: 0
}
},
{
component: 'Icon',
parent: {
component: 'ButtonUnstyled',
state: ['hover']
},
directives: {
textColor: '--parent--text'
}
},
{
component: 'Icon',
parent: {
component: 'ButtonUnstyled',
state: ['toggled']
},
directives: {
textColor: '--parent--text'
}
},
{
component: 'Text',
parent: {
component: 'ButtonUnstyled',
state: ['disabled']
},
directives: {
textOpacity: 0.25,
textOpacityMode: 'blend'
}
},
{
component: 'Text',
parent: {
component: 'ButtonUnstyled',
state: ['disabled', 'hover']
},
directives: {
textOpacity: 0.25,
textOpacityMode: 'blend'
}
},
{
component: 'Icon',
parent: {
component: 'ButtonUnstyled',
state: ['disabled']
},
directives: {
textOpacity: 0.25,
textOpacityMode: 'blend'
}
},
{
component: 'Icon',
parent: {
component: 'ButtonUnstyled',
state: ['disabled', 'hover']
},
directives: {
textOpacity: 0.25,
textOpacityMode: 'blend'
}
}
]
}

2
src/components/chat_message/chat_message.vue
View File

@ -53,7 +53,7 @@
<template #content> <template #content>
<div class="dropdown-menu"> <div class="dropdown-menu">
<button <button
class="button-default dropdown-item dropdown-item-icon" class="menu-item dropdown-item dropdown-item-icon"
@click="deleteMessage" @click="deleteMessage"
> >
<FAIcon icon="times" /> {{ $t("chats.delete") }} <FAIcon icon="times" /> {{ $t("chats.delete") }}

1
src/components/emoji_input/emoji_input.vue
View File

@ -227,7 +227,6 @@
--faint: var(--selectedMenuPopoverFaintText, $fallback--faint); --faint: var(--selectedMenuPopoverFaintText, $fallback--faint);
--faintLink: var(--selectedMenuPopoverFaintLink, $fallback--faint); --faintLink: var(--selectedMenuPopoverFaintLink, $fallback--faint);
--lightText: var(--selectedMenuPopoverLightText, $fallback--lightText);
--icon: var(--selectedMenuPopoverIcon, $fallback--icon); --icon: var(--selectedMenuPopoverIcon, $fallback--icon);
} }
} }

16
src/components/emoji_picker/emoji_picker.scss
View File

@ -10,15 +10,6 @@ $emoji-picker-emoji-size: 32px;
max-width: calc(100vw - 20px); // popover gives 10px margin from window edge max-width: calc(100vw - 20px); // popover gives 10px margin from window edge
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background-color: $fallback--bg;
background-color: var(--popover, $fallback--bg);
color: $fallback--link;
color: var(--popoverText, $fallback--link);
--faint: var(--popoverFaintText, $fallback--faint);
--faintLink: var(--popoverFaintLink, $fallback--faint);
--lightText: var(--popoverLightText, $fallback--lightText);
--icon: var(--popoverIcon, $fallback--icon);
&-header-image { &-header-image {
display: inline-flex; display: inline-flex;
@ -104,13 +95,8 @@ $emoji-picker-emoji-size: 32px;
pointer-events: none; pointer-events: none;
} }
&.active { &.toggled {
border-bottom: 4px solid; border-bottom: 4px solid;
svg {
color: $fallback--lightText;
color: var(--lightText, $fallback--lightText);
}
} }
} }
} }

8
src/components/emoji_picker/emoji_picker.vue
View File

@ -23,9 +23,9 @@
v-for="group in filteredEmojiGroups" v-for="group in filteredEmojiGroups"
:ref="setGroupRef('group-header-' + group.id)" :ref="setGroupRef('group-header-' + group.id)"
:key="group.id" :key="group.id"
class="emoji-tabs-item" class="button-unstyled emoji-tabs-item"
:class="{ :class="{
active: activeGroupView === group.id toggled: activeGroupView === group.id
}" }"
:title="group.text" :title="group.text"
role="button" role="button"
@ -52,8 +52,8 @@
class="additional-tabs" class="additional-tabs"
> >
<span <span
class="stickers-tab-icon additional-tabs-item" class="button-unstyled stickers-tab-icon additional-tabs-item"
:class="{active: showingStickers}" :class="{toggled: showingStickers}"
:title="$t('emoji.stickers')" :title="$t('emoji.stickers')"
@click.prevent="toggleStickers" @click.prevent="toggleStickers"
> >

24
src/components/extra_buttons/extra_buttons.vue
View File

@ -18,7 +18,7 @@
> >
<button <button
v-if="canMute && !status.thread_muted" v-if="canMute && !status.thread_muted"
class="button-default dropdown-item dropdown-item-icon" class="menu-item dropdown-item dropdown-item-icon"
role="menuitem" role="menuitem"
@click.prevent="muteConversation" @click.prevent="muteConversation"
> >
@ -29,7 +29,7 @@
</button> </button>
<button <button
v-if="canMute && status.thread_muted" v-if="canMute && status.thread_muted"
class="button-default dropdown-item dropdown-item-icon" class="menu-item dropdown-item dropdown-item-icon"
role="menuitem" role="menuitem"
@click.prevent="unmuteConversation" @click.prevent="unmuteConversation"
> >
@ -40,7 +40,7 @@
</button> </button>
<button <button
v-if="!status.pinned && canPin" v-if="!status.pinned && canPin"
class="button-default dropdown-item dropdown-item-icon" class="menu-item dropdown-item dropdown-item-icon"
role="menuitem" role="menuitem"
@click.prevent="pinStatus" @click.prevent="pinStatus"
@click="close" @click="close"
@ -52,7 +52,7 @@
</button> </button>
<button <button
v-if="status.pinned && canPin" v-if="status.pinned && canPin"
class="button-default dropdown-item dropdown-item-icon" class="menu-item dropdown-item dropdown-item-icon"
role="menuitem" role="menuitem"
@click.prevent="unpinStatus" @click.prevent="unpinStatus"
@click="close" @click="close"
@ -65,7 +65,7 @@
<template v-if="canBookmark"> <template v-if="canBookmark">
<button <button
v-if="!status.bookmarked" v-if="!status.bookmarked"
class="button-default dropdown-item dropdown-item-icon" class="menu-item dropdown-item dropdown-item-icon"
role="menuitem" role="menuitem"
@click.prevent="bookmarkStatus" @click.prevent="bookmarkStatus"
@click="close" @click="close"
@ -77,7 +77,7 @@
</button> </button>
<button <button
v-if="status.bookmarked" v-if="status.bookmarked"
class="button-default dropdown-item dropdown-item-icon" class="menu-item dropdown-item dropdown-item-icon"
role="menuitem" role="menuitem"
@click.prevent="unbookmarkStatus" @click.prevent="unbookmarkStatus"
@click="close" @click="close"
@ -90,7 +90,7 @@
</template> </template>
<button <button
v-if="ownStatus && editingAvailable" v-if="ownStatus && editingAvailable"
class="button-default dropdown-item dropdown-item-icon" class="menu-item dropdown-item dropdown-item-icon"
role="menuitem" role="menuitem"
@click.prevent="editStatus" @click.prevent="editStatus"
@click="close" @click="close"
@ -102,7 +102,7 @@
</button> </button>
<button <button
v-if="isEdited && editingAvailable" v-if="isEdited && editingAvailable"
class="button-default dropdown-item dropdown-item-icon" class="menu-item dropdown-item dropdown-item-icon"
role="menuitem" role="menuitem"
@click.prevent="showStatusHistory" @click.prevent="showStatusHistory"
@click="close" @click="close"
@ -114,7 +114,7 @@
</button> </button>
<button <button
v-if="canDelete" v-if="canDelete"
class="button-default dropdown-item dropdown-item-icon" class="menu-item dropdown-item dropdown-item-icon"
role="menuitem" role="menuitem"
@click.prevent="deleteStatus" @click.prevent="deleteStatus"
@click="close" @click="close"
@ -125,7 +125,7 @@
/><span>{{ $t("status.delete") }}</span> /><span>{{ $t("status.delete") }}</span>
</button> </button>
<button <button
class="button-default dropdown-item dropdown-item-icon" class="menu-item dropdown-item dropdown-item-icon"
role="menuitem" role="menuitem"
@click.prevent="copyLink" @click.prevent="copyLink"
@click="close" @click="close"
@ -137,7 +137,7 @@
</button> </button>
<a <a
v-if="!status.is_local" v-if="!status.is_local"
class="button-default dropdown-item dropdown-item-icon" class="menu-item dropdown-item dropdown-item-icon"
role="menuitem" role="menuitem"
title="Source" title="Source"
:href="status.external_url" :href="status.external_url"
@ -149,7 +149,7 @@
/><span>{{ $t("status.external_source") }}</span> /><span>{{ $t("status.external_source") }}</span>
</a> </a>
<button <button
class="button-default dropdown-item dropdown-item-icon" class="menu-item dropdown-item dropdown-item-icon"
role="menuitem" role="menuitem"
@click.prevent="reportStatus" @click.prevent="reportStatus"
@click="close" @click="close"

5
src/components/input.style.js
View File

@ -24,19 +24,16 @@ export default {
selector: '.input', selector: '.input',
states: { states: {
disabled: ':disabled', disabled: ':disabled',
pressed: ':active',
hover: ':hover', hover: ':hover',
focused: ':focus-within' focused: ':focus-within'
}, },
// variants: {
// },
validInnerComponents: [ validInnerComponents: [
'Text' 'Text'
], ],
defaultRules: [ defaultRules: [
{ {
directives: { directives: {
background: '--fg', background: '--fg, -5',
shadow: [{ shadow: [{
x: 0, x: 0,
y: 0, y: 0,

10
src/components/menu_item.style.js
View File

@ -14,7 +14,15 @@ export default {
defaultRules: [ defaultRules: [
{ {
directives: { directives: {
background: '--fg' background: '--bg',
opacity: 0
}
},
{
state: ['hover'],
directives: {
background: '$mod(--bg, 5)',
opacity: 1
} }
}, },
{ {

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

@ -25,8 +25,6 @@
right: 1.5em; right: 1.5em;
// TODO: this needs its own color, it has to stand out enough and link color // TODO: this needs its own color, it has to stand out enough and link color
// is not very optimal for this particular use. // is not very optimal for this particular use.
background-color: $fallback--fg;
background-color: var(--btn, $fallback--fg);
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;

22
src/components/moderation_tools/moderation_tools.vue
View File

@ -12,13 +12,13 @@
<div class="dropdown-menu"> <div class="dropdown-menu">
<span v-if="canGrantRole"> <span v-if="canGrantRole">
<button <button
class="button-default dropdown-item" class="menu-item 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="button-default dropdown-item" class="menu-item 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') }}
@ -31,14 +31,14 @@
</span> </span>
<button <button
v-if="canChangeActivationState" v-if="canChangeActivationState"
class="button-default dropdown-item" class="menu-item 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
v-if="canDeleteAccount" v-if="canDeleteAccount"
class="button-default dropdown-item" class="menu-item dropdown-item"
@click="deleteUserDialog(true)" @click="deleteUserDialog(true)"
> >
{{ $t('user_card.admin_menu.delete_account') }} {{ $t('user_card.admin_menu.delete_account') }}
@ -50,7 +50,7 @@
/> />
<span v-if="canUseTagPolicy"> <span v-if="canUseTagPolicy">
<button <button
class="button-default dropdown-item" class="menu-item dropdown-item"
@click="toggleTag(tags.FORCE_NSFW)" @click="toggleTag(tags.FORCE_NSFW)"
> >
<span <span
@ -60,7 +60,7 @@
{{ $t('user_card.admin_menu.force_nsfw') }} {{ $t('user_card.admin_menu.force_nsfw') }}
</button> </button>
<button <button
class="button-default dropdown-item" class="menu-item dropdown-item"
@click="toggleTag(tags.STRIP_MEDIA)" @click="toggleTag(tags.STRIP_MEDIA)"
> >
<span <span
@ -70,7 +70,7 @@
{{ $t('user_card.admin_menu.strip_media') }} {{ $t('user_card.admin_menu.strip_media') }}
</button> </button>
<button <button
class="button-default dropdown-item" class="menu-item dropdown-item"
@click="toggleTag(tags.FORCE_UNLISTED)" @click="toggleTag(tags.FORCE_UNLISTED)"
> >
<span <span
@ -80,7 +80,7 @@
{{ $t('user_card.admin_menu.force_unlisted') }} {{ $t('user_card.admin_menu.force_unlisted') }}
</button> </button>
<button <button
class="button-default dropdown-item" class="menu-item dropdown-item"
@click="toggleTag(tags.SANDBOX)" @click="toggleTag(tags.SANDBOX)"
> >
<span <span
@ -91,7 +91,7 @@
</button> </button>
<button <button
v-if="user.is_local" v-if="user.is_local"
class="button-default dropdown-item" class="menu-item dropdown-item"
@click="toggleTag(tags.DISABLE_REMOTE_SUBSCRIPTION)" @click="toggleTag(tags.DISABLE_REMOTE_SUBSCRIPTION)"
> >
<span <span
@ -102,7 +102,7 @@
</button> </button>
<button <button
v-if="user.is_local" v-if="user.is_local"
class="button-default dropdown-item" class="menu-item dropdown-item"
@click="toggleTag(tags.DISABLE_ANY_SUBSCRIPTION)" @click="toggleTag(tags.DISABLE_ANY_SUBSCRIPTION)"
> >
<span <span
@ -113,7 +113,7 @@
</button> </button>
<button <button
v-if="user.is_local" v-if="user.is_local"
class="button-default dropdown-item" class="menu-item dropdown-item"
@click="toggleTag(tags.QUARANTINE)" @click="toggleTag(tags.QUARANTINE)"
> >
<span <span

16
src/components/nav_panel/nav_panel.vue
View File

@ -38,6 +38,7 @@
<div <div
v-show="showTimelines" v-show="showTimelines"
class="timelines-background" class="timelines-background"
:class="{ expanded: showTimelines }"
> >
<div class="timelines"> <div class="timelines">
<NavigationEntry <NavigationEntry
@ -57,12 +58,11 @@
> >
<router-link <router-link
:title="$t('lists.manage_lists')" :title="$t('lists.manage_lists')"
class="extra-button" class="button-unstyled extra-button"
:to="{ name: 'lists' }" :to="{ name: 'lists' }"
@click.stop @click.stop
> >
<FAIcon <FAIcon
class="extra-button"
fixed-width fixed-width
icon="wrench" icon="wrench"
/> />
@ -76,6 +76,7 @@
<div <div
v-show="showLists" v-show="showLists"
class="timelines-background" class="timelines-background"
:class="{ expanded: showTimelines }"
> >
<ListsMenuContent <ListsMenuContent
:show-pin="editMode || forceEditMode" :show-pin="editMode || forceEditMode"
@ -156,16 +157,11 @@
.timelines-background { .timelines-background {
padding: 0 0 0 0.6em; padding: 0 0 0 0.6em;
background-color: $fallback--lightBg;
background-color: var(--selectedMenu, $fallback--lightBg);
border-bottom: 1px solid;
border-color: $fallback--border;
border-color: var(--border, $fallback--border);
} }
.timelines { .timelines-background.expanded + .NavigationEntry {
background-color: $fallback--bg; border-top: 1px solid;
background-color: var(--bg, $fallback--bg); border-color: var(--border);
} }
.nav-panel-heading { .nav-panel-heading {

7
src/components/navigation/navigation_entry.vue
View File

@ -70,17 +70,22 @@
align-items: baseline; align-items: baseline;
height: 3.5em; height: 3.5em;
line-height: 3.5em; line-height: 3.5em;
padding: 0 1em; padding: 0;
width: 100%; width: 100%;
color: $fallback--link; color: $fallback--link;
color: var(--link, $fallback--link); color: var(--link, $fallback--link);
&[aria-expanded] {
padding-right: 1em;
}
.timelines-chevron { .timelines-chevron {
margin-right: 0; margin-right: 0;
} }
.main-link { .main-link {
flex: 1; flex: 1;
padding: 0 1em;
} }
.menu-icon { .menu-icon {

12
src/components/navigation/navigation_pins.vue
View File

@ -3,7 +3,8 @@
<router-link <router-link
v-for="item in pinnedList" v-for="item in pinnedList"
:key="item.name" :key="item.name"
class="pinned-item" class="button-unstyled pinned-item"
activeClass="toggled"
:to="getRouteTo(item)" :to="getRouteTo(item)"
:title="item.labelRaw || $t(item.label)" :title="item.labelRaw || $t(item.label)"
> >
@ -60,15 +61,8 @@
margin: 0; margin: 0;
} }
&.router-link-active { &.toggled {
color: $fallback--text;
color: var(--panelText, $fallback--text);
border-bottom: 4px solid; border-bottom: 4px solid;
& .svg-inline--fa,
& .iconLetter {
color: inherit;
}
} }
} }
} }

14
src/components/notifications/notification_filters.vue
View File

@ -8,7 +8,7 @@
<template #content> <template #content>
<div class="dropdown-menu"> <div class="dropdown-menu">
<button <button
class="button-default dropdown-item" class="menu-item dropdown-item"
@click="toggleNotificationFilter('likes')" @click="toggleNotificationFilter('likes')"
> >
<span <span
@ -17,7 +17,7 @@
/>{{ $t('settings.notification_visibility_likes') }} />{{ $t('settings.notification_visibility_likes') }}
</button> </button>
<button <button
class="button-default dropdown-item" class="menu-item dropdown-item"
@click="toggleNotificationFilter('repeats')" @click="toggleNotificationFilter('repeats')"
> >
<span <span
@ -26,7 +26,7 @@
/>{{ $t('settings.notification_visibility_repeats') }} />{{ $t('settings.notification_visibility_repeats') }}
</button> </button>
<button <button
class="button-default dropdown-item" class="menu-item dropdown-item"
@click="toggleNotificationFilter('follows')" @click="toggleNotificationFilter('follows')"
> >
<span <span
@ -35,7 +35,7 @@
/>{{ $t('settings.notification_visibility_follows') }} />{{ $t('settings.notification_visibility_follows') }}
</button> </button>
<button <button
class="button-default dropdown-item" class="menu-item dropdown-item"
@click="toggleNotificationFilter('mentions')" @click="toggleNotificationFilter('mentions')"
> >
<span <span
@ -44,7 +44,7 @@
/>{{ $t('settings.notification_visibility_mentions') }} />{{ $t('settings.notification_visibility_mentions') }}
</button> </button>
<button <button
class="button-default dropdown-item" class="menu-item dropdown-item"
@click="toggleNotificationFilter('emojiReactions')" @click="toggleNotificationFilter('emojiReactions')"
> >
<span <span
@ -53,7 +53,7 @@
/>{{ $t('settings.notification_visibility_emoji_reactions') }} />{{ $t('settings.notification_visibility_emoji_reactions') }}
</button> </button>
<button <button
class="button-default dropdown-item" class="menu-item dropdown-item"
@click="toggleNotificationFilter('moves')" @click="toggleNotificationFilter('moves')"
> >
<span <span
@ -62,7 +62,7 @@
/>{{ $t('settings.notification_visibility_moves') }} />{{ $t('settings.notification_visibility_moves') }}
</button> </button>
<button <button
class="button-default dropdown-item" class="menu-item dropdown-item"
@click="toggleNotificationFilter('polls')" @click="toggleNotificationFilter('polls')"
> >
<span <span

1
src/components/panel.style.js
View File

@ -6,6 +6,7 @@ export default {
'Link', 'Link',
'Icon', 'Icon',
'Button', 'Button',
'ButtonUnstyled',
'Input', 'Input',
'PanelHeader', 'PanelHeader',
'MenuItem' 'MenuItem'

3
src/components/panel_header.style.js
View File

@ -5,7 +5,8 @@ export default {
'Text', 'Text',
'Link', 'Link',
'Icon', 'Icon',
'Button' 'Button',
'ButtonUnstyled'
], ],
defaultRules: [ defaultRules: [
{ {

1
src/components/popover.style.js
View File

@ -10,6 +10,7 @@ export default {
'Link', 'Link',
'Icon', 'Icon',
'Button', 'Button',
'ButtonUnstyled',
'Input', 'Input',
'PanelHeader', 'PanelHeader',
'MenuItem' 'MenuItem'

62
src/components/popover/popover.vue
View File

@ -53,8 +53,7 @@
position: fixed; position: fixed;
min-width: 0; min-width: 0;
max-width: calc(100vw - 20px); max-width: calc(100vw - 20px);
box-shadow: 2px 2px 3px rgb(0 0 0 / 50%); box-shadow: var(--shadow);
box-shadow: var(--popupShadow);
} }
.popover-default { .popover-default {
@ -66,24 +65,12 @@
left: 0; left: 0;
right: 0; right: 0;
z-index: 3; z-index: 3;
box-shadow: 1px 1px 4px rgb(0 0 0 / 60%); box-shadow: var(--shadow);
box-shadow: var(--panelShadow);
pointer-events: none; pointer-events: none;
} }
border-radius: $fallback--btnRadius; border-radius: $fallback--btnRadius;
border-radius: var(--btnRadius, $fallback--btnRadius); border-radius: var(--btnRadius, $fallback--btnRadius);
background-color: $fallback--bg;
background-color: var(--popover, $fallback--bg);
color: $fallback--text;
color: var(--popoverText, $fallback--text);
--faint: var(--popoverFaintText, $fallback--faint);
--faintLink: var(--popoverFaintLink, $fallback--faint);
--lightText: var(--popoverLightText, $fallback--lightText);
--postLink: var(--popoverPostLink, $fallback--link);
--postFaintLink: var(--popoverPostFaintLink, $fallback--link);
--icon: var(--popoverIcon, $fallback--icon);
} }
.dropdown-menu { .dropdown-menu {
@ -127,7 +114,6 @@
svg { svg {
width: 22px; width: 22px;
margin-right: 0.75rem; margin-right: 0.75rem;
color: var(--menuPopoverIcon, $fallback--icon);
} }
} }
@ -138,25 +124,6 @@
} }
} }
&:active,
&:hover {
background-color: $fallback--lightBg;
background-color: var(--selectedMenuPopover, $fallback--lightBg);
box-shadow: none;
--btnText: var(--selectedMenuPopoverText, $fallback--link);
--faint: var(--selectedMenuPopoverFaintText, $fallback--faint);
--faintLink: var(--selectedMenuPopoverFaintLink, $fallback--faint);
--lightText: var(--selectedMenuPopoverLightText, $fallback--lightText);
--icon: var(--selectedMenuPopoverIcon, $fallback--icon);
svg {
color: var(--selectedMenuPopoverIcon, $fallback--icon);
--icon: var(--selectedMenuPopoverIcon, $fallback--icon);
}
}
.menu-checkbox { .menu-checkbox {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
@ -188,30 +155,5 @@
} }
} }
} }
.button-default.dropdown-item {
&,
i[class*="icon-"] {
color: $fallback--text;
color: var(--btnText, $fallback--text);
}
&:active {
background-color: $fallback--lightBg;
background-color: var(--selectedMenuPopover, $fallback--lightBg);
color: $fallback--link;
color: var(--selectedMenuPopoverText, $fallback--link);
}
&:disabled {
color: $fallback--text;
color: var(--btnDisabledText, $fallback--text);
}
&.toggled {
color: $fallback--text;
color: var(--btnToggledText, $fallback--text);
}
}
} }
</style> </style>

25
src/components/post_status_form/post_status_form.vue
View File

@ -503,31 +503,6 @@
padding: 0 0.1em; padding: 0 0.1em;
display: flex; display: flex;
align-items: center; align-items: center;
&.selected,
&:hover {
// needs to be specific to override icon default color
svg,
i,
label {
color: $fallback--lightText;
color: var(--lightText, $fallback--lightText);
}
}
&.disabled {
svg,
i {
cursor: not-allowed;
color: $fallback--icon;
color: var(--btnDisabledText, $fallback--icon);
&:hover {
color: $fallback--icon;
color: var(--btnDisabledText, $fallback--icon);
}
}
}
} }
.error { .error {

14
src/components/quick_filter_settings/quick_filter_settings.vue
View File

@ -16,7 +16,7 @@
> >
<button <button
v-if="!conversation" v-if="!conversation"
class="button-default dropdown-item" class="menu-item dropdown-item"
:aria-checked="replyVisibilityAll" :aria-checked="replyVisibilityAll"
role="menuitemradio" role="menuitemradio"
@click="replyVisibilityAll = true" @click="replyVisibilityAll = true"
@ -29,7 +29,7 @@
</button> </button>
<button <button
v-if="!conversation" v-if="!conversation"
class="button-default dropdown-item" class="menu-item dropdown-item"
:aria-checked="replyVisibilityFollowing" :aria-checked="replyVisibilityFollowing"
role="menuitemradio" role="menuitemradio"
@click="replyVisibilityFollowing = true" @click="replyVisibilityFollowing = true"
@ -42,7 +42,7 @@
</button> </button>
<button <button
v-if="!conversation" v-if="!conversation"
class="button-default dropdown-item" class="menu-item dropdown-item"
:aria-checked="replyVisibilitySelf" :aria-checked="replyVisibilitySelf"
role="menuitemradio" role="menuitemradio"
@click="replyVisibilitySelf = true" @click="replyVisibilitySelf = true"
@ -60,7 +60,7 @@
/> />
</div> </div>
<button <button
class="button-default dropdown-item" class="menu-item dropdown-item"
role="menuitemcheckbox" role="menuitemcheckbox"
:aria-checked="muteBotStatuses" :aria-checked="muteBotStatuses"
@click="muteBotStatuses = !muteBotStatuses" @click="muteBotStatuses = !muteBotStatuses"
@ -72,7 +72,7 @@
/>{{ $t('settings.mute_bot_posts') }} />{{ $t('settings.mute_bot_posts') }}
</button> </button>
<button <button
class="button-default dropdown-item" class="menu-item dropdown-item"
role="menuitemcheckbox" role="menuitemcheckbox"
:aria-checked="hideMedia" :aria-checked="hideMedia"
@click="hideMedia = !hideMedia" @click="hideMedia = !hideMedia"
@ -84,7 +84,7 @@
/>{{ $t('settings.hide_media_previews') }} />{{ $t('settings.hide_media_previews') }}
</button> </button>
<button <button
class="button-default dropdown-item" class="menu-item dropdown-item"
role="menuitemcheckbox" role="menuitemcheckbox"
:aria-checked="hideMutedPosts" :aria-checked="hideMutedPosts"
@click="hideMutedPosts = !hideMutedPosts" @click="hideMutedPosts = !hideMutedPosts"
@ -96,7 +96,7 @@
/>{{ $t('settings.hide_all_muted_posts') }} />{{ $t('settings.hide_all_muted_posts') }}
</button> </button>
<button <button
class="button-default dropdown-item dropdown-item-icon" class="menu-item dropdown-item dropdown-item-icon"
role="menuitem" role="menuitem"
@click="openTab('filtering')" @click="openTab('filtering')"
> >

12
src/components/quick_view_settings/quick_view_settings.vue
View File

@ -12,7 +12,7 @@
> >
<div role="group"> <div role="group">
<button <button
class="button-default dropdown-item" class="menu-item dropdown-item"
:aria-checked="conversationDisplay === 'tree'" :aria-checked="conversationDisplay === 'tree'"
role="menuitemradio" role="menuitemradio"
@click="conversationDisplay = 'tree'" @click="conversationDisplay = 'tree'"
@ -27,7 +27,7 @@
/> {{ $t('settings.conversation_display_tree_quick') }} /> {{ $t('settings.conversation_display_tree_quick') }}
</button> </button>
<button <button
class="button-default dropdown-item" class="menu-item dropdown-item"
:aria-checked="conversationDisplay === 'linear'" :aria-checked="conversationDisplay === 'linear'"
role="menuitemradio" role="menuitemradio"
@click="conversationDisplay = 'linear'" @click="conversationDisplay = 'linear'"
@ -47,7 +47,7 @@
class="dropdown-divider" class="dropdown-divider"
/> />
<button <button
class="button-default dropdown-item" class="menu-item dropdown-item"
role="menuitemcheckbox" role="menuitemcheckbox"
:aria-checked="showUserAvatars" :aria-checked="showUserAvatars"
@click="showUserAvatars = !showUserAvatars" @click="showUserAvatars = !showUserAvatars"
@ -60,7 +60,7 @@
</button> </button>
<button <button
v-if="!conversation" v-if="!conversation"
class="button-default dropdown-item" class="menu-item dropdown-item"
role="menuitemcheckbox" role="menuitemcheckbox"
:aria-checked="autoUpdate" :aria-checked="autoUpdate"
@click="autoUpdate = !autoUpdate" @click="autoUpdate = !autoUpdate"
@ -73,7 +73,7 @@
</button> </button>
<button <button
v-if="!conversation" v-if="!conversation"
class="button-default dropdown-item" class="menu-item dropdown-item"
role="menuitemcheckbox" role="menuitemcheckbox"
:aria-checked="collapseWithSubjects" :aria-checked="collapseWithSubjects"
@click="collapseWithSubjects = !collapseWithSubjects" @click="collapseWithSubjects = !collapseWithSubjects"
@ -85,7 +85,7 @@
/>{{ $t('settings.collapse_subject') }} />{{ $t('settings.collapse_subject') }}
</button> </button>
<button <button
class="button-default dropdown-item dropdown-item-icon" class="menu-item dropdown-item dropdown-item-icon"
role="menuitem" role="menuitem"
@click="openTab('general')" @click="openTab('general')"
> >

8
src/components/scope_selector/scope_selector.js
View File

@ -44,10 +44,10 @@ const ScopeSelector = {
}, },
css () { css () {
return { return {
public: { selected: this.currentScope === 'public' }, public: { toggled: this.currentScope === 'public' },
unlisted: { selected: this.currentScope === 'unlisted' }, unlisted: { toggled: this.currentScope === 'unlisted' },
private: { selected: this.currentScope === 'private' }, private: { toggled: this.currentScope === 'private' },
direct: { selected: this.currentScope === 'direct' } direct: { toggled: this.currentScope === 'direct' }
} }
} }
}, },

5
src/components/scope_selector/scope_selector.vue
View File

@ -73,11 +73,6 @@
min-width: 1.3em; min-width: 1.3em;
min-height: 1.3em; min-height: 1.3em;
text-align: center; text-align: center;
&.selected svg {
color: $fallback--lightText;
color: var(--lightText, $fallback--lightText);
}
} }
} }
</style> </style>

4
src/components/settings_modal/admin_tabs/frontends_tab.vue
View File

@ -103,7 +103,7 @@
<button <button
v-for="ref in frontend.refs" v-for="ref in frontend.refs"
:key="ref" :key="ref"
class="button-default dropdown-item" class="menu-item dropdown-item"
@click.prevent="update(frontend, ref)" @click.prevent="update(frontend, ref)"
@click="close" @click="close"
> >
@ -160,7 +160,7 @@
<button <button
v-for="ref in frontend.installedRefs || frontend.refs" v-for="ref in frontend.installedRefs || frontend.refs"
:key="ref" :key="ref"
class="button-default dropdown-item" class="menu-item dropdown-item"
@click.prevent="setDefault(frontend, ref)" @click.prevent="setDefault(frontend, ref)"
@click="close" @click="close"
> >

6
src/components/settings_modal/settings_modal.vue
View File

@ -70,7 +70,7 @@
<template #content="{close}"> <template #content="{close}">
<div class="dropdown-menu"> <div class="dropdown-menu">
<button <button
class="button-default dropdown-item dropdown-item-icon" class="menu-item dropdown-item dropdown-item-icon"
@click.prevent="backup" @click.prevent="backup"
@click="close" @click="close"
> >
@ -80,7 +80,7 @@
/><span>{{ $t("settings.file_export_import.backup_settings") }}</span> /><span>{{ $t("settings.file_export_import.backup_settings") }}</span>
</button> </button>
<button <button
class="button-default dropdown-item dropdown-item-icon" class="menu-item dropdown-item dropdown-item-icon"
@click.prevent="backupWithTheme" @click.prevent="backupWithTheme"
@click="close" @click="close"
> >
@ -90,7 +90,7 @@
/><span>{{ $t("settings.file_export_import.backup_settings_theme") }}</span> /><span>{{ $t("settings.file_export_import.backup_settings_theme") }}</span>
</button> </button>
<button <button
class="button-default dropdown-item dropdown-item-icon" class="menu-item dropdown-item dropdown-item-icon"
@click.prevent="restore" @click.prevent="restore"
@click="close" @click="close"
> >

5
src/components/status/status.scss
View File

@ -135,11 +135,6 @@
.button-unstyled { .button-unstyled {
padding: 5px; padding: 5px;
margin: -5px; margin: -5px;
&:hover svg {
color: $fallback--lightText;
color: var(--lightText, $fallback--lightText);
}
} }
.svg-inline--fa { .svg-inline--fa {

1
src/components/top_bar.style.js
View File

@ -6,6 +6,7 @@ export default {
'Text', 'Text',
'Icon', 'Icon',
'Button', 'Button',
'ButtonUnstyled',
'Input' 'Input'
], ],
defaultRules: [ defaultRules: [

13
src/components/user_card/user_card.scss
View File

@ -110,19 +110,8 @@
} }
.user-info { .user-info {
color: $fallback--lightText;
color: var(--lightText, $fallback--lightText);
padding: 0 26px; padding: 0 26px;
a {
color: $fallback--lightText;
color: var(--lightText, $fallback--lightText);
&:hover {
color: var(--icon);
}
}
.container { .container {
min-width: 0; min-width: 0;
padding: 16px 0 6px; padding: 16px 0 6px;
@ -334,8 +323,6 @@
padding: 0.5em 1.5em 0; padding: 0.5em 1.5em 0;
text-align: center; text-align: center;
justify-content: space-between; justify-content: space-between;
color: $fallback--lightText;
color: var(--lightText, $fallback--lightText);
flex-wrap: wrap; flex-wrap: wrap;
} }

2
src/components/user_list_menu/user_list_menu.vue
View File

@ -10,7 +10,7 @@
<button <button
v-for="list in lists" v-for="list in lists"
:key="list.id" :key="list.id"
class="button-default dropdown-item" class="menu-item dropdown-item"
@click="toggleList(list.id)" @click="toggleList(list.id)"
> >
<span <span

8
src/services/theme_data/theme_data_3.service.js
View File

@ -16,6 +16,7 @@ import MenuItem from 'src/components/menu_item.style.js'
import Panel from 'src/components/panel.style.js' import Panel from 'src/components/panel.style.js'
import PanelHeader from 'src/components/panel_header.style.js' import PanelHeader from 'src/components/panel_header.style.js'
import Button from 'src/components/button.style.js' import Button from 'src/components/button.style.js'
import ButtonUnstyled from 'src/components/button_unstyled.style.js'
import Input from 'src/components/input.style.js' import Input from 'src/components/input.style.js'
import Text from 'src/components/text.style.js' import Text from 'src/components/text.style.js'
import Link from 'src/components/link.style.js' import Link from 'src/components/link.style.js'
@ -49,6 +50,7 @@ const components = {
PanelHeader, PanelHeader,
TopBar, TopBar,
Button, Button,
ButtonUnstyled,
Input Input
} }
@ -208,7 +210,6 @@ export const init = (extraRuleset, palette) => {
}) })
.map(({ data }) => data) .map(({ data }) => data)
console.log(ruleset)
const virtualComponents = new Set(Object.values(components).filter(c => c.virtual).map(c => c.name)) const virtualComponents = new Set(Object.values(components).filter(c => c.virtual).map(c => c.name))
const addRule = (rule) => { const addRule = (rule) => {
@ -437,11 +438,6 @@ export const init = (extraRuleset, palette) => {
} }
} }
if (component.name === 'Text' && combination.variant === 'normal' && computedRule.parent.component === 'MenuItem' && computedRule.parent.state.indexOf('hover') >= 0) {
console.log(existingRules)
console.log(computedRule, newTextRule)
}
dynamicVars.inheritedBackground = lowerLevelBackground dynamicVars.inheritedBackground = lowerLevelBackground
// TODO properly provide "parent" text color? // TODO properly provide "parent" text color?