hazza/dspace-angular
1
0
Fork 1
mirror of https://github.com/DSpace/dspace-angular.git synced 2025-10-17 15:03:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

Expandable search form in header with tests (& e2e tests)

Browse Source 
Squashed:
66021: Expandable search form in header
66021: Adjustment small screens
66021: search icon now pressable and css partially moved to bootstrap classes
66021: start testing of header search box; TODO fix e2e
66021: E2E Tests
66021: Header search box now with angular animation and bootstrap > css; e2e fix
66021: feedback 2019-12-19 style changes
66021: Fix navbar search tests
Patch: add opacity to header search animation  Change the input style
66021: expandable search navbar - tests
66021: Expandable search form in header
Small fix after rebasing upstream/master
This commit is contained in:
Marie Verdonck
2019-11-05 16:34:53 +01:00
parent ad77640f7d
commit 34fb8612f8
10 changed files with 378 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/app/shared/animations/slide.ts
View File

@@ -1,13 +1,4 @@
import {
animate,
animateChild,
group,
query,
state,
style,
transition,
trigger
} from '@angular/animations';
import { animate, animateChild, group, query, state, style, transition, trigger } from '@angular/animations';
export const slide = trigger('slide', [
state('expanded', style({ height: '*' })),
@@ -70,3 +61,30 @@ export const slideSidebarPadding = trigger('slideSidebarPadding', [
transition('hidden <=> expanded', [animate('200ms')]),
transition('shown <=> expanded', [animate('200ms')]),
]);
export const expandSearchInput = trigger('toggleAnimation', [
state('collapsed', style({
width: '30px',
opacity: '0'
})),
state('expanded', style({
width: '250px',
opacity: '1'
})),
transition('* => collapsed', group([
animate('300ms ease-in-out', style({
width: '30px'
})),
animate('300ms ease-in', style({
opacity: '0'
}))
])),
transition('* => expanded', group([
animate('300ms ease-out', style({
opacity: '1'
})),
animate('300ms ease-in-out', style({
width: '250px'
}))
]))
]);