change(ui) - funnel icon
This commit is contained in:
Shekar Siri
parent
fe90b4cc26
commit
db4844c4c5
6 changed files with 17 additions and 4 deletions
|
|
@ -3,9 +3,8 @@ import Widget from 'App/mstore/types/widget';
|
|||
import Funnelbar from './FunnelBar';
|
||||
import cn from 'classnames';
|
||||
import stl from './FunnelWidget.module.css';
|
||||
import { Icon } from 'UI';
|
||||
import { useObserver } from 'mobx-react-lite';
|
||||
import { NoContent } from 'UI';
|
||||
import { NoContent, Icon } from 'UI';
|
||||
import { useModal } from 'App/components/Modal';
|
||||
|
||||
interface Props {
|
||||
|
|
@ -109,8 +108,8 @@ function Stage({ stage, index, isWidget }: any) {
|
|||
|
||||
function IndexNumber({ index }: any) {
|
||||
return (
|
||||
<div className="z-10 w-6 h-6 border mr-4 text-sm rounded-full bg-gray-lightest flex items-center justify-center leading-3">
|
||||
{index}
|
||||
<div className="z-10 w-6 h-6 border shrink-0 mr-4 text-sm rounded-full bg-gray-lightest flex items-center justify-center leading-3">
|
||||
{index === 0 ? <Icon size="14" color="gray-dark" name="list" /> : index}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -271,6 +271,7 @@ const SVG = (props: Props) => {
|
|||
case 'link-45deg': return <svg class="bi bi-link-45deg" viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z"/><path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z"/></svg>;
|
||||
case 'list-alt': return <svg viewBox="0 0 512 512" width={ `${ width }px` } height={ `${ height }px` } ><path d="M464 64c8.823 0 16 7.178 16 16v352c0 8.822-7.177 16-16 16H48c-8.823 0-16-7.178-16-16V80c0-8.822 7.177-16 16-16h416m0-32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V80c0-26.51-21.49-48-48-48zm-336 96c-17.673 0-32 14.327-32 32s14.327 32 32 32 32-14.327 32-32-14.327-32-32-32zm0 96c-17.673 0-32 14.327-32 32s14.327 32 32 32 32-14.327 32-32-14.327-32-32-32zm0 96c-17.673 0-32 14.327-32 32s14.327 32 32 32 32-14.327 32-32-14.327-32-32-32zm288-148v-24a6 6 0 0 0-6-6H198a6 6 0 0 0-6 6v24a6 6 0 0 0 6 6h212a6 6 0 0 0 6-6zm0 96v-24a6 6 0 0 0-6-6H198a6 6 0 0 0-6 6v24a6 6 0 0 0 6 6h212a6 6 0 0 0 6-6zm0 96v-24a6 6 0 0 0-6-6H198a6 6 0 0 0-6 6v24a6 6 0 0 0 6 6h212a6 6 0 0 0 6-6z"/></svg>;
|
||||
case 'list-ul': return <svg class="bi bi-list-ul" viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M5 11.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm-3 1a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm0 4a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm0 4a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/></svg>;
|
||||
case 'list': return <svg class="bi bi-list" viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/></svg>;
|
||||
case 'lock-alt': return <svg viewBox="0 0 448 512" width={ `${ width }px` } height={ `${ height }px` } ><path d="M224 420c-11 0-20-9-20-20v-64c0-11 9-20 20-20s20 9 20 20v64c0 11-9 20-20 20zm224-148v192c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V272c0-26.5 21.5-48 48-48h16v-64C64 71.6 136-.3 224.5 0 312.9.3 384 73.1 384 161.5V224h16c26.5 0 48 21.5 48 48zM96 224h256v-64c0-70.6-57.4-128-128-128S96 89.4 96 160v64zm320 240V272c0-8.8-7.2-16-16-16H48c-8.8 0-16 7.2-16 16v192c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16z"/></svg>;
|
||||
case 'map-marker-alt': return <svg class="bi bi-geo-alt" viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M12.166 8.94c-.524 1.062-1.234 2.12-1.96 3.07A31.493 31.493 0 0 1 8 14.58a31.481 31.481 0 0 1-2.206-2.57c-.726-.95-1.436-2.008-1.96-3.07C3.304 7.867 3 6.862 3 6a5 5 0 0 1 10 0c0 .862-.305 1.867-.834 2.94zM8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10z"/><path d="M8 8a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm0 1a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/></svg>;
|
||||
case 'memory': return <svg viewBox="0 0 640 512" width={ `${ width }px` } height={ `${ height }px` } ><path d="M496 272h32V144h-96v128h64zm-32-96h32v64h-32v-64zm-128 96h32V144h-96v128h64zm-32-96h32v64h-32v-64zm-128 96h32V144h-96v128h64zm-32-96h32v64h-32v-64zm488-16h8V96c0-17.67-14.33-32-32-32H32C14.33 64 0 78.33 0 96v64h8c13.26 0 24 10.74 24 24 0 13.25-10.74 24-24 24H0v240h640V208h-8c-13.25 0-24-10.75-24-24 0-13.26 10.75-24 24-24zm-24 256h-80v-16c0-8.84-7.16-16-16-16s-16 7.16-16 16v16h-96v-16c0-8.84-7.16-16-16-16s-16 7.16-16 16v16h-96v-16c0-8.84-7.16-16-16-16s-16 7.16-16 16v16h-96v-16c0-8.84-7.16-16-16-16s-16 7.16-16 16v16H32v-64h576v64zm0-282.59c-18.91 9-32 28.3-32 50.59s13.09 41.59 32 50.59V320H32v-85.41c18.9-9 32-28.3 32-50.59s-13.1-41.59-32-50.59V96h576v37.41z"/></svg>;
|
||||
|
|
|
|||
|
|
@ -40,6 +40,7 @@ function reducer(state = initialState, action = {}) {
|
|||
.set('list', list)
|
||||
.set('total', total);
|
||||
case success(FETCH_FILTER_SEARCH):
|
||||
console.log('FETCH_FILTER_SEARCH', action);
|
||||
const groupedList = action.data.reduce((acc, item) => {
|
||||
const { projectId, type, value } = item;
|
||||
const key = type;
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@
|
|||
.fill-tealx { fill: $tealx }
|
||||
.fill-tealx-light { fill: $tealx-light }
|
||||
.fill-tealx-light-border { fill: $tealx-light-border }
|
||||
.fill-tealx-lightest { fill: $tealx-lightest }
|
||||
.fill-orange { fill: $orange }
|
||||
.fill-yellow { fill: $yellow }
|
||||
.fill-yellow2 { fill: $yellow2 }
|
||||
|
|
@ -24,6 +25,7 @@
|
|||
.fill-green-dark { fill: $green-dark }
|
||||
.fill-red { fill: $red }
|
||||
.fill-red2 { fill: $red2 }
|
||||
.fill-red-lightest { fill: $red-lightest }
|
||||
.fill-blue { fill: $blue }
|
||||
.fill-blue2 { fill: $blue2 }
|
||||
.fill-active-blue { fill: $active-blue }
|
||||
|
|
@ -49,6 +51,7 @@
|
|||
.color-tealx { color: $tealx }
|
||||
.color-tealx-light { color: $tealx-light }
|
||||
.color-tealx-light-border { color: $tealx-light-border }
|
||||
.color-tealx-lightest { color: $tealx-lightest }
|
||||
.color-orange { color: $orange }
|
||||
.color-yellow { color: $yellow }
|
||||
.color-yellow2 { color: $yellow2 }
|
||||
|
|
@ -58,6 +61,7 @@
|
|||
.color-green-dark { color: $green-dark }
|
||||
.color-red { color: $red }
|
||||
.color-red2 { color: $red2 }
|
||||
.color-red-lightest { color: $red-lightest }
|
||||
.color-blue { color: $blue }
|
||||
.color-blue2 { color: $blue2 }
|
||||
.color-active-blue { color: $active-blue }
|
||||
|
|
@ -83,6 +87,7 @@
|
|||
.hover-tealx:hover { color: $tealx }
|
||||
.hover-tealx-light:hover { color: $tealx-light }
|
||||
.hover-tealx-light-border:hover { color: $tealx-light-border }
|
||||
.hover-tealx-lightest:hover { color: $tealx-lightest }
|
||||
.hover-orange:hover { color: $orange }
|
||||
.hover-yellow:hover { color: $yellow }
|
||||
.hover-yellow2:hover { color: $yellow2 }
|
||||
|
|
@ -92,6 +97,7 @@
|
|||
.hover-green-dark:hover { color: $green-dark }
|
||||
.hover-red:hover { color: $red }
|
||||
.hover-red2:hover { color: $red2 }
|
||||
.hover-red-lightest:hover { color: $red-lightest }
|
||||
.hover-blue:hover { color: $blue }
|
||||
.hover-blue2:hover { color: $blue2 }
|
||||
.hover-active-blue:hover { color: $active-blue }
|
||||
|
|
@ -116,6 +122,7 @@
|
|||
.border-tealx { border-color: $tealx }
|
||||
.border-tealx-light { border-color: $tealx-light }
|
||||
.border-tealx-light-border { border-color: $tealx-light-border }
|
||||
.border-tealx-lightest { border-color: $tealx-lightest }
|
||||
.border-orange { border-color: $orange }
|
||||
.border-yellow { border-color: $yellow }
|
||||
.border-yellow2 { border-color: $yellow2 }
|
||||
|
|
@ -125,6 +132,7 @@
|
|||
.border-green-dark { border-color: $green-dark }
|
||||
.border-red { border-color: $red }
|
||||
.border-red2 { border-color: $red2 }
|
||||
.border-red-lightest { border-color: $red-lightest }
|
||||
.border-blue { border-color: $blue }
|
||||
.border-blue2 { border-color: $blue2 }
|
||||
.border-active-blue { border-color: $active-blue }
|
||||
|
|
|
|||
3
frontend/app/svg/icons/list.svg
Normal file
3
frontend/app/svg/icons/list.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" class="bi bi-list" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 301 B |
|
|
@ -20,6 +20,7 @@ const config: Configuration = {
|
|||
// mode: isDevelopment ? "development" : "production",
|
||||
output: {
|
||||
publicPath: "/",
|
||||
filename: 'app-[contenthash:7].js',
|
||||
path: path.resolve(__dirname, 'public'),
|
||||
},
|
||||
entry: "./app/initialize.js",
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue