daniel543x/artcraft
1
0 Fork 0
mirror of https://github.com/storytold/artcraft.git synced 2026-11-09 03:21:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

tab padding fixes and filter tab :disabled css update

Browse Source
This commit is contained in:
bflatastic committed 2024-04-20 08:33:39 +07:00
1 parent aa772caf78
commit 02d7bd2f8b
6 files changed
+9 -21
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/AudioTabComponent.tsx
+1 -4
View File
@@ -97,14 +97,13 @@ export const AudioTabComponent = () => {
return (
<>
<div className="w-full overflow-x-auto p-4">
<div className="w-full overflow-x-auto p-4 pb-0">
<TabTitle title="Audio" />
<div className="mb-4 flex justify-start gap-2">
<button
className={twMerge(
"filter-tab",
audioFilter.value === AssetFilterOption.ALL ? "active" : "",
"disabled",
)}
onClick={() => (audioFilter.value = AssetFilterOption.ALL)}>
All
@@ -113,7 +112,6 @@ export const AudioTabComponent = () => {
className={twMerge(
"filter-tab",
audioFilter.value === AssetFilterOption.MINE ? "active" : "",
"disabled",
)}
onClick={() => (audioFilter.value = AssetFilterOption.MINE)}
disabled={!allAudioItems.some((item) => item.isMine)}>
@@ -125,7 +123,6 @@ export const AudioTabComponent = () => {
audioFilter.value === AssetFilterOption.BOOKMARKED
? "active"
: "",
"disabled",
)}
onClick={() => (audioFilter.value = AssetFilterOption.BOOKMARKED)}
disabled={!allAudioItems.some((item) => item.isBookmarked)}>
app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/AnimationTab.tsx
+1 -4
View File
@@ -12,14 +12,13 @@ export const AnimationTab = () => {
return (
<>
<div className="w-full overflow-x-auto p-4">
<div className="w-full overflow-x-auto p-4 pb-0">
<TabTitle title="Animation" />
<div className="mb-4 flex justify-start gap-2">
<button
className={twMerge(
"filter-tab",
animationFilter.value === AssetFilterOption.ALL ? "active" : "",
"disabled",
)}
onClick={() => (animationFilter.value = AssetFilterOption.ALL)}>
All
@@ -28,7 +27,6 @@ export const AnimationTab = () => {
className={twMerge(
"filter-tab",
animationFilter.value === AssetFilterOption.MINE ? "active" : "",
"disabled",
)}
onClick={() => (animationFilter.value = AssetFilterOption.MINE)}
disabled={!animationItems.value.some((item) => item.isMine)}>
@@ -40,7 +38,6 @@ export const AnimationTab = () => {
animationFilter.value === AssetFilterOption.BOOKMARKED
? "active"
: "",
"disabled",
)}
onClick={() =>
(animationFilter.value = AssetFilterOption.BOOKMARKED)
app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/CameraTab.tsx
+1 -4
View File
@@ -12,14 +12,13 @@ export const CameraTab = () => {
return (
<>
<div className="w-full overflow-x-auto p-4">
<div className="w-full overflow-x-auto p-4 pb-0">
<TabTitle title="Camera" />
<div className="mb-4 flex justify-start gap-2">
<button
className={twMerge(
"filter-tab",
cameraFilter.value === AssetFilterOption.ALL ? "active" : "",
"disabled",
)}
onClick={() => (cameraFilter.value = AssetFilterOption.ALL)}>
All
@@ -28,7 +27,6 @@ export const CameraTab = () => {
className={twMerge(
"filter-tab",
cameraFilter.value === AssetFilterOption.MINE ? "active" : "",
"disabled",
)}
onClick={() => (cameraFilter.value = AssetFilterOption.MINE)}
disabled={!cameraItems.value.some((item) => item.isMine)}>
@@ -40,7 +38,6 @@ export const CameraTab = () => {
cameraFilter.value === AssetFilterOption.BOOKMARKED
? "active"
: "",
"disabled",
)}
onClick={() => (cameraFilter.value = AssetFilterOption.BOOKMARKED)}
disabled={!cameraItems.value.some((item) => item.isBookmarked)}>
app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/ObjectsTab.tsx
+1 -4
View File
@@ -25,7 +25,7 @@ export const ObjectsTab = ({ type }: Props) => {
return (
<>
<div className="w-full overflow-x-auto p-4">
<div className="w-full overflow-x-auto p-4 pb-0">
<TabTitle
title={type === AssetType.CHARACTER ? "Characters" : "Objects"}
/>
@@ -34,7 +34,6 @@ export const ObjectsTab = ({ type }: Props) => {
className={twMerge(
"filter-tab",
assetFilter.value === AssetFilterOption.ALL ? "active" : "",
"disabled",
)}
onClick={() => (assetFilter.value = AssetFilterOption.ALL)}>
All
@@ -43,7 +42,6 @@ export const ObjectsTab = ({ type }: Props) => {
className={twMerge(
"filter-tab",
assetFilter.value === AssetFilterOption.MINE ? "active" : "",
"disabled",
)}
onClick={() => (assetFilter.value = AssetFilterOption.MINE)}
disabled={!items.value.some((item) => item.isMine)}>
@@ -55,7 +53,6 @@ export const ObjectsTab = ({ type }: Props) => {
assetFilter.value === AssetFilterOption.BOOKMARKED
? "active"
: "",
"disabled",
)}
onClick={() => (assetFilter.value = AssetFilterOption.BOOKMARKED)}
disabled={!items.value.some((item) => item.isBookmarked)}>
app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/ShapeTab.tsx
+1 -1
View File
@@ -7,7 +7,7 @@ export const ShapeTab = () => {
useSignals();
return (
<div className="w-full overflow-x-auto p-4">
<div className="w-full overflow-x-auto p-4 pb-0">
<TabTitle title="Shapes" />
<div className="mb-4 flex justify-start gap-2">
<ItemElements
app/styles/tailwind.css
+4 -4
View File
@@ -4,14 +4,14 @@
@layer components {
.filter-tab {
@apply text-nowrap rounded-lg border-2 border-assets-background bg-assets-background px-3 py-2 text-sm font-medium transition-all duration-150 hover:border-assets-background/0 hover:bg-assets-background/80;
@apply text-nowrap rounded-lg border-2 border-assets-background bg-assets-background px-2.5 py-1.5 text-sm font-medium text-white/80 transition-all duration-150 hover:border-assets-background/0 hover:bg-assets-background/80;
}
.filter-tab.active {
@apply border-2 border-brand-primary hover:border-brand-primary hover:bg-assets-background;
@apply border-2 border-brand-primary text-white hover:border-brand-primary hover:bg-assets-background;
}
.filter-tab.disabled {
@apply hover:bg-assets-background disabled:text-white/50;
.filter-tab:disabled {
@apply border-transparent bg-assets-background/50 hover:border-transparent disabled:text-white/30;
}
}