hj/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge branch 'disjointed-popovers' into shigusegubu-vue3

Browse source 
* disjointed-popovers:
  fix the incorrect rounding in nav list
  re-unfuck the timeline popover
  Revert "unify styling of timelines dropdown with other dropdown menus"
This commit is contained in:
Henry Jameson 2022-06-29 21:42:07 +03:00
commit 9e2708b4eb
3 changed files with 79 additions and 88 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/nav_panel/nav_panel.vue
View file

@ -113,7 +113,9 @@
border-color: $fallback--border; border-color: $fallback--border;
border-color: var(--border, $fallback--border); border-color: var(--border, $fallback--border);
padding: 0; padding: 0;
}
> li {
&:first-child .menu-item { &:first-child .menu-item {
border-top-right-radius: $fallback--panelRadius; border-top-right-radius: $fallback--panelRadius;
border-top-right-radius: var(--panelRadius, $fallback--panelRadius); border-top-right-radius: var(--panelRadius, $fallback--panelRadius);

46
src/components/timeline_menu/timeline_menu.vue
View file

@ -3,19 +3,17 @@
trigger="click" trigger="click"
class="TimelineMenu" class="TimelineMenu"
:class="{ 'open': isOpen }" :class="{ 'open': isOpen }"
:margin="{ left: -15, right: -200 }"
:bound-to="{ x: 'container' }" :bound-to="{ x: 'container' }"
popover-class="timeline-menu-popover-wrap" bound-to-selector=".Timeline"
popover-class="timeline-menu-popover popover-default"
@show="openMenu" @show="openMenu"
@close="() => isOpen = false" @close="() => isOpen = false"
> >
<template v-slot:content> <template v-slot:content>
<div class="timeline-menu-popover popover-default"> <TimelineMenuContent />
<TimelineMenuContent />
</div>
</template> </template>
<template v-slot:trigger> <template v-slot:trigger>
<button class="button-unstyled title timeline-menu-title"> <span class="button-unstyled title timeline-menu-title">
<span class="timeline-title">{{ timelineName() }}</span> <span class="timeline-title">{{ timelineName() }}</span>
<span> <span>
<FAIcon <FAIcon
@ -27,7 +25,7 @@
class="click-blocker" class="click-blocker"
@click="blockOpen" @click="blockOpen"
/> />
</button> </span>
</template> </template>
</Popover> </Popover>
</template> </template>
@ -38,42 +36,18 @@
@import '../../_variables.scss'; @import '../../_variables.scss';
.TimelineMenu { .TimelineMenu {
flex-shrink: 1;
margin-right: auto; margin-right: auto;
min-width: 0; min-width: 0;
width: 24rem;
.popover-trigger-button { .popover-trigger-button {
vertical-align: bottom; vertical-align: bottom;
} }
.timeline-menu-popover-wrap {
overflow: hidden;
// Match panel heading padding to line up menu with bottom of heading
margin-top: 0.6rem;
padding: 0 15px 15px 15px;
}
.timeline-menu-popover {
width: 24rem;
max-width: 100vw;
margin: 0;
font-size: 1rem;
border-top-right-radius: 0;
border-top-left-radius: 0;
transform: translateY(-100%);
transition: transform 100ms;
}
.panel::after { .panel::after {
border-top-right-radius: 0; border-top-right-radius: 0;
border-top-left-radius: 0; border-top-left-radius: 0;
} }
&.open .timeline-menu-popover {
transform: translateY(0);
}
.timeline-menu-title { .timeline-menu-title {
margin: 0; margin: 0;
cursor: pointer; cursor: pointer;
@ -108,6 +82,16 @@
box-shadow: var(--popoverShadow); box-shadow: var(--popoverShadow);
} }
}
.timeline-menu-popover {
min-width: 24rem;
max-width: 100vw;
margin-top: 0.6rem;
font-size: 1rem;
border-top-right-radius: 0;
border-top-left-radius: 0;
ul { ul {
list-style: none; list-style: none;
margin: 0; margin: 0;

119
src/components/timeline_menu/timeline_menu_content.vue
View file

@ -1,61 +1,66 @@
<template> <template>
<div class="dropdown-menu"> <ul>
<router-link <li v-if="currentUser">
v-if="currentUser" <router-link
class="dropdown-item button-default" class="menu-item"
:to="{ name: 'friends' }" :to="{ name: 'friends' }"
> >
<FAIcon <FAIcon
fixed-width fixed-width
class="fa-scale-110 fa-old-padding " class="fa-scale-110 fa-old-padding "
icon="home" icon="home"
/>{{ $t("nav.home_timeline") }} />{{ $t("nav.home_timeline") }}
</router-link> </router-link>
<router-link </li>
v-if="currentUser || !privateMode" <li v-if="currentUser || !privateMode">
class="dropdown-item button-default" <router-link
:to="{ name: 'public-timeline' }" class="menu-item"
> :to="{ name: 'public-timeline' }"
<FAIcon >
fixed-width <FAIcon
class="fa-scale-110 fa-old-padding " fixed-width
icon="users" class="fa-scale-110 fa-old-padding "
/>{{ $t("nav.public_tl") }} icon="users"
</router-link> />{{ $t("nav.public_tl") }}
<router-link </router-link>
v-if="federating && (currentUser || !privateMode)" </li>
class="dropdown-item button-default" <li v-if="federating && (currentUser || !privateMode)">
:to="{ name: 'public-external-timeline' }" <router-link
> class="menu-item"
<FAIcon :to="{ name: 'public-external-timeline' }"
fixed-width >
class="fa-scale-110 fa-old-padding " <FAIcon
icon="globe" fixed-width
/>{{ $t("nav.twkn") }} class="fa-scale-110 fa-old-padding "
</router-link> icon="globe"
<router-link />{{ $t("nav.twkn") }}
v-if="currentUser" </router-link>
class="dropdown-item button-default" </li>
:to="{ name: 'bookmarks'}" <li v-if="currentUser">
> <router-link
<FAIcon class="menu-item"
fixed-width :to="{ name: 'bookmarks'}"
class="fa-scale-110 fa-old-padding " >
icon="bookmark" <FAIcon
/>{{ $t("nav.bookmarks") }} fixed-width
</router-link> class="fa-scale-110 fa-old-padding "
<router-link icon="bookmark"
v-if="currentUser" />{{ $t("nav.bookmarks") }}
class="dropdown-item button-default" </router-link>
:to="{ name: 'dms', params: { username: currentUser.screen_name } }" </li>
> <li v-if="currentUser">
<FAIcon <router-link
fixed-width class="menu-item"
class="fa-scale-110 fa-old-padding " :to="{ name: 'dms', params: { username: currentUser.screen_name } }"
icon="envelope" >
/>{{ $t("nav.dms") }} <FAIcon
</router-link> fixed-width
</div> class="fa-scale-110 fa-old-padding "
icon="envelope"
/>{{ $t("nav.dms") }}
</router-link>
</li>
</ul>
</template> </template>
<script src="./timeline_menu_content.js" ></script> <script src="./timeline_menu_content.js" ></script>