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

consistent menu-items

This commit is contained in:
Henry Jameson 2024-02-28 01:23:43 +02:00
parent f4d48e401a
commit fe93717d47
8 changed files with 93 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/App.scss
View File

@ -366,17 +366,42 @@ nav {
} }
.menu-item { .menu-item {
display: block;
box-sizing: border-box;
border: none; border: none;
outline: none; outline: none;
text-align: initial; text-align: initial;
font-size: inherit; font-size: inherit;
font-family: inherit; font-family: inherit;
font-weight: 400;
cursor: pointer; cursor: pointer;
color: inherit; color: inherit;
clear: both;
position: relative; position: relative;
border-bottom: 1px solid; border-bottom: 1px solid;
white-space: nowrap;
border-color: var(--border); border-color: var(--border);
width: 100%; width: 100%;
line-height: var(--__line-height);
padding: var(--__vertical-gap) var(--__horizontal-gap);
--__line-height: 1.5em;
--__horizontal-gap: 0.75em;
--__vertical-gap: 0.5em;
a,
button {
text-align: initial;
padding: 0;
background: none;
border: none;
outline: none;
display: inline;
font-size: 100%;
font-family: inherit;
line-height: unset;
color: var(--text);
}
&:first-child { &:first-child {
border-top-right-radius: var(--roundness); border-top-right-radius: var(--roundness);
@ -693,6 +718,10 @@ option {
&.iconLetter { &.iconLetter {
font-size: 1.1em; font-size: 1.1em;
} }
&.svg-inline--fa {
vertical-align: -0.15em;
}
} }
.fa-old-padding { .fa-old-padding {

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

@ -11,14 +11,14 @@
<template v-if="relationship.following"> <template v-if="relationship.following">
<button <button
v-if="relationship.showing_reblogs" v-if="relationship.showing_reblogs"
class="btn button-default dropdown-item" class="dropdown-item menu-item"
@click="hideRepeats" @click="hideRepeats"
> >
{{ $t('user_card.hide_repeats') }} {{ $t('user_card.hide_repeats') }}
</button> </button>
<button <button
v-if="!relationship.showing_reblogs" v-if="!relationship.showing_reblogs"
class="btn button-default dropdown-item" class="dropdown-item menu-item"
@click="showRepeats" @click="showRepeats"
> >
{{ $t('user_card.show_repeats') }} {{ $t('user_card.show_repeats') }}
@ -31,34 +31,34 @@
<UserListMenu :user="user" /> <UserListMenu :user="user" />
<button <button
v-if="relationship.followed_by" v-if="relationship.followed_by"
class="btn button-default btn-block dropdown-item" class="dropdown-item menu-item"
@click="removeUserFromFollowers" @click="removeUserFromFollowers"
> >
{{ $t('user_card.remove_follower') }} {{ $t('user_card.remove_follower') }}
</button> </button>
<button <button
v-if="relationship.blocking" v-if="relationship.blocking"
class="btn button-default btn-block dropdown-item" class="dropdown-item menu-item"
@click="unblockUser" @click="unblockUser"
> >
{{ $t('user_card.unblock') }} {{ $t('user_card.unblock') }}
</button> </button>
<button <button
v-else v-else
class="btn button-default btn-block dropdown-item" class="dropdown-item menu-item"
@click="blockUser" @click="blockUser"
> >
{{ $t('user_card.block') }} {{ $t('user_card.block') }}
</button> </button>
<button <button
class="btn button-default btn-block dropdown-item" class="dropdown-item menu-item"
@click="reportUser" @click="reportUser"
> >
{{ $t('user_card.report') }} {{ $t('user_card.report') }}
</button> </button>
<button <button
v-if="pleromaChatMessagesAvailable" v-if="pleromaChatMessagesAvailable"
class="btn button-default btn-block dropdown-item" class="dropdown-item menu-item"
@click="openChat" @click="openChat"
> >
{{ $t('user_card.message') }} {{ $t('user_card.message') }}

2
src/components/emoji_input/emoji_input.js
View File

@ -270,7 +270,7 @@ const EmojiInput = {
if (newValue) { if (newValue) {
this.$refs.suggestorPopover.showPopover() this.$refs.suggestorPopover.showPopover()
} else { } else {
this.$refs.suggestorPopover.hidePopover() // this.$refs.suggestorPopover.hidePopover()
} }
}, },
textAtCaret: async function (newWord) { textAtCaret: async function (newWord) {

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

@ -185,23 +185,21 @@
position: absolute; position: absolute;
} }
&-item { &-item.menu-item {
display: flex; display: flex;
cursor: pointer; padding-top: 0;
padding: 0.2em 0.4em; padding-bottom: 0;
height: 32px;
.image { .image {
width: 32px; width: calc(var(--__line-height) + var(--__vertical-gap) * 2);
height: 32px; height: calc(var(--__line-height) + var(--__vertical-gap) * 2);
line-height: 32px; line-height: var(--__line-height);
text-align: center; text-align: center;
font-size: 32px; margin-right: var(--__horizontal-gap);
margin-right: 4px;
img { img {
width: 32px; width: calc(var(--__line-height) + var(--__vertical-gap) * 2);
height: 32px; height: calc(var(--__line-height) + var(--__vertical-gap) * 2);
object-fit: contain; object-fit: contain;
} }
} }

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="menu-item dropdown-item" class="menu-item dropdown-item menu-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="menu-item dropdown-item" class="menu-item dropdown-item menu-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="menu-item dropdown-item" class="menu-item dropdown-item menu-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="menu-item dropdown-item" class="menu-item dropdown-item menu-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="menu-item dropdown-item" class="menu-item dropdown-item menu-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="menu-item dropdown-item" class="menu-item dropdown-item menu-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="menu-item dropdown-item" class="menu-item dropdown-item menu-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="menu-item dropdown-item" class="menu-item dropdown-item menu-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="menu-item dropdown-item" class="menu-item dropdown-item menu-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="menu-item dropdown-item" class="menu-item dropdown-item menu-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="menu-item dropdown-item" class="menu-item dropdown-item menu-item"
@click="toggleTag(tags.QUARANTINE)" @click="toggleTag(tags.QUARANTINE)"
> >
<span <span

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

@ -62,59 +62,53 @@
<script src="./navigation_entry.js"></script> <script src="./navigation_entry.js"></script>
<style lang="scss"> <style lang="scss">
@import "../../variables"; .NavigationEntry.menu-item {
--__line-height: 2.5em;
--__horizontal-gap: 0.5em;
--__vertical-gap: 0.4em;
.NavigationEntry {
display: flex;
box-sizing: border-box;
align-items: baseline;
height: 3.5em;
line-height: 3.5em;
padding: 0; padding: 0;
width: 100%; display: flex;
color: $fallback--link; align-items: baseline;
color: var(--link, $fallback--link);
&[aria-expanded] { &[aria-expanded] {
padding-right: 1em; padding-right: var(--__horizontal-gap);
}
.timelines-chevron {
margin-right: 0;
} }
.main-link { .main-link {
background: none; line-height: var(--__line-height);
border: none; box-sizing: border-box;
outline: none;
display: inline;
text-align: initial;
font-size: 100%;
font-family: inherit;
line-height: unset;
cursor: pointer;
box-sizing: content-box;
color: var(--text);
flex: 1; flex: 1;
padding: 0 1em; padding: var(--__vertical-gap) var(--__horizontal-gap);
} }
.menu-icon { .menu-icon {
color: var(--icon); line-height: var(--__line-height);
margin-right: 0.8em; padding: 0;
width: var(--__line-height);
margin-right: var(--__horizontal-gap);
}
.timelines-chevron {
line-height: var(--__line-height);
padding: 0;
width: var(--__line-height);
margin-right: 0;
} }
.extra-button { .extra-button {
width: 3em; line-height: var(--__line-height);
padding: 0;
width: var(--__line-height);
text-align: center; text-align: center;
&:last-child { &:last-child {
margin-right: -0.8em; margin-right: calc(-1 * var(--__horizontal-gap));
} }
} }
.badge { .badge {
margin: 0 0.8em; margin: 0 var(--__horizontal-gap);
} }
} }
</style> </style>

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

@ -94,26 +94,12 @@
} }
.dropdown-item { .dropdown-item {
line-height: 21px; border-bottom: none;
overflow: hidden;
display: block;
padding: 0.5em 0.75em;
clear: both;
font-weight: 400;
text-align: inherit;
white-space: nowrap;
border: none;
border-radius: 0;
background-color: transparent;
box-shadow: none;
width: 100%;
height: 100%;
box-sizing: border-box;
&-icon { &-icon {
svg { svg {
width: 22px; width: var(--__line-height);
margin-right: 0.75rem; margin-right: var(--__horizontal-gap);
} }
} }
@ -127,15 +113,15 @@
.menu-checkbox { .menu-checkbox {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
min-width: 22px; min-width: calc(var(--__line-height) + 1px);
max-width: 22px; max-width: calc(var(--__line-height) + 1px);
min-height: 22px; min-height: calc(var(--__line-height) + 1px);
max-height: 22px; max-height: calc(var(--__line-height) + 1px);
line-height: 22px; line-height: var(--__line-height);
text-align: center; text-align: center;
border-radius: 0; border-radius: 0;
box-shadow: var(--shadow); box-shadow: var(--shadow);
margin-right: 0.75em; margin-right: var(--__horizontal-gap);
&.menu-checkbox-checked::after { &.menu-checkbox-checked::after {
font-size: 1.25em; font-size: 1.25em;

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

@ -22,7 +22,7 @@
</div> </div>
</template> </template>
<template #trigger> <template #trigger>
<button class="btn button-default dropdown-item -has-submenu"> <button class="menu-item dropdown-item -has-submenu">
{{ $t('lists.manage_lists') }} {{ $t('lists.manage_lists') }}
<FAIcon <FAIcon
class="chevron-icon" class="chevron-icon"