aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorMalek <malek.zoabi@amdocs.com>2018-07-30 15:29:47 +0300
committerMalek <malek.zoabi@amdocs.com>2018-07-30 15:29:54 +0300
commit12fe45f7982fec92b39c8a981a0f42530e6c1c83 (patch)
tree65b1b5952861d3cd2e9222b29d10c4b03c7c2cf0
parent4930e7f2f401f320bf4f017ba4daaae9b5c10c9f (diff)
Add fonts and fix styles
Issue-ID: SDC-1574 Change-Id: I8e15ebf436fa7cc293a0bf352ac365de5cc7a80c Signed-off-by: Malek <malek.zoabi@amdocs.com>
-rw-r--r--workflow-designer-ui/src/main/frontend/package.json1
-rw-r--r--workflow-designer-ui/src/main/frontend/resources/fonts/open-sans-v15-latin-600.woffbin0 -> 18296 bytes
-rw-r--r--workflow-designer-ui/src/main/frontend/resources/fonts/open-sans-v15-latin-600.woff2bin0 -> 14544 bytes
-rw-r--r--workflow-designer-ui/src/main/frontend/resources/fonts/open-sans-v15-latin-italic.woffbin0 -> 17068 bytes
-rw-r--r--workflow-designer-ui/src/main/frontend/resources/fonts/open-sans-v15-latin-italic.woff2bin0 -> 13416 bytes
-rw-r--r--workflow-designer-ui/src/main/frontend/resources/fonts/open-sans-v15-latin-regular.woffbin0 -> 17704 bytes
-rw-r--r--workflow-designer-ui/src/main/frontend/resources/fonts/open-sans-v15-latin-regular.woff2bin0 -> 14048 bytes
-rw-r--r--workflow-designer-ui/src/main/frontend/resources/scss/_common.scss3
-rw-r--r--workflow-designer-ui/src/main/frontend/resources/scss/common/_customVariables.scss90
-rw-r--r--workflow-designer-ui/src/main/frontend/resources/scss/common/_fonts.scss43
-rw-r--r--workflow-designer-ui/src/main/frontend/resources/scss/components/_navigationSideBar.scss13
-rw-r--r--workflow-designer-ui/src/main/frontend/resources/scss/components/_tree.scss3
-rw-r--r--workflow-designer-ui/src/main/frontend/resources/scss/components/_versionController.scss3
-rw-r--r--workflow-designer-ui/src/main/frontend/resources/scss/features/_catalog.scss6
-rw-r--r--workflow-designer-ui/src/main/frontend/resources/scss/features/_general.scss3
-rw-r--r--workflow-designer-ui/src/main/frontend/resources/scss/features/_inputOutput.scss14
-rw-r--r--workflow-designer-ui/src/main/frontend/resources/scss/features/_overview.scss7
-rw-r--r--workflow-designer-ui/src/main/frontend/src/features/version/inputOutput/views/NoDataRow.jsx2
-rw-r--r--workflow-designer-ui/src/main/frontend/src/features/version/inputOutput/views/TableHead.jsx2
-rw-r--r--workflow-designer-ui/src/main/frontend/webpack.config.js4
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
new file mode 100644
index 00000000..5a604b3a
--- /dev/null
+++ b/workflow-designer-ui/src/main/frontend/resources/fonts/open-sans-v15-latin-600.woff
Binary files differ
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
new file mode 100644
index 00000000..a0965b7a
--- /dev/null
+++ b/workflow-designer-ui/src/main/frontend/resources/fonts/open-sans-v15-latin-600.woff2
Binary files differ
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
new file mode 100644
index 00000000..cf8b191c
--- /dev/null
+++ b/workflow-designer-ui/src/main/frontend/resources/fonts/open-sans-v15-latin-italic.woff
Binary files differ
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
new file mode 100644
index 00000000..bad9292b
--- /dev/null
+++ b/workflow-designer-ui/src/main/frontend/resources/fonts/open-sans-v15-latin-italic.woff2
Binary files differ
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
new file mode 100644
index 00000000..e495e6f0
--- /dev/null
+++ b/workflow-designer-ui/src/main/frontend/resources/fonts/open-sans-v15-latin-regular.woff
Binary files differ
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
new file mode 100644
index 00000000..c8050c25
--- /dev/null
+++ b/workflow-designer-ui/src/main/frontend/resources/fonts/open-sans-v15-latin-regular.woff2
Binary files differ
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'
}
]
},