From 4611ecf0928196aabfdb20b9dbeb89e5977ac293 Mon Sep 17 00:00:00 2001 From: Yarin Dekel Date: Tue, 21 Aug 2018 12:12:47 +0300 Subject: bugRelease1 after changes Issue-ID: SDC-1655 Change-Id: I0e049a77751c9df930d9d70bbe7ea6697df7a573 Signed-off-by: Yarin Dekel --- .../src/main/frontend/resources/scss/_common.scss | 3 +- .../resources/scss/common/_customVariables.scss | 82 +------ .../frontend/resources/scss/common/_utils.scss | 5 + .../resources/scss/components/_layout.scss | 8 + .../scss/components/_navigationSideBar.scss | 6 +- .../frontend/resources/scss/components/_tree.scss | 2 +- .../scss/components/_versionController.scss | 8 +- .../frontend/resources/scss/features/_catalog.scss | 2 +- .../frontend/resources/scss/features/_general.scss | 10 +- .../resources/scss/features/_inputOutput.scss | 6 +- .../resources/scss/features/_overview.scss | 58 +++-- .../src/features/version/general/GeneralView.js | 5 +- .../version/inputOutput/InputOutputView.jsx | 10 +- .../versionController/VersionControllerView.jsx | 2 +- .../VersionControllerView_snapshot-test.js.snap | 7 +- .../versionController/views/ActionButtons.js | 13 +- .../versionController/views/VersionsContainer.js | 1 + .../src/features/workflow/create/CreateWorkflow.js | 7 +- .../workflow/create/CreateWorkflowView.jsx | 15 +- .../workflow/create/createWorkflowConstants.js | 5 + .../workflow/create/createWorkflowSelector.js | 4 +- .../features/workflow/overview/OverviewView.jsx | 53 ++-- .../OverviewView_snapshot-test.js.snap | 269 +++++++++++---------- .../workflow/overview/views/WorkflowDetails.jsx | 32 ++- .../src/features/workflow/workflowReducer.js | 12 +- .../src/features/workflow/workflowSelectors.js | 2 + .../src/main/frontend/src/i18n/languages.json | 7 +- .../src/shared/components/VersionInfo/index.js | 2 +- 28 files changed, 313 insertions(+), 323 deletions(-) (limited to 'workflow-designer-ui/src') diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/_common.scss b/workflow-designer-ui/src/main/frontend/resources/scss/_common.scss index cd5e6db5..edde536f 100644 --- a/workflow-designer-ui/src/main/frontend/resources/scss/_common.scss +++ b/workflow-designer-ui/src/main/frontend/resources/scss/_common.scss @@ -1,4 +1,5 @@ +@import '../../node_modules/sdc-ui/lib/style/scss/common/typography.scss'; @import '../../node_modules/sdc-ui/lib/style/scss/common/variables.scss'; -@import 'common/customVariables'; @import 'common/fonts'; @import 'common/utils'; +@import 'common/customVariables'; diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/common/_customVariables.scss b/workflow-designer-ui/src/main/frontend/resources/scss/common/_customVariables.scss index 9472fe68..1a532c88 100644 --- a/workflow-designer-ui/src/main/frontend/resources/scss/common/_customVariables.scss +++ b/workflow-designer-ui/src/main/frontend/resources/scss/common/_customVariables.scss @@ -1,90 +1,16 @@ $cursor-disabled: not-allowed !default; $cursor-pointer: pointer; -$heading-font-1: 28px; -$heading-font-2: 24px; -$heading-font-3: 20px; -$heading-font-4: 16px; -$heading-font-5: 14px; - -$body-font-1: 14px; -$body-font-2: 13px; -$body-font-3: 12px; -$body-font-4: 10px; - -@mixin regular-font() { - font-family: OpenSans-Regular, Arial, sans-serif; - font-style: normal; - font-weight: 400; -} - -@mixin italic-font() { - font-family: OpenSans-Italic, OpenSans-Regular, Arial, sans-serif; - font-style: italic; - font-weight: 400; -} - -@mixin semibold-font() { - font-family: OpenSans-Semibold, Arial, sans-serif; - font-style: normal; - font-weight: 600; -} - -@mixin body-1() { - @include regular-font; - font-size: $body-font-1; -} - -@mixin body-1-semibold() { - @include semibold-font; +@mixin body-1-emphasis() { + @include base-font-semibold; font-size: $body-font-1; } -@mixin body-2() { - @include regular-font; - font-size: $body-font-2; -} - -@mixin body-2-semibold() { - @include semibold-font; - font-size: $body-font-2; -} - -@mixin body-3() { - @include regular-font; - font-size: $body-font-3; -} - -@mixin body-4() { - @include regular-font; - font-size: $body-font-4; -} - -@mixin heading-1() { - @include regular-font; - font-size: $heading-font-1; -} - -@mixin heading-1-semibold() { - @include semibold-font; +@mixin heading-1-emphasis() { + @include base-font-semibold; font-size: $heading-font-1; } -@mixin heading-4() { - @include regular-font; - font-size: $heading-font-4; -} - -@mixin heading-4-semibold() { - @include semibold-font; - font-size: $heading-font-4; -} - -@mixin heading-5() { - @include regular-font; - font-size: $heading-font-5; -} - .flex { display: flex; flex: 1; diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/common/_utils.scss b/workflow-designer-ui/src/main/frontend/resources/scss/common/_utils.scss index 3cf90bc9..7a35b38c 100644 --- a/workflow-designer-ui/src/main/frontend/resources/scss/common/_utils.scss +++ b/workflow-designer-ui/src/main/frontend/resources/scss/common/_utils.scss @@ -74,6 +74,11 @@ $browserPrefixes: webkit moz o ms; @include prefix(box-shadow, $value, $box-shadow-radius-prefix); } +@mixin sticky($value) { + position: sticky; + top: $value; +} + @mixin text-shadow($value) { @include prefix(text-shadow, $value, $text-shadow-radius-prefix); } diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/components/_layout.scss b/workflow-designer-ui/src/main/frontend/resources/scss/components/_layout.scss index c0cc1091..6862d554 100644 --- a/workflow-designer-ui/src/main/frontend/resources/scss/components/_layout.scss +++ b/workflow-designer-ui/src/main/frontend/resources/scss/components/_layout.scss @@ -23,4 +23,12 @@ pointer-events: none; opacity: 0.4; } + + .selectable { + user-select: text; + } + + .separator { + border-left: 1px solid $silver; + } } diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/components/_navigationSideBar.scss b/workflow-designer-ui/src/main/frontend/resources/scss/components/_navigationSideBar.scss index 6cff0561..c830c028 100644 --- a/workflow-designer-ui/src/main/frontend/resources/scss/components/_navigationSideBar.scss +++ b/workflow-designer-ui/src/main/frontend/resources/scss/components/_navigationSideBar.scss @@ -16,7 +16,7 @@ flex-direction: column; background-color: $light-silver; .group-name { - @include heading-4-semibold; + @include heading-4-emphasis; @include ellipsis; display: block; padding: 24px 12px 13px 40px; @@ -45,13 +45,13 @@ @include ellipsis; white-space: normal; &.selected { - @include body-1-semibold; + @include body-1-emphasis; border-left: 4px solid $blue; padding-left: 18px; color: $blue; } &.bold-name { - @include body-1-semibold; + @include body-1-emphasis; } } } diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/components/_tree.scss b/workflow-designer-ui/src/main/frontend/resources/scss/components/_tree.scss index 6e1e9795..58f1f995 100644 --- a/workflow-designer-ui/src/main/frontend/resources/scss/components/_tree.scss +++ b/workflow-designer-ui/src/main/frontend/resources/scss/components/_tree.scss @@ -22,7 +22,7 @@ text { text-anchor: end; - @include body-2-semibold; + @include body-2-emphasis; fill: $blue; } diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/components/_versionController.scss b/workflow-designer-ui/src/main/frontend/resources/scss/components/_versionController.scss index 45985a65..4fa8d841 100644 --- a/workflow-designer-ui/src/main/frontend/resources/scss/components/_versionController.scss +++ b/workflow-designer-ui/src/main/frontend/resources/scss/components/_versionController.scss @@ -7,10 +7,10 @@ .group-name-wrapper { width: 245px; .group-name { - @include heading-4-semibold; + @include heading-4-emphasis; @include ellipsis; display: block; - padding: 24px 12px 13px 40px; + padding: 24px 12px 13px 20px; background-color: $white; } } @@ -25,6 +25,7 @@ padding-left: 16px; padding-right: 100px; border-left: 1px solid #eaeaea; + height: 45px; .vc-separator { border-left: 1px solid $silver; @@ -33,12 +34,13 @@ .version-status-container { .version-selector-more-versions { + @include body-1-emphasis; color: $blue; cursor: pointer; } .version-selector { - margin-top: 0px; + margin-top: 0; padding-right: 10px; margin-right: 15px; margin-left: 10px; diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/features/_catalog.scss b/workflow-designer-ui/src/main/frontend/resources/scss/features/_catalog.scss index 76f3f658..ea5bba28 100644 --- a/workflow-designer-ui/src/main/frontend/resources/scss/features/_catalog.scss +++ b/workflow-designer-ui/src/main/frontend/resources/scss/features/_catalog.scss @@ -80,7 +80,7 @@ } &__label { text-transform: uppercase; - @include body-1-semibold; + @include body-1-emphasis; } &:hover { color: $blue; diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/features/_general.scss b/workflow-designer-ui/src/main/frontend/resources/scss/features/_general.scss index 6e8b3522..f11c2c0a 100644 --- a/workflow-designer-ui/src/main/frontend/resources/scss/features/_general.scss +++ b/workflow-designer-ui/src/main/frontend/resources/scss/features/_general.scss @@ -1,19 +1,19 @@ .general-page { @include body-1; - padding: 0 131px 20px 100px; + padding: 35px 90px 0 50px; background-color: #fff; .general-page-title { height: 110px; line-height: 110px; - @include heading-1-semibold; + @include heading-1-emphasis; color: $dark-gray; } .general-page-content { display: grid; - grid-template-columns: 50% 50%; - grid-gap: 30px; + grid-template-columns: 60% 40%; + grid-gap: 40px; color: #444; .description-part textarea { @@ -24,7 +24,7 @@ .version-info-part { background-color: $light-silver; height: 200px; - margin-top: 25px; + margin-top: 22px; padding: 20px; box-sizing: border-box; .label { diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/features/_inputOutput.scss b/workflow-designer-ui/src/main/frontend/resources/scss/features/_inputOutput.scss index 8625403f..bc12a150 100644 --- a/workflow-designer-ui/src/main/frontend/resources/scss/features/_inputOutput.scss +++ b/workflow-designer-ui/src/main/frontend/resources/scss/features/_inputOutput.scss @@ -10,7 +10,7 @@ &__title { height: 110px; line-height: 110px; - @include heading-1-semibold; + @include heading-1-emphasis; color: $dark-gray; } @@ -26,7 +26,7 @@ &__tab { padding: 12px; - @include body-1-semibold; + @include body-1-emphasis; @include border(1px, 1px, 0, 1px); background-color: $light-silver; color: $gray; @@ -50,7 +50,7 @@ overflow-y: auto; &__thead { background-color: $silver; - @include body-1-semibold; + @include body-1-emphasis; position: -webkit-sticky; position: sticky; top: 0px; diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/features/_overview.scss b/workflow-designer-ui/src/main/frontend/resources/scss/features/_overview.scss index 67883fbb..24f632db 100644 --- a/workflow-designer-ui/src/main/frontend/resources/scss/features/_overview.scss +++ b/workflow-designer-ui/src/main/frontend/resources/scss/features/_overview.scss @@ -1,19 +1,32 @@ .overview-page { @include body-1; - padding: 25px; + color: $dark-gray; + overflow-y: auto; + height: 100vh; .overview-content { display: flex; flex-wrap: wrap; + min-height: 775px; + + .overview-separator { + border-left: 1px solid $silver; + } .workflow-details { @extend .flex; - padding: 20px 0 0 60px; + @media (min-width: 1076px) { + @include sticky(30px); + } + max-height: 600px; + padding: 0 45px 0 56px; flex-direction: column; - .description-part textarea{ - height: 200px; - padding-top: 5px; + .description-part { + padding-top: 20px; + textarea{ + height: 200px; + } } .save-description { @@ -31,7 +44,10 @@ margin-bottom: 5px; } .value { - margin-bottom: 10px; + margin-bottom: 20px; + &:last-child { + margin-bottom: 0; + } } } } @@ -45,7 +61,7 @@ .overview-header { @include heading-1; text-transform: uppercase; - margin: 35px 0 35px 60px; + margin: 63px 0 35px 56px; color: $blue; } @@ -56,24 +72,16 @@ @mixin version-page-sub-title(){ color: $text-black; text-transform: uppercase; - //background-color: $white; border-bottom: 1px solid $light-gray; padding: 12px 0 10px 45px; } .versions-page-view { - height: 100%; - overflow: auto; - padding: 0 35px 0 90px; + padding: 0 56px 0 45px; display: flex; flex: 2; flex-direction: column; - .svg-icon-wrapper { - justify-content: flex-start; - margin: 5px; - } - .create-new-version { @extend .text-uppercase; display: flex; @@ -104,7 +112,7 @@ .versions-page-list-and-tree { display: flex; - margin-top: 20px; + margin-top: 10px; .version-tree-wrapper { display: flex; @@ -113,7 +121,10 @@ @include version-page-box-shadow(); .version-tree-title-container { - @include body-1-semibold(); + @include body-1-emphasis(); + @media (min-width: 1076px) { + @include sticky(1px); + } background-color: $light-silver; display: flex; align-items: center; @@ -143,7 +154,6 @@ .version-list { @extend .flex; - color: $text-black; flex-direction: column; .version-list-items { @@ -170,6 +180,7 @@ padding: 15px 30px; @include version-page-box-shadow(); height: 70px; + max-height: 70px; &:hover { background-color: $row-hover-color; @@ -187,8 +198,10 @@ &.header-row { height: 40px; background-color: $light-silver; - - @include body-1-semibold(); + @media (min-width: 1076px) { + @include sticky(1px); + } + @include body-1-emphasis(); @include version-page-sub-title(); padding: 15px 27px; @@ -214,11 +227,10 @@ &.item-description, &.item-last-edited { @include body-1; - color: $dark-gray; } &.item-description, &.header-description { - flex: 2 1 0; + flex: 1 1 0; } &.item-description > .description-text { diff --git a/workflow-designer-ui/src/main/frontend/src/features/version/general/GeneralView.js b/workflow-designer-ui/src/main/frontend/src/features/version/general/GeneralView.js index 71d5d7d8..9b020b5a 100644 --- a/workflow-designer-ui/src/main/frontend/src/features/version/general/GeneralView.js +++ b/workflow-designer-ui/src/main/frontend/src/features/version/general/GeneralView.js @@ -16,7 +16,7 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { I18n, Translate } from 'react-redux-i18n'; +import { I18n } from 'react-redux-i18n'; import Description from 'shared/components/Description'; import { VersionInfo, LabeledValue } from 'shared/components/VersionInfo'; @@ -31,9 +31,6 @@ const GeneralView = ({ onDataChange, versionInfo, isCertified }) => { return (
-
- -
diff --git a/workflow-designer-ui/src/main/frontend/src/features/version/versionController/__tests__/__snapshots__/VersionControllerView_snapshot-test.js.snap b/workflow-designer-ui/src/main/frontend/src/features/version/versionController/__tests__/__snapshots__/VersionControllerView_snapshot-test.js.snap index f0263773..ce3cd37c 100644 --- a/workflow-designer-ui/src/main/frontend/src/features/version/versionController/__tests__/__snapshots__/VersionControllerView_snapshot-test.js.snap +++ b/workflow-designer-ui/src/main/frontend/src/features/version/versionController/__tests__/__snapshots__/VersionControllerView_snapshot-test.js.snap @@ -26,6 +26,7 @@ exports[`Version Controller View Snapshot renders correctly 1`] = `
+ version -
+ name + + +
+
-
- description -
-