diff options
Diffstat (limited to 'workflow-designer-ui')
20 files changed, 129 insertions, 65 deletions
diff --git a/workflow-designer-ui/src/main/frontend/package.json b/workflow-designer-ui/src/main/frontend/package.json index dc2c229c..529d9096 100644 --- a/workflow-designer-ui/src/main/frontend/package.json +++ b/workflow-designer-ui/src/main/frontend/package.json @@ -70,6 +70,7 @@ "eslint-plugin-jest": "^21.17.0", "eslint-plugin-prettier": "^2.6.0", "eslint-plugin-react": "^7.7.0", + "file-loader": "^1.1.11", "html-webpack-plugin": "^3.2.0", "i18next-scanner": "^2.4.6", "identity-obj-proxy": "^3.0.0", diff --git a/workflow-designer-ui/src/main/frontend/resources/fonts/open-sans-v15-latin-600.woff b/workflow-designer-ui/src/main/frontend/resources/fonts/open-sans-v15-latin-600.woff Binary files differnew file mode 100644 index 00000000..5a604b3a --- /dev/null +++ b/workflow-designer-ui/src/main/frontend/resources/fonts/open-sans-v15-latin-600.woff diff --git a/workflow-designer-ui/src/main/frontend/resources/fonts/open-sans-v15-latin-600.woff2 b/workflow-designer-ui/src/main/frontend/resources/fonts/open-sans-v15-latin-600.woff2 Binary files differnew file mode 100644 index 00000000..a0965b7a --- /dev/null +++ b/workflow-designer-ui/src/main/frontend/resources/fonts/open-sans-v15-latin-600.woff2 diff --git a/workflow-designer-ui/src/main/frontend/resources/fonts/open-sans-v15-latin-italic.woff b/workflow-designer-ui/src/main/frontend/resources/fonts/open-sans-v15-latin-italic.woff Binary files differnew file mode 100644 index 00000000..cf8b191c --- /dev/null +++ b/workflow-designer-ui/src/main/frontend/resources/fonts/open-sans-v15-latin-italic.woff diff --git a/workflow-designer-ui/src/main/frontend/resources/fonts/open-sans-v15-latin-italic.woff2 b/workflow-designer-ui/src/main/frontend/resources/fonts/open-sans-v15-latin-italic.woff2 Binary files differnew file mode 100644 index 00000000..bad9292b --- /dev/null +++ b/workflow-designer-ui/src/main/frontend/resources/fonts/open-sans-v15-latin-italic.woff2 diff --git a/workflow-designer-ui/src/main/frontend/resources/fonts/open-sans-v15-latin-regular.woff b/workflow-designer-ui/src/main/frontend/resources/fonts/open-sans-v15-latin-regular.woff Binary files differnew file mode 100644 index 00000000..e495e6f0 --- /dev/null +++ b/workflow-designer-ui/src/main/frontend/resources/fonts/open-sans-v15-latin-regular.woff diff --git a/workflow-designer-ui/src/main/frontend/resources/fonts/open-sans-v15-latin-regular.woff2 b/workflow-designer-ui/src/main/frontend/resources/fonts/open-sans-v15-latin-regular.woff2 Binary files differnew file mode 100644 index 00000000..c8050c25 --- /dev/null +++ b/workflow-designer-ui/src/main/frontend/resources/fonts/open-sans-v15-latin-regular.woff2 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 6f4e6e91..cd5e6db5 100644 --- a/workflow-designer-ui/src/main/frontend/resources/scss/_common.scss +++ b/workflow-designer-ui/src/main/frontend/resources/scss/_common.scss @@ -1,5 +1,4 @@ -@import 'common/fonts'; @import '../../node_modules/sdc-ui/lib/style/scss/common/variables.scss'; -@import '../../node_modules/sdc-ui/lib/style/scss/common/typography.scss'; @import 'common/customVariables'; +@import 'common/fonts'; @import 'common/utils'; 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 997e0a21..9472fe68 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,6 +1,90 @@ $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; + 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; + 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; @@ -36,9 +120,3 @@ $cursor-pointer: pointer; opacity: 0.7 !important; cursor: $cursor-disabled; } - -@mixin semi-bold() { - font-weight: 600; -}; - - diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/common/_fonts.scss b/workflow-designer-ui/src/main/frontend/resources/scss/common/_fonts.scss index 9d71cf7e..f367c23b 100644 --- a/workflow-designer-ui/src/main/frontend/resources/scss/common/_fonts.scss +++ b/workflow-designer-ui/src/main/frontend/resources/scss/common/_fonts.scss @@ -1,31 +1,26 @@ -/* Fonts */ @font-face { font-family: 'OpenSans-Regular'; font-style: normal; font-weight: 400; - src: - local('Open Sans Regular'), - local('OpenSans-Regular'), - url(https://fonts.gstatic.com/s/opensans/v15/cJZKeOuBrn4kERxqtaUH3ZBw1xU1rKptJj_0jans920.woff2) format('woff2'), - url(http://fonts.gstatic.com/s/opensans/v15/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff'); - } - @font-face { + src: local('Open Sans Regular'), local('OpenSans-Regular'), + url('../fonts/open-sans-v15-latin-regular.woff2') format('woff2'), + url('../fonts/open-sans-v15-latin-regular.woff') format('woff'); +} + +@font-face { font-family: 'OpenSans-Italic'; - font-style: normal; + font-style: italic; font-weight: 400; - src: - local('Open Sans Italic'), - local('OpenSans-Italic'), - url(https://fonts.gstatic.com/s/opensans/v15/xjAJXh38I15wypJXxuGMBogp9Q8gbYrhqGlRav_IXfk.woff2) format('woff2'), - url(http://fonts.gstatic.com/s/opensans/v15/xjAJXh38I15wypJXxuGMBobN6UDyHWBl620a-IRfuBk.woff) format('woff'); - } - @font-face { - font-family: 'OpenSans-Semibold'; + src: local('Open Sans Italic'), local('OpenSans-Italic'), + url('../fonts/open-sans-v15-latin-italic.woff2') format('woff2'), + url('../fonts/open-sans-v15-latin-italic.woff') format('woff'); +} + +@font-face { + font-family: 'OpenSans-SemiBold'; font-style: normal; - font-weight: 400; - src: - local('Open Sans Semibold'), - local('OpenSans-Semibold'), - url(https://fonts.gstatic.com/s/opensans/v15/MTP_ySUJH_bn48VBG8sNShampu5_7CjHW5spxoeN3Vs.woff2) format('woff2'), - url(http://fonts.gstatic.com/s/opensans/v15/MTP_ySUJH_bn48VBG8sNSnhCUOGz7vYGh680lGh-uXM.woff) format('woff'); - }
\ No newline at end of file + font-weight: 600; + src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'), + url('../fonts/open-sans-v15-latin-600.woff2') format('woff2'), + url('../fonts/open-sans-v15-latin-600.woff') format('woff'); +} 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 695dc6a5..6cff0561 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,10 +16,9 @@ flex-direction: column; background-color: $light-silver; .group-name { - @include heading-4; - @include semi-bold; - @include ellipsis; - display: block; + @include heading-4-semibold; + @include ellipsis; + display: block; padding: 24px 12px 13px 40px; background-color: $white; border-bottom: 1px solid $silver; @@ -46,15 +45,13 @@ @include ellipsis; white-space: normal; &.selected { - @include body-1; - @include semi-bold; + @include body-1-semibold; border-left: 4px solid $blue; padding-left: 18px; color: $blue; } &.bold-name { - @include body-1; - @include semi-bold; + @include body-1-semibold; } } } 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 1847ff30..6e1e9795 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,8 +22,7 @@ text { text-anchor: end; - @include body-2; - @include semi-bold; + @include body-2-semibold; 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 fe397d31..eaa3d7dd 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,8 +7,7 @@ .group-name-wrapper { width: 245px; .group-name { - @include heading-4; - @include semi-bold; + @include heading-4-semibold; @include ellipsis; display: block; padding: 24px 12px 13px 40px; 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 debb8b81..e46e84c1 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 @@ -23,15 +23,13 @@ align-items: center; padding: 25px 60px; &__total { - @include body-1; - @include semi-bold; + @include body-1-semibold; color: $dark-gray; } &__order { display: flex; &__label { - @include body-1; - @include semi-bold; + @include body-1-semibold; color: $dark-gray; } &__alphabetical { 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 f99b8aad..9189c87b 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 @@ -6,8 +6,7 @@ .general-page-title { height: 110px; line-height: 110px; - @include heading-1; - @include semi-bold; + @include heading-1-semibold; color: $dark-gray; } 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 45338039..68146f48 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,15 +10,13 @@ &__title { height: 110px; line-height: 110px; - @include heading-1; - @include semi-bold; + @include heading-1-semibold; color: $dark-gray; } &__header { display: flex; - @include body-1; - @include semi-bold; + @include body-1-semibold; &__right { flex: 1; display: flex; @@ -49,15 +47,14 @@ &__table { &__thead { background-color: $silver; - @include body-1; - @include semi-bold; + @include body-1-semibold; } } &__tr { display: flex; @include border(); - &:hover:not(.no-data) { + &:hover:not(&--no-hover) { background-color: $light-silver; } & + & { @@ -81,8 +78,7 @@ &--empty { padding: 20px; color: $dark-gray; - @include body-1; - @include semi-bold; + @include body-1-semibold; justify-content: center; } 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 b713b93f..f384017f 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,6 +1,5 @@ .overview-page { - @include body-1; - @include base-font-regular; + @include body-1-semibold; padding: 25px; .overview-content { @@ -112,7 +111,7 @@ @include version-page-box-shadow(); .version-tree-title-container { - @include base-font-semibold(); + @include body-1-semibold(); background-color: $light-silver; display: flex; align-items: center; @@ -183,7 +182,7 @@ height: 40px; background-color: $light-silver; - @include base-font-semibold(); + @include body-1-semibold(); @include version-page-sub-title(); padding: 15px 27px; diff --git a/workflow-designer-ui/src/main/frontend/src/features/version/inputOutput/views/NoDataRow.jsx b/workflow-designer-ui/src/main/frontend/src/features/version/inputOutput/views/NoDataRow.jsx index 1a4d7534..af75c79e 100644 --- a/workflow-designer-ui/src/main/frontend/src/features/version/inputOutput/views/NoDataRow.jsx +++ b/workflow-designer-ui/src/main/frontend/src/features/version/inputOutput/views/NoDataRow.jsx @@ -18,7 +18,7 @@ import React from 'react'; import PropTypes from 'prop-types'; const NoDataRow = ({ children }) => ( - <div className="input-output__tr no-data"> + <div className="input-output__tr input-output__tr--no-hover"> <div className="input-output__td input-output__td--empty"> {children} </div> diff --git a/workflow-designer-ui/src/main/frontend/src/features/version/inputOutput/views/TableHead.jsx b/workflow-designer-ui/src/main/frontend/src/features/version/inputOutput/views/TableHead.jsx index 206f54a8..37a8cb43 100644 --- a/workflow-designer-ui/src/main/frontend/src/features/version/inputOutput/views/TableHead.jsx +++ b/workflow-designer-ui/src/main/frontend/src/features/version/inputOutput/views/TableHead.jsx @@ -21,7 +21,7 @@ export default class TableHead extends React.Component { render() { return ( <div className="input-output__table__thead"> - <div className="input-output__tr"> + <div className="input-output__tr input-output__tr--no-hover"> <div className="input-output__th"> <Translate value="workflow.inputOutput.name" /> </div> diff --git a/workflow-designer-ui/src/main/frontend/webpack.config.js b/workflow-designer-ui/src/main/frontend/webpack.config.js index c724d9fc..23f53343 100644 --- a/workflow-designer-ui/src/main/frontend/webpack.config.js +++ b/workflow-designer-ui/src/main/frontend/webpack.config.js @@ -125,6 +125,10 @@ module.exports = (env, argv) => { test: /\.ts|\.tsx$/, loader: ['babel-loader', 'awesome-typescript-loader'], include: srcPath + }, + { + test: /\.woff|\.woff2$/, + loader: 'file-loader' } ] }, |