SONAR-5856 Rewrite Settings page (#1163)

3 files changed, 155 insertions, 0 deletions

diff --git a/server/sonar-web/src/main/js/components/controls/Toggle.js b/server/sonar-web/src/main/js/components/controls/Toggle.js
new file mode 100644
index 00000000000..c843657dae4
--- /dev/null
+++ b/server/sonar-web/src/main/js/components/controls/Toggle.js
@@ -0,0 +1,51 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2016 SonarSource SA
+ * mailto:contact 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 React from 'react';
+import classNames from 'classnames';
+import './styles.css';
+
+export default class Toggle extends React.Component {
+  static propTypes = {
+    value: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.bool]).isRequired,
+    name: React.PropTypes.string,
+    onChange: React.PropTypes.func
+  };
+
+  handleClick (e, value) {
+    e.preventDefault();
+    e.currentTarget.blur();
+    if (this.props.onChange) {
+      this.props.onChange(!value);
+    }
+  }
+
+  render () {
+    const { value } = this.props;
+    const booleanValue = typeof value === 'string' ? value === 'true' : value;
+
+    const className = classNames('boolean-toggle', { 'boolean-toggle-on': booleanValue });
+
+    return (
+        <button className={className} name={this.props.name} onClick={e => this.handleClick(e, booleanValue)}>
+          <div className="boolean-toggle-handle"/>
+        </button>
+    );
+  }
+}
diff --git a/server/sonar-web/src/main/js/components/controls/__tests__/Toggle-test.js b/server/sonar-web/src/main/js/components/controls/__tests__/Toggle-test.js
new file mode 100644
index 00000000000..f194063188b
--- /dev/null
+++ b/server/sonar-web/src/main/js/components/controls/__tests__/Toggle-test.js
@@ -0,0 +1,53 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2016 SonarSource SA
+ * mailto:contact 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 chai, { expect } from 'chai';
+import { shallow } from 'enzyme';
+import sinon from 'sinon';
+import sinonChai from 'sinon-chai';
+import React from 'react';
+import Toggle from '../Toggle';
+
+chai.use(sinonChai);
+
+function getSample (props) {
+  return (
+      <Toggle value={true} onChange={() => true} {...props}/>);
+}
+
+function click (element) {
+  return element.simulate('click', {
+    currentTarget: { blur () {} },
+    preventDefault () {}
+  });
+}
+
+describe('Components :: Controls :: Toggle', () => {
+  it('should render', () => {
+    const Toggle = shallow(getSample());
+    expect(Toggle.is('button')).to.equal(true);
+  });
+
+  it('should call onChange', () => {
+    const onChange = sinon.spy();
+    const Toggle = shallow(getSample({ onChange }));
+    click(Toggle);
+    expect(onChange).to.have.been.calledWith(false);
+  });
+});
diff --git a/server/sonar-web/src/main/js/components/controls/styles.css b/server/sonar-web/src/main/js/components/controls/styles.css
index 1ed5c1f4e52..b67f7f5eb71 100644
--- a/server/sonar-web/src/main/js/components/controls/styles.css
+++ b/server/sonar-web/src/main/js/components/controls/styles.css
@@ -24,3 +24,54 @@
 .date-input-control-input:focus + .date-input-control-icon path {
   fill: #4b9fd5;
 }
+
+.boolean-toggle {
+  display: inline-block;
+  vertical-align: middle;
+  width: 48px;
+  height: 24px;
+  padding: 1px;
+  border: 1px solid #cdcdcd;
+  border-radius: 24px;
+  box-sizing: border-box;
+  background-color: #fff;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.boolean-toggle:hover {
+  background-color: #fff;
+}
+
+.boolean-toggle:focus {
+  border-color: #4b9fd5;
+  background-color: #f6f6f6;
+}
+
+.boolean-toggle-handle {
+  width: 20px;
+  height: 20px;
+  border: 1px solid #cdcdcd;
+  border-radius: 22px;
+  box-sizing: border-box;
+  background-color: #f6f6f6;
+  transition: transform 0.3s cubic-bezier(.87,-.41,.19,1.44), border 0.3s ease;
+}
+
+.boolean-toggle-on {
+  border-color: #236a97;
+  background-color: #236a97;
+}
+
+.boolean-toggle-on:hover {
+  background-color: #236a97;
+}
+
+.boolean-toggle-on:focus {
+  background-color: #236a97;
+}
+
+.boolean-toggle-on .boolean-toggle-handle {
+  border-color: #f6f6f6;
+  transform: translateX(24px);
+}