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

[DURACOM-195] Header, navbar, and sidebar refactoring

Browse Source
This commit is contained in:
Davide Negretti
2023-11-23 19:03:03 +01:00
parent 7d2fdb7598
commit 8718bd0df6
65 changed files with 913 additions and 702 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,4 +1,4 @@
import { animate, animateChild, group, query, state, style, transition, trigger } from '@angular/animations';
import { animate, group, state, style, transition, trigger } from '@angular/animations';
export const slide = trigger('slide', [
state('expanded', style({ height: '*' })),
@@ -12,45 +12,35 @@ export const slide = trigger('slide', [
export const slideMobileNav = trigger('slideMobileNav', [
state('expanded', style({ height: 'auto', 'min-height': '100vh' })),
state('expanded', style({ height: '*', minHeight: '*' })),
state('collapsed', style({ height: 0 })),
state('collapsed', style({ height: 0, minHeight: 0 })),
transition('expanded <=> collapsed', animate('300ms'))
]);
const collapsedStyle = style({ marginLeft: '-{{ sidebarWidth }}' });
const expandedStyle = style({ marginLeft: '0' });
const options = { params: { sidebarWidth: '*' } };
const collapsedSidebarStyle = style({ maxWidth: '{{collapsedWidth}}' });
const expandedSidebarStyle = style({ maxWidth: '{{expandedWidth}}' });
const unpinnedSidebarPageStyle = style({ paddingLeft: '{{collapsedWidth}}' });
const pinnedSidebarPageStyle = style({ paddingLeft: '{{expandedWidth}}' });
const hiddenSidebarPageStyle = style({ paddingLeft: '0' });
const options = { params: { collapsedWidth: '*', expandedWidth: '*' } };
const animation = '300ms ease-in-out';
export const slideSidebar = trigger('slideSidebar', [
transition('expanded => collapsed',
group(
[
query('@*', animateChild()),
query('.sidebar-collapsible', expandedStyle, options),
query('.sidebar-collapsible', animate('300ms ease-in-out', collapsedStyle))
],
)),
transition('collapsed => expanded',
group(
[
query('@*', animateChild()),
query('.sidebar-collapsible', collapsedStyle),
query('.sidebar-collapsible', animate('300ms ease-in-out', expandedStyle), options)
]
))
state('collapsed', collapsedSidebarStyle, options),
state('expanded', expandedSidebarStyle, options),
transition('expanded => collapsed', animate(animation, collapsedSidebarStyle)),
transition('collapsed => expanded', animate(animation, expandedSidebarStyle)),
]);
export const slideSidebarPadding = trigger('slideSidebarPadding', [
state('hidden', style({ paddingLeft: 0 })),
state('shown', style({ paddingLeft: '{{ collapsedSidebarWidth }}' }), { params: { collapsedSidebarWidth: '*' } }),
state('expanded', style({ paddingLeft: '{{ totalSidebarWidth }}' }), { params: { totalSidebarWidth: '*' } }),
transition('hidden <=> shown', [animate('200ms')]),
transition('hidden <=> expanded', [animate('200ms')]),
transition('shown <=> expanded', [animate('200ms')]),
state('hidden', hiddenSidebarPageStyle),
state('unpinned', unpinnedSidebarPageStyle, options),
state('pinned', pinnedSidebarPageStyle, options),
transition('hidden <=> unpinned', animate(animation)),
transition('hidden <=> pinned', animate(animation)),
transition('unpinned <=> pinned', animate(animation)),
]);
export const expandSearchInput = trigger('toggleAnimation', [