From a16adee8be6a3c3c957a0079f1df6b8cdaba6c16 Mon Sep 17 00:00:00 2001 From: bill bittner Date: Tue, 5 Jun 2018 08:02:23 -0700 Subject: [PATCH] added button components --- .../build/components/ButtonPrimary/index.js | 22 ++++++ .../components/ButtonPrimaryJumbo/index.js | 22 ++++++ .../build/components/ButtonSecondary/index.js | 22 ++++++ .../build/components/ButtonTertiary/index.js | 22 ++++++ .../ChannelCreateNameInput/index.js | 42 ++++++++++ .../ChannelCreatePasswordInput/index.js | 37 +++++++++ .../components/ChannelLoginNameInput/index.js | 38 ++++++++++ .../ChannelLoginPasswordInput/index.js | 38 ++++++++++ client/build/components/SpaceAround/index.js | 59 ++++++++++++++ .../containers/ChannelCreateForm/view.js | 76 +++++-------------- .../build/containers/ChannelLoginForm/view.js | 72 ++++-------------- .../build/containers/PublishDetails/view.js | 21 +++-- .../containers/PublishMetadataInputs/view.js | 10 ++- client/scss/_button.scss | 60 --------------- client/scss/all.scss | 6 +- client/scss/components/_button-primary.scss | 33 ++++++++ client/scss/components/_button-secondary.scss | 22 ++++++ client/scss/components/_button-tertiary.scss | 14 ++++ client/scss/components/_button.scss | 7 ++ client/scss/components/_space-around.scss | 5 ++ client/src/components/ButtonPrimary/index.jsx | 14 ++++ .../components/ButtonPrimaryJumbo/index.jsx | 14 ++++ .../src/components/ButtonSecondary/index.jsx | 14 ++++ .../src/components/ButtonTertiary/index.jsx | 14 ++++ .../ChannelCreateNameInput/index.jsx | 38 ++++++++++ .../ChannelCreatePasswordInput/index.jsx | 26 +++++++ .../ChannelLoginNameInput/index.jsx | 29 +++++++ .../ChannelLoginPasswordInput/index.jsx | 28 +++++++ client/src/components/SpaceAround/index.jsx | 16 ++++ .../src/containers/ChannelCreateForm/view.jsx | 58 ++++++-------- .../src/containers/ChannelLoginForm/view.jsx | 57 ++------------ client/src/containers/PublishDetails/view.jsx | 22 +++--- .../containers/PublishMetadataInputs/view.jsx | 13 ++-- 33 files changed, 687 insertions(+), 284 deletions(-) create mode 100644 client/build/components/ButtonPrimary/index.js create mode 100644 client/build/components/ButtonPrimaryJumbo/index.js create mode 100644 client/build/components/ButtonSecondary/index.js create mode 100644 client/build/components/ButtonTertiary/index.js create mode 100644 client/build/components/ChannelCreateNameInput/index.js create mode 100644 client/build/components/ChannelCreatePasswordInput/index.js create mode 100644 client/build/components/ChannelLoginNameInput/index.js create mode 100644 client/build/components/ChannelLoginPasswordInput/index.js create mode 100644 client/build/components/SpaceAround/index.js delete mode 100644 client/scss/_button.scss create mode 100644 client/scss/components/_button-primary.scss create mode 100644 client/scss/components/_button-secondary.scss create mode 100644 client/scss/components/_button-tertiary.scss create mode 100644 client/scss/components/_button.scss create mode 100644 client/scss/components/_space-around.scss create mode 100644 client/src/components/ButtonPrimary/index.jsx create mode 100644 client/src/components/ButtonPrimaryJumbo/index.jsx create mode 100644 client/src/components/ButtonSecondary/index.jsx create mode 100644 client/src/components/ButtonTertiary/index.jsx create mode 100644 client/src/components/ChannelCreateNameInput/index.jsx create mode 100644 client/src/components/ChannelCreatePasswordInput/index.jsx create mode 100644 client/src/components/ChannelLoginNameInput/index.jsx create mode 100644 client/src/components/ChannelLoginPasswordInput/index.jsx create mode 100644 client/src/components/SpaceAround/index.jsx diff --git a/client/build/components/ButtonPrimary/index.js b/client/build/components/ButtonPrimary/index.js new file mode 100644 index 00000000..6079fa91 --- /dev/null +++ b/client/build/components/ButtonPrimary/index.js @@ -0,0 +1,22 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = void 0; + +var _react = _interopRequireDefault(require("react")); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +var ButtonPrimary = function ButtonPrimary(_ref) { + var value = _ref.value, + onClickHandler = _ref.onClickHandler; + return _react.default.createElement("button", { + className: 'button button-primary', + onClick: onClickHandler + }, value); +}; + +var _default = ButtonPrimary; +exports.default = _default; \ No newline at end of file diff --git a/client/build/components/ButtonPrimaryJumbo/index.js b/client/build/components/ButtonPrimaryJumbo/index.js new file mode 100644 index 00000000..938f96c1 --- /dev/null +++ b/client/build/components/ButtonPrimaryJumbo/index.js @@ -0,0 +1,22 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = void 0; + +var _react = _interopRequireDefault(require("react")); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +var ButtonPrimaryJumbo = function ButtonPrimaryJumbo(_ref) { + var value = _ref.value, + onClickHandler = _ref.onClickHandler; + return _react.default.createElement("button", { + className: 'button button-primary button-primary--jumbo', + onClick: onClickHandler + }, value); +}; + +var _default = ButtonPrimaryJumbo; +exports.default = _default; \ No newline at end of file diff --git a/client/build/components/ButtonSecondary/index.js b/client/build/components/ButtonSecondary/index.js new file mode 100644 index 00000000..d7dde2c3 --- /dev/null +++ b/client/build/components/ButtonSecondary/index.js @@ -0,0 +1,22 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = void 0; + +var _react = _interopRequireDefault(require("react")); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +var ButtonPrimary = function ButtonPrimary(_ref) { + var value = _ref.value, + onClickHandler = _ref.onClickHandler; + return _react.default.createElement("button", { + className: 'button button--secondary', + onClick: onClickHandler + }, value); +}; + +var _default = ButtonPrimary; +exports.default = _default; \ No newline at end of file diff --git a/client/build/components/ButtonTertiary/index.js b/client/build/components/ButtonTertiary/index.js new file mode 100644 index 00000000..31bffa97 --- /dev/null +++ b/client/build/components/ButtonTertiary/index.js @@ -0,0 +1,22 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = void 0; + +var _react = _interopRequireDefault(require("react")); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +var ButtonTertiary = function ButtonTertiary(_ref) { + var value = _ref.value, + onClickHandler = _ref.onClickHandler; + return _react.default.createElement("button", { + className: 'button button--tertiary', + onClick: onClickHandler + }, value); +}; + +var _default = ButtonTertiary; +exports.default = _default; \ No newline at end of file diff --git a/client/build/components/ChannelCreateNameInput/index.js b/client/build/components/ChannelCreateNameInput/index.js new file mode 100644 index 00000000..7bc7ecf6 --- /dev/null +++ b/client/build/components/ChannelCreateNameInput/index.js @@ -0,0 +1,42 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = void 0; + +var _react = _interopRequireDefault(require("react")); + +var _Label = _interopRequireDefault(require("@components/Label")); + +var _PublishDetailsRow = _interopRequireDefault(require("@components/PublishDetailsRow")); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +var ChannelCreateNameInput = function ChannelCreateNameInput(_ref) { + var value = _ref.value, + error = _ref.error, + handleNameInput = _ref.handleNameInput; + return _react.default.createElement(_PublishDetailsRow.default, { + label: _react.default.createElement(_Label.default, { + value: 'Name:' + }), + content: _react.default.createElement("div", { + className: "input-area--primary" + }, _react.default.createElement("span", null, "@"), _react.default.createElement("input", { + type: "text", + name: "channel", + className: "input-text", + placeholder: "exampleChannelName", + value: value, + onChange: handleNameInput + }), value && !error && _react.default.createElement("span", { + className: "info-message--success span--absolute" + }, "\u2713"), error && _react.default.createElement("span", { + className: "info-message--failure span--absolute" + }, "\u2716")) + }); +}; + +var _default = ChannelCreateNameInput; +exports.default = _default; \ No newline at end of file diff --git a/client/build/components/ChannelCreatePasswordInput/index.js b/client/build/components/ChannelCreatePasswordInput/index.js new file mode 100644 index 00000000..ae811c54 --- /dev/null +++ b/client/build/components/ChannelCreatePasswordInput/index.js @@ -0,0 +1,37 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = void 0; + +var _react = _interopRequireDefault(require("react")); + +var _Label = _interopRequireDefault(require("@components/Label")); + +var _PublishDetailsRow = _interopRequireDefault(require("@components/PublishDetailsRow")); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +var ChannelCreatePasswordInput = function ChannelCreatePasswordInput(_ref) { + var value = _ref.value, + handlePasswordInput = _ref.handlePasswordInput; + return _react.default.createElement(_PublishDetailsRow.default, { + label: _react.default.createElement(_Label.default, { + value: 'Password:' + }), + content: _react.default.createElement("div", { + className: "input-area--primary" + }, _react.default.createElement("input", { + type: "password", + name: "password", + className: "input-text", + placeholder: "", + value: value, + onChange: handlePasswordInput + })) + }); +}; + +var _default = ChannelCreatePasswordInput; +exports.default = _default; \ No newline at end of file diff --git a/client/build/components/ChannelLoginNameInput/index.js b/client/build/components/ChannelLoginNameInput/index.js new file mode 100644 index 00000000..beed6439 --- /dev/null +++ b/client/build/components/ChannelLoginNameInput/index.js @@ -0,0 +1,38 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = void 0; + +var _react = _interopRequireDefault(require("react")); + +var _PublishDetailsRow = _interopRequireDefault(require("@components/PublishDetailsRow")); + +var _Label = _interopRequireDefault(require("@components/Label")); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +var ChannelLoginNameInput = function ChannelLoginNameInput(_ref) { + var channelName = _ref.channelName, + handleInput = _ref.handleInput; + return _react.default.createElement(_PublishDetailsRow.default, { + label: _react.default.createElement(_Label.default, { + value: 'Name:' + }), + content: _react.default.createElement("div", { + className: "input-area--primary" + }, _react.default.createElement("span", null, "@"), _react.default.createElement("input", { + type: "text", + id: "channel-login-name-input", + className: "input-text", + name: "name", + placeholder: "Your Channel Name", + value: channelName, + onChange: handleInput + })) + }); +}; + +var _default = ChannelLoginNameInput; +exports.default = _default; \ No newline at end of file diff --git a/client/build/components/ChannelLoginPasswordInput/index.js b/client/build/components/ChannelLoginPasswordInput/index.js new file mode 100644 index 00000000..e65b1363 --- /dev/null +++ b/client/build/components/ChannelLoginPasswordInput/index.js @@ -0,0 +1,38 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = void 0; + +var _react = _interopRequireDefault(require("react")); + +var _PublishDetailsRow = _interopRequireDefault(require("@components/PublishDetailsRow")); + +var _Label = _interopRequireDefault(require("@components/Label")); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +var ChannelLoginPasswordInput = function ChannelLoginPasswordInput(_ref) { + var channelPassword = _ref.channelPassword, + handleInput = _ref.handleInput; + return _react.default.createElement(_PublishDetailsRow.default, { + label: _react.default.createElement(_Label.default, { + value: 'Password:' + }), + content: _react.default.createElement("div", { + className: "input-area--primary" + }, _react.default.createElement("input", { + type: "password", + id: "channel-login-password-input", + name: "password", + className: "input-text", + placeholder: "", + value: channelPassword, + onChange: handleInput + })) + }); +}; + +var _default = ChannelLoginPasswordInput; +exports.default = _default; \ No newline at end of file diff --git a/client/build/components/SpaceAround/index.js b/client/build/components/SpaceAround/index.js new file mode 100644 index 00000000..bf6a6332 --- /dev/null +++ b/client/build/components/SpaceAround/index.js @@ -0,0 +1,59 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = void 0; + +var _react = _interopRequireDefault(require("react")); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } _setPrototypeOf(subClass.prototype, superClass && superClass.prototype); if (superClass) _setPrototypeOf(subClass, superClass); } + +function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); } + +function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } + +function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; } + +function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); } + +function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } + +function _getPrototypeOf(o) { _getPrototypeOf = Object.getPrototypeOf || function _getPrototypeOf(o) { return o.__proto__; }; return _getPrototypeOf(o); } + +var SpaceBetween = +/*#__PURE__*/ +function (_React$Component) { + function SpaceBetween() { + _classCallCheck(this, SpaceBetween); + + return _possibleConstructorReturn(this, _getPrototypeOf(SpaceBetween).apply(this, arguments)); + } + + _createClass(SpaceBetween, [{ + key: "shouldComponentUpdate", + value: function shouldComponentUpdate() { + return false; + } + }, { + key: "render", + value: function render() { + return _react.default.createElement("div", { + className: 'space-around' + }, this.props.children); + } + }]); + + _inherits(SpaceBetween, _React$Component); + + return SpaceBetween; +}(_react.default.Component); + +var _default = SpaceBetween; +exports.default = _default; \ No newline at end of file diff --git a/client/build/containers/ChannelCreateForm/view.js b/client/build/containers/ChannelCreateForm/view.js index b1376829..37f32a35 100644 --- a/client/build/containers/ChannelCreateForm/view.js +++ b/client/build/containers/ChannelCreateForm/view.js @@ -7,6 +7,14 @@ exports.default = void 0; var _react = _interopRequireDefault(require("react")); +var _ChannelCreateNameInput = _interopRequireDefault(require("@components/ChannelCreateNameInput")); + +var _ChannelCreatePasswordInput = _interopRequireDefault(require("@components/ChannelCreatePasswordInput")); + +var _ButtonPrimary = _interopRequireDefault(require("@components/ButtonPrimary")); + +var _ErrorDisplay = _interopRequireDefault(require("@components/ErrorDisplay")); + var _ProgressBar = _interopRequireDefault(require("@components/ProgressBar")); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } @@ -114,63 +122,21 @@ function (_React$Component) { password = _this$props.password, status = _this$props.status; var formError = this.returnErrors(); - return _react.default.createElement("div", null, !status ? _react.default.createElement("form", { - id: "publish-channel-form" - }, _react.default.createElement("div", { - className: "row row--wide row--short" - }, _react.default.createElement("div", { - className: "column column--3 column--sml-10" - }, _react.default.createElement("label", { - className: "label", - htmlFor: "new-channel-name" - }, "Name:")), _react.default.createElement("div", { - className: "column column--6 column--sml-10" - }, _react.default.createElement("div", { - className: "input-text--primary flex-container--row flex-container--left-bottom span--relative" - }, _react.default.createElement("span", null, "@"), _react.default.createElement("input", { - type: "text", - name: "channel", - id: "new-channel-name", - className: "input-text", - placeholder: "exampleChannelName", + return _react.default.createElement("div", null, !status ? _react.default.createElement("div", null, _react.default.createElement(_ChannelCreateNameInput.default, { value: name.value, - onChange: this.handleNameInput - }), name.value && !name.error && _react.default.createElement("span", { - id: "input-success-channel-name", - className: "info-message--success span--absolute" - }, "\u2713"), name.error && _react.default.createElement("span", { - id: "input-success-channel-name", - className: "info-message--failure span--absolute" - }, "\u2716")))), _react.default.createElement("div", { - className: "row row--wide row--short" - }, _react.default.createElement("div", { - className: "column column--3 column--sml-10" - }, _react.default.createElement("label", { - className: "label", - htmlFor: "new-channel-password" - }, "Password:")), _react.default.createElement("div", { - className: "column column--6 column--sml-10" - }, _react.default.createElement("div", { - className: "input-text--primary" - }, _react.default.createElement("input", { - type: "password", - name: "password", - id: "new-channel-password", - className: "input-text", - placeholder: "", + error: name.error, + handleNameInput: this.handleNameInput + }), _react.default.createElement(_ChannelCreatePasswordInput.default, { value: password.value, - onChange: this.handlePasswordInput - })))), formError ? _react.default.createElement("p", { - className: "info-message--failure" - }, formError) : _react.default.createElement("p", { - className: "info-message" - }, "Choose a name and password for your channel"), _react.default.createElement("div", { - className: "row row--wide" - }, _react.default.createElement("button", { - className: "button--primary", - onClick: this.handleSubmit - }, "Create Channel"))) : _react.default.createElement("div", null, _react.default.createElement("p", { - className: "fine-print" + handlePasswordInput: this.handlePasswordInput + }), _react.default.createElement(_ErrorDisplay.default, { + errorMessage: formError, + defaultMessage: 'Choose a name and password for your channel' + }), _react.default.createElement(_ButtonPrimary.default, { + value: 'Create Channel', + onClickHandler: this.handleSubmit + })) : _react.default.createElement("div", null, _react.default.createElement("p", { + className: 'fine-print' }, status), _react.default.createElement(_ProgressBar.default, { size: 12 }))); diff --git a/client/build/containers/ChannelLoginForm/view.js b/client/build/containers/ChannelLoginForm/view.js index d18792b7..051f0d04 100644 --- a/client/build/containers/ChannelLoginForm/view.js +++ b/client/build/containers/ChannelLoginForm/view.js @@ -11,9 +11,11 @@ var _request = _interopRequireDefault(require("../../utils/request")); var _ErrorDisplay = _interopRequireDefault(require("@components/ErrorDisplay")); -var _PublishDetailsRow = _interopRequireDefault(require("@components/PublishDetailsRow")); +var _ChannelLoginNameInput = _interopRequireDefault(require("@components/ChannelLoginNameInput")); -var _Label = _interopRequireDefault(require("@components/Label")); +var _ChannelLoginPasswordInput = _interopRequireDefault(require("@components/ChannelLoginPasswordInput")); + +var _ButtonPrimary = _interopRequireDefault(require("@components/ButtonPrimary")); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } @@ -37,48 +39,6 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.getPrototypeOf || functio function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } -var ChannelLoginNameInput = function ChannelLoginNameInput(_ref) { - var channelName = _ref.channelName, - handleInput = _ref.handleInput; - return _react.default.createElement(_PublishDetailsRow.default, { - label: _react.default.createElement(_Label.default, { - value: 'Name:' - }), - content: _react.default.createElement("div", { - className: "input-area--primary" - }, _react.default.createElement("span", null, "@"), _react.default.createElement("input", { - type: "text", - id: "channel-login-name-input", - className: "input-text", - name: "name", - placeholder: "Your Channel Name", - value: channelName, - onChange: handleInput - })) - }); -}; - -var ChannelLoginPasswordInput = function ChannelLoginPasswordInput(_ref2) { - var channelPassword = _ref2.channelPassword, - handleInput = _ref2.handleInput; - return _react.default.createElement(_PublishDetailsRow.default, { - label: _react.default.createElement(_Label.default, { - value: 'Password:' - }), - content: _react.default.createElement("div", { - className: "input-area--primary" - }, _react.default.createElement("input", { - type: "password", - id: "channel-login-password-input", - name: "password", - className: "input-text", - placeholder: "", - value: channelPassword, - onChange: handleInput - })) - }); -}; - var ChannelLoginForm = /*#__PURE__*/ function (_React$Component) { @@ -122,12 +82,12 @@ function (_React$Component) { }), credentials: 'include' }; - (0, _request.default)('login', params).then(function (_ref3) { - var success = _ref3.success, - channelName = _ref3.channelName, - shortChannelId = _ref3.shortChannelId, - channelClaimId = _ref3.channelClaimId, - message = _ref3.message; + (0, _request.default)('login', params).then(function (_ref) { + var success = _ref.success, + channelName = _ref.channelName, + shortChannelId = _ref.shortChannelId, + channelClaimId = _ref.channelClaimId, + message = _ref.message; if (success) { _this2.props.onChannelLogin(channelName, shortChannelId, channelClaimId); @@ -153,19 +113,19 @@ function (_React$Component) { }, { key: "render", value: function render() { - return _react.default.createElement("div", null, _react.default.createElement(ChannelLoginNameInput, { + return _react.default.createElement("div", null, _react.default.createElement(_ChannelLoginNameInput.default, { channelName: this.state.channelName, handleInput: this.handleInput - }), _react.default.createElement(ChannelLoginPasswordInput, { + }), _react.default.createElement(_ChannelLoginPasswordInput.default, { channelPassword: this.state.channelPassword, handleInput: this.handleInput }), _react.default.createElement(_ErrorDisplay.default, { errorMessage: this.state.error, defaultMessage: 'Enter the name and password for your channel' - }), _react.default.createElement("button", { - className: "button--primary", - onClick: this.loginToChannel - }, "Authenticate")); + }), _react.default.createElement(_ButtonPrimary.default, { + value: 'Authenticate', + onClickHandler: this.loginToChannel + })); } }]); diff --git a/client/build/containers/PublishDetails/view.js b/client/build/containers/PublishDetails/view.js index 8ac33df7..b905e97b 100644 --- a/client/build/containers/PublishDetails/view.js +++ b/client/build/containers/PublishDetails/view.js @@ -19,6 +19,12 @@ var _ChannelSelect = _interopRequireDefault(require("@containers/ChannelSelect") var _Row = _interopRequireDefault(require("@components/Row")); +var _ButtonPrimaryJumbo = _interopRequireDefault(require("@components/ButtonPrimaryJumbo")); + +var _ButtonTertiary = _interopRequireDefault(require("@components/ButtonTertiary")); + +var _SpaceAround = _interopRequireDefault(require("@components/SpaceAround")); + function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } @@ -60,14 +66,13 @@ function (_React$Component) { }, { key: "render", value: function render() { - return _react.default.createElement("div", null, _react.default.createElement(_Row.default, null, _react.default.createElement(_PublishUrlInput.default, null)), _react.default.createElement(_Row.default, null, _react.default.createElement(_ChannelSelect.default, null)), this.props.file.type === 'video/mp4' && _react.default.createElement(_Row.default, null, _react.default.createElement(_PublishThumbnailInput.default, null)), _react.default.createElement(_Row.default, null, _react.default.createElement(_PublishMetadataInputs.default, null)), _react.default.createElement(_Row.default, null, _react.default.createElement("button", { - id: "publish-submit", - className: "button--primary button--large", - onClick: this.onPublishSubmit - }, "Publish")), _react.default.createElement(_Row.default, null, _react.default.createElement("button", { - className: "button--cancel", - onClick: this.props.clearFile - }, "Cancel")), _react.default.createElement(_Row.default, null, _react.default.createElement("p", { + return _react.default.createElement("div", null, _react.default.createElement(_Row.default, null, _react.default.createElement(_PublishUrlInput.default, null)), _react.default.createElement(_Row.default, null, _react.default.createElement(_ChannelSelect.default, null)), this.props.file.type === 'video/mp4' && _react.default.createElement(_Row.default, null, _react.default.createElement(_PublishThumbnailInput.default, null)), _react.default.createElement(_Row.default, null, _react.default.createElement(_PublishMetadataInputs.default, null)), _react.default.createElement(_Row.default, null, _react.default.createElement(_ButtonPrimaryJumbo.default, { + value: 'Publish', + onClickHandler: this.onPublishSubmit + })), _react.default.createElement(_Row.default, null, _react.default.createElement(_SpaceAround.default, null, _react.default.createElement(_ButtonTertiary.default, { + value: 'Cancel', + onClickHandler: this.props.clearFile + }))), _react.default.createElement(_Row.default, null, _react.default.createElement("p", { className: "fine-print" }, "By clicking 'Publish', you affirm that you have the rights to publish this content to the LBRY network, and that you understand the properties of publishing it to a decentralized, user-controlled network. ", _react.default.createElement("a", { className: "link--primary", diff --git a/client/build/containers/PublishMetadataInputs/view.js b/client/build/containers/PublishMetadataInputs/view.js index 8b592496..7ab45513 100644 --- a/client/build/containers/PublishMetadataInputs/view.js +++ b/client/build/containers/PublishMetadataInputs/view.js @@ -13,6 +13,8 @@ var _PublishLicenseInput = _interopRequireDefault(require("@components/PublishLi var _PublishNsfwInput = _interopRequireDefault(require("@components/PublishNsfwInput")); +var _ButtonSecondary = _interopRequireDefault(require("@components/ButtonSecondary")); + function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } @@ -79,10 +81,10 @@ function (_React$Component) { }), _react.default.createElement(_PublishNsfwInput.default, { nsfw: this.props.nsfw, handleInput: this.handleInput - })), _react.default.createElement("button", { - className: "button--secondary", - onClick: this.toggleShowInputs - }, this.props.showMetadataInputs ? 'less' : 'more')); + })), _react.default.createElement(_ButtonSecondary.default, { + value: this.props.showMetadataInputs ? 'less' : 'more', + onClickHandler: this.toggleShowInputs + })); } }]); diff --git a/client/scss/_button.scss b/client/scss/_button.scss deleted file mode 100644 index 2d458d7a..00000000 --- a/client/scss/_button.scss +++ /dev/null @@ -1,60 +0,0 @@ -button { - cursor: pointer; -} - -.button--primary, .button--primary:focus { - border: 1px solid black; - padding: 0.5em; - margin: 0.5em 0.3em 0.5em 0.3em; - color: black; - background-color: white; - outline: 0px; -} - -.button--primary:hover { - border: 1px solid #4156C5; - color: white; - background-color: #4156C5; -} - -.button--primary:active{ - border: 1px solid #ffffff; - color: #d0d0d0; - background-color: #ffffff; -} - -.button--secondary, .button--secondary:focus { - border: 0px; - border-bottom: 1px solid black; - padding: 0.5em; - margin: 0.5em 0.3em 0.5em 0.3em; - color: black; - background-color: white; - outline: 0px; -} - -.button--secondary:hover { - border-bottom: 1px solid #9b9b9b; - color: #4156C5; -} - -.button--secondary:active { - color: #ffffff;; -} - -.button--large{ - margin: 0px; - width: calc(100% - 2px); - padding: 2rem; - font-size: x-large; -} - -.button--cancel{ - border: 0px; - background-color: white; - color: #9b9b9b; -} - -.button--wide { - width: 100%; -} diff --git a/client/scss/all.scss b/client/scss/all.scss index 4089a455..0679395c 100644 --- a/client/scss/all.scss +++ b/client/scss/all.scss @@ -10,7 +10,6 @@ @import '_link'; @import '_info-message'; @import '_input'; -@import '_button'; @import '_span'; @import '_video'; @import '_asset'; @@ -21,10 +20,15 @@ @import 'components/_page-content'; @import 'components/_horizontal-split'; @import 'components/_space-between'; +@import 'components/_space-around'; @import 'components/_column'; @import 'components/_row'; @import 'components/_nav-bar'; @import 'components/_publish-details-row'; +@import 'components/_button'; +@import 'components/_button-primary'; +@import 'components/_button-secondary'; +@import 'components/_button-tertiary'; @import 'containers/_dropzone'; @import 'containers/_publish-url-input'; @import 'containers/_site-description'; diff --git a/client/scss/components/_button-primary.scss b/client/scss/components/_button-primary.scss new file mode 100644 index 00000000..c3fbec97 --- /dev/null +++ b/client/scss/components/_button-primary.scss @@ -0,0 +1,33 @@ + +.button-primary, .button-primary:focus, .button-primary:active { + border: $button-border-width $button-border-strength $primary-color; + padding: 0.5em; + margin: 0.5em 0.3em 0.5em 0.3em; + color: $primary-color; + background-color: $background-color; + outline: 0; +} + +.button-primary:focus { + border-color: $secondary-color; + background-color: $tertiary-color; +} + + +.button-primary:hover { + border-color: $interactive-color; + color: $background-color; + background-color: $interactive-color; +} + +.button-primary:active{ + border-color: $background-color; + color: $secondary-color; + background-color: $tertiary-color; +} + +.button-primary--jumbo, .button-primary--jumbo:focus, .button-primary--jumbo:active { + width: $button-max-width; + padding: $secondary-padding; + font-size: x-large; +} diff --git a/client/scss/components/_button-secondary.scss b/client/scss/components/_button-secondary.scss new file mode 100644 index 00000000..9d13fe54 --- /dev/null +++ b/client/scss/components/_button-secondary.scss @@ -0,0 +1,22 @@ +.button--secondary, .button--secondary:focus { + border: 0; + border-bottom: 1px solid $primary-color; + padding: 0.5em; + margin: 0.5em 0.3em 0.5em 0.3em; + color: $primary-color; + background-color: $background-color; + outline: 0; +} + +.button--secondary:focus{ + border-bottom: 1px solid $secondary-color; + background-color: $tertiary-color; +} + +.button--secondary:hover { + color: $interactive-color; +} + +.button--secondary:active { + color: $background-color; +} diff --git a/client/scss/components/_button-tertiary.scss b/client/scss/components/_button-tertiary.scss new file mode 100644 index 00000000..63bb23c3 --- /dev/null +++ b/client/scss/components/_button-tertiary.scss @@ -0,0 +1,14 @@ +.button--tertiary, .button--tertiary:focus, .button--tertiary:active { + border: 0; + color: $secondary-color; + background-color: $background-color; +} + +.button--tertiary:hover { + color: $primary-color; +} + +.button--tertiary:active, .button--tertiary:focus { + color: $secondary-color; + background-color: $tertiary-color; +} diff --git a/client/scss/components/_button.scss b/client/scss/components/_button.scss new file mode 100644 index 00000000..64354857 --- /dev/null +++ b/client/scss/components/_button.scss @@ -0,0 +1,7 @@ +button { + cursor: pointer; +} + +$button-border-width: 1px; +$button-border-strength: solid; +$button-max-width: calc(100% - 2px); diff --git a/client/scss/components/_space-around.scss b/client/scss/components/_space-around.scss new file mode 100644 index 00000000..5c4965da --- /dev/null +++ b/client/scss/components/_space-around.scss @@ -0,0 +1,5 @@ +.space-around { + display: flex; + justify-content: space-around; + align-items: center; +} diff --git a/client/src/components/ButtonPrimary/index.jsx b/client/src/components/ButtonPrimary/index.jsx new file mode 100644 index 00000000..1011f902 --- /dev/null +++ b/client/src/components/ButtonPrimary/index.jsx @@ -0,0 +1,14 @@ +import React from 'react'; + +const ButtonPrimary = ({ value, onClickHandler }) => { + return ( + + ); +}; + +export default ButtonPrimary; diff --git a/client/src/components/ButtonPrimaryJumbo/index.jsx b/client/src/components/ButtonPrimaryJumbo/index.jsx new file mode 100644 index 00000000..d1631c15 --- /dev/null +++ b/client/src/components/ButtonPrimaryJumbo/index.jsx @@ -0,0 +1,14 @@ +import React from 'react'; + +const ButtonPrimaryJumbo = ({ value, onClickHandler }) => { + return ( + + ); +}; + +export default ButtonPrimaryJumbo; diff --git a/client/src/components/ButtonSecondary/index.jsx b/client/src/components/ButtonSecondary/index.jsx new file mode 100644 index 00000000..96627829 --- /dev/null +++ b/client/src/components/ButtonSecondary/index.jsx @@ -0,0 +1,14 @@ +import React from 'react'; + +const ButtonPrimary = ({ value, onClickHandler }) => { + return ( + + ); +}; + +export default ButtonPrimary; diff --git a/client/src/components/ButtonTertiary/index.jsx b/client/src/components/ButtonTertiary/index.jsx new file mode 100644 index 00000000..a1930a05 --- /dev/null +++ b/client/src/components/ButtonTertiary/index.jsx @@ -0,0 +1,14 @@ +import React from 'react'; + +const ButtonTertiary = ({ value, onClickHandler }) => { + return ( + + ); +}; + +export default ButtonTertiary; diff --git a/client/src/components/ChannelCreateNameInput/index.jsx b/client/src/components/ChannelCreateNameInput/index.jsx new file mode 100644 index 00000000..4001d011 --- /dev/null +++ b/client/src/components/ChannelCreateNameInput/index.jsx @@ -0,0 +1,38 @@ +import React from 'react'; +import Label from '@components/Label'; +import PublishDetailsRow from '@components/PublishDetailsRow'; + +const ChannelCreateNameInput = ({ value, error, handleNameInput }) => { + return ( + + } + content={ +
+ @ + + { (value && !error) && ( + + {'\u2713'} + + )} + { error && ( + + {'\u2716'} + + )} +
+ } + /> + ); +}; + +export default ChannelCreateNameInput; diff --git a/client/src/components/ChannelCreatePasswordInput/index.jsx b/client/src/components/ChannelCreatePasswordInput/index.jsx new file mode 100644 index 00000000..eaeec18b --- /dev/null +++ b/client/src/components/ChannelCreatePasswordInput/index.jsx @@ -0,0 +1,26 @@ +import React from 'react'; +import Label from '@components/Label'; +import PublishDetailsRow from '@components/PublishDetailsRow'; + +const ChannelCreatePasswordInput = ({ value, handlePasswordInput }) => { + return ( + + } + content={ +
+ +
+ } + /> + ); +}; + +export default ChannelCreatePasswordInput; diff --git a/client/src/components/ChannelLoginNameInput/index.jsx b/client/src/components/ChannelLoginNameInput/index.jsx new file mode 100644 index 00000000..f42fa207 --- /dev/null +++ b/client/src/components/ChannelLoginNameInput/index.jsx @@ -0,0 +1,29 @@ +import React from 'react'; +import PublishDetailsRow from '@components/PublishDetailsRow'; +import Label from '@components/Label'; + +const ChannelLoginNameInput = ({ channelName, handleInput }) => { + return ( + + } + content={ +
+ @ + +
+ } + /> + ); +}; + +export default ChannelLoginNameInput; diff --git a/client/src/components/ChannelLoginPasswordInput/index.jsx b/client/src/components/ChannelLoginPasswordInput/index.jsx new file mode 100644 index 00000000..76f46898 --- /dev/null +++ b/client/src/components/ChannelLoginPasswordInput/index.jsx @@ -0,0 +1,28 @@ +import React from 'react'; +import PublishDetailsRow from '@components/PublishDetailsRow'; +import Label from '@components/Label'; + +const ChannelLoginPasswordInput = ({ channelPassword, handleInput }) => { + return ( + + } + content={ +
+ +
+ } + /> + ); +}; + +export default ChannelLoginPasswordInput; diff --git a/client/src/components/SpaceAround/index.jsx b/client/src/components/SpaceAround/index.jsx new file mode 100644 index 00000000..7cc46696 --- /dev/null +++ b/client/src/components/SpaceAround/index.jsx @@ -0,0 +1,16 @@ +import React from 'react'; + +class SpaceBetween extends React.Component { + shouldComponentUpdate () { + return false; + } + render () { + return ( +
+ {this.props.children} +
+ ); + } +} + +export default SpaceBetween; diff --git a/client/src/containers/ChannelCreateForm/view.jsx b/client/src/containers/ChannelCreateForm/view.jsx index c7ee6f66..b5d60556 100644 --- a/client/src/containers/ChannelCreateForm/view.jsx +++ b/client/src/containers/ChannelCreateForm/view.jsx @@ -1,4 +1,8 @@ import React from 'react'; +import ChannelCreateNameInput from '@components/ChannelCreateNameInput'; +import ChannelCreatePasswordInput from '@components/ChannelCreatePasswordInput'; +import ButtonPrimary from '@components/ButtonPrimary'; +import ErrorDisplay from '@components/ErrorDisplay'; import ProgressBar from '@components/ProgressBar'; class ChannelCreateForm extends React.Component { @@ -28,7 +32,7 @@ class ChannelCreateForm extends React.Component { } handlePasswordInput (event) { let value = this.cleansePasswordInput(event.target.value); - if (!value){ + if (!value) { this.props.updateChannelCreatePassword('error', 'Please enter a password'); } else { this.props.updateChannelCreatePassword('error', null); @@ -55,40 +59,28 @@ class ChannelCreateForm extends React.Component { return (
{ !status ? ( -
-
-
- -
-
- @ - - { (name.value && !name.error) && {'\u2713'} } - { name.error && {'\u2716'} } -
-
-
-
-
- -
-
- -
-
-
- {formError ? ( -

{formError}

- ) : ( -

Choose a name and password for your channel

- )} -
- -
-
+
+ + + + +
) : (
-

{status}

+

{status}

)} diff --git a/client/src/containers/ChannelLoginForm/view.jsx b/client/src/containers/ChannelLoginForm/view.jsx index 117b0ccd..003a32fe 100644 --- a/client/src/containers/ChannelLoginForm/view.jsx +++ b/client/src/containers/ChannelLoginForm/view.jsx @@ -1,55 +1,9 @@ import React from 'react'; import request from '../../utils/request'; import ErrorDisplay from '@components/ErrorDisplay'; -import PublishDetailsRow from '@components/PublishDetailsRow'; -import Label from '@components/Label'; - -const ChannelLoginNameInput = ({ channelName, handleInput }) => { - return ( - - } - content={ -
- @ - -
- } - /> - ); -}; - -const ChannelLoginPasswordInput = ({ channelPassword, handleInput }) => { - return ( - - } - content={ -
- -
- } - /> - ); -}; +import ChannelLoginNameInput from '@components/ChannelLoginNameInput'; +import ChannelLoginPasswordInput from '@components/ChannelLoginPasswordInput'; +import ButtonPrimary from '@components/ButtonPrimary'; class ChannelLoginForm extends React.Component { constructor (props) { @@ -108,7 +62,10 @@ class ChannelLoginForm extends React.Component { errorMessage={this.state.error} defaultMessage={'Enter the name and password for your channel'} /> - +
); } diff --git a/client/src/containers/PublishDetails/view.jsx b/client/src/containers/PublishDetails/view.jsx index 03254a0a..a209b15e 100644 --- a/client/src/containers/PublishDetails/view.jsx +++ b/client/src/containers/PublishDetails/view.jsx @@ -5,6 +5,9 @@ import PublishThumbnailInput from '@containers/PublishThumbnailInput'; import PublishMetadataInputs from '@containers/PublishMetadataInputs'; import ChannelSelect from '@containers/ChannelSelect'; import Row from '@components/Row'; +import ButtonPrimaryJumbo from '@components/ButtonPrimaryJumbo'; +import ButtonTertiary from '@components/ButtonTertiary'; +import SpaceAround from '@components/SpaceAround'; class PublishDetails extends React.Component { constructor (props) { @@ -36,23 +39,24 @@ class PublishDetails extends React.Component { - + - + + +

By clicking 'Publish', you affirm that you have the rights to publish this content to the LBRY network, and that you understand the properties of publishing it to a decentralized, user-controlled network. Read more.

 - ); } diff --git a/client/src/containers/PublishMetadataInputs/view.jsx b/client/src/containers/PublishMetadataInputs/view.jsx index 55ce296b..10d8a793 100644 --- a/client/src/containers/PublishMetadataInputs/view.jsx +++ b/client/src/containers/PublishMetadataInputs/view.jsx @@ -2,6 +2,7 @@ import React from 'react'; import PublishDescriptionInput from '@components/PublishDescriptionInput'; import PublishLicenseInput from '@components/PublishLicenseInput'; import PublishNsfwInput from '@components/PublishNsfwInput'; +import ButtonSecondary from '@components/ButtonSecondary'; class PublishMetadataInputs extends React.Component { constructor (props) { @@ -33,23 +34,19 @@ class PublishMetadataInputs extends React.Component { description={this.props.description} handleInput={this.handleInput} /> - - )} - + ); }