From 68267cd4f399cb51a83cbab21a1e6b77afb5e696 Mon Sep 17 00:00:00 2001 From: yoution Date: Wed, 5 Feb 2020 17:44:38 +0800 Subject: [PATCH] #3513 Update Internal Catalog Display --- .../icons/v.2.5/curve-mask-horizontal.svg | 13 +++ .../icons/v.2.5/curve-mask-vertical.svg | 11 ++ src/assets/icons/{ => v.2.5}/oval.svg | 0 src/assets/icons/v.2.5/project-default.svg | 13 +++ .../icons/v.2.5/project-type-solutions.svg | 13 +++ .../project-type-talent-as-a-service.svg | 13 +++ .../images/curve-horizontal-2100x78.png | Bin 2788 -> 0 bytes src/assets/images/curve-vertical-43x100.png | Bin 2290 -> 0 bytes src/components/ProjectTypeIcon.jsx | 108 ++---------------- .../create/components/IconOvalWrapper.jsx | 2 +- .../components/SelectProjectTemplateCard.js | 12 +- .../components/SelectProjectTemplateCard.scss | 43 ++++--- 12 files changed, 109 insertions(+), 119 deletions(-) create mode 100644 src/assets/icons/v.2.5/curve-mask-horizontal.svg create mode 100644 src/assets/icons/v.2.5/curve-mask-vertical.svg rename src/assets/icons/{ => v.2.5}/oval.svg (100%) create mode 100644 src/assets/icons/v.2.5/project-default.svg create mode 100644 src/assets/icons/v.2.5/project-type-solutions.svg create mode 100644 src/assets/icons/v.2.5/project-type-talent-as-a-service.svg delete mode 100644 src/assets/images/curve-horizontal-2100x78.png delete mode 100644 src/assets/images/curve-vertical-43x100.png diff --git a/src/assets/icons/v.2.5/curve-mask-horizontal.svg b/src/assets/icons/v.2.5/curve-mask-horizontal.svg new file mode 100644 index 000000000..a41a3b06d --- /dev/null +++ b/src/assets/icons/v.2.5/curve-mask-horizontal.svg @@ -0,0 +1,13 @@ + + + + Path 2 + Created with Sketch. + + + + + + + + \ No newline at end of file diff --git a/src/assets/icons/v.2.5/curve-mask-vertical.svg b/src/assets/icons/v.2.5/curve-mask-vertical.svg new file mode 100644 index 000000000..1cf737306 --- /dev/null +++ b/src/assets/icons/v.2.5/curve-mask-vertical.svg @@ -0,0 +1,11 @@ + + + + Path 2 + Created with Sketch. + + + + + + \ No newline at end of file diff --git a/src/assets/icons/oval.svg b/src/assets/icons/v.2.5/oval.svg similarity index 100% rename from src/assets/icons/oval.svg rename to src/assets/icons/v.2.5/oval.svg diff --git a/src/assets/icons/v.2.5/project-default.svg b/src/assets/icons/v.2.5/project-default.svg new file mode 100644 index 000000000..c59db2a4a --- /dev/null +++ b/src/assets/icons/v.2.5/project-default.svg @@ -0,0 +1,13 @@ + + + + F132D33D-66CF-486F-B17E-7687604A2B61 + Created with sketchtool. + + + + + + + + \ No newline at end of file diff --git a/src/assets/icons/v.2.5/project-type-solutions.svg b/src/assets/icons/v.2.5/project-type-solutions.svg new file mode 100644 index 000000000..37b404462 --- /dev/null +++ b/src/assets/icons/v.2.5/project-type-solutions.svg @@ -0,0 +1,13 @@ + + + + 860440EF-BD1B-4075-9DE3-0599DD630E0A + Created with sketchtool. + + + + + + + + \ No newline at end of file diff --git a/src/assets/icons/v.2.5/project-type-talent-as-a-service.svg b/src/assets/icons/v.2.5/project-type-talent-as-a-service.svg new file mode 100644 index 000000000..0c62eba1e --- /dev/null +++ b/src/assets/icons/v.2.5/project-type-talent-as-a-service.svg @@ -0,0 +1,13 @@ + + + + E7B0585A-A81D-4C77-9540-DB4CD57776D2 + Created with sketchtool. + + + + + + + + \ No newline at end of file diff --git a/src/assets/images/curve-horizontal-2100x78.png b/src/assets/images/curve-horizontal-2100x78.png deleted file mode 100644 index e8d7e7145cecb4380b9a5a97da4c230cc89e566f..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 2788 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 Z4ag#oi@sNH{@M2mNt32a>O@M%e*u%MXchnf diff --git a/src/components/ProjectTypeIcon.jsx b/src/components/ProjectTypeIcon.jsx index 157628008..3541b6bd6 100644 --- a/src/components/ProjectTypeIcon.jsx +++ b/src/components/ProjectTypeIcon.jsx @@ -6,39 +6,9 @@ import React from 'react' import PT from 'prop-types' -import IconAnalyticsAlgorithmOptimization from '../assets/icons/product-analytics-algorithm-optimization.svg' -import IconAnalyticsComputerVision from '../assets/icons/product-analytics-computer-vision.svg' -import IconAnalyticsDataExploration from '../assets/icons/product-analytics-data-exploration.svg' -import IconAnalyticsPredictiveAnalytics from '../assets/icons/product-analytics-predictive-analytics.svg' -import IconAppApp from '../assets/icons/product-app-app.svg' -import IconCatAnalytics from '../assets/icons/product-cat-analytics.svg' -import IconCatApp from '../assets/icons/product-cat-app.svg' -import IconCatChatbot from '../assets/icons/product-cat-chatbot.svg' -import IconCatDesign from '../assets/icons/product-cat-design.svg' -import IconCatDevelopment from '../assets/icons/product-cat-development.svg' -import IconCatQa from '../assets/icons/product-cat-qa.svg' -import IconCatWebsite from '../assets/icons/product-cat-website.svg' -import IconChatbotChatbot from '../assets/icons/product-chatbot-chatbot.svg' -import IconChatbotWatson from '../assets/icons/product-chatbot-watson.svg' -import IconDesignAppVisual from '../assets/icons/product-design-app-visual.svg' -import IconDesignInfographic from '../assets/icons/product-design-infographic.svg' -import IconDesignOther from '../assets/icons/product-design-other.svg' -import IconDesignWireframes from '../assets/icons/product-design-wireframes.svg' -import IconDevFrontendDev from '../assets/icons/product-dev-front-end-dev.svg' -import IconDevIntegration from '../assets/icons/product-dev-integration.svg' -import IconDevOther from '../assets/icons/product-dev-other.svg' -import IconDevPrototype from '../assets/icons/product-dev-prototype.svg' -import IconOtherDesign from '../assets/icons/product-other-design.svg' -import IconQaConsulting from '../assets/icons/product-qa-consulting.svg' -import IconQaCrowdTesting from '../assets/icons/product-qa-crowd-testing.svg' -import IconQaDigitalAccessability from '../assets/icons/product-qa-digital-accessability.svg' -import IconQaHelthCheck from '../assets/icons/product-qa-health-check.svg' -import IconQaMobilityTesting from '../assets/icons/product-qa-mobility-testing.svg' -import IconQaOsAutomation from '../assets/icons/product-qa-os-automation.svg' -import IconQaWebsitePrerfomance from '../assets/icons/product-qa-website-performance.svg' -import IconQaSFDCAccelerator from '../assets/icons/product-qa-sfdc-accelerator.svg' -import IconWebsiteWebsite from '../assets/icons/product-website-website.svg' -import IconOutlineWorkProject from '../assets/icons/tech-32px-outline-work-project.svg' +import IconProjectTypeSolutions from '../assets/icons/v.2.5/project-type-solutions.svg' +import IconProjectTypeTalentAsService from '../assets/icons/v.2.5/project-type-talent-as-a-service.svg' +import IconProjectDefault from '../assets/icons/v.2.5/project-default.svg' const ProjectTypeIcon = ({ type }) => { // if type is defined as a relative path to the icon, convert it to icon "id" @@ -48,75 +18,13 @@ const ProjectTypeIcon = ({ type }) => { } switch(type){ - case 'product-analytics-algorithm-optimization': - return - case 'product-analytics-computer-vision': - return - case 'product-analytics-data-exploration': - return - case 'product-analytics-predictive-analytics': - return - case 'product-app-app': - return - case 'product-cat-analytics': - return - case 'product-cat-app': - return - case 'product-cat-chatbot': - return - case 'product-cat-design': - return - case 'product-cat-development': - return - case 'product-cat-qa': - return - case 'product-cat-website': - return - case 'product-chatbot-chatbot': - return - case 'product-chatbot-watson': - return - case 'product-design-app-visual': - return - case 'product-design-infographic': - return - case 'product-design-other': - return - case 'product-design-wireframes': - return - case 'product-dev-front-end-dev': - return - case 'product-dev-integration': - return - case 'product-dev-other': - return - case 'product-dev-prototype': - return - case 'product-other-design': - return - case 'product-qa-consulting': - return - case 'product-qa-crowd-testing': - return - case 'product-qa-digital-accessability': - return - case 'product-qa-health-check': - return - case 'product-qa-mobility-testing': - return - case 'product-qa-os-automation': - return - case 'product-qa-website-performance': - return - case 'product-qa-sfdc-accelerator': - return - case 'product-website-website': - return - case 'tech-32px-outline-work-project': - return + case 'project-type-solutions': + return + case 'project-type-talent-as-a-service': + return default: // this will be default icon - return + return } } diff --git a/src/projects/create/components/IconOvalWrapper.jsx b/src/projects/create/components/IconOvalWrapper.jsx index ed38c485b..7586bffaf 100644 --- a/src/projects/create/components/IconOvalWrapper.jsx +++ b/src/projects/create/components/IconOvalWrapper.jsx @@ -1,7 +1,7 @@ import React from 'react' import PropTypes from 'prop-types' import './IconOvalWrapper.scss' -import OvalBackgroundIcon from '../../../assets/icons/oval.svg' +import OvalBackgroundIcon from '../../../assets/icons/v.2.5/oval.svg' function IconOvalWrapper({ children }) { diff --git a/src/projects/create/components/SelectProjectTemplateCard.js b/src/projects/create/components/SelectProjectTemplateCard.js index 790f24fc4..21a3a9e64 100644 --- a/src/projects/create/components/SelectProjectTemplateCard.js +++ b/src/projects/create/components/SelectProjectTemplateCard.js @@ -5,8 +5,8 @@ import cn from 'classnames' import './SelectProjectTemplateCard.scss' import IconOvalWrapper from './IconOvalWrapper' -import curveVertical from '../../../assets/images/curve-vertical-43x100.png' -import curveHorizontal from '../../../assets/images/curve-horizontal-2100x78.png' +import CurveVertical from '../../../assets/icons/v.2.5/curve-mask-vertical.svg' +import CurveHorizontal from '../../../assets/icons/v.2.5/curve-mask-horizontal.svg' import IconArrowRight from '../../../assets/icons/arrows-16px-1_tail-right.svg' function SelectProjectTemplateCard(p) { @@ -55,8 +55,10 @@ function SelectProjectTemplateCard(p) { )} +
+ +
- vertical curve {(deliverables.length === 1) && (
{(deliverables.length > 0) && (
- horizontal curve +
+ +
{deliverables.map( (item, i) => diff --git a/src/projects/create/components/SelectProjectTemplateCard.scss b/src/projects/create/components/SelectProjectTemplateCard.scss index b9001457b..c4f03ee79 100644 --- a/src/projects/create/components/SelectProjectTemplateCard.scss +++ b/src/projects/create/components/SelectProjectTemplateCard.scss @@ -69,10 +69,17 @@ } .more-deliverable { + .top-card { + .vertical-curve-wrapper { + display: none; + } + + + + } .right-card { background: transparent; - .vertical-curve, .info-html { display: none; } @@ -148,7 +155,7 @@ @media screen and (max-width: $screen-md - 1px) { background: transparent; - .vertical-curve, + .vertical-curve-wrapper, .info-html { display: none; } @@ -194,20 +201,28 @@ background: #f4f4f4; } -.vertical-curve { - height: 100%; - position: absolute; - left: 0; - top: 0; - width: 20px; +.vertical-curve-wrapper { + + svg { + float: right; + background: #f4f4f4; + width: auto; + height: 100%; + } + + @media screen and (max-width: $screen-md - 1px) { + display: none; + } } -.horizontal-curve { - width: 100%; - height: 30px; - position: absolute; - top: 0; - left: 0; +.horizontal-curve-wrapper{ + height: 20px; + svg{ + width: 100%; + height: auto; + transform: scaleY(0.2); + transform-origin: top left; + } } .learn-more-container {