Mastodon
/
Sengi-Windows-MacOS-Linux
mirror of https://github.com/NicolasConstant/sengi
1
0
Fork 0
Code Issues Releases Wiki Activity

added autogrow

This commit is contained in:
Nicolas Constant 2019-07-25 01:51:11 -04:00
parent dcb6858ce0
commit 4af542e713
No known key found for this signature in database
GPG Key ID: 1E9F677FB01A5688
3 changed files with 43 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/app/components/create-status/create-status.component.html
View File

@ -8,8 +8,11 @@
<textarea #reply [(ngModel)]="status" name="status"
class="form-control form-control-sm status-form__status status-editor__content flexcroll" rows="5" required
title="content" placeholder="What's in your mind?" (keydown.control.enter)="onCtrlEnter()"
(keydown)="handleKeyDown($event)" (blur)="statusTextEditorLostFocus()"></textarea>
title="content" placeholder="What's in your mind?"
(keydown.control.enter)="onCtrlEnter()"
(keydown)="handleKeyDown($event)"
(keyup)="autoGrowTextZone($event)"
(blur)="statusTextEditorLostFocus()"></textarea>
<app-autosuggest class="status-form__autosuggest" *ngIf="autosuggestData" [pattern]="autosuggestData"
[autoSuggestUserActionsStream]="autoSuggestUserActionsStream"

54
src/app/components/create-status/create-status.component.scss
View File

@ -42,7 +42,7 @@ $counter-width: 90px;
color: $status-editor-color;
margin-bottom: 0;
//resize: none;
resize: none;
border: none;
overflow: auto;
outline: none;
@ -51,8 +51,10 @@ $counter-width: 90px;
-moz-box-shadow: none;
box-shadow: none;
min-height: 110px;
height: 110px;
border-bottom: 1px solid black;
//border-bottom: 1px solid black;
}
&__footer {
@ -146,32 +148,32 @@ $counter-width: 90px;
}
}
&__counter {
display: inline-block;
border: 1px solid $status-secondary-color;
margin-left: 5px;
width: calc(#{$counter-width} - 5px);
height: 32px;
position: relative;
top: 0px;
padding: 4px 7px 0 7px; // color: lighten($font-link-primary-hover, 10);
// &__counter {
// display: inline-block;
// border: 1px solid $status-secondary-color;
// margin-left: 5px;
// width: calc(#{$counter-width} - 5px);
// height: 32px;
// position: relative;
// top: 0px;
// padding: 4px 7px 0 7px; // color: lighten($font-link-primary-hover, 10);
// position: relative;
// overflow: hidden;
&--count {
// position: absolute;
// left: 0;
// overflow: hidden;
// outline: 1px solid greenyellow;
}
// // position: relative;
// // overflow: hidden;
// &--count {
// // position: absolute;
// // left: 0;
// // overflow: hidden;
// // outline: 1px solid greenyellow;
// }
&--posts {
// position: absolute;
// right: 0;
margin-left: 10px;
float: right;
}
}
// &--posts {
// // position: absolute;
// // right: 0;
// margin-left: 10px;
// float: right;
// }
// }
&__status {
&::-webkit-resizer {

13
src/app/components/create-status/create-status.component.ts
View File

@ -186,7 +186,7 @@ export class CreateStatusComponent implements OnInit, OnDestroy {
}
private detectAutosuggestion(status: string) {
if(!this.loaded) return;
if (!this.loaded) return;
const caretPosition = this.replyElement.nativeElement.selectionStart;
const word = this.getWordByPos(status, caretPosition);
@ -211,7 +211,7 @@ export class CreateStatusComponent implements OnInit, OnDestroy {
setTimeout(() => {
this.replyElement.nativeElement.focus();
if(caretPos){
if (caretPos) {
this.replyElement.nativeElement.setSelectionRange(caretPos, caretPos);
} else {
this.replyElement.nativeElement.setSelectionRange(this.status.length, this.status.length);
@ -512,7 +512,7 @@ export class CreateStatusComponent implements OnInit, OnDestroy {
this.autosuggestData = null;
this.hasSuggestions = false;
if (document.activeElement === this.replyElement.nativeElement) {
setTimeout(() => {
this.replyElement.nativeElement.setSelectionRange(newCaretPosition, newCaretPosition);
@ -565,6 +565,13 @@ export class CreateStatusComponent implements OnInit, OnDestroy {
return false;
}
autoGrowTextZone(e) {
let scrolling = (e.target.scrollHeight + 25);
if (scrolling > 135) {
e.target.style.height = "0px";
e.target.style.height = (e.target.scrollHeight + 25) + "px";
}
}
public onContextMenu($event: MouseEvent): void {
this.contextMenuService.show.next({