github/karma
1
0
Fork 0
mirror of https://github.com/prymitive/karma synced 2026-05-07 03:26:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): tweak fade animations

Browse Source
This commit is contained in:
Łukasz Mierzwa
2021-11-12 18:48:31 +00:00
committed by Łukasz Mierzwa
parent 1cc343dedd
commit 9c2b18f9f2
7 changed files with 43 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
ui/Makefile
View File

@@ -22,7 +22,7 @@ npm-fetch: $(NODE_INSTALL)
$(NODE_PATH)/%: $(NODE_INSTALL)
@if [ ! -x $@ ]; then echo "missing script: $@" ; exit 1; fi
build/index.html: $(NODE_INSTALL) $(NODE_PATH)/react-scripts $(call rwildcard, public src, *) purgecss.config.js
build/index.html: $(NODE_INSTALL) $(NODE_PATH)/react-scripts $(call rwildcard, public src, *) purgecss.config.js restore-css
@rm -fr node_modules/.cache/eslint-loader
cat node_modules/bootstrap/scss/_root.scss | sed s/':root {'/'* {'/ > src/Styles/BootstrapRoot.scss
npm run build
@@ -62,6 +62,10 @@ backup-css:
rm -fr build.pre/static/*
cp -R build/static/css build.pre/static/css
.PHONY: restore-css
restore-css:
@(test -d build.pre/static/css && rm -fr build/static/css && cp -R build.pre/static/css build/static/css) || echo
build.pre/css.diff: build purgecss.config.js
npx prettier -w build.pre/static/css/*.css build/static/css/*.css
diff -uNr build.pre/static/css build/static/css > build.pre/css.diff || echo

2
ui/src/Components/Grid/AlertGrid/Grid.tsx
View File

@@ -151,7 +151,7 @@ const Grid: FC<{
key={group.id}
classNames={
context.animations.duration
? "components-animation-fade"
? "components-animation-alergroup"
: ""
}
timeout={context.animations.duration}

4
ui/src/Components/Grid/AlertGrid/index.test.tsx
View File

@@ -211,7 +211,7 @@ describe("<Grid />", () => {
const tree = MountedGrid(MockThemeContext);
expect(
tree.find("div.components-grid-alertgrid-alertgroup").html()
).toMatch(/animate components-animation-fade-appear/);
).toMatch(/animate components-animation-alergroup-appear/);
});
it("doesn't use animations when settingsStore.themeConfig.config.animations is false", () => {
@@ -222,7 +222,7 @@ describe("<Grid />", () => {
const tree = MountedGrid(MockThemeContextWithoutAnimations);
expect(
tree.find("div.components-grid-alertgrid-alertgroup").html()
).not.toMatch(/animate components-animation-fade-appear/);
).not.toMatch(/animate components-animation-alertgroup-appear/);
});
it("renders all alert groups", () => {

6
ui/src/Styles/Components/_AlertGroup.scss
View File

@@ -1,11 +1,11 @@
.components-grid-alertgrid-alertgroup {
padding: 0.3rem;
&.components-animation-fade-appear-done.animate,
&.components-animation-fade-enter-done.animate {
&.components-animation-alergroup-appear-done.animate,
&.components-animation-alergroup-enter-done.animate {
z-index: 1;
transition-property: transform;
transition-duration: 0.4s;
transition-duration: 0.25s;
transition-timing-function: ease-in-out;
}
}

11
ui/src/Styles/Components/_Fade.scss
View File

@@ -14,6 +14,15 @@ $duration: 0.5s;
opacity: 1;
}
.components-animation-fade-exit-active {
opacity: 0.01;
opacity: 0;
transition: opacity $duration ease-out;
}
@keyframes alert-fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

21
ui/src/Styles/Components/_FadeAlertGroup.scss Normal file
View File

@@ -0,0 +1,21 @@
@use "sass:math";
$duration: 0.5s;
.components-animation-alergroup-appear,
.components-animation-alergroup-enter {
opacity: 0;
}
.components-animation-alergroup-appear-active,
.components-animation-alergroup-enter-active {
opacity: 1;
transition: opacity math.div($duration, 2) ease-in math.div($duration, 2);
}
.components-animation-alergroup-exit {
opacity: 1;
}
.components-animation-alergroup-exit-active {
opacity: 0;
transition: opacity $duration ease-out;
}

1
ui/src/Styles/Components/_index.scss
View File

@@ -27,3 +27,4 @@
@import "./Toast";
@import "./WithClick";
@import "./Flash";
@import "./FadeAlertGroup";