diff options
Diffstat (limited to 'src/components/post_status_form')
| -rw-r--r-- | src/components/post_status_form/post_status_form.js | 18 | ||||
| -rw-r--r-- | src/components/post_status_form/post_status_form.vue | 305 |
2 files changed, 178 insertions, 145 deletions
diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js index 999aa732..6c95873c 100644 --- a/src/components/post_status_form/post_status_form.js +++ b/src/components/post_status_form/post_status_form.js @@ -28,6 +28,9 @@ const PostStatusForm = { components: { MediaUpload }, + mounted () { + this.resize(this.$refs.textarea) + }, data () { let statusText = '' @@ -53,7 +56,8 @@ const PostStatusForm = { candidates () { const firstchar = this.textAtCaret.charAt(0) if (firstchar === '@') { - const matchedUsers = filter(this.users, (user) => (String(user.name + user.screen_name)).match(this.textAtCaret.slice(1))) + const matchedUsers = filter(this.users, (user) => (String(user.name + user.screen_name)).toUpperCase() + .match(this.textAtCaret.slice(1).toUpperCase())) if (matchedUsers.length <= 0) { return false } @@ -234,10 +238,14 @@ const PostStatusForm = { e.dataTransfer.dropEffect = 'copy' }, resize (e) { - e.target.style.height = 'auto' - e.target.style.height = `${e.target.scrollHeight - 10}px` - if (e.target.value === '') { - e.target.style.height = '16px' + const target = e.target || e + target.style.height = 'auto' + const heightPx = target.scrollHeight - 10 + if (heightPx > 54) { + target.style.height = `${target.scrollHeight - 10}px` + } + if (target.value === '') { + target.style.height = '16px' } }, clearError () { diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue index 4871bcae..88627e3a 100644 --- a/src/components/post_status_form/post_status_form.vue +++ b/src/components/post_status_form/post_status_form.vue @@ -1,21 +1,36 @@ <template> - <div class="post-status-form"> - <form @submit.prevent="postStatus(newStatus)"> - <div class="form-group base03-border" > - <textarea @click="setCaret" @keyup="setCaret" v-model="newStatus.status" :placeholder="$t('post_status.default')" rows="1" class="form-control" @keydown.down="cycleForward" @keydown.up="cycleBackward" @keydown.shift.tab="cycleBackward" @keydown.tab="cycleForward" @keydown.enter="replaceCandidate" @keydown.meta.enter="postStatus(newStatus)" @keyup.ctrl.enter="postStatus(newStatus)" @drop="fileDrop" @dragover.prevent="fileDrag" @input="resize" @paste="paste"></textarea> - </div> - <div style="position:relative;" v-if="candidates"> - <div class="autocomplete-panel base05-background"> +<div class="post-status-form"> + <form @submit.prevent="postStatus(newStatus)"> + <div class="form-group" > + <textarea + ref="textarea" + @click="setCaret" + @keyup="setCaret" v-model="newStatus.status" :placeholder="$t('post_status.default')" rows="1" class="form-control" + @keydown.down="cycleForward" + @keydown.up="cycleBackward" + @keydown.shift.tab="cycleBackward" + @keydown.tab="cycleForward" + @keydown.enter="replaceCandidate" + @keydown.meta.enter="postStatus(newStatus)" + @keyup.ctrl.enter="postStatus(newStatus)" + @drop="fileDrop" + @dragover.prevent="fileDrag" + @input="resize" + @paste="paste"> + </textarea> + </div> + <div style="position:relative;" v-if="candidates"> + <div class="autocomplete-panel"> <div v-for="candidate in candidates" @click="replace(candidate.utf || (candidate.screen_name + ' '))"> - <div v-if="candidate.highlighted" class="autocomplete base02"> + <div v-if="candidate.highlighted" class="autocomplete"> <span v-if="candidate.img"><img :src="candidate.img"></span> <span v-else>{{candidate.utf}}</span> - <span>{{candidate.screen_name}}<small class="base02">{{candidate.name}}</small></span> + <span>{{candidate.screen_name}}<small>{{candidate.name}}</small></span> </div> - <div v-else class="autocomplete base04"> + <div v-else class="autocomplete"> <span v-if="candidate.img"><img :src="candidate.img"></img></span> <span v-else>{{candidate.utf}}</span> - <span>{{candidate.screen_name}}<small class="base02">{{candidate.name}}</small></span> + <span>{{candidate.screen_name}}<small>{{candidate.name}}</small></span> </div> </div> </div> @@ -24,18 +39,18 @@ <media-upload @uploading="disableSubmit" @uploaded="addMediaFile" @upload-failed="enableSubmit" :drop-files="dropFiles"></media-upload> <p v-if="isOverLengthLimit" class="error">{{ charactersLeft }}</p> - <p v-else-if="hasStatusLengthLimit" class="base04">{{ charactersLeft }}</p> + <p class="faint" v-else-if="hasStatusLengthLimit">{{ charactersLeft }}</p> - <button v-if="posting" disabled class="btn btn-default base05 base02-background">{{$t('post_status.posting')}}</button> - <button v-else-if="isOverLengthLimit" disabled class="btn btn-default base05 base02-background">{{$t('general.submit')}}</button> - <button v-else :disabled="submitDisabled" type="submit" class="btn btn-default base05 base02-background">{{$t('general.submit')}}</button> + <button v-if="posting" disabled class="btn btn-default">{{$t('post_status.posting')}}</button> + <button v-else-if="isOverLengthLimit" disabled class="btn btn-default">{{$t('general.submit')}}</button> + <button v-else :disabled="submitDisabled" type="submit" class="btn btn-default">{{$t('general.submit')}}</button> </div> - <div class='error' v-if="error"> + <div class='alert error' v-if="error"> Error: {{ error }} <i class="icon-cancel" @click="clearError"></i> </div> <div class="attachments"> - <div class="media-upload-container attachment base03-border" v-for="file in newStatus.files"> + <div class="media-upload-container attachment" v-for="file in newStatus.files"> <i class="fa icon-cancel" @click="removeMediaFile(file)"></i> <img class="thumbnail media-upload" :src="file.image" v-if="type(file) === 'image'"></img> <video v-if="type(file) === 'video'" :src="file.image" controls></video> @@ -50,147 +65,157 @@ <script src="./post_status_form.js"></script> <style lang="scss"> +@import '../../_variables.scss'; + +.tribute-container { + ul { + padding: 0px; + li { + display: flex; + align-items: center; + } + } + img { + padding: 3px; + width: 16px; + height: 16px; + border-radius: $fallback--avatarAltRadius; + border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius); + } +} + +.post-status-form, .login { + .form-bottom { + display: flex; + padding: 0.5em; + height: 32px; + + button { + width: 10em; + } + + p { + margin: 0.35em; + padding: 0.35em; + display: flex; + } + } - .tribute-container { - ul { - padding: 0px; - li { - display: flex; - align-items: center; - } - } - img { - padding: 3px; - width: 16px; - height: 16px; - border-radius: 50%; - } - } + .error { + text-align: center; + } - .post-status-form, .login { - .form-bottom { - display: flex; - padding: 0.5em; - height: 32px; + .attachments { + padding: 0 0.5em; - button { - width: 10em; - } + .attachment { + position: relative; + border: 1px solid $fallback--border; + border: 1px solid var(--border, $fallback--border); + margin: 0.5em 0.8em 0.2em 0; + } - p { - margin: 0.35em; - padding: 0.35em; - display: flex; - } - } - .error { - border-radius: 5px; - text-align: center; - background-color: rgba(255, 48, 16, 0.65); - padding: 0.25em; - margin: 0.35em; - display: flex; - } + i { + position: absolute; + margin: 10px; + padding: 5px; + background: rgba(230,230,230,0.6); + border-radius: $fallback--attachmentRadius; + border-radius: var(--attachmentRadius, $fallback--attachmentRadius); + font-weight: bold; + } + } - .attachments { - padding: 0 0.5em; - .attachment { - position: relative; - margin: 0.5em 0.8em 0.2em 0; - } + .btn { + cursor: pointer; + } - i { - position: absolute; - margin: 10px; - padding: 5px; - background: rgba(230,230,230,0.6); - border-radius: 5px; - font-weight: bold; - } - } + .btn[disabled] { + cursor: not-allowed; + } + .icon-cancel { + cursor: pointer; + } - .btn { - cursor: pointer; - } + form { + display: flex; + flex-direction: column; + padding: 0.6em; + } - .btn[disabled] { - cursor: not-allowed; - } + .form-group { + display: flex; + flex-direction: column; + padding: 0.3em 0.5em 0.6em; + line-height:24px; + } - .icon-cancel { - cursor: pointer; - } - form { - display: flex; - flex-direction: column; - padding: 0.6em; - } + form textarea { + line-height:16px; + resize: none; + overflow: hidden; + transition: min-height 200ms 100ms; + min-height: 1px; + box-sizing: content-box; + } - .form-group { - display: flex; - flex-direction: column; - padding: 0.3em 0.5em 0.6em; - line-height:24px; - } + form textarea:focus { + min-height: 48px; + } - form textarea { - border: solid; - border-width: 1px; - border-color: inherit; - border-radius: 5px; - line-height:16px; - padding: 5px; - resize: none; - overflow: hidden; - } + .btn { + cursor: pointer; + } - form textarea:focus { - min-height: 48px; - } + .btn[disabled] { + cursor: not-allowed; + } - .btn { - cursor: pointer; - } + .icon-cancel { + cursor: pointer; + z-index: 4; + } - .btn[disabled] { - cursor: not-allowed; - } + .autocomplete-panel { + margin: 0 0.5em 0 0.5em; + border-radius: $fallback--tooltipRadius; + border-radius: var(--tooltipRadius, $fallback--tooltipRadius); + position: absolute; + z-index: 1; + box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5); + min-width: 75%; + background: $fallback--btn; + background: var(--btn, $fallback--btn); + color: $fallback--lightFg; + color: var(--lightFg, $fallback--lightFg); + } - .icon-cancel { - cursor: pointer; - z-index: 4; - } + .autocomplete { + cursor: pointer; + padding: 0.2em 0.4em 0.2em 0.4em; + border-bottom: 1px solid rgba(0, 0, 0, 0.4); + display: flex; - .autocomplete-panel { - margin: 0 0.5em 0 0.5em; - border-radius: 5px; - position: absolute; - z-index: 1; - box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5); - min-width: 75%; - } + img { + width: 24px; + height: 24px; + border-radius: $fallback--avatarRadius; + border-radius: var(--avatarRadius, $fallback--avatarRadius); + object-fit: contain; + } - .autocomplete { - cursor: pointer; - padding: 0.2em 0.4em 0.2em 0.4em; - border-bottom: 1px solid rgba(0, 0, 0, 0.4); - display: flex; - img { - width: 24px; - height: 24px; - border-radius: 2px; - object-fit: contain; - } - span { - line-height: 24px; - margin: 0 0.1em 0 0.2em; - } - small { - font-style: italic; - } - } - } + span { + line-height: 24px; + margin: 0 0.1em 0 0.2em; + } + small { + margin-left: .5em; + color: $fallback--faint; + color: var(--faint, $fallback--faint); + } + } +} </style> |