optrader/shoptime
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

featured Bradns focus && selected 작업 완료

Browse Source
This commit is contained in:
고동영
2024-02-08 10:42:10 +09:00
parent 2df9f436bc
commit 7d11a6c0e2
6 changed files with 145 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
com.twin.app.shoptime/src/components/TabLayout/TabItem.jsx
View File

@@ -22,13 +22,10 @@ const TabItemBase = ({
isSubItem,
onFocus,
showSubTab = false,
temp,
setTemp,
mainSelectedIndex,
...rest
}) => {
const [focused, setFocused] = useState(false);
const [fixed, setFixed] = useState(false);
const clearPressedJob = useRef(
new Job((func) => {
setTimeout(func, 100);
@@ -96,8 +93,6 @@ const TabItemBase = ({
className={classNames(
css.tabItem,
(focused || index === mainSelectedIndex) && css.focused,
// focused && css.focused,
showSubTab && fixed && css.fixed,
!isSubItem &&
(focused || index === mainSelectedIndex) &&
showSubTab &&
@@ -124,7 +119,6 @@ const TabItemBase = ({
{title}
</Marquee>
)}
{/* <TabItemSub /> */}
</div>
</SpottableComponent>
);

20
com.twin.app.shoptime/src/components/TabLayout/TabItem.module.less
View File

@@ -38,26 +38,6 @@
color: #eee;
}
&.fixed {
color: #eee;
background: linear-gradient(to right, #cb1253, #e15ba1);
border-radius: 42px;
width: 402px;
z-index: 1;
margin-left: 30px;
position:relative;
&.arrow {
&::after {
content: "";
.size(@w:36px, @h:36px);
.position(@position: absolute, @top: 24px, @right: 18px);
background-image: url('../../../assets/icons/ic-lnb-right-arrow.png');
background-size: 36px 36px;
}
}
}
.itemWrap {
display: flex;

42
com.twin.app.shoptime/src/components/TabLayout/TabItemSub.jsx
View File

@@ -11,19 +11,17 @@ import css from "./TabItemSub.module.less";
const SpottableComponent = Spottable("div");
const TabItemBase = ({
title,
expanded = false,
selected = false,
expanded = false,
index = 0,
title,
target,
deActivateTab,
onClick,
lgCatCd,
isSubItem,
onFocus,
onBlur,
path,
subTitle,
...rest
}) => {
const [focused, setFocused] = useState(false);
@@ -54,10 +52,6 @@ const TabItemBase = ({
const _onBlur = useCallback(() => {
setFocused(false);
if (onBlur) {
onBlur(index);
}
}, [index]);
const onKeyDown = useCallback(
@@ -71,12 +65,19 @@ const TabItemBase = ({
const ImageComponent = useCallback(() => {
return (
<div className={css.imageLayout}>
<span className={classNames(css.outline)} />
<div
className={classNames(
css.imageWrap,
focused && css.focused,
selected && css.selected,
focused && selected && css.selectedFocus
)}
>
<img src={path} alt="" />
<span className={classNames(css.outline)} />
</div>
);
}, [path]);
}, [path, focused, selected]);
const TextComponent = useCallback(() => {
return (
@@ -102,20 +103,23 @@ const TabItemBase = ({
css.tabItem,
!path && focused && css.focused,
path && css.path
// focused && path && css.imageFocus,
// selected && css.imageSelect
)}
onKeyDown={onKeyDown}
onFocus={_onFocus}
onBlur={_onBlur}
onClick={_onClick}
>
<div className={css.layout}>
<div className={classNames(isSubItem && css.subWrap)}>
{!path && <span className={css[`category-icon-${lgCatCd}`]} />}
{path ? <ImageComponent /> : <TextComponent />}
</div>
<div className={classNames(isSubItem && css.subWrap)}>
{!path && (
<span
className={classNames(
css.icon,
focused && css.focused,
css[`category-icon-${lgCatCd}`]
)}
/>
)}
{path ? <ImageComponent /> : <TextComponent />}
</div>
</SpottableComponent>
);

130
com.twin.app.shoptime/src/components/TabLayout/TabItemSub.module.less
View File

@@ -32,43 +32,59 @@
color: #eee;
}
.imageWrap {
position: relative;
margin:0 30px 0 48px;
img {
.size(@w: 120px, @h: 120px);
object-fit: contain;
}
span {
.position(@position: absolute, @top: 0, @right: 0, @bottom: 0, @left: 0);
.size(@w: 140px, @h: 140px);
.imageLayout {
&.outline {
.position(@position: absolute, @top: 0, @right: auto, @bottom: auto, @left: 0);
.size(@w: 138px, @h:138px);
background-position: center;
background-size: cover;
> img {
.size(@w: 120px, @h: 120px);
}
}
&.imageFocus {
.outline {
.focusDropShadow();
border-radius: 60px;
z-index: 99;
background-image: url("../../../assets/icons/ic-tab-partners-focus@3x.png");
// box-shadow: -3px 0px 30px 0 #c70850;
// border: solid 1px #dadada;
> img {
&.focused {
img {
box-shadow: -3px 0px 30px 0 #c70850;
border-radius: 37%;
.size(@w: 138px, @h: 138px);
object-fit: contain;
}
span {
background-image: url('../../../assets/icons/ic-tab-partners-focus@3x.png');
}
}
&.selected {
img {
.size(@w: 138px, @h: 138px);
object-fit: contain;
}
span {
background-image: url('../../../assets/icons/ic-tab-partners-lnb-selected@3x.png');
}
}
// &.ImgSelect {
// img {
// .size(@w: 138px, @h: 138px);
// }
// .outline {
// background-image: url("../../../assets/icons/ic-tab-partners-lnb-selected@3x.png");
// }
// }
&.selectedFocus {
img {
box-shadow: -3px 0px 30px 0 #808080;
border-radius: 37%;
}
}
}
.text {
line-height: 1.2;
@@ -81,10 +97,11 @@
}
}
.subWrap{
.flex();
span {
.icon {
.size(@w: 40px, @h:40px);
background-size: cover;
&.category-icon-1017 {
@@ -151,6 +168,69 @@
&.category-icon-1013 {
background-image: url("../../../assets/icons/ic-category-clearance-nor.png");
}
&.focused {
// LG Electronics
&.category-icon-1017 {
background-image: url("../../../assets/category/ic-category-lgelectronics-nor@3x.png");
}
// Garden and Outdoors
&.category-icon-1008 {
background-image: url("../../../assets/category/ic-category-garden-nor@3x.png");
}
// Fashion
&.category-icon-1000 {
background-image: url("../../../assets/category/ic-category-fashion-nor@3x.png");
}
// Beauty
&.category-icon-1003 {
background-image: url("../../../assets/category/ic-category-beauty-nor@3x.png");
}
// Jewelry
&.category-icon-1004 {
background-image: url("../../../assets/category/ic-category-jewelry-nor@3x.png");
}
// Home
&.category-icon-1006 {
background-image: url("../../../assets/category/ic-category-home-nor@3x.png");
}
// Kitchen & Food
&.category-icon-1007 {
background-image: url("../../../assets/category/ic-category-kitchen-nor@3x.png");
}
// Accessories
&.category-icon-1014 {
background-image: url("../../../assets/category/ic-category-accessories-nor@3x.png");
}
// Heaclth & Fitness
&.category-icon-1009 {
background-image: url("../../../assets/category/ic-category-health-nor@3x.png");
}
// Crafts & Sewing
&.category-icon-1011 {
background-image: url("../../../assets/category/ic-category-cw-nor@3x.png");
}
// Electronics
&.category-icon-1010 {
background-image: url("../../../assets/category/ic-category-electronics-nor@3x.png");
}
// Clearance
&.category-icon-1013 {
background-image: url("../../../assets/category/ic-category-clearance-nor@3x.png");
}
}
}
}

15
com.twin.app.shoptime/src/components/TabLayout/TabLayout.jsx
View File

@@ -506,8 +506,6 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
showSubTab={showSubTab}
icons={item.icons}
expanded={mainExpanded}
temp={temp}
setTemp={setTemp}
selected={
(panels.length === 0 && index === 0) ||
(Array.isArray(item.target) &&
@@ -540,7 +538,6 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
return (
<TabItemSub
{...item}
onBlur={onBlur}
key={"tabitemSubmenu" + index}
onClick={onClickSubItem}
expanded={true}
@@ -551,12 +548,12 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
lgCatCd={item.id}
path={item.path}
showSubTab={showSubTab}
// selected={
// (panels.length === 0 && index === 0) ||
// (Array.isArray(item.target) &&
// item.target[0]?.name &&
// panels[0]?.name === item.target[0]?.name)
// }
selected={
(panels.length === 0 && index === 0) ||
(Array.isArray(item.target) &&
item.target[0]?.panelInfo &&
panels[0]?.panelInfo === item.target[0]?.panelInfo)
}
/>
);
})}

5
com.twin.app.shoptime/src/components/TabLayout/TabLayout.module.less
View File

@@ -71,11 +71,6 @@
&.secondDepthReduce {
width: 216px;
// transition: width 0.5s ease;
// > div {
// margin-bottom: 90px;
// }
}
}