change styles for the dropdown, make things work nicely on mobile
This commit is contained in:
parent
961099d34a
commit
21d1f557f6
13 changed files with 204 additions and 66 deletions
src
|
@ -112,7 +112,7 @@
|
|||
{{ $t("login.hint") }}
|
||||
</router-link>
|
||||
</div>
|
||||
<transition name="fade">
|
||||
<transition>
|
||||
<router-view />
|
||||
</transition>
|
||||
</div>
|
||||
|
|
|
@ -1,18 +1,30 @@
|
|||
import { mapState } from 'vuex'
|
||||
|
||||
const timelineRoutes = [
|
||||
'friends',
|
||||
'dms',
|
||||
'public-timeline',
|
||||
'public-external-timeline'
|
||||
]
|
||||
|
||||
const NavPanel = {
|
||||
created () {
|
||||
if (this.currentUser && this.currentUser.locked) {
|
||||
this.$store.dispatch('startFetchingFollowRequests')
|
||||
}
|
||||
},
|
||||
computed: mapState({
|
||||
currentUser: state => state.users.currentUser,
|
||||
chat: state => state.chat.channel,
|
||||
followRequestCount: state => state.api.followRequests.length,
|
||||
privateMode: state => state.instance.private,
|
||||
federating: state => state.instance.federating
|
||||
})
|
||||
computed: {
|
||||
onTimelineRoute () {
|
||||
return timelineRoutes.includes(this.$route.name)
|
||||
},
|
||||
...mapState({
|
||||
currentUser: state => state.users.currentUser,
|
||||
chat: state => state.chat.channel,
|
||||
followRequestCount: state => state.api.followRequests.length,
|
||||
privateMode: state => state.instance.private,
|
||||
federating: state => state.instance.federating
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
export default NavPanel
|
||||
|
|
|
@ -3,7 +3,10 @@
|
|||
<div class="panel panel-default">
|
||||
<ul>
|
||||
<li v-if="currentUser">
|
||||
<router-link :to="{ name: 'friends' }">
|
||||
<router-link
|
||||
:to="{ name: 'friends' }"
|
||||
:class="onTimelineRoute && 'router-link-active'"
|
||||
>
|
||||
<i class="button-icon icon-home-2" /> {{ $t("nav.timeline") }}
|
||||
</router-link>
|
||||
</li>
|
||||
|
|
|
@ -18,7 +18,9 @@ const Popover = {
|
|||
// Takes a x/y object and tells how many pixels to offset from
|
||||
// anchor point on either axis
|
||||
offset: Object,
|
||||
// Additional styles you may want for the popover container
|
||||
// Replaces the classes you may want for the popover container.
|
||||
// Use 'popover-default' in addition to get the default popover
|
||||
// styles with your custom class.
|
||||
popoverClass: String
|
||||
},
|
||||
data () {
|
||||
|
@ -106,7 +108,7 @@ const Popover = {
|
|||
// single translate or translate3d resulted in blurry text.
|
||||
this.styles = {
|
||||
opacity: 1,
|
||||
transform: `translateX(${Math.floor(translateX)}px) translateY(${Math.floor(translateY)}px)`
|
||||
transform: `translateX(${Math.round(translateX)}px) translateY(${Math.round(translateY)}px)`
|
||||
}
|
||||
},
|
||||
showPopover () {
|
||||
|
|
|
@ -14,7 +14,7 @@
|
|||
ref="content"
|
||||
:style="styles"
|
||||
class="popover"
|
||||
:class="popoverClass"
|
||||
:class="popoverClass || 'popover-default'"
|
||||
>
|
||||
<slot
|
||||
name="content"
|
||||
|
@ -34,6 +34,9 @@
|
|||
z-index: 8;
|
||||
position: absolute;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.popover-default {
|
||||
transition: opacity 0.3s;
|
||||
|
||||
box-shadow: 1px 1px 4px rgba(0,0,0,.6);
|
||||
|
|
|
@ -39,24 +39,6 @@
|
|||
<i class="button-icon icon-login" /> {{ $t("login.login") }}
|
||||
</router-link>
|
||||
</li>
|
||||
<li
|
||||
v-if="currentUser"
|
||||
@click="toggleDrawer"
|
||||
>
|
||||
<router-link :to="{ name: 'dms', params: { username: currentUser.screen_name } }">
|
||||
<i class="button-icon icon-mail-alt" /> {{ $t("nav.dms") }}
|
||||
</router-link>
|
||||
</li>
|
||||
<li
|
||||
v-if="currentUser"
|
||||
@click="toggleDrawer"
|
||||
>
|
||||
<router-link :to="{ name: 'interactions', params: { username: currentUser.screen_name } }">
|
||||
<i class="button-icon icon-bell-alt" /> {{ $t("nav.interactions") }}
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li
|
||||
v-if="currentUser"
|
||||
@click="toggleDrawer"
|
||||
|
@ -66,7 +48,22 @@
|
|||
</router-link>
|
||||
</li>
|
||||
<li
|
||||
v-if="currentUser && currentUser.locked"
|
||||
v-else
|
||||
@click="toggleDrawer"
|
||||
>
|
||||
<router-link :to="{ name: 'public-timeline' }">
|
||||
<i class="button-icon icon-users" /> {{ $t("nav.public_tl") }}
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
<ul v-if="currentUser">
|
||||
<li @click="toggleDrawer">
|
||||
<router-link :to="{ name: 'interactions', params: { username: currentUser.screen_name } }">
|
||||
<i class="button-icon icon-bell-alt" /> {{ $t("nav.interactions") }}
|
||||
</router-link>
|
||||
</li>
|
||||
<li
|
||||
v-if="currentUser.locked"
|
||||
@click="toggleDrawer"
|
||||
>
|
||||
<router-link to="/friend-requests">
|
||||
|
@ -80,23 +77,7 @@
|
|||
</router-link>
|
||||
</li>
|
||||
<li
|
||||
v-if="currentUser || !privateMode"
|
||||
@click="toggleDrawer"
|
||||
>
|
||||
<router-link to="/main/public">
|
||||
<i class="button-icon icon-users" /> {{ $t("nav.public_tl") }}
|
||||
</router-link>
|
||||
</li>
|
||||
<li
|
||||
v-if="federating && (currentUser || !privateMode)"
|
||||
@click="toggleDrawer"
|
||||
>
|
||||
<router-link to="/main/all">
|
||||
<i class="button-icon icon-globe" /> {{ $t("nav.twkn") }}
|
||||
</router-link>
|
||||
</li>
|
||||
<li
|
||||
v-if="currentUser && chat"
|
||||
v-if="chat"
|
||||
@click="toggleDrawer"
|
||||
>
|
||||
<router-link :to="{ name: 'chat' }">
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<Popover
|
||||
trigger="hover"
|
||||
popover-class="status-popover"
|
||||
popover-class="popover-default status-popover"
|
||||
:bound-to="{ x: 'container' }"
|
||||
@show="enter"
|
||||
>
|
||||
|
|
|
@ -104,4 +104,15 @@
|
|||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-heading {
|
||||
max-width: 100%;
|
||||
flex-wrap: nowrap;
|
||||
.loadmore-button {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.loadmore-text {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -5,11 +5,25 @@ const TimelineMenu = {
|
|||
components: {
|
||||
Popover
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
isOpen: false
|
||||
}
|
||||
},
|
||||
created () {
|
||||
if (this.currentUser && this.currentUser.locked) {
|
||||
this.$store.dispatch('startFetchingFollowRequests')
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
openMenu () {
|
||||
// Tried using $nextTick, but the animation wouldn't
|
||||
// play, I assume it played too quickly
|
||||
setTimeout(() => {
|
||||
this.isOpen = true
|
||||
}, 1)
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
currentUser: state => state.users.currentUser,
|
||||
|
|
|
@ -2,28 +2,36 @@
|
|||
<Popover
|
||||
trigger="click"
|
||||
class="timeline-menu"
|
||||
popover-class="nav-panel timeline-menu-popover"
|
||||
:class="{ 'open': isOpen }"
|
||||
:margin="{ left: -15, right: -200 }"
|
||||
:bound-to="{ x: 'container' }"
|
||||
popover-class="timeline-menu-popover-wrap"
|
||||
@show="openMenu"
|
||||
@close="() => isOpen = false"
|
||||
>
|
||||
<div slot="content">
|
||||
<div
|
||||
slot="content"
|
||||
class="timeline-menu-popover panel panel-default"
|
||||
>
|
||||
<ul>
|
||||
<li v-if="currentUser">
|
||||
<router-link :to="{ name: 'friends' }">
|
||||
<i class="button-icon icon-home-2" /> {{ $t("nav.timeline") }}
|
||||
<i class="button-icon icon-home-2" />{{ $t("nav.timeline") }}
|
||||
</router-link>
|
||||
</li>
|
||||
<li v-if="currentUser">
|
||||
<router-link :to="{ name: 'dms', params: { username: currentUser.screen_name } }">
|
||||
<i class="button-icon icon-mail-alt" /> {{ $t("nav.dms") }}
|
||||
<i class="button-icon icon-mail-alt" />{{ $t("nav.dms") }}
|
||||
</router-link>
|
||||
</li>
|
||||
<li v-if="currentUser || !privateMode">
|
||||
<router-link :to="{ name: 'public-timeline' }">
|
||||
<i class="button-icon icon-users" /> {{ $t("nav.public_tl") }}
|
||||
<i class="button-icon icon-users" />{{ $t("nav.public_tl") }}
|
||||
</router-link>
|
||||
</li>
|
||||
<li v-if="federating && (currentUser || !privateMode)">
|
||||
<router-link :to="{ name: 'public-external-timeline' }">
|
||||
<i class="button-icon icon-globe" /> {{ $t("nav.twkn") }}
|
||||
<i class="button-icon icon-globe" />{{ $t("nav.twkn") }}
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
|
@ -32,7 +40,7 @@
|
|||
slot="trigger"
|
||||
class="title timeline-menu-title"
|
||||
>
|
||||
{{ timelineNamesForRoute[$route.name] }}
|
||||
<span>{{ timelineNamesForRoute[$route.name] }}</span>
|
||||
<i class="icon-down-open" />
|
||||
</div>
|
||||
</Popover>
|
||||
|
@ -44,18 +52,122 @@
|
|||
@import '../../_variables.scss';
|
||||
|
||||
.timeline-menu {
|
||||
flex-grow: 1;
|
||||
.timeline-menu-popover {
|
||||
width: 20rem;
|
||||
font-size: 1rem;
|
||||
margin-left: -0.6em;
|
||||
flex-shrink: 1;
|
||||
margin-right: auto;
|
||||
min-width: 0;
|
||||
width: 24rem;
|
||||
.timeline-menu-popover-wrap {
|
||||
overflow: hidden;
|
||||
margin-top: 0.6em;
|
||||
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 {
|
||||
border-top-right-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
&.open .timeline-menu-popover {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.timeline-menu-title {
|
||||
flex-grow: 0;
|
||||
width: 20rem;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
user-select: none;
|
||||
width: 100%;
|
||||
|
||||
span {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
i {
|
||||
margin-left: 0.6em;
|
||||
flex-shrink: 0;
|
||||
font-size: 1rem;
|
||||
transition: transform 100ms;
|
||||
}
|
||||
}
|
||||
|
||||
&.open .timeline-menu-title i {
|
||||
color: $fallback--text;
|
||||
color: var(--panelText, $fallback--text);
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.panel {
|
||||
box-shadow: var(--popoverShadow);
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
border-bottom: 1px solid;
|
||||
border-color: $fallback--border;
|
||||
border-color: var(--border, $fallback--border);
|
||||
padding: 0;
|
||||
|
||||
&:last-child a {
|
||||
border-bottom-right-radius: $fallback--panelRadius;
|
||||
border-bottom-right-radius: var(--panelRadius, $fallback--panelRadius);
|
||||
border-bottom-left-radius: $fallback--panelRadius;
|
||||
border-bottom-left-radius: var(--panelRadius, $fallback--panelRadius);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border: none;
|
||||
}
|
||||
|
||||
i {
|
||||
margin: 0 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
padding: 0.6em 0;
|
||||
|
||||
&:hover {
|
||||
background-color: $fallback--lightBg;
|
||||
background-color: var(--selectedMenu, $fallback--lightBg);
|
||||
color: $fallback--link;
|
||||
color: var(--selectedMenuText, $fallback--link);
|
||||
--faint: var(--selectedMenuFaintText, $fallback--faint);
|
||||
--faintLink: var(--selectedMenuFaintLink, $fallback--faint);
|
||||
--lightText: var(--selectedMenuLightText, $fallback--lightText);
|
||||
--icon: var(--selectedMenuIcon, $fallback--icon);
|
||||
}
|
||||
|
||||
&.router-link-active {
|
||||
font-weight: bolder;
|
||||
background-color: $fallback--lightBg;
|
||||
background-color: var(--selectedMenu, $fallback--lightBg);
|
||||
color: $fallback--text;
|
||||
color: var(--selectedMenuText, $fallback--text);
|
||||
--faint: var(--selectedMenuFaintText, $fallback--faint);
|
||||
--faintLink: var(--selectedMenuFaintLink, $fallback--faint);
|
||||
--lightText: var(--selectedMenuLightText, $fallback--lightText);
|
||||
--icon: var(--selectedMenuIcon, $fallback--icon);
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -58,7 +58,7 @@
|
|||
"dms": "Direktnachrichten",
|
||||
"public_tl": "Öffentliche Zeitleiste",
|
||||
"timeline": "Zeitleiste",
|
||||
"twkn": "Das gesamte bekannte Netzwerk",
|
||||
"twkn": "Bekannte Netzwerk",
|
||||
"user_search": "Benutzersuche",
|
||||
"search": "Suche",
|
||||
"preferences": "Voreinstellungen",
|
||||
|
|
|
@ -119,7 +119,7 @@
|
|||
"dms": "Direct Messages",
|
||||
"public_tl": "Public Timeline",
|
||||
"timeline": "Timeline",
|
||||
"twkn": "The Whole Known Network",
|
||||
"twkn": "Known Fediverse",
|
||||
"user_search": "User Search",
|
||||
"search": "Search",
|
||||
"who_to_follow": "Who to follow",
|
||||
|
|
|
@ -58,7 +58,7 @@
|
|||
"dms": "Yksityisviestit",
|
||||
"public_tl": "Julkinen Aikajana",
|
||||
"timeline": "Aikajana",
|
||||
"twkn": "Koko Tunnettu Verkosto",
|
||||
"twkn": "Tunnettu Verkosto",
|
||||
"user_search": "Käyttäjähaku",
|
||||
"who_to_follow": "Seurausehdotukset",
|
||||
"preferences": "Asetukset",
|
||||
|
|
Loading…
Reference in a new issue