Theaninova/openstapps
1
0
Fork 0
mirror of https://gitlab.com/openstapps/openstapps.git synced 2026-01-21 00:52:55 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: revamp dashboard mensa section

Browse Source
This commit is contained in:
Thea Schöbl
2023-02-27 14:44:20 +00:00
committed by Rainer Killinger
parent 1318cbca7f
commit 33a74d96ae
27 changed files with 578 additions and 385 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
src/app/modules/dashboard/section/section.component.html
View File

@@ -1,5 +1,5 @@
<!--
~ Copyright (C) 2022 StApps
~ Copyright (C) 2023 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.
@@ -12,16 +12,46 @@
~ You should have received a copy of the GNU General Public License along with
~ this program. If not, see <https://www.gnu.org/licenses/>.
-->
<ion-grid>
<ion-row>
<ion-col>
<a *ngIf="item; else titleTemplate" [routerLink]="['/data-detail', item.uid]">
<ng-container *ngTemplateOutlet="titleTemplate"></ng-container>
</a>
<ion-label class="section-headline"
>{{ title }}
<ion-icon
size="25"
class="icon-margin-right"
*ngIf="isEditable"
(click)="onEditClick()"
name="edit_square"
></ion-icon>
<ion-icon size="25" *ngIf="customIcon" (click)="onEditClick()" [name]="customIcon"></ion-icon>
</ion-label>
<ng-content></ng-content>
<ng-template #titleTemplate>
<ion-label class="section-headline">{{ title }} </ion-label>
<ng-content select="[slot=subtitle]"></ng-content>
</ng-template>
</ion-col>
<ng-container *ngIf="swiper">
<ion-col size="auto" class="swiper-button">
<ion-button fill="clear" color="medium" (click)="slidePrev()" [disabled]="false">
<ion-icon size="24" slot="icon-only" name="chevron_left"></ion-icon>
</ion-button>
</ion-col>
<ion-col size="auto" class="swiper-button">
<ion-button fill="clear" color="medium" (click)="slideNext()" [disabled]="false">
<ion-icon size="24" slot="icon-only" name="chevron_right"></ion-icon>
</ion-button>
</ion-col>
</ng-container>
<ion-col size="auto" *ngIf="isEditable">
<ion-button fill="clear" color="medium" (click)="onEditClick()">
<ion-icon size="24" slot="icon-only" name="edit_square"></ion-icon>
</ion-button>
</ion-col>
<ion-col size="auto" *ngIf="customIcon">
<ion-button fill="clear" color="medium" (click)="onEditClick()">
<ion-icon slot="icon-only" size="24" [name]="customIcon"></ion-icon>
</ion-button>
</ion-col>
</ion-row>
<ion-row>
<ion-col #content>
<ng-content></ng-content>
</ion-col>
</ion-row>
</ion-grid>

95
src/app/modules/dashboard/section/section.component.scss
View File

@@ -1,58 +1,67 @@
/*!
* 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.
* Copyright (C) 2023 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.
* 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 <https://www.gnu.org/licenses/>.
* You should have received a copy of the GNU General Public License along with
* this program. If not, see <https://www.gnu.org/licenses/>.
*/
@import '../../../../theme/util/mixins';
a {
display: contents;
color: unset;
text-decoration: unset;
}
ion-grid {
width: 100%;
}
ion-label {
font-family: var(--headline-font-family);
font-weight: var(--font-weight-bold);
&:only-child {
height: 100%;
display: flex;
align-items: center;
}
}
ion-grid {
padding: 0;
}
ion-col {
padding: 0;
}
ion-button::part(native) {
padding-inline: var(--spacing-sm);
}
@media (hover: none) {
.swiper-button {
display: none;
}
}
:host {
display: block;
padding: var(--spacing-sm) var(--spacing-md) var(--spacing-sm);
--swiper-scroll-padding: var(--spacing-md);
--swiper-gap: var(--spacing-sm);
@include ion-md-up {
padding: var(--spacing-lg) var(--spacing-xxl) var(--spacing-sm);
}
&.is-editable ::ng-deep {
.swiper-button-prev {
right: 65px;
}
.swiper-button-next {
right: 35px;
}
}
&.is-extended {
padding-right: 0;
.icon-margin-right {
margin-right: var(--spacing-md);
}
}
& > ion-label:first-child {
font-family: var(--headline-font-family);
font-weight: var(--font-weight-bold);
ion-icon {
color: var(--ion-color-medium-shade);
position: relative;
margin-block: auto;
cursor: pointer;
&:hover ::ng-deep stapps-icon {
--fill: 1;
}
}
--swiper-scroll-padding: var(--spacing-xxl);
}
}

60
src/app/modules/dashboard/section/section.component.ts
View File

@@ -1,5 +1,5 @@
/*
* Copyright (C) 2022 StApps
* Copyright (C) 2023 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.
@@ -12,7 +12,18 @@
* You should have received a copy of the GNU General Public License along with
* this program. If not, see <https://www.gnu.org/licenses/>.
*/
import {Component, EventEmitter, HostBinding, Input, OnInit, Output} from '@angular/core';
import {
AfterContentInit,
Component,
EventEmitter,
HostBinding,
Input,
OnDestroy,
OnInit,
Output,
ViewContainerRef,
} from '@angular/core';
import {SCThings} from '@openstapps/core';
/**
* Shows a horizontal list of action chips
@@ -22,7 +33,7 @@ import {Component, EventEmitter, HostBinding, Input, OnInit, Output} from '@angu
templateUrl: 'section.component.html',
styleUrls: ['section.component.scss'],
})
export class SectionComponent implements OnInit {
export class SectionComponent implements OnInit, AfterContentInit, OnDestroy {
@HostBinding('class.is-extended') isExtendedClass = false;
@HostBinding('class.is-editable') isEditableClass = false;
@@ -35,18 +46,61 @@ export class SectionComponent implements OnInit {
@Input() customIcon?: string = undefined;
@Input() item?: SCThings;
// eslint-disable-next-line @angular-eslint/no-output-on-prefix
@Output() onEdit = new EventEmitter<void>();
mutationObserver: MutationObserver;
swiper?: HTMLElement;
constructor(readonly viewContainerRef: ViewContainerRef) {}
ngOnInit() {
this.isExtendedClass = this.isSectionExtended;
this.isEditableClass = this.isEditable;
}
ngAfterContentInit() {
this.mutationObserver = new MutationObserver(() => {
const simpleSwiper = this.viewContainerRef.element.nativeElement.querySelector('simple-swiper');
if (!simpleSwiper) return;
this.swiper = simpleSwiper;
});
this.mutationObserver.observe(this.viewContainerRef.element.nativeElement, {
childList: true,
subtree: true,
});
}
slideNext() {
if (this.swiper) {
this.swiper.scrollBy({
left: this.swiper.offsetWidth,
behavior: 'smooth',
});
}
}
slidePrev() {
if (this.swiper) {
this.swiper.scrollBy({
left: -this.swiper.offsetWidth,
behavior: 'smooth',
});
}
}
/**
* Action when edit is clicked
*/
onEditClick() {
this.onEdit.emit();
}
ngOnDestroy() {
this.mutationObserver.disconnect();
}
}