sjw/pleroma-fe
1
0
Fork 0
mirror of https://git.pleroma.social/sjw/pleroma-fe.git synced 2024-12-23 13:05:14 +01:00
Code Issues Releases Wiki Activity

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

Browse Source
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 {
background: none;
border: none;
outline: none;
display: inline;
text-align: initial;
font-size: 100%;
font-family: inherit;
box-shadow: var(--shadow);
padding: 0;
line-height: unset;
cursor: pointer;
@ -393,13 +403,6 @@ nav {
&.-fullwidth {
width: 100%;
}
&.-hover-highlight {
&:hover svg {
color: $fallback--lightText;
color: var(--lightText, $fallback--lightText);
}
}
}
input,

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

@ -130,11 +130,6 @@
margin: -0.5em 0;
padding: 0.5em 0;
text-align: center;
&:not(:hover) .icon {
color: $fallback--lightText;
color: var(--lightText, $fallback--lightText);
}
}
}
</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 inputInsetFakeBorders = [border(true, true), border(false, false)]
const buttonOuterShadow = {
x: 0,
y: 0,
blur: 2,
spread: 0,
color: '#000000',
alpha: 1
}
const hoverGlow = {
x: 0,
@ -22,7 +30,7 @@ const hoverGlow = {
export default {
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
// States, system witll calculate ALL possible combinations of those and prepend "normal" to them + standalone "normal" state
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: {
// 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
danger: '-default.danger'
// normal: '', // you can override normal variant, it will be appenended to the main class
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.
// This (currently) is further multipled by number of places where component can exist.
},
@ -56,21 +64,7 @@ export default {
// like within it
directives: {
background: '--fg',
shadow: [{
x: 0,
y: 0,
blur: 2,
spread: 0,
color: '#000000',
alpha: 1
}, ...buttonInsetFakeBorders]
}
},
{
variant: 'unstyled',
directives: {
background: '--fg',
opacity: 0
shadow: [buttonOuterShadow, ...buttonInsetFakeBorders]
}
},
{
@ -82,7 +76,7 @@ export default {
{
state: ['pressed'],
directives: {
shadow: [...inputInsetFakeBorders]
shadow: [buttonOuterShadow, ...inputInsetFakeBorders]
}
},
{
@ -95,7 +89,7 @@ export default {
state: ['toggled'],
directives: {
background: '--accent,-24.2',
shadow: [...inputInsetFakeBorders]
shadow: [buttonOuterShadow, ...inputInsetFakeBorders]
}
},
{
@ -112,6 +106,13 @@ export default {
shadow: [...buttonInsetFakeBorders]
}
},
{
state: ['disabled', 'hover'],
directives: {
background: '$blend(--background, 0.25, --parent)',
shadow: [...buttonInsetFakeBorders]
}
},
{
component: 'Text',
parent: {
@ -122,6 +123,17 @@ export default {
textOpacity: 0.25,
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>
<div class="dropdown-menu">
<button
class="button-default dropdown-item dropdown-item-icon"
class="menu-item dropdown-item dropdown-item-icon"
@click="deleteMessage"
>
<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);
--faintLink: var(--selectedMenuPopoverFaintLink, $fallback--faint);
--lightText: var(--selectedMenuPopoverLightText, $fallback--lightText);
--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
display: flex;
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 {
display: inline-flex;
@ -104,13 +95,8 @@ $emoji-picker-emoji-size: 32px;
pointer-events: none;
}
&.active {
&.toggled {
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"
:ref="setGroupRef('group-header-' + group.id)"
:key="group.id"
class="emoji-tabs-item"
class="button-unstyled emoji-tabs-item"
:class="{
active: activeGroupView === group.id
toggled: activeGroupView === group.id
}"
:title="group.text"
role="button"
@ -52,8 +52,8 @@
class="additional-tabs"
>
<span
class="stickers-tab-icon additional-tabs-item"
:class="{active: showingStickers}"
class="button-unstyled stickers-tab-icon additional-tabs-item"
:class="{toggled: showingStickers}"
:title="$t('emoji.stickers')"
@click.prevent="toggleStickers"
>

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

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

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

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

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

@ -14,7 +14,15 @@ export default {
defaultRules: [
{
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;
// TODO: this needs its own color, it has to stand out enough and link color
// is not very optimal for this particular use.
background-color: $fallback--fg;
background-color: var(--btn, $fallback--fg);
display: flex;
justify-content: center;
align-items: center;

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

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

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

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

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

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

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

@ -3,7 +3,8 @@
<router-link
v-for="item in pinnedList"
:key="item.name"
class="pinned-item"
class="button-unstyled pinned-item"
activeClass="toggled"
:to="getRouteTo(item)"
:title="item.labelRaw || $t(item.label)"
>
@ -60,15 +61,8 @@
margin: 0;
}
&.router-link-active {
color: $fallback--text;
color: var(--panelText, $fallback--text);
&.toggled {
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>
<div class="dropdown-menu">
<button
class="button-default dropdown-item"
class="menu-item dropdown-item"
@click="toggleNotificationFilter('likes')"
>
<span
@ -17,7 +17,7 @@
/>{{ $t('settings.notification_visibility_likes') }}
</button>
<button
class="button-default dropdown-item"
class="menu-item dropdown-item"
@click="toggleNotificationFilter('repeats')"
>
<span
@ -26,7 +26,7 @@
/>{{ $t('settings.notification_visibility_repeats') }}
</button>
<button
class="button-default dropdown-item"
class="menu-item dropdown-item"
@click="toggleNotificationFilter('follows')"
>
<span
@ -35,7 +35,7 @@
/>{{ $t('settings.notification_visibility_follows') }}
</button>
<button
class="button-default dropdown-item"
class="menu-item dropdown-item"
@click="toggleNotificationFilter('mentions')"
>
<span
@ -44,7 +44,7 @@
/>{{ $t('settings.notification_visibility_mentions') }}
</button>
<button
class="button-default dropdown-item"
class="menu-item dropdown-item"
@click="toggleNotificationFilter('emojiReactions')"
>
<span
@ -53,7 +53,7 @@
/>{{ $t('settings.notification_visibility_emoji_reactions') }}
</button>
<button
class="button-default dropdown-item"
class="menu-item dropdown-item"
@click="toggleNotificationFilter('moves')"
>
<span
@ -62,7 +62,7 @@
/>{{ $t('settings.notification_visibility_moves') }}
</button>
<button
class="button-default dropdown-item"
class="menu-item dropdown-item"
@click="toggleNotificationFilter('polls')"
>
<span

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

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

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

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

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

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

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

@ -53,8 +53,7 @@
position: fixed;
min-width: 0;
max-width: calc(100vw - 20px);
box-shadow: 2px 2px 3px rgb(0 0 0 / 50%);
box-shadow: var(--popupShadow);
box-shadow: var(--shadow);
}
.popover-default {
@ -66,24 +65,12 @@
left: 0;
right: 0;
z-index: 3;
box-shadow: 1px 1px 4px rgb(0 0 0 / 60%);
box-shadow: var(--panelShadow);
box-shadow: var(--shadow);
pointer-events: none;
}
border-radius: $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 {
@ -127,7 +114,6 @@
svg {
width: 22px;
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 {
display: inline-block;
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>

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

@ -503,31 +503,6 @@
padding: 0 0.1em;
display: flex;
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 {

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -10,7 +10,7 @@
<button
v-for="list in lists"
:key="list.id"
class="button-default dropdown-item"
class="menu-item dropdown-item"
@click="toggleList(list.id)"
>
<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 PanelHeader from 'src/components/panel_header.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 Text from 'src/components/text.style.js'
import Link from 'src/components/link.style.js'
@ -49,6 +50,7 @@ const components = {
PanelHeader,
TopBar,
Button,
ButtonUnstyled,
Input
}
@ -208,7 +210,6 @@ export const init = (extraRuleset, palette) => {
})
.map(({ data }) => data)
console.log(ruleset)
const virtualComponents = new Set(Object.values(components).filter(c => c.virtual).map(c => c.name))
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
// TODO properly provide "parent" text color?