Spearhead
/
joyent-portal
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Resolving another conflict

This commit is contained in:
JUDIT GRESKOVITS 2017-01-13 18:20:13 +00:00
parent 55be4bbaa8 348b24a31d
commit 97fced5728
13 changed files with 134 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
frontend/test/_hook.js
View File

@ -3,6 +3,11 @@ const jsdom = require('jsdom');
const register = require('babel-register'); const register = require('babel-register');
hook.hook('.png', () => ''); hook.hook('.png', () => '');
hook.hook('.eot', () => '');
hook.hook('.woff', () => '');
hook.hook('.woff2', () => '');
hook.hook('.ttf', () => '');
hook.hook('.svg', () => '');
register({ register({
extensions: ['.js'] extensions: ['.js']
@ -14,4 +19,4 @@ if (!global.document || !global.window) {
global.document = jsdom.jsdom('<!doctype html><html><body></body></html>'); global.document = jsdom.jsdom('<!doctype html><html><body></body></html>');
global.window = global.document.defaultView; global.window = global.document.defaultView;
global.navigator = global.window.navigator; global.navigator = global.window.navigator;
} }

9
frontend/webpack/base.js
View File

@ -71,6 +71,15 @@ module.exports = {
loader: [ loader: [
'url-loader' 'url-loader'
] ]
},
{
test: /\.(eot|svg|ttf|woff|woff2)$/,
exclude: /node_modules/,
loader: 'file-loader',
include: [
FRONTEND,
UI
]
}] }]
} }
}; };

6
ui/docs/webpack/base.js
View File

@ -68,6 +68,12 @@ module.exports = {
exclude: [/node_modules/g], exclude: [/node_modules/g],
include: INCLUDE, include: INCLUDE,
loader: 'svg-react' loader: 'svg-react'
},
{
test: /\.(eot|svg|ttf|woff|woff2)$/,
exclude: /node_modules/,
loader: 'file-loader',
include: INCLUDE
}] }]
} }
}; };

4
ui/package.json
View File

@ -56,6 +56,7 @@
"eslint-plugin-standard": "^2.0.1", "eslint-plugin-standard": "^2.0.1",
"jsdom": "^9.9.1", "jsdom": "^9.9.1",
"memory-fs": "^0.4.1", "memory-fs": "^0.4.1",
"node-hook": "^0.4.0",
"nyc": "^10.0.0", "nyc": "^10.0.0",
"pre-commit": "^1.2.2", "pre-commit": "^1.2.2",
"react-addons-test-utils": "^15.4.1", "react-addons-test-utils": "^15.4.1",
@ -69,7 +70,8 @@
"failFast": true, "failFast": true,
"cache": false, "cache": false,
"require": [ "require": [
"babel-register" "babel-register",
"./test/_hook.js"
], ],
"babel": "inherit" "babel": "inherit"
}, },

17
ui/src/components/base/global.js
View File

@ -1,10 +1,27 @@
const Styled = require('styled-components'); const Styled = require('styled-components');
const fncs = require('../../shared/functions');
const {
generateFonts
} = fncs;
const { const {
css css
} = Styled; } = Styled;
// The name that will be used in the 'font-family' property
const fontFamilies = [
'LibreFranklin'
];
// The name the font file without the extension
const fontFilenames = [
'librefranklin-webfont'
];
module.exports = css` module.exports = css`
${generateFonts(fontFamilies, fontFilenames)}
html, body { html, body {
font-size: 16px; font-size: 16px;
margin: 0; margin: 0;

16
ui/src/components/base/index.js
View File

@ -15,25 +15,11 @@ const {
} = Styled; } = Styled;
const { const {
generateFonts,
remcalc remcalc
} = fncs; } = fncs;
// The name that will be used in the 'font-family' property
const fontFamilies = [
'LibreFranklin'
];
// The name the font file without the extension
const fontFilenames = [
'librefranklin-webfont'
];
module.exports = styled.div` module.exports = styled.div`
${generateFonts(fontFamilies, fontFilenames)}; font-family: 'LibreFranklin', sans-serif;
font-family: 'LibreFranklin', -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: 1rem; font-size: 1rem;
line-height: 1.5; line-height: 1.5;
color: ${colors.fonts.regular}; color: ${colors.fonts.regular};

19
ui/src/components/horizontal-list/li.js
View File

@ -1,23 +1,34 @@
const fns = require('../../shared/functions'); const fns = require('../../shared/functions');
const constants = require('../../shared/constants');
const Styled = require('styled-components'); const Styled = require('styled-components');
const { const {
remcalc remcalc
} = fns; } = fns;
const {
colors
} = constants;
const { const {
default: styled default: styled
} = Styled; } = Styled;
module.exports = styled.li` module.exports = styled.li`
display: inline-block; display: inline-block;
margin-right: ${remcalc(10)}; margin-right: ${remcalc(64)};
padding-top: ${remcalc(10)}; padding-top: ${remcalc(10)};
padding-bottom: ${remcalc(10)}; padding-bottom: ${remcalc(10)};
& a.active { & a {
cursor: default; color: ${colors.fonts.regular};
color: #373A3C;
text-decoration: none; text-decoration: none;
} }
& a.active {
cursor: default;
color: ${colors.brandPrimaryLink};
border-bottom: 2px solid ${colors.brandPrimaryLinkUnderline};
padding-bottom: ${remcalc(6)};
}
`; `;

38
ui/src/components/horizontal-list/story.js Normal file
View File

@ -0,0 +1,38 @@
const React = require('react');
const {
storiesOf
} = require('@kadira/storybook');
const Base= require('../base');
const Li = require('./li');
const Ul = require('./ul');
storiesOf('Unordered List', module)
.add('Default', () => (
<Base>
<Ul>
<Li>
<a className="active" href="">
<span>
One
</span>
</a>
</Li>
<Li>
<a href="">
<span>
Two
</span>
</a>
</Li>
<Li>
<a href="">
<span>
Three
</span>
</a>
</Li>
</Ul>
</Base>
));

10
ui/src/components/topology/index.js
View File

@ -81,7 +81,7 @@ const StyledSVGContainer = styled.svg`
} }
.health, .health_warn { .health, .health_warn {
font-family: "Libre Franklin"; font-family: "LibreFranklin";
font-size: ${remcalc(12)}; font-size: ${remcalc(12)};
font-weight: bold; font-weight: bold;
font-style: normal; font-style: normal;
@ -94,7 +94,7 @@ const StyledSVGContainer = styled.svg`
} }
.stat { .stat {
font-family: "Libre Franklin"; font-family: "LibreFranklin";
font-size: ${remcalc(12)}; font-size: ${remcalc(12)};
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
@ -103,7 +103,7 @@ const StyledSVGContainer = styled.svg`
} }
.node_statistics { .node_statistics {
font-family: "Libre Franklin"; font-family: "LibreFranklin";
font-size: ${remcalc(12)}; font-size: ${remcalc(12)};
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
@ -117,7 +117,7 @@ const StyledSVGContainer = styled.svg`
} }
.primary, .secondary { .primary, .secondary {
font-family: "Libre Franklin"; font-family: "LibreFranklin";
font-size: ${remcalc(12)}; font-size: ${remcalc(12)};
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
@ -126,7 +126,7 @@ const StyledSVGContainer = styled.svg`
} }
.info_text { .info_text {
font-family: "Libre Franklin"; font-family: "LibreFranklin";
font-size: ${remcalc(16)}; font-size: ${remcalc(16)};
font-weight: 600; font-weight: 600;
font-style: normal; font-style: normal;

6
ui/src/shared/constants/colors.js
View File

@ -11,7 +11,8 @@ const brandPrimary = {
borderPrimaryDark: '#2531BC', borderPrimaryDark: '#2531BC',
borderPrimaryDarkest: '#062BA0', borderPrimaryDarkest: '#062BA0',
brandPrimaryColor: '#FFFFFF', brandPrimaryColor: '#FFFFFF',
brandPrimaryLink: '#364acd' brandPrimaryLink: '#364ACD',
brandPrimaryLinkUnderline: '#3B47CC'
}; };
const brandSecondary = { const brandSecondary = {
@ -22,7 +23,8 @@ const brandSecondary = {
borderSecondaryDark: '#D8D8D8', borderSecondaryDark: '#D8D8D8',
borderSecondaryDarkest: '#D8D8D8', borderSecondaryDarkest: '#D8D8D8',
brandSecondaryColor: '#464646', brandSecondaryColor: '#464646',
brandSecondaryLink: '#ffffff' brandSecondaryLink: '#FFFFFF',
brandSecondaryLinkUnderline: '#FFFFFF'
}; };
const brandInactive = { const brandInactive = {

33
ui/src/shared/functions.js
View File

@ -15,26 +15,31 @@ const rndId = (_code) => {
}; };
const generateFonts = (fontFamilies, fontFilenames) => { const generateFonts = (fontFamilies, fontFilenames) => {
const pathToFont = '../../shared/fonts/'; const pathToFont = './fonts/';
let fontCSS = ''; let fontCSS = '';
fontFamilies.forEach( (fontFamily, i) => { fontFamilies.forEach( (fontFamily, i) => {
const eot = require(`${pathToFont + fontFilenames[i]}.eot`);
const woff = require(`${pathToFont + fontFilenames[i]}.woff`);
const woff2 = require(`${pathToFont + fontFilenames[i]}.woff2`);
const ttf = require(`${pathToFont + fontFilenames[i]}.ttf`);
const svg = require(`${pathToFont + fontFilenames[i]}.svg`);
fontCSS += ` fontCSS += `
@font-face { @font-face {
font-family: ${fontFamily}; font-family: '${fontFamily}';
src: url(${pathToFont + fontFilenames[i]}.eot); src: url('${eot}'),
src: url(${pathToFont + fontFilenames[i]}.eot?#iefix) url('${eot}?#iefix')
format('embedded-opentype'); format('embedded-opentype'),
src: url(${pathToFont + fontFilenames[i]}.woff) url('${woff}')
format('woff'); format('woff'),
src: url(${pathToFont + fontFilenames[i]}.woff2) url('${woff2}')
format('woff2'); format('woff2'),
src: url(${pathToFont + fontFilenames[i]}.ttf) url('${ttf}')
format('truetype'); format('truetype'),
src: url(${pathToFont + fontFilenames[i]}.svg#${fontFamily}) url('${svg}#${fontFamily}')
format('svg'); format('svg')
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
`; `;
}); });

7
ui/test/_hook.js Normal file
View File

@ -0,0 +1,7 @@
const hook = require('node-hook');
hook.hook('.eot', () => '');
hook.hook('.woff', () => '');
hook.hook('.woff2', () => '');
hook.hook('.ttf', () => '');
hook.hook('.svg', () => '');

4
ui/yarn.lock
View File

@ -4407,6 +4407,10 @@ node-fetch@^1.0.1:
encoding "^0.1.11" encoding "^0.1.11"
is-stream "^1.0.1" is-stream "^1.0.1"
node-hook@^0.4.0:
version "0.4.0"
resolved "https://registry.yarnpkg.com/node-hook/-/node-hook-0.4.0.tgz#782a3b3b4873388f93d087cd2971162f24eb6f2d"
node-libs-browser@^0.7.0: node-libs-browser@^0.7.0:
version "0.7.0" version "0.7.0"
resolved "https://registry.yarnpkg.com/node-libs-browser/-/node-libs-browser-0.7.0.tgz#3e272c0819e308935e26674408d7af0e1491b83b" resolved "https://registry.yarnpkg.com/node-libs-browser/-/node-libs-browser-0.7.0.tgz#3e272c0819e308935e26674408d7af0e1491b83b"