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

Merge branch 'develop' into feature_add-boosts-and-favs

This commit is contained in:
Nicolas Constant 2018-10-12 20:48:11 -04:00 committed by GitHub
parent a4c32b3464 f1fb787716
commit 4b495c0cea
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 189 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/app.module.ts
View File

@ -33,6 +33,7 @@ import { SearchComponent } from './components/floating-column/search/search.comp
import { AddNewStatusComponent } from "./components/floating-column/add-new-status/add-new-status.component";
import { ManageAccountComponent } from "./components/floating-column/manage-account/manage-account.component";
import { ActionBarComponent } from './components/stream/status/action-bar/action-bar.component';
import { WaitingAnimationComponent } from './components/waiting-animation/waiting-animation.component';
const routes: Routes = [
{ path: "", redirectTo: "home", pathMatch: "full" },
@ -58,7 +59,8 @@ const routes: Routes = [
SettingsComponent,
AddNewAccountComponent,
SearchComponent,
ActionBarComponent
ActionBarComponent,
WaitingAnimationComponent
],
imports: [
BrowserModule,

12
src/app/components/floating-column/search/search.component.html
View File

@ -3,27 +3,29 @@
<form (ngSubmit)="onSubmit()">
<input type="text" class="form-control form-control-sm" [(ngModel)]="searchHandle" name="searchHandle"
placeholder="Search" autocomplete="off"/>
placeholder="Search" autocomplete="off" />
</form>
<app-waiting-animation *ngIf="isLoading" class="waiting-icon"></app-waiting-animation>
<div *ngIf="accounts.length > 0" class="search-results">
<h3 class="search-results__title">Accounts</h3>
<a href *ngFor="let account of accounts" class="account">
<img src="{{account.avatar}}" class="account__avatar" />
<div class="account__name">{{ account.username }}</div>
<div class="account__fullhandle">@{{ account.acct }}</div>
</a>
</div>
</div>
<div *ngIf="statuses.length > 0" class="search-results">
<h3 class="search-results__title">Statuses</h3>
</div>
<div *ngIf="hashtags.length > 0" class="search-results">
<div *ngIf="hashtags.length > 0" class="search-results">
<h3 class="search-results__title">Hashtags</h3>
<a href *ngFor="let hashtag of hashtags" class="search-results__hashtag">
#{{ hashtag }}
</a>
</a>
</div>
</div>

1
src/app/components/floating-column/search/search.component.scss
View File

@ -1,6 +1,7 @@
@import "variables";
@import "mixins";
@import "panel";
@import "commons";
$separator-color:$color-primary;

6
src/app/components/floating-column/search/search.component.ts
View File

@ -18,6 +18,8 @@ export class SearchComponent implements OnInit {
statuses: Status[] = [];
hashtags: string[] = [];
isLoading: boolean;
constructor(
private readonly store: Store,
private readonly mastodonService: MastodonService) { }
@ -35,6 +37,7 @@ export class SearchComponent implements OnInit {
this.accounts.length = 0;
this.statuses.length = 0;
this.hashtags.length = 0;
this.isLoading = true;
console.warn(`search: ${data}`);
@ -57,7 +60,8 @@ export class SearchComponent implements OnInit {
}
}
})
.catch((err) => console.error(err));
.catch((err) => console.error(err))
.then(() => { this.isLoading = false; });
}
}

7
src/app/components/waiting-animation/waiting-animation.component.html Normal file
View File

@ -0,0 +1,7 @@
<!-- https://loading.io/css/ -->
<div class="lds-ellipsis">
<div></div>
<div></div>
<div></div>
<div></div>
</div>

67
src/app/components/waiting-animation/waiting-animation.component.scss Normal file
View File

@ -0,0 +1,67 @@
//https://loading.io/css/
.lds-ellipsis {
display: inline-block;
position: relative;
//width: 64px;
//height: 64px;
width: 40px;
height: 20px;
}
.lds-ellipsis div {
position: absolute;
// top: 27px;
// width: 11px;
// height: 11px;
// top: 27px;
top: 8px;
width: 5px;
height: 5px;
border-radius: 50%;
background: #fff;
animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.lds-ellipsis div:nth-child(1) {
left: 6px;
animation: lds-ellipsis1 0.6s infinite;
}
.lds-ellipsis div:nth-child(2) {
left: 6px;
animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(3) {
left: 16px;
// left: 26px;
animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(4) {
left: 25px;
// left: 45px;
animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
@keyframes lds-ellipsis2 {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(10px, 0);
}
}
@keyframes lds-ellipsis3 {
0% {
transform: scale(1);
}
100% {
transform: scale(0);
}
}

25
src/app/components/waiting-animation/waiting-animation.component.spec.ts Normal file
View File

@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { WaitingAnimationComponent } from './waiting-animation.component';
describe('WaitingAnimationComponent', () => {
let component: WaitingAnimationComponent;
let fixture: ComponentFixture<WaitingAnimationComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ WaitingAnimationComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(WaitingAnimationComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

15
src/app/components/waiting-animation/waiting-animation.component.ts Normal file
View File

@ -0,0 +1,15 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-waiting-animation',
templateUrl: './waiting-animation.component.html',
styleUrls: ['./waiting-animation.component.scss']
})
export class WaitingAnimationComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}

63
src/index.html
View File

@ -2,24 +2,65 @@
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sengi</title>
<base href="./">
<meta charset="utf-8">
<title>Sengi</title>
<base href="./">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<style>
.lds-ripple {
/* display: inline-block; */
margin: 30px auto;
position: relative;
width: 64px;
height: 64px;
}
.lds-ripple div {
position: absolute;
border: 4px solid #444f74;
opacity: 1;
border-radius: 50%;
animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.lds-ripple div:nth-child(2) {
animation-delay: -0.5s;
}
@keyframes lds-ripple {
0% {
top: 28px;
left: 28px;
width: 0;
height: 0;
opacity: 1;
}
100% {
top: -1px;
left: -1px;
width: 58px;
height: 58px;
opacity: 0;
}
}
</style>
</head>
<body>
<app-root>
loading...
</app-root>
<app-root>
<div class="lds-ripple">
<div></div>
<div></div>
</div>
</app-root>
<script src="https://unpkg.com/ionicons@4.4.2/dist/ionicons.js"></script>
<script src="https://unpkg.com/ionicons@4.4.2/dist/ionicons.js"></script>
</body>
</html>

5
src/sass/_commons.scss Normal file
View File

@ -0,0 +1,5 @@
.waiting-icon {
width: 40px;
display: block;
margin: 5px auto;
}

3
src/sass/_panel.scss
View File

@ -1,4 +1,5 @@
.panel{
width: 100%;
padding: 10px 10px 0 7px;
font-size: $small-font-size;
&__title {
@ -6,4 +7,4 @@
text-transform: uppercase;
margin: 6px 0 12px 0;
}
}
}