tmshv/hudozka
1
0 Fork 0
Code Issues Pull Requests Actions Releases Wiki Activity

ui components updates

Browse Source
This commit is contained in:
tmshv committed 2022-09-06 20:37:24 +03:00
1 parent 160c66a0af
commit 1d1e41adea
13 files changed
+90 -82
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

package-lock.json
Generated
+15
View File
@@ -9,6 +9,7 @@
"version": "7.0.0",
"license": "ISC",
"dependencies": {
"@radix-ui/react-icons": "^1.1.1",
"@radix-ui/react-navigation-menu": "^1.0.0",
"classnames": "^2.2.6",
"date-fns": "^2.11.1",
@@ -448,6 +449,14 @@
"react-dom": "^16.8 || ^17.0 || ^18.0"
}
},
"node_modules/@radix-ui/react-icons": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/@radix-ui/react-icons/-/react-icons-1.1.1.tgz",
"integrity": "sha512-xc3wQC59rsFylVbSusQCrrM+6695ppF730Q6yqzhRdqDcRNWIm2R6ngpzBoSOQMcwnq4p805F+Gr7xo4fmtN1A==",
"peerDependencies": {
"react": "^16.x || ^17.x || ^18.x"
}
},
"node_modules/@radix-ui/react-id": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.0.0.tgz",
@@ -4524,6 +4533,12 @@
"@radix-ui/react-use-escape-keydown": "1.0.0"
}
},
"@radix-ui/react-icons": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/@radix-ui/react-icons/-/react-icons-1.1.1.tgz",
"integrity": "sha512-xc3wQC59rsFylVbSusQCrrM+6695ppF730Q6yqzhRdqDcRNWIm2R6ngpzBoSOQMcwnq4p805F+Gr7xo4fmtN1A==",
"requires": {}
},
"@radix-ui/react-id": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.0.0.tgz",
package.json
+1
View File
@@ -18,6 +18,7 @@
"author": "Roman Timashev",
"license": "ISC",
"dependencies": {
"@radix-ui/react-icons": "^1.1.1",
"@radix-ui/react-navigation-menu": "^1.0.0",
"classnames": "^2.2.6",
"date-fns": "^2.11.1",
public/static/graphics/hmenu-b.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 137 B

public/static/graphics/hmenu-close-b.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 500 B

src/components/Block/index.tsx
+6 -3
View File
@@ -1,21 +1,24 @@
import s from "./styles.module.css"
import cx from "classnames"
import classnames from "classnames/bind"
import { createElement } from "react"
const cx = classnames.bind(s)
export type BlockProps = {
as?: keyof HTMLElementTagNameMap
style?: React.CSSProperties
direction: "horizontal" | "vertical"
children?: React.ReactNode
align?: boolean
}
export const Block: React.FC<BlockProps> = ({ as = "div", style, direction, ...props }) => {
export const Block: React.FC<BlockProps> = ({ as = "div", align = false, style, direction, ...props }) => {
const directionClass = direction === "horizontal"
? s.horizontal
: s.vertical
const newProps = {
className: cx(s.block, directionClass),
className: cx(s.block, directionClass, { align }),
style,
}
src/components/Block/styles.module.css
+4
View File
@@ -5,6 +5,10 @@
justify-content: flex-start;
}
.block.align {
align-items: center;
}
.horizontal {
flex-direction: row;
}
src/components/Menu/index.tsx
+3 -5
View File
@@ -8,18 +8,16 @@ import { ActiveLink } from "./ActiveLink"
let cx = classnames.bind(s)
export type MenuLayout = "desktop" | "mobile"
export type MenuProps = {
layout: MenuLayout
vertical?: boolean
items: IMenu[]
}
export const Menu: React.FC<MenuProps> = ({ layout, items }) => {
export const Menu: React.FC<MenuProps> = ({ vertical = false, items }) => {
const router = useRouter()
return (
<NavigationMenu.Root>
<NavigationMenu.List className={cx(s.menu, layout)}>
<NavigationMenu.List className={cx(s.menu, { vertical })}>
{
items.map(item => {
const current = router.asPath === item.href
src/components/Menu/styles.module.css
+11 -8
View File
@@ -8,16 +8,11 @@
font-size: var(--font-size-second);
list-style: none;
padding: var(--size-s);
}
/* MENU LAYOUT */
.desktop {
/* NOT VERTICAL */
flex-direction: row;
}
.mobile {
.vertical {
flex-direction: column;
}
@@ -27,7 +22,7 @@
user-select: none;
background-color: var(--color-back-main);
border-radius: var(--size-s);
transition: box-shadow 200ms ease-in;
transition: box-shadow 200ms ease-in, background-color 200ms ease-in;
padding: var(--size-s) var(--size-s);
}
@@ -48,3 +43,11 @@
text-decoration: none;
color: var(--color-text);
}
/* DARK THEME */
@media (prefers-color-scheme: dark) {
.menuItem.active:hover {
box-shadow: none;
background-color: var(--color-back);
}
}
src/components/MenuToggle/index.tsx
+6 -9
View File
@@ -1,7 +1,5 @@
import s from "./styles.module.css"
import cx from "classnames"
import { Button } from "@/ui/Button"
import { HamburgerMenuIcon, Cross1Icon } from "@radix-ui/react-icons"
export interface IMenuToggleProps {
style?: React.CSSProperties
@@ -16,12 +14,11 @@ export const MenuToggle: React.FC<IMenuToggleProps> = props => {
style={props.style}
theme={"icon"}
>
<div
className={cx(s.toggle, {
[s.open]: props.open,
[s.close]: !props.open,
})}
/>
{props.open ? (
<Cross1Icon width={24} height={24} />
) : (
<HamburgerMenuIcon width={24} height={24} />
)}
</Button>
)
}
src/components/MenuToggle/styles.module.css
-14
View File
@@ -1,14 +0,0 @@
.toggle {
--s: 32px;
width: var(--s);
height: var(--s);
background-size: var(--s);
}
.toggle.open {
background-image: url(/static/graphics/hmenu-close-b.png);
}
.toggle.close {
background-image: url(/static/graphics/hmenu-b.png);
}
src/components/Navigation/index.tsx
+30 -34
View File
@@ -17,15 +17,6 @@ export const Navigation: React.FC<NavigationProps> = props => {
const [open, toggleOpen] = useToggle(false)
const { menu } = useContext(ConfigContext)
if (!collapseMenu) {
return (
<Menu
layout={"desktop"}
items={menu}
/>
)
}
return (
<>
<Overlay
@@ -33,8 +24,36 @@ export const Navigation: React.FC<NavigationProps> = props => {
onClickOverlay={toggleOpen}
duration={250}
>
<Block direction={"horizontal"}>
<Block direction={"horizontal"} align style={{
padding: "var(--size-s)",
}}>
<Spacer />
<MenuToggle
open={open}
onClick={toggleOpen}
/>
</Block>
<Block direction={"horizontal"} style={{
justifyContent: "center",
}}>
<Menu vertical
items={menu}
/>
</Block>
</Overlay>
<Block direction={"horizontal"} align style={{
padding: "var(--size-s)",
}}>
{collapseMenu ? null : (
<Menu
items={menu}
/>
)}
<Spacer />
{!collapseMenu ? null : (
<MenuToggle
open={open}
onClick={toggleOpen}
@@ -42,30 +61,7 @@ export const Navigation: React.FC<NavigationProps> = props => {
margin: "var(--size-xs)",
}}
/>
</Block>
<Block direction={"horizontal"} style={{
justifyContent: "center",
}}>
<nav style={{
width: "75%",
}}>
<Menu
layout={"mobile"}
items={menu}
/>
</nav>
</Block>
</Overlay>
<Block direction={"horizontal"}>
<Spacer />
<MenuToggle
open={open}
onClick={toggleOpen}
style={{
margin: "var(--size-xs)",
}}
/>
)}
</Block>
</>
)
src/style/style.css
+1
View File
@@ -182,6 +182,7 @@ h3 {
--color-back-main: hsl(240, 10%, 10%);
--color-back: hsl(240, 10%, 15%);
--color-back-active: hsl(240, 10%, 20%);
--color-back-opposite: hsl(240, 10%, 80%);
--color-link: hsl(240, 10%, 40%);
--color-link-opposite: hsl(240, 10%, 60%);
src/ui/Button/button.module.css
+13 -9
View File
@@ -6,25 +6,21 @@
text-align: center;
border-radius: 100px;
border-radius: var(--size-s);
border: 1px solid var(--color-shadow);
color: var(--color-text);
background-color: var(--color-back);
transition: box-shadow 150ms;
box-shadow: none;
transition: box-shadow 200ms ease-in, background-color 200ms ease-in;
outline: none;
cursor: pointer;
}
.button:hover {
margin: 1px;
/* margin-left: 1px;
margin-right: 1px; */
border: none;
box-shadow: var(--shadow-active);
border-color: rgba(0, 0, 0, 0);
box-shadow: var(--shadow);
}
/* MODIFICATORS */
@@ -52,5 +48,13 @@
}
.themeIcon {
border-color: rgba(0, 0, 0, 0);
padding: var(--size-xs) var(--size-xs);
}
/* DARK THEME */
@media (prefers-color-scheme: dark) {
.button:hover {
background-color: var(--color-back-active);
}
}