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];