OpenNeo/impress-2020
OpenNeo/impress-2020
1
0
Fork 0
Code Pull requests Activity

move hacky .css files into emotion

Browse source
This commit is contained in:
Matt Dunn-Rankin 2020-04-25 23:17:59 -07:00
parent da3b690645
commit 441f6550db
6 changed files with 48 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/ItemList.css
View file

@ -1,12 +0,0 @@
.item-list-row-exit {
opacity: 1;
height: auto;
}
.item-list-row-exit-active {
opacity: 0;
height: 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
transition: all 0.5s;
}

2
src/ItemList.js
View file

@ -10,8 +10,6 @@ import {
useTheme,
} from "@chakra-ui/core";
import "./ItemList.css";
export function ItemListContainer({ children }) {
return <Flex direction="column">{children}</Flex>;
}

12
src/ItemsPanel.css
View file

@ -1,12 +0,0 @@
.items-panel-zone-exit {
opacity: 1;
height: auto;
}
.items-panel-zone-exit-active {
opacity: 0;
height: 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
transition: all 0.5s;
}

33
src/ItemsPanel.js
View file

@ -1,4 +1,5 @@
import React from "react";
import { css } from "emotion";
import {
Box,
Editable,
@ -15,8 +16,6 @@ import { CSSTransition, TransitionGroup } from "react-transition-group";
import { Delay, Heading1, Heading2 } from "./util";
import { ItemListContainer, Item, ItemListSkeleton } from "./ItemList";
import "./ItemsPanel.css";
function ItemsPanel({ outfitState, loading, dispatchToOutfit }) {
const { zonesAndItems } = outfitState;
@ -45,7 +44,20 @@ function ItemsPanel({ outfitState, loading, dispatchToOutfit }) {
{zonesAndItems.map(({ zoneLabel, items }) => (
<CSSTransition
key={zoneLabel}
classNames="items-panel-zone"
classNames={css`
&-exit {
opacity: 1;
height: auto;
}
&-exit-active {
opacity: 0;
height: 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
transition: all 0.5s;
}
`}
timeout={500}
onExit={(e) => {
e.style.height = e.offsetHeight + "px";
@ -97,7 +109,20 @@ function ItemRadioList({ name, items, outfitState, dispatchToOutfit }) {
{items.map((item) => (
<CSSTransition
key={item.id}
classNames="item-list-row"
classNames={css`
&-exit {
opacity: 1;
height: auto;
}
&-exit-active {
opacity: 0;
height: 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
transition: all 0.5s;
}
`}
timeout={500}
onExit={(e) => {
e.style.height = e.offsetHeight + "px";

17
src/OutfitPreview.css
View file

@ -1,17 +0,0 @@
.outfit-preview-layer-exit {
opacity: 1;
}
.outfit-preview-layer-exit-active {
opacity: 0;
transition: opacity 0.2s;
}
.outfit-preview-layer-image {
opacity: 0.01;
}
.outfit-preview-layer-image[src] {
opacity: 1;
transition: opacity 0.2s;
}

26
src/OutfitPreview.js
View file

@ -1,4 +1,5 @@
import React from "react";
import { css } from "emotion";
import { CSSTransition, TransitionGroup } from "react-transition-group";
import gql from "graphql-tag";
import { useQuery } from "@apollo/react-hooks";
@ -20,8 +21,6 @@ import { Delay } from "./util";
import OutfitResetModal from "./OutfitResetModal";
import SpeciesColorPicker from "./SpeciesColorPicker";
import "./OutfitPreview.css";
export const itemAppearanceFragment = gql`
fragment AppearanceForOutfitPreview on Appearance {
layers {
@ -90,10 +89,16 @@ function OutfitPreview({ outfitState, dispatchToOutfit }) {
{visibleLayers.map((layer) => (
<CSSTransition
key={layer.id}
classNames={{
exit: "outfit-preview-layer-exit",
exitActive: "outfit-preview-layer-exit-active",
}}
classNames={css`
&-exit {
opacity: 1;
}
&-exit-active {
opacity: 0;
transition: opacity 0.2s;
}
`}
timeout={200}
>
<FullScreenCenter>
@ -102,7 +107,14 @@ function OutfitPreview({ outfitState, dispatchToOutfit }) {
objectFit="contain"
maxWidth="100%"
maxHeight="100%"
className="outfit-preview-layer-image"
className={css`
opacity: 0.01;
&[src] {
opacity: 1;
transition: opacity 0.2s;
}
`}
// This sets up the cache to not need to reload images during
// download!
// TODO: Re-enable this once we get our change into Chakra