diff --git a/src/app/components/create-status/create-status.component.html b/src/app/components/create-status/create-status.component.html
index ef77b43d..c63ee398 100644
--- a/src/app/components/create-status/create-status.component.html
+++ b/src/app/components/create-status/create-status.component.html
@@ -5,7 +5,7 @@
-
@@ -14,7 +14,7 @@
- 5000 0/1
+ {{charCountLeft}} {{postCounts - 1}}/{{postCounts}}
diff --git a/src/app/components/create-status/create-status.component.scss b/src/app/components/create-status/create-status.component.scss
index 4dc08577..4ee719d2 100644
--- a/src/app/components/create-status/create-status.component.scss
+++ b/src/app/components/create-status/create-status.component.scss
@@ -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;
+ }
+ }
}
\ No newline at end of file
diff --git a/src/app/components/create-status/create-status.component.ts b/src/app/components/create-status/create-status.component.ts
index df1c9f7e..6d615cc2 100644
--- a/src/app/components/create-status/create-status.component.ts
+++ b/src/app/components/create-status/create-status.component.ts
@@ -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];