Mirrors/notesnook
1
0
Fork 0
mirror of https://github.com/streetwriters/notesnook.git synced 2026-09-02 20:21:19 +02:00
Code Issues Packages Projects Releases Wiki Activity

refactor: improve all placeholders

Browse Source
This commit is contained in:
thecodrr
2020-03-28 11:44:05 +05:00
parent 2cfc0ae79d
commit 2ed4f71f13
7 changed files with 190 additions and 353 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
apps/web/src/components/placeholders/favorites-placeholder.js
View File

@@ -3,6 +3,7 @@ import React from "react";
import * as Icon from "../icons";
import { Flex, Text } from "rebass";
//TODO refactor this
function FavoritesPlaceholder() {
return (
<>

18
apps/web/src/components/placeholders/index.js Normal file
View File

@@ -0,0 +1,18 @@
import React from "react";
import { Flex } from "rebass";
function Placeholder(props) {
const { items, renderItem } = props;
return (
<>
<Flex
variant="columnCenter"
alignSelf="stretch"
sx={{ position: "relative" }}
>
{items.map(renderItem)}
</Flex>
</>
);
}
export default Placeholder;

187
apps/web/src/components/placeholders/notebooks-placeholder.js
View File

@@ -1,156 +1,59 @@
import { motion } from "framer-motion";
import React from "react";
import { Box, Flex, Text } from "rebass";
import Placeholder from "./index";
import { getRandom } from "../../utils/random";
const titles = ["Yearbook 2020", "Semester 5", "Final Project", "Ready. Go"];
const descriptions = [
"Thoughts & Stuff",
"Ugh. Can't handle it anymore.",
"Have to organize all this :(",
"What the heck!"
];
function NotebooksPlaceholder() {
return (
<>
<Flex
style={{
width: "300px",
position: "relative",
alignSelf: "center",
flexDirection: "row",
alignItems: "center",
justifyContent: "center"
}}
>
<motion.div
animate={{
x: 2,
y: 2
}}
style={{
position: "absolute",
bottom: "50px",
right: "120px",
zIndex: 999
}}
transition={{
duration: 4,
ease: "linear",
yoyo: Infinity
<Placeholder
items={[0, 1]}
renderItem={item => (
<Flex
mt={-80 * item}
ml={80 * item}
opacity={!item ? 0.7 : 1}
height="150px"
sx={{
zIndex: item,
bg: "hover",
borderRadius: "default",
boxShadow: "2px 2px 7px 0px #00000040"
}}
>
<Box
style={{
width: "130px",
backgroundColor: "#c9c9c9",
height: "150px",
borderRadius: "5px",
boxShadow: "2px 2px 15px 0px #00000040"
<Flex
variant="columnCenter"
bg="background"
mr={2}
width={120}
sx={{
borderRadius: "default",
boxShadow: "1px 1px 5px 0px #00000060"
}}
>
<Flex
backgroundColor="primary"
opacity={1}
sx={{
borderRadius: "5px",
boxShadow: "1px 1px 5px 0px #00000060",
height: "150px",
width: "120px",
justifyContent: "center",
alignItems: "center",
flexDirection: "column"
}}
<Box m={3} height={10} width={"100%"} bg="primary" />
<Text
color="primary"
fontSize={"body"}
fontFamily="heading"
textAlign="center"
px={1}
>
<Box
style={{
height: 10,
width: "120px",
backgroundColor: "white",
marginBottom: "20px",
top: 15
}}
></Box>
<Text
color="white"
fontSize={14}
fontFamily="heading"
textAlign="center"
px={1}
>
My Notebook
<Text color="white" fontSize={11}>
Keep it all organized
</Text>
{titles[getRandom(0, 3)]}
<Text color="dimPrimary" wrap="wrap" fontSize="subBody">
{descriptions[getRandom(0, 3)]}
</Text>
</Flex>
</Box>
</motion.div>
<motion.div
animate={{
x: -2,
y: -2
}}
transition={{
duration: 4,
ease: "linear",
yoyo: Infinity
}}
>
<Box
style={{
width: "130px",
backgroundColor: "#c9c9c9",
height: "150px",
borderRadius: "5px",
boxShadow: "2px 2px 15px 0px #00000040"
}}
>
<Flex
backgroundColor="primary"
opacity={0.5}
sx={{
borderRadius: "5px",
boxShadow: "1px 1px 5px 0px #00000060",
height: "150px",
width: "120px",
justifyContent: "center",
alignItems: "center",
flexDirection: "column"
}}
>
<Box
style={{
height: 10,
width: "120px",
backgroundColor: "white",
marginBottom: "20px",
top: 15
}}
></Box>
<Text
color="white"
fontSize={14}
fontFamily="heading"
textAlign="center"
px={1}
>
My Notebook
<Text color="white" fontSize={11}>
Keep it flowing
</Text>
</Text>
</Flex>
</Box>
</motion.div>
</Flex>
<Text
color="gray"
marginTop={50}
alignSelf="center"
sx={{
textAlign: "center",
fontSize: "title"
}}
>
Notebooks you add will appear here.
</Text>
</>
</Text>
</Flex>
</Flex>
)}
></Placeholder>
);
}
export default NotebooksPlaceholder;

158
apps/web/src/components/placeholders/notesplacholder.js
View File

@@ -1,131 +1,57 @@
import { motion } from "framer-motion";
import React from "react";
import { Box, Flex, Text } from "rebass";
var parameters = {
padding: "4px",
margin: "3px",
width: "170px",
shadow: "primary",
opacity: "0.5"
};
import { Text, Flex, Box } from "rebass";
import Placeholder from "./index";
import * as Icon from "../icons";
import { getRandom } from "../../utils/random";
const colors = ["hover", "primary", "dimPrimary", "shade"];
const icons = [Icon.Vault, Icon.Pin, Icon.Star];
const titles = ["Assignment #4", "Git Workflow", "Project Aurora"];
const words = Array(25).fill(0);
function NotesPlaceholder() {
return (
<>
<Flex
style={{
position: "relative",
width: "250px",
alignItems: "center",
justifyContent: "center"
}}
>
{[
{
right: "0px",
bottom: "-50px",
opacity: "0.7",
x: 2,
y: 2,
pos: "absolute"
},
{
right: null,
bottom: null,
opacity: "0.9",
x: -2,
y: -2,
pos: "relative"
}
].map(item => (
<motion.div
style={{
position: item.pos,
left: item.right,
marginTop: item.bottom,
boxShadow: "2px 2px 15px 0px #00000060",
borderRadius: "5px"
}}
animate={{
x: item.x,
y: item.y
}}
transition={{
duration: 4,
ease: "linear",
yoyo: Infinity
<Placeholder
items={titles}
label="Notes you write will appear here"
renderItem={(_, index) => {
const Icon = icons[index];
return (
<Flex
width="55%"
bg="bgSecondary"
opacity={0.9}
mt={index && -50}
ml={-40 + index * 60}
sx={{
boxShadow: "2px 2px 7px 0px #00000040",
borderRadius: "default"
}}
>
<Flex
className="home-animation"
flexDirection="row"
bg="#f0f0f0"
opacity={item.opacity}
>
<Flex>
<Box
width={1}
bg="primary"
sx={{ borderRadius: "25px" }}
px={parameters.padding}
height="100%"
></Box>
<Flex flex="1 1 auto" flexDirection="column" p={1}>
<Flex alignItems="center" justifyContent="space-between">
<Text variant="title" color="primary" mb={1}>
{titles[index]}
</Text>
<Icon size={20} color="dimPrimary" />
</Flex>
<Flex sx={{}} flexDirection="column" px="5px" py="5px">
<Box
sx={{
fontFamily: "heading"
}}
color="primary"
>
Title
</Box>
{[1, 2, 3, 4].map(item => (
<Flex flexWrap="wrap">
{words.map(() => (
<Box
opacity={parameters.opacity}
bg={parameters.shadow}
width={getRandom(20, 50)}
py={"4px"}
mr={1}
my={"3px"}
sx={{ borderRadius: "25px" }}
py={parameters.padding}
my={parameters.margin}
width={parameters.width}
></Box>
bg={colors[getRandom(0, 3)]}
/>
))}
<Flex flexDirection="row">
<Box
width={1 / 6}
py={parameters.padding}
my={parameters.margin}
sx={{ borderRadius: "25px" }}
bg="icon"
></Box>
<Box
width={1 / 6}
height={1}
py={parameters.padding}
my={parameters.margin}
mx="10px"
sx={{ borderRadius: "25px" }}
bg="icon"
></Box>
</Flex>
</Flex>
</Flex>
</motion.div>
))}
</Flex>
<Text
color="gray"
marginTop={50}
alignSelf="center"
sx={{
textAlign: "center",
fontSize: "title"
}}
>
Notes you write appear here.
</Text>
</>
</Flex>
);
}}
/>
);
}
export default NotesPlaceholder;

169
apps/web/src/components/placeholders/tags-placeholder.js
View File

@@ -1,102 +1,83 @@
import { motion } from "framer-motion";
import React from "react";
import { Flex, Text } from "rebass";
import React, { useState, useEffect } from "react";
import Animated from "../animated";
import { Text, Flex } from "rebass";
import { getRandom } from "../../utils/random";
import Placeholder from "./index";
import { useAnimation } from "framer-motion";
const animatedTags = [
{
delay: 3,
marginTop: "-50px",
size: 14,
text: "presentations",
left: "25px"
},
{
delay: 12,
marginTop: "20px",
size: 16,
text: "quotesonlife",
left: "90px"
},
{
delay: 18,
marginTop: "-25px",
size: 18,
text: "workinprogress",
left: "70px"
},
{
delay: 24,
marginTop: "0px",
size: 14,
text: "todolists",
left: "35px"
},
{
delay: 30,
marginTop: "40px",
size: 24,
text: "myschoolwork",
left: "50px"
}
const tags = [
"presentations",
"quotesonlife",
"workinprogress",
"goodlife",
"school",
"lessons",
"essays",
"disasters",
"todolists",
"myschoolwork"
];
function TagsPlaceholder() {
return (
<>
<Flex
style={{
width: "300px",
position: "relative",
height: "100px",
alignSelf: "center",
flexDirection: "row",
alignItems: "center",
justifyContent: "center"
}}
>
{animatedTags.map(item => (
<motion.div
style={{
padding: 0,
margin: 0,
marginTop: item.marginTop,
left: item.left,
position: "absolute"
}}
animate={{
opacity: [0.1, 0.5, 1, 0.5, 0],
scaleX: [0.7, 0.75, 0.85, 0.9, 1],
scaleY: [0.7, 0.75, 0.85, 0.9, 1]
}}
transition={{
duration: 12,
ease: "linear",
delay: item.delay,
loop: Infinity
}}
>
<Text color="text" fontSize={item.size} as="span">
<Text as="span" color="primary">
#
</Text>
{item.text}
</Text>
</motion.div>
))}
</Flex>
<Text
color="gray"
marginTop={50}
alignSelf="center"
sx={{
textAlign: "center",
fontSize: "title"
}}
>
Tags added to notes appear here.
</Text>
</>
<Placeholder
items={[0]}
renderItem={() => (
<Flex
width={"80%"}
opacity={0.9}
alignItems="center"
justifyContent="center"
p={2}
sx={{
borderRadius: "default"
}}
>
<Text fontSize={40} color="primary">
#
</Text>
<TagSlider />
</Flex>
)}
></Placeholder>
);
}
export default TagsPlaceholder;
function TagSlider() {
const [tag, setTag] = useState(getRandomTag());
const controls = useAnimation();
useEffect(() => {
animate(controls, setTag);
}, [controls]);
return (
<Animated.Box
initial={{ opacity: 0, y: -50 }}
animate={controls}
transition={{ duration: 0.4, ease: "easeOut" }}
sx={{ fontSize: 40, color: "primary" }}
>
{tag}
</Animated.Box>
);
}
async function animate(controls, setTag) {
await controls.start({ opacity: 1, y: 0 });
await controls.start({
opacity: 0,
y: 50,
transition: { delay: 1, duration: 0.4 }
});
await controls.start({
opacity: 0,
y: -50,
transition: { duration: 0 }
});
setTag(getRandomTag());
await animate(controls, setTag);
}
function getRandomTag() {
return tags[getRandom(0, tags.length - 1)];
}

2
apps/web/src/components/properties/index.js
View File

@@ -21,7 +21,7 @@ function Properties() {
const setTag = useStore(store => store.setTag);
const toggleLocked = useStore(store => store.toggleLocked);
const hideProperties = useAppStore(store => store.hideProperties);
const showProperties = useAppStore(store => store.showProperties);
//const showProperties = useAppStore(store => store.showProperties);
const arePropertiesVisible = useAppStore(store => store.arePropertiesVisible);
const isFocusModeEnabled = useAppStore(store => store.isFocusModeEnabled);

8
apps/web/src/utils/random.js Normal file
View File

@@ -0,0 +1,8 @@
function getRandom(min, max) {
return Math.round(Math.random() * (max - min) + min);
}
function getRandomArbitrary(min, max) {
return Math.random() * (max - min) + min;
}
export { getRandom, getRandomArbitrary };