Skip to content

Commit 6332052

Browse files
sondrebsondreb
committed
WIP: Add Files component and import dialog with file upload functionality. Due to issues with servers this is not fully implemeneted.
1 parent dd9e17a commit 6332052

10 files changed

Lines changed: 781 additions & 1 deletion

File tree

‎src/app/app.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -183,6 +183,10 @@ <h3><span *ngIf="profile?.name">&#64;</span>{{ profile?.name }}</h3>
183183
<mat-icon>edit</mat-icon>
184184
<span>{{ 'App.EditProfile' | translate }}</span>
185185
</a>
186+
<!-- <a class="nav-link" [routerLink]="['/files', appState.getPublicKey()]" mat-menu-item (click)="toggleProfileMenu()" [routerLinkActiveOptions]="{ exact: true }" routerLinkActive="active">
187+
<mat-icon>folder</mat-icon>
188+
<span>{{ 'App.Files' | translate }}</span>
189+
</a> -->
186190
<a class="nav-link" [routerLink]="['/badges', appState.getPublicKey()]" mat-menu-item (click)="toggleProfileMenu()" [routerLinkActiveOptions]="{ exact: true }" routerLinkActive="active">
187191
<mat-icon>badge</mat-icon>
188192
<span>{{ 'App.Badges' | translate }}</span>

‎src/app/app.routes.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ import { EditorBadgesComponent } from './editor-badges/editor';
3434
import { BadgeComponent } from './badge/badge';
3535
import { ExampleComponent } from './example/example';
3636
import { ArticlesComponent } from './articles/articles.component';
37+
import { FilesComponent } from './files/files.component';
3738

3839
export const routes: Routes = [
3940
{
@@ -76,6 +77,14 @@ export const routes: Routes = [
7677
data: LoadingResolverService,
7778
},
7879
},
80+
{
81+
path: 'files/:id',
82+
component: FilesComponent,
83+
canActivate: [AuthGuard],
84+
resolve: {
85+
data: LoadingResolverService,
86+
},
87+
},
7988
{
8089
path: 'articles',
8190
component: ArticlesComponent,

‎src/app/files/files.component.css‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
.loading {
2+
margin: auto;
3+
margin-top: 2em;
4+
margin-bottom: 2em;
5+
}
6+
7+
.input-full-width {
8+
width: 100% !important;
9+
}
10+
11+
.search {
12+
margin-top: 1em;
13+
padding: 1em 1em 0em 1em;
14+
margin-bottom: 1em;
15+
border-radius: 10px;
16+
}
17+
18+
.people-list {
19+
display: flex;
20+
flex-direction: row;
21+
flex-wrap: wrap;
22+
gap: 1em;
23+
margin-top: 1em;
24+
}
25+
26+
.people-list-1 {
27+
display: block;
28+
}
29+
30+
.people-list-2 {
31+
display: block;
32+
}
33+
34+
/* .people-list > * {
35+
flex: 1 1 240px;
36+
} */
37+
38+
.people-card {
39+
flex: 1 1 240px;
40+
}
41+
42+
.profile-banner {
43+
min-height: 240px;
44+
/* margin-bottom: 30em;
45+
position: fixed; */
46+
47+
background-repeat: no-repeat;
48+
background-position: center;
49+
background-size: cover;
50+
margin-top: -2em;
51+
}
52+
53+
.people-actions button {
54+
margin-right: 0.4em;
55+
margin-bottom: 0.4em;
56+
}

‎src/app/files/files.component.html‎

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
<div class="feed-page">
2+
<!-- <p class="search">
3+
<mat-form-field appearance="fill" class="input-full-width">
4+
<mat-label>Search in People</mat-label>
5+
<input matInput placeholder="name, display name, about or pubkey" type="search" (keyup.enter)="search()" [(ngModel)]="searchTerm" />
6+
<mat-icon matSuffix>search</mat-icon>
7+
</mat-form-field>
8+
</p> -->
9+
10+
<div class="options">
11+
<mat-accordion>
12+
<mat-expansion-panel>
13+
<mat-expansion-panel-header>
14+
<mat-panel-title>{{ 'People.Options' | translate }}</mat-panel-title>
15+
<mat-panel-description></mat-panel-description>
16+
</mat-expansion-panel-header>
17+
18+
<!-- <p>
19+
<mat-slide-toggle class="options-slider" [(ngModel)]="showBlocked" (change)="optionsUpdated($event, 1)">Show blocked</mat-slide-toggle>
20+
<mat-slide-toggle class="options-slider" [(ngModel)]="showMuted" (change)="optionsUpdated($event, 2)">Show muted</mat-slide-toggle>
21+
<mat-slide-toggle class="options-slider" [(ngModel)]="showCached" (change)="optionsUpdated($event, 3)">Show cached</mat-slide-toggle>
22+
</p> -->
23+
24+
<mat-form-field class="options-field">
25+
<mat-label>{{ 'People.Show' | translate }}</mat-label>
26+
<mat-select (selectionChange)="showChanged()" [(value)]="optionsService.values.peopleDisplayType">
27+
<mat-option [value]="1">{{ 'People.Following' | translate }}</mat-option>
28+
<mat-option [value]="2">{{ 'People.Muted' | translate }}</mat-option>
29+
<mat-option [value]="3">{{ 'People.Blocked' | translate }}</mat-option>
30+
<mat-option [value]="0">{{ 'People.Cached' | translate }}</mat-option>
31+
</mat-select>
32+
</mat-form-field>
33+
34+
<mat-form-field class="options-field">
35+
<mat-label>{{ 'People.Sorting' | translate }}</mat-label>
36+
<mat-select (selectionChange)="updateSorting()" [(value)]="optionsService.values.peopleDisplaySort">
37+
<mat-option value="name-asc">{{ 'People.NameAZ' | translate }}</mat-option>
38+
<mat-option value="name-desc">{{ 'People.NameZA' | translate }}</mat-option>
39+
<mat-option value="followed-asc">{{ 'People.FollowedNewest' | translate }}</mat-option>
40+
<mat-option value="followed-desc">{{ 'People.FollowedOldest' | translate }}</mat-option>
41+
<mat-option value="created-asc">{{ 'People.UpdatedNewest' | translate }}</mat-option>
42+
<mat-option value="created-desc">{{ 'People.UpdatedOldest' | translate }}</mat-option>
43+
<mat-option value="interesting-asc">{{ 'People.MostInteresting' | translate }}</mat-option>
44+
<mat-option value="interesting-desc">{{ 'People.LessInteresting' | translate }}</mat-option>
45+
</mat-select>
46+
</mat-form-field>
47+
48+
<mat-form-field class="options-field">
49+
<mat-label>{{ 'People.View' | translate }}</mat-label>
50+
<mat-select (selectionChange)="showChanged()" [(value)]="optionsService.values.peopleDisplayView">
51+
<mat-option [value]="6">{{ 'People.LargeIcons' | translate }}</mat-option>
52+
<mat-option [value]="5">{{ 'People.MediumIcons' | translate }}</mat-option>
53+
<mat-option [value]="4">{{ 'People.SmallIcons' | translate }} </mat-option>
54+
<!-- <mat-option [value]="3">List</mat-option> -->
55+
<mat-option [value]="2">{{ 'People.Details' | translate }} </mat-option>
56+
<mat-option [value]="0">{{ 'People.Tiles' | translate }}</mat-option>
57+
<mat-option [value]="1">{{ 'People.Content' | translate }} </mat-option>
58+
</mat-select>
59+
</mat-form-field>
60+
61+
<!-- <mat-slide-toggle class="options-slider" (change)="optionsService.save()" [(ngModel)]="optionsService.values.peopleDisplayAbout">Display about</mat-slide-toggle>
62+
<mat-slide-toggle class="options-slider" (change)="optionsService.save()" [(ngModel)]="optionsService.values.peopleDisplayDate">Display date</mat-slide-toggle> -->
63+
64+
<p class="people-actions">
65+
<!-- <button mat-stroked-button (click)="importFollowList()">Import Following List</button> -->
66+
<button mat-stroked-button (click)="dataService.publishContactsAndRelays()">{{ 'People.PublishFollowList' | translate }} </button>
67+
<button mat-stroked-button (click)="downloadFollowing()">{{ 'People.SavePublicFollowing' | translate }} </button>
68+
<!-- <button mat-stroked-button (click)="dataService.save()">Save People List (backup)</button> -->
69+
</p>
70+
</mat-expansion-panel>
71+
</mat-accordion>
72+
</div>
73+
74+
<div class="people-list" [ngClass]="['people-list-' + optionsService.values.peopleDisplayView]">
75+
<ng-template [ngIf]="!loading">
76+
<ng-template [ngIf]="optionsService.values.peopleDisplayView == 0 || optionsService.values.peopleDisplayView == null">
77+
<mat-card class="people-card people clickable" (click)="navigation.openProfile($event, profile)" *ngFor="let profile of sortedItems; trackBy: trackByFn">
78+
<!-- ; trackBy: trackByFn track by won't update when changing circle. -->
79+
<div class="events-header">
80+
<!-- <div [style.background-image]="utilities.getBannerBackgroundStyle(profile.banner)" class="profile-banner"></div> -->
81+
<app-event-header [profile]="profile">
82+
<small> <span class="clickable" *ngIf="profile.created">{{ 'People.Followed' | translate }} {{ profile.created | ago }}</span> <app-directory-icon [pubkey]="profile.pubkey"></app-directory-icon> </small>
83+
</app-event-header>
84+
<app-profile-actions [profile]="profile"></app-profile-actions>
85+
</div>
86+
<div class="content clickable">{{ profile.about }}</div>
87+
</mat-card>
88+
</ng-template>
89+
90+
<ng-template [ngIf]="optionsService.values.peopleDisplayView == 1">
91+
<app-event-header [listType]="'content'" [iconSize]="'small'" [displayName]="true" [displayContent]="true" *ngFor="let profile of sortedItems; trackBy: trackByFn" [profile]="profile"></app-event-header>
92+
</ng-template>
93+
94+
<ng-template [ngIf]="optionsService.values.peopleDisplayView == 2">
95+
<app-event-header [listType]="'details'" [iconSize]="'small'" [displayName]="true" [displayContent]="true" *ngFor="let profile of sortedItems; trackBy: trackByFn" [profile]="profile"></app-event-header>
96+
</ng-template>
97+
98+
<ng-template [ngIf]="optionsService.values.peopleDisplayView == 3">
99+
<app-event-header [iconSize]="'small'" [displayName]="false" [displayContent]="false" *ngFor="let profile of sortedItems; trackBy: trackByFn" [profile]="profile"></app-event-header>
100+
</ng-template>
101+
102+
<ng-template [ngIf]="optionsService.values.peopleDisplayView == 4">
103+
<app-event-header [listType]="'icon'" [iconSize]="'small'" [displayName]="false" [displayContent]="false" *ngFor="let profile of sortedItems; trackBy: trackByFn" [profile]="profile"></app-event-header>
104+
</ng-template>
105+
<ng-template [ngIf]="optionsService.values.peopleDisplayView == 5">
106+
<app-event-header [listType]="'icon'" [iconSize]="'medium'" [displayName]="false" [displayContent]="false" *ngFor="let profile of sortedItems; trackBy: trackByFn" [profile]="profile"></app-event-header>
107+
</ng-template>
108+
<ng-template [ngIf]="optionsService.values.peopleDisplayView == 6">
109+
<app-event-header [listType]="'icon'" [iconSize]="'large'" [displayName]="false" [displayContent]="false" *ngFor="let profile of sortedItems; trackBy: trackByFn" [profile]="profile"></app-event-header>
110+
</ng-template>
111+
</ng-template>
112+
113+
<ng-template [ngIf]="loading"><mat-spinner class="loading"></mat-spinner></ng-template>
114+
</div>
115+
116+
<p class="centered">Count: {{sortedItems.length}}</p>
117+
118+
<!--
119+
<div *ngIf="items$ | withLoading | async as items">
120+
<ng-template [ngIf]="items.value">Value: {{ items.value }}</ng-template>
121+
<ng-template [ngIf]="items.error">Error {{ items.error }}</ng-template>
122+
<ng-template [ngIf]="items.loading">Loading...</ng-template>
123+
</div> -->
124+
125+
<!-- <div *ngIf="items$ | async as profiles"> -->
126+
<!-- <div class="centered" style="width: 100%">
127+
<br />
128+
<mat-spinner class="loading"></mat-spinner>
129+
</div> -->
130+
131+
<!-- Count: {{ profiles.length }} -->
132+
<!-- </div> -->
133+
134+
<!-- <p class="dimmed">People are those you are following. You can use circles to organize your people.</p> -->
135+
</div>

0 commit comments

Comments
 (0)