moon
/
pleroma-fe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

review fixes, clarify code

This commit is contained in:
shpuld 2019-03-04 19:32:12 +02:00
parent a41e19a653
commit 716dbb186c
2 changed files with 19 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/mobile_post_status_modal/mobile_post_status_modal.js
View File

@ -7,10 +7,10 @@ const MobilePostStatusModal = {
}, },
data () { data () {
return { return {
shown: true, hidden: false,
postFormOpen: false, postFormOpen: false,
scrollingDown: false,
oldScrollPos: 0, oldScrollPos: 0,
scrollDirection: -1,
amountScrolled: 0 amountScrolled: 0
} }
}, },
@ -28,7 +28,7 @@ const MobilePostStatusModal = {
methods: { methods: {
openPostForm () { openPostForm () {
this.postFormOpen = true this.postFormOpen = true
this.shown = false this.hidden = true
const el = this.$el.querySelector('textarea') const el = this.$el.querySelector('textarea')
this.$nextTick(function () { this.$nextTick(function () {
@ -37,27 +37,27 @@ const MobilePostStatusModal = {
}, },
closePostForm () { closePostForm () {
this.postFormOpen = false this.postFormOpen = false
this.shown = true this.hidden = false
}, },
handleScroll: throttle(function () { handleScroll: throttle(function () {
const scrollAmount = window.scrollY - this.oldScrollPos const scrollAmount = window.scrollY - this.oldScrollPos
const direction = scrollAmount > 0 ? 1 : -1 const scrollingDown = scrollAmount > 0
if (direction !== this.scrollDirection) { if (scrollingDown !== this.scrollingDown) {
this.amountScrolled = 0 this.amountScrolled = 0
this.scrollDirection = direction this.scrollingDown = scrollingDown
if (direction === -1) { if (!scrollingDown) {
this.shown = true this.hidden = false
} }
} else if (direction === 1) { } else if (scrollingDown) {
this.amountScrolled += scrollAmount this.amountScrolled += scrollAmount
if (this.amountScrolled > 100 && this.shown) { if (this.amountScrolled > 100 && !this.hidden) {
this.shown = false this.hidden = true
} }
} }
this.oldScrollPos = window.scrollY this.oldScrollPos = window.scrollY
this.scrollDirection = direction this.scrollingDown = scrollingDown
}, 100) }, 100)
} }
} }

14
src/components/mobile_post_status_modal/mobile_post_status_modal.vue
View File

@ -5,14 +5,14 @@
v-show="postFormOpen" v-show="postFormOpen"
@click="closePostForm" @click="closePostForm"
> >
<div class="modal-panel panel" @click.stop=""> <div class="post-form-modal-panel panel" @click.stop="">
<div class="panel-heading">{{$t('post_status.new_status')}}</div> <div class="panel-heading">{{$t('post_status.new_status')}}</div>
<PostStatusForm class="panel-body" @posted="closePostForm"/> <PostStatusForm class="panel-body" @posted="closePostForm"/>
</div> </div>
</div> </div>
<button <button
class="new-status-button" class="new-status-button"
:class="{ 'shown': shown, 'hidden': !shown }" :class="{ hidden }"
@click="openPostForm" @click="openPostForm"
> >
<i class="icon-edit" /> <i class="icon-edit" />
@ -30,7 +30,7 @@
display: block; display: block;
} }
.modal-panel { .post-form-modal-panel {
flex-shrink: 0; flex-shrink: 0;
margin: 25% 0 4em 0; margin: 25% 0 4em 0;
width: 100%; width: 100%;
@ -43,6 +43,8 @@
position: fixed; position: fixed;
bottom: 1.5em; bottom: 1.5em;
right: 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: $fallback--fg;
background-color: var(--btn, $fallback--fg); background-color: var(--btn, $fallback--fg);
display: flex; display: flex;
@ -51,13 +53,9 @@
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3), 0px 4px 6px rgba(0, 0, 0, 0.3); box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3), 0px 4px 6px rgba(0, 0, 0, 0.3);
z-index: 10; z-index: 10;
transition: 0.35s; transition: 0.35s transform;
transition-timing-function: cubic-bezier(0, 1, 0.5, 1); transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
&.shown {
}
&.hidden { &.hidden {
transform: translateY(150%); transform: translateY(150%);
} }