From: Stas Vilchik Date: Mon, 14 May 2018 15:22:53 +0000 (+0200) Subject: replace native buttons with Button component (#235) X-Git-Tag: 7.5~1194 X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=2c91ba5af11b8e5955b65d4f0f76ea0e8917afbd;p=sonarqube.git replace native buttons with Button component (#235) --- diff --git a/server/sonar-web/src/main/js/app/styles/init/forms.css b/server/sonar-web/src/main/js/app/styles/init/forms.css index 98a484ef21e..696151b06bc 100644 --- a/server/sonar-web/src/main/js/app/styles/init/forms.css +++ b/server/sonar-web/src/main/js/app/styles/init/forms.css @@ -125,264 +125,6 @@ select { line-height: var(--controlHeight); } -button, -.button, -input[type='submit'], -input[type='button'] { - display: inline-block; - vertical-align: baseline; - height: var(--controlHeight); - line-height: calc(var(--controlHeight) - 2px); - padding: 0 12px; - border: 1px solid var(--darkBlue); - border-radius: 2px; - box-sizing: border-box; - background: transparent; - color: var(--darkBlue); - font-weight: 600; - font-size: var(--smallFontSize); - text-align: center; - text-decoration: none; - cursor: pointer; - outline: none; - transition: border-color 0.2s ease; -} - -button:hover, -.button:hover, -input[type='submit']:hover, -input[type='button']:hover, -button:focus, -.button:focus, -input[type='submit']:focus, -input[type='button']:focus, -button.button-active, -.button.button-active, -input[type='submit'].button-active, -input[type='button'].button-active { - background: var(--darkBlue); - color: #fff; -} - -button:active, -.button:active, -input[type='submit']:active, -input[type='button']:active { - box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); -} - -button.disabled, -.button.disabled, -input[type='submit'].disabled, -input[type='button'].disabled, -button:disabled, -.button:disabled, -input[type='submit']:disabled, -input[type='button']:disabled, -button:disabled:hover, -.button:disabled:hover, -input[type='submit']:disabled:hover, -input[type='button']:disabled:hover, -button:disabled:active, -.button:disabled:active, -input[type='submit']:disabled:active, -input[type='button']:disabled:active, -button:disabled:focus, -.button:disabled:focus, -input[type='submit']:disabled:focus, -input[type='button']:disabled:focus { - color: var(--disableGrayText) !important; - border-color: var(--disableGrayBorder) !important; - background: var(--disableGrayBg) !important; - cursor: not-allowed !important; - box-shadow: none !important; -} - -.button svg { - margin-top: calc((var(--controlHeight) - 16px - 2px) / 2); -} - -.button-red, -input[type='submit'].button-red { - border-color: var(--red); - color: var(--red); -} - -.button-red:hover, -input[type='submit'].button-red:hover, -.button-red:focus, -input[type='submit'].button-red:focus, -.button-red.active, -input[type='submit'].button-red.active { - background: var(--red); - color: #fff; -} - -.button-success, -input[type='submit'].button-success { - border-color: var(--green); - color: var(--green); -} - -.button-success:hover, -input[type='submit'].button-success:hover, -.button-success:focus, -input[type='submit'].button-success:focus, -.button-success.active, -input[type='submit'].button-success.active { - background: var(--green); - color: #fff; -} - -.button-grey, -input[type='submit'].button-grey { - border-color: var(--gray71); - color: var(--secondFontColor); -} - -.button-grey:hover, -input[type='submit'].button-grey:hover, -.button-grey:focus, -input[type='submit'].button-grey:focus, -.button-grey.active, -input[type='submit'].button-grey.active { - background: var(--gray71); - color: #ffffff; -} - -.button-grey.button-active, -input[type='submit'].button-grey.button-active { - background: var(--secondFontColor); - border-color: var(--secondFontColor); - color: #ffffff; -} - -.button-clean, -.button-clean:hover, -.button-clean:focus { - padding: 0; - line-height: 1; - border: none; - background: transparent; - box-shadow: none; - color: var(--baseFontColor); -} - -.button-clean path { - transition: opacity 0.3s ease; -} - -.button-clean:hover path { - opacity: 0.8; -} - -.button-link { - display: inline; - height: auto; /* Keep this to not inherit the height from .button */ - margin: 0; - padding: 0; - border: none; - background: transparent; - color: var(--darkBlue); - font-weight: 400; - font-size: inherit; - line-height: inherit; - transition: all 0.2s ease; -} - -.button-link svg { - margin-top: 0; -} - -.button-link:hover, -.button-link:focus { - background: transparent; - color: var(--blue); -} - -.button-link:active { - box-shadow: none; - outline: thin dotted #ccc; -} - -.button-link:disabled, -.button-link:disabled:hover, -.button-link:disabled:active, -.button-link:disabled:focus { - color: var(--secondFontColor); - background: transparent !important; - cursor: default; -} - -.button-small { - height: var(--smallControlHeight); - line-height: 18px; - padding: 0 6px; - font-size: 11px; -} - -.button-small > svg { - margin-top: 2px; -} - -.button-group { - display: inline-block; - vertical-align: middle; - font-size: 0; - white-space: nowrap; -} - -.button-group > button, -.button-group > .button { - position: relative; - z-index: var(--normalZIndex); - display: inline-block; - vertical-align: middle; - margin: 0; - cursor: pointer; -} - -.button-group > button:hover:not(:disabled), -.button-group > .button:hover:not(:disabled), -.button-group > button:focus:not(:disabled), -.button-group > .button:focus:not(:disabled), -.button-group > button:active:not(:disabled), -.button-group > .button:active:not(:disabled), -.button-group > button.active:not(:disabled), -.button-group > .button.active:not(:disabled) { - z-index: var(--aboveNormalZIndex); -} - -.button-group > button:disabled, -.button-group > .button:disabled { - z-index: var(--belowNormalZIndex); -} - -.button-group > button:not(:first-child), -.button-group > .button:not(:first-child) { - border-top-left-radius: 0; - border-bottom-left-radius: 0; -} - -.button-group > button:not(:last-child):not(.dropdown-toggle), -.button-group > .button:not(:last-child):not(.dropdown-toggle) { - border-top-right-radius: 0; - border-bottom-right-radius: 0; -} - -.button-group > button + button, -.button-group > button + .button, -.button-group > .button + button, -.button-group > .button + .button { - margin-left: -1px; -} - -.button-group > a:not(.button) { - vertical-align: middle; - margin: 0 8px; - font-size: var(--smallFontSize); -} - .input-tiny { width: 60px !important; } diff --git a/server/sonar-web/src/main/js/app/utils/exposeLibraries.ts b/server/sonar-web/src/main/js/app/utils/exposeLibraries.ts index b07d8c1f53b..df9cd6a4b7f 100644 --- a/server/sonar-web/src/main/js/app/utils/exposeLibraries.ts +++ b/server/sonar-web/src/main/js/app/utils/exposeLibraries.ts @@ -40,7 +40,7 @@ import SelectList from '../../components/SelectList/SelectList'; import CoverageRating from '../../components/ui/CoverageRating'; import DuplicationsRating from '../../components/ui/DuplicationsRating'; import Level from '../../components/ui/Level'; -import { EditButton } from '../../components/ui/buttons'; +import { EditButton, Button, SubmitButton, ResetButtonLink } from '../../components/ui/buttons'; import DeferredSpinner from '../../components/common/DeferredSpinner'; import ReloadButton from '../../components/controls/ReloadButton'; @@ -53,6 +53,7 @@ const exposeLibraries = () => { global.SonarMeasures = measures; global.SonarRequest = { ...request, throwGlobalError, addGlobalSuccessMessage }; global.SonarComponents = { + Button, CoverageRating, DateFormatter, DateFromNow, @@ -68,9 +69,11 @@ const exposeLibraries = () => { ListFooter, Modal, ReloadButton, + ResetButtonLink, SearchBox, Select, SelectList, + SubmitButton, Tooltip }; }; diff --git a/server/sonar-web/src/main/js/apps/account/components/Password.js b/server/sonar-web/src/main/js/apps/account/components/Password.js index 3c4b7ce7f1b..00c12a5e67a 100644 --- a/server/sonar-web/src/main/js/apps/account/components/Password.js +++ b/server/sonar-web/src/main/js/apps/account/components/Password.js @@ -19,6 +19,7 @@ */ import React, { Component } from 'react'; import { changePassword } from '../../../api/users'; +import { SubmitButton } from '../../../components/ui/buttons'; import { translate } from '../../../helpers/l10n'; export default class Password extends Component { @@ -80,7 +81,7 @@ export default class Password extends Component { {errors && errors.map((e, i) => ( -
+
{e}
))} @@ -91,10 +92,10 @@ export default class Password extends Component { * (this.oldPassword = elem)} autoComplete="off" id="old_password" name="old_password" + ref={elem => (this.oldPassword = elem)} required={true} type="password" /> @@ -105,10 +106,10 @@ export default class Password extends Component { * (this.password = elem)} autoComplete="off" id="password" name="password" + ref={elem => (this.password = elem)} required={true} type="password" /> @@ -119,18 +120,18 @@ export default class Password extends Component { * (this.passwordConfirmation = elem)} autoComplete="off" id="password_confirmation" name="password_confirmation" + ref={elem => (this.passwordConfirmation = elem)} required={true} type="password" />
- +
diff --git a/server/sonar-web/src/main/js/apps/background-tasks/components/Search.js b/server/sonar-web/src/main/js/apps/background-tasks/components/Search.js index 11f7de80c0a..e43c4adc54d 100644 --- a/server/sonar-web/src/main/js/apps/background-tasks/components/Search.js +++ b/server/sonar-web/src/main/js/apps/background-tasks/components/Search.js @@ -26,6 +26,7 @@ import CurrentsFilter from './CurrentsFilter'; import DateFilter from './DateFilter'; import { DEFAULT_FILTERS } from './../constants'; import SearchBox from '../../../components/controls/SearchBox'; +import { Button } from '../../../components/ui/buttons'; import { translate } from '../../../helpers/l10n'; export default class Search extends React.PureComponent { @@ -39,17 +40,17 @@ export default class Search extends React.PureComponent { onReload: PropTypes.func.isRequired }; - handleStatusChange(status /*: string */) { + handleStatusChange = (status /*: string */) => { this.props.onFilterUpdate({ status }); - } + }; - handleTypeChange(taskType /*: string */) { + handleTypeChange = (taskType /*: string */) => { this.props.onFilterUpdate({ taskType }); - } + }; - handleCurrentsChange(currents /*: string */) { + handleCurrentsChange = (currents /*: string */) => { this.props.onFilterUpdate({ currents }); - } + }; handleDateChange = (date /*: { maxExecutedAt?: Date; minSubmittedAt?: Date } */) => { this.props.onFilterUpdate(date); @@ -59,16 +60,9 @@ export default class Search extends React.PureComponent { this.props.onFilterUpdate({ query }); }; - handleReload(e /*: Object */) { - e.target.blur(); - this.props.onReload(); - } - - handleReset(e /*: Object */) { - e.preventDefault(); - e.target.blur(); + handleReset = () => { this.props.onFilterUpdate(DEFAULT_FILTERS); - } + }; renderSearchBox() { const { component, query } = this.props; @@ -106,16 +100,12 @@ export default class Search extends React.PureComponent { diff --git a/server/sonar-web/src/main/js/apps/organizations/components/OrganizationEdit.js b/server/sonar-web/src/main/js/apps/organizations/components/OrganizationEdit.js index b1dda0bb9fd..770c9587bac 100644 --- a/server/sonar-web/src/main/js/apps/organizations/components/OrganizationEdit.js +++ b/server/sonar-web/src/main/js/apps/organizations/components/OrganizationEdit.js @@ -26,6 +26,7 @@ import { translate } from '../../../helpers/l10n'; /*:: import type { Organization } from '../../../store/organizations/duck'; */ import { getOrganizationByKey } from '../../../store/rootReducer'; import { updateOrganization } from '../actions'; +import { SubmitButton } from '../../../components/ui/buttons'; /*:: type Props = { @@ -115,14 +116,14 @@ class OrganizationEdit extends React.PureComponent { * this.setState({ name: e.target.value })} required={true} type="text" - maxLength="64" value={this.state.name} - disabled={this.state.loading} - onChange={e => this.setState({ name: e.target.value })} />
{translate('organization.name.description')} @@ -131,13 +132,13 @@ class OrganizationEdit extends React.PureComponent {
{translate('organization.avatar.description')} @@ -148,20 +149,20 @@ class OrganizationEdit extends React.PureComponent { {translate('organization.avatar.preview')} {':'}
- +
)}