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

feat(config-page): hide tabs labes in 'md' size screens

Browse source
This commit is contained in:
Ivan Kalashnikov 2026-01-19 20:21:05 +07:00
parent b230216e33
commit d1f5045646
3 changed files with 37 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -11,7 +11,11 @@
<!-- 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">
@ -40,7 +44,11 @@
<!-- 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">
@ -59,7 +67,11 @@
<!-- 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">
@ -78,7 +90,11 @@
<!-- 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">
@ -100,7 +116,11 @@
<!-- 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">

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 {