diff --git a/src/app/components/home/home-page/home-page.component.html b/src/app/components/home/home-page/home-page.component.html
index b5c84875fa847855eedad0bcf02dde97e59e79f6..fa008117e4817c6b01bf947210a67f5dc1a19946 100644
--- a/src/app/components/home/home-page/home-page.component.html
+++ b/src/app/components/home/home-page/home-page.component.html
@@ -39,11 +39,11 @@
</div>
<h2>
- <span class="feedback"
- [joyrideStep]="'feedbackLink'"
- appJoyrideTemplate
- [stepPosition]="'top'">
- <a class="info"
+ <span class="feedback">
+ <a [joyrideStep]="'feedbackLink'"
+ appJoyrideTemplate
+ [stepPosition]="'top'"
+ class="info"
href="https://frag.jetzt/participant/room/Feedback/comments"
target="_blank"
aria-labelledby="feedback-aria">{{ 'login.welcome-feedback' | translate }}
diff --git a/src/app/components/home/home-page/home-page.component.scss b/src/app/components/home/home-page/home-page.component.scss
index eb98c4c34cf60304d9a1d3a028ae02a58580f587..57268df5858112858ab237b212b972ef84b4387c 100644
--- a/src/app/components/home/home-page/home-page.component.scss
+++ b/src/app/components/home/home-page/home-page.component.scss
@@ -32,6 +32,11 @@
font-size: 60%;
text-align: center;
color: var(--on-background);
+
+ > a {
+ padding: 5px;
+ display: inline;
+ }
}
@keyframes moveInLeft {
diff --git a/src/app/components/shared/_dialogs/joyride-template/joyride-template.component.scss b/src/app/components/shared/_dialogs/joyride-template/joyride-template.component.scss
index 7e4668e4ba5992fd8a451485c206357aba0dc8c9..8dd983ea0a686d0b6944cf8a06ea34a5174facdf 100644
--- a/src/app/components/shared/_dialogs/joyride-template/joyride-template.component.scss
+++ b/src/app/components/shared/_dialogs/joyride-template/joyride-template.component.scss
@@ -57,6 +57,10 @@
stroke: var(--on-dialog);
}
}
+
+ .joyride-step__body {
+ hyphens: auto;
+ }
}
.joy-primary {
@@ -72,7 +76,3 @@
h3 {
margin-top: 0;
}
-
-.textContainer {
- hyphens: auto;
-}
diff --git a/src/app/components/shared/comment-list/comment-list.component.html b/src/app/components/shared/comment-list/comment-list.component.html
index 0f38c14e5a693db574fda6d8156ec4282e1a7bb2..0b41ad4d82e2674ab4c4d266e588d64433f87f85 100644
--- a/src/app/components/shared/comment-list/comment-list.component.html
+++ b/src/app/components/shared/comment-list/comment-list.component.html
@@ -36,6 +36,7 @@
</button>
<div class="button-bar"
+ [ngClass]="{'joyrideActive': isJoyrideActive}"
[joyrideStep]="'commentFilter'"
[stepPosition]="'bottom'"
appJoyrideTemplate
@@ -243,7 +244,7 @@
<mat-icon>arrow_upward</mat-icon>
</button>
-<div class="fab_add_comment"
+<div id="createCommentJoyrideWrapper"
[joyrideStep]="'createQuestion'"
[stepPosition]="'center'"
appJoyrideTemplate>
diff --git a/src/app/components/shared/comment-list/comment-list.component.scss b/src/app/components/shared/comment-list/comment-list.component.scss
index ad917ddb448a6b9f88bdd3e0cef467daa290ba27..9dc447656b6f0344c40a348a1f39c4d9fb888670 100644
--- a/src/app/components/shared/comment-list/comment-list.component.scss
+++ b/src/app/components/shared/comment-list/comment-list.component.scss
@@ -1,3 +1,5 @@
+$joyrideElementPadding: 5px;
+
app-comment {
overflow: auto;
overflow-wrap: break-word;
@@ -115,6 +117,11 @@ app-comment {
margin-right: 2%;
}
+.button-bar.joyrideActive {
+ padding: 15px;
+ margin: unset;
+}
+
.correct-icon {
color: var(--green);
}
@@ -226,11 +233,12 @@ h3 {
transition: all 0.1s ease-in-out;
}
-div.fab_add_comment {
- width: 56px;
- height: 56px;
- right: 6px;
- bottom: 46px;
+#createCommentJoyrideWrapper {
+ position: fixed;
+ width: 56px + 2 * $joyrideElementPadding;
+ height: 56px + 2 * $joyrideElementPadding;
+ right: 17px - $joyrideElementPadding;
+ bottom: 57px - $joyrideElementPadding;
visibility: hidden;
}
diff --git a/src/app/components/shared/comment-list/comment-list.component.ts b/src/app/components/shared/comment-list/comment-list.component.ts
index 850c4a128767195d8c30cab446f9a4fd44ac4a88..87dbbd3fd7943fbef55860bc7f14f0c2caaa9d0e 100644
--- a/src/app/components/shared/comment-list/comment-list.component.ts
+++ b/src/app/components/shared/comment-list/comment-list.component.ts
@@ -102,6 +102,7 @@ export class CommentListComponent implements OnInit, OnDestroy {
commentsEnabled: boolean;
userNumberSelection = 0;
createCommentWrapper: CreateCommentWrapper = null;
+ isJoyrideActive = false;
private _subscriptionEventServiceTagConfig = null;
private _subscriptionEventServiceRoomData = null;
private _subscriptionRoomService = null;
@@ -275,7 +276,7 @@ export class CommentListComponent implements OnInit, OnDestroy {
this.comments = comments;
this.getComments();
this.eventService.broadcast('commentListCreated', null);
- this.onboardingService.startDefaultTour();
+ this.isJoyrideActive = this.onboardingService.startDefaultTour();
});
this.subscribeCommentStream();
});
diff --git a/src/app/components/shared/comment/comment.component.html b/src/app/components/shared/comment/comment.component.html
index 0f7a1c195a3fe506c7a64781e900a14122bb6bb2..1e7139434735eeec40b98ef61076bd1ea165b4b6 100644
--- a/src/app/components/shared/comment/comment.component.html
+++ b/src/app/components/shared/comment/comment.component.html
@@ -328,7 +328,7 @@
{{comment.tag}}
</span>
</div>
- <div class="user-number"
+ <div class="user-number joyrideActive"
*ngIf="usesJoyride"
[joyrideStep]="'commentUserNumber'"
[stepPosition]="'right'"
diff --git a/src/app/components/shared/comment/comment.component.scss b/src/app/components/shared/comment/comment.component.scss
index 3f20f61d7156e93063d5e860d87d05f7b805a8e1..d4016d05999df61fb84d7b36bfdc227bc7dcfa1b 100644
--- a/src/app/components/shared/comment/comment.component.scss
+++ b/src/app/components/shared/comment/comment.component.scss
@@ -232,6 +232,10 @@ mat-card-content > :first-child {
color: var(--on-surface);
}
+.user-number.joyrideActive {
+ padding: 5px;
+}
+
.commentExpanderButton {
color: var(--on-surface);
}
diff --git a/src/app/components/shared/header/header.component.html b/src/app/components/shared/header/header.component.html
index 316c6ede2fcfeba0d19d64f80a7a6554f313c052..9385f0ecd22885fda5eb209b88345951db0d0e8d 100644
--- a/src/app/components/shared/header/header.component.html
+++ b/src/app/components/shared/header/header.component.html
@@ -1,6 +1,5 @@
<mat-toolbar class="mat-elevation-z2">
<mat-toolbar-row
-
[ngClass]="{'mat-toolbar-moderation': router.url.endsWith('/moderator/comments')}">
<button id="back-button"
@@ -11,6 +10,14 @@
<mat-icon class="header-icons">arrow_back</mat-icon>
</button>
+ <button id="tour-button"
+ mat-icon-button
+ aria-labelledby="tour-label"
+ *ngIf="router.url.endsWith('/home')"
+ (click)="startTour()">
+ <mat-icon class="header-icons">tour</mat-icon>
+ </button>
+
<ng-container *ngIf="toggleUserActivity">
<div class="userActivityIcon"
matTooltip="{{'header.users-online' | translate}}"></div>
@@ -545,5 +552,6 @@
<div class="visually-hidden">
<div id="login-label">{{'header.accessibility-login' | translate}}</div>
<div id="back-label">{{'header.accessibility-back' | translate}}</div>
+ <div id="tour-label">{{'header.accessibility-tour' | translate}}</div>
<div id="session-label">{{'header.accessibility-session' | translate}}</div>
</div>
diff --git a/src/app/components/shared/header/header.component.scss b/src/app/components/shared/header/header.component.scss
index 5dcd0476fe51e7936cf143fe1940ac38400a3b86..580b3a549e3f93d6dd8e7d71755815fbccea4964 100644
--- a/src/app/components/shared/header/header.component.scss
+++ b/src/app/components/shared/header/header.component.scss
@@ -1,3 +1,5 @@
+@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
+
.app-title {
cursor: pointer;
margin: 0 auto;
diff --git a/src/app/components/shared/header/header.component.ts b/src/app/components/shared/header/header.component.ts
index 5d4f28400e46bf5718af7e647803a3b9018be4f7..8bf64ce5745a23bb16723a140fbd32a84c50a12b 100644
--- a/src/app/components/shared/header/header.component.ts
+++ b/src/app/components/shared/header/header.component.ts
@@ -28,6 +28,7 @@ import { WorkerDialogComponent } from '../_dialogs/worker-dialog/worker-dialog.c
import { WsRoomService } from '../../../services/websockets/ws-room.service';
import { TopicCloudAdminService } from '../../../services/util/topic-cloud-admin.service';
import { HeaderService } from '../../../services/util/header.service';
+import { OnboardingService } from '../../../services/util/onboarding.service';
@Component({
selector: 'app-header',
@@ -66,7 +67,8 @@ export class HeaderComponent implements OnInit {
private roomService: RoomService,
private wsRoomService: WsRoomService,
private topicCloudAdminService: TopicCloudAdminService,
- private headerService: HeaderService
+ private headerService: HeaderService,
+ private onboardingService: OnboardingService
) {
}
@@ -231,6 +233,9 @@ export class HeaderComponent implements OnInit {
this.location.back();
}
+ startTour() {
+ this.onboardingService.startDefaultTour(true);
+ }
login(isLecturer: boolean) {
const dialogRef = this.dialog.open(LoginComponent, {
diff --git a/src/app/components/shared/room-join/room-join.component.html b/src/app/components/shared/room-join/room-join.component.html
index e86844278de8e3cadccdc84828e1c52be5ca8293..7162f3412ca36ad111d80c3e962bbe58a3965eb2 100644
--- a/src/app/components/shared/room-join/room-join.component.html
+++ b/src/app/components/shared/room-join/room-join.component.html
@@ -6,6 +6,7 @@
<div fxLayout="row"
fxLayoutAlign="center"
fxLayoutGap="10px"
+ class="layoutWrapper"
[joyrideStep]="'roomJoin'"
[stepPosition]="'top'"
appJoyrideTemplate>
diff --git a/src/app/components/shared/room-join/room-join.component.scss b/src/app/components/shared/room-join/room-join.component.scss
index a32c24a5eed86efd84e68854473675bda2813fe4..78b98bb606c6e686fb3eaab684e51ee526d4da88 100644
--- a/src/app/components/shared/room-join/room-join.component.scss
+++ b/src/app/components/shared/room-join/room-join.component.scss
@@ -2,6 +2,10 @@ mat-form-field {
color: var(--on-surface);
}
+.layoutWrapper {
+ padding-left: 15px;
+}
+
form {
padding-top: 5%;
}
diff --git a/src/app/services/util/onboarding.service.ts b/src/app/services/util/onboarding.service.ts
index 9254b67aa9bf9b3e19c76bc843ec593d577ae148..a82e1abd6cc738ee05e5f6e7231b946f2ea3384e 100644
--- a/src/app/services/util/onboarding.service.ts
+++ b/src/app/services/util/onboarding.service.ts
@@ -26,8 +26,9 @@ export class OnboardingService {
private router: Router) {
}
- startDefaultTour() {
- this.startOnboardingTour(initDefaultTour(this.authenticationService, this.dataStoreService, this.router));
+ startDefaultTour(ignoreDone = false): boolean {
+ return this.startOnboardingTour(
+ initDefaultTour(this.authenticationService, this.dataStoreService, this.router), ignoreDone);
}
doStep(stepDirection: number): boolean {
@@ -62,21 +63,29 @@ export class OnboardingService {
return false;
}
- private startOnboardingTour(tour: OnboardingTour) {
+ private startOnboardingTour(tour: OnboardingTour, ignoreDone = false): boolean {
if (this._activeTour) {
this.cleanup();
- return;
+ return false;
+ }
+ if (ignoreDone) {
+ this.dataStoreService.remove('onboarding_' + tour.name);
}
const tourInfo = JSON.parse(this.dataStoreService.get('onboarding_' + tour.name));
if (tourInfo && tourInfo.state !== 'running') {
- return;
+ return false;
}
AppComponent.rescale.setDefaultScale(1);
+ this._currentStep = tourInfo && tourInfo.step ? tourInfo.step : 1;
+ const firstStepRoute = tour.tour[this._currentStep - 1].split('@');
+ if (firstStepRoute.length > 1 && !this.router.url.endsWith('/' + firstStepRoute[1])) {
+ this.router.navigate([firstStepRoute[1]]);
+ return false;
+ }
this._activeTour = tour;
if (!tourInfo && this._activeTour.startupAction) {
this._activeTour.startupAction();
}
- this._currentStep = tourInfo && tourInfo.step ? tourInfo.step : 1;
this.emulateWalkthrough();
this._tourSubscription = this.joyrideService.startTour({
steps: tour.tour,
@@ -86,6 +95,7 @@ export class OnboardingService {
}).subscribe(step => this.afterStepMade(step));
this._eventServiceSubscription = this.eventService.on<string>('onboarding')
.subscribe(action => this.checkTourEnding(action));
+ return true;
}
private afterStepMade(step: JoyrideStepInfo) {
@@ -131,7 +141,7 @@ export class OnboardingService {
lastTourObject.afterUnload(true);
}
if (currentTourObject && currentTourObject.afterLoad) {
- lastTourObject.afterLoad(true);
+ currentTourObject.afterLoad(true);
}
lastTourObject = currentTourObject;
}
diff --git a/src/app/services/util/onboarding.tours.ts b/src/app/services/util/onboarding.tours.ts
index 7d210193b947146d1452ea02e645ae8e7c7288ce..947f388e106e3e5f3e5c8a4c69ac7901a455a576 100644
--- a/src/app/services/util/onboarding.tours.ts
+++ b/src/app/services/util/onboarding.tours.ts
@@ -51,6 +51,11 @@ export const initDefaultTour = (authenticationService: AuthenticationService,
authenticationService.logout();
}
}
+ },
+ voting: {
+ beforeLoad: () => {
+ document.getElementById('scroll_container').scrollTop = 0;
+ }
}
},
doneAction: (_) => {
diff --git a/src/assets/i18n/home/de.json b/src/assets/i18n/home/de.json
index 553c6646fc89592b942ca678ac9257e3b7044454..3ccabd1c7d3ea3a9fbfeafeefb9c6c54487da172 100644
--- a/src/assets/i18n/home/de.json
+++ b/src/assets/i18n/home/de.json
@@ -62,6 +62,7 @@
"header": {
"abort": "Abbrechen",
"accessibility-back": "Führt zur vorherigen Seite",
+ "accessibility-tour": "Startet die Onboarding Tour",
"accessibility-login": "Öffnet das Anmeldungs-Fenster.",
"accessibility-session": "Öffnet das Options-Menü. Hier kannst du deine besuchten Sitzungen einsehen oder die aktuelle Sitzung verlassen.",
"account-deleted": "Dein Konto wurde gelöscht.",
diff --git a/src/assets/i18n/home/en.json b/src/assets/i18n/home/en.json
index 2d0ae2a9675119717d879b5629dfc570b37f5157..054d7a82b60e6dcfac52021cf873149a6ba74547 100644
--- a/src/assets/i18n/home/en.json
+++ b/src/assets/i18n/home/en.json
@@ -49,6 +49,7 @@
"header": {
"abort": "Cancel",
"accessibility-back": "Go back to the previous page",
+ "accessibility-tour": "Starts the onboarding tour",
"accessibility-login": "Open the login window",
"accessibility-session": "Open the session menu. Here you can view the sessions you have attended or leave the current session.",
"account-deleted": "Your account has been deleted.",
diff --git a/src/assets/i18n/participant/de.json b/src/assets/i18n/participant/de.json
index c8c95107eeba537016d41810a425f3019ef22bea..0a1067aaa48fab2313d48f3cde53c04f4466f2c0 100644
--- a/src/assets/i18n/participant/de.json
+++ b/src/assets/i18n/participant/de.json
@@ -175,7 +175,7 @@
"votingTitle": "Fragenbewertung",
"commentFilter": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia, molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium optio, eaque rerum! Provident similique accusantium nemo autem.",
"commentFilterTitle": "Kommentarfilter",
- "commentUserNumber": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia, molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium optio, eaque rerum! Provident similique accusantium nemo autem.",
+ "commentUserNumber": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia, molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium optio, eaque rerum!",
"commentUserNumberTitle": "Anonymer User"
},
"room-page": {
diff --git a/src/assets/i18n/participant/en.json b/src/assets/i18n/participant/en.json
index 9e09e2df8a44b8549f4155317cb26e5e1faa020b..71ec990a036b6c9d0676d1d463483fa58106a2ae 100644
--- a/src/assets/i18n/participant/en.json
+++ b/src/assets/i18n/participant/en.json
@@ -184,7 +184,7 @@
"votingTitle": "Question rating",
"commentFilter": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia, molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium optio, eaque rerum! Provident similique accusantium nemo autem.",
"commentFilterTitle": "Comment filter",
- "commentUserNumber": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia, molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium optio, eaque rerum! Provident similique accusantium nemo autem.",
+ "commentUserNumber": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia, molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium optio, eaque rerum!",
"commentUserNumberTitle": "Anonym user"
},
"room-page": {