commit: fe93717d47792eef88f4ec6200260f457d1e0bd2
parent f4d48e401abd7789968e0b3decd50fc62bd7bc29
Author: Henry Jameson <me@hjkos.com>
Date: Wed, 28 Feb 2024 01:23:43 +0200
consistent menu-items
Diffstat:
8 files changed, 92 insertions(+), 85 deletions(-)
diff --git a/src/App.scss b/src/App.scss
@@ -366,17 +366,42 @@ nav {
}
.menu-item {
+ display: block;
+ box-sizing: border-box;
border: none;
outline: none;
text-align: initial;
font-size: inherit;
font-family: inherit;
+ font-weight: 400;
cursor: pointer;
color: inherit;
+ clear: both;
position: relative;
border-bottom: 1px solid;
+ white-space: nowrap;
border-color: var(--border);
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 {
border-top-right-radius: var(--roundness);
@@ -693,6 +718,10 @@ option {
&.iconLetter {
font-size: 1.1em;
}
+
+ &.svg-inline--fa {
+ vertical-align: -0.15em;
+ }
}
.fa-old-padding {
diff --git a/src/components/account_actions/account_actions.vue b/src/components/account_actions/account_actions.vue
@@ -11,14 +11,14 @@
<template v-if="relationship.following">
<button
v-if="relationship.showing_reblogs"
- class="btn button-default dropdown-item"
+ class="dropdown-item menu-item"
@click="hideRepeats"
>
{{ $t('user_card.hide_repeats') }}
</button>
<button
v-if="!relationship.showing_reblogs"
- class="btn button-default dropdown-item"
+ class="dropdown-item menu-item"
@click="showRepeats"
>
{{ $t('user_card.show_repeats') }}
@@ -31,34 +31,34 @@
<UserListMenu :user="user" />
<button
v-if="relationship.followed_by"
- class="btn button-default btn-block dropdown-item"
+ class="dropdown-item menu-item"
@click="removeUserFromFollowers"
>
{{ $t('user_card.remove_follower') }}
</button>
<button
v-if="relationship.blocking"
- class="btn button-default btn-block dropdown-item"
+ class="dropdown-item menu-item"
@click="unblockUser"
>
{{ $t('user_card.unblock') }}
</button>
<button
v-else
- class="btn button-default btn-block dropdown-item"
+ class="dropdown-item menu-item"
@click="blockUser"
>
{{ $t('user_card.block') }}
</button>
<button
- class="btn button-default btn-block dropdown-item"
+ class="dropdown-item menu-item"
@click="reportUser"
>
{{ $t('user_card.report') }}
</button>
<button
v-if="pleromaChatMessagesAvailable"
- class="btn button-default btn-block dropdown-item"
+ class="dropdown-item menu-item"
@click="openChat"
>
{{ $t('user_card.message') }}
diff --git a/src/components/emoji_input/emoji_input.js b/src/components/emoji_input/emoji_input.js
@@ -270,7 +270,7 @@ const EmojiInput = {
if (newValue) {
this.$refs.suggestorPopover.showPopover()
} else {
- this.$refs.suggestorPopover.hidePopover()
+ // this.$refs.suggestorPopover.hidePopover()
}
},
textAtCaret: async function (newWord) {
diff --git a/src/components/emoji_input/emoji_input.vue b/src/components/emoji_input/emoji_input.vue
@@ -185,23 +185,21 @@
position: absolute;
}
- &-item {
+ &-item.menu-item {
display: flex;
- cursor: pointer;
- padding: 0.2em 0.4em;
- height: 32px;
+ padding-top: 0;
+ padding-bottom: 0;
.image {
- width: 32px;
- height: 32px;
- line-height: 32px;
+ width: calc(var(--__line-height) + var(--__vertical-gap) * 2);
+ height: calc(var(--__line-height) + var(--__vertical-gap) * 2);
+ line-height: var(--__line-height);
text-align: center;
- font-size: 32px;
- margin-right: 4px;
+ margin-right: var(--__horizontal-gap);
img {
- width: 32px;
- height: 32px;
+ width: calc(var(--__line-height) + var(--__vertical-gap) * 2);
+ height: calc(var(--__line-height) + var(--__vertical-gap) * 2);
object-fit: contain;
}
}
diff --git a/src/components/moderation_tools/moderation_tools.vue b/src/components/moderation_tools/moderation_tools.vue
@@ -12,13 +12,13 @@
<div class="dropdown-menu">
<span v-if="canGrantRole">
<button
- class="menu-item dropdown-item"
+ class="menu-item dropdown-item menu-item"
@click="toggleRight("admin")"
>
{{ $t(!!user.rights.admin ? 'user_card.admin_menu.revoke_admin' : 'user_card.admin_menu.grant_admin') }}
</button>
<button
- class="menu-item dropdown-item"
+ class="menu-item dropdown-item menu-item"
@click="toggleRight("moderator")"
>
{{ $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="menu-item dropdown-item"
+ class="menu-item dropdown-item menu-item"
@click="toggleActivationStatus()"
>
{{ $t(!!user.deactivated ? 'user_card.admin_menu.activate_account' : 'user_card.admin_menu.deactivate_account') }}
</button>
<button
v-if="canDeleteAccount"
- class="menu-item dropdown-item"
+ class="menu-item dropdown-item menu-item"
@click="deleteUserDialog(true)"
>
{{ $t('user_card.admin_menu.delete_account') }}
@@ -50,7 +50,7 @@
/>
<span v-if="canUseTagPolicy">
<button
- class="menu-item dropdown-item"
+ class="menu-item dropdown-item menu-item"
@click="toggleTag(tags.FORCE_NSFW)"
>
<span
@@ -60,7 +60,7 @@
{{ $t('user_card.admin_menu.force_nsfw') }}
</button>
<button
- class="menu-item dropdown-item"
+ class="menu-item dropdown-item menu-item"
@click="toggleTag(tags.STRIP_MEDIA)"
>
<span
@@ -70,7 +70,7 @@
{{ $t('user_card.admin_menu.strip_media') }}
</button>
<button
- class="menu-item dropdown-item"
+ class="menu-item dropdown-item menu-item"
@click="toggleTag(tags.FORCE_UNLISTED)"
>
<span
@@ -80,7 +80,7 @@
{{ $t('user_card.admin_menu.force_unlisted') }}
</button>
<button
- class="menu-item dropdown-item"
+ class="menu-item dropdown-item menu-item"
@click="toggleTag(tags.SANDBOX)"
>
<span
@@ -91,7 +91,7 @@
</button>
<button
v-if="user.is_local"
- class="menu-item dropdown-item"
+ class="menu-item dropdown-item menu-item"
@click="toggleTag(tags.DISABLE_REMOTE_SUBSCRIPTION)"
>
<span
@@ -102,7 +102,7 @@
</button>
<button
v-if="user.is_local"
- class="menu-item dropdown-item"
+ class="menu-item dropdown-item menu-item"
@click="toggleTag(tags.DISABLE_ANY_SUBSCRIPTION)"
>
<span
@@ -113,7 +113,7 @@
</button>
<button
v-if="user.is_local"
- class="menu-item dropdown-item"
+ class="menu-item dropdown-item menu-item"
@click="toggleTag(tags.QUARANTINE)"
>
<span
diff --git a/src/components/navigation/navigation_entry.vue b/src/components/navigation/navigation_entry.vue
@@ -62,59 +62,53 @@
<script src="./navigation_entry.js"></script>
<style lang="scss">
-@import "../../variables";
+.NavigationEntry.menu-item {
+ --__line-height: 2.5em;
+ --__horizontal-gap: 0.5em;
+ --__vertical-gap: 0.4em;
-.NavigationEntry {
+ padding: 0;
display: flex;
- box-sizing: border-box;
align-items: baseline;
- height: 3.5em;
- line-height: 3.5em;
- padding: 0;
- width: 100%;
- color: $fallback--link;
- color: var(--link, $fallback--link);
&[aria-expanded] {
- padding-right: 1em;
- }
-
- .timelines-chevron {
- margin-right: 0;
+ padding-right: var(--__horizontal-gap);
}
.main-link {
- background: none;
- border: none;
- 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);
+ line-height: var(--__line-height);
+ box-sizing: border-box;
flex: 1;
- padding: 0 1em;
+ padding: var(--__vertical-gap) var(--__horizontal-gap);
}
.menu-icon {
- color: var(--icon);
- margin-right: 0.8em;
+ line-height: var(--__line-height);
+ 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 {
- width: 3em;
+ line-height: var(--__line-height);
+ padding: 0;
+ width: var(--__line-height);
text-align: center;
&:last-child {
- margin-right: -0.8em;
+ margin-right: calc(-1 * var(--__horizontal-gap));
}
}
.badge {
- margin: 0 0.8em;
+ margin: 0 var(--__horizontal-gap);
}
}
</style>
diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue
@@ -94,26 +94,12 @@
}
.dropdown-item {
- line-height: 21px;
- 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;
+ border-bottom: none;
&-icon {
svg {
- width: 22px;
- margin-right: 0.75rem;
+ width: var(--__line-height);
+ margin-right: var(--__horizontal-gap);
}
}
@@ -127,15 +113,15 @@
.menu-checkbox {
display: inline-block;
vertical-align: middle;
- min-width: 22px;
- max-width: 22px;
- min-height: 22px;
- max-height: 22px;
- line-height: 22px;
+ min-width: calc(var(--__line-height) + 1px);
+ max-width: calc(var(--__line-height) + 1px);
+ min-height: calc(var(--__line-height) + 1px);
+ max-height: calc(var(--__line-height) + 1px);
+ line-height: var(--__line-height);
text-align: center;
border-radius: 0;
box-shadow: var(--shadow);
- margin-right: 0.75em;
+ margin-right: var(--__horizontal-gap);
&.menu-checkbox-checked::after {
font-size: 1.25em;
diff --git a/src/components/user_list_menu/user_list_menu.vue b/src/components/user_list_menu/user_list_menu.vue
@@ -22,7 +22,7 @@
</div>
</template>
<template #trigger>
- <button class="btn button-default dropdown-item -has-submenu">
+ <button class="menu-item dropdown-item -has-submenu">
{{ $t('lists.manage_lists') }}
<FAIcon
class="chevron-icon"
