Mirrors/super-productivity
1
0
Fork 0
mirror of https://github.com/johannesjo/super-productivity.git synced 2026-01-23 02:36:05 +00:00
Code Issues Projects Releases Wiki Activity

Merge pull request #6058 from steindvart/tabs-style-small-devices

Browse source 
Improve settings tabs navigation on small screens
This commit is contained in:
Johannes Millan 2026-01-19 16:20:25 +01:00 • committed by GitHub
commit 27f07e418a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 52 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

45
src/app/pages/config-page/config-page.component.html
View file

@ -11,10 +11,17 @@
<!-- Tab: General -->
<mat-tab>
<ng-template mat-tab-label>
<mat-icon class="tab-icon">settings</mat-icon>
<mat-icon
class="tab-icon"
[matTooltip]="'PS.TABS.GENERAL' | translate"
>settings</mat-icon
>
<span class="tab-label">{{ 'PS.TABS.GENERAL' | translate }}</span>
</ng-template>
<div class="tab-content">
<h2 class="mat-h2 section-title">
{{ 'PS.TABS.GENERAL' | translate }}
</h2>
<theme-selector></theme-selector>
@for (section of generalFormCfg; track section.key) {
<section class="config-section section-{{ section.key }}">
@ -40,10 +47,17 @@
<!-- Tab: Time & Tracking -->
<mat-tab>
<ng-template mat-tab-label>
<mat-icon class="tab-icon">timer</mat-icon>
<mat-icon
class="tab-icon"
[matTooltip]="'PS.TABS.TIME_TRACKING' | translate"
>timer</mat-icon
>
<span class="tab-label">{{ 'PS.TABS.TIME_TRACKING' | translate }}</span>
</ng-template>
<div class="tab-content">
<h2 class="mat-h2 section-title">
{{ 'PS.TABS.TIME_TRACKING' | translate }}
</h2>
@for (section of timeTrackingFormCfg; track section.key) {
<section class="config-section section-{{ section.key }}">
<config-section
@ -59,10 +73,17 @@
<!-- Tab: Productivity -->
<mat-tab>
<ng-template mat-tab-label>
<mat-icon class="tab-icon">trending_up</mat-icon>
<mat-icon
class="tab-icon"
[matTooltip]="'PS.TABS.PRODUCTIVITY' | translate"
>trending_up</mat-icon
>
<span class="tab-label">{{ 'PS.TABS.PRODUCTIVITY' | translate }}</span>
</ng-template>
<div class="tab-content tour-productivityHelper">
<h2 class="mat-h2 section-title">
{{ 'PS.TABS.PRODUCTIVITY' | translate }}
</h2>
@for (section of globalProductivityConfigFormCfg; track section.key) {
<section class="config-section">
<config-section
@ -78,10 +99,17 @@
<!-- Tab: Plugins -->
<mat-tab>
<ng-template mat-tab-label>
<mat-icon class="tab-icon">extension</mat-icon>
<mat-icon
class="tab-icon"
[matTooltip]="'PS.TABS.PLUGINS' | translate"
>extension</mat-icon
>
<span class="tab-label">{{ 'PS.TABS.PLUGINS' | translate }}</span>
</ng-template>
<div class="tab-content">
<h2 class="mat-h2 section-title">
{{ 'PS.TABS.PLUGINS' | translate }}
</h2>
<section class="config-section plugin-section">
<plugin-management></plugin-management>
</section>
@ -100,10 +128,17 @@
<!-- Tab: Sync & Backup -->
<mat-tab>
<ng-template mat-tab-label>
<mat-icon class="tab-icon">cloud_sync</mat-icon>
<mat-icon
class="tab-icon"
[matTooltip]="'PS.TABS.SYNC_BACKUP' | translate"
>cloud_sync</mat-icon
>
<span class="tab-label">{{ 'PS.TABS.SYNC_BACKUP' | translate }}</span>
</ng-template>
<div class="tab-content">
<h2 class="mat-h2 section-title">
{{ 'PS.TABS.SYNC_BACKUP' | translate }}
</h2>
<section class="config-section tour-syncSection">
@let syncSettingsForm = syncSettingsService.syncSettingsForm$ | async;
@if (syncSettingsForm) {

20
src/app/pages/config-page/config-page.component.scss
View file

@ -20,9 +20,9 @@
::ng-deep .mat-mdc-tab {
min-width: 120px;
@include mq(xs, max) {
min-width: 90px;
padding: 0 8px;
@include mq(md, max) {
min-width: 48px;
padding: 0 12px;
}
}
@ -32,17 +32,17 @@
width: 20px;
height: 20px;
@include mq(xs, max) {
margin-inline-end: 4px;
font-size: 18px;
width: 18px;
height: 18px;
@include mq(md, max) {
margin-inline-end: 0;
font-size: 24px;
width: 24px;
height: 24px;
}
}
.tab-label {
@include mq(xs, max) {
font-size: 12px;
@include mq(md, max) {
display: none;
}
}
}

2
src/app/pages/config-page/config-page.component.ts
View file

@ -59,6 +59,7 @@ import { DialogConfirmComponent } from '../../ui/dialog-confirm/dialog-confirm.c
import { LS } from '../../core/persistence/storage-keys.const';
import { MatTab, MatTabGroup, MatTabLabel } from '@angular/material/tabs';
import { MatIcon } from '@angular/material/icon';
import { MatTooltip } from '@angular/material/tooltip';
@Component({
selector: 'config-page',
@ -77,6 +78,7 @@ import { MatIcon } from '@angular/material/icon';
MatTab,
MatTabLabel,
MatIcon,
MatTooltip,
],
})
export class ConfigPageComponent implements OnInit, OnDestroy {