Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CSS Refactoring (Or: UI Redesign 2 ) #1402

Merged
merged 159 commits into from
Nov 8, 2022
Merged
Changes from 1 commit
Commits
Show all changes
159 commits
Select commit Hold shift + click to select a range
502cf8c
replace crypto-js with crypto-es
Schottkyc137 May 29, 2022
543417d
replace lodash with lodash-es
Schottkyc137 May 29, 2022
5c2dfcc
use webdav/web as es-compatible
Schottkyc137 May 29, 2022
cccef9d
replace faker with locale-specific faker version
Schottkyc137 May 29, 2022
fa125de
Replace faker calls with import
Schottkyc137 May 29, 2022
fb8f92c
replace "width: 100%" components with global style
Schottkyc137 May 29, 2022
78dbafb
replace "height: 100%" components with global style
Schottkyc137 May 29, 2022
0ad6adf
Improve Main UI component styles
Schottkyc137 May 29, 2022
53f4cab
Improve search component styles
Schottkyc137 May 29, 2022
a545080
Improve view component styles
Schottkyc137 May 29, 2022
10ef496
Improve user and webdav css components
Schottkyc137 May 29, 2022
0ab150a
remove unused css class
Schottkyc137 May 29, 2022
a19f53d
improve background-processing-indicator css
Schottkyc137 May 29, 2022
5bfa04b
improve support component css
Schottkyc137 May 29, 2022
4b07b99
improve changelog component layout + style
Schottkyc137 May 30, 2022
9b86e64
further improve css
Schottkyc137 May 31, 2022
8241858
Replace @import with @use rule
Schottkyc137 Jun 18, 2022
ddb60c2
continue to refactor scss
Schottkyc137 Jun 18, 2022
0f59a36
Add a border-left-highlight utility directive and a common dialog clo…
Schottkyc137 Jun 18, 2022
eea7cf1
Refactor file structure
Schottkyc137 Jun 18, 2022
bd80b9e
Refactor activity-card
Schottkyc137 Jun 18, 2022
7e40343
further refactor components
Schottkyc137 Jun 19, 2022
5a15593
make table consistent
Schottkyc137 Jun 19, 2022
17e8aab
Merge remote-tracking branch 'origin/master' into flex-layout
Schottkyc137 Jun 19, 2022
3b4dc3b
fix erroneous html template
Schottkyc137 Jun 19, 2022
bce59fc
Add typography config
Schottkyc137 Jun 20, 2022
b059a99
Use secondary text; add comments
Schottkyc137 Jun 20, 2022
f600470
Improve css
Schottkyc137 Jul 5, 2022
2d57f1b
Merge remote-tracking branch 'origin/master' into flex-layout
Schottkyc137 Jul 7, 2022
ed9f5b8
Adapt new scss scheme
Schottkyc137 Jul 7, 2022
290c13c
further improvements
Schottkyc137 Jul 7, 2022
e766aad
Move editable up one level
Schottkyc137 Aug 4, 2022
7105c0a
Merge remote-tracking branch 'origin/master' into flex-layout
Schottkyc137 Aug 4, 2022
b694932
Merge remote-tracking branch 'origin/master' into flex-layout
Schottkyc137 Aug 11, 2022
1878e74
use sass:math to avoid ambiguity
Schottkyc137 Aug 11, 2022
94e9192
use span to enable pointer-cursor
Schottkyc137 Aug 11, 2022
4a0f59e
Improve Add button in subrecord
Schottkyc137 Aug 11, 2022
e118754
Simplify readonly function
Schottkyc137 Aug 11, 2022
ee08d74
Changed div to span tag to display contents inline
Schottkyc137 Aug 11, 2022
09a01b3
Fix calendar
Schottkyc137 Aug 11, 2022
00c064c
refactor
Schottkyc137 Aug 16, 2022
1ad8e2d
Use div instead of chip-list
Schottkyc137 Aug 16, 2022
4c01d4b
Implement a customizable tooltip component to avoid code duplication
Schottkyc137 Aug 16, 2022
683ae30
Replace previous use of custom tooltips with the new solution
Schottkyc137 Aug 16, 2022
fe401a1
Add comments
Schottkyc137 Aug 16, 2022
8e06fb5
Add tests
Schottkyc137 Aug 16, 2022
1d74481
Reformat
Schottkyc137 Aug 16, 2022
8490b1e
Add comment
Schottkyc137 Aug 16, 2022
4300b92
Fix attendance tooltip
Schottkyc137 Aug 16, 2022
03f1bce
Fix code climate
Schottkyc137 Aug 16, 2022
9947f93
remove comments
Schottkyc137 Aug 16, 2022
d4c7aac
reformat
Schottkyc137 Aug 16, 2022
9d0f3a6
Fix test
Schottkyc137 Aug 16, 2022
3f032f6
Merge remote-tracking branch 'origin/master' into flex-layout
Schottkyc137 Aug 16, 2022
85a8cf4
Update src/app/core/common-components/customizable-tooltip/customizab…
Schottkyc137 Aug 17, 2022
ae7b827
Added pill
Schottkyc137 Aug 17, 2022
570ac1f
Rename customizable-tooltip to template-tooltip
Schottkyc137 Aug 17, 2022
da28ce7
Merge remote-tracking branch 'origin/customizable-tooltip' into custo…
Schottkyc137 Aug 17, 2022
fee9698
Re-introduce container class
Schottkyc137 Aug 17, 2022
54509dd
Merge branch 'master' into customizable-tooltip
TheSlimvReal Aug 17, 2022
18e3392
removed unnecessary ts-ignores
TheSlimvReal Aug 17, 2022
d350ced
updated minor dependencies
TheSlimvReal Aug 17, 2022
9c4648b
locking and overriding webpack version
TheSlimvReal Aug 17, 2022
aad2f55
cleaned up some config files
TheSlimvReal Aug 17, 2022
e802d0a
Fix flickering tooltip
Schottkyc137 Aug 18, 2022
b82c9af
Merge remote-tracking branch 'origin/customizable-tooltip' into custo…
Schottkyc137 Aug 18, 2022
934fb69
Fix grammatical errors
Schottkyc137 Aug 18, 2022
a9d947b
Merge remote-tracking branch 'origin/master' into flex-layout
Schottkyc137 Aug 18, 2022
44a51a9
max-width for large texts
Schottkyc137 Aug 18, 2022
456c446
justify content to the end and remove spacing when focus indicator no…
Schottkyc137 Aug 18, 2022
e0d3c87
fix: navigations can be highlighted again
Schottkyc137 Aug 18, 2022
048772d
merge master; cleanup
Schottkyc137 Aug 18, 2022
ef7d76d
sonarcloud
Schottkyc137 Aug 19, 2022
7399534
Add stories for the alert component
Schottkyc137 Aug 19, 2022
2009b29
Merge remote-tracking branch 'origin/storybook-fix' into flex-layout
Schottkyc137 Aug 19, 2022
730b8cd
Refactor the alert component
Schottkyc137 Aug 19, 2022
d781a1b
Fix: reintroduce the alerts-array
Schottkyc137 Aug 19, 2022
8fbb485
rename file
Schottkyc137 Aug 19, 2022
f154e9d
Update alert service, admin component and remove flex layout
Schottkyc137 Aug 19, 2022
aaa9542
Merge remote-tracking branch 'origin/customizable-tooltip' into flex-…
Schottkyc137 Aug 19, 2022
e794693
fix tests
Schottkyc137 Aug 19, 2022
e36b823
Merge remote-tracking branch 'origin/master' into flex-layout
Schottkyc137 Aug 23, 2022
8e54c37
Merge remote-tracking branch 'origin/master' into flex-layout
TheSlimvReal Aug 23, 2022
0302b21
merge master
Schottkyc137 Aug 23, 2022
b024b41
Merge remote-tracking branch 'origin/flex-layout' into flex-layout
Schottkyc137 Aug 23, 2022
79c2512
Remove FlexLayout Module
Schottkyc137 Aug 23, 2022
26296e5
Remove flex-layout completely and implement custom ScreenWidthObserver
Schottkyc137 Aug 24, 2022
e8df58a
Fix: initial value working
Schottkyc137 Aug 24, 2022
05e51b9
Add comment
Schottkyc137 Aug 24, 2022
7073f00
Fix screen size observable
Schottkyc137 Aug 25, 2022
21557ab
Fix: start with an initial value
Schottkyc137 Aug 25, 2022
74f32c2
remove _ordinal, editable false per default
Schottkyc137 Aug 25, 2022
d3af770
Add dialog close button
Schottkyc137 Aug 25, 2022
7be6a4f
Fix: password change form takes available space on small screens
Schottkyc137 Aug 25, 2022
1819dea
fixed test
TheSlimvReal Aug 26, 2022
dd74aee
Merge remote-tracking branch 'origin/master' into flex-layout
Schottkyc137 Sep 1, 2022
d4be34a
Improve styling of the user account
Schottkyc137 Sep 1, 2022
68ca00e
Remove bold heading, remove deprecated code
Schottkyc137 Sep 1, 2022
91e4078
Add gap
Schottkyc137 Sep 1, 2022
92097c0
Use ng-container to avoid polluting the dom
Schottkyc137 Sep 1, 2022
6e082f5
Add a max screen size to the adaptive grid
Schottkyc137 Sep 1, 2022
69409e2
Fix login component for small screens
Schottkyc137 Sep 1, 2022
d2eaf6f
Fix: color in attendance calendar
Schottkyc137 Sep 1, 2022
167be2c
Use less prominent colors and switch to raised buttons
Schottkyc137 Sep 1, 2022
cac7219
Fix: use the accent color for menu items
Schottkyc137 Sep 1, 2022
b8f6009
Merge remote-tracking branch 'origin/master' into flex-layout
Schottkyc137 Sep 1, 2022
2828847
Remove more containers
Schottkyc137 Sep 5, 2022
eb4e2f7
rename screen width observer
Schottkyc137 Sep 8, 2022
b82f743
remove mat-cell attribute
Schottkyc137 Sep 8, 2022
93d9230
Fix: unsubscribe from the media subscription when there are different…
Schottkyc137 Sep 8, 2022
5d1e46b
revert changes
Schottkyc137 Sep 15, 2022
b089108
Merge remote-tracking branch 'origin/master' into flex-layout
Schottkyc137 Sep 15, 2022
9f92ea5
fix subrecord not showing columns
Schottkyc137 Sep 15, 2022
101cd7a
Fix centering of roll-call
Schottkyc137 Sep 15, 2022
91de60d
Fix pwa width and changelog button width
Schottkyc137 Sep 15, 2022
d55528f
Update i18n
Schottkyc137 Sep 15, 2022
3a4f478
Reformat
Schottkyc137 Sep 15, 2022
2ce2b02
Reformat
Schottkyc137 Sep 22, 2022
63b76cd
replace div with container
Schottkyc137 Sep 22, 2022
90d8417
Fix: left border correctly works in Safari
Schottkyc137 Sep 22, 2022
978681a
Merge remote-tracking branch 'origin/master' into flex-layout
Schottkyc137 Sep 22, 2022
6c116fd
Merge branch 'fix-safari-before' into flex-layout
Schottkyc137 Sep 22, 2022
7371074
Use new sass setup
Schottkyc137 Sep 22, 2022
aa776f8
Replace BreakpointObserver with custom implementation
Schottkyc137 Sep 22, 2022
b78eb91
Add scss variables for breakpoints
Schottkyc137 Sep 22, 2022
c26c768
Increase bottom margin to avoid conflict with the primary action
Schottkyc137 Sep 22, 2022
29a1648
Use positioning on the host
Schottkyc137 Sep 22, 2022
d3b9ab7
Use grid instead of fixed positioning
Schottkyc137 Sep 22, 2022
c3a2d10
Apply padding to children, not the content itself
Schottkyc137 Sep 30, 2022
7e7f520
Merge remote-tracking branch 'origin/master' into flex-layout
Schottkyc137 Sep 30, 2022
80615cc
Remove unused import
Schottkyc137 Sep 30, 2022
6a43bb2
Improve Table visuals
Schottkyc137 Sep 30, 2022
3edec14
remove unused property
Schottkyc137 Sep 30, 2022
11ea396
Fix spelling
Schottkyc137 Sep 30, 2022
df706be
Correctly center the button
Schottkyc137 Oct 8, 2022
3fa9081
Merge remote-tracking branch 'origin/master' into flex-layout
Schottkyc137 Oct 8, 2022
a21f7e3
Merge remote-tracking branch 'origin/master' into flex-layout
Schottkyc137 Oct 20, 2022
e398b21
Dialog close button is no longer always focused
Schottkyc137 Oct 20, 2022
a3a8e86
Fix: plus button is no longer the only button when there are no records
Schottkyc137 Oct 20, 2022
2b0bbb6
remove console.logs
Schottkyc137 Oct 20, 2022
76df34f
Fix: form no longer has horizontal scroll
Schottkyc137 Oct 20, 2022
004773c
Fix: add margin to the bottom of some pages
Schottkyc137 Oct 20, 2022
d98a54a
Test: Fix height on iOs
Schottkyc137 Oct 20, 2022
78ef777
Fix Height on iOs
Schottkyc137 Oct 20, 2022
ad1c4f5
Fix Height on iOs
Schottkyc137 Oct 20, 2022
02a89aa
Merge remote-tracking branch 'origin/flex-layout' into flex-layout
Schottkyc137 Oct 20, 2022
dc347f2
size of activity card title
sleidig Oct 26, 2022
073ef06
slightly less bulky add button icon
sleidig Oct 26, 2022
8938147
Only do the viewport hack when on iOS
Schottkyc137 Oct 27, 2022
39f668f
remove `height: 100%` as it always overflows
Schottkyc137 Oct 27, 2022
d2df288
Fix tests
Schottkyc137 Oct 27, 2022
d639545
Fix e2e tests
Schottkyc137 Oct 27, 2022
436fec9
Merge remote-tracking branch 'origin/master' into flex-layout
Schottkyc137 Oct 27, 2022
1963f3a
Data import: Remove flexLayout
Schottkyc137 Oct 27, 2022
198082e
Merge remote-tracking branch 'origin/master' into flex-layout
Schottkyc137 Nov 5, 2022
1614c76
Merge Master
Schottkyc137 Nov 5, 2022
8708af0
Refactor code
Schottkyc137 Nov 5, 2022
6827eea
added empty container to align navigation components
TheSlimvReal Nov 8, 2022
acb04c2
feedback buttons can wrap
TheSlimvReal Nov 8, 2022
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Implement a customizable tooltip component to avoid code duplication
  • Loading branch information
Schottkyc137 committed Aug 16, 2022
commit 4c01d4b07287ba7ccf6b50b33ee8b2f089170b9a
11 changes: 11 additions & 0 deletions src/app/core/common-components/common-components.module.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { CustomizableTooltipDirective } from "./customizable-tooltip/customizable-tooltip.directive";
import { CustomizableTooltipComponent } from "./customizable-tooltip/customizable-tooltip.component";

@NgModule({
declarations: [CustomizableTooltipDirective, CustomizableTooltipComponent],
imports: [CommonModule],
exports: [CustomizableTooltipDirective],
})
export class CommonComponentsModule {}
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
<div
(mouseleave)="hide.emit()"
(mouseenter)="show.emit()"
class="tooltip-wrapper mat-elevation-z3"
@appear
>
<ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
</div>
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
@use "@angular/material" as mat;

.tooltip-wrapper {
background-color: mat.get-color-from-palette(mat.$light-theme-background-palette, card);
border-radius: 4px;
border: 1px solid mat.get-color-from-palette(mat.$grey-palette, 400);
transform-origin: center 0;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';

import { CustomizableTooltipComponent } from './customizable-tooltip.component';

describe('CustomizableTooltipComponent', () => {
let component: CustomizableTooltipComponent;
let fixture: ComponentFixture<CustomizableTooltipComponent>;

beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ CustomizableTooltipComponent ]
})
.compileComponents();
});

beforeEach(() => {
fixture = TestBed.createComponent(CustomizableTooltipComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});

it('should create', () => {
expect(component).toBeTruthy();
});
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import { Component, EventEmitter, Input, Output, TemplateRef } from '@angular/core';
import { animate, state, style, transition, trigger } from "@angular/animations";

@Component({
selector: 'app-customizable-tooltip',
templateUrl: './customizable-tooltip.component.html',
styleUrls: ['./customizable-tooltip.component.scss'],
animations: [
trigger('appear', [
state('void', style({
transform: 'scale(0)'
})),
state('*', style({
transform: 'scale(1)'
})),
transition(':enter', [
animate('100ms')
]),
])
]
})
export class CustomizableTooltipComponent {
/**
* This provides finer control on the content to be visible on the tooltip
* This template will be injected in ToolTipRenderer directive in the consumer template
* <ng-template #template>
* content.....
* </ng-template>
*/
@Input() contentTemplate: TemplateRef<any>;

@Output() hide = new EventEmitter<void>();

@Output() show = new EventEmitter<void>();
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import { CustomizableTooltipDirective } from './customizable-tooltip.directive';

describe('CustomizableTooltipDirective', () => {
it('should create an instance', () => {
const directive = new CustomizableTooltipDirective();
expect(directive).toBeTruthy();
});
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,104 @@
import {
Directive,
ElementRef,
HostListener,
Input,
OnDestroy,
OnInit,
TemplateRef,
} from "@angular/core";
import {
Overlay,
OverlayPositionBuilder,
OverlayRef,
} from "@angular/cdk/overlay";
import { ComponentPortal } from "@angular/cdk/portal";
import { CustomizableTooltipComponent } from "./customizable-tooltip.component";

@Directive({
selector: "[appCustomizableTooltip]",
})
export class CustomizableTooltipDirective implements OnInit, OnDestroy {
@Input() tooltipDisabled: boolean = false;

@Input() tooltipShown: boolean = true;

@Input() delayShow: number = 1000;

@Input() delayHide: number = 150;

@Input("appCustomizableTooltip") contentTemplate!: TemplateRef<any>;

private overlayRef!: OverlayRef;

private tooltipTimeout?: any;

constructor(
private overlay: Overlay,
private overlayPositionBuilder: OverlayPositionBuilder,
private element: ElementRef
) {}

ngOnInit(): void {
if (!this.tooltipShown) {
return;
}
const positionStrategy = this.overlayPositionBuilder
.flexibleConnectedTo(this.element)
.withPositions([
{
originX: "center",
originY: "bottom",
overlayX: "center",
overlayY: "top",
offsetY: 5,
},
]);

this.overlayRef = this.overlay.create({ positionStrategy });
}

ngOnDestroy() {
this.hide();
}

@HostListener("mouseenter")
onMouseEnter() {
this.show();
}

@HostListener("mouseleave")
onMouseLeave() {
this.hide();
}

private show() {
if (this.tooltipDisabled) {
return;
}
if (this.tooltipTimeout) {
clearTimeout(this.tooltipTimeout);
}
this.tooltipTimeout = setTimeout(() => {
//attach the component if it has not already attached to the overlay
if (!this.overlayRef.hasAttached()) {
const tooltipRef = this.overlayRef.attach(
new ComponentPortal(CustomizableTooltipComponent)
);
tooltipRef.instance.contentTemplate = this.contentTemplate;
tooltipRef.instance.hide.subscribe(() => this.hide());
tooltipRef.instance.show.subscribe(() => this.show());
}
}, this.delayShow);
}

private hide() {
if (this.tooltipTimeout) {
clearTimeout(this.tooltipTimeout);
}
this.tooltipTimeout = setTimeout(
() => this.overlayRef.detach(),
this.delayHide
);
}
}