Mastodon
/
Sengi-Windows-MacOS-Linux
mirror of https://github.com/NicolasConstant/sengi
1
0
Fork 0
Code Issues Releases Wiki Activity

starting the visual revamp of status redaction

This commit is contained in:
Nicolas Constant 2019-07-24 23:57:50 -04:00
parent f019b8d68b
commit 6b57f06381
No known key found for this signature in database
GPG Key ID: 1E9F677FB01A5688
4 changed files with 142 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
src/app/components/create-status/create-status.component.html
View File

@ -3,34 +3,54 @@
<app-waiting-animation class="waiting-icon"></app-waiting-animation>
</div>
<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)" />
<input [(ngModel)]="title" type="text" class="form-control form-control-sm status-editor__title" 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 status-form__status flexcroll" rows="5" required title="content"
placeholder="What's in your mind?"
(keydown.control.enter)="onCtrlEnter()"
(keydown)="handleKeyDown($event)"
(blur)="statusTextEditorLostFocus()"></textarea>
class="form-control form-control-sm status-form__status status-editor__content flexcroll" rows="5" required
title="content" placeholder="What's in your mind?" (keydown.control.enter)="onCtrlEnter()"
(keydown)="handleKeyDown($event)" (blur)="statusTextEditorLostFocus()"></textarea>
<app-autosuggest class="status-form__autosuggest" *ngIf="autosuggestData"
[pattern]="autosuggestData"
<app-autosuggest class="status-form__autosuggest" *ngIf="autosuggestData" [pattern]="autosuggestData"
[autoSuggestUserActionsStream]="autoSuggestUserActionsStream"
(suggestionSelectedEvent)="suggestionSelected($event)"
(hasSuggestionsEvent)="suggestionsChanged($event)"></app-autosuggest>
(suggestionSelectedEvent)="suggestionSelected($event)" (hasSuggestionsEvent)="suggestionsChanged($event)">
</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>
<div class="status-editor__footer">
<button type="submit" class="status-editor__footer--send-button">
<span *ngIf="statusReplyingToWrapper" title="reply">REPLY!</span>
<span *ngIf="!statusReplyingToWrapper" title="post">POST!</span>
</button>
<div class="status-editor__footer__counter">
<div class="status-editor__footer__counter--posts" title="number of statuses">{{postCounts - 1}}/{{postCounts}}</div>
<div class="status-editor__footer__counter--count" title="char count">{{charCountLeft}}</div>
</div>
<a href class="status-editor__footer--link" title="add media">
<fa-icon [icon]="faPaperclip"></fa-icon>
</a>
<a href class="status-editor__footer--link" title="adjust status privacy">
<fa-icon [icon]="faGlobeAmericas"></fa-icon>
</a>
</div>
<div class="status-form__mention-error" *ngIf="mentionTooFarAwayError">Error: mentions must be placed closer to the
start in order to use multiposting.</div>
<!--
<select class="form-control form-control-sm form-control--privacy" id="privacy" name="privacy"
[(ngModel)]="selectedPrivacy">
<option *ngFor="let p of privacyList" [ngValue]="p">{{p}}</option>
</select>
<div class="status-form__counter">
</select> -->
<!-- <div class="status-form__counter">
<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>
</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> -->
<app-media></app-media>
</form>

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

@ -2,6 +2,7 @@
@import "commons";
@import "panel";
@import "buttons";
@import "mixins";
$btn-send-status-width: 60px;
$counter-width: 90px;
@ -9,8 +10,9 @@ $counter-width: 90px;
margin: 0 0 5px 5px;
width: calc(100% - 10px);
background-color: $column-color;
background-color: $status-editor-background;
border-color: $status-secondary-color;
color: #fff;
color: $status-editor-color;
font-size: $default-font-size;
&:focus {
@ -23,6 +25,90 @@ $counter-width: 90px;
}
}
.status-editor {
&__title {
background-color: $status-editor-title-background;
color: $status-editor-color;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
border-width: 0;
margin-bottom: 0;
}
&__content {
border-width: 0;
background-color: $status-editor-background;
color: $status-editor-color;
margin-bottom: 0;
resize: none;
border: none;
overflow: auto;
outline: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
&__footer {
height: 35px;
margin: 0 5px;
border-width: 0;
// position: relative;
background-color: $status-editor-footer-background;
&--link {
color: $status-editor-footer-link-color;
display: inline-block;
padding: 5px;
margin: 2px 0 0 5px;
}
&--send-button {
@include clearButton;
transition: all .2s;
float: right;
padding: 0 15px 0 15px;
height: 35px;
background-color: $status-editor-footer-background;
//border-left: 1px solid rgb(0, 0, 0);
&:hover {
background-color: lighten($status-editor-footer-background, 20%);
background-color: darken($status-editor-footer-background, 20%);
// background-color: rgb(34, 71, 114);
}
& span {
margin: 0;
padding: 0;
}
}
&__counter {
float: right;
height: 35px;
padding: 6px 7px 0 7px;
vertical-align: center;
&--count {
display: block;
//float: right;
margin-right: 40px
}
&--posts {
display: block;
// margin-left: 10px;
float: right;
}
}
}
}
.btn-custom-primary {
display: inline-block;
width: $btn-send-status-width;

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

@ -3,6 +3,8 @@ import { HttpErrorResponse } from '@angular/common/http';
import { Store } from '@ngxs/store';
import { Subscription, Observable } from 'rxjs';
import { UP_ARROW, DOWN_ARROW, ENTER, ESCAPE } from '@angular/cdk/keycodes';
import { faPaperclip, faGlobe, faGlobeAmericas } from "@fortawesome/free-solid-svg-icons";
import { faWindowClose as faWindowCloseRegular } from "@fortawesome/free-regular-svg-icons";
import { MastodonService, VisibilityEnum } from '../../services/mastodon.service';
import { Status, Attachment } from '../../services/models/mastodon.interfaces';
@ -21,6 +23,10 @@ import { AutosuggestSelection, AutosuggestUserActionEnum } from './autosuggest/a
styleUrls: ['./create-status.component.scss']
})
export class CreateStatusComponent implements OnInit, OnDestroy {
faPaperclip = faPaperclip;
faGlobe = faGlobe;
faGlobeAmericas = faGlobeAmericas;
autoSuggestUserActionsStream = new EventEmitter<AutosuggestUserActionEnum>();
private _title: string;

13
src/sass/_variables.scss
View File

@ -59,4 +59,15 @@ $context-menu-background-hover: #a9c9e6;
$context-menu-font-color: #000000;
$context-menu-border-color: #c0cdd9;
$direct-message-background: #090a0f;
$direct-message-background: #090a0f;
$status-editor-title-background: #a9c9e6;
$status-editor-title-background: #ebebeb;
$status-editor-background: #d9e1e8;
$status-editor-background: #ffffff;
$status-editor-color: #23252c;
$status-editor-color: #14151a;
$status-editor-footer-background: #535c7e;
$status-editor-footer-background: #3e455f;
$status-editor-footer-link-color: #e2e2e2;