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

fix(my-joy-beta): monospace instance name on network details

Browse Source 
fixes #1089
This commit is contained in:
Sérgio Ramos 2018-01-25 16:40:07 +00:00 committed by Sérgio Ramos
parent c39536677b
commit 2ebace64c0
15 changed files with 76 additions and 365 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/my-joy-beta/src/components/__tests__/__snapshots__/cns.spec.js.snap
View File

@ -695,7 +695,7 @@ exports[`renders <Hostname values /> without throwing 1`] = `
background-color: rgb(250,250,250); background-color: rgb(250,250,250);
color: rgb(216,216,216); color: rgb(216,216,216);
cursor: not-allowed; cursor: not-allowed;
font-family: "Roboto Mono"; font-family: "Roboto Mono",monospace;
width: 100%; width: 100%;
font-size: 0.9375rem; font-size: 0.9375rem;
line-height: normal !important; line-height: normal !important;

2
packages/my-joy-beta/src/components/__tests__/__snapshots__/key-value.spec.js.snap
View File

@ -2971,7 +2971,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216); border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1); color: rgba(73,73,73,1);
font-family: "Roboto Mono"; font-family: "Roboto Mono",monospace;
width: 100%; width: 100%;
text-overflow: ellipsis; text-overflow: ellipsis;
resize: vertical; resize: vertical;

244
packages/my-joy-beta/src/components/__tests__/__snapshots__/network.spec.js.snap
View File

@ -4167,62 +4167,6 @@ exports[`renders <Network {...network} fabric /> without throwing 1`] = `
</div> </div>
</div> </div>
</div> </div>
<div
className="c23"
>
<div
className="c24"
disabled={false}
name="card"
>
<div
className="c25"
disabled={false}
name="card-header"
onClick={undefined}
>
<div
className="c26"
disabled={false}
name="card-header-meta"
>
<div
className="c27"
>
<p
className="c17"
>
Instances on network
</p>
</div>
</div>
<div
className="c5"
disabled={false}
name="card-header-box"
>
<svg
className=""
height="6"
innerRef={undefined}
style={
Object {
"transform": "rotate(0deg)",
}
}
viewBox="0 0 9.6 6"
width="9.6"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
fill="rgba(73, 73, 73, 1)"
/>
</svg>
</div>
</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -5045,136 +4989,6 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
margin-bottom: 0.4375rem; margin-bottom: 0.4375rem;
} }
.c30 {
box-sizing: content-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex: 1 0 auto;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
position: relative;
border-width: 0.0625rem;
border-style: solid;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
color: rgba(73,73,73,1);
background-color: rgb(255,255,255);
border-color: rgb(216,216,216);
cursor: pointer;
min-height: auto;
height: 2.875rem;
-webkit-flex: 0 0 2.875rem;
-ms-flex: 0 0 2.875rem;
flex: 0 0 2.875rem;
}
.c31 {
box-sizing: content-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex: 1 0 auto;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
position: relative;
border-width: 0.0625rem;
border-style: solid;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
color: rgba(73,73,73,1);
background-color: rgb(255,255,255);
border-color: rgb(216,216,216);
cursor: pointer;
min-height: auto;
height: 2.875rem;
-webkit-flex: 0 0 2.875rem;
-ms-flex: 0 0 2.875rem;
flex: 0 0 2.875rem;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
z-index: 1;
line-height: 1.5rem;
height: auto;
max-width: 100%;
margin: -0.0625rem -0.0625rem 0 -0.0625rem;
margin: -0.0625rem;
box-shadow: none;
}
.c31 button {
margin-bottom: 0;
margin-top: 0;
}
.c32 {
box-sizing: content-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex: 1 0 auto;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
position: relative;
border-width: 0.0625rem;
border-style: solid;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
color: rgba(73,73,73,1);
background-color: rgb(255,255,255);
border-color: rgb(216,216,216);
cursor: pointer;
min-height: auto;
height: 2.875rem;
-webkit-flex: 0 0 2.875rem;
-ms-flex: 0 0 2.875rem;
flex: 0 0 2.875rem;
box-sizing: border-box;
min-height: 2.9375rem;
max-width: 100%;
width: auto;
height: auto;
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: stretch;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
overflow: hidden;
background-color: transparent;
border-width: 0;
box-shadow: none;
color: inherit;
}
.c24 { .c24 {
box-sizing: content-box; box-sizing: content-box;
display: -webkit-box; display: -webkit-box;
@ -5285,7 +5099,7 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
border: 0.0625rem solid rgb(216,216,216); border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1); color: rgba(73,73,73,1);
width: 22.1875rem; width: 22.1875rem;
font-family: "Roboto Mono"; font-family: "Roboto Mono",monospace;
max-width: 22.1875rem; max-width: 22.1875rem;
font-size: 0.9375rem; font-size: 0.9375rem;
line-height: normal !important; line-height: normal !important;
@ -5827,62 +5641,6 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
</div> </div>
</div> </div>
</div> </div>
<div
className="c23"
>
<div
className="c30"
disabled={false}
name="card"
>
<div
className="c31"
disabled={false}
name="card-header"
onClick={undefined}
>
<div
className="c32"
disabled={false}
name="card-header-meta"
>
<div
className="c25"
>
<p
className="c17"
>
Instances on network
</p>
</div>
</div>
<div
className="c5"
disabled={false}
name="card-header-box"
>
<svg
className=""
height="6"
innerRef={undefined}
style={
Object {
"transform": "rotate(0deg)",
}
}
viewBox="0 0 9.6 6"
width="9.6"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
fill="rgba(73, 73, 73, 1)"
/>
</svg>
</div>
</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>

8
packages/my-joy-beta/src/components/__tests__/firewall.spec.js
View File

@ -2,7 +2,13 @@ import React, { Fragment } from 'react';
import renderer from 'react-test-renderer'; import renderer from 'react-test-renderer';
import 'jest-styled-components'; import 'jest-styled-components';
import Firewall, { Rules, TagRules, DefaultRules, ToggleFirewallForm, ToggleInactiveForm } from '../firewall'; import Firewall, {
Rules,
TagRules,
DefaultRules,
ToggleFirewallForm,
ToggleInactiveForm
} from '../firewall';
import Theme from '@mocks/theme'; import Theme from '@mocks/theme';
const rules = [ const rules = [

4
packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/metadata.spec.js.snap
View File

@ -730,7 +730,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216); border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1); color: rgba(73,73,73,1);
font-family: "Roboto Mono"; font-family: "Roboto Mono",monospace;
width: 100%; width: 100%;
text-overflow: ellipsis; text-overflow: ellipsis;
resize: vertical; resize: vertical;
@ -1786,7 +1786,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216); border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1); color: rgba(73,73,73,1);
font-family: "Roboto Mono"; font-family: "Roboto Mono",monospace;
width: 100%; width: 100%;
text-overflow: ellipsis; text-overflow: ellipsis;
resize: vertical; resize: vertical;

72
packages/my-joy-beta/src/components/network.js
View File

@ -270,42 +270,44 @@ export const Expanded = ({
) : null} ) : null}
</Card> </Card>
</Margin> </Margin>
<Margin top={3}> {machines.length ? (
<Card <Margin top={3}>
collapsed={!machinesExpanded} <Card
actionable={!machinesExpanded} collapsed={!machinesExpanded}
> actionable={!machinesExpanded}
<CardHeader
secondary={false}
transparent={false}
onClick={onMachinesClick}
> >
<CardHeaderMeta> <CardHeader
<Padding left={3} right={3}> secondary={false}
<P>Instances on network</P> transparent={false}
</Padding> onClick={onMachinesClick}
</CardHeaderMeta> >
<CardHeaderBox> <CardHeaderMeta>
<ArrowIcon <Padding left={3} right={3}>
direction={machinesExpanded ? 'up' : 'down'} <P>Instances on network</P>
/> </Padding>
</CardHeaderBox> </CardHeaderMeta>
</CardHeader> <CardHeaderBox>
{machinesExpanded ? ( <ArrowIcon
<CardOutlet> direction={machinesExpanded ? 'up' : 'down'}
<Padding all={3}> />
<Flex column> </CardHeaderBox>
{machines.map(({ name }) => ( </CardHeader>
<FlexItem> {machinesExpanded ? (
<P>{name}</P> <CardOutlet>
</FlexItem> <Padding top={2} bottom={2} left={3} right={3}>
))} <Flex column>
</Flex> {machines.map(({ name }) => (
</Padding> <FlexItem>
</CardOutlet> <P monospace>{name}</P>
) : null} </FlexItem>
</Card> ))}
</Margin> </Flex>
</Padding>
</CardOutlet>
) : null}
</Card>
</Margin>
) : null}
</Fragment> </Fragment>
) : null} ) : null}
</Padding> </Padding>

10
packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/metadata.spec.js.snap
View File

@ -1136,7 +1136,7 @@ Array [
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216); border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1); color: rgba(73,73,73,1);
font-family: "Roboto Mono"; font-family: "Roboto Mono",monospace;
width: 100%; width: 100%;
text-overflow: ellipsis; text-overflow: ellipsis;
resize: vertical; resize: vertical;
@ -3032,7 +3032,7 @@ Array [
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216); border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1); color: rgba(73,73,73,1);
font-family: "Roboto Mono"; font-family: "Roboto Mono",monospace;
width: 100%; width: 100%;
text-overflow: ellipsis; text-overflow: ellipsis;
resize: vertical; resize: vertical;
@ -4132,7 +4132,7 @@ Array [
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216); border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1); color: rgba(73,73,73,1);
font-family: "Roboto Mono"; font-family: "Roboto Mono",monospace;
width: 100%; width: 100%;
text-overflow: ellipsis; text-overflow: ellipsis;
resize: vertical; resize: vertical;
@ -5486,7 +5486,7 @@ Array [
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216); border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1); color: rgba(73,73,73,1);
font-family: "Roboto Mono"; font-family: "Roboto Mono",monospace;
width: 100%; width: 100%;
text-overflow: ellipsis; text-overflow: ellipsis;
resize: vertical; resize: vertical;
@ -6586,7 +6586,7 @@ Array [
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216); border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1); color: rgba(73,73,73,1);
font-family: "Roboto Mono"; font-family: "Roboto Mono",monospace;
width: 100%; width: 100%;
text-overflow: ellipsis; text-overflow: ellipsis;
resize: vertical; resize: vertical;

56
packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/networks.spec.js.snap
View File

@ -2441,62 +2441,6 @@ Array [
</div> </div>
</div> </div>
</div> </div>
<div
className="c23"
>
<div
className="c24"
disabled={false}
name="card"
>
<div
className="c25"
disabled={false}
name="card-header"
onClick={[Function]}
>
<div
className="c26"
disabled={false}
name="card-header-meta"
>
<div
className="c27"
>
<p
className="c17"
>
Instances on network
</p>
</div>
</div>
<div
className="c5"
disabled={false}
name="card-header-box"
>
<svg
className=""
height="6"
innerRef={undefined}
style={
Object {
"transform": "rotate(0deg)",
}
}
viewBox="0 0 9.6 6"
width="9.6"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
fill="rgba(73, 73, 73, 1)"
/>
</svg>
</div>
</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>

12
packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/user-script.spec.js.snap
View File

@ -812,7 +812,7 @@ Array [
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216); border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1); color: rgba(73,73,73,1);
font-family: "Roboto Mono"; font-family: "Roboto Mono",monospace;
width: 100%; width: 100%;
text-overflow: ellipsis; text-overflow: ellipsis;
resize: vertical; resize: vertical;
@ -2016,7 +2016,7 @@ Array [
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216); border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1); color: rgba(73,73,73,1);
font-family: "Roboto Mono"; font-family: "Roboto Mono",monospace;
width: 100%; width: 100%;
text-overflow: ellipsis; text-overflow: ellipsis;
resize: vertical; resize: vertical;
@ -3893,7 +3893,7 @@ Array [
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216); border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1); color: rgba(73,73,73,1);
font-family: "Roboto Mono"; font-family: "Roboto Mono",monospace;
width: 100%; width: 100%;
text-overflow: ellipsis; text-overflow: ellipsis;
resize: vertical; resize: vertical;
@ -5096,7 +5096,7 @@ Array [
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216); border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1); color: rgba(73,73,73,1);
font-family: "Roboto Mono"; font-family: "Roboto Mono",monospace;
width: 100%; width: 100%;
text-overflow: ellipsis; text-overflow: ellipsis;
resize: vertical; resize: vertical;
@ -6451,7 +6451,7 @@ Array [
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216); border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1); color: rgba(73,73,73,1);
font-family: "Roboto Mono"; font-family: "Roboto Mono",monospace;
width: 100%; width: 100%;
text-overflow: ellipsis; text-overflow: ellipsis;
resize: vertical; resize: vertical;
@ -7727,7 +7727,7 @@ Array [
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216); border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1); color: rgba(73,73,73,1);
font-family: "Roboto Mono"; font-family: "Roboto Mono",monospace;
width: 100%; width: 100%;
text-overflow: ellipsis; text-overflow: ellipsis;
resize: vertical; resize: vertical;

4
packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/cns.spec.js.snap
View File

@ -1483,7 +1483,7 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
background-color: rgb(250,250,250); background-color: rgb(250,250,250);
color: rgb(216,216,216); color: rgb(216,216,216);
cursor: not-allowed; cursor: not-allowed;
font-family: "Roboto Mono"; font-family: "Roboto Mono",monospace;
width: 100%; width: 100%;
font-size: 0.9375rem; font-size: 0.9375rem;
line-height: normal !important; line-height: normal !important;
@ -3561,7 +3561,7 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
background-color: rgb(250,250,250); background-color: rgb(250,250,250);
color: rgb(216,216,216); color: rgb(216,216,216);
cursor: not-allowed; cursor: not-allowed;
font-family: "Roboto Mono"; font-family: "Roboto Mono",monospace;
width: 100%; width: 100%;
font-size: 0.9375rem; font-size: 0.9375rem;
line-height: normal !important; line-height: normal !important;

4
packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/metadata.spec.js.snap
View File

@ -1517,7 +1517,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216); border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1); color: rgba(73,73,73,1);
font-family: "Roboto Mono"; font-family: "Roboto Mono",monospace;
width: 100%; width: 100%;
text-overflow: ellipsis; text-overflow: ellipsis;
resize: vertical; resize: vertical;
@ -4423,7 +4423,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216); border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1); color: rgba(73,73,73,1);
font-family: "Roboto Mono"; font-family: "Roboto Mono",monospace;
width: 100%; width: 100%;
text-overflow: ellipsis; text-overflow: ellipsis;
resize: vertical; resize: vertical;

2
packages/ui-toolkit/src/base/global.js
View File

@ -3,7 +3,7 @@ import remcalc from 'remcalc';
export default ({ theme }) => css` export default ({ theme }) => css`
@import url('${theme.font.href()}'); @import url('${theme.font.href()}');
@import url('${theme.monoSpaceFont.href()}'); @import url('${theme.monoFont.href()}');
[hidden] { [hidden] {
display: none; display: none;

2
packages/ui-toolkit/src/form/base/input.js
View File

@ -99,7 +99,7 @@ const style = css`
`}; `};
${is('monospace')` ${is('monospace')`
font-family: ${props => props.theme.monoSpaceFont.family}; font-family: ${props => props.theme.monoFont.families};
&:disabled { &:disabled {
color: ${props => props.theme.text}; color: ${props => props.theme.text};

4
packages/ui-toolkit/src/text/p.js
View File

@ -15,6 +15,10 @@ export default styled.p`
color: ${props => props.theme.white} color: ${props => props.theme.white}
`}; `};
${is('monospace')`
font-family: ${props => props.theme.monoFont.families};
`};
+ p, + p,
+ small, + small,
+ h1, + h1,

15
packages/ui-toolkit/src/theme/index.js
View File

@ -86,12 +86,8 @@ export const font = {
abbrBorderColor: base.secondary, abbrBorderColor: base.secondary,
textMuted: base.secondary, textMuted: base.secondary,
family: '"Libre Franklin"', family: '"Libre Franklin"',
families: families: '"Libre Franklin", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica, sans-serif',
'"Libre Franklin", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica, sans-serif', href: () => `${document.location.protocol}//${document.location.host}/fonts/css?family=Libre+Franklin:400,500,600`,
href: () =>
`${document.location.protocol}//${
document.location.host
}/fonts/css?family=Libre+Franklin:400,500,600`,
weight: { weight: {
semibold: 600, semibold: 600,
medium: 500, medium: 500,
@ -99,13 +95,14 @@ export const font = {
} }
}; };
export const monoSpaceFont = { export const monoFont = {
semibold: base.secondary, semibold: base.secondary,
regular: base.text, regular: base.text,
abbrBorderColor: base.secondary, abbrBorderColor: base.secondary,
textMuted: base.secondary, textMuted: base.secondary,
family: '"Roboto Mono"', family: '"Roboto Mono"',
href: () => 'https://fonts.googleapis.com/css?family=Roboto+Mono:400,700', families: '"Roboto Mono", monospace',
href: () => `${document.location.protocol}//${document.location.host}/fonts/css?family=Roboto+Mono:700,400`,
weight: { weight: {
bold: 700, bold: 700,
normal: 400 normal: 400
@ -154,7 +151,7 @@ export const shadows = {
export default { export default {
...base, ...base,
font, font,
monoSpaceFont, monoFont,
inactive, inactive,
notifications, notifications,
inputError, inputError,