forked from morfeojs/morfeo
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: copy button and stiling improvements
- Loading branch information
Showing
18 changed files
with
157 additions
and
82 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| build | ||
| public |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1 @@ | ||
| build | ||
| dev | ||
| public | ||
| dev |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,6 +1,7 @@ | ||
| .labelContainer { | ||
| display: flex; | ||
| align-items: center; | ||
| cursor: pointer; | ||
| } | ||
|
|
||
| .toggle { | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| import React, { useCallback, useState } from 'react'; | ||
| import { Color } from '@morfeo/react'; | ||
| import clsx from 'clsx'; | ||
| import { Icon } from '../Icon'; | ||
| import styles from './style.module.css'; | ||
|
|
||
| type Props = { | ||
| text: string; | ||
| }; | ||
|
|
||
| function copyToClipboard(element: HTMLElement) { | ||
| if (window.getSelection && document.createRange) { | ||
| const selection = window.getSelection(); | ||
| const range = document.createRange(); | ||
| range.selectNodeContents(element); | ||
| selection?.removeAllRanges(); | ||
| selection?.addRange(range); | ||
|
|
||
| return document.execCommand('copy', true); | ||
| } | ||
|
|
||
| return false; | ||
| } | ||
|
|
||
| export const CopyButton: React.FC<Props> = ({ text }) => { | ||
| const [isCopied, setIsCopied] = useState<boolean>(false); | ||
| const ref = React.useRef<HTMLSpanElement>(null); | ||
|
|
||
| const onClick = useCallback(() => { | ||
| const hasBeenCopied = copyToClipboard(ref.current as HTMLSpanElement); | ||
| if (hasBeenCopied) { | ||
| setTimeout(() => { | ||
| setIsCopied(false); | ||
| }, 2000); | ||
| } | ||
| setIsCopied(hasBeenCopied); | ||
| }, []); | ||
|
|
||
| return ( | ||
| <> | ||
| <div | ||
| className={clsx(styles.copyButton, isCopied && styles.copied)} | ||
| onClick={onClick} | ||
| > | ||
| <Icon name="copy" size="s" color={'invertedTextColor' as Color} /> | ||
| <p className="morfeo-typography-p2"> | ||
| {isCopied ? 'Copied' : 'Copy alias'} | ||
| </p> | ||
| </div> | ||
| <span ref={ref} className={styles.hiddenText}> | ||
| {text} | ||
| </span> | ||
| </> | ||
| ); | ||
| }; |
37 changes: 37 additions & 0 deletions
37
devtool/src/_shared/components/CopyButton/style.module.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| .copyButton { | ||
| display: flex; | ||
| white-space: nowrap; | ||
| overflow: hidden; | ||
| text-overflow: ellipsis; | ||
| align-items: center; | ||
| width: fit-content; | ||
| align-self: flex-end; | ||
| max-width: var(--spacings-s); | ||
| transition: var(--transitions-medium); | ||
| background-color: var(--colors-gray-dark); | ||
| padding: calc(var(--spacings-xxs) / 2); | ||
| border-top-left-radius: var(--radii-xs); | ||
| border-bottom-right-radius: var(--radii-xs); | ||
| } | ||
|
|
||
| .copyButton p { | ||
| display: none; | ||
| opacity: 0; | ||
| margin-left: var(--spacings-xxs); | ||
| color: var(--colors-inverted-text-color) !important; | ||
| } | ||
|
|
||
| .copyButton:hover, .copyButton.copied { | ||
| align-self: flex-end; | ||
| max-width: 10rem; | ||
| } | ||
|
|
||
| .copyButton:hover p, .copyButton.copied p { | ||
| opacity: 1; | ||
| display: inline-block; | ||
| } | ||
|
|
||
| .hiddenText { | ||
| position: fixed; | ||
| opacity: 0; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,25 +1,28 @@ | ||
| import React from "react"; | ||
| import { ThemeKey } from "@morfeo/react"; | ||
| import { Link } from "../Link"; | ||
| import { RouteName } from "../../../_shared/contexts"; | ||
| import { useRouter } from "../../hooks"; | ||
| import React from 'react'; | ||
| import { ThemeKey } from '@morfeo/react'; | ||
| import { noCase } from 'change-case'; | ||
| import { RouteName } from '../../../_shared/contexts'; | ||
|
|
||
| import styles from "./style.module.css"; | ||
| import clsx from "clsx"; | ||
| import styles from './style.module.css'; | ||
| import clsx from 'clsx'; | ||
| import { Link } from '../Link'; | ||
| import { CopyButton } from '../CopyButton'; | ||
|
|
||
| type Props = { | ||
| slice: ThemeKey; | ||
| }; | ||
|
|
||
| export const SliceCard: React.FC<Props> = ({ slice }) => { | ||
| const { navigate } = useRouter(); | ||
| return ( | ||
| <div | ||
| className={clsx("morfeo-card", styles.sliceCard)} | ||
| onClick={() => navigate(slice as RouteName)} | ||
| > | ||
| <Link to={slice as RouteName}>{slice}</Link> | ||
| <button className="morfeo-button-round height-l width-l mt-s" /> | ||
| <div className={clsx('morfeo-card', styles.container)}> | ||
| <div className={clsx('morfeo-card', styles.innerCard)}> | ||
| <CopyButton text={slice} /> | ||
| </div> | ||
| <div className={styles.bottomContainer}> | ||
| <Link to={'slice' as RouteName} className="morfeo-typography-h2"> | ||
| {noCase(slice)} | ||
| </Link> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,7 +1,34 @@ | ||
| .sliceCard { | ||
| .container { | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: flex-start; | ||
| align-items: flex-start; | ||
| margin: var(--spacings-xs); | ||
| width: 7rem; | ||
| height: 7rem; | ||
| width: 10rem; | ||
| height: 15rem; | ||
| border: var(--borders-primary); | ||
| border-color: var(--colors-primary); | ||
| } | ||
|
|
||
| .innerCard { | ||
| display: flex; | ||
| align-items: flex-end; | ||
| justify-content: flex-end; | ||
| overflow: hidden; | ||
| width: 10rem; | ||
| height: 10rem; | ||
| background-color: var(--colors-primary); | ||
| border: var(--borders-primary); | ||
| border-color: var(--colors-primary); | ||
| border-bottom-width: none; | ||
| } | ||
|
|
||
| .bottomContainer { | ||
| width: 100%; | ||
| display: flex; | ||
| padding-left: var(--spacings-xs); | ||
| justify-content: flex-start; | ||
| text-align: left; | ||
| border-bottom-left-radius: var(--radii-s); | ||
| border-bottom-right-radius: var(--radii-s); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.