From 5c9cd8c020c103546ecf01c41dc722107257a4df Mon Sep 17 00:00:00 2001 From: Fedor Katurov Date: Thu, 23 Dec 2021 14:12:13 +0700 Subject: [PATCH] fixed delete button on tags --- src/components/containers/TagField/index.tsx | 10 +--- .../containers/TagField/styles.module.scss | 6 +++ .../input/Button/styles.module.scss | 2 +- src/components/node/NodeTagsBlock/index.tsx | 2 + src/components/tags/TagWrapper/index.tsx | 21 ++++++-- .../tags/TagWrapper/styles.module.scss | 48 +++++++------------ src/components/tags/Tags/index.tsx | 1 + 7 files changed, 47 insertions(+), 43 deletions(-) diff --git a/src/components/containers/TagField/index.tsx b/src/components/containers/TagField/index.tsx index 8490208f..18987f03 100644 --- a/src/components/containers/TagField/index.tsx +++ b/src/components/containers/TagField/index.tsx @@ -1,14 +1,8 @@ import React, { FC, HTMLAttributes } from 'react'; import styles from './styles.module.scss'; -type IProps = HTMLAttributes & {} +type IProps = HTMLAttributes & {}; -const TagField: FC = ({ - children, -}) => ( -
- {children} -
-); +const TagField: FC = ({ children }) =>
{children}
; export { TagField }; diff --git a/src/components/containers/TagField/styles.module.scss b/src/components/containers/TagField/styles.module.scss index d20ec51b..a42848e3 100644 --- a/src/components/containers/TagField/styles.module.scss +++ b/src/components/containers/TagField/styles.module.scss @@ -1,4 +1,5 @@ @import "src/styles/variables"; +@import "src/styles/colors"; .wrap { display: flex; @@ -10,3 +11,8 @@ margin: $gap / 2; } } + +.edit { + opacity: 0.5; + float: right; +} diff --git a/src/components/input/Button/styles.module.scss b/src/components/input/Button/styles.module.scss index 6c54ab0d..287082dd 100644 --- a/src/components/input/Button/styles.module.scss +++ b/src/components/input/Button/styles.module.scss @@ -155,7 +155,7 @@ } .mini { - height: 28px; + height: 26px; border-radius: $radius / 2; &:global(.round) { diff --git a/src/components/node/NodeTagsBlock/index.tsx b/src/components/node/NodeTagsBlock/index.tsx index 6e29226d..ff012203 100644 --- a/src/components/node/NodeTagsBlock/index.tsx +++ b/src/components/node/NodeTagsBlock/index.tsx @@ -1,6 +1,8 @@ import React, { FC } from 'react'; import { NodeTags } from '~/components/node/NodeTags'; import { useTagContext } from '~/utils/context/TagsContextProvider'; +import { Group } from '~/components/containers/Group'; +import { Button } from '~/components/input/Button'; interface IProps {} diff --git a/src/components/tags/TagWrapper/index.tsx b/src/components/tags/TagWrapper/index.tsx index f2de8bb7..4c088ebb 100644 --- a/src/components/tags/TagWrapper/index.tsx +++ b/src/components/tags/TagWrapper/index.tsx @@ -29,6 +29,17 @@ const TagWrapper: FC = ({ title = '', }) => { const deletable = is_deletable && !is_editing && !has_input; + const onDeletePress = useCallback( + event => { + if (!onDelete) { + return; + } + + event.stopPropagation(); + onDelete(); + }, + [onDelete] + ); return (
= ({ input: has_input, clickable: onClick, })} + onClick={onClick} > -
-
+
+ +
{title}
{children}
{deletable && ( - )}
diff --git a/src/components/tags/TagWrapper/styles.module.scss b/src/components/tags/TagWrapper/styles.module.scss index e18abecc..44abfd23 100644 --- a/src/components/tags/TagWrapper/styles.module.scss +++ b/src/components/tags/TagWrapper/styles.module.scss @@ -12,10 +12,15 @@ $big: 1.2; border-radius: ($tag_height / 2) 3px 3px ($tag_height / 2); font: $font_14_semibold; align-self: flex-start; - padding: 0 8px 0 0; position: relative; z-index: 12; + display: inline-flex; + flex-direction: row; + align-items: center; + justify-content: stretch; + min-width: 0; + &:hover { z-index: 40; } @@ -98,19 +103,6 @@ $big: 1.2; } } -.content { - display: flex; - flex-direction: row; - align-items: center; - justify-content: stretch; - width: 100%; - transition: transform 250ms; - - :hover:global(.deletable) > & { - transform: translate(-32px, 0); - } -} - .hole { width: $tag_height; height: $tag_height; @@ -137,27 +129,23 @@ $big: 1.2; } button.delete { - @include inner_shadow; - - width: 32px; - height: 100%; + box-shadow: inset transparentize(white, 0.9) 1px 0, transparentize(black, 0.7) -1px 0; + width: 24px; + height: $tag_height; + background: transparentize($content_bg, 0.75); z-index: 24; - background: $red; border: none; padding: 0; - margin: 0 0 0 -5px; - border-radius: 0; - position: absolute; - right: -32px; - top: 0; - transition: transform 250ms; - transform: translate(0, 0); + border-radius: 0 3px 3px 0; + flex: 0 0 24px; display: flex; align-items: center; justify-content: center; cursor: pointer; - - :hover > & { - transform: translate(-32px, 0); - } } + +.text { + padding-right: $gap; + text-overflow: ellipsis; + overflow: hidden; +} \ No newline at end of file diff --git a/src/components/tags/Tags/index.tsx b/src/components/tags/Tags/index.tsx index 59e74d5e..441cfd8a 100644 --- a/src/components/tags/Tags/index.tsx +++ b/src/components/tags/Tags/index.tsx @@ -5,6 +5,7 @@ import { uniq } from 'ramda'; import { Tag } from '~/components/tags/Tag'; import { TagInput } from '~/components/tags/TagInput'; import { separateTags } from '~/utils/tag'; +import { Button } from '~/components/input/Button'; type IProps = HTMLAttributes & { tags: Partial[];