Implement addon version and channel details, stylelint.

src/olympia/devhub/templates/devhub/new-landing/components/my-addons.html

@@ -1,3 +1,19 @@
+{% macro render_status(addon) %}
+  {% if addon.status == amo.STATUS_NULL %}
+    {% set url = url('devhub.submit.resume', addon.slug) %}
+  {% else %}
+    {% set url = addon.get_dev_url('versions') %}
+  {% endif %}
+  {% if addon.status != amo.STATUS_DISABLED and addon.disabled_by_user %}
+    {% set status_text = _('Invisible') %}
+  {% else %}
+    {% set status_text = addon.STATUS_CHOICES[addon.status] %}
+  {% endif %}
+  <a class="DevHub-MyAddons-version-{{ status_class(addon) }}" href="{{ url }}">
+    {{ status_text }}
+  </a>
+{% endmacro %}
+
 <div class="DevHub-MyAddons content">
   <div>
     <div class="DevHub-MyAddons-whatsnew-container">
@@ -32,22 +48,56 @@
     {% if recent_addons %}
       <div class="DevHub-MyAddons-list">
         {% for item in recent_addons %}
+          {% set addon = item.addon %}
+
           <div class="DevHub-MyAddons-item">
-            <img class="DevHub-MyAddons-item-icon" src="{{ item.addon.get_icon_url(64) }}" alt="">
+            <img class="DevHub-MyAddons-item-icon" src="{{ addon.get_icon_url(64) }}" alt="">
             <div class="DevHub-MyAddons-item-details">
-              <span>{{ item.addon.name }}</span>
-              <a href="{{ item.addon.get_dev_url('edit') }}">{{ _('Edit Listing') }}</a>
+              <span class="DevHub-MyAddons-item-name">{{ addon.name }}</span>
+              <a href="{{ addon.get_dev_url('edit') }}">{{ _('Edit Listing') }}</a>
+
+              <div class="DevHub-MyAddons-item-versions">
+                {% if addon.has_listed_versions() %}
+                  {% if addon.current_version %}
+                    <div class="DevHub-MyAddons-item-version-details">
+                      {% if addon.has_unlisted_versions() %}
+                        <span class="DevHub-MyAddons-item-channel-listed">{{ _('AMO') }}</span>
+                      {% endif %}
+
+                      <span class="DevHub-MyAddons-item-version">
+                        {{ addon.current_version.version }}
+                      </span>
+
+                      {{ render_status(addon) }}
+                    </div>
+                  {% endif %}
+                {% endif %}
+
+                {% set latest_unlisted_version=addon.find_latest_version(channel=amo.RELEASE_CHANNEL_UNLISTED) %}
+
+                {% if latest_unlisted_version %}
+                  <div class="DevHub-MyAddons-item-version-details">
+                    {% if addon.has_listed_versions() %}
+                      <span class="DevHub-MyAddons-item-channel-unlisted">{{ _('Self-hosted') }}</span>
+                    {% endif %}
+
+                    <span class="DevHub-MyAddons-item-version">
+                      {{ latest_unlisted_version.version }}
+                    </span>
+                  </div>
+                {% endif %}
+              </div>
             </div>
 
             <span class="DevHub-MyAddons-item-modified">
-              {% if item.addon.last_updated %}
+              {% if addon.last_updated %}
                 {{ _('Last Updated:') }}
                 {# L10n: {0} is a date. dennis-ignore: E201,E202,W202 #}
-                {{ item.addon.last_updated|datetime(_('%%b %%e, %%Y')) }}
+                {{ addon.last_updated|datetime(_('%%b %%e, %%Y')) }}
               {% else %}
                 {{ _('Created:') }}
                 {# L10n: {0} is a date. dennis-ignore: E201,E202,W202 #}
-                {{ item.addon.created|datetime(_('%%b %%e, %%Y')) }}
+                {{ addon.created|datetime(_('%%b %%e, %%Y')) }}
               {% endif %}
             </span>
           </div>

static/css/devhub/new-landing/sections/my-addons.less

@@ -2,9 +2,6 @@
   max-width: 32em;
 }
 
-.DevHub-MyAddons-list {
-}
-
 .DevHub-MyAddons-item {
   display: flex;
   align-items: center;
@@ -20,7 +17,7 @@
 .DevHub-MyAddons-item-details {
   margin-left: 25px;
 
-  span {
+  .DevHub-MyAddons-item-name {
     font-size: 24px;
     font-weight: 400;
   }
@@ -30,6 +27,43 @@
     font-size: 15px;
     text-decoration: none;
     color: @color-button-default;
+
+    &.DevHub-MyAddons-version-status-incomplete,
+    &.DevHub-MyAddons-version-status-deleted,
+    &.DevHub-MyAddons-version-status-rejected,
+    &.DevHub-MyAddons-version-status-disabled,
+    &.DevHub-MyAddons-version-status-none {
+      color: #9b9898;
+    }
+
+    &.DevHub-MyAddons-version-status-nominated {
+      color: #ff9216;
+    }
+
+    &.DevHub-MyAddons-version-status-approved {
+      color: #329902;
+    }
+
+    &.DevHub-MyAddons-version-status-admin-disabled {
+      color: #d92215;
+    }
+  }
+
+  .DevHub-MyAddons-item-channel-listed,
+  .DevHub-MyAddons-item-channel-unlisted {
+    border-radius: 4px;
+    padding: 2px 5px;
+    font-size: 13px;
+    font-weight: 500;
+    color: #fff;
+  }
+
+  .DevHub-MyAddons-item-channel-listed {
+    background-color: #01bdad;
+  }
+
+  .DevHub-MyAddons-item-channel-unlisted {
+    background-color: #7a2f7a;
   }
 }
 
@@ -38,6 +72,15 @@
   height: 48px;
 }
 
+.DevHub-MyAddons-item-versions {
+  display: flex;
+  justify-content: space-between;
+}
+
+.DevHub-MyAddons-item-version-details {
+  width: 320px;
+}
+
 .DevHub-MyAddons-item-buttons {
   margin-top: 20px;
   display: flex;
@@ -63,15 +106,15 @@
   flex-flow: row;
   justify-content: space-between;
   padding: 30px;
-  margin: 30px 0 60px 0;
+  margin: 30px 0 60px;
   position: relative;
-  background-image: url(../../../img/developers/new-landing/whatsnew-background.png);
+  background-image: url("../../../img/developers/new-landing/whatsnew-background.png");
   background-repeat: no-repeat;
   background-position: right 10px bottom 10px;
 
   &::before {
     content: '';
-    background-image: url(../../../img/developers/new-landing/whatsnew-rocket.png);
+    background-image: url("../../../img/developers/new-landing/whatsnew-rocket.png");
     background-repeat: no-repeat;
     background-size: contain;
     position: absolute;
@@ -81,7 +124,7 @@
     top: 28px;
 
     @media @retina {
-      background-image: url(../../../img/developers/new-landing/whatsnew-rocket-2x.png);
+      background-image: url("../../../img/developers/new-landing/whatsnew-rocket-2x.png");
     }
   }
 
@@ -93,7 +136,8 @@
     text-align: right;
   }
 
-  p, .Button {
+  p,
+  .Button {
     font-size: 14px;
     margin-top: 0;
   }