* upstream/develop: (47 commits) #449 - fix auth token fetch issue Make select tag use --inputText as text color #444 - remote follow clean up #444 - show `remote follow` button when logged out Add button to save without cropping post-merge fixes [i18n] Update oc.json after store: fix setting postFormats field fix user-card avatar falling into permament failed state fix flake id users not fetching correctly fix console error afterStoreSetup: Move log in and theme load to afterStoreSetup. afterStoreSetup: Handle 404 cases. afterStoreSetup: Emoji and nodeinfo refactor. afterStoreSetup: refactor TOS and panel fetching, handle 404s. afterStoreSetup: refactor. Load persistedStated with async/await. whoops レインせんぱいにサンキュー fix embedded relationship card parsing ...feature/polls-attempt-2
commit
faef769b40
@ -0,0 +1,91 @@
|
|||||||
|
import PostStatusForm from '../post_status_form/post_status_form.vue'
|
||||||
|
import { throttle } from 'lodash'
|
||||||
|
|
||||||
|
const MobilePostStatusModal = {
|
||||||
|
components: {
|
||||||
|
PostStatusForm
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
hidden: false,
|
||||||
|
postFormOpen: false,
|
||||||
|
scrollingDown: false,
|
||||||
|
inputActive: false,
|
||||||
|
oldScrollPos: 0,
|
||||||
|
amountScrolled: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created () {
|
||||||
|
window.addEventListener('scroll', this.handleScroll)
|
||||||
|
window.addEventListener('resize', this.handleOSK)
|
||||||
|
},
|
||||||
|
destroyed () {
|
||||||
|
window.removeEventListener('scroll', this.handleScroll)
|
||||||
|
window.removeEventListener('resize', this.handleOSK)
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
currentUser () {
|
||||||
|
return this.$store.state.users.currentUser
|
||||||
|
},
|
||||||
|
isHidden () {
|
||||||
|
return this.hidden || this.inputActive
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
openPostForm () {
|
||||||
|
this.postFormOpen = true
|
||||||
|
this.hidden = true
|
||||||
|
|
||||||
|
const el = this.$el.querySelector('textarea')
|
||||||
|
this.$nextTick(function () {
|
||||||
|
el.focus()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
closePostForm () {
|
||||||
|
this.postFormOpen = false
|
||||||
|
this.hidden = false
|
||||||
|
},
|
||||||
|
handleOSK () {
|
||||||
|
// This is a big hack: we're guessing from changed window sizes if the
|
||||||
|
// on-screen keyboard is active or not. This is only really important
|
||||||
|
// for phones in portrait mode and it's more important to show the button
|
||||||
|
// in normal scenarios on all phones, than it is to hide it when the
|
||||||
|
// keyboard is active.
|
||||||
|
// Guesswork based on https://www.mydevice.io/#compare-devices
|
||||||
|
|
||||||
|
// for example, iphone 4 and android phones from the same time period
|
||||||
|
const smallPhone = window.innerWidth < 350
|
||||||
|
const smallPhoneKbOpen = smallPhone && window.innerHeight < 345
|
||||||
|
|
||||||
|
const biggerPhone = !smallPhone && window.innerWidth < 450
|
||||||
|
const biggerPhoneKbOpen = biggerPhone && window.innerHeight < 560
|
||||||
|
if (smallPhoneKbOpen || biggerPhoneKbOpen) {
|
||||||
|
this.inputActive = true
|
||||||
|
} else {
|
||||||
|
this.inputActive = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleScroll: throttle(function () {
|
||||||
|
const scrollAmount = window.scrollY - this.oldScrollPos
|
||||||
|
const scrollingDown = scrollAmount > 0
|
||||||
|
|
||||||
|
if (scrollingDown !== this.scrollingDown) {
|
||||||
|
this.amountScrolled = 0
|
||||||
|
this.scrollingDown = scrollingDown
|
||||||
|
if (!scrollingDown) {
|
||||||
|
this.hidden = false
|
||||||
|
}
|
||||||
|
} else if (scrollingDown) {
|
||||||
|
this.amountScrolled += scrollAmount
|
||||||
|
if (this.amountScrolled > 100 && !this.hidden) {
|
||||||
|
this.hidden = true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.oldScrollPos = window.scrollY
|
||||||
|
this.scrollingDown = scrollingDown
|
||||||
|
}, 100)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default MobilePostStatusModal
|
@ -0,0 +1,76 @@
|
|||||||
|
<template>
|
||||||
|
<div v-if="currentUser">
|
||||||
|
<div
|
||||||
|
class="post-form-modal-view modal-view"
|
||||||
|
v-show="postFormOpen"
|
||||||
|
@click="closePostForm"
|
||||||
|
>
|
||||||
|
<div class="post-form-modal-panel panel" @click.stop="">
|
||||||
|
<div class="panel-heading">{{$t('post_status.new_status')}}</div>
|
||||||
|
<PostStatusForm class="panel-body" @posted="closePostForm"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
class="new-status-button"
|
||||||
|
:class="{ 'hidden': isHidden }"
|
||||||
|
@click="openPostForm"
|
||||||
|
>
|
||||||
|
<i class="icon-edit" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script src="./mobile_post_status_modal.js"></script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
@import '../../_variables.scss';
|
||||||
|
|
||||||
|
.post-form-modal-view {
|
||||||
|
max-height: 100%;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-form-modal-panel {
|
||||||
|
flex-shrink: 0;
|
||||||
|
margin: 25% 0 4em 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.new-status-button {
|
||||||
|
width: 5em;
|
||||||
|
height: 5em;
|
||||||
|
border-radius: 100%;
|
||||||
|
position: fixed;
|
||||||
|
bottom: 1.5em;
|
||||||
|
right: 1.5em;
|
||||||
|
// TODO: this needs its own color, it has to stand out enough and link color
|
||||||
|
// is not very optimal for this particular use.
|
||||||
|
background-color: $fallback--fg;
|
||||||
|
background-color: var(--btn, $fallback--fg);
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3), 0px 4px 6px rgba(0, 0, 0, 0.3);
|
||||||
|
z-index: 10;
|
||||||
|
|
||||||
|
transition: 0.35s transform;
|
||||||
|
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
|
||||||
|
|
||||||
|
&.hidden {
|
||||||
|
transform: translateY(150%);
|
||||||
|
}
|
||||||
|
|
||||||
|
i {
|
||||||
|
font-size: 1.5em;
|
||||||
|
color: $fallback--text;
|
||||||
|
color: var(--text, $fallback--text);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media all and (min-width: 801px) {
|
||||||
|
.new-status-button {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
@ -0,0 +1,10 @@
|
|||||||
|
export default {
|
||||||
|
props: [ 'user' ],
|
||||||
|
computed: {
|
||||||
|
subscribeUrl () {
|
||||||
|
// eslint-disable-next-line no-undef
|
||||||
|
const serverUrl = new URL(this.user.statusnet_profile_url)
|
||||||
|
return `${serverUrl.protocol}//${serverUrl.host}/main/ostatus`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
@ -0,0 +1,24 @@
|
|||||||
|
<template>
|
||||||
|
<div class="remote-follow">
|
||||||
|
<form method="POST" :action='subscribeUrl'>
|
||||||
|
<input type="hidden" name="nickname" :value="user.screen_name">
|
||||||
|
<input type="hidden" name="profile" value="">
|
||||||
|
<button click="submit" class="remote-button">
|
||||||
|
{{ $t('user_card.remote_follow') }}
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script src="./remote_follow.js"></script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.remote-follow {
|
||||||
|
max-width: 220px;
|
||||||
|
|
||||||
|
.remote-button {
|
||||||
|
width: 100%;
|
||||||
|
min-height: 28px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
@ -0,0 +1,6 @@
|
|||||||
|
|
||||||
|
export const extractCommit = versionString => {
|
||||||
|
const regex = /-g(\w+)$/i
|
||||||
|
const matches = versionString.match(regex)
|
||||||
|
return matches ? matches[1] : ''
|
||||||
|
}
|
File diff suppressed because one or more lines are too long
Binary file not shown.
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 18 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Loading…
Reference in new issue