mirror of
https://gitlab.com/openstapps/openstapps.git
synced 2026-01-21 17:12:43 +00:00
feat: rework settings page design
This commit is contained in:
Thea Schöbl
committed by
Rainer Killinger
Rainer Killinger
parent
8cd2d777ab
commit
2f1298c9d7
@@ -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
|
* 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
|
* under the terms of the GNU General Public License as published by the Free
|
||||||
* Software Foundation, version 3.
|
* Software Foundation, version 3.
|
||||||
@@ -18,6 +18,6 @@ import {Component} from '@angular/core';
|
|||||||
@Component({
|
@Component({
|
||||||
selector: 'about-changelog',
|
selector: 'about-changelog',
|
||||||
templateUrl: 'about-changelog.html',
|
templateUrl: 'about-changelog.html',
|
||||||
styleUrls: ['about-changelog.scss'],
|
styleUrls: ['about-changelog.scss', './about-page/about-page.scss'],
|
||||||
})
|
})
|
||||||
export class AboutChangelogComponent {}
|
export class AboutChangelogComponent {}
|
||||||
|
|||||||
@@ -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
|
~ 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
|
~ under the terms of the GNU General Public License as published by the Free
|
||||||
~ Software Foundation, version 3.
|
~ Software Foundation, version 3.
|
||||||
@@ -22,6 +22,10 @@
|
|||||||
<!-- TODO: translation -->
|
<!-- TODO: translation -->
|
||||||
</ion-toolbar>
|
</ion-toolbar>
|
||||||
</ion-header>
|
</ion-header>
|
||||||
<ion-content>
|
<ion-content class="ion-content-parallax">
|
||||||
<markdown src="assets/about/CHANGELOG.md"></markdown>
|
<div>
|
||||||
|
<div class="about-changelog">
|
||||||
|
<markdown src="assets/about/CHANGELOG.md"></markdown>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</ion-content>
|
</ion-content>
|
||||||
|
|||||||
@@ -1,16 +1,16 @@
|
|||||||
/*
|
/*
|
||||||
* Copyright (C) 2022 StApps
|
* Copyright (C) 2023 StApps
|
||||||
* This program is free software: you can redistribute it and/or modify it
|
* 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
|
* under the terms of the GNU General Public License as published by the Free
|
||||||
* Software Foundation, version 3.
|
* Software Foundation, version 3.
|
||||||
*
|
*
|
||||||
* This program is distributed in the hope that it will be useful, but WITHOUT
|
* This program is distributed in the hope that it will be useful, but WITHOUT
|
||||||
* ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
|
* ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
|
||||||
* FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
|
* FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
|
||||||
* more details.
|
* more details.
|
||||||
*
|
*
|
||||||
* You should have received a copy of the GNU General Public License along with
|
* You should have received a copy of the GNU General Public License along with
|
||||||
* this program. If not, see <https://www.gnu.org/licenses/>.
|
* this program. If not, see <https://www.gnu.org/licenses/>.
|
||||||
*/
|
*/
|
||||||
import {Component, OnInit} from '@angular/core';
|
import {Component, OnInit} from '@angular/core';
|
||||||
import {ModalController} from '@ionic/angular';
|
import {ModalController} from '@ionic/angular';
|
||||||
@@ -31,7 +31,7 @@ export interface License {
|
|||||||
@Component({
|
@Component({
|
||||||
selector: 'about-changelog',
|
selector: 'about-changelog',
|
||||||
templateUrl: 'about-licenses.html',
|
templateUrl: 'about-licenses.html',
|
||||||
styleUrls: ['about-licenses.scss'],
|
styleUrls: ['about-licenses.scss', './about-page/about-page.scss'],
|
||||||
})
|
})
|
||||||
export class AboutLicensesComponent implements OnInit {
|
export class AboutLicensesComponent implements OnInit {
|
||||||
licenses: License[];
|
licenses: License[];
|
||||||
|
|||||||
@@ -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
|
~ 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
|
~ under the terms of the GNU General Public License as published by the Free
|
||||||
~ Software Foundation, version 3.
|
~ Software Foundation, version 3.
|
||||||
@@ -22,28 +22,32 @@
|
|||||||
<!-- TODO: translation -->
|
<!-- TODO: translation -->
|
||||||
</ion-toolbar>
|
</ion-toolbar>
|
||||||
</ion-header>
|
</ion-header>
|
||||||
<cdk-virtual-scroll-viewport itemSize="130" minBufferPx="1500" maxBufferPx="2000">
|
<ion-content class="ion-content-parallax">
|
||||||
<ion-card
|
<div>
|
||||||
*cdkVirtualFor="let license of licenses"
|
<div class="licenses-content">
|
||||||
[href]="license.url || license.repository"
|
<ion-card
|
||||||
rel="external"
|
*ngFor="let license of licenses"
|
||||||
target="_blank"
|
[href]="license.url || license.repository"
|
||||||
>
|
rel="external"
|
||||||
<ion-card-header>
|
target="_blank"
|
||||||
<ion-card-title>
|
>
|
||||||
{{ license.name }}
|
<ion-card-header>
|
||||||
<ion-icon size="16" weight="300" class="supertext-icon" name="open_in_browser"></ion-icon>
|
<ion-card-title>
|
||||||
</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">
|
<ion-card-subtitle *ngIf="license.authors || license.publisher">
|
||||||
{{ license.authors || license.publisher }}
|
{{ license.authors || license.publisher }}
|
||||||
</ion-card-subtitle>
|
</ion-card-subtitle>
|
||||||
</ion-card-header>
|
</ion-card-header>
|
||||||
<ion-card-content>
|
<ion-card-content>
|
||||||
<ion-chip (click)="$event.preventDefault(); viewLicense(license)">
|
<ion-chip (click)="$event.preventDefault(); viewLicense(license)">
|
||||||
<ion-icon name="copyright"></ion-icon>
|
<ion-icon name="copyright"></ion-icon>
|
||||||
<ion-label>{{ license.licenses }} License</ion-label>
|
<ion-label>{{ license.licenses }} License</ion-label>
|
||||||
</ion-chip>
|
</ion-chip>
|
||||||
</ion-card-content>
|
</ion-card-content>
|
||||||
</ion-card>
|
</ion-card>
|
||||||
</cdk-virtual-scroll-viewport>
|
</div>
|
||||||
|
</div>
|
||||||
|
</ion-content>
|
||||||
|
|||||||
@@ -1,18 +1,22 @@
|
|||||||
/*!
|
/*!
|
||||||
* Copyright (C) 2022 StApps
|
* Copyright (C) 2023 StApps
|
||||||
* This program is free software: you can redistribute it and/or modify it
|
* 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
|
* under the terms of the GNU General Public License as published by the Free
|
||||||
* Software Foundation, version 3.
|
* Software Foundation, version 3.
|
||||||
*
|
*
|
||||||
* This program is distributed in the hope that it will be useful, but WITHOUT
|
* This program is distributed in the hope that it will be useful, but WITHOUT
|
||||||
* ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
|
* ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
|
||||||
* FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
|
* FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
|
||||||
* more details.
|
* more details.
|
||||||
*
|
*
|
||||||
* You should have received a copy of the GNU General Public License along with
|
* You should have received a copy of the GNU General Public License along with
|
||||||
* this program. If not, see <https://www.gnu.org/licenses/>.
|
* this program. If not, see <https://www.gnu.org/licenses/>.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
ion-content > div {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
cdk-virtual-scroll-viewport {
|
cdk-virtual-scroll-viewport {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|||||||
@@ -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
|
* 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
|
* under the terms of the GNU General Public License as published by the Free
|
||||||
* Software Foundation, version 3.
|
* Software Foundation, version 3.
|
||||||
|
|||||||
@@ -24,7 +24,11 @@
|
|||||||
</ng-template>
|
</ng-template>
|
||||||
</ion-toolbar>
|
</ion-toolbar>
|
||||||
</ion-header>
|
</ion-header>
|
||||||
<ion-content *ngIf="content">
|
<ion-content *ngIf="content" class="ion-content-parallax">
|
||||||
<ion-text color="primary">{{ appName }} v{{ version }}</ion-text>
|
<div>
|
||||||
<about-page-content *ngFor="let element of content.content" [content]="element"></about-page-content>
|
<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>
|
</ion-content>
|
||||||
|
|||||||
@@ -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
|
* 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
|
* under the terms of the GNU General Public License as published by the Free
|
||||||
* Software Foundation, version 3.
|
* Software Foundation, version 3.
|
||||||
@@ -12,8 +12,80 @@
|
|||||||
* You should have received a copy of the GNU General Public License along with
|
* You should have received a copy of the GNU General Public License along with
|
||||||
* this program. If not, see <https://www.gnu.org/licenses/>.
|
* this program. If not, see <https://www.gnu.org/licenses/>.
|
||||||
*/
|
*/
|
||||||
|
@import 'src/theme/util/_mixins.scss';
|
||||||
|
|
||||||
ion-content {
|
ion-text {
|
||||||
--padding-start: 8px;
|
margin-inline: var(--spacing-md);
|
||||||
--padding-top: 8px;
|
}
|
||||||
|
|
||||||
|
: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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -227,6 +227,7 @@ import {browserFactory, SimpleBrowser} from '../../util/browser.factory';
|
|||||||
ArticleContentComponent,
|
ArticleContentComponent,
|
||||||
BookDetailContentComponent,
|
BookDetailContentComponent,
|
||||||
PeriodicalDetailContentComponent,
|
PeriodicalDetailContentComponent,
|
||||||
|
TitleCardComponent,
|
||||||
],
|
],
|
||||||
})
|
})
|
||||||
export class DataModule {}
|
export class DataModule {}
|
||||||
|
|||||||
@@ -21,83 +21,107 @@
|
|||||||
<ion-title>{{ 'feedback.page.TITLE' | translate }}</ion-title>
|
<ion-title>{{ 'feedback.page.TITLE' | translate }}</ion-title>
|
||||||
</ion-toolbar>
|
</ion-toolbar>
|
||||||
</ion-header>
|
</ion-header>
|
||||||
<ion-content>
|
<ion-content class="ion-content-parallax">
|
||||||
<form #feedbackForm="ngForm" (ngSubmit)="onSubmit()">
|
<div>
|
||||||
<ion-item>
|
<div class="feedback-content">
|
||||||
<ion-label position="stacked">{{ 'feedback.form.name.label' | translate }}</ion-label>
|
<ion-card>
|
||||||
<ion-input
|
<form #feedbackForm="ngForm" (ngSubmit)="onSubmit()">
|
||||||
placeholder="{{ 'feedback.form.name.placeholder' | translate }}"
|
<ion-item>
|
||||||
[(ngModel)]="author.name"
|
<ion-label position="stacked">{{ 'feedback.form.name.label' | translate }}</ion-label>
|
||||||
name="name"
|
<ion-input
|
||||||
></ion-input>
|
placeholder="{{ 'feedback.form.name.placeholder' | translate }}"
|
||||||
</ion-item>
|
[(ngModel)]="author.name"
|
||||||
<ion-item>
|
name="name"
|
||||||
<ion-label position="stacked">{{ 'feedback.form.type.label' | translate }}</ion-label>
|
></ion-input>
|
||||||
<ion-select [(ngModel)]="message.name" value="comment" name="title" interface="popover" required="true">
|
</ion-item>
|
||||||
<ion-select-option value="Comment">{{
|
<ion-item>
|
||||||
'feedback.form.type.values.comment' | translate
|
<ion-label position="stacked">{{ 'feedback.form.type.label' | translate }}</ion-label>
|
||||||
}}</ion-select-option>
|
<ion-select
|
||||||
<ion-select-option value="Bug">{{ 'feedback.form.type.values.bug' | translate }}</ion-select-option>
|
[(ngModel)]="message.name"
|
||||||
</ion-select>
|
value="comment"
|
||||||
</ion-item>
|
name="title"
|
||||||
<ion-item>
|
interface="popover"
|
||||||
<ion-label position="stacked">{{ 'feedback.form.email.label' | translate }}</ion-label>
|
required="true"
|
||||||
<ion-input
|
>
|
||||||
placeholder="{{ 'feedback.form.email.placeholder' | translate }}"
|
<ion-select-option value="Comment">{{
|
||||||
[(ngModel)]="author.email"
|
'feedback.form.type.values.comment' | translate
|
||||||
type="email"
|
}}</ion-select-option>
|
||||||
name="email"
|
<ion-select-option value="Bug">{{
|
||||||
ngModel
|
'feedback.form.type.values.bug' | translate
|
||||||
email
|
}}</ion-select-option>
|
||||||
></ion-input>
|
</ion-select>
|
||||||
</ion-item>
|
</ion-item>
|
||||||
<ion-item>
|
<ion-item>
|
||||||
<ion-label position="stacked">{{ 'feedback.form.message.label' | translate }}</ion-label>
|
<ion-label position="stacked">{{ 'feedback.form.email.label' | translate }}</ion-label>
|
||||||
<ion-textarea
|
<ion-input
|
||||||
[(ngModel)]="message.messageBody"
|
placeholder="{{ 'feedback.form.email.placeholder' | translate }}"
|
||||||
placeholder="{{ 'feedback.form.message.placeholder' | translate: {number: MINIMUM_MESSAGE_SIZE} }}"
|
[(ngModel)]="author.email"
|
||||||
name="message"
|
type="email"
|
||||||
required="true"
|
name="email"
|
||||||
minlength="{{ MINIMUM_MESSAGE_SIZE }}"
|
ngModel
|
||||||
autoGrow="true"
|
email
|
||||||
></ion-textarea>
|
></ion-input>
|
||||||
</ion-item>
|
</ion-item>
|
||||||
<ion-item>
|
<ion-item>
|
||||||
<ion-label class="ion-text-wrap"
|
<ion-label position="stacked">{{ 'feedback.form.message.label' | translate }}</ion-label>
|
||||||
>{{ 'feedback.form.termsAgree.0' | translate }}
|
<ion-textarea
|
||||||
<a [routerLink]="['/about/privacy']">{{ 'feedback.form.termsAgree.1' | translate }}</a
|
[(ngModel)]="message.messageBody"
|
||||||
>.</ion-label
|
placeholder="{{
|
||||||
>
|
'feedback.form.message.placeholder' | translate: {number: MINIMUM_MESSAGE_SIZE}
|
||||||
<ion-checkbox color="primary" slot="start" [(ngModel)]="termsAgree" name="termsAgree"></ion-checkbox>
|
}}"
|
||||||
</ion-item>
|
name="message"
|
||||||
<ion-item>
|
required="true"
|
||||||
<ion-label class="ion-text-wrap">{{ 'feedback.form.protocolDataAgree' | translate }}</ion-label>
|
minlength="{{ MINIMUM_MESSAGE_SIZE }}"
|
||||||
<ion-checkbox
|
autoGrow="true"
|
||||||
color="primary"
|
></ion-textarea>
|
||||||
slot="start"
|
</ion-item>
|
||||||
[(ngModel)]="protocolDataAgree"
|
<ion-item>
|
||||||
name="protocolDataAgree"
|
<ion-label class="ion-text-wrap">{{ 'feedback.form.termsAgree.0' | translate }} </ion-label>
|
||||||
></ion-checkbox>
|
<ion-checkbox
|
||||||
</ion-item>
|
color="primary"
|
||||||
<ion-card>
|
slot="start"
|
||||||
<ion-card-title>
|
[(ngModel)]="termsAgree"
|
||||||
<ion-button expand="block" fill="clear" (click)="toggleShowMetaData()">
|
name="termsAgree"
|
||||||
<ng-container *ngIf="!showMetaData; else hide">{{
|
></ion-checkbox>
|
||||||
'feedback.form.protocolData.show' | translate
|
</ion-item>
|
||||||
}}</ng-container>
|
<ion-item lines="none">
|
||||||
<ng-template #hide>{{ 'feedback.form.protocolData.hide' | translate }}</ng-template>
|
<ion-label
|
||||||
</ion-button>
|
><a style="display: contents" [routerLink]="['/about/privacy']">{{
|
||||||
</ion-card-title>
|
'feedback.form.termsAgree.1' | translate
|
||||||
<ion-card-content *ngIf="metaData && showMetaData">
|
}}</a></ion-label
|
||||||
<pre>{{ metaData | json }}</pre>
|
>
|
||||||
</ion-card-content>
|
</ion-item>
|
||||||
</ion-card>
|
<ion-item>
|
||||||
<ion-button
|
<ion-label class="ion-text-wrap">{{ 'feedback.form.protocolDataAgree' | translate }}</ion-label>
|
||||||
type="submit"
|
<ion-checkbox
|
||||||
color="primary"
|
color="primary"
|
||||||
expand="block"
|
slot="start"
|
||||||
[disabled]="!feedbackForm.valid || !termsAgree || submitSuccess"
|
[(ngModel)]="protocolDataAgree"
|
||||||
>{{ 'feedback.form.submit' | translate }}</ion-button
|
name="protocolDataAgree"
|
||||||
>
|
></ion-checkbox>
|
||||||
</form>
|
</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>
|
</ion-content>
|
||||||
|
|||||||
@@ -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 {
|
pre {
|
||||||
white-space: pre-wrap;
|
white-space: pre-wrap;
|
||||||
}
|
}
|
||||||
ion-button {
|
ion-button {
|
||||||
margin: 10px;
|
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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@@ -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
|
* 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
|
* under the terms of the GNU General Public License as published by the Free
|
||||||
* Software Foundation, version 3.
|
* Software Foundation, version 3.
|
||||||
@@ -24,6 +24,7 @@ import {SettingsProvider} from '../settings.provider';
|
|||||||
@Component({
|
@Component({
|
||||||
selector: 'stapps-settings-item',
|
selector: 'stapps-settings-item',
|
||||||
templateUrl: 'settings-item.html',
|
templateUrl: 'settings-item.html',
|
||||||
|
styleUrls: ['settings-item.scss'],
|
||||||
})
|
})
|
||||||
export class SettingsItemComponent {
|
export class SettingsItemComponent {
|
||||||
/**
|
/**
|
||||||
|
|||||||
@@ -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
|
* 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
|
* under the terms of the GNU General Public License as published by the Free
|
||||||
* Software Foundation, version 3.
|
* Software Foundation, version 3.
|
||||||
@@ -12,6 +12,3 @@
|
|||||||
* You should have received a copy of the GNU General Public License along with
|
* You should have received a copy of the GNU General Public License along with
|
||||||
* this program. If not, see <https://www.gnu.org/licenses/>.
|
* this program. If not, see <https://www.gnu.org/licenses/>.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
page-settings {
|
|
||||||
}
|
|
||||||
@@ -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
|
* 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
|
* under the terms of the GNU General Public License as published by the Free
|
||||||
* Software Foundation, version 3.
|
* Software Foundation, version 3.
|
||||||
@@ -24,6 +24,7 @@ import {SettingsCache, SettingsProvider} from '../settings.provider';
|
|||||||
@Component({
|
@Component({
|
||||||
selector: 'stapps-settings-page',
|
selector: 'stapps-settings-page',
|
||||||
templateUrl: 'settings-page.html',
|
templateUrl: 'settings-page.html',
|
||||||
|
styleUrls: ['settings-page.scss'],
|
||||||
})
|
})
|
||||||
export class SettingsPageComponent implements OnInit {
|
export class SettingsPageComponent implements OnInit {
|
||||||
/**
|
/**
|
||||||
|
|||||||
@@ -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
|
~ 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
|
~ under the terms of the GNU General Public License as published by the Free
|
||||||
~ Software Foundation, version 3.
|
~ Software Foundation, version 3.
|
||||||
@@ -22,32 +22,38 @@
|
|||||||
</ion-toolbar>
|
</ion-toolbar>
|
||||||
</ion-header>
|
</ion-header>
|
||||||
|
|
||||||
<ion-content>
|
<ion-content class="ion-no-padding ion-content-parallax">
|
||||||
<ion-list *ngFor="let categoryKey of categoriesOrder">
|
<div>
|
||||||
<div *ngIf="objectKeys(settingsCache).includes(categoryKey)">
|
<div class="settings-content">
|
||||||
<ion-item-divider>
|
<ng-container *ngFor="let categoryKey of categoriesOrder">
|
||||||
<h5>
|
<ion-list *ngIf="objectKeys(settingsCache).includes(categoryKey)">
|
||||||
{{
|
<!-- <ion-item-divider>
|
||||||
'categories[0]'
|
<h2>
|
||||||
| thingTranslate
|
{{
|
||||||
: $any(
|
'categories[0]'
|
||||||
settingsCache[categoryKey]?.settings[objectKeys(settingsCache[categoryKey]?.settings)[0]]
|
| thingTranslate
|
||||||
)
|
: $any(
|
||||||
| titlecase
|
settingsCache[categoryKey]?.settings[
|
||||||
}}
|
objectKeys(settingsCache[categoryKey]?.settings)[0]
|
||||||
</h5>
|
]
|
||||||
</ion-item-divider>
|
)
|
||||||
<stapps-settings-item
|
| titlecase
|
||||||
*ngFor="let settingKeys of objectKeys(settingsCache[categoryKey].settings)"
|
}}
|
||||||
[setting]="settingsCache[categoryKey].settings[settingKeys]"
|
</h2>
|
||||||
></stapps-settings-item>
|
</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>
|
</div>
|
||||||
</ion-list>
|
</div>
|
||||||
|
|
||||||
<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>
|
|
||||||
</ion-content>
|
</ion-content>
|
||||||
|
|||||||
73
src/app/modules/settings/page/settings-page.scss
Normal file
73
src/app/modules/settings/page/settings-page.scss
Normal 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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -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
|
* 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
|
* under the terms of the GNU General Public License as published by the Free
|
||||||
* Software Foundation, version 3.
|
* Software Foundation, version 3.
|
||||||
|
|||||||
Reference in New Issue
Block a user