added counter UI #57

This commit is contained in:
Nicolas Constant 2019-03-06 19:02:29 -05:00
parent 337509ed84
commit 7903f2137b
No known key found for this signature in database
GPG Key ID: 1E9F677FB01A5688
3 changed files with 46 additions and 2 deletions

View File

@ -13,6 +13,9 @@
[(ngModel)]="selectedPrivacy">
<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>
</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>
</form>

View File

@ -3,6 +3,7 @@
@import "panel";
@import "buttons";
$btn-send-status-width: 60px;
$counter-width: 90px;
.form-control {
margin: 0 0 5px 5px;
width: calc(100% - 10px);
@ -15,7 +16,7 @@ $btn-send-status-width: 60px;
}
&--privacy {
display: inline-block;
width: calc(100% - 15px - #{$btn-send-status-width});
width: calc(100% - 15px - #{$btn-send-status-width} - #{$counter-width});
}
}
@ -34,8 +35,11 @@ $btn-send-status-width: 60px;
// }
}
.status-form {
position: relative;
font-size: $default-font-size;
&__sending {
position: absolute;
top: 0px;
@ -49,4 +53,32 @@ $btn-send-status-width: 60px;
margin-top: calc(25%);
}
}
&__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;
}
&--posts {
// position: absolute;
// right: 0;
margin-left: 10px;
float: right;
}
}
}

View File

@ -15,7 +15,16 @@ import { AccountInfo } from '../../states/accounts.state';
})
export class CreateStatusComponent implements OnInit {
title: string;
status: string = '';
private _status: string = '';
set status(value: string){
this._status = value;
console.warn(value);
}
get status(): string {
return this._status;
}
isSending: boolean;