feat(filter): update filter SVG with exact 3-path live Meez vector and computed styles
This commit is contained in:
@@ -91,7 +91,11 @@ const filteredRecipes=recipes.filter((recipe)=>{
|
||||
return recipe.item_count === 0 || isMissingYield || recipe.placeholder_count > 0;
|
||||
});
|
||||
|
||||
const FILTER_ICON_PATH="M18 6.0201C18 4.81608 17.1873 3.79266 16.0736 3.46156L16.0736 0.722412C16.0736 0.301005 15.7425 0 15.3211 0C14.8996 0 14.5685 0.331105 14.5685 0.752512L14.5685 3.49166C13.4548 3.79266 12.6421 4.84618 12.6421 6.0502C12.6421 7.28432 13.4548 8.30774 14.5685 8.63884L14.5685 19.7459C14.5685 20.1673 14.8996 20.4984 15.3211 20.4984C15.7425 20.4984 16.0736 20.1673 16.0736 19.7459L16.0736 8.63884C17.1873 8.27764 18 7.25422 18 6.0201ZM16.495 6.0502C16.495 6.68231 15.9833 7.22412 15.3211 7.22412C14.6588 7.22412 14.1471 6.68231 14.1471 6.0502C14.1471 5.41809 14.6588 4.87628 15.3211 4.87628C15.9833 4.87628 16.495 5.41809 16.495 6.0502ZM5.35789 14.4799C5.35789 13.2759 4.54521 12.2525 3.43147 11.9214L3.43147 0.752512C3.43147 0.331105 3.10042 0 2.67895 0C2.25747 0 1.92642 0.331105 1.92642 0.752512L1.92642 11.9214C0.812684 12.2525 0 13.2759 0 14.4799C0 15.714 0.812684 16.7374 1.92642 17.0685L1.92642 19.7459C1.92642 20.1673 2.25747 20.4984 2.67895 20.4984C3.10042 20.4984 3.43147 20.1673 3.43147 19.7459L3.43147 17.0685C4.54521 16.7374 5.35789 15.714 5.35789 14.4799ZM3.85289 14.4799C3.85289 15.112 3.34116 15.6538 2.67895 15.6538C2.01674 15.6538 1.50505 15.112 1.50505 14.4799C1.50505 13.8478 2.01674 13.306 2.67895 13.306C3.34116 13.306 3.85289 13.8478 3.85289 14.4799Z";
|
||||
const FILTER_PATHS = [
|
||||
"M18 6.0201C18 4.81608 17.1873 3.79266 16.0736 3.46156L16.0736 0.722412C16.0736 0.301005 15.7425 -9.86801e-08 15.3211 -1.171e-07C14.8996 -1.35521e-07 14.5685 0.331105 14.5685 0.752512L14.5685 3.49166C13.4548 3.79266 12.6421 4.84618 12.6421 6.0502C12.6421 7.28432 13.4548 8.30774 14.5685 8.63884L14.5685 19.7459C14.5685 20.1673 14.8996 20.4984 15.3211 20.4984C15.7425 20.4984 16.0736 20.1673 16.0736 19.7459L16.0736 8.63884C17.1873 8.27764 18 7.25422 18 6.0201ZM16.495 6.0502C16.495 6.68231 15.9833 7.22412 15.3211 7.22412C14.6588 7.22412 14.1471 6.68231 14.1471 6.0502C14.1471 5.41809 14.6588 4.87628 15.3211 4.87628C15.9833 4.87628 16.495 5.41809 16.495 6.0502Z",
|
||||
"M11.9799 15.0803C11.9799 13.8763 11.1671 12.8529 10.0534 12.5218L10.0534 0.752512C10.0534 0.301005 9.72232 -9.86801e-08 9.30091 -1.171e-07C8.87951 -1.35521e-07 8.5484 0.331105 8.5484 0.752512L8.5484 12.5218C7.43468 12.8228 6.62197 13.8763 6.62197 15.0803C6.62197 16.3145 7.43468 17.3379 8.5484 17.669L8.5484 19.7459C8.5484 20.1673 8.87951 20.4984 9.30091 20.4984C9.72232 20.4984 10.0534 20.1673 10.0534 19.7459L10.0534 17.669C11.1671 17.3379 11.9799 16.3145 11.9799 15.0803ZM10.4748 15.1104C10.4748 15.7426 9.96312 16.2844 9.30091 16.2844C8.6387 16.2844 8.12699 15.7426 8.12699 15.1104C8.12699 14.4783 8.6387 13.9365 9.30091 13.9365C9.96312 13.9365 10.4748 14.4482 10.4748 15.1104Z",
|
||||
"M5.35791 9.63216C5.35791 8.42814 4.5452 7.40472 3.43148 7.07362L3.43148 0.752512C3.43148 0.301005 3.10037 -9.86801e-08 2.67897 -1.171e-07C2.25756 -1.35521e-07 1.92645 0.331105 1.92645 0.752512L1.92645 7.10372C0.812735 7.40472 2.06111e-05 8.45824 2.05585e-05 9.66226C2.05045e-05 10.8964 0.812735 11.9198 1.92645 12.2509L1.92645 19.7459C1.92645 20.1673 2.25756 20.4984 2.67896 20.4984C3.10037 20.4984 3.43148 20.1673 3.43148 19.7459L3.43148 12.2208C4.5452 11.8897 5.35791 10.8663 5.35791 9.63216ZM3.85289 9.66226C3.85289 10.2944 3.34118 10.8362 2.67897 10.8362C2.01675 10.8362 1.50505 10.2944 1.50505 9.66226C1.50505 9.03015 2.01675 8.48834 2.67897 8.48834C3.34118 8.51844 3.85289 9.03015 3.85289 9.66226Z"
|
||||
];
|
||||
const tabs:Array<{type:string;label:string;count:number;kind:"recipe"|"ingredient"|"book"|"purchase"|"inventory";href?:string}>=[
|
||||
{type:"recipe",label:"Recipes",count:recipes.length,kind:"recipe"},
|
||||
{type:"ingredient",label:"Ingredients",count:ingredients.length,kind:"ingredient"},
|
||||
@@ -139,8 +143,8 @@ const purchaseRows=purchases.map(item=>({id:item.id,name:item.name,href:`/app/in
|
||||
{tabs.map((tab)=><a class:list={{active:type===tab.type}} href={tab.href ?? `/app/?type=${tab.type}`}><span class={`workspace-pill-icon ${tab.kind}`}><svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d={TYPE_ICONS[tab.kind]} style={TYPE_ICON_TRANSFORMS[tab.kind]?{transform:TYPE_ICON_TRANSFORMS[tab.kind]}:undefined}/></svg></span><span>{tab.label}</span><small>{tab.count}</small></a>)}
|
||||
<details class="filter-menu" open={isFilterActive}>
|
||||
<summary>
|
||||
<svg class="filter-icon" viewBox="0 0 18 21" aria-hidden="true">
|
||||
<path fill="currentColor" d={FILTER_ICON_PATH}/>
|
||||
<svg class="filter-icon" viewBox="0 0 18 21" aria-hidden="true" focusable="false">
|
||||
{FILTER_PATHS.map((pathD)=><path fill="currentColor" d={pathD}/>)}
|
||||
</svg>
|
||||
Filter{isFilterActive ? ` · ${activeFilterCount}` : ""}
|
||||
</summary>
|
||||
|
||||
@@ -47,7 +47,7 @@ input[type="search"]::-webkit-search-results-decoration,
|
||||
.application-body .workspace-global-search > a:hover { color:#050841; }
|
||||
.application-body .search-type-filter summary { display:inline-flex; align-items:center; gap:10px; min-height:44px; padding:10px 16px; color:rgba(0,0,0,0.87); background:transparent; border:0; border-radius:20px; font-size:16px; font-weight:400; list-style:none; cursor:pointer; }
|
||||
.application-body .search-type-filter summary::-webkit-details-marker { display:none; }
|
||||
.application-body .filter-icon { flex:none; width:15px; height:18px; color:#050841; }
|
||||
.application-body .filter-icon { flex: none; width: 16px; height: 19px; color: #3d5df6; fill: #3d5df6; }
|
||||
@keyframes meez-menu-in { from { opacity:0; transform:translateY(4px) scale(.98); } to { opacity:1; transform:none; } }
|
||||
.application-body .workspace-new-menu[open] > nav,.application-body .filter-menu[open] > form,.application-body .search-type-filter[open] > form,.application-body .entity-row-actions[open] > div { animation:meez-menu-in .2s cubic-bezier(0.4,0,0.2,1); }
|
||||
.application-body .search-type-filter form,.application-body .filter-menu form,.application-body .workspace-new-menu nav { border:1px solid #eeeef3; border-radius:4px; box-shadow:0 8px 25px rgba(5,8,65,.12); }
|
||||
@@ -299,15 +299,28 @@ input[type="search"]::-webkit-search-results-decoration,
|
||||
.application-body .workspace-pills .filter-menu summary {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
min-height: 44px;
|
||||
padding: 10px 16px;
|
||||
color: rgba(0,0,0,0.87);
|
||||
gap: 8px;
|
||||
min-height: 40px;
|
||||
padding: 8px 14px;
|
||||
color: rgba(0, 0, 0, 0.87);
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-radius: 20px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 999px;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
font-weight: 300;
|
||||
cursor: pointer;
|
||||
list-style: none;
|
||||
transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), color 0.15s ease;
|
||||
}
|
||||
|
||||
.application-body .workspace-pills .filter-menu summary:hover {
|
||||
background: rgba(5, 8, 65, 0.04);
|
||||
}
|
||||
|
||||
.application-body .workspace-pills .filter-menu[open] > summary {
|
||||
background: #edf2ff;
|
||||
color: #3d5df6;
|
||||
border-color: #dbe4ff;
|
||||
}
|
||||
.application-body .entity-directory-table { overflow:visible; border:0; background:#fff; }
|
||||
.application-body .entity-directory-toolbar { grid-template-columns:36px 64px minmax(0,1fr) auto; gap:8px; min-height:57px; padding:0; background:#ffffff; border-bottom:1px solid #edf0f5; }
|
||||
|
||||
Reference in New Issue
Block a user