move and resize styling
This commit is contained in:
saml33
parent
5accf79de5
commit
b2837801c0
|
|
@ -1,12 +1,46 @@
|
|||
import React from 'react'
|
||||
import styled from '@emotion/styled'
|
||||
import useMangoStore from '../stores/useMangoStore'
|
||||
import { MoveIcon } from './icons'
|
||||
|
||||
const StyledDragWrapperContent = styled.div`
|
||||
transition: all 0.25s ease-in;
|
||||
opacity: 0;
|
||||
`
|
||||
|
||||
const StyledDragBkg = styled.div`
|
||||
transition: all 0.25s ease-in;
|
||||
opacity: 0;
|
||||
`
|
||||
|
||||
const StyledDragWrapper = styled.div`
|
||||
:hover {
|
||||
${StyledDragWrapperContent} {
|
||||
opacity: 1;
|
||||
}
|
||||
${StyledDragBkg} {
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
export default function FloatingElement({ shrink = false, children }) {
|
||||
const { uiLocked } = useMangoStore((s) => s.settings)
|
||||
return (
|
||||
<div
|
||||
className={`m-1 p-4 bg-th-bkg-2 rounded-lg overflow-auto ${
|
||||
className={`m-1 p-4 bg-th-bkg-2 rounded-lg overflow-auto relative ${
|
||||
shrink ? null : `h-full`
|
||||
}`}
|
||||
>
|
||||
{!uiLocked ? (
|
||||
<StyledDragWrapper className="absolute top-0 left-0 w-full h-full cursor-move z-50">
|
||||
<StyledDragWrapperContent className="relative flex flex-col items-center justify-center text-th-fgd-3 h-full z-50">
|
||||
<MoveIcon className="w-8 h-8" />
|
||||
<div className="mt-2">Drag to reposition</div>
|
||||
</StyledDragWrapperContent>
|
||||
<StyledDragBkg className="absolute top-0 left-0 rounded-lg w-full h-full bg-th-bkg-3" />
|
||||
</StyledDragWrapper>
|
||||
) : null}
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import { useEffect, useState } from 'react'
|
|||
import { useTheme } from 'next-themes'
|
||||
import { MoonIcon, SunIcon } from '@heroicons/react/outline'
|
||||
import DropMenu from './DropMenu'
|
||||
import MangoIcon from './MangoIcon'
|
||||
import { MangoIcon } from './icons'
|
||||
|
||||
const THEMES = [
|
||||
{ name: 'Light', icon: <SunIcon /> },
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ import {
|
|||
} from '@heroicons/react/outline'
|
||||
import MenuItem from './MenuItem'
|
||||
import ThemeSwitch from './ThemeSwitch'
|
||||
import WalletIcon from './WalletIcon'
|
||||
import { WalletIcon } from './icons'
|
||||
import UiLock from './UiLock'
|
||||
import { useRouter } from 'next/router'
|
||||
import WalletSelect from './WalletSelect'
|
||||
|
|
|
|||
|
|
@ -0,0 +1,93 @@
|
|||
export const MangoIcon = ({ className }) => {
|
||||
return (
|
||||
<svg
|
||||
className={className}
|
||||
width="14"
|
||||
height="20"
|
||||
viewBox="0 0 22 29"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M19.3612 4.7088L19.3624 4.70878L19.3954 4.68752C15.1331 -2.5831 9.55993 3.14112 9.55993 3.14112L9.5679 3.15513L9.56692 3.15538C12.7718 8.77426 18.8625 5.02924 19.3612 4.7088Z"
|
||||
strokeWidth="2.5"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M10.4268 8.60034C11.4416 9.12103 12.5521 9.29944 13.6147 9.29636C14.2321 9.86347 14.7458 10.5296 15.2285 11.2136C15.4286 11.4993 15.6091 11.7982 15.7688 12.1084C16.1378 12.8191 16.4093 13.5711 16.6839 14.332C16.7644 14.555 16.8454 14.7792 16.929 15.003C16.9552 15.0988 16.9826 15.1946 17.0111 15.2905L17.0126 15.2902C17.4368 16.7451 18.0562 18.2994 18.8862 19.5826C19.1607 20.0042 19.4674 20.4037 19.8051 20.7767C19.8715 20.8486 19.9395 20.9198 20.0076 20.9911C20.3255 21.3241 20.6457 21.6596 20.8272 22.0792C21.0531 22.6022 21.0358 23.2037 20.8999 23.7571C20.2586 26.3656 17.7466 27.0509 15.3459 27.1141L15.3471 27.1111C14.447 27.1291 13.5531 27.062 12.7604 26.9808C12.7604 26.9808 8.93745 26.5851 5.69698 24.216L5.59239 24.1382C5.21415 23.8564 4.85332 23.5518 4.51186 23.2263C3.6036 22.3594 2.79544 21.3762 2.17743 20.2968C2.1801 20.2941 2.18277 20.2915 2.18543 20.2888L2.18982 20.2844C2.11668 20.1527 2.04656 20.0198 1.97946 19.8855C1.38159 18.6889 1.01722 17.3863 1.00072 16.0018C0.9726 13.6787 1.76736 11.2996 3.27803 9.57468L3.27642 9.57041C4.09436 8.67445 5.11672 7.97059 6.327 7.56987C7.08575 7.31635 7.8823 7.19462 8.68213 7.20997C9.16883 7.78148 9.76147 8.25316 10.4268 8.60034Z"
|
||||
strokeWidth="2.5"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export const WalletIcon = ({ className }) => {
|
||||
return (
|
||||
<svg
|
||||
className={className}
|
||||
width="20"
|
||||
height="17"
|
||||
viewBox="0 0 20 17"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M14.625 8.24561C13.7276 8.24561 13 8.97325 13 9.87061C13 10.768 13.7276 11.4956 14.625 11.4956C15.5224 11.4956 16.25 10.768 16.25 9.87061C16.25 8.97325 15.5224 8.24561 14.625 8.24561ZM14 9.87061C14 9.52554 14.2799 9.24561 14.625 9.24561C14.9701 9.24561 15.25 9.52554 15.25 9.87061C15.25 10.2157 14.9701 10.4956 14.625 10.4956C14.2799 10.4956 14 10.2157 14 9.87061Z"
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M3.25 0.25C1.59301 0.25 0.25 1.59301 0.25 3.25L0.250676 13.8083C0.250702 15.4652 1.59371 16.8083 3.25068 16.8083H17.2147C18.5735 16.8083 19.7507 15.755 19.7507 14.3708V5.37076C19.7507 4.51126 19.2968 3.77937 18.6275 3.34799C18.6257 2.86554 18.5949 2.24606 18.3863 1.7108C18.2324 1.31604 17.973 0.930835 17.5462 0.652726C17.1244 0.377893 16.6042 0.25 16 0.25H3.25ZM17.6434 4.51627C17.6217 4.50923 17.6004 4.50122 17.5796 4.4923C17.4681 4.45439 17.3457 4.43326 17.2147 4.43326H4.81318C4.39896 4.43326 4.06318 4.09747 4.06318 3.68326C4.06318 3.26904 4.39896 2.93326 4.81318 2.93326H17.1143C17.0993 2.67796 17.0651 2.45157 16.9887 2.2555C16.9238 2.08899 16.8395 1.98262 16.7273 1.90947C16.61 1.83305 16.3958 1.75 16 1.75H3.25C2.42146 1.75 1.75003 2.42141 1.75 3.24995L1.75068 13.8082C1.75068 14.6368 2.42212 15.3083 3.25068 15.3083H17.2147C17.8262 15.3083 18.2507 14.8477 18.2507 14.3708V5.37076C18.2507 5.01586 18.0156 4.67002 17.6434 4.51627Z"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export const ResizeIcon = ({ className }) => {
|
||||
return (
|
||||
<svg
|
||||
className={className}
|
||||
width="21"
|
||||
height="22"
|
||||
viewBox="0 0 21 22"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="M0.297393 19.2885C-0.0906675 18.8955 -0.0906675 18.2584 0.297393 17.8654L16.6671 1.2885C17.0552 0.895531 17.6843 0.895531 18.0724 1.2885C18.4605 1.68148 18.4605 2.31861 18.0724 2.71158L1.70268 19.2885C1.31462 19.6815 0.685454 19.6815 0.297393 19.2885Z" />
|
||||
<path d="M7.37259 20.2885C6.98453 19.8955 6.98453 19.2584 7.37259 18.8654L17.6673 8.4404C18.0554 8.04743 18.6845 8.04743 19.0726 8.4404C19.4606 8.83337 19.4606 9.47051 19.0726 9.86348L8.77788 20.2885C8.38982 20.6815 7.76065 20.6815 7.37259 20.2885Z" />
|
||||
<path d="M14.2222 19.8654C13.8341 20.2584 13.8341 20.8955 14.2222 21.2885C14.6103 21.6815 15.2394 21.6815 15.6275 21.2885L20.2972 16.5597C20.6853 16.1667 20.6853 15.5296 20.2972 15.1366C19.9091 14.7436 19.28 14.7436 18.8919 15.1366L14.2222 19.8654Z" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export const MoveIcon = ({ className }) => {
|
||||
return (
|
||||
<svg
|
||||
className={className}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="feather feather-move"
|
||||
>
|
||||
<polyline points="5 9 2 12 5 15"></polyline>
|
||||
<polyline points="9 5 12 2 15 5"></polyline>
|
||||
<polyline points="15 19 12 22 9 19"></polyline>
|
||||
<polyline points="19 9 22 12 19 15"></polyline>
|
||||
<line x1="2" y1="12" x2="22" y2="12"></line>
|
||||
<line x1="12" y1="2" x2="12" y2="22"></line>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
|
@ -55,7 +55,9 @@ button {
|
|||
}
|
||||
|
||||
.react-grid-item.react-grid-placeholder {
|
||||
background: #332f46;
|
||||
background: var(--bkg-3);
|
||||
opacity: 90%;
|
||||
border-radius: 8px;
|
||||
transition-duration: 100ms;
|
||||
z-index: 2;
|
||||
-webkit-user-select: none;
|
||||
|
|
@ -65,6 +67,28 @@ button {
|
|||
user-select: none;
|
||||
}
|
||||
|
||||
.react-resizable-handle {
|
||||
background-image: none;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.react-grid-item > .react-resizable-handle {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.react-grid-item > .react-resizable-handle::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
bottom: 0;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-right: 3px solid var(--primary);
|
||||
border-bottom: 3px solid var(--primary);
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
input::-webkit-outer-spin-button,
|
||||
input::-webkit-inner-spin-button {
|
||||
/* display: none; <- Crashes Chrome on hover */
|
||||
|
|
|
|||
|
|
@ -13,9 +13,6 @@ module.exports = {
|
|||
cursor: {
|
||||
help: 'help',
|
||||
},
|
||||
fontFamily: {
|
||||
sans: ['Nunito'],
|
||||
},
|
||||
colors: {
|
||||
'mango-orange': {
|
||||
DEFAULT: '#DFAB01',
|
||||
|
|
|
|||
Loading…
Reference in New Issue