Merge pull request #206 from na3d/common-styles-fix

Common styles fix
linode · Jul 1, 2016 · b35b380 · b35b380
2 parents c9d3c94 + e74edfd
commit b35b380
Show file tree

Hide file tree

Showing 9 changed files with 165 additions and 51 deletions.
diff --git a/scss/layout/linode-details.scss b/scss/layout/linode-details.scss
@@ -71,7 +71,7 @@
         .text-muted {
             font-size: 70%;
         }
-        a {
+        li a {
             color: $linode-black;
             text-decoration: none;
         }
@@ -80,6 +80,15 @@
         }
     }
 
+    .backups-status a {
+        color: $linode-blue;
+        text-decoration: none;
+        &:hover {
+            color: $linode-dark-blue;
+            text-decoration: underline;
+        }
+    }
+
     .linode-label-col {
         color: #333;
         margin: 0;

diff --git a/scss/manager.scss b/scss/manager.scss
@@ -338,7 +338,7 @@ hr {
         color: $linode-black;
     }
 
-    &.btn-help {
+    &.btn-help, &.btn-warning {
         $size: 24px;
         .fa {
             color: $linode-lightest-black;
@@ -347,7 +347,7 @@ hr {
         background-color: $linode-gray;
         font-size: $size / 2;
         line-height: $size - 2px;
-        padding: 0;
+        padding: 0 0 0 0.1rem;
         margin: 0 1rem;
         display: inline-block;
         width: $size;
@@ -371,6 +371,23 @@ hr {
         }
     }
 
+    &.btn-warning {
+        .fa {
+            color: $linode-white;
+        }
+        background-color: $linode-red;
+        border-color: $linode-red;
+
+        &:hover {
+            background-color: $linode-white;
+            border: $linode-white;
+
+            .fa {
+                color: $linode-red;
+            }
+        }
+    }
+
     &.btn-primary {
         background: $linode-blue;
         border: 1px solid $linode-blue;
@@ -408,6 +425,13 @@ hr {
     }
 }
 
+.datacenter-style img {
+    margin-left: 0.5rem;
+    -webkit-filter: contrast(70%) saturate(90%);
+    filter: contrast(70%) saturate(90%);
+    opacity: 0.7;
+}
+
 input[type=checkbox] {
     padding: 0;
     margin: 0;

diff --git a/src/components/WarningButton.js b/src/components/WarningButton.js
@@ -0,0 +1,17 @@
+import React, { PropTypes } from 'react';
+import { Link } from 'react-router';
+
+export default function WarningButton(props) {
+  return (
+    <Link
+      to={props.to}
+      className="btn btn-warning"
+      target={props.target ? props.target : ''}
+    ><i className="fa fa-exclamation"></i></Link>
+  );
+}
+
+WarningButton.propTypes = {
+  to: PropTypes.string.isRequired,
+  target: PropTypes.string,
+};
diff --git a/src/linodes/components/Linode.js b/src/linodes/components/Linode.js
@@ -1,6 +1,10 @@
 import React, { PropTypes } from 'react';
 import { Link } from 'react-router';
-import { LinodeStatesReadable } from '~/constants';
+import { flags, distros as distroAssets } from '~/assets';
+import {
+  LinodeStatesReadable,
+  countryMap,
+} from '~/constants';
 import moment from 'moment';
 
 function renderPowerButton(props) {
@@ -24,13 +28,46 @@ renderPowerButton.propTypes = {
   onReboot: PropTypes.func,
 };
 
-function renderBackupStatus(linode) {
+export function renderPlanStyle(planStr) {
+  const plan = planStr.split(' ');
+
+  return `${plan[0]} ${plan[1] / 1024}G`;
+}
+
+export function renderDistroStyle(linode) {
+  return (
+    <span className="distro-style">
+      {linode.distribution.label}
+      <img
+        src={distroAssets[linode.distribution.vendor]
+          ? distroAssets[linode.distribution.vendor] : '//placehold.it/50x50'}
+        alt={linode.distribution.vendor}
+        width="12" height="12"
+      />
+    </span>
+  );
+}
+
+export function renderDatacenterStyle(linode) {
+  return (
+    <span className="datacenter-style">
+      {linode.datacenter.label}
+      <img
+        src={flags[countryMap[linode.datacenter.id]]
+          ? flags[countryMap[linode.datacenter.id]] : '//placehold.it/50x50'}
+        height="15" width="20" alt={linode.datacenter.label}
+      />
+    </span>
+  );
+}
+
+export function renderBackupStatus(linode) {
   return (
     <span className="backup-status">
       {linode.backups.enabled
         ?
         <span>
-          Last backup: {moment(linode.backups.last_backup).fromNow()}
+          {moment(linode.backups.last_backup).fromNow()}
         </span>
         :
         <span>
@@ -71,10 +108,11 @@ function renderCard(props) {
           </li>
           <li>
             <span className="fa fa-globe"></span>
-            <span>{linode.datacenter.label}</span>
+            <span>{renderDatacenterStyle(linode)}</span>
           </li>
           <li>
             <span className="fa fa-database"></span>
+            {linode.backups.enabled ? 'Last backup: ' : null}
             {renderBackupStatus(linode)}
           </li>
         </ul>
@@ -111,9 +149,10 @@ function renderRow(props) {
         {linode.ip_addresses['public'].ipv4[0]}, {linode.ip_addresses['public'].ipv6}
       </td>
       <td>
-        {linode.datacenter.label}
+        {renderDatacenterStyle(linode)}
       </td>
       <td>
+        {linode.backups.enabled ? 'Last backup: ' : null}
         {renderBackupStatus(linode)}
       </td>
       <td>

diff --git a/src/linodes/components/ServiceSelection.js b/src/linodes/components/ServiceSelection.js
@@ -1,9 +1,11 @@
 import React, { Component, PropTypes } from 'react';
+import { renderPlanStyle } from '~/linodes/components/Linode';
 
 export default class ServiceSelection extends Component {
   constructor() {
     super();
     this.renderPlan = this.renderPlan.bind(this);
+    this.renderPlanStyle = renderPlanStyle.bind(this);
   }
 
   renderHeader() {
@@ -27,7 +29,7 @@ export default class ServiceSelection extends Component {
         onClick={() => onServiceSelected(plan)}
       >
         <header>
-          <div className="title">{plan.label}</div>
+          <div className="title">{this.renderPlanStyle(plan.label)}</div>
         </header>
         <div className="plan-contents">
           <div className="pricing">${hourlyPrice / 100}/hr (${monthlyPrice / 100}/mo)</div>

diff --git a/src/linodes/layouts/LinodeGeneral.js b/src/linodes/layouts/LinodeGeneral.js
@@ -3,9 +3,13 @@ import { connect } from 'react-redux';
 import { Link } from 'react-router';
 import _ from 'lodash';
 
+import {
+  renderBackupStatus,
+  renderDistroStyle,
+  renderDatacenterStyle,
+  renderPlanStyle,
+} from '~/linodes/components/Linode';
 import { getLinode, loadLinode } from './LinodeDetailPage';
-import { countryMap } from '~/constants';
-import { flags, distros as distroAssets } from '~/assets';
 import { ResponsiveLineChart } from '~/components/ResponsiveCharts';
 
 
@@ -14,6 +18,11 @@ export class LinodeGeneral extends Component {
     super();
     this.getLinode = getLinode.bind(this);
     this.loadLinode = loadLinode.bind(this);
+    this.renderBackupStatus = renderBackupStatus.bind(this);
+    this.renderDistroStyle = renderDistroStyle.bind(this);
+    this.renderDatacenterStyle = renderDatacenterStyle.bind(this);
+    this.renderPlanStyle = renderPlanStyle.bind(this);
+    this.componentDidMount = loadLinode.bind(this);
     this.renderDetails = this.renderDetails.bind(this);
     this.renderGraphs = this.renderGraphs.bind(this);
   }
@@ -110,45 +119,36 @@ export class LinodeGeneral extends Component {
               Backups
             </div>
             <div className="col-sm-8 linode-content-col right">
-              {linode.backups.enabled
-                ? linode.backups.last_backup
-                : <span>Backups not enabled.</span>}
+              {this.renderBackupStatus(linode)}
             </div>
           </div>
           <div className="row">
             <div className="col-sm-4 linode-label-col left">
               Plan
             </div>
             <div className="col-sm-8 linode-content-col right">
-              {linode.services.linode}
+              {this.renderPlanStyle(linode.services.linode)}
             </div>
           </div>
           <div className="row">
             <div className="col-sm-4 linode-label-col left">
               Datacenter
             </div>
             <div className="col-sm-8 linode-content-col right">
-              {linode.datacenter.label}
-              <img
-                src={flags[countryMap[linode.datacenter.id]]
-                  ? flags[countryMap[linode.datacenter.id]] : '//placehold.it/50x50'}
-                height="15" width="20" alt={linode.datacenter.label}
-              />
+              {this.renderDatacenterStyle(linode)}
             </div>
           </div>
-          <div className="row">
-            <div className="col-sm-4 linode-label-col left">
-              Distribution
-            </div>
-            <div className="col-sm-8 linode-content-col right">
-              {linode.distribution.label}
-              <img
-                src={distroAssets[linode.distribution.vendor]
-                  ? distroAssets[linode.distribution.vendor] : '//placehold.it/50x50'}
-                width="12" height="12" alt={linode.distribution.vendor}
-              />
+          {linode.distribution != null ?
+            <div className="row">
+              <div className="col-sm-4 linode-label-col left">
+                Distribution
+              </div>
+              <div className="col-sm-8 linode-content-col right">
+                {this.renderDistroStyle(linode)}
+              </div>
             </div>
-          </div>
+            : null
+          }
         </div>
         <div className="col-sm-7 right">
           <h2>Access</h2>

diff --git a/test/components/WarningButton.spec.js b/test/components/WarningButton.spec.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { expect } from 'chai';
+import WarningButton from '~/components/WarningButton';
+
+describe('components/WarningButton', () => {
+  it('renders warning button with target blank', () => {
+    const button = shallow(
+      <WarningButton to="http://example.org" />
+    );
+
+    expect(button.find('Link').props().to).to.equal('http://example.org');
+    expect(button.find('Link').props().target).to.equal('');
+  });
+
+  it('renders warning button with target _parent', () => {
+    const button = shallow(
+      <WarningButton to="http://example.org" target="_parent" />
+    );
+
+    expect(button.find('Link').props().to).to.equal('http://example.org');
+    expect(button.find('Link').props().target).to.equal('_parent');
+  });
+});
diff --git a/test/linodes/components/Linode.spec.js b/test/linodes/components/Linode.spec.js
@@ -39,15 +39,19 @@ describe('linodes/components/Linode', () => {
   });
 
   it('renders the datacenter', () => {
+    const datacenter = 'Newark, NJ';
     const linode = shallow(
       <Linode
         linode={testLinode}
         isSelected={false}
         isRow={false}
       />);
 
-    expect(linode.contains(<span>Newark, NJ</span>))
+    expect(linode.contains(datacenter))
       .to.equal(true);
+    expect(linode.find('.datacenter-style').find('img').props())
+      .to.have.property('alt')
+      .to.equal(datacenter);
   });
 
   it('renders the selected class', () => {