Mastodon/Sengi-Windows-MacOS-Linux
1
0
Fork 0
mirror of https://github.com/NicolasConstant/sengi synced 2025-02-01 19:16:52 +01:00
Code Issues Releases Wiki Activity

better new account design

Browse Source
This commit is contained in:
Nicolas Constant 2020-02-14 21:01:07 -05:00
parent a7f50b2a1f
commit be17f56140
No known key found for this signature in database
GPG Key ID: 1E9F677FB01A5688
3 changed files with 90 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/app/components/floating-column/add-new-account/add-new-account.component.html
View File

@ -1,19 +1,33 @@
<div class="panel" [class.comrade__background]="isComrade">
<h3 class="panel__title" [class.comrade__text]="isComrade">Add new account</h3>
<div class="panel__content">
<h2 class="comrade__title" *ngIf="isComrade">Welcome Comrade!</h2>
<form (ngSubmit)="onSubmit()">
<label [class.comrade__text]="isComrade">Please provide your <span *ngIf="isComrade">comrade</span> account:</label>
<input type="text" class="form-control form-control-sm form-color" [(ngModel)]="mastodonFullHandle" name="mastodonFullHandle" [class.comrade__input]="isComrade"
<label [class.comrade__text]="isComrade">Please provide your <span *ngIf="isComrade">comrade</span>
account:</label>
<div>
<input type="text" class="form-control form-control-sm form-with-button"
[(ngModel)]="mastodonFullHandle" name="mastodonFullHandle" [class.comrade__input]="isComrade"
placeholder="@nickname@mastodon.social" />
<br />
<button *ngIf="!isLoading" type="submit" class="btn btn-success btn-sm" [class.comrade__button]="isComrade">Submit</button>
<!-- <br /> -->
<button type="submit" class="form-button"
title="add this account"
[class.comrade__button]="isComrade">
<span *ngIf="!isLoading">Submit</span>
<app-waiting-animation *ngIf="isLoading" class="waiting-icon"></app-waiting-animation>
</button>
</div>
</form>
<div *ngIf="isComrade" class="comrade__video">
<iframe width="300" height="170" src="https://www.youtube.com/embed/NzBjnoRG7Mo?feature=oembed&autoplay=1&auto_play=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="300" height="170"
src="https://www.youtube.com/embed/NzBjnoRG7Mo?feature=oembed&autoplay=1&auto_play=1" frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</div>
</div>
</div>

65
src/app/components/floating-column/add-new-account/add-new-account.component.scss
View File

@ -1,21 +1,74 @@
@import "variables";
@import "mixins";
@import "panel";
.panel {
$button-size: 70px;
.panel {
padding-left: 0px;
// padding-right: 0px;
background-position: 0 100%;
&__content {
padding-left: 5px;
}
}
.form-color {
background-color: $column-color;
border-color: $button-border-color;
color: #fff;
font-size: $default-font-size;
.form-with-button {
width: calc(100% - #{$button-size});
float: left;
&:focus {
box-shadow: none;
}
font-size: $default-font-size;
height: 29px;
padding: 0 5px 0 5px;
background-color: $status-editor-title-background;
color: $status-editor-color;
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
border-width: 0;
margin-bottom: 0;
// background-color: $column-color;
// border-color: $button-border-color;
// color: #fff;
// font-size: $default-font-size;
// &:focus {
// box-shadow: none;
// }
// height: 29px;
// padding: 0 5px 0 5px;
}
.waiting-icon {
position: relative;
top:1px;
left: 3px;
}
.form-button {
@include clearButton;
transition: all .2s;
background-color: $status-editor-footer-background;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
&:hover {
background-color: lighten($status-editor-footer-background, 20%);
background-color: darken($status-editor-footer-background, 20%);
}
outline: inherit;
&:focus {
background-color: darken($status-editor-footer-background, 20%);
}
width: $button-size;
height: 29px;
}
$comrade_yellow: #ffcc00;

5
src/app/components/floating-column/add-new-account/add-new-account.component.ts
View File

@ -59,9 +59,12 @@ export class AddNewAccountComponent implements OnInit {
}
onSubmit(): boolean {
this.checkBlockList(this.instance);
if(this.isLoading) return false;
this.isLoading = true;
this.checkBlockList(this.instance);
this.checkAndCreateApplication(this.instance)
.then((appData: AppData) => {
this.redirectToInstanceAuthPage(this.username, this.instance, appData);