timeline panel nav #131
5 changed files with 84 additions and 165 deletions
|
|
@ -19,7 +19,7 @@
|
|||
"@babel/runtime": "7.17.8",
|
||||
"@chenfengyuan/vue-qrcode": "2.0.0",
|
||||
"@fortawesome/fontawesome-svg-core": "1.3.0",
|
||||
"@fortawesome/free-regular-svg-icons": "5.15.4",
|
||||
"@fortawesome/free-regular-svg-icons": "^6.1.2",
|
||||
"@fortawesome/free-solid-svg-icons": "5.15.4",
|
||||
"@fortawesome/vue-fontawesome": "3.0.1",
|
||||
"@kazvmoe-infra/pinch-zoom-element": "1.2.0",
|
||||
|
|
|
|||
|
|
@ -64,7 +64,9 @@ const TimelineMenu = {
|
|||
}
|
||||
const i18nkey = timelineNames()[this.$route.name]
|
||||
return i18nkey ? this.$t(i18nkey) : route
|
||||
}
|
||||
},
|
||||
currentUser () { return this.$store.state.users.currentUser },
|
||||
privateMode () { return this.$store.state.instance.private }
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,35 +1,56 @@
|
|||
<template>
|
||||
<Popover
|
||||
trigger="click"
|
||||
class="TimelineMenu"
|
||||
:class="{ 'open': isOpen }"
|
||||
:margin="{ left: -15, right: -200 }"
|
||||
:bound-to="{ x: 'container' }"
|
||||
popover-class="timeline-menu-popover-wrap"
|
||||
@show="openMenu"
|
||||
@close="() => isOpen = false"
|
||||
<div
|
||||
v-if="currentUser || !privateMode"
|
||||
class="nav-items"
|
||||
>
|
||||
<template v-slot:content>
|
||||
<div class="timeline-menu-popover popover-default">
|
||||
<TimelineMenuContent />
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot:trigger>
|
||||
<button class="button-unstyled title timeline-menu-title">
|
||||
<span class="timeline-title">{{ timelineName() }}</span>
|
||||
<span>
|
||||
<FAIcon
|
||||
size="sm"
|
||||
icon="chevron-down"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="click-blocker"
|
||||
@click="blockOpen"
|
||||
/>
|
||||
</button>
|
||||
</template>
|
||||
</Popover>
|
||||
<router-link
|
||||
v-if="currentUser"
|
||||
:to="{ name: 'friends' }"
|
||||
class="nav-icon"
|
||||
>
|
||||
<FAIcon
|
||||
fixed-width
|
||||
class="fa-scale-110 fa-old-padding"
|
||||
icon="home"
|
||||
:title="$t('nav.home_timeline_description')"
|
||||
/>
|
||||
</router-link>
|
||||
<router-link
|
||||
:to="{ name: 'public-timeline' }"
|
||||
class="nav-icon"
|
||||
>
|
||||
<FAIcon
|
||||
fixed-width
|
||||
class="fa-scale-110 fa-old-padding"
|
||||
icon="users"
|
||||
:title="$t('nav.public_timeline_description')"
|
||||
/>
|
||||
</router-link>
|
||||
<router-link
|
||||
:to="{ name: 'public-external-timeline' }"
|
||||
class="nav-icon"
|
||||
>
|
||||
<FAIcon
|
||||
fixed-width
|
||||
class="fa-scale-110 fa-old-padding"
|
||||
icon="globe"
|
||||
:title="$t('nav.twkn_timeline_description')"
|
||||
/>
|
||||
</router-link>
|
||||
<router-link
|
||||
v-if="currentUser"
|
||||
:to="{ name: 'bubble-timeline' }"
|
||||
class="nav-icon"
|
||||
>
|
||||
<FAIcon
|
||||
fixed-width
|
||||
class="fa-scale-110 fa-old-padding"
|
||||
:icon="['far', 'circle']"
|
||||
:title="$t('nav.bubble_timeline_description')"
|
||||
/>
|
||||
</router-link>
|
||||
<span class="timeline-title">{{ timelineName() }}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script src="./timeline_menu.js" ></script>
|
||||
|
|
@ -37,138 +58,30 @@
|
|||
<style lang="scss">
|
||||
@import '../../_variables.scss';
|
||||
|
||||
.TimelineMenu {
|
||||
flex-shrink: 1;
|
||||
margin-right: auto;
|
||||
min-width: 0;
|
||||
width: 24rem;
|
||||
.nav-icon {
|
||||
margin-left: 0.7em;
|
||||
width: 2em;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
|
||||
.popover-trigger-button {
|
||||
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 {
|
||||
border-top-right-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
|
||||
&.open .timeline-menu-popover {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.timeline-menu-title {
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
|
||||
.timeline-menu-name {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
svg {
|
||||
margin-left: 0.6em;
|
||||
transition: transform 100ms;
|
||||
}
|
||||
|
||||
.click-blocker {
|
||||
cursor: default;
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.open .timeline-menu-title svg {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
padding: 0.6em 0.65em;
|
||||
padding-bottom: 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 {
|
||||
&.router-link-active {
|
||||
border-bottom: 2px solid var(--selectedMenuText, $fallback--text);
|
||||
padding-bottom: 0.8em;
|
||||
.svg-inline--fa {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
margin-right: 0.4em;
|
||||
margin-left: -0.2em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-title {
|
||||
margin-left: 1em;
|
||||
font-size: 1.2em;
|
||||
font-weight: bold;
|
||||
color: var(--selectedMenuText, $fallback--text);
|
||||
color: var(--selectedMenuText, $fallback--text);
|
||||
--lightText: var(--selectedMenuLightText, $fallback--lightText);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -5,10 +5,9 @@ import {
|
|||
faGlobe,
|
||||
faBookmark,
|
||||
faEnvelope,
|
||||
faHome,
|
||||
faCircle
|
||||
faHome
|
||||
} from '@fortawesome/free-solid-svg-icons'
|
||||
|
||||
import { faCircle } from '@fortawesome/free-regular-svg-icons'
|
||||
library.add(
|
||||
faUsers,
|
||||
faGlobe,
|
||||
|
|
|
|||
15
yarn.lock
15
yarn.lock
|
|
@ -1085,6 +1085,11 @@
|
|||
minimatch "^3.1.2"
|
||||
strip-json-comments "^3.1.1"
|
||||
|
||||
"@fortawesome/fontawesome-common-types@6.1.2":
|
||||
version "6.1.2"
|
||||
resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.1.2.tgz#c1095b1bbabf19f37f9ff0719db38d92a410bcfe"
|
||||
integrity sha512-wBaAPGz1Awxg05e0PBRkDRuTsy4B3dpBm+zreTTyd9TH4uUM27cAL4xWyWR0rLJCrRwzVsQ4hF3FvM6rqydKPA==
|
||||
|
||||
"@fortawesome/fontawesome-common-types@^0.2.36":
|
||||
version "0.2.36"
|
||||
resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.36.tgz#b44e52db3b6b20523e0c57ef8c42d315532cb903"
|
||||
|
|
@ -1102,12 +1107,12 @@
|
|||
dependencies:
|
||||
"@fortawesome/fontawesome-common-types" "^0.3.0"
|
||||
|
||||
"@fortawesome/free-regular-svg-icons@5.15.4":
|
||||
version "5.15.4"
|
||||
resolved "https://registry.yarnpkg.com/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-5.15.4.tgz#b97edab436954333bbeac09cfc40c6a951081a02"
|
||||
integrity sha512-9VNNnU3CXHy9XednJ3wzQp6SwNwT3XaM26oS4Rp391GsxVYA+0oDR2J194YCIWf7jNRCYKjUCOduxdceLrx+xw==
|
||||
"@fortawesome/free-regular-svg-icons@^6.1.2":
|
||||
version "6.1.2"
|
||||
resolved "https://registry.yarnpkg.com/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.1.2.tgz#9f04009098addcc11d0d185126f058ed042c3099"
|
||||
integrity sha512-xR4hA+tAwsaTHGfb+25H1gVU/aJ0Rzu+xIUfnyrhaL13yNQ7TWiI2RvzniAaB+VGHDU2a+Pk96Ve+pkN3/+TTQ==
|
||||
dependencies:
|
||||
"@fortawesome/fontawesome-common-types" "^0.2.36"
|
||||
"@fortawesome/fontawesome-common-types" "6.1.2"
|
||||
|
||||
"@fortawesome/free-solid-svg-icons@5.15.4":
|
||||
version "5.15.4"
|
||||
|
|
|
|||
Loading…
Reference in a new issue