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

Resolving another conflict

Browse Source
This commit is contained in:
JUDIT GRESKOVITS 2017-01-13 18:20:13 +00:00
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');
hook.hook('.png', () => '');
hook.hook('.eot', () => '');
hook.hook('.woff', () => '');
hook.hook('.woff2', () => '');
hook.hook('.ttf', () => '');
hook.hook('.svg', () => '');
register({
extensions: ['.js']
@ -14,4 +19,4 @@ if (!global.document || !global.window) {
global.document = jsdom.jsdom('<!doctype html><html><body></body></html>');
global.window = global.document.defaultView;
global.navigator = global.window.navigator;
}
}

9
frontend/webpack/base.js
View File

@ -71,6 +71,15 @@ module.exports = {
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],
include: INCLUDE,
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",
"jsdom": "^9.9.1",
"memory-fs": "^0.4.1",
"node-hook": "^0.4.0",
"nyc": "^10.0.0",
"pre-commit": "^1.2.2",
"react-addons-test-utils": "^15.4.1",
@ -69,7 +70,8 @@
"failFast": true,
"cache": false,
"require": [
"babel-register"
"babel-register",
"./test/_hook.js"
],
"babel": "inherit"
},

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

@ -1,10 +1,27 @@
const Styled = require('styled-components');
const fncs = require('../../shared/functions');
const {
generateFonts
} = fncs;
const {
css
} = 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`
${generateFonts(fontFamilies, fontFilenames)}
html, body {
font-size: 16px;
margin: 0;

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

@ -15,25 +15,11 @@ const {
} = Styled;
const {
generateFonts,
remcalc
} = 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`
${generateFonts(fontFamilies, fontFilenames)};
font-family: 'LibreFranklin', -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-family: 'LibreFranklin', sans-serif;
font-size: 1rem;
line-height: 1.5;
color: ${colors.fonts.regular};

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

@ -1,23 +1,34 @@
const fns = require('../../shared/functions');
const constants = require('../../shared/constants');
const Styled = require('styled-components');
const {
remcalc
} = fns;
const {
colors
} = constants;
const {
default: styled
} = Styled;
module.exports = styled.li`
display: inline-block;
margin-right: ${remcalc(10)};
margin-right: ${remcalc(64)};
padding-top: ${remcalc(10)};
padding-bottom: ${remcalc(10)};
& a.active {
cursor: default;
color: #373A3C;
& a {
color: ${colors.fonts.regular};
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 {
font-family: "Libre Franklin";
font-family: "LibreFranklin";
font-size: ${remcalc(12)};
font-weight: bold;
font-style: normal;
@ -94,7 +94,7 @@ const StyledSVGContainer = styled.svg`
}
.stat {
font-family: "Libre Franklin";
font-family: "LibreFranklin";
font-size: ${remcalc(12)};
font-weight: normal;
font-style: normal;
@ -103,7 +103,7 @@ const StyledSVGContainer = styled.svg`
}
.node_statistics {
font-family: "Libre Franklin";
font-family: "LibreFranklin";
font-size: ${remcalc(12)};
font-weight: normal;
font-style: normal;
@ -117,7 +117,7 @@ const StyledSVGContainer = styled.svg`
}
.primary, .secondary {
font-family: "Libre Franklin";
font-family: "LibreFranklin";
font-size: ${remcalc(12)};
font-weight: normal;
font-style: normal;
@ -126,7 +126,7 @@ const StyledSVGContainer = styled.svg`
}
.info_text {
font-family: "Libre Franklin";
font-family: "LibreFranklin";
font-size: ${remcalc(16)};
font-weight: 600;
font-style: normal;

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

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

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

@ -15,26 +15,31 @@ const rndId = (_code) => {
};
const generateFonts = (fontFamilies, fontFilenames) => {
const pathToFont = '../../shared/fonts/';
const pathToFont = './fonts/';
let fontCSS = '';
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 += `
@font-face {
font-family: ${fontFamily};
src: url(${pathToFont + fontFilenames[i]}.eot);
src: url(${pathToFont + fontFilenames[i]}.eot?#iefix)
format('embedded-opentype');
src: url(${pathToFont + fontFilenames[i]}.woff)
format('woff');
src: url(${pathToFont + fontFilenames[i]}.woff2)
format('woff2');
src: url(${pathToFont + fontFilenames[i]}.ttf)
format('truetype');
src: url(${pathToFont + fontFilenames[i]}.svg#${fontFamily})
format('svg');
font-family: '${fontFamily}';
src: url('${eot}'),
url('${eot}?#iefix')
format('embedded-opentype'),
url('${woff}')
format('woff'),
url('${woff2}')
format('woff2'),
url('${ttf}')
format('truetype'),
url('${svg}#${fontFamily}')
format('svg')
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"
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:
version "0.7.0"
resolved "https://registry.yarnpkg.com/node-libs-browser/-/node-libs-browser-0.7.0.tgz#3e272c0819e308935e26674408d7af0e1491b83b"