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

feat: rework settings page design

Browse Source
This commit is contained in:
Thea Schöbl
2023-03-09 10:29:59 +00:00
committed by Rainer Killinger
parent 8cd2d777ab
commit 2f1298c9d7
17 changed files with 439 additions and 173 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/modules/about/about-changelog.component.ts
View File

@@ -1,5 +1,5 @@
/*
* Copyright (C) 2021 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.
@@ -18,6 +18,6 @@ import {Component} from '@angular/core';
@Component({
selector: 'about-changelog',
templateUrl: 'about-changelog.html',
styleUrls: ['about-changelog.scss'],
styleUrls: ['about-changelog.scss', './about-page/about-page.scss'],
})
export class AboutChangelogComponent {}

10
src/app/modules/about/about-changelog.html
View File

@@ -1,5 +1,5 @@
<!--
~ Copyright (C) 2021 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.
@@ -22,6 +22,10 @@
<!-- TODO: translation -->
</ion-toolbar>
</ion-header>
<ion-content>
<markdown src="assets/about/CHANGELOG.md"></markdown>
<ion-content class="ion-content-parallax">
<div>
<div class="about-changelog">
<markdown src="assets/about/CHANGELOG.md"></markdown>
</div>
</div>
</ion-content>

22
src/app/modules/about/about-licenses.component.ts
View File

@@ -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.
* 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 {Component, OnInit} from '@angular/core';
import {ModalController} from '@ionic/angular';
@@ -31,7 +31,7 @@ export interface License {
@Component({
selector: 'about-changelog',
templateUrl: 'about-licenses.html',
styleUrls: ['about-licenses.scss'],
styleUrls: ['about-licenses.scss', './about-page/about-page.scss'],
})
export class AboutLicensesComponent implements OnInit {
licenses: License[];

54
src/app/modules/about/about-licenses.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.
@@ -22,28 +22,32 @@
<!-- TODO: translation -->
</ion-toolbar>
</ion-header>
<cdk-virtual-scroll-viewport itemSize="130" minBufferPx="1500" maxBufferPx="2000">
<ion-card
*cdkVirtualFor="let license of licenses"
[href]="license.url || license.repository"
rel="external"
target="_blank"
>
<ion-card-header>
<ion-card-title>
{{ license.name }}
<ion-icon size="16" weight="300" class="supertext-icon" name="open_in_browser"></ion-icon>
</ion-card-title>
<ion-content class="ion-content-parallax">
<div>
<div class="licenses-content">
<ion-card
*ngFor="let license of licenses"
[href]="license.url || license.repository"
rel="external"
target="_blank"
>
<ion-card-header>
<ion-card-title>
{{ license.name }}
<ion-icon size="16" weight="300" class="supertext-icon" name="open_in_browser"></ion-icon>
</ion-card-title>
<ion-card-subtitle *ngIf="license.authors || license.publisher">
{{ license.authors || license.publisher }}
</ion-card-subtitle>
</ion-card-header>
<ion-card-content>
<ion-chip (click)="$event.preventDefault(); viewLicense(license)">
<ion-icon name="copyright"></ion-icon>
<ion-label>{{ license.licenses }} License</ion-label>
</ion-chip>
</ion-card-content>
</ion-card>
</cdk-virtual-scroll-viewport>
<ion-card-subtitle *ngIf="license.authors || license.publisher">
{{ license.authors || license.publisher }}
</ion-card-subtitle>
</ion-card-header>
<ion-card-content>
<ion-chip (click)="$event.preventDefault(); viewLicense(license)">
<ion-icon name="copyright"></ion-icon>
<ion-label>{{ license.licenses }} License</ion-label>
</ion-chip>
</ion-card-content>
</ion-card>
</div>
</div>
</ion-content>

24
src/app/modules/about/about-licenses.scss
View File

@@ -1,18 +1,22 @@
/*!
* 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/>.
*/
ion-content > div {
height: 100%;
}
cdk-virtual-scroll-viewport {
height: 100%;
width: 100%;

2
src/app/modules/about/about-page/about-page-content.scss
View File

@@ -1,5 +1,5 @@
/*!
* Copyright (C) 2021 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.

10
src/app/modules/about/about-page/about-page.html
View File

@@ -24,7 +24,11 @@
</ng-template>
</ion-toolbar>
</ion-header>
<ion-content *ngIf="content">
<ion-text color="primary">{{ appName }} v{{ version }}</ion-text>
<about-page-content *ngFor="let element of content.content" [content]="element"></about-page-content>
<ion-content *ngIf="content" class="ion-content-parallax">
<div>
<ion-text color="light">{{ appName }} v{{ version }}</ion-text>
<div class="page-content">
<about-page-content *ngFor="let element of content.content" [content]="element"></about-page-content>
</div>
</div>
</ion-content>

80
src/app/modules/about/about-page/about-page.scss
View File

@@ -1,5 +1,5 @@
/*!
* Copyright (C) 2021 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,8 +12,80 @@
* 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 'src/theme/util/_mixins.scss';
ion-content {
--padding-start: 8px;
--padding-top: 8px;
ion-text {
margin-inline: var(--spacing-md);
}
:host ::ng-deep {
ion-card {
margin: 0;
box-shadow: none;
ion-card-content {
h1 {
margin: 0;
}
padding-bottom: 8px;
}
ion-card-header {
color: var(--ion-color-dark);
padding-top: 8px;
padding-bottom: 4px;
font-weight: bold;
}
ion-grid,
ion-col {
padding-inline-start: 0;
padding-top: 0;
padding-bottom: 0;
}
}
ion-grid,
ion-col {
padding-inline-start: 0;
padding-top: 0;
padding-bottom: 0;
}
p,
h3,
h2,
h1 {
margin-inline: var(--spacing-md);
}
.about-changelog,
.licenses-content,
.page-content {
margin: var(--spacing-md);
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
background: var(--ion-color-primary-contrast);
&.licenses-content {
background: var(--ion-color-light);
}
padding-block-end: var(--spacing-md);
@include border-radius-in-parallax(var(--border-radius-default));
& > * {
ion-card-subtitle {
font-size: var(--font-size-lg);
color: var(--ion-color-light-contrast);
}
display: block;
@include border-radius-in-parallax(var(--border-radius-default));
overflow: hidden;
position: relative;
background-color: var(--ion-color-primary-contrast);
margin: 0;
& > ion-thumbnail {
background: var(--ion-color-primary);
}
}
}
}

1
src/app/modules/data/data.module.ts
View File

@@ -227,6 +227,7 @@ import {browserFactory, SimpleBrowser} from '../../util/browser.factory';
ArticleContentComponent,
BookDetailContentComponent,
PeriodicalDetailContentComponent,
TitleCardComponent,
],
})
export class DataModule {}

182
src/app/modules/feedback/feedback-page.html
View File

@@ -21,83 +21,107 @@
<ion-title>{{ 'feedback.page.TITLE' | translate }}</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<form #feedbackForm="ngForm" (ngSubmit)="onSubmit()">
<ion-item>
<ion-label position="stacked">{{ 'feedback.form.name.label' | translate }}</ion-label>
<ion-input
placeholder="{{ 'feedback.form.name.placeholder' | translate }}"
[(ngModel)]="author.name"
name="name"
></ion-input>
</ion-item>
<ion-item>
<ion-label position="stacked">{{ 'feedback.form.type.label' | translate }}</ion-label>
<ion-select [(ngModel)]="message.name" value="comment" name="title" interface="popover" required="true">
<ion-select-option value="Comment">{{
'feedback.form.type.values.comment' | translate
}}</ion-select-option>
<ion-select-option value="Bug">{{ 'feedback.form.type.values.bug' | translate }}</ion-select-option>
</ion-select>
</ion-item>
<ion-item>
<ion-label position="stacked">{{ 'feedback.form.email.label' | translate }}</ion-label>
<ion-input
placeholder="{{ 'feedback.form.email.placeholder' | translate }}"
[(ngModel)]="author.email"
type="email"
name="email"
ngModel
email
></ion-input>
</ion-item>
<ion-item>
<ion-label position="stacked">{{ 'feedback.form.message.label' | translate }}</ion-label>
<ion-textarea
[(ngModel)]="message.messageBody"
placeholder="{{ 'feedback.form.message.placeholder' | translate: {number: MINIMUM_MESSAGE_SIZE} }}"
name="message"
required="true"
minlength="{{ MINIMUM_MESSAGE_SIZE }}"
autoGrow="true"
></ion-textarea>
</ion-item>
<ion-item>
<ion-label class="ion-text-wrap"
>{{ 'feedback.form.termsAgree.0' | translate }}
<a [routerLink]="['/about/privacy']">{{ 'feedback.form.termsAgree.1' | translate }}</a
>.</ion-label
>
<ion-checkbox color="primary" slot="start" [(ngModel)]="termsAgree" name="termsAgree"></ion-checkbox>
</ion-item>
<ion-item>
<ion-label class="ion-text-wrap">{{ 'feedback.form.protocolDataAgree' | translate }}</ion-label>
<ion-checkbox
color="primary"
slot="start"
[(ngModel)]="protocolDataAgree"
name="protocolDataAgree"
></ion-checkbox>
</ion-item>
<ion-card>
<ion-card-title>
<ion-button expand="block" fill="clear" (click)="toggleShowMetaData()">
<ng-container *ngIf="!showMetaData; else hide">{{
'feedback.form.protocolData.show' | translate
}}</ng-container>
<ng-template #hide>{{ 'feedback.form.protocolData.hide' | translate }}</ng-template>
</ion-button>
</ion-card-title>
<ion-card-content *ngIf="metaData && showMetaData">
<pre>{{ metaData | json }}</pre>
</ion-card-content>
</ion-card>
<ion-button
type="submit"
color="primary"
expand="block"
[disabled]="!feedbackForm.valid || !termsAgree || submitSuccess"
>{{ 'feedback.form.submit' | translate }}</ion-button
>
</form>
<ion-content class="ion-content-parallax">
<div>
<div class="feedback-content">
<ion-card>
<form #feedbackForm="ngForm" (ngSubmit)="onSubmit()">
<ion-item>
<ion-label position="stacked">{{ 'feedback.form.name.label' | translate }}</ion-label>
<ion-input
placeholder="{{ 'feedback.form.name.placeholder' | translate }}"
[(ngModel)]="author.name"
name="name"
></ion-input>
</ion-item>
<ion-item>
<ion-label position="stacked">{{ 'feedback.form.type.label' | translate }}</ion-label>
<ion-select
[(ngModel)]="message.name"
value="comment"
name="title"
interface="popover"
required="true"
>
<ion-select-option value="Comment">{{
'feedback.form.type.values.comment' | translate
}}</ion-select-option>
<ion-select-option value="Bug">{{
'feedback.form.type.values.bug' | translate
}}</ion-select-option>
</ion-select>
</ion-item>
<ion-item>
<ion-label position="stacked">{{ 'feedback.form.email.label' | translate }}</ion-label>
<ion-input
placeholder="{{ 'feedback.form.email.placeholder' | translate }}"
[(ngModel)]="author.email"
type="email"
name="email"
ngModel
email
></ion-input>
</ion-item>
<ion-item>
<ion-label position="stacked">{{ 'feedback.form.message.label' | translate }}</ion-label>
<ion-textarea
[(ngModel)]="message.messageBody"
placeholder="{{
'feedback.form.message.placeholder' | translate: {number: MINIMUM_MESSAGE_SIZE}
}}"
name="message"
required="true"
minlength="{{ MINIMUM_MESSAGE_SIZE }}"
autoGrow="true"
></ion-textarea>
</ion-item>
<ion-item>
<ion-label class="ion-text-wrap">{{ 'feedback.form.termsAgree.0' | translate }} </ion-label>
<ion-checkbox
color="primary"
slot="start"
[(ngModel)]="termsAgree"
name="termsAgree"
></ion-checkbox>
</ion-item>
<ion-item lines="none">
<ion-label
><a style="display: contents" [routerLink]="['/about/privacy']">{{
'feedback.form.termsAgree.1' | translate
}}</a></ion-label
>
</ion-item>
<ion-item>
<ion-label class="ion-text-wrap">{{ 'feedback.form.protocolDataAgree' | translate }}</ion-label>
<ion-checkbox
color="primary"
slot="start"
[(ngModel)]="protocolDataAgree"
name="protocolDataAgree"
></ion-checkbox>
</ion-item>
<ion-card>
<ion-card-title>
<ion-button expand="block" fill="clear" (click)="toggleShowMetaData()">
<ng-container *ngIf="!showMetaData; else hide">{{
'feedback.form.protocolData.show' | translate
}}</ng-container>
<ng-template #hide>{{ 'feedback.form.protocolData.hide' | translate }}</ng-template>
</ion-button>
</ion-card-title>
<ion-card-content *ngIf="metaData && showMetaData">
<pre>{{ metaData | json }}</pre>
</ion-card-content>
</ion-card>
<ion-button
type="submit"
color="primary"
expand="block"
[disabled]="!feedbackForm.valid || !termsAgree || submitSuccess"
>{{ 'feedback.form.submit' | translate }}</ion-button
>
</form>
</ion-card>
</div>
</div>
</ion-content>

75
src/app/modules/feedback/feedback-page.scss
View File

@@ -1,6 +1,81 @@
/*!
* 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.
*
* You should have received a copy of the GNU General Public License along with
* this program. If not, see <https://www.gnu.org/licenses/>.
*/
pre {
white-space: pre-wrap;
}
ion-button {
margin: 10px;
}
@import 'src/theme/util/_mixins.scss';
:host ::ng-deep {
ion-card {
margin: 0;
box-shadow: none;
ion-card-content {
h1 {
margin: 0;
}
padding-bottom: 8px;
}
ion-card-header {
color: var(--ion-color-dark);
padding-top: 8px;
padding-bottom: 4px;
font-weight: bold;
}
ion-grid,
ion-col {
padding-inline-start: 0;
padding-top: 0;
padding-bottom: 0;
}
}
ion-grid,
ion-col {
padding-inline-start: 0;
padding-top: 0;
padding-bottom: 0;
}
.feedback-content {
margin: var(--spacing-md);
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
background: var(--ion-color-light);
@include border-radius-in-parallax(var(--border-radius-default));
& > * {
ion-card-subtitle {
font-size: var(--font-size-lg);
color: var(--ion-color-light-contrast);
}
display: block;
@include border-radius-in-parallax(var(--border-radius-default));
overflow: hidden;
position: relative;
background-color: var(--ion-color-primary-contrast);
margin: 0;
& > ion-thumbnail {
background: var(--ion-color-primary);
}
}
}
}

3
src/app/modules/settings/item/settings-item.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.
@@ -24,6 +24,7 @@ import {SettingsProvider} from '../settings.provider';
@Component({
selector: 'stapps-settings-item',
templateUrl: 'settings-item.html',
styleUrls: ['settings-item.scss'],
})
export class SettingsItemComponent {
/**

5
src/app/modules/settings/settings.scss → src/app/modules/settings/item/settings-item.scss
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,6 +12,3 @@
* You should have received a copy of the GNU General Public License along with
* this program. If not, see <https://www.gnu.org/licenses/>.
*/
page-settings {
}

3
src/app/modules/settings/page/settings-page.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.
@@ -24,6 +24,7 @@ import {SettingsCache, SettingsProvider} from '../settings.provider';
@Component({
selector: 'stapps-settings-page',
templateUrl: 'settings-page.html',
styleUrls: ['settings-page.scss'],
})
export class SettingsPageComponent implements OnInit {
/**

62
src/app/modules/settings/page/settings-page.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.
@@ -22,32 +22,38 @@
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list *ngFor="let categoryKey of categoriesOrder">
<div *ngIf="objectKeys(settingsCache).includes(categoryKey)">
<ion-item-divider>
<h5>
{{
'categories[0]'
| thingTranslate
: $any(
settingsCache[categoryKey]?.settings[objectKeys(settingsCache[categoryKey]?.settings)[0]]
)
| titlecase
}}
</h5>
</ion-item-divider>
<stapps-settings-item
*ngFor="let settingKeys of objectKeys(settingsCache[categoryKey].settings)"
[setting]="settingsCache[categoryKey].settings[settingKeys]"
></stapps-settings-item>
<ion-content class="ion-no-padding ion-content-parallax">
<div>
<div class="settings-content">
<ng-container *ngFor="let categoryKey of categoriesOrder">
<ion-list *ngIf="objectKeys(settingsCache).includes(categoryKey)">
<!-- <ion-item-divider>
<h2>
{{
'categories[0]'
| thingTranslate
: $any(
settingsCache[categoryKey]?.settings[
objectKeys(settingsCache[categoryKey]?.settings)[0]
]
)
| titlecase
}}
</h2>
</ion-item-divider> -->
<stapps-settings-item
*ngFor="let settingKeys of objectKeys(settingsCache[categoryKey].settings)"
[setting]="settingsCache[categoryKey].settings[settingKeys]"
></stapps-settings-item>
</ion-list>
</ng-container>
<calendar-sync-settings></calendar-sync-settings>
<ion-button color="medium" expand="block" fill="outline" (click)="presentResetAlert()">
{{ 'settings.resetSettings' | translate }}
<ion-icon slot="start" name="device_reset"></ion-icon>
</ion-button>
</div>
</ion-list>
<calendar-sync-settings></calendar-sync-settings>
<ion-button color="medium" expand="block" fill="outline" (click)="presentResetAlert()">
{{ 'settings.resetSettings' | translate }}
<ion-icon slot="start" name="device_reset"></ion-icon>
</ion-button>
</div>
</ion-content>

73
src/app/modules/settings/page/settings-page.scss Normal file
View File

@@ -0,0 +1,73 @@
/*!
* 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.
*
* 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 'src/theme/util/_mixins.scss';
:host ::ng-deep {
ion-card {
margin: 0;
box-shadow: none;
ion-card-content {
h1 {
margin: 0;
}
padding-bottom: 8px;
}
ion-card-header {
color: var(--ion-color-dark);
padding-top: 8px;
padding-bottom: 4px;
font-weight: bold;
}
ion-grid,
ion-col {
padding-inline-start: 0;
padding-top: 0;
padding-bottom: 0;
}
}
ion-grid,
ion-col {
padding-inline-start: 0;
padding-top: 0;
padding-bottom: 0;
}
.settings-content {
margin: var(--spacing-md);
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
background: var(--ion-color-light);
@include border-radius-in-parallax(var(--border-radius-default));
& > * {
ion-card-subtitle {
font-size: var(--font-size-lg);
color: var(--ion-color-light-contrast);
}
display: block;
@include border-radius-in-parallax(var(--border-radius-default));
overflow: hidden;
position: relative;
background-color: var(--ion-color-primary-contrast);
margin: 0;
& > ion-thumbnail {
background: var(--ion-color-primary);
}
}
}
}

2
src/app/modules/settings/settings.module.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.