From: Grégoire Aubert Date: Tue, 1 May 2018 11:41:20 +0000 (+0200) Subject: SONAR-10646 Change hover effect of oauth provider buttons X-Git-Tag: 7.5~1276 X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=2deb7ee9cf7e76538dc8fac31480a528b71825fd;p=sonarqube.git SONAR-10646 Change hover effect of oauth provider buttons --- diff --git a/server/sonar-web/src/main/js/apps/sessions/components/OAuthProviders.css b/server/sonar-web/src/main/js/apps/sessions/components/OAuthProviders.css index 01d8ef46d8d..f77c7c0220b 100644 --- a/server/sonar-web/src/main/js/apps/sessions/components/OAuthProviders.css +++ b/server/sonar-web/src/main/js/apps/sessions/components/OAuthProviders.css @@ -45,7 +45,16 @@ .oauth-providers > ul > li > a:hover, .oauth-providers > ul > li > a:focus { - box-shadow: 0 0 16px rgba(0, 0, 0, 0.2); + box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.1); +} + +.oauth-providers > ul > li > a.dark-text { + color: var(--secondFontColor); +} + +.oauth-providers > ul > li > a.dark-text:hover, +.oauth-providers > ul > li > a.dark-text:focus { + box-shadow: inset 0 0 0 100px rgba(0, 0, 0, 0.1); } .oauth-providers > ul > li > a > span { diff --git a/server/sonar-web/src/main/js/apps/sessions/components/OAuthProviders.tsx b/server/sonar-web/src/main/js/apps/sessions/components/OAuthProviders.tsx index 817cb3d2ade..b13fae5dd5e 100644 --- a/server/sonar-web/src/main/js/apps/sessions/components/OAuthProviders.tsx +++ b/server/sonar-web/src/main/js/apps/sessions/components/OAuthProviders.tsx @@ -24,7 +24,7 @@ import * as theme from '../../../app/theme'; import { IdentityProvider } from '../../../app/types'; import Tooltip from '../../../components/controls/Tooltip'; import HelpIcon from '../../../components/icons-components/HelpIcon'; -import { getTextColor } from '../../../helpers/colors'; +import { isDarkColor } from '../../../helpers/colors'; import { getBaseUrl } from '../../../helpers/urls'; import './OAuthProviders.css'; @@ -41,38 +41,55 @@ export default function OAuthProviders(props: Props) {
); } +interface ItemProps { + format: (name: string) => React.ReactNode; + identityProvider: IdentityProvider; + returnTo: string; +} + +function OAuthProvider({ format, identityProvider, returnTo }: ItemProps) { + const hasDarkBackground = isDarkColor(identityProvider.backgroundColor); + + return ( +
  • + + {identityProvider.name} + {format(identityProvider.name)} + + {identityProvider.helpMessage && ( + +
    + +
    +     + )} +
    • + ); +} + function defaultFormatLabel(name: string) { return translateWithParameters('login.login_with_x', name); } diff --git a/server/sonar-web/src/main/js/apps/sessions/components/__tests__/OAuthProviders-test.tsx b/server/sonar-web/src/main/js/apps/sessions/components/__tests__/OAuthProviders-test.tsx index 65755a26b81..e0e1c357f24 100644 --- a/server/sonar-web/src/main/js/apps/sessions/components/__tests__/OAuthProviders-test.tsx +++ b/server/sonar-web/src/main/js/apps/sessions/components/__tests__/OAuthProviders-test.tsx @@ -38,19 +38,23 @@ const identityProviders = [ ]; it('should render correctly', () => { - expect( - shallow() - ).toMatchSnapshot(); + const wrapper = shallow(); + expect(wrapper).toMatchSnapshot(); + wrapper.find('OAuthProvider').forEach(node => expect(node.dive()).toMatchSnapshot()); }); it('should use the custom label formatter', () => { + const wrapper = shallow( + 'custom_format.' + name} + identityProviders={[identityProviders[0]]} + returnTo="" + /> + ); expect( - shallow( - 'custom_format.' + name} - identityProviders={[identityProviders[0]]} - returnTo="" - /> - ) + wrapper + .find('OAuthProvider') + .first() + .dive() ).toMatchSnapshot(); }); diff --git a/server/sonar-web/src/main/js/apps/sessions/components/__tests__/__snapshots__/OAuthProviders-test.tsx.snap b/server/sonar-web/src/main/js/apps/sessions/components/__tests__/__snapshots__/OAuthProviders-test.tsx.snap index e7adf301d2c..e37305eb820 100644 --- a/server/sonar-web/src/main/js/apps/sessions/components/__tests__/__snapshots__/OAuthProviders-test.tsx.snap +++ b/server/sonar-web/src/main/js/apps/sessions/components/__tests__/__snapshots__/OAuthProviders-test.tsx.snap @@ -5,95 +5,116 @@ exports[`should render correctly 1`] = ` className="oauth-providers" > `; -exports[`should use the custom label formatter 1`] = ` -
    - -
    + + + + +`; + +exports[`should use the custom label formatter 1`] = ` +
  • + + Foo + + custom_format.Foo + + +
    • `; diff --git a/server/sonar-web/src/main/js/helpers/__tests__/colors-test.ts b/server/sonar-web/src/main/js/helpers/__tests__/colors-test.ts new file mode 100644 index 00000000000..7aed0b0ead0 --- /dev/null +++ b/server/sonar-web/src/main/js/helpers/__tests__/colors-test.ts @@ -0,0 +1,50 @@ +/* + * SonarQube + * Copyright (C) 2009-2018 SonarSource SA + * mailto:info AT sonarsource DOT com + * + * This program is free software; you can redistribute it and/or + * modify it under the terms of the GNU Lesser General Public + * License as published by the Free Software Foundation; either + * version 3 of the License, or (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * Lesser General Public License for more details. + * + * You should have received a copy of the GNU Lesser General Public License + * along with this program; if not, write to the Free Software Foundation, + * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. + */ +import * as colors from '../colors'; + +describe('#stringToColor', () => { + it('should return a color for a text', () => { + expect(colors.stringToColor('skywalker')).toBe('#97f047'); + }); +}); + +describe('#isDarkColor', () => { + it('should be dark', () => { + expect(colors.isDarkColor('#000000')).toBeTruthy(); + expect(colors.isDarkColor('#222222')).toBeTruthy(); + expect(colors.isDarkColor('#000')).toBeTruthy(); + }); + it('should be light', () => { + expect(colors.isDarkColor('#FFFFFF')).toBeFalsy(); + expect(colors.isDarkColor('#CDCDCD')).toBeFalsy(); + expect(colors.isDarkColor('#FFF')).toBeFalsy(); + }); +}); + +describe('#getTextColor', () => { + it('should return dark color', () => { + expect(colors.getTextColor('#FFF', 'dark', 'light')).toBe('dark'); + expect(colors.getTextColor('#FFF')).toBe('#222'); + }); + it('should return light color', () => { + expect(colors.getTextColor('#000', 'dark', 'light')).toBe('light'); + expect(colors.getTextColor('#000')).toBe('#fff'); + }); +}); diff --git a/server/sonar-web/src/main/js/helpers/colors.ts b/server/sonar-web/src/main/js/helpers/colors.ts index 3d26b37b9d5..291bfd17f18 100644 --- a/server/sonar-web/src/main/js/helpers/colors.ts +++ b/server/sonar-web/src/main/js/helpers/colors.ts @@ -32,17 +32,20 @@ export function stringToColor(str: string) { return color; } -export function getTextColor(background: string, dark = '#222', light = '#fff') { - background = background.substr(1); - if (background.length === 3) { +export function isDarkColor(color: string) { + color = color.substr(1); + if (color.length === 3) { // shortcut notation: #f90 - background = - background[0] + background[0] + background[1] + background[1] + background[2] + background[2]; + color = color[0] + color[0] + color[1] + color[1] + color[2] + color[2]; } - const rgb = parseInt(background.substr(1), 16); + const rgb = parseInt(color.substr(1), 16); const r = (rgb >> 16) & 0xff; const g = (rgb >> 8) & 0xff; const b = (rgb >> 0) & 0xff; const luma = 0.2126 * r + 0.7152 * g + 0.0722 * b; - return luma > 140 ? dark : light; + return luma < 140; +} + +export function getTextColor(background: string, dark = '#222', light = '#fff') { + return isDarkColor(background) ? light : dark; }