Status char counter functionnal #57

This commit is contained in:
Nicolas Constant 2019-03-06 20:45:36 -05:00
parent 7903f2137b
commit 56e9d21fd9
No known key found for this signature in database
GPG Key ID: 1E9F677FB01A5688
3 changed files with 33 additions and 16 deletions

View File

@ -5,7 +5,7 @@
<input [(ngModel)]="title" type="text" class="form-control form-control-sm" name="title" autocomplete="off" placeholder="Title, Content Warning (optional)" title="title, content warning (optional)"/> <input [(ngModel)]="title" type="text" class="form-control form-control-sm" name="title" autocomplete="off" placeholder="Title, Content Warning (optional)" title="title, content warning (optional)"/>
<textarea #reply [(ngModel)]="status" name="status" class="form-control form-control-sm" <textarea #reply [(ngModel)]="status" name="status" class="form-control form-control-sm status-form__status flexcroll"
rows="5" required title="content" rows="5" required title="content"
placeholder="What's in your mind?" (keydown.control.enter)="onCtrlEnter()"></textarea> placeholder="What's in your mind?" (keydown.control.enter)="onCtrlEnter()"></textarea>
@ -14,7 +14,7 @@
<option *ngFor="let p of privacyList" [ngValue]="p">{{p}}</option> <option *ngFor="let p of privacyList" [ngValue]="p">{{p}}</option>
</select> </select>
<div class="status-form__counter"> <div class="status-form__counter">
<span class="status-form__counter--count">5000</span> <span class="status-form__counter--posts">0/1</span> <span class="status-form__counter--count">{{charCountLeft}}</span> <span class="status-form__counter--posts">{{postCounts - 1}}/{{postCounts}}</span>
</div> </div>
<button type="submit" class="btn btn-sm btn-custom-primary" *ngIf="statusReplyingToWrapper">REPLY!</button> <button type="submit" class="btn btn-sm btn-custom-primary" *ngIf="statusReplyingToWrapper">REPLY!</button>
<button type="submit" class="btn btn-sm btn-custom-primary" *ngIf="!statusReplyingToWrapper">POST!</button> <button type="submit" class="btn btn-sm btn-custom-primary" *ngIf="!statusReplyingToWrapper">POST!</button>

View File

@ -35,11 +35,9 @@ $counter-width: 90px;
// } // }
} }
.status-form { .status-form {
position: relative; position: relative;
font-size: $default-font-size; font-size: $default-font-size;
&__sending { &__sending {
position: absolute; position: absolute;
top: 0px; top: 0px;
@ -48,12 +46,10 @@ $counter-width: 90px;
bottom: 4px; bottom: 4px;
background-color: rgba($column-color, .75); background-color: rgba($column-color, .75);
z-index: 2; z-index: 2;
&--waiting {
&--waiting{
margin-top: calc(25%); margin-top: calc(25%);
} }
} }
&__counter { &__counter {
display: inline-block; display: inline-block;
border: 1px solid $status-secondary-color; border: 1px solid $status-secondary-color;
@ -62,18 +58,15 @@ $counter-width: 90px;
height: 32px; height: 32px;
position: relative; position: relative;
top: 0px; top: 0px;
padding: 4px 7px 0 7px; padding: 4px 7px 0 7px; // color: lighten($font-link-primary-hover, 10);
// color: lighten($font-link-primary-hover, 10);
// position: relative; // position: relative;
// overflow: hidden; // overflow: hidden;
&--count { &--count {
// position: absolute; // position: absolute;
// left: 0; // left: 0;
// overflow: hidden; // overflow: hidden;
// outline: 1px solid greenyellow; // outline: 1px solid greenyellow;
} }
&--posts { &--posts {
// position: absolute; // position: absolute;
// right: 0; // right: 0;
@ -81,4 +74,18 @@ $counter-width: 90px;
float: right; float: right;
} }
} }
&__status {
&::-webkit-resizer {
// border: 2px solid black;
background: $font-link-primary-hover;
width: 10px;
height: 10px;
// box-shadow: 0 0 5px 5px blue;
// outline: 2px solid yellow;
}
&::-webkit-scrollbar {
width: 12px;
}
}
} }

View File

@ -18,13 +18,15 @@ export class CreateStatusComponent implements OnInit {
private _status: string = ''; private _status: string = '';
set status(value: string){ set status(value: string){
this.countStatusChar(value);
this._status = value; this._status = value;
console.warn(value);
} }
get status(): string { get status(): string {
return this._status; return this._status;
} }
charCountLeft: number = 500;
postCounts: number = 1;
isSending: boolean; isSending: boolean;
@ -64,6 +66,14 @@ export class CreateStatusComponent implements OnInit {
}, 0); }, 0);
} }
private countStatusChar(status: string){
const maxLength = 500;
const statusLength = status.length;
const mod = statusLength % maxLength;
this.charCountLeft = maxLength - mod;
this.postCounts = Math.trunc(statusLength/maxLength) + 1;
}
private getMentions(status: Status, providerInfo: AccountInfo): string[] { private getMentions(status: Status, providerInfo: AccountInfo): string[] {
const mentions = [...status.mentions.map(x => x.acct), status.account.acct]; const mentions = [...status.mentions.map(x => x.acct), status.account.acct];