diff --git a/cypress/support/index.ts b/cypress/support/index.ts index 8ebedebb..5cb1b9f0 100644 --- a/cypress/support/index.ts +++ b/cypress/support/index.ts @@ -64,3 +64,7 @@ Cypress.on('window:before:load', window => { throw new Error(message); }); }); + +Cypress.on('uncaught:exception', error => { + return !error.message.includes('ResizeObserver loop limit exceeded'); +}); diff --git a/package.json b/package.json index f7ca38cb..f01eb07e 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,7 @@ "Michel Jonathan Schmitz ", "Rainer Killinger ", "Sebastian Lange ", - "Thea Schöbl " + "Thea Schöbl " ], "scripts": { "analyze": "webpack-bundle-analyzer www/stats.json", diff --git a/src/app/modules/auth/auth-guard.service.ts b/src/app/modules/auth/auth-guard.service.ts index 84da591e..e91261ac 100644 --- a/src/app/modules/auth/auth-guard.service.ts +++ b/src/app/modules/auth/auth-guard.service.ts @@ -1,3 +1,18 @@ +/* + * Copyright (C) 2022 StApps + * This program is free software: you can redistribute it and/or modify it + * under the terms of the GNU General Public License as published by the Free + * Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, but WITHOUT + * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or + * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for + * more details. + * + * You should have received a copy of the GNU General Public License along with + * this program. If not, see . + */ + import {Injectable} from '@angular/core'; import { CanActivate, @@ -34,6 +49,7 @@ export class AuthGuardService implements CanActivate { extras = {queryParams: {origin_path: url}}; } this.router.navigate(['profile'], extras); + await this.authHelper.getProvider(route.data.authProvider).signIn(); return false; } diff --git a/src/app/modules/menu/navigation/tabs.template.html b/src/app/modules/menu/navigation/tabs.template.html index b3176106..ce8c8507 100644 --- a/src/app/modules/menu/navigation/tabs.template.html +++ b/src/app/modules/menu/navigation/tabs.template.html @@ -22,7 +22,7 @@ {{ 'tabs.canteens' | translate }} - + {{ 'tabs.schedule' | translate }} @@ -30,8 +30,4 @@ {{ 'tabs.map' | translate }} - - - {{ 'tabs.profile' | translate }} - diff --git a/src/app/modules/profile/page/profile-page-section.component.ts b/src/app/modules/profile/page/profile-page-section.component.ts new file mode 100644 index 00000000..59d7520a --- /dev/null +++ b/src/app/modules/profile/page/profile-page-section.component.ts @@ -0,0 +1,109 @@ +/* + * Copyright (C) 2022 StApps + * This program is free software: you can redistribute it and/or modify it + * under the terms of the GNU General Public License as published by the Free + * Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, but WITHOUT + * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or + * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for + * more details. + * + * You should have received a copy of the GNU General Public License along with + * this program. If not, see . + */ + +import {Component, Input, OnDestroy, OnInit} from '@angular/core'; +import {SCSection} from './sections'; +import {AuthHelperService} from '../../auth/auth-helper.service'; +import {Subscription} from 'rxjs'; +import {SCAuthorizationProviderType} from '@openstapps/core'; +import Swiper from 'swiper'; + +@Component({ + selector: 'stapps-profile-page-section', + templateUrl: 'profile-page-section.html', + styleUrls: ['profile-page-section.scss'], +}) +export class ProfilePageSectionComponent implements OnInit, OnDestroy { + @Input() item: SCSection; + + @Input() minSlideWidth = 110; + + isLoggedIn: boolean; + + isEnd = false; + + isBeginning = true; + + subscriptions: Subscription[] = []; + + slidesPerView: number; + + slidesFillScreen = false; + + constructor(private authHelper: AuthHelperService) {} + + ngOnInit() { + if (this.item.authProvider) { + const provider = this.item.authProvider; + this.subscriptions.push( + this.authHelper + .getProvider(provider as 'default') + .token$.subscribe(_token => { + this.authHelper + .getProvider(provider) + .getValidToken() + .then(() => { + this.isLoggedIn = true; + }) + .catch(_error => { + this.isLoggedIn = false; + }); + }), + ); + } + } + + activeIndexChange(swiper: Swiper) { + this.isBeginning = swiper.isBeginning; + this.isEnd = swiper.isEnd; + this.slidesFillScreen = this.slidesPerView >= swiper.slides.length; + } + + resizeSwiper(resizeEvent: ResizeObserverEntry, swiper: Swiper) { + const slidesPerView = + Math.floor( + (resizeEvent.contentRect.width - this.minSlideWidth / 2) / + this.minSlideWidth, + ) + 0.5; + + if (slidesPerView > 1 && slidesPerView !== this.slidesPerView) { + this.slidesPerView = slidesPerView; + swiper.params.slidesPerView = this.slidesPerView; + swiper.update(); + this.activeIndexChange(swiper); + } + } + + async toggleLogIn() { + if (!this.item.authProvider) return; + await (this.isLoggedIn + ? this.signOut(this.item.authProvider) + : this.signIn(this.item.authProvider)); + } + + async signIn(providerType: SCAuthorizationProviderType) { + await this.authHelper.getProvider(providerType).signIn(); + } + + async signOut(providerType: SCAuthorizationProviderType) { + await this.authHelper.getProvider(providerType).signOut(); + } + + ngOnDestroy() { + for (const subscription of this.subscriptions) { + subscription.unsubscribe(); + } + } +} diff --git a/src/app/modules/profile/page/profile-page-section.html b/src/app/modules/profile/page/profile-page-section.html new file mode 100644 index 00000000..750ef797 --- /dev/null +++ b/src/app/modules/profile/page/profile-page-section.html @@ -0,0 +1,72 @@ + + + + + {{ 'name' | translateSimple: item }} + + + + + + + + + + + + + + diff --git a/src/app/modules/profile/page/profile-page-section.scss b/src/app/modules/profile/page/profile-page-section.scss new file mode 100644 index 00000000..4d824e8b --- /dev/null +++ b/src/app/modules/profile/page/profile-page-section.scss @@ -0,0 +1,59 @@ +/*! + * Copyright (C) 2022 StApps + * This program is free software: you can redistribute it and/or modify it + * under the terms of the GNU General Public License as published by the Free + * Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, but WITHOUT + * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or + * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for + * more details. + * + * You should have received a copy of the GNU General Public License along with + * this program. If not, see . + */ + +.section-headline { + padding-inline-start: var(--spacing-md); +} + +.log-in-hint { + padding: var(--spacing-xl); + height: 100%; + box-shadow: none; + background: var(--ion-color-light-tint); +} + +.navigation::part(native) { + padding-inline: 0; +} + +:host { + display: grid; + grid-template-columns: 1fr auto auto auto; + grid-template-rows: 42px 1fr; + grid-template-areas: + "title prev next login" + "swiper swiper swiper swiper"; + align-items: center; + + > ion-label { + margin-block-end: 0; + } + + > swiper { + grid-area: swiper; + width: 100%; + padding-right: 0; + } +} + +ion-button.hidden { + display: none; +} + +@media (hover: none) { + ion-button.navigation { + display: none; + } +} diff --git a/src/app/modules/profile/page/profile-page.component.html b/src/app/modules/profile/page/profile-page.component.html deleted file mode 100644 index b9e05227..00000000 --- a/src/app/modules/profile/page/profile-page.component.html +++ /dev/null @@ -1,158 +0,0 @@ - - - - - - - - {{ 'profile.title' | translate | titlecase }} - - - - -
- - - - - {{ - userInfo?.role - ? (userInfo?.role | titlecase) - : ('profile.role_guest' | translate | titlecase) - }} - - - - - - - - - - {{ userInfo?.givenName }} - {{ userInfo?.familyName }} - -
- - {{ 'profile.userInfo.studentId' | translate | uppercase }} - - - {{ userInfo?.studentId }} - -
-
- - {{ 'profile.userInfo.username' | translate | uppercase }} - - {{ userInfo?.name }} -
- - - - - - - - - - - -
- -
- - {{ 'profile.titleCourses' | translate | uppercase }} - - - - {{ 'profile.courses.today' | translate | uppercase }} - - - - -
- {{ 'profile.courses.no_courses' | translate }} -
- - -
-
{{ myCourse?.startTime }} - {{ myCourse?.endTime }}
-
{{ myCourse?.course.event?.originalCategory }}
-
- {{ myCourse.course?.event?.name }} -
-
- {{ myCourse.course?.inPlace.name }} -
-
- - - -
- diff --git a/src/app/modules/profile/page/profile-page.component.ts b/src/app/modules/profile/page/profile-page.component.ts index 4117e228..a52e5151 100644 --- a/src/app/modules/profile/page/profile-page.component.ts +++ b/src/app/modules/profile/page/profile-page.component.ts @@ -1,16 +1,16 @@ /* * Copyright (C) 2022 StApps - * This program is free software: you can redistribute it and/or modify it - * under the terms of the GNU General Public License as published by the Free - * Software Foundation, version 3. + * This program is free software: you can redistribute it and/or modify it + * under the terms of the GNU General Public License as published by the Free + * Software Foundation, version 3. * - * This program is distributed in the hope that it will be useful, but WITHOUT - * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or - * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for - * more details. + * This program is distributed in the hope that it will be useful, but WITHOUT + * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or + * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for + * more details. * - * You should have received a copy of the GNU General Public License along with - * this program. If not, see . + * You should have received a copy of the GNU General Public License along with + * this program. If not, see . */ import {Component, OnInit} from '@angular/core'; @@ -27,6 +27,7 @@ import {ActivatedRoute} from '@angular/router'; import {ScheduleProvider} from '../../calendar/schedule.provider'; import moment from 'moment'; import {SCIcon} from '../../../util/ion-icon/icon'; +import {profilePageSections} from './sections'; const CourseCard = { collapsed: SCIcon`expand_more`, @@ -41,8 +42,8 @@ interface MyCoursesTodayInterface { @Component({ selector: 'app-home', - templateUrl: './profile-page.component.html', - styleUrls: ['./profile-page.component.scss'], + templateUrl: 'profile-page.html', + styleUrls: ['profile-page.scss'], }) export class ProfilePageComponent implements OnInit { data: {[key in SCAuthorizationProviderType]: {loggedIn: boolean}} = { @@ -50,24 +51,14 @@ export class ProfilePageComponent implements OnInit { paia: {loggedIn: false}, }; + sections = profilePageSections; + logins: SCAuthorizationProviderType[] = []; originPath: string | null; userInfo?: SCUserConfiguration; - /** - * Slider options - */ - sliderOptions = { - spaceBetween: 12, - freeMode: { - enabled: true, - sticky: true, - }, - width: 130, - }; - courseCardEnum = CourseCard; courseCardState = CourseCard.expanded; diff --git a/src/app/modules/profile/page/profile-page.html b/src/app/modules/profile/page/profile-page.html new file mode 100644 index 00000000..501d21cd --- /dev/null +++ b/src/app/modules/profile/page/profile-page.html @@ -0,0 +1,135 @@ + + + + + + + + {{ 'profile.title' | translate | titlecase }} + + + + +
+
+ + + + + {{ + userInfo?.role + ? (userInfo?.role | titlecase) + : ('profile.role_guest' | translate | titlecase) + }} + + + + + + + + + + {{ userInfo?.givenName }} + {{ userInfo?.familyName }} + +
+ + {{ 'profile.userInfo.studentId' | translate | uppercase }} + + + {{ userInfo?.studentId }} + +
+
+ + {{ 'profile.userInfo.username' | translate | uppercase }} + + {{ userInfo?.name }} +
+ + + + + + + + + + + +
+ +
+ + {{ 'profile.titleCourses' | translate | uppercase }} + + + + {{ 'profile.courses.today' | translate | uppercase }} + + + + +
+ {{ 'profile.courses.no_courses' | translate }} +
+ + +
+
{{ myCourse?.startTime }} - {{ myCourse?.endTime }}
+
{{ myCourse?.course.event?.originalCategory }}
+
+ {{ myCourse.course?.event?.name }} +
+
+ {{ myCourse.course?.inPlace.name }} +
+
+ + + +
+
+ diff --git a/src/app/modules/profile/page/profile-page.component.scss b/src/app/modules/profile/page/profile-page.scss similarity index 81% rename from src/app/modules/profile/page/profile-page.component.scss rename to src/app/modules/profile/page/profile-page.scss index af016bab..95a31c28 100644 --- a/src/app/modules/profile/page/profile-page.component.scss +++ b/src/app/modules/profile/page/profile-page.scss @@ -1,21 +1,24 @@ /*! * Copyright (C) 2022 StApps - * This program is free software: you can redistribute it and/or modify it - * under the terms of the GNU General Public License as published by the Free - * Software Foundation, version 3. + * This program is free software: you can redistribute it and/or modify it + * under the terms of the GNU General Public License as published by the Free + * Software Foundation, version 3. * - * This program is distributed in the hope that it will be useful, but WITHOUT - * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or - * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for - * more details. + * This program is distributed in the hope that it will be useful, but WITHOUT + * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or + * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for + * more details. * - * You should have received a copy of the GNU General Public License along with - * this program. If not, see . + * You should have received a copy of the GNU General Public License along with + * this program. If not, see . */ +@import "src/theme/common/ion-content-parallax"; :host { ion-content { --background: var(--ion-color-light); + + @include ion-content-parallax($content-size: 130px) } section { @@ -30,18 +33,6 @@ margin-bottom: var(--spacing-md); } .user-card-wrapper { - &::after { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 75%; - max-height: 17vh; - background-color: var(--ion-color-primary); - z-index: -1; - } - .user-card { border-radius: var(--border-radius-default); position: relative; @@ -137,20 +128,6 @@ } } - .login { - .swiper.card-swiper { - text-align: left; - - .swiper-card { - padding: var(--spacing-lg) var(--spacing-md); - font-size: var(--font-size-md); - font-weight: var(--font-weight-black); - justify-content: center; - height: 120px; - cursor: pointer; - } - } - } ion-thumbnail { background: var(--placeholder-gray); height: 80%; diff --git a/src/app/modules/profile/page/profile-page.component.spec.ts b/src/app/modules/profile/page/profile-page.spec.ts similarity index 100% rename from src/app/modules/profile/page/profile-page.component.spec.ts rename to src/app/modules/profile/page/profile-page.spec.ts diff --git a/src/app/modules/profile/page/sections.ts b/src/app/modules/profile/page/sections.ts new file mode 100644 index 00000000..08a6913a --- /dev/null +++ b/src/app/modules/profile/page/sections.ts @@ -0,0 +1,233 @@ +/* + * Copyright (C) 2022 StApps + * This program is free software: you can redistribute it and/or modify it + * under the terms of the GNU General Public License as published by the Free + * Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, but WITHOUT + * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or + * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for + * more details. + * + * You should have received a copy of the GNU General Public License along with + * this program. If not, see . + */ + +// TODO: move this to external configuration & stapps core + +import { + SCAuthorizationProviderType, + SCThing, + SCThingOriginType, + SCThingRemoteOrigin, + SCThingType, +} from '@openstapps/core'; +import {SCIcon} from '../../../util/ion-icon/icon'; + +export const SCSectionThingType = 'section' as SCThingType; +export const SCSectionLinkThingType = 'section link' as SCThingType; + +const StubOrigin: SCThingRemoteOrigin = { + type: SCThingOriginType.Remote, + name: 'todo', + indexed: new Date(Date.now()).toISOString(), +}; + +const SCSectionConstantValues: Pick = { + type: SCSectionThingType, + origin: StubOrigin, + uid: 'stub', +}; + +const SCSectionLinkConstantValues: Pick = + { + type: SCSectionLinkThingType, + origin: StubOrigin, + uid: 'stub', + }; + +export interface SCSectionLink extends SCThing { + link: string[]; + needsAuth?: true; + icon?: string; +} + +export interface SCSection extends SCThing { + authProvider?: SCAuthorizationProviderType; + links: SCSectionLink[]; +} + +export const profilePageSections: SCSection[] = [ + { + name: 'Your StApps', + links: [ + { + name: 'Favorites', + icon: SCIcon`grade`, + link: ['/favorites'], + translations: { + de: { + name: 'Favoriten', + }, + }, + ...SCSectionLinkConstantValues, + }, + { + name: 'Schedule', + icon: SCIcon`calendar_today`, + link: ['/schedule'], + translations: { + de: { + name: 'Stundenplan', + }, + }, + ...SCSectionLinkConstantValues, + }, + { + name: 'Course Catalog', + icon: SCIcon`inventory_2`, + link: ['/catalog'], + translations: { + de: { + name: 'Vorlesungs Verzeichnis', + }, + }, + ...SCSectionLinkConstantValues, + }, + { + name: 'Settings', + icon: SCIcon`settings`, + link: ['/settings'], + translations: { + de: { + name: 'Einstellungen', + }, + }, + ...SCSectionLinkConstantValues, + }, + { + name: 'Feedback', + icon: SCIcon`rate_review`, + link: ['/feedback'], + translations: { + de: { + name: 'Einstellungen', + }, + }, + ...SCSectionLinkConstantValues, + }, + { + name: 'About StApps', + icon: SCIcon`info`, + link: ['/about'], + translations: { + de: { + name: 'Über StApps', + }, + }, + ...SCSectionLinkConstantValues, + }, + ], + translations: { + de: { + name: 'Dein StApps', + }, + }, + ...SCSectionConstantValues, + }, + { + name: 'Campus Services', + authProvider: 'default', + links: [ + { + name: 'Assessments', + icon: SCIcon`fact_check`, + link: ['/assessments'], + needsAuth: true, + translations: { + de: { + name: 'Noten', + }, + }, + ...SCSectionLinkConstantValues, + }, + ], + translations: { + de: { + name: 'Campus Dienste', + }, + }, + ...SCSectionConstantValues, + }, + { + name: 'Library', + authProvider: 'paia', + links: [ + { + name: 'Library Search', + icon: SCIcon`local_library`, + link: ['/hebis-search'], + translations: { + de: { + name: 'Bibliotheks Suche', + }, + }, + ...SCSectionLinkConstantValues, + }, + { + name: 'Library Account', + icon: SCIcon`badge`, + needsAuth: true, + link: ['/library-account/profile'], + translations: { + de: { + name: 'Bibliotheks Konto', + }, + }, + ...SCSectionLinkConstantValues, + }, + { + name: 'Holdings & Reservations', + icon: SCIcon`collections_bookmark`, + needsAuth: true, + link: ['/library-account/holds-and-reservations'], + translations: { + de: { + name: 'Bestellungen & Vormerkungen', + }, + }, + ...SCSectionLinkConstantValues, + }, + { + name: 'Checked out items', + icon: SCIcon`library_books`, + needsAuth: true, + link: ['/library-account/checked-out'], + translations: { + de: { + name: 'Deine Ausleihen', + }, + }, + ...SCSectionLinkConstantValues, + }, + { + name: 'Fines', + icon: SCIcon`request_page`, + needsAuth: true, + link: ['/library-account/fines'], + translations: { + de: { + name: 'Gebühren', + }, + }, + ...SCSectionLinkConstantValues, + }, + ], + translations: { + de: { + name: 'Bibliothek', + }, + }, + ...SCSectionConstantValues, + }, +]; diff --git a/src/app/modules/profile/profile.module.ts b/src/app/modules/profile/profile.module.ts index d6603756..f005f338 100644 --- a/src/app/modules/profile/profile.module.ts +++ b/src/app/modules/profile/profile.module.ts @@ -1,28 +1,31 @@ /* * Copyright (C) 2022 StApps - * This program is free software: you can redistribute it and/or modify it - * under the terms of the GNU General Public License as published by the Free - * Software Foundation, version 3. + * This program is free software: you can redistribute it and/or modify it + * under the terms of the GNU General Public License as published by the Free + * Software Foundation, version 3. * - * This program is distributed in the hope that it will be useful, but WITHOUT - * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or - * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for - * more details. + * This program is distributed in the hope that it will be useful, but WITHOUT + * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or + * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for + * more details. * - * You should have received a copy of the GNU General Public License along with - * this program. If not, see . + * You should have received a copy of the GNU General Public License along with + * this program. If not, see . */ import {NgModule} from '@angular/core'; import {CommonModule} from '@angular/common'; import {FormsModule} from '@angular/forms'; -import {Routes, RouterModule} from '@angular/router'; +import {RouterModule, Routes} from '@angular/router'; import {IonicModule} from '@ionic/angular'; import {ProfilePageComponent} from './page/profile-page.component'; import {TranslateModule} from '@ngx-translate/core'; import {SwiperModule} from 'swiper/angular'; import {UtilModule} from '../../util/util.module'; import {IonIconModule} from '../../util/ion-icon/ion-icon.module'; +import {ProfilePageSectionComponent} from './page/profile-page-section.component'; +import {ThingTranslateModule} from '../../translation/thing-translate.module'; +import {SectionModule} from '../../util/section/section.module'; const routes: Routes = [ { @@ -32,7 +35,7 @@ const routes: Routes = [ ]; @NgModule({ - declarations: [ProfilePageComponent], + declarations: [ProfilePageComponent, ProfilePageSectionComponent], imports: [ CommonModule, FormsModule, @@ -42,6 +45,8 @@ const routes: Routes = [ TranslateModule, SwiperModule, UtilModule, + ThingTranslateModule, + SectionModule, ], }) export class ProfilePageModule {} diff --git a/src/app/util/element-size-change.directive.ts b/src/app/util/element-size-change.directive.ts new file mode 100644 index 00000000..594f46e2 --- /dev/null +++ b/src/app/util/element-size-change.directive.ts @@ -0,0 +1,47 @@ +/* + * Copyright (C) 2022 StApps + * This program is free software: you can redistribute it and/or modify it + * under the terms of the GNU General Public License as published by the Free + * Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, but WITHOUT + * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or + * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for + * more details. + * + * You should have received a copy of the GNU General Public License along with + * this program. If not, see . + */ + +import { + Directive, + ElementRef, + EventEmitter, + OnDestroy, + OnInit, + Output, +} from '@angular/core'; + +@Directive({ + selector: '[elementSizeChange]', +}) +export class ElementSizeChangeDirective implements OnInit, OnDestroy { + @Output() + elementSizeChange = new EventEmitter(); + + private resizeObserver: ResizeObserver; + + constructor(private elementRef: ElementRef) {} + + ngOnInit() { + this.resizeObserver = new ResizeObserver(elements => { + if (!elements[0]) return; + this.elementSizeChange.emit(elements[0]); + }); + this.resizeObserver.observe(this.elementRef.nativeElement); + } + + ngOnDestroy() { + this.resizeObserver.disconnect(); + } +} diff --git a/src/app/util/section/section-link-card.component.ts b/src/app/util/section/section-link-card.component.ts new file mode 100644 index 00000000..8ababa0e --- /dev/null +++ b/src/app/util/section/section-link-card.component.ts @@ -0,0 +1,27 @@ +/* + * Copyright (C) 2022 StApps + * This program is free software: you can redistribute it and/or modify it + * under the terms of the GNU General Public License as published by the Free + * Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, but WITHOUT + * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or + * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for + * more details. + * + * You should have received a copy of the GNU General Public License along with + * this program. If not, see . + */ +import {Component, Input} from '@angular/core'; +import {SCSectionLink} from '../../modules/profile/page/sections'; + +@Component({ + selector: 'stapps-section-link-card', + templateUrl: 'section-link-card.html', + styleUrls: ['section-link-card.scss'], +}) +export class SectionLinkCardComponent { + @Input() item: SCSectionLink; + + @Input() disabled: boolean; +} diff --git a/src/app/util/section/section-link-card.html b/src/app/util/section/section-link-card.html new file mode 100644 index 00000000..e1ba8732 --- /dev/null +++ b/src/app/util/section/section-link-card.html @@ -0,0 +1,23 @@ + + + + + + + {{ 'name' | translateSimple: item }} + + + diff --git a/src/app/util/section/section-link-card.scss b/src/app/util/section/section-link-card.scss new file mode 100644 index 00000000..d8a485c1 --- /dev/null +++ b/src/app/util/section/section-link-card.scss @@ -0,0 +1,46 @@ +/*! + * Copyright (C) 2022 StApps + * This program is free software: you can redistribute it and/or modify it + * under the terms of the GNU General Public License as published by the Free + * Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, but WITHOUT + * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or + * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for + * more details. + * + * You should have received a copy of the GNU General Public License along with + * this program. If not, see . + */ + +:host, ion-card, ion-card-header, ion-card::part(native) { + height: 100%; +} + +ion-card { + padding: 0; + margin-block: 0; + margin-inline: var(--spacing-sm); +} + +ion-card-header { + padding: var(--spacing-md) var(--spacing-lg) +} + +ion-card-title { + padding: 0; + + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; + + font-family: var(--ion-font-family); + font-size: var(--font-size-xs); + font-weight: var(--font-weight-semi-bold); +} + +.disabled { + opacity: 0.3; +} diff --git a/src/app/util/section/section-tail-prompt-card.component.ts b/src/app/util/section/section-tail-prompt-card.component.ts new file mode 100644 index 00000000..7724a3eb --- /dev/null +++ b/src/app/util/section/section-tail-prompt-card.component.ts @@ -0,0 +1,23 @@ +/* + * Copyright (C) 2022 StApps + * This program is free software: you can redistribute it and/or modify it + * under the terms of the GNU General Public License as published by the Free + * Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, but WITHOUT + * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or + * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for + * more details. + * + * You should have received a copy of the GNU General Public License along with + * this program. If not, see . + */ + +import {Component} from '@angular/core'; + +@Component({ + selector: 'stapps-section-tail-prompt-card', + templateUrl: 'section-tail-prompt-card.html', + styleUrls: ['section-tail-prompt-card.scss', 'section-link-card.scss'], +}) +export class SectionTailPromptCardComponent {} diff --git a/src/app/util/section/section-tail-prompt-card.html b/src/app/util/section/section-tail-prompt-card.html new file mode 100644 index 00000000..934fd67f --- /dev/null +++ b/src/app/util/section/section-tail-prompt-card.html @@ -0,0 +1,22 @@ + + + + + + + + + diff --git a/src/app/util/section/section-tail-prompt-card.scss b/src/app/util/section/section-tail-prompt-card.scss new file mode 100644 index 00000000..e8a1d018 --- /dev/null +++ b/src/app/util/section/section-tail-prompt-card.scss @@ -0,0 +1,19 @@ +/*! + * Copyright (C) 2022 StApps + * This program is free software: you can redistribute it and/or modify it + * under the terms of the GNU General Public License as published by the Free + * Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, but WITHOUT + * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or + * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for + * more details. + * + * You should have received a copy of the GNU General Public License along with + * this program. If not, see . + */ + +.card { + box-shadow: none; + background: none; +} diff --git a/src/app/util/section/section.module.ts b/src/app/util/section/section.module.ts new file mode 100644 index 00000000..35757249 --- /dev/null +++ b/src/app/util/section/section.module.ts @@ -0,0 +1,37 @@ +/* + * Copyright (C) 2022 StApps + * This program is free software: you can redistribute it and/or modify it + * under the terms of the GNU General Public License as published by the Free + * Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, but WITHOUT + * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or + * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for + * more details. + * + * You should have received a copy of the GNU General Public License along with + * this program. If not, see . + */ +import {NgModule} from '@angular/core'; +import {SectionLinkCardComponent} from './section-link-card.component'; +import {IonicModule} from '@ionic/angular'; +import {BrowserModule} from '@angular/platform-browser'; +import {TranslateModule} from '@ngx-translate/core'; +import {IonIconModule} from '../ion-icon/ion-icon.module'; +import {ThingTranslateModule} from '../../translation/thing-translate.module'; +import {RouterModule} from '@angular/router'; +import {SectionTailPromptCardComponent} from './section-tail-prompt-card.component'; + +@NgModule({ + imports: [ + BrowserModule, + IonicModule, + TranslateModule, + IonIconModule, + ThingTranslateModule, + RouterModule, + ], + declarations: [SectionLinkCardComponent, SectionTailPromptCardComponent], + exports: [SectionLinkCardComponent, SectionTailPromptCardComponent], +}) +export class SectionModule {} diff --git a/src/app/util/util.module.ts b/src/app/util/util.module.ts index 0e696d25..338876c4 100644 --- a/src/app/util/util.module.ts +++ b/src/app/util/util.module.ts @@ -12,7 +12,6 @@ * You should have received a copy of the GNU General Public License along with * this program. If not, see . */ - import {NgModule} from '@angular/core'; import {ArrayLastPipe} from './array-last.pipe'; import {DateIsThisPipe} from './date-is-today.pipe'; @@ -25,10 +24,12 @@ import {EditModalComponent} from './edit-modal.component'; import {BrowserModule} from '@angular/platform-browser'; import {IonicModule} from '@ionic/angular'; import {TranslateModule} from '@ngx-translate/core'; +import {ElementSizeChangeDirective} from './element-size-change.directive'; @NgModule({ imports: [BrowserModule, IonicModule, TranslateModule], declarations: [ + ElementSizeChangeDirective, ArrayLastPipe, DateIsThisPipe, NullishCoalescingPipe, @@ -39,6 +40,7 @@ import {TranslateModule} from '@ngx-translate/core'; EditModalComponent, ], exports: [ + ElementSizeChangeDirective, ArrayLastPipe, DateIsThisPipe, NullishCoalescingPipe, diff --git a/src/assets/i18n/de.json b/src/assets/i18n/de.json index a5d8c063..06d15f7a 100644 --- a/src/assets/i18n/de.json +++ b/src/assets/i18n/de.json @@ -46,6 +46,7 @@ }, "auth": { "messages": { + "encourage_login": "Für mehr einloggen", "default": { "authorizing": "Autorisierung läuft...", "logged_in_success": "Erfolgreich eingeloggt.", @@ -435,7 +436,7 @@ } }, "profile": { - "title": "Profil", + "title": "Studium", "titleLogins": "Logins", "titleCourses": "Meine Kurse", "role_guest": "Gastnutzer", diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json index 40dfea63..29af986b 100644 --- a/src/assets/i18n/en.json +++ b/src/assets/i18n/en.json @@ -46,6 +46,7 @@ }, "auth": { "messages": { + "encourage_login": "Log in for more", "default": { "authorizing": "Authorizing...", "logged_in_success": "Successfully logged in.", @@ -435,7 +436,7 @@ } }, "profile": { - "title": "Profile", + "title": "Study", "titleLogins": "Logins", "titleCourses": "My Courses", "role_guest": "guest user", diff --git a/src/assets/icons.min.woff2 b/src/assets/icons.min.woff2 index 9bda7a4f..e5db98ef 100644 Binary files a/src/assets/icons.min.woff2 and b/src/assets/icons.min.woff2 differ