This commit is contained in:
Henry Jameson 2022-08-12 01:27:09 +03:00
parent 7d13f38d88
commit 80600137d1
9 changed files with 94 additions and 59 deletions

View File

@ -61,7 +61,7 @@
:title="$t('nav.administration')" :title="$t('nav.administration')"
/> />
</a> </a>
<span class="spacer"/> <span class="spacer" />
<button <button
v-if="currentUser" v-if="currentUser"
class="button-unstyled nav-icon" class="button-unstyled nav-icon"

View File

@ -1,7 +1,12 @@
<template> <template>
<ul> <ul>
<NavigationEntry v-for="item in lists" :key="item.name" :show-pin="showPin" :item="item" /> <NavigationEntry
</ul> v-for="item in lists"
:key="item.name"
:show-pin="showPin"
:item="item"
/>
</ul>
</template> </template>
<script src="./lists_menu_content.js"></script> <script src="./lists_menu_content.js"></script>

View File

@ -21,7 +21,7 @@
class="alert-dot" class="alert-dot"
/> />
</button> </button>
<NavigationPins class="pins"/> <NavigationPins class="pins" />
</div> <div class="item right"> </div> <div class="item right">
<button <button
v-if="currentUser" v-if="currentUser"

View File

@ -6,7 +6,7 @@
class="panel-heading" class="panel-heading"
> >
<NavigationPins :limit="6" /> <NavigationPins :limit="6" />
<div class="spacer"/> <div class="spacer" />
<button <button
class="button-unstyled" class="button-unstyled"
@click="toggleCollapse" @click="toggleCollapse"
@ -18,7 +18,10 @@
/> />
</button> </button>
</div> </div>
<ul class="panel-body" v-if="!collapsed || forceExpand"> <ul
v-if="!collapsed || forceExpand"
class="panel-body"
>
<li v-if="currentUser || !privateMode"> <li v-if="currentUser || !privateMode">
<button <button
class="button-unstyled menu-item" class="button-unstyled menu-item"
@ -40,7 +43,12 @@
class="timelines-background" class="timelines-background"
> >
<ul class="timelines"> <ul class="timelines">
<NavigationEntry v-for="item in timelinesItems" :key="item.name" :show-pin="true" :item="item" /> <NavigationEntry
v-for="item in timelinesItems"
:key="item.name"
:show-pin="true"
:item="item"
/>
</ul> </ul>
</div> </div>
</li> </li>
@ -49,11 +57,11 @@
class="button-unstyled menu-item" class="button-unstyled menu-item"
@click="toggleLists" @click="toggleLists"
> >
<FAIcon <FAIcon
fixed-width fixed-width
class="fa-scale-110" class="fa-scale-110"
icon="list" icon="list"
/>{{ $t("nav.lists") }} />{{ $t("nav.lists") }}
<FAIcon <FAIcon
class="timelines-chevron" class="timelines-chevron"
fixed-width fixed-width
@ -74,10 +82,18 @@
v-show="showLists" v-show="showLists"
class="timelines-background" class="timelines-background"
> >
<ListsMenuContent :showPin="true" class="timelines" /> <ListsMenuContent
:show-pin="true"
class="timelines"
/>
</div> </div>
</li> </li>
<NavigationEntry v-for="item in rootItems" :key="item.name" :show-pin="true" :item="item" /> <NavigationEntry
v-for="item in rootItems"
:key="item.name"
:show-pin="true"
:item="item"
/>
</ul> </ul>
</div> </div>
</div> </div>

View File

@ -1,42 +1,42 @@
<template> <template>
<li class="NavigationEntry"> <li class="NavigationEntry">
<router-link <router-link
class="menu-item" class="menu-item"
:to="item.routeObject || { name: (currentUser || item.anon) ? item.route : item.anonRoute, params: { username: currentUser.screen_name } }" :to="item.routeObject || { name: (currentUser || item.anon) ? item.route : item.anonRoute, params: { username: currentUser.screen_name } }"
> >
<FAIcon
v-if="item.icon"
fixed-width
class="fa-scale-110"
:icon="item.icon"
/>
<span
class="icon iconLetter fa-scale-110"
v-if="item.iconLetter"
>{{ item.iconLetter }}
</span>{{ item.labelRaw || $t(item.label) }}
<button
type="button"
class="button-unstyled"
@click.stop.prevent="togglePin(item.name)"
>
<FAIcon <FAIcon
v-if="showPin && currentUser" v-if="item.icon"
fixed-width fixed-width
class="fa-scale-110" class="fa-scale-110"
:class="{ 'veryfaint': !isPinned(item.name) }" :icon="item.icon"
:transform="!isPinned(item.name) ? 'rotate-45' : ''" />
icon="thumbtack" <span
v-if="item.iconLetter"
class="icon iconLetter fa-scale-110"
>{{ item.iconLetter }}
</span>{{ item.labelRaw || $t(item.label) }}
<button
type="button"
class="button-unstyled"
@click.stop.prevent="togglePin(item.name)"
>
<FAIcon
v-if="showPin && currentUser"
fixed-width
class="fa-scale-110"
:class="{ 'veryfaint': !isPinned(item.name) }"
:transform="!isPinned(item.name) ? 'rotate-45' : ''"
icon="thumbtack"
/> />
<div <div
v-if="item.badgeGetter && getters[item.badgeGetter]" v-if="item.badgeGetter && getters[item.badgeGetter]"
class="badge badge-notification" class="badge badge-notification"
> >
{{ getters[item.badgeGetter] }} {{ getters[item.badgeGetter] }}
</div> </div>
</button> </button>
</router-link> </router-link>
</li> </li>
</template> </template>
<script src="./navigation_entry.js"></script> <script src="./navigation_entry.js"></script>

View File

@ -1,22 +1,24 @@
<template> <template>
<span class="NavigationPins"> <span class="NavigationPins">
<router-link <router-link
v-for="item in pinnedList" :key="item.name" class="pinned-item" v-for="item in pinnedList"
:key="item.name"
class="pinned-item"
:to="item.routeObject || { name: (currentUser || item.anon) ? item.route : item.anonRoute, params: { username: currentUser.screen_name } }" :to="item.routeObject || { name: (currentUser || item.anon) ? item.route : item.anonRoute, params: { username: currentUser.screen_name } }"
> >
<FAIcon <FAIcon
v-if="item.icon" v-if="item.icon"
fixed-width fixed-width
:icon="item.icon" :icon="item.icon"
/> />
<span <span
v-if="item.iconLetter" v-if="item.iconLetter"
class="iconLetter fa-scale-110 fa-old-padding" class="iconLetter fa-scale-110 fa-old-padding"
>{{ item.iconLetter }}</span> >{{ item.iconLetter }}</span>
<div <div
v-if="item.badgeGetter && getters[item.badgeGetter]" v-if="item.badgeGetter && getters[item.badgeGetter]"
class="alert-dot" class="alert-dot"
/> />
</router-link> </router-link>
</span> </span>
</template> </template>

View File

@ -47,8 +47,8 @@
class="cancel-icon fa-scale-110 fa-old-padding" class="cancel-icon fa-scale-110 fa-old-padding"
/> />
</button> </button>
<span class="spacer"/> <span class="spacer" />
<span class="spacer"/> <span class="spacer" />
</template> </template>
</div> </div>
</template> </template>

View File

@ -1,7 +1,10 @@
<template> <template>
<div :class="['Timeline', classes.root]"> <div :class="['Timeline', classes.root]">
<div :class="classes.header"> <div :class="classes.header">
<TimelineMenu v-if="!embedded" :timeline-name="timelineName"/> <TimelineMenu
v-if="!embedded"
:timeline-name="timelineName"
/>
<button <button
v-if="showLoadButton" v-if="showLoadButton"
class="button-default loadmore-button" class="button-default loadmore-button"

View File

@ -10,10 +10,19 @@
@close="() => isOpen = false" @close="() => isOpen = false"
> >
<template #content> <template #content>
<ListsMenuContent v-if="useListsMenu" :showPin="false" class="timelines" /> <ListsMenuContent
<ul v-else> v-if="useListsMenu"
<NavigationEntry v-for="item in timelinesList" :key="item.name" :show-pin="false" :item="item" /> :show-pin="false"
</ul> class="timelines"
/>
<ul v-else>
<NavigationEntry
v-for="item in timelinesList"
:key="item.name"
:show-pin="false"
:item="item"
/>
</ul>
</template> </template>
<template #trigger> <template #trigger>
<span class="button-unstyled title timeline-menu-title"> <span class="button-unstyled title timeline-menu-title">