From 21a9cdd0477c908dbf5a8bc0f907f2775357bb5c Mon Sep 17 00:00:00 2001 From: =?utf8?q?Gr=C3=A9goire=20Aubert?= Date: Mon, 14 Jan 2019 08:32:16 +0100 Subject: [PATCH] SONARCLOUD-335 Make SC about page language section clearer --- server/sonar-web/src/main/js/app/theme.js | 1 + .../main/js/apps/about/sonarcloud/SQHome.tsx | 175 ++---------- .../about/sonarcloud/__tests__/Home-test.tsx | 60 ++--- .../__snapshots__/Home-test.tsx.snap | 251 ++++++++---------- .../about/sonarcloud/components/Languages.tsx | 82 ++---- .../js/apps/about/sonarcloud/new_style.css | 70 ++++- .../main/js/apps/about/sonarcloud/style.css | 4 +- .../main/js/apps/about/sonarcloud/utils.ts | 25 ++ 8 files changed, 274 insertions(+), 394 deletions(-) diff --git a/server/sonar-web/src/main/js/app/theme.js b/server/sonar-web/src/main/js/app/theme.js index 81eb45cc987..322b8c11461 100644 --- a/server/sonar-web/src/main/js/app/theme.js +++ b/server/sonar-web/src/main/js/app/theme.js @@ -143,6 +143,7 @@ module.exports = { // sonarcloud sonarcloudOrange500: '#fd6a00', + sonarcloudOrange600: '#e26003', sonarcloudOrange700: '#db5700', sonarcloudBlack100: '#ffffff', diff --git a/server/sonar-web/src/main/js/apps/about/sonarcloud/SQHome.tsx b/server/sonar-web/src/main/js/apps/about/sonarcloud/SQHome.tsx index 82b49377be8..716e5d19def 100644 --- a/server/sonar-web/src/main/js/apps/about/sonarcloud/SQHome.tsx +++ b/server/sonar-web/src/main/js/apps/about/sonarcloud/SQHome.tsx @@ -24,10 +24,13 @@ import LoginButtons from './components/LoginButtons'; import Pricing from './components/Pricing'; import SQPageContainer from './components/SQPageContainer'; import StartUsing from './components/StartUsing'; +import { LANGUAGES } from './utils'; import { isLoggedIn } from '../../../helpers/users'; import { getBaseUrl } from '../../../helpers/urls'; import './style.css'; +const NB_LANGUAGE_PER_ROW = 8; + export default function SQHome() { return ( @@ -143,161 +146,27 @@ function Features() { } function Languages() { + const languagesPerRow = []; + for (let i = 0; i < LANGUAGES.length / NB_LANGUAGE_PER_ROW; i++) { + languagesPerRow[i] = LANGUAGES.slice(i * NB_LANGUAGE_PER_ROW, (i + 1) * NB_LANGUAGE_PER_ROW); + } + return (
-

On 21 programming languages

-
    -
  • - Java -
    • -
  • - JavaScript -
    • -
  • - TypeScript -
    • -
  • - C# -
    • -
  • - C++ -
    • -
  • - Go -
    • -
  • - Python -
    • -
  • - PHP -
    • -
-
    -
  • - VB -
    • -
  • - Kotlin -
    • -
  • - Flex -
    • -
  • - CSS -
    • -
  • - HTML -
    • -
  • - Ruby -
    • -
  • - Scala -
    • -
  • - Swift -
    • -
-
    -
  • - Apex -
    • -
  • - Objective-C -
    • -
  • - T-SQL -
    • -
  • - PL/SQL -
    • -
  • - ABAP -
    • -
  • - XML -
    • -
+

On {LANGUAGES.length} programming languages

+ {languagesPerRow.map((languagesRow, idx) => ( +
    + {languagesRow.map(language => ( +
  • + {language.name} +
    • + ))} +
+ ))}
); } diff --git a/server/sonar-web/src/main/js/apps/about/sonarcloud/__tests__/Home-test.tsx b/server/sonar-web/src/main/js/apps/about/sonarcloud/__tests__/Home-test.tsx index f3c573ba054..ce5282fe00e 100644 --- a/server/sonar-web/src/main/js/apps/about/sonarcloud/__tests__/Home-test.tsx +++ b/server/sonar-web/src/main/js/apps/about/sonarcloud/__tests__/Home-test.tsx @@ -22,36 +22,36 @@ import { shallow } from 'enzyme'; import Home from '../Home'; import { waitAndUpdate } from '../../../../helpers/testUtils'; -jest.mock('../utils', () => ({ - requestHomepageData: jest.fn(() => - Promise.resolve({ - publicProjects: 236, - publicLoc: 12345, - pullRequests: 123456, - rules: 1234, - featuredProjects: [ - { - key: 'sonarsource-jfrog.simple-js-php-project', - avatarUrl: null, - organizationKey: 'sonarsource-jfrog', - organizationName: 'SonarSource & JFrog', - name: 'Simple JS & PHP project', - bugs: 0, - codeSmells: 7, - coverage: 9.7, - duplications: 56.2, - gateStatus: 'OK', - languages: ['js', 'php'], - maintainabilityRating: 1, - ncloc: 123456, - reliabilityRating: 1, - securityRating: 1, - vulnerabilities: 654321 - } - ] - }) - ) -})); +jest.mock('../utils', () => { + const utils = require.requireActual('../utils'); + utils.requestHomepageData = jest.fn().mockResolvedValue({ + publicProjects: 236, + publicLoc: 12345, + pullRequests: 123456, + rules: 1234, + featuredProjects: [ + { + key: 'sonarsource-jfrog.simple-js-php-project', + avatarUrl: null, + organizationKey: 'sonarsource-jfrog', + organizationName: 'SonarSource & JFrog', + name: 'Simple JS & PHP project', + bugs: 0, + codeSmells: 7, + coverage: 9.7, + duplications: 56.2, + gateStatus: 'OK', + languages: ['js', 'php'], + maintainabilityRating: 1, + ncloc: 123456, + reliabilityRating: 1, + securityRating: 1, + vulnerabilities: 654321 + } + ] + }); + return utils; +}); it('should render', async () => { const wrapper = shallow(); diff --git a/server/sonar-web/src/main/js/apps/about/sonarcloud/__tests__/__snapshots__/Home-test.tsx.snap b/server/sonar-web/src/main/js/apps/about/sonarcloud/__tests__/__snapshots__/Home-test.tsx.snap index 185ff31316b..f505b8de7c1 100644 --- a/server/sonar-web/src/main/js/apps/about/sonarcloud/__tests__/__snapshots__/Home-test.tsx.snap +++ b/server/sonar-web/src/main/js/apps/about/sonarcloud/__tests__/__snapshots__/Home-test.tsx.snap @@ -399,159 +399,124 @@ exports[`should render 6`] = ` className="sc-section sc-columns" >

- SonarCloud -
- speaks your -
- language + SonarCloud speaks your language

+
    +
  • + Java +
    • +
  • + JavaScript +
    • +
  • + TypeScript +
    • +
  • + C# +
    • +
  • + Python +
    • +
  • + C++ +
    • +
  • + Go +
    • +
  • + Kotlin +
    • +
  • + Ruby +
    • +
  • + ABAP +
    • +
- See all supported languages + See All Languages +
-
    -
  • - Java -
    • -
  • - JavaScript -
    • -
  • - TypeScript -
    • -
  • - C# -
    • -
  • - Python -
    • -
  • - C++ -
    • -
  • - Go -
    • -
  • - Kotlin -
    • -
  • - Ruby -
    • -
  • - - … - -
    • -
diff --git a/server/sonar-web/src/main/js/apps/about/sonarcloud/components/Languages.tsx b/server/sonar-web/src/main/js/apps/about/sonarcloud/components/Languages.tsx index 625e058e7b4..b49be18b376 100644 --- a/server/sonar-web/src/main/js/apps/about/sonarcloud/components/Languages.tsx +++ b/server/sonar-web/src/main/js/apps/about/sonarcloud/components/Languages.tsx @@ -18,38 +18,15 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ import * as React from 'react'; +import { LANGUAGES } from '../utils'; import { getBaseUrl } from '../../../../helpers/urls'; +import ChevronDownIcon from '../../../../components/icons-components/ChevronDownIcon'; interface State { height?: number; open: boolean; } -const LANGUAGES = [ - { name: 'Java', file: 'java.svg', width: 65 }, - { name: 'JavaScript', file: 'js.svg', width: 60 }, - { name: 'TypeScript', file: 'ts.svg', width: 100 }, - { name: 'C#', file: 'csharp.svg', width: 60 }, - { name: 'Python', file: 'python.svg', width: 65 }, - { name: 'C++', file: 'c-c-plus-plus.svg', width: 53 }, - { name: 'Go', file: 'go.svg', width: 91 }, - { name: 'Kotlin', file: 'kotlin.svg', width: 42 }, - { name: 'Ruby', file: 'ruby.svg', width: 43 }, - { name: 'ABAP', file: 'abap.svg', width: 62 }, - { name: 'Apex', file: 'apex.svg', width: 62 }, - { name: 'Flex', file: 'flex.png', width: 85 }, - { name: 'CSS', file: 'css.svg', width: 40 }, - { name: 'HTML', file: 'html5.svg', width: 40 }, - { name: 'Objective-C', file: 'obj-c.svg', width: 63 }, - { name: 'PHP', file: 'php.svg', width: 57 }, - { name: 'Scala', file: 'scala.svg', width: 29 }, - { name: 'Swift', file: 'swift.svg', width: 64 }, - { name: 'T-SQL', file: 't-sql.svg', width: 53 }, - { name: 'PL/SQL', file: 'pl-sql.svg', width: 65 }, - { name: 'VB', file: 'vb.svg', width: 55 }, - { name: 'XML', file: 'xml.svg', width: 67 } -]; - export class Languages extends React.PureComponent<{}, State> { container?: HTMLElement | null; state: State = { open: false }; @@ -68,47 +45,38 @@ export class Languages extends React.PureComponent<{}, State> { render() { const { open } = this.state; - const languages = open ? LANGUAGES : LANGUAGES.slice(0, 9); + const languages = open ? LANGUAGES : LANGUAGES.slice(0, 10); return (
-
-

- SonarCloud -
- speaks your -
- language -

+
+

SonarCloud speaks your language

+
    (this.container = node)} + style={{ height: this.state.height }}> + {languages.map(language => ( +
  • + {language.name} +
    • + ))} +
{!open && ( - - See all supported languages + + See All Languages + )}
-
    (this.container = node)} - style={{ height: this.state.height }}> - {languages.map(language => ( -
  • - {language.name} -
    • - ))} - {!open && ( -
  • - - … - -
    • - )} -
diff --git a/server/sonar-web/src/main/js/apps/about/sonarcloud/new_style.css b/server/sonar-web/src/main/js/apps/about/sonarcloud/new_style.css index 3e45bc879c2..2d318c2ebde 100644 --- a/server/sonar-web/src/main/js/apps/about/sonarcloud/new_style.css +++ b/server/sonar-web/src/main/js/apps/about/sonarcloud/new_style.css @@ -129,11 +129,6 @@ width: 50%; } -.sc-column-min { - flex-grow: 0; - flex-shrink: 0; -} - .sc-column-full { flex-grow: 1; text-align: center; @@ -274,23 +269,23 @@ } .sc-languages-container .sc-section { - margin-bottom: 30px; + margin-bottom: 60px; } .sc-languages-list { display: flex; flex-wrap: wrap; - margin-left: 120px; + width: 800px; + margin: auto; transition: height 0.3s ease; - margin-bottom: 10px; } .sc-languages-list > li { display: inline-block; text-align: center; - margin: 0 0 45px 0; + margin-bottom: 45px; line-height: 60px; - width: 140px; + width: 160px; } .sc-languages-list > li img { @@ -449,3 +444,58 @@ table.loc-price td { table.loc-price tr td:first-child { font-weight: 700; } + +.sc-page .bt { + display: inline-block; + border-radius: 3px; + font-weight: 700; + cursor: pointer; + white-space: nowrap; + transition: all 0.2s ease; + margin-right: 4px; +} + +.sc-page .bt-nav { + color: var(--sonarcloudBlack500); + border: none; + background: transparent; + padding: 5px 8px; +} + +.sc-page .bt-nav:hover { + color: var(--sonarcloudBlack600); +} + +.sc-page .bt-large { + height: 48px; + padding: 0 16px; + font-size: 18px; +} + +.sc-page .bt-nav.bt-large { + height: 24px; +} + +.sc-page .bt-orange2 { + border: 1px solid var(--sonarcloudOrange500); + background-color: transparent; + color: var(--sonarcloudOrange500); +} + +.sc-page .bt-orange2:hover, +.sc-page .bt-orange2:focus { + border: 1px solid var(--sonarcloudOrange600); + background-color: var(--sonarcloudOrange600); +} + +.sc-page .bt-nav.bt-orange2 { + border: none; + color: var(--sonarcloudOrange500); +} + +.sc-page .bt-nav.bt-orange2:hover, +.sc-page .bt-nav.bt-orange2:focus { + border: none; + background-color: transparent; + color: var(--sonarcloudOrange600); +} diff --git a/server/sonar-web/src/main/js/apps/about/sonarcloud/style.css b/server/sonar-web/src/main/js/apps/about/sonarcloud/style.css index e3bacbcd081..4477252e4e0 100644 --- a/server/sonar-web/src/main/js/apps/about/sonarcloud/style.css +++ b/server/sonar-web/src/main/js/apps/about/sonarcloud/style.css @@ -317,7 +317,9 @@ } .sc-languages-list > li { - margin: 11px 26px; + text-align: center; + margin: 5px 8px; + width: 100px; } .sc-integrations { diff --git a/server/sonar-web/src/main/js/apps/about/sonarcloud/utils.ts b/server/sonar-web/src/main/js/apps/about/sonarcloud/utils.ts index 10c48cbaa50..19e9ee19ccd 100644 --- a/server/sonar-web/src/main/js/apps/about/sonarcloud/utils.ts +++ b/server/sonar-web/src/main/js/apps/about/sonarcloud/utils.ts @@ -48,3 +48,28 @@ export interface HomepageData { export function requestHomepageData(): Promise { return fetch('/json/homepage.json').then(response => response.json()); } + +export const LANGUAGES = [ + { name: 'Java', file: 'java.svg', width: 65 }, + { name: 'JavaScript', file: 'js.svg', width: 60 }, + { name: 'TypeScript', file: 'ts.svg', width: 100 }, + { name: 'C#', file: 'csharp.svg', width: 60 }, + { name: 'Python', file: 'python.svg', width: 65 }, + { name: 'C++', file: 'c-c-plus-plus.svg', width: 53 }, + { name: 'Go', file: 'go.svg', width: 91 }, + { name: 'Kotlin', file: 'kotlin.svg', width: 42 }, + { name: 'Ruby', file: 'ruby.svg', width: 43 }, + { name: 'ABAP', file: 'abap.svg', width: 62 }, + { name: 'Apex', file: 'apex.svg', width: 62 }, + { name: 'Flex', file: 'flex.png', width: 85 }, + { name: 'CSS', file: 'css.svg', width: 40 }, + { name: 'HTML', file: 'html5.svg', width: 40 }, + { name: 'Objective-C', file: 'obj-c.svg', width: 63 }, + { name: 'PHP', file: 'php.svg', width: 57 }, + { name: 'Scala', file: 'scala.svg', width: 29 }, + { name: 'Swift', file: 'swift.svg', width: 64 }, + { name: 'T-SQL', file: 't-sql.svg', width: 53 }, + { name: 'PL/SQL', file: 'pl-sql.svg', width: 65 }, + { name: 'VB', file: 'vb.svg', width: 55 }, + { name: 'XML', file: 'xml.svg', width: 67 } +]; -- 2.39.5