From b47fa412242f3b613ee40cb8f2c47d5689c503b3 Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Fri, 6 Dec 2019 15:48:57 +0300 Subject: [PATCH 01/22] Web: Components: added styles to toast, removed ReactToastify styles --- web/ASC.Web.Components/.storybook/styles.scss | 3 +- .../src/components/toast/index.js | 64 ++++++++++++++++++- 2 files changed, 64 insertions(+), 3 deletions(-) diff --git a/web/ASC.Web.Components/.storybook/styles.scss b/web/ASC.Web.Components/.storybook/styles.scss index b64ee8c974..ad418be46c 100644 --- a/web/ASC.Web.Components/.storybook/styles.scss +++ b/web/ASC.Web.Components/.storybook/styles.scss @@ -4,5 +4,4 @@ It can also be an scss file, however, you have to go to `webpack.config.js` file and enable the options in there */ -@import '../node_modules/bootstrap/dist/css/bootstrap.css'; -@import '../node_modules/react-toastify/dist/ReactToastify.min.css'; \ No newline at end of file +@import '../node_modules/bootstrap/dist/css/bootstrap.css'; \ No newline at end of file diff --git a/web/ASC.Web.Components/src/components/toast/index.js b/web/ASC.Web.Components/src/components/toast/index.js index 86858422ed..ebd5280159 100644 --- a/web/ASC.Web.Components/src/components/toast/index.js +++ b/web/ASC.Web.Components/src/components/toast/index.js @@ -9,7 +9,60 @@ const Fade = cssTransition({ }); const StyledToastContainer = styled(ToastContainer)` -width: 365px !important; + width: 365px !important; + z-index: 9999; + -webkit-transform: translateZ(9999px); + position: fixed; + padding: 4px; + width: 320px; + box-sizing: border-box; + color: #fff; + top: 1em; + right: 1em; + + @media only screen and (max-width: 480px) { + width: 100vw; + padding: 0; + left: 0; + margin: 0; +} + +.Toastify__progress-bar--animated { + animation: Toastify__trackProgress linear 1 forwards; +} +.Toastify__toast-body { + margin: auto 0; + -ms-flex: 1; + flex: 1; +} + +.Toastify__close-button { + color: #fff; + font-weight: 700; + font-size: 14px; + background: transparent; + outline: none; + border: none; + padding: 0; + cursor: pointer; + opacity: 0.7; + transition: 0.3s ease; + -ms-flex-item-align: start; + align-self: flex-start; +} +.Toastify__close-button:focus, +.Toastify__close-button:hover { + opacity: 1; +} + +@keyframes Toastify__trackProgress { + 0% { + transform: scaleX(1); + } + to { + transform: scaleX(0); + } +} .Toastify__toast--success{ background-color: #cae796; @@ -97,6 +150,15 @@ width: 365px !important; /* .Toastily__toast or & > div (less productive) */ .Toastify__toast { + box-sizing: border-box; + margin-bottom: 1rem; + box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.1), 0 2px 15px 0 rgba(0, 0, 0, 0.05); + display: flex; + justify-content: space-between; + max-height: 800px; + overflow: hidden; + cursor: pointer; + border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; From 1478d9f74ce87d639e4f900b419772883a9c0e77 Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Fri, 6 Dec 2019 15:49:26 +0300 Subject: [PATCH 02/22] Web: Common: removed ReactToastify styles --- web/ASC.Web.Common/.storybook/styles.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/web/ASC.Web.Common/.storybook/styles.scss b/web/ASC.Web.Common/.storybook/styles.scss index b64ee8c974..ad418be46c 100644 --- a/web/ASC.Web.Common/.storybook/styles.scss +++ b/web/ASC.Web.Common/.storybook/styles.scss @@ -4,5 +4,4 @@ It can also be an scss file, however, you have to go to `webpack.config.js` file and enable the options in there */ -@import '../node_modules/bootstrap/dist/css/bootstrap.css'; -@import '../node_modules/react-toastify/dist/ReactToastify.min.css'; \ No newline at end of file +@import '../node_modules/bootstrap/dist/css/bootstrap.css'; \ No newline at end of file From 8c289784a864bdfcdc3ce2b727ec7cd52c7f3c79 Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Fri, 6 Dec 2019 15:49:45 +0300 Subject: [PATCH 03/22] Web: People: removed ReactToastify styles --- products/ASC.People/Client/src/custom.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/products/ASC.People/Client/src/custom.scss b/products/ASC.People/Client/src/custom.scss index edf2b1bfe4..7b3c76b34b 100644 --- a/products/ASC.People/Client/src/custom.scss +++ b/products/ASC.People/Client/src/custom.scss @@ -3,7 +3,6 @@ $font-family-base: 'Open Sans', sans-serif; // Import Bootstrap and its default variables @import '~bootstrap/scss/bootstrap.scss'; -@import '~react-toastify/dist/ReactToastify.min.css'; html, body { height: 100%; From 8e0cf2da5e35c3b574e2fcf1152fbebd749a3aef Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Fri, 6 Dec 2019 15:50:07 +0300 Subject: [PATCH 04/22] Web: Client: removed ReactToastify styles --- web/ASC.Web.Client/src/custom.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/web/ASC.Web.Client/src/custom.scss b/web/ASC.Web.Client/src/custom.scss index 8816b6a54a..f45c779c2c 100644 --- a/web/ASC.Web.Client/src/custom.scss +++ b/web/ASC.Web.Client/src/custom.scss @@ -3,7 +3,6 @@ $font-family-base: 'Open Sans', sans-serif; // Import Bootstrap and its default variables @import '~bootstrap/scss/bootstrap.scss'; -@import '~react-toastify/dist/ReactToastify.min.css'; html, body { height: 100%; From 4b3a206cdd18c8da38c0f831789ef479465720f0 Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Fri, 6 Dec 2019 15:50:27 +0300 Subject: [PATCH 05/22] web: common: bump version --- web/ASC.Web.Common/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/ASC.Web.Common/package.json b/web/ASC.Web.Common/package.json index d4bc400ea5..97567d30de 100644 --- a/web/ASC.Web.Common/package.json +++ b/web/ASC.Web.Common/package.json @@ -1,6 +1,6 @@ { "name": "asc-web-common", - "version": "1.0.11", + "version": "1.0.12", "description": "Ascensio System SIA common components and solutions library", "license": "AGPL-3.0", "files": [ From c2b3d22d29b93cfb0e5dac17e6df01e5d8963eee Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Fri, 6 Dec 2019 15:50:41 +0300 Subject: [PATCH 06/22] web: components: bump version --- web/ASC.Web.Components/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/ASC.Web.Components/package.json b/web/ASC.Web.Components/package.json index 7b0be52c91..64f26f67e4 100644 --- a/web/ASC.Web.Components/package.json +++ b/web/ASC.Web.Components/package.json @@ -1,6 +1,6 @@ { "name": "asc-web-components", - "version": "1.0.215", + "version": "1.0.216", "description": "Ascensio System SIA component library", "license": "AGPL-3.0", "main": "dist/asc-web-components.js", From cb6377163f95ca35f5f96298798cf7af8b9637a2 Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Sat, 7 Dec 2019 10:43:14 +0300 Subject: [PATCH 07/22] Web: Components: fixed toastr styles --- web/ASC.Web.Components/.storybook/styles.scss | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/web/ASC.Web.Components/.storybook/styles.scss b/web/ASC.Web.Components/.storybook/styles.scss index ad418be46c..d673321a7d 100644 --- a/web/ASC.Web.Components/.storybook/styles.scss +++ b/web/ASC.Web.Components/.storybook/styles.scss @@ -4,4 +4,10 @@ It can also be an scss file, however, you have to go to `webpack.config.js` file and enable the options in there */ -@import '../node_modules/bootstrap/dist/css/bootstrap.css'; \ No newline at end of file +@import '../node_modules/bootstrap/dist/css/bootstrap.css'; + +.Toastify__toast-container--top-center { + top: 1em; + left: 50%; + margin-left: -160px; +} \ No newline at end of file From 8af337975ff60f328574709ea480b416f1156ed1 Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Sat, 7 Dec 2019 14:24:45 +0300 Subject: [PATCH 08/22] Web: Components: added all components to one tab in the storybook --- .../src/components/all/all.buttons.stories.js | 500 ++++++++++++++++++ 1 file changed, 500 insertions(+) create mode 100644 web/ASC.Web.Components/src/components/all/all.buttons.stories.js diff --git a/web/ASC.Web.Components/src/components/all/all.buttons.stories.js b/web/ASC.Web.Components/src/components/all/all.buttons.stories.js new file mode 100644 index 0000000000..00fd88f501 --- /dev/null +++ b/web/ASC.Web.Components/src/components/all/all.buttons.stories.js @@ -0,0 +1,500 @@ +import React from "react"; +import { storiesOf } from "@storybook/react"; +import { BooleanValue, StringValue } from "react-values"; +import Section from "../../../.storybook/decorators/section"; +import Avatar from "../avatar"; +import Button from "../button"; +import HelpButton from "../help-button"; +import IconButton from "../icon-button"; +import SocialButton from "../social-button"; +import ToggleButton from "../toggle-button"; +import Calendar from "../calendar"; +import Checkbox from "../checkbox"; +import ComboBox from "../combobox"; +import InputBlock from "../input-block"; +import RadioButtonGroup from "../radio-button-group"; +import TextInput from "../text-input"; +import Textarea from "../textarea"; +import ContextMenuButton from "../context-menu-button"; +import DatePicker from "../date-picker"; +import FieldContainer from "../field-container"; +import Header from "../header"; +import Heading from "../heading"; +import Link from "../link"; +import Loader from "../loader"; +import Row from "../row"; +import Scrollbar from "../scrollbar"; +import TabContainer from "../tabs-container"; +import Text from "../text"; +import Toast from "../toast"; +import toastr from "../toast/toastr"; +import ToggleContent from "../toggle-content"; +import Tooltip from "../tooltip"; +import { Icons } from "../icons"; + +const array_items = [ + { + key: "0", + title: "Tab 1", + content:
Tab 1 content
+ }, + { + key: "1", + title: "Tab 2", + content:
Tab 2 content
+ }, + { + key: "2", + title: "Tab 3", + content:
Tab 3 content
+ } +]; + +const options = [ + { + key: 0, + icon: "CatalogEmployeeIcon", // optional item + label: "Option 1", + disabled: false, // optional item + onClick: () => {} // optional item + }, + { + key: 1, + icon: "CatalogEmployeeIcon", // optional item + label: "Option 2", + disabled: false, // optional item + onClick: () => {} // optional item + }, + { + key: 2, + icon: "CatalogEmployeeIcon", // optional item + label: "Option 3", + disabled: true, // optional item + onClick: () => {} // optional item + }, + { + key: 3, + icon: "CatalogEmployeeIcon", // optional item + label: "Option 4", + disabled: false, // optional item + onClick: () => {} // optional item + } +]; + +const arrayUsers = [ + { key: "user_1", name: "Bob", email: "Bob@gmail.com", position: "developer" }, + { + key: "user_2", + name: "John", + email: "John@gmail.com", + position: "developer" + }, + { + key: "user_3", + name: "Kevin", + email: "Kevin@gmail.com", + position: "developer" + }, + { + key: "user_4", + name: "Alex", + email: "Alex@gmail.com", + position: "developer" + }, + { + key: "user_5", + name: "Tomas", + email: "Tomas@gmail.com", + position: "developer" + } +]; + +const element = "Icon"; + +const elementAvatar = ( + +); +const elementIcon = ; +const elementComboBox = ( + console.log(option)} + selectedOption={{ + key: 0, + icon: "ItemActiveIcon", + label: "" + }} + scaled={false} + size="content" + isDisabled={false} + /> +); + +const checkedProps = { checked: false }; +const getElementProps = element => + element === "Avatar" + ? { element: elementAvatar } + : element === "Icon" + ? { element: elementIcon } + : element === "ComboBox" + ? { element: elementComboBox } + : {}; + +const elementProps = getElementProps(element); + +storiesOf("Components|All", module) + .addParameters({ options: { showAddonPanel: false } }) + .add("all", () => ( +
+
+
+
+ + Some text + +
+
+
+ Some text +
+
+
+ + Some text + +
+
+ + Bold page link + +
+
+ + Bob + +
+ + John + +
+ + Kevin + +
+ + Alex + +
+ + Tomas + + + dataTip ? ( +
+ + {arrayUsers[dataTip].name} + + + {arrayUsers[dataTip].email} + + {arrayUsers[dataTip].position} +
+ ) : null + } + /> +
+
+
+
+ + {({ value, toggle }) => ( + toggle(e.target.checked)} + /> + )} + +
+
+ + {({ value, toggle }) => ( + toggle(e.target.checked)} + isChecked={value} + /> + )} + +
+
+ +
+
+ + {({ value, set }) => ( + set(e.target.value)} /> + )} + +
+ +
+ + {({ value, set }) => ( + alert(value)} + onChange={e => set(e.target.value)} + value={value} + > + + + )} + +
+ +
+ { + console.log("Selected date", date); + }} + selectedDate={new Date()} + minDate={new Date("1970/01/01")} + maxDate={new Date(new Date().getFullYear() + 1 + "/01/01")} + isDisabled={false} + isReadOnly={false} + hasError={false} + isOpen={false} + themeColor="#ED7309" + locale="en" + /> +
+ +
+ + {({ value, set }) => ( +