Merge pull request #451 from pulsar-edit/settings-view-badges

`settings-view` Support for Badges

packages/settings-view/lib/atom-io-client.coffee

@@ -219,8 +219,8 @@ class AtomIoClient
             if body.filter
               resolve(
                 body.filter (pkg) -> pkg.releases?.latest?
-                    .map ({readme, metadata, downloads, stargazers_count, repository}) ->
-                      Object.assign metadata, {readme, downloads, stargazers_count, repository: repository.url}
+                    .map ({readme, metadata, downloads, stargazers_count, repository, badges}) ->
+                      Object.assign metadata, {readme, downloads, stargazers_count, badges, repository: repository.url}
               )
             else
             error = new Error("Searching for \u201C#{query}\u201D failed.\n")

packages/settings-view/lib/badge-view.js

@@ -0,0 +1,118 @@
+/** @babel */
+/** @jsx etch.dom */
+
+import etch from 'etch'
+
+export default class BadgeView {
+  constructor(badge) {
+    this.badge = badge;
+
+    etch.initialize(this)
+  }
+
+  render () {
+    const icons = this.getIcons();
+    const classes = this.getClasses();
+    const badge = this.badge;
+
+    if (this.hasLink()) {
+      if (this.hasText()) {
+        // Link and Text
+
+        return (
+          <a href={badge.link}>
+            <span class={classes}>
+              <i class={icons}></i>
+              {badge.title}: <span class="badge-expandable">...</span><span class="badge-text"> {badge.text}</span>
+            </span>
+          </a>
+        );
+      } else {
+        // Link no text
+
+        return (
+          <a href={badge.link}>
+            <span class={classes}>
+              <i class={icons}></i>
+              {badge.title}
+            </span>
+          </a>
+        );
+      }
+    } else {
+      if (this.hasText()) {
+        // No Link, has Text
+
+        return (
+          <span class={classes}>
+            <i class={icons}></i>
+            {badge.title}: <span class="badge-expandable">...</span><span class="badge-text"> {badge.text}</span>
+          </span>
+        );
+      } else {
+        // No Link, no text
+
+        return (
+          <span class={classes}>
+            <i class={icons}></i>
+            {badge.title}
+          </span>
+        );
+      }
+    }
+
+  }
+
+  hasLink () {
+    if (typeof this.badge.link === "string") {
+      return true;
+    }
+    return false;
+  }
+
+  hasText () {
+    if (typeof this.badge.text === "string") {
+      return true;
+    }
+    return false;
+  }
+
+  getIcons () {
+    switch(this.badge.type) {
+      case "warn":
+        return "icon icon-alert";
+        break;
+      case "success":
+        return "icon icon-check";
+        break;
+      case "info":
+        return "icon icon-info";
+        break;
+      default:
+        return "";
+        break;
+    }
+  }
+
+  getClasses () {
+    switch(this.badge.type) {
+      case "warn":
+        return "badge badge-error";
+        break;
+      case "success":
+        return "badge badge-success";
+        break;
+      case "info":
+        return "badge badge-info";
+        break;
+      default:
+        return "badge";
+        break;
+    }
+  }
+
+  update () {}
+
+  destroy () {}
+
+}

packages/settings-view/lib/package-card.js

@@ -4,6 +4,7 @@
 import {CompositeDisposable, Disposable} from 'atom'
 import {shell} from 'electron'
 import etch from 'etch'
+import BadgeView from './badge-view'
 
 import {ownerFromRepository} from './utils'
 
@@ -46,6 +47,7 @@ export default class PackageCard {
     this.handlePackageEvents()
     this.handleButtonEvents(options)
     this.loadCachedMetadata()
+    this.addBadges()
 
     // themes have no status and cannot be dis/enabled
     if (this.type === 'theme') {
@@ -91,6 +93,7 @@ export default class PackageCard {
             <span className='package-version'>
               <span ref='versionValue' className='value'>{String(this.pack.version)}</span>
             </span>
+            <span ref='badges'></span>
           </h4>
           <span ref='packageDescription' className='package-description'>{description}</span>
           <div ref='packageMessage' className='package-message' />
@@ -322,6 +325,17 @@ export default class PackageCard {
     }
   }
 
+  addBadges() {
+    if (Array.isArray(this.pack.badges)) {
+      // This safety check is especially needed, as any cached package
+      // data will not contain the badges field
+      for (const badge of this.pack.badges) {
+        let badgeView = new BadgeView(badge)
+        this.refs.badges.appendChild(badgeView.element)
+      }
+    }
+  }
+
   // Section: disabled state updates
 
   updateDisabledState () {

packages/settings-view/lib/package-detail-view.js

@@ -22,6 +22,12 @@ const NORMALIZE_PACKAGE_DATA_README_ERROR = 'ERROR: No README data found!'
 export default class PackageDetailView {
   constructor (pack, settingsView, packageManager, snippetsProvider) {
     this.pack = pack
+    if (Array.isArray(pack.badges)) {
+      // Badges are only available on the object when loading their data from the
+      // API server. Once local the badge data is lost.
+      // Plus we want to modify the original item to ensure further changes can take effect properly
+      pack.metadata.badges = pack.badges;
+    }
     this.settingsView = settingsView
     this.packageManager = packageManager
     this.snippetsProvider = snippetsProvider

packages/settings-view/styles/package-card.less

@@ -159,6 +159,22 @@
       line-height: 1.4;
     }
 
+    .badge:hover .badge-text {
+      display: contents;
+    }
+
+    .badge:hover .badge-expandable {
+      display: none;
+    }
+
+    .badge-expandable {
+      display: contents;
+    }
+
+    .badge-text {
+      display: none;
+    }
+
     .meta {
       display: flex;
       flex-wrap: wrap;