...
 
Commits (17)
......@@ -8,7 +8,7 @@ import WhoToFollowPanel from './components/who_to_follow_panel/who_to_follow_pan
import ChatPanel from './components/chat_panel/chat_panel.vue'
import MediaModal from './components/media_modal/media_modal.vue'
import SideDrawer from './components/side_drawer/side_drawer.vue'
import MobilePostStatusButton from './components/mobile_post_status_button/mobile_post_status_button.vue'
import FloatingPostButton from './components/floating_post_button/floating_post_button.vue'
import MobileNav from './components/mobile_nav/mobile_nav.vue'
import UserReportingModal from './components/user_reporting_modal/user_reporting_modal.vue'
import PostStatusModal from './components/post_status_modal/post_status_modal.vue'
......@@ -27,7 +27,7 @@ export default {
ChatPanel,
MediaModal,
SideDrawer,
MobilePostStatusButton,
FloatingPostButton,
MobileNav,
UserReportingModal,
PostStatusModal
......
......@@ -118,7 +118,7 @@
:floating="true"
class="floating-chat mobile-hidden"
/>
<MobilePostStatusButton />
<FloatingPostButton v-if="currentUser && isMobileLayout" />
<UserReportingModal />
<PostStatusModal />
<portal-target name="modal" />
......
import { debounce } from 'lodash'
import 'javascript-detect-element-resize'
const MobilePostStatusButton = {
// NOTE: We use the hard-coded boundingClientRect obj of the button at the moment
// since the button moves vertically and it makes difficult to determine the boundingClientRect
const buttonRect = {
bottom: -21, // Can get the actual bottom value by adding window.innerHeight
right: -21, // Can get the actual right value by adding window.innerWidth
height: 70,
width: 70
}
const FloatingPostButton = {
data () {
return {
hidden: false,
scrollingDown: false,
inputActive: false,
oldScrollPos: 0,
amountScrolled: 0
hoverInlineReply: false,
oldScrollPos: 0
}
},
created () {
if (this.autohideFloatingPostButton) {
this.activateFloatingPostButtonAutohide()
}
window.addEventListener('resize', this.handleOSK)
},
destroyed () {
if (this.autohideFloatingPostButton) {
this.deactivateFloatingPostButtonAutohide()
}
window.removeEventListener('resize', this.handleOSK)
},
computed: {
isLoggedIn () {
return !!this.$store.state.users.currentUser
},
isHidden () {
return this.autohideFloatingPostButton && (this.hidden || this.inputActive)
return this.autohideFloatingPostButton && (this.scrollingDown || this.inputActive || this.hoverInlineReply)
},
autohideFloatingPostButton () {
return !!this.$store.getters.mergedConfig.autohideFloatingPostButton
},
postStatusForms () {
return this.$store.state.interface.postStatusForms
}
},
watch: {
......@@ -46,10 +53,14 @@ const MobilePostStatusButton = {
activateFloatingPostButtonAutohide () {
window.addEventListener('scroll', this.handleScrollStart)
window.addEventListener('scroll', this.handleScrollEnd)
window.addEventListener('resize', this.handleResize)
window.addResizeListener(document.body, this.checkHoverInlineReply)
},
deactivateFloatingPostButtonAutohide () {
window.removeEventListener('scroll', this.handleScrollStart)
window.removeEventListener('scroll', this.handleScrollEnd)
window.removeEventListener('resize', this.handleResize)
window.removeResizeListener(document.body, this.checkHoverInlineReply)
},
openPostForm () {
this.$store.dispatch('openPostStatusModal')
......@@ -74,20 +85,36 @@ const MobilePostStatusButton = {
this.inputActive = false
}
},
checkHoverInlineReply () {
this.hoverInlineReply = this.postStatusForms.some(form => {
const rect = form.getBoundingClientRect()
return rect.bottom > window.innerHeight + buttonRect.bottom - buttonRect.height &&
rect.right > window.innerWidth + buttonRect.right - buttonRect.width &&
rect.bottom - rect.height < window.innerHeight + buttonRect.bottom &&
rect.right - rect.width < window.innerWidth + buttonRect.right
})
},
handleScrollStart: debounce(function () {
if (window.scrollY > this.oldScrollPos) {
this.hidden = true
this.scrollingDown = true
} else {
this.hidden = false
this.scrollingDown = false
}
this.oldScrollPos = window.scrollY
}, 100, { leading: true, trailing: false }),
handleScrollEnd: debounce(function () {
this.hidden = false
this.scrollingDown = false
this.oldScrollPos = window.scrollY
}, 100, { leading: false, trailing: true })
this.checkHoverInlineReply()
}, 100, { leading: false, trailing: true }),
handleResize: debounce(function () {
this.handleOSK()
this.checkHoverInlineReply()
}, 100)
}
}
export default MobilePostStatusButton
export default FloatingPostButton
<template>
<div v-if="isLoggedIn">
<button
class="new-status-button"
:class="{ 'hidden': isHidden }"
@click="openPostForm"
>
<i class="icon-edit" />
</button>
</div>
<button
class="floating-post-button"
:class="{ 'hidden': isHidden }"
@click="openPostForm"
>
<i class="icon-edit" />
</button>
</template>
<script src="./mobile_post_status_button.js"></script>
<script src="./floating_post_button.js"></script>
<style lang="scss">
@import '../../_variables.scss';
.new-status-button {
.floating-post-button {
width: 5em;
height: 5em;
border-radius: 100%;
......@@ -46,10 +44,4 @@
}
}
@media all and (min-width: 801px) {
.new-status-button {
display: none;
}
}
</style>
......@@ -4,22 +4,22 @@
<ul>
<li v-if="currentUser">
<router-link :to="{ name: 'friends' }">
{{ $t("nav.timeline") }}
<i class="button-icon icon-home-2" /> {{ $t("nav.timeline") }}
</router-link>
</li>
<li v-if="currentUser">
<router-link :to="{ name: 'interactions', params: { username: currentUser.screen_name } }">
{{ $t("nav.interactions") }}
<i class="button-icon icon-bell-alt" /> {{ $t("nav.interactions") }}
</router-link>
</li>
<li v-if="currentUser">
<router-link :to="{ name: 'dms', params: { username: currentUser.screen_name } }">
{{ $t("nav.dms") }}
<i class="button-icon icon-mail-alt" /> {{ $t("nav.dms") }}
</router-link>
</li>
<li v-if="currentUser && currentUser.locked">
<router-link :to="{ name: 'friend-requests' }">
{{ $t("nav.friend_requests") }}
<i class="button-icon icon-user-plus" /> {{ $t("nav.friend_requests") }}
<span
v-if="followRequestCount > 0"
class="badge follow-request-count"
......@@ -30,17 +30,17 @@
</li>
<li>
<router-link :to="{ name: 'public-timeline' }">
{{ $t("nav.public_tl") }}
<i class="button-icon icon-users" /> {{ $t("nav.public_tl") }}
</router-link>
</li>
<li>
<router-link :to="{ name: 'public-external-timeline' }">
{{ $t("nav.twkn") }}
<i class="button-icon icon-globe" /> {{ $t("nav.twkn") }}
</router-link>
</li>
<li>
<router-link :to="{ name: 'about' }">
{{ $t("nav.about") }}
<i class="button-icon icon-info-circled" /> {{ $t("nav.about") }}
</router-link>
</li>
</ul>
......@@ -113,4 +113,8 @@
}
}
}
.nav-panel .button-icon:before {
width: 1.1em;
}
</style>
......@@ -48,6 +48,11 @@ const PostStatusForm = {
if (this.replyTo) {
this.$refs.textarea.focus()
}
this.$store.dispatch('addNewPostStatusForm', this)
},
beforeDestroy () {
this.$store.dispatch('removePostStatusForm', this)
},
data () {
const preset = this.$route.query.message
......@@ -374,6 +379,9 @@ const PostStatusForm = {
},
dismissScopeNotice () {
this.$store.dispatch('setOption', { name: 'hideScopeNotice', value: true })
},
getBoundingClientRect () {
return this.$refs.root.getBoundingClientRect()
}
}
}
......
......@@ -36,7 +36,7 @@
@click="toggleDrawer"
>
<router-link :to="{ name: 'login' }">
{{ $t("login.login") }}
<i class="button-icon icon-login" /> {{ $t("login.login") }}
</router-link>
</li>
<li
......@@ -44,7 +44,7 @@
@click="toggleDrawer"
>
<router-link :to="{ name: 'dms', params: { username: currentUser.screen_name } }">
{{ $t("nav.dms") }}
<i class="button-icon icon-mail-alt" /> {{ $t("nav.dms") }}
</router-link>
</li>
<li
......@@ -52,7 +52,7 @@
@click="toggleDrawer"
>
<router-link :to="{ name: 'interactions', params: { username: currentUser.screen_name } }">
{{ $t("nav.interactions") }}
<i class="button-icon icon-bell-alt" /> {{ $t("nav.interactions") }}
</router-link>
</li>
</ul>
......@@ -62,7 +62,7 @@
@click="toggleDrawer"
>
<router-link :to="{ name: 'friends' }">
{{ $t("nav.timeline") }}
<i class="button-icon icon-home-2" /> {{ $t("nav.timeline") }}
</router-link>
</li>
<li
......@@ -70,7 +70,7 @@
@click="toggleDrawer"
>
<router-link to="/friend-requests">
{{ $t("nav.friend_requests") }}
<i class="button-icon icon-user-plus" /> {{ $t("nav.friend_requests") }}
<span
v-if="followRequestCount > 0"
class="badge follow-request-count"
......@@ -81,12 +81,12 @@
</li>
<li @click="toggleDrawer">
<router-link to="/main/public">
{{ $t("nav.public_tl") }}
<i class="button-icon icon-users" /> {{ $t("nav.public_tl") }}
</router-link>
</li>
<li @click="toggleDrawer">
<router-link to="/main/all">
{{ $t("nav.twkn") }}
<i class="button-icon icon-globe" /> {{ $t("nav.twkn") }}
</router-link>
</li>
<li
......@@ -94,14 +94,14 @@
@click="toggleDrawer"
>
<router-link :to="{ name: 'chat' }">
{{ $t("nav.chat") }}
<i class="button-icon icon-chat" /> {{ $t("nav.chat") }}
</router-link>
</li>
</ul>
<ul>
<li @click="toggleDrawer">
<router-link :to="{ name: 'search' }">
{{ $t("nav.search") }}
<i class="button-icon icon-search" /> {{ $t("nav.search") }}
</router-link>
</li>
<li
......@@ -109,17 +109,17 @@
@click="toggleDrawer"
>
<router-link :to="{ name: 'who-to-follow' }">
{{ $t("nav.who_to_follow") }}
<i class="button-icon icon-user-plus" /> {{ $t("nav.who_to_follow") }}
</router-link>
</li>
<li @click="toggleDrawer">
<router-link :to="{ name: 'settings' }">
{{ $t("settings.settings") }}
<i class="button-icon icon-cog" /> {{ $t("settings.settings") }}
</router-link>
</li>
<li @click="toggleDrawer">
<router-link :to="{ name: 'about'}">
{{ $t("nav.about") }}
<i class="button-icon icon-info-circled" /> {{ $t("nav.about") }}
</router-link>
</li>
<li
......@@ -130,7 +130,7 @@
href="/pleroma/admin/#/login-pleroma"
target="_blank"
>
{{ $t("nav.administration") }}
<i class="button-icon icon-gauge" /> {{ $t("nav.administration") }}
</a>
</li>
<li
......@@ -141,7 +141,7 @@
href="#"
@click="doLogout"
>
{{ $t("login.logout") }}
<i class="button-icon icon-logout" /> {{ $t("login.logout") }}
</a>
</li>
</ul>
......@@ -215,6 +215,10 @@
box-shadow: var(--panelShadow);
background-color: $fallback--bg;
background-color: var(--bg, $fallback--bg);
.button-icon:before {
width: 1.1em;
}
}
.side-drawer-logo-wrapper {
......
......@@ -12,7 +12,8 @@ const defaultState = {
window.CSS.supports('-webkit-filter', 'drop-shadow(0 0)')
)
},
mobileLayout: false
mobileLayout: false,
postStatusForms: []
}
const interfaceMod = {
......@@ -35,6 +36,12 @@ const interfaceMod = {
},
setMobileLayout (state, value) {
state.mobileLayout = value
},
addNewPostStatusForm (state, instance) {
state.postStatusForms.push(instance)
},
removePostStatusForm (state, instance) {
del(state.postStatusForms, state.postStatusForms.indexOf(instance))
}
},
actions: {
......@@ -49,6 +56,12 @@ const interfaceMod = {
},
setMobileLayout ({ commit }, value) {
commit('setMobileLayout', value)
},
addNewPostStatusForm ({ commit }, instance) {
commit('addNewPostStatusForm', instance)
},
removePostStatusForm ({ commit }, instance) {
commit('removePostStatusForm', instance)
}
}
}
......
......@@ -303,6 +303,36 @@
"css": "gauge",
"code": 61668,
"src": "fontawesome"
},
{
"uid": "31972e4e9d080eaa796290349ae6c1fd",
"css": "users",
"code": 59421,
"src": "fontawesome"
},
{
"uid": "e82cedfa1d5f15b00c5a81c9bd731ea2",
"css": "info-circled",
"code": 59423,
"src": "fontawesome"
},
{
"uid": "w3nzesrlbezu6f30q7ytyq919p6gdlb6",
"css": "home-2",
"code": 59425,
"src": "typicons"
},
{
"uid": "dcedf50ab1ede3283d7a6c70e2fe32f3",
"css": "chat",
"code": 59422,
"src": "fontawesome"
},
{
"uid": "3a00327e61b997b58518bd43ed83c3df",
"css": "login",
"code": 59424,
"src": "fontawesome"
}
]
}
\ No newline at end of file
......@@ -4103,6 +4103,11 @@ istanbul@0.4.5, istanbul@^0.4.0:
which "^1.1.1"
wordwrap "^1.0.0"
javascript-detect-element-resize@^0.5.3:
version "0.5.3"
resolved "https://registry.yarnpkg.com/javascript-detect-element-resize/-/javascript-detect-element-resize-0.5.3.tgz#1a71cd51dfe565907f299012fe73a294104025de"
integrity sha1-GnHNUd/lZZB/KZAS/nOilBBAJd4=
js-base64@^2.1.9:
version "2.5.0"
resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.5.0.tgz#42255ba183ab67ce59a0dee640afdc00ab5ae93e"
......