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

Merge pull request #317 from NicolasConstant/topic_enhance-tutorial

Browse Source 
Topic enhance tutorial
This commit is contained in:
Nicolas Constant 2020-09-13 23:27:51 +02:00 committed by GitHub
commit 7b94b950d2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
22 changed files with 372 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package-lock.json generated
View File

@ -1,6 +1,6 @@
{
"name": "sengi",
"version": "0.20.1",
"version": "0.27.1",
"lockfileVersion": 1,
"requires": true,
"dependencies": {

2
src/app/app.component.scss
View File

@ -179,7 +179,7 @@ app-streams-selection-footer {
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
background-color: rgba(0,0,0,0.9);
z-index: 9999999;
opacity: 0;
transition: all .4s;

13
src/app/app.component.ts
View File

@ -62,9 +62,6 @@ export class AppComponent implements OnInit, OnDestroy {
}
ngOnInit(): void {
// disable tutorial for future update
localStorage.setItem('tutorial', JSON.stringify(true));
this.paramsSub = this.activatedRoute.queryParams.subscribe(params => {
const code = params['code'];
if (!code) {
@ -164,11 +161,7 @@ export class AppComponent implements OnInit, OnDestroy {
enhancedTutorialVisible: boolean;
private checkEnhancedTutorial() {
let enhancedTutorialDesactivated = JSON.parse(localStorage.getItem('tutorial'));
console.warn(enhancedTutorialDesactivated);
if (!this.floatingColumnActive && !this.tutorialActive && !enhancedTutorialDesactivated) {
console.warn('load enhanced tutorial');
setTimeout(() => {
this.enhancedTutorialActive = true;
setTimeout(() => {
@ -179,12 +172,12 @@ export class AppComponent implements OnInit, OnDestroy {
}
closeTutorial(){
console.warn('close tutorial');
localStorage.setItem('tutorial', JSON.stringify(true));
this.enhancedTutorialVisible = false;
setTimeout(() => {
this.enhancedTutorialActive = false;
}, 400);
//localStorage.setItem('tutorial', JSON.stringify(true));
}, 400);
}
ngOnDestroy(): void {

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

@ -89,6 +89,7 @@ import { AccountComponent } from './components/common/account/account.component'
import { TutorialEnhancedComponent } from './components/tutorial-enhanced/tutorial-enhanced.component';
import { NotificationsTutorialComponent } from './components/tutorial-enhanced/notifications-tutorial/notifications-tutorial.component';
import { LabelsTutorialComponent } from './components/tutorial-enhanced/labels-tutorial/labels-tutorial.component';
import { ThankyouTutorialComponent } from './components/tutorial-enhanced/thankyou-tutorial/thankyou-tutorial.component';
const routes: Routes = [
{ path: "", component: StreamsMainDisplayComponent },
@ -154,10 +155,11 @@ const routes: Routes = [
AttachementImageComponent,
EnsureHttpsPipe,
UserFollowsComponent,
AccountComponent
AccountComponent,
TutorialEnhancedComponent,
NotificationsTutorialComponent,
LabelsTutorialComponent
LabelsTutorialComponent,
ThankyouTutorialComponent
],
entryComponents: [
EmojiPickerComponent

3
src/app/components/floating-column/settings/settings.component.html
View File

@ -148,7 +148,8 @@
<h4 class="panel__subtitle">About</h4>
<p class="version">
Sengi version: {{version}}<br />
<a href class="version__link" (click)="checkForUpdates()">check for updates</a>
<a href class="version__link" (click)="openTutorial()">open tutorial</a><br/>
<a href class="version__link" (click)="checkForUpdates()">check for updates</a>
<app-waiting-animation *ngIf="isCheckingUpdates" class="waiting-icon"></app-waiting-animation>
</p>

8
src/app/components/floating-column/settings/settings.component.ts
View File

@ -8,6 +8,7 @@ import { UserNotificationService, NotificationSoundDefinition } from '../../../s
import { ServiceWorkerService } from '../../../services/service-worker.service';
import { ContentWarningPolicy, ContentWarningPolicyEnum, TimeLineModeEnum, TimeLineHeaderEnum } from '../../../states/settings.state';
import { NotificationService } from '../../../services/notification.service';
import { NavigationService } from '../../../services/navigation.service';
@Component({
selector: 'app-settings',
@ -60,6 +61,7 @@ export class SettingsComponent implements OnInit {
}
constructor(
private readonly navigationService: NavigationService,
private formBuilder: FormBuilder,
private serviceWorkersService: ServiceWorkerService,
private readonly toolsService: ToolsService,
@ -250,6 +252,12 @@ export class SettingsComponent implements OnInit {
notifyRestartNeeded(){
this.notificationService.notifyRestartNotification('Reload to apply changes');
}
openTutorial(): boolean {
localStorage.setItem('tutorial', JSON.stringify(false));
this.navigationService.closePanel();
return false;
}
}
enum ColumnShortcut {

71
src/app/components/tutorial-enhanced/labels-tutorial/labels-tutorial.component.html
View File

@ -1,10 +1,69 @@
<div class="tutorial-content">
<h3 class="tutorial-content__subtitle">Labels</h3>
<div class="tutorial-content flexcroll">
<h2 class="tutorial-content__title-important">Labels</h2>
<p>
Toots in Sengi have little labels under the avatar:<br/>
Sengi uses labels on statuses to describe them properly: <br />
<br />
[TODO]<br />
<br />
Here are the signification of them:
<img class="content__expand" src="assets/img/labels.png" /><br />
</p>
<h3 class="tutorial-content__subtitle">Definitions</h3>
<br />
<div class="doc-label-wrapper">
<div class="doc-label doc-label__bot">
BOT
</div>
<div class="doc-label-definition">
The account is tagged as a bot
</div>
</div>
<div class="doc-label-wrapper">
<div class="doc-label doc-label__replies">
REPLIES
</div>
<div class="doc-label-definition">
The status has replies
</div>
</div>
<div class="doc-label-wrapper">
<div class="doc-label doc-label__thread">
THREAD
</div>
<div class="doc-label-definition">
The status is part of a thread
</div>
</div>
<div class="doc-label-wrapper">
<div class="doc-label doc-label__xpost">
X-POST
</div>
<div class="doc-label-definition">
The status was cross-posted using a software like <a href="https://moa.party/" target="_blank">MOA</a>.<br/>
<span class="doc-label-definition__gray">This functionality is limited to Local TL/Accounts due to API limitation.</span>
</div>
</div>
<div class="doc-label-wrapper">
<div class="doc-label doc-label__old">
OLD
</div>
<div class="doc-label-definition">
The status was posted more than 3 months ago.
</div>
</div>
<div class="doc-label-wrapper">
<div class="doc-label doc-label__remote">
REMOTE
</div>
<div class="doc-label-definition">
The status wasn't federated with your instance and was fetched remotely.<br/>
<span class="doc-label-definition__gray">This functionality bypasses the blocking rules of your account/instance, you can disable it in the settings.</span>
</div>
</div>
<p>
</p>
</div>

60
src/app/components/tutorial-enhanced/labels-tutorial/labels-tutorial.component.scss
View File

@ -0,0 +1,60 @@
.doc-label-wrapper {
margin-bottom: 15px;
}
.doc-label {
width: 70px;
// height: 15px;
color: white;
text-align: center;
padding: 3px 0 2px 0;
font-size: 11px;
border-radius: 3px;
float: left;
&__bot {
background-color: #017282;
}
&__replies {
background-color: #59028f;
}
&__thread {
background-color: #007233;
}
&__xpost {
background-color: #9f5d00;
}
&__old {
background-color: #960000;
}
&__remote {
background-color: #264d94;
}
}
.doc-label-definition {
margin-left: 85px;
position: relative;
// top: -1px;
& a {
color: white;
text-decoration: underline;
&:hover, &:active, &:focus {
color: rgb(218, 218, 218);
}
}
&__gray {
display: inline-block;
margin-top: 5px;
color: #0f111a;
color: #9497a5;
}
}

2
src/app/components/tutorial-enhanced/labels-tutorial/labels-tutorial.component.ts
View File

@ -3,7 +3,7 @@ import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-labels-tutorial',
templateUrl: './labels-tutorial.component.html',
styleUrls: ['../tutorial-enhanced.component.scss']
styleUrls: ['../tutorial-enhanced.component.scss', 'labels-tutorial.component.scss']
})
export class LabelsTutorialComponent implements OnInit {

28
src/app/components/tutorial-enhanced/notifications-tutorial/notifications-tutorial.component.html
View File

@ -1,30 +1,32 @@
<div class="tutorial-content">
<h2 class="tutorial-content__title">And... you're all set! 🎉</h2>
<div class="tutorial-content flexcroll">
<h2 class="tutorial-content__title-important">And... you're all set! 🎉</h2>
<p>
Please find below more informations about Sengi.<br />
Please find below more information about Sengi.<br />
<br />
</p>
<h3 class="tutorial-content__subtitle">Notifications</h3>
<p>
By default, Sengi doesn't need notification timelines: it has it's own way to do it.<br />
By default, Sengi doesn't need notification timelines: it has its own way to do it.<br />
<br />
When your account will receive a new mention, follow, boost, favorite and other kind of notifications, your
avatar's icon will start flashing this way:<br />
<br />
[TODO]<br />
<video class="content__center" role="application" loop autoplay>
<source src="assets/video/flashing.mp4" type="video/mp4">
</video>
<br />
If you right-click on your avatar, the account panel will automatically open and switch to the related
subsection (mentions or notifications) and show you the last entries.<br />
The flashing animation will then automatically stop:<br />
<br />
[TODO]<br />
<video class="content__expand" role="application" loop autoplay>
<source src="assets/video/notification.mp4" type="video/mp4">
</video>
<br />
The flashing animation will then automatically stop.<br />
The aim of this mechanism is to prevent the flood of notification timelines (one per account) in the interface,
especially if you add a lot of accounts in Sengi. <br />
<br />
<br />
The aim of this mecanism is to prevent the flood of notification timelines (one per account) in the interface, especally if you add a lot of accounts in Sengi. <br />
<br />
<br />
Of course, you can disable various parts of this mecanism in the settings panel.<br />
</p>
Of course, you can disable various parts of this mechanism in the settings like "disable avatar notification", "disable account's panel autofocus", etc.<br />
</p>
</div>

36
src/app/components/tutorial-enhanced/thankyou-tutorial/thankyou-tutorial.component.html Normal file
View File

@ -0,0 +1,36 @@
<div class="tutorial-content flexcroll">
<h2 class="tutorial-content__title-important">Thank you!</h2>
<p>
Thank you for downloading Sengi, I hope you will enjoy using this app as much as I did when making it.<br />
<br />
Please find below some useful informations and... that's it! <br />
<br />
</p>
<h3 class="tutorial-content__subtitle">The app's account</h3>
<p>
<a href="https://mastodon.social/@sengi_app" target="_blank">
<img class="content__expand content__expand--smaller" src="assets/img/account.png" /><br />
</a>
<a class="follow" href (click)="follow()" title="follow @Sengi_app with all your account(s)" [class.follow__disabled]="followingDisabled">
Follow @Sengi_app
</a>
</p>
<h3 class="tutorial-content__subtitle">Alternative builds</h3>
<p>
<a class="link link__tab" href="https://hub.docker.com/r/nicolasconstant/sengi" target="_blank">Official Docker
build</a><br />
<a class="link link__tab" href="https://snapcraft.io/sengi" target="_blank">Official Snap build</a><br />
<br />
</p>
<h3 class="tutorial-content__subtitle">Other ressources</h3>
<p>
<a class="link link__tab" href="https://nicolasconstant.github.io/sengi/" target="_blank">Official
page</a><br />
<a class="link link__tab" href="https://github.com/NicolasConstant/sengi" target="_blank">Github
Repository</a><br />
<a class="link link__tab" href="https://write.as/nicolas-constant/" target="_blank">Maintainer's dev
blog</a><br />
<br />
</p>
</div>

29
src/app/components/tutorial-enhanced/thankyou-tutorial/thankyou-tutorial.component.scss Normal file
View File

@ -0,0 +1,29 @@
.follow {
color: white;
display: block;
border: 1px solid rgb(0, 84, 122);
border-radius: 5px;
width: 200px;
text-align: center;
padding: 10px 0;
margin: 0 auto 30px auto;
transition: all .2s;
box-shadow: inset 0 0 5px rgb(0, 84, 122);
&:hover,
&:focus {
text-decoration: none;
background-color: rgb(0, 84, 122);
}
&__disabled {
opacity: .15;
border: 1px solid gray;
&:hover,
&:focus {
text-decoration: none;
background-color: gray;
}
}
}

25
src/app/components/tutorial-enhanced/thankyou-tutorial/thankyou-tutorial.component.spec.ts Normal file
View File

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

41
src/app/components/tutorial-enhanced/thankyou-tutorial/thankyou-tutorial.component.ts Normal file
View File

@ -0,0 +1,41 @@
import { Component, OnInit } from '@angular/core';
import { ToolsService } from '../../../services/tools.service';
import { MastodonWrapperService } from '../../../services/mastodon-wrapper.service';
import { NotificationService } from '../../../services/notification.service';
@Component({
selector: 'app-thankyou-tutorial',
templateUrl: './thankyou-tutorial.component.html',
styleUrls: ['../tutorial-enhanced.component.scss', './thankyou-tutorial.component.scss']
})
export class ThankyouTutorialComponent implements OnInit {
followingDisabled: boolean;
constructor(
private readonly notificationService: NotificationService,
private readonly mastodonService: MastodonWrapperService,
private readonly toolsService: ToolsService) { }
ngOnInit() {
}
follow(): boolean {
if(this.followingDisabled) return;
this.followingDisabled = true;
const accounts = this.toolsService.getAllAccounts();
for (let acc of accounts) {
this.toolsService.findAccount(acc, "@sengi_app@mastodon.social")
.then(sengi => {
return this.mastodonService.follow(acc, sengi);
})
.catch(err => {
this.followingDisabled = false;
this.notificationService.notifyHttpError(err, acc);
});
}
return false;
}
}

8
src/app/components/tutorial-enhanced/tutorial-enhanced.component.html
View File

@ -1,6 +1,8 @@
<div class="tutorial">
<div class="tutorial__content flexcroll">
<div class="tutorial__content">
<app-notifications-tutorial *ngIf="index === 0"></app-notifications-tutorial>
<app-labels-tutorial *ngIf="index === 1"></app-labels-tutorial>
<app-thankyou-tutorial *ngIf="index === 2"></app-thankyou-tutorial>
</div>
<div class="tutorial__footer">
<a href (click)="close()"
@ -12,7 +14,7 @@
[class.tutorial__footer--button--disabled]="!previousAvailable">prev.</a>
<a href (click)="next()"
title="next"
class="tutorial__footer--button tutorial__footer--button--navigate"
[class.tutorial__footer--button--disabled]="!nextAvailable">next</a>
class="tutorial__footer--button tutorial__footer--button--next"
[class.tutorial__footer--button--disabled]="!nextAvailable"><span *ngIf="!tutorialEnded">next</span><span *ngIf="tutorialEnded">close</span></a>
</div>
</div>

71
src/app/components/tutorial-enhanced/tutorial-enhanced.component.scss
View File

@ -12,9 +12,6 @@ $footer-height: 30px;
border-radius: 2px;
&__content {
// outline: 1px dotted greenyellow;
overflow-y: auto;
padding: 5px 10px;
height: calc(100% - #{$footer-height});
}
@ -30,10 +27,10 @@ $footer-height: 30px;
height: $footer-height;
width: calc(33.33333% - 1px);
color: white;
padding-top: 3px;
padding-top: 4px;
transition: all .2s;
&:not(:last-child){
&:not(:last-child) {
border-right: 1px solid $border-color;
}
@ -45,18 +42,33 @@ $footer-height: 30px;
}
&--navigate {
&:hover {
text-decoration: none;
background-color: rgb(0, 117, 172);
}
}
&--next {
background-color: rgb(230, 230, 230);
background-color: rgb(0, 74, 109);
background-color: rgb(0, 84, 122);
color: white;
// font-weight: bold;
&:hover {
text-decoration: none;
background-color: rgb(0, 74, 109);
background-color: rgb(0, 117, 172);
}
}
&--disabled {
color: #4e5672;
&:hover {
cursor: default;
text-decoration: none;
background-color: rgba(0, 0, 0, 0);
text-decoration: none;
background-color: rgba(0, 0, 0, 0);
}
}
}
@ -66,13 +78,56 @@ $footer-height: 30px;
.tutorial-content {
font-size: 14px;
padding: 5px 10px;
overflow-y: auto;
height: calc(100%);
&__title {
font-size: 20px;
}
&__title-important {
font-size: 20px;
margin: 5px 0 15px 10px;
}
&__subtitle {
font-size: 16px;
}
}
.content {
&__center {
margin: auto;
width: 48px;
display: block;
}
&__expand {
margin: auto;
width: calc(100%);
max-width: 380px;
display: block;
&--smaller {
max-width: 270px;
}
}
}
.link {
color: white;
text-decoration: underline;
&:hover,
&:active,
&:focus {
color: rgb(218, 218, 218);
}
&__tab {
padding-left: 10px;
}
}

9
src/app/components/tutorial-enhanced/tutorial-enhanced.component.ts
View File

@ -11,7 +11,8 @@ export class TutorialEnhancedComponent implements OnInit {
previousAvailable = false;
nextAvailable = true;
index = 0;
private maxIndex = 5;
tutorialEnded = false;
private maxIndex = 3;
constructor() { }
@ -38,6 +39,12 @@ export class TutorialEnhancedComponent implements OnInit {
}
private checkState() {
if(this.index >= this.maxIndex - 1){
this.tutorialEnded = true;
} else {
this.tutorialEnded = false;
}
if (this.index === 0) {
this.previousAvailable = false;
} else {

5
src/app/services/tools.service.ts
View File

@ -119,6 +119,11 @@ export class ToolsService {
return regAccounts.filter(x => x.isSelected);
}
getAllAccounts(): AccountInfo[] {
let regAccounts = <AccountInfo[]>this.store.snapshot().registeredaccounts.accounts;
return regAccounts;
}
getAccountById(accountId: string): AccountInfo {
let regAccounts = <AccountInfo[]>this.store.snapshot().registeredaccounts.accounts;
return regAccounts.find(x => x.id === accountId);

BIN
src/assets/img/account.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 65 KiB

BIN
src/assets/img/labels.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 29 KiB

BIN
src/assets/video/flashing.mp4 Normal file
View File

Binary file not shown.

BIN
src/assets/video/notification.mp4 Normal file
View File

Binary file not shown.