modularize Composebox

This commit is contained in:
Nolan Lawson 2018-02-26 21:50:03 -08:00
parent 3c62411819
commit 7eedeaac76
6 changed files with 142 additions and 103 deletions

View file

@ -1,33 +1,22 @@
<div class="lite-compose-box {{overLimit ? 'over-char-limit' : ''}}"> <div class="lite-compose-box {{overLimit ? 'over-char-limit' : ''}}">
<div class="compose-profile-current-user"> <div class="compose-box-current-user">
<Avatar account="{{verifyCredentials}}" className="compose-profile-avatar" size="small"/> <Avatar account="{{verifyCredentials}}" className="compose-box-avatar" size="small"/>
<a class="compose-profile-display-name" href="/accounts/{{verifyCredentials.id}}"> <a class="compose-box-display-name" href="/accounts/{{verifyCredentials.id}}">
{{verifyCredentials.display_name || verifyCredentials.acct}} {{verifyCredentials.display_name || verifyCredentials.acct}}
</a> </a>
<span class="compose-profile-handle"> <span class="compose-box-handle">
{{'@' + verifyCredentials.acct}} {{'@' + verifyCredentials.acct}}
</span> </span>
<textarea <textarea
class="compose-profile-input" class="compose-box-input"
placeholder="What's on your mind?" placeholder="What's on your mind?"
ref:textarea ref:textarea
bind:value=inputText bind:value=inputText
></textarea> ></textarea>
<div class="compose-profile-length-gauge {{shouldAnimate ? 'should-animate' : ''}}" <ComposeLengthGauge :inputLength />
style="transform: scaleX({{inputLengthAsFractionOfMaxRoundedAfterRaf || 0}});" <ComposeToolbar />
aria-hidden="true" <ComposeLengthIndicator :inputLength />
></div> <button class="primary compose-box-button">
<div class="compose-profile-toolbar">
<IconButton label="Insert emoji" href="#fa-smile" />
<IconButton label="Add media" href="#fa-camera" />
<IconButton label="Adjust privacy" href="#fa-globe" />
<IconButton label="Add content warning" href="#fa-exclamation-triangle" />
</div>
<span class="compose-profile-length"
aria-label="{{inputLengthLabel}}">
{{inputLengthToDisplayAfterRaf || '0'}}
</span>
<button class="primary compose-profile-button">
Toot! Toot!
</button> </button>
</div> </div>
@ -37,7 +26,7 @@
display: grid; display: grid;
flex-direction: row; flex-direction: row;
} }
.compose-profile-current-user { .compose-box-current-user {
border-radius: 4px; border-radius: 4px;
padding: 20px; padding: 20px;
display: grid; display: grid;
@ -53,11 +42,11 @@
width: 560px; width: 560px;
max-width: calc(100vw - 40px); max-width: calc(100vw - 40px);
} }
:global(.compose-profile-avatar) { :global(.compose-box-avatar) {
grid-area: avatar; grid-area: avatar;
margin-right: 15px; margin-right: 15px;
} }
.compose-profile-display-name { .compose-box-display-name {
color: var(--deemphasized-text-color); color: var(--deemphasized-text-color);
grid-area: display-name; grid-area: display-name;
min-width: 0; min-width: 0;
@ -68,12 +57,12 @@
margin-left: 5px; margin-left: 5px;
font-weight: 600; font-weight: 600;
} }
.compose-profile-display-name, .compose-box-display-name,
.compose-profile-display-name:hover, .compose-box-display-name:hover,
.compose-profile-display-name:visited { .compose-box-display-name:visited {
color: var(--body-text-color); color: var(--body-text-color);
} }
:global(.compose-profile-handle) { :global(.compose-box-handle) {
grid-area: handle; grid-area: handle;
color: var(--deemphasized-text-color); color: var(--deemphasized-text-color);
min-width: 0; min-width: 0;
@ -84,7 +73,7 @@
margin-left: 5px; margin-left: 5px;
} }
:global(.compose-profile-input) { :global(.compose-box-input) {
grid-area: input; grid-area: input;
margin: 10px 0 0 5px; margin: 10px 0 0 5px;
padding: 10px; padding: 10px;
@ -101,54 +90,20 @@
width: calc(100% - 5px); width: calc(100% - 5px);
} }
.compose-profile-button { .compose-box-button {
grid-area: button; grid-area: button;
justify-self: right; justify-self: right;
text-transform: uppercase; text-transform: uppercase;
margin-top: 10px; margin-top: 10px;
} }
.compose-profile-length-gauge {
grid-area: gauge;
margin: 0 0 5px 5px;
height: 2px;
background: var(--main-theme-color);
transform-origin: left;
}
.compose-profile-length-gauge.should-animate {
transition: transform 0.2s linear;
}
.compose-profile-length {
grid-area: length;
justify-self: right;
color: var(--main-theme-color);
font-size: 1.3em;
align-self: center;
}
.over-char-limit .compose-profile-length {
color: var(--warning-color);
}
.over-char-limit .compose-profile-length-gauge {
background: var(--warning-color);
}
.compose-profile-toolbar {
grid-area: toolbar;
align-self: center;
display: flex;
align-items: center;
}
@media (max-width: 767px) { @media (max-width: 767px) {
.compose-profile-current-user { .compose-box-current-user {
padding: 10px 10px; padding: 10px 10px;
max-width: calc(100vw - 20px); max-width: calc(100vw - 20px);
width: 580px; width: 580px;
} }
:global(.compose-profile-avatar) { :global(.compose-box-avatar) {
grid-area: avatar; grid-area: avatar;
margin-right: 5px; margin-right: 5px;
} }
@ -162,9 +117,9 @@
import { scheduleIdleTask } from '../../_utils/scheduleIdleTask' import { scheduleIdleTask } from '../../_utils/scheduleIdleTask'
import debounce from 'lodash/debounce' import debounce from 'lodash/debounce'
import { mark, stop } from '../../_utils/marks' import { mark, stop } from '../../_utils/marks'
import IconButton from '../IconButton.html' import ComposeToolbar from './ComposeToolbar.html'
import ComposeLengthGauge from './ComposeLengthGauge.html'
const CHAR_LIMIT = 500 import ComposeLengthIndicator from './ComposeLengthIndicator.html'
export default { export default {
oncreate() { oncreate() {
@ -184,23 +139,6 @@
this.store.set({inputTextInCompose: inputTextInCompose}) this.store.set({inputTextInCompose: inputTextInCompose})
saveText() saveText()
}, {init: false}) }, {init: false})
// Avoid input delays by updating these values after a rAF
this.observe('inputLengthToDisplay', inputLengthToDisplay => {
requestAnimationFrame(() => {
mark('set inputLengthToDisplayAfterRaf')
this.set({inputLengthToDisplayAfterRaf: inputLengthToDisplay})
stop('set inputLengthToDisplayAfterRaf')
})
})
this.observe('inputLengthAsFractionOfMaxRounded', inputLengthAsFractionOfMaxRounded => {
requestAnimationFrame(() => {
mark('set inputLengthAsFractionOfMaxRoundedAfterRaf')
this.set({inputLengthAsFractionOfMaxRoundedAfterRaf: inputLengthAsFractionOfMaxRounded})
stop('set inputLengthAsFractionOfMaxRoundedAfterRaf')
requestAnimationFrame(() => this.set({shouldAnimate: true}))
})
})
}, },
ondestroy() { ondestroy() {
mark('autosize.destroy()') mark('autosize.destroy()')
@ -212,28 +150,14 @@
}), }),
components: { components: {
Avatar, Avatar,
IconButton ComposeToolbar,
ComposeLengthGauge,
ComposeLengthIndicator
}, },
store: () => store, store: () => store,
computed: { computed: {
currentInputTextInCompose: ($currentInputTextInCompose) => $currentInputTextInCompose, currentInputTextInCompose: ($currentInputTextInCompose) => $currentInputTextInCompose,
inputLength: (inputText) => inputText ? inputText.length : 0, inputLength: (inputText) => inputText ? inputText.length : 0,
inputLengthToDisplay: (inputLength) => (inputLength <= CHAR_LIMIT ? inputLength : CHAR_LIMIT - inputLength),
inputLengthAsFractionOfMax: (inputLength) => (Math.min(CHAR_LIMIT, inputLength) / CHAR_LIMIT),
inputLengthAsFractionOfMaxRounded: (inputLengthAsFractionOfMax) => {
// We don't need to update the gauge for every decimal point, so round it to the nearest 0.02
let int = Math.round(inputLengthAsFractionOfMax * 100)
int -= (int % 2)
return int / 100
},
overLimit: (inputLength) => inputLength > CHAR_LIMIT,
inputLengthLabel: (overLimit, inputLengthToDisplay) => {
if (overLimit) {
return `${inputLengthToDisplay} characters over limit`
} else {
return `${inputLengthToDisplay} characters`
}
}
} }
} }
</script> </script>

View file

@ -0,0 +1,46 @@
<div class="compose-box-length-gauge {{shouldAnimate ? 'should-animate' : ''}} {{overLimit ? 'over-char-limit' : ''}}"
style="transform: scaleX({{inputLengthAsFractionRoundedAfterRaf || 0}});"
aria-hidden="true"
></div>
<style>
.compose-box-length-gauge {
grid-area: gauge;
margin: 0 0 5px 5px;
height: 2px;
background: var(--main-theme-color);
transform-origin: left;
}
.compose-box-length-gauge.should-animate {
transition: transform 0.2s linear;
}
.compose-box-length-gauge.over-char-limit {
background: var(--warning-color);
}
</style>
<script>
import { CHAR_LIMIT } from '../../_static/statuses'
import { mark, stop } from '../../_utils/marks'
export default {
oncreate() {
this.observe('inputLengthAsFractionRounded', inputLengthAsFractionRounded => {
requestAnimationFrame(() => {
mark('set inputLengthAsFractionRoundedAfterRaf')
this.set({inputLengthAsFractionRoundedAfterRaf: inputLengthAsFractionRounded})
stop('set inputLengthAsFractionRoundedAfterRaf')
requestAnimationFrame(() => this.set({shouldAnimate: true}))
})
})
},
computed: {
overLimit: (inputLength) => inputLength > CHAR_LIMIT,
inputLengthAsFraction: (inputLength) => (Math.min(CHAR_LIMIT, inputLength) / CHAR_LIMIT),
inputLengthAsFractionRounded: (inputLengthAsFraction) => {
// We don't need to update the gauge for every decimal point, so round it to the nearest 0.02
let int = Math.round(inputLengthAsFraction * 100)
int -= (int % 2)
return int / 100
}
}
}
</script>

View file

@ -0,0 +1,46 @@
<span class="compose-box-length {{overLimit ? 'over-char-limit' : ''}}"
aria-label="{{inputLengthLabel}}">
{{inputLengthToDisplayAfterRaf || '0'}}
</span>
<style>
.compose-box-length {
grid-area: length;
justify-self: right;
color: var(--main-theme-color);
font-size: 1.3em;
align-self: center;
}
.compose-box-length.over-char-limit {
color: var(--warning-color);
}
</style>
<script>
import { CHAR_LIMIT } from '../../_static/statuses'
import { mark, stop } from '../../_utils/marks'
export default {
oncreate() {
// Avoid input delays by updating these values after a rAF
this.observe('inputLengthToDisplay', inputLengthToDisplay => {
requestAnimationFrame(() => {
mark('set inputLengthToDisplayAfterRaf')
this.set({inputLengthToDisplayAfterRaf: inputLengthToDisplay})
stop('set inputLengthToDisplayAfterRaf')
})
})
},
computed: {
overLimit: (inputLength) => inputLength > CHAR_LIMIT,
inputLength: (inputText) => inputText ? inputText.length : 0,
inputLengthToDisplay: (inputLength) => (inputLength <= CHAR_LIMIT ? inputLength : CHAR_LIMIT - inputLength),
inputLengthLabel: (overLimit, inputLengthToDisplay) => {
if (overLimit) {
return `${inputLengthToDisplay} characters over limit`
} else {
return `${inputLengthToDisplay} characters`
}
}
}
}
</script>

View file

@ -0,0 +1,22 @@
<div class="compose-box-toolbar">
<IconButton label="Insert emoji" href="#fa-smile" />
<IconButton label="Add media" href="#fa-camera" />
<IconButton label="Adjust privacy" href="#fa-globe" />
<IconButton label="Add content warning" href="#fa-exclamation-triangle" />
</div>
<style>
.compose-box-toolbar {
grid-area: toolbar;
align-self: center;
display: flex;
align-items: center;
}
</style>
<script>
import IconButton from '../IconButton.html'
export default {
components: {
IconButton
}
}
</script>

View file

@ -0,0 +1 @@
export const CHAR_LIMIT = 500