Mastodon/Sengi-Windows-MacOS-Linux
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Status char counter functionnal #57

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/components/create-status/create-status.component.html
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)"/>
<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"
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>
</select>
<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>
<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>

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

@ -35,11 +35,9 @@ $counter-width: 90px;
// }
}
.status-form {
position: relative;
font-size: $default-font-size;
&__sending {
position: absolute;
top: 0px;
@ -48,32 +46,27 @@ $counter-width: 90px;
bottom: 4px;
background-color: rgba($column-color, .75);
z-index: 2;
&--waiting{
&--waiting {
margin-top: calc(25%);
}
}
&__counter {
display: inline-block;
border: 1px solid $status-secondary-color;
margin-left: 5px;
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);
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;
}
&--posts {
// position: absolute;
// right: 0;
@ -81,4 +74,18 @@ $counter-width: 90px;
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;
}
}
}

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

@ -17,14 +17,16 @@ export class CreateStatusComponent implements OnInit {
title: string;
private _status: string = '';
set status(value: string){
this._status = value;
console.warn(value);
set status(value: string){
this.countStatusChar(value);
this._status = value;
}
get status(): string {
return this._status;
}
charCountLeft: number = 500;
postCounts: number = 1;
isSending: boolean;
@ -64,6 +66,14 @@ export class CreateStatusComponent implements OnInit {
}, 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[] {
const mentions = [...status.mentions.map(x => x.acct), status.account.acct];