better display #127
This commit is contained in:
Nicolas Constant
parent
65f2154ea1
commit
c98bd53496
|
|
@ -1,9 +1,15 @@
|
|||
<div class="autosuggest">
|
||||
<div *ngFor="let a of accounts" class="autosuggest__entry autosuggest__account">
|
||||
<img class="autosuggest__account--avatar" src="{{ a.avatar }}" /> {{ a.username }} @{{ a.acct }}
|
||||
</div>
|
||||
<div class="autosuggest" *ngIf="accounts.length > 0 || hashtags.length > 0">
|
||||
<a href *ngFor="let a of accounts"
|
||||
title="@{{a.acct}}"
|
||||
(click)="accountSelected(a)"
|
||||
class="autosuggest__entry autosuggest__account">
|
||||
<img class="autosuggest__account--avatar" src="{{ a.avatar }}" /> {{ a.username }} <span class="autosuggest__account--acct">@{{ a.acct }}</span>
|
||||
</a>
|
||||
|
||||
<div *ngFor="let h of hashtags" class="autosuggest__entry">
|
||||
<a href *ngFor="let h of hashtags"
|
||||
title="#{{h}}"
|
||||
(click)="hashtagSelected(h)"
|
||||
class="autosuggest__entry">
|
||||
#{{ h }}
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -1,10 +1,45 @@
|
|||
.autosuggest {
|
||||
&__entry {}
|
||||
@import "variables";
|
||||
|
||||
&__account {
|
||||
&--avatar {
|
||||
width: 25px;
|
||||
|
||||
.autosuggest {
|
||||
background-color: $column-color;
|
||||
border: solid $status-secondary-color;
|
||||
border-width: 0 1px 1px 1px;
|
||||
|
||||
&__entry {
|
||||
display: block;
|
||||
padding: 1px 5px;
|
||||
color: $font-link-primary-hover;
|
||||
background-color: darken($column-color, 5%);
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
width: calc(100%);
|
||||
|
||||
&:hover {
|
||||
color: $font-color-primary;
|
||||
text-decoration: none;
|
||||
background-color: $column-color;
|
||||
}
|
||||
}
|
||||
|
||||
&__account {
|
||||
padding: 5px 5px 0 5px;
|
||||
|
||||
&:last-child{
|
||||
padding: 5px 5px 5px 5px;
|
||||
}
|
||||
|
||||
&--avatar {
|
||||
width: 25px;
|
||||
}
|
||||
|
||||
&--acct {
|
||||
color: $font-link-primary;
|
||||
}
|
||||
}
|
||||
|
||||
&__entry:hover &__account--acct {
|
||||
color: $font-link-primary-hover;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import { Component, OnInit, Input } from '@angular/core';
|
||||
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
|
||||
|
||||
import { ToolsService } from '../../../services/tools.service';
|
||||
import { MastodonService } from '../../../services/mastodon.service';
|
||||
|
|
@ -14,11 +14,18 @@ export class AutosuggestComponent implements OnInit {
|
|||
accounts: Account[] = [];
|
||||
hashtags: string[] = [];
|
||||
|
||||
@Output() suggestionSelectedEvent = new EventEmitter<AutosuggestSelection>();
|
||||
|
||||
private _pattern: string;
|
||||
@Input('pattern')
|
||||
set pattern(value: string) {
|
||||
this._pattern = value;
|
||||
this.analysePattern(value);
|
||||
if (value) {
|
||||
this._pattern = value;
|
||||
this.analysePattern(value);
|
||||
} else {
|
||||
this.accounts.length = 0;
|
||||
this.hashtags.length = 0;
|
||||
}
|
||||
}
|
||||
get pattern(): string {
|
||||
return this._pattern;
|
||||
|
|
@ -41,7 +48,7 @@ export class AutosuggestComponent implements OnInit {
|
|||
|
||||
this.mastodonService.search(selectedAccount, pattern, false)
|
||||
.then((results: Results) => {
|
||||
if(this.lastPatternUsed !== pattern) return;
|
||||
if (this.lastPatternUsed !== pattern) return;
|
||||
|
||||
this.accounts.length = 0;
|
||||
this.hashtags.length = 0;
|
||||
|
|
@ -49,12 +56,14 @@ export class AutosuggestComponent implements OnInit {
|
|||
if (isAccount) {
|
||||
for (let account of results.accounts) {
|
||||
this.accounts.push(account);
|
||||
if(this.accounts.length > 7) return;
|
||||
}
|
||||
}
|
||||
else {
|
||||
for (let hashtag of results.hashtags) {
|
||||
if (hashtag.includes(this.lastPatternUsed) || hashtag === this.lastPatternUsed) {
|
||||
this.hashtags.push(hashtag);
|
||||
if(this.hashtags.length > 7) return;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -63,4 +72,20 @@ export class AutosuggestComponent implements OnInit {
|
|||
this.notificationService.notifyHttpError(err);
|
||||
});
|
||||
}
|
||||
|
||||
accountSelected(account: Account): boolean {
|
||||
const fullHandle = this.toolsService.getAccountFullHandle(account);
|
||||
this.suggestionSelectedEvent.next(new AutosuggestSelection(this.lastPatternUsed, fullHandle));
|
||||
return false;
|
||||
}
|
||||
|
||||
hashtagSelected(hashtag: string): boolean {
|
||||
this.suggestionSelectedEvent.next(new AutosuggestSelection(this.lastPatternUsed, hashtag));
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
export class AutosuggestSelection{
|
||||
constructor(public pattern: string, public autosuggest: string) {
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,8 @@
|
|||
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>
|
||||
|
||||
<app-autosuggest *ngIf="autosuggestData" [pattern]="autosuggestData"></app-autosuggest>
|
||||
<app-autosuggest class="status-form__autosuggest" *ngIf="autosuggestData"
|
||||
[pattern]="autosuggestData"></app-autosuggest>
|
||||
|
||||
<div class="status-form__mention-error" *ngIf="mentionTooFarAwayError">Error: mentions must be placed closer to the start in order to use multiposting.</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
@import "buttons";
|
||||
$btn-send-status-width: 60px;
|
||||
$counter-width: 90px;
|
||||
|
||||
.form-control {
|
||||
margin: 0 0 5px 5px;
|
||||
width: calc(100% - 10px);
|
||||
|
|
@ -11,9 +12,11 @@ $counter-width: 90px;
|
|||
border-color: $status-secondary-color;
|
||||
color: #fff;
|
||||
font-size: $default-font-size;
|
||||
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&--privacy {
|
||||
display: inline-block;
|
||||
width: calc(100% - 15px - #{$btn-send-status-width} - #{$counter-width});
|
||||
|
|
@ -38,6 +41,7 @@ $counter-width: 90px;
|
|||
.status-form {
|
||||
position: relative;
|
||||
font-size: $default-font-size;
|
||||
|
||||
&__sending {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
|
|
@ -46,10 +50,12 @@ $counter-width: 90px;
|
|||
bottom: 4px;
|
||||
background-color: rgba($column-color, .75);
|
||||
z-index: 2;
|
||||
|
||||
&--waiting {
|
||||
margin-top: calc(25%);
|
||||
}
|
||||
}
|
||||
|
||||
&__counter {
|
||||
display: inline-block;
|
||||
border: 1px solid $status-secondary-color;
|
||||
|
|
@ -59,6 +65,7 @@ $counter-width: 90px;
|
|||
position: relative;
|
||||
top: 0px;
|
||||
padding: 4px 7px 0 7px; // color: lighten($font-link-primary-hover, 10);
|
||||
|
||||
// position: relative;
|
||||
// overflow: hidden;
|
||||
&--count {
|
||||
|
|
@ -67,6 +74,7 @@ $counter-width: 90px;
|
|||
// overflow: hidden;
|
||||
// outline: 1px solid greenyellow;
|
||||
}
|
||||
|
||||
&--posts {
|
||||
// position: absolute;
|
||||
// right: 0;
|
||||
|
|
@ -74,6 +82,7 @@ $counter-width: 90px;
|
|||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
&__status {
|
||||
&::-webkit-resizer {
|
||||
// border: 2px solid black;
|
||||
|
|
@ -89,6 +98,18 @@ $counter-width: 90px;
|
|||
}
|
||||
}
|
||||
|
||||
&__autosuggest {
|
||||
// position: absolute;
|
||||
// z-index: 100;
|
||||
display: block;
|
||||
margin: auto;
|
||||
position: relative;
|
||||
top: -5px;
|
||||
width: calc(100% - 10px);
|
||||
// width: calc(100% - 20px);
|
||||
|
||||
}
|
||||
|
||||
&__mention-error {
|
||||
border: 2px dashed red;
|
||||
padding: 5px 10px;
|
||||
|
|
|
|||
|
|
@ -35,6 +35,8 @@ export class CreateStatusComponent implements OnInit, OnDestroy {
|
|||
this.countStatusChar(value);
|
||||
this.detectAutosuggestion(value);
|
||||
this._status = value;
|
||||
} else {
|
||||
this.autosuggestData = null;
|
||||
}
|
||||
}
|
||||
get status(): string {
|
||||
|
|
|
|||
Loading…
Reference in New Issue