Auto merge of #3251 - Turbo87:version-list, r=locks

Extract and improve `VersionList::Row` component

### Before

<img width="573" alt="Bildschirmfoto 2021-02-07 um 19 26 01" src="https://user-images.githubusercontent.com/141300/107155751-6ec0fc80-697a-11eb-8d4b-4300ee287741.png">

### After

<img width="570" alt="Bildschirmfoto 2021-02-07 um 19 25 45" src="https://user-images.githubusercontent.com/141300/107155753-72ed1a00-697a-11eb-849a-f6f4d27ee337.png">

Author: bors

app/components/version-list/row.hbs

@@ -0,0 +1,23 @@
+<div local-class="row" ...attributes>
+  <div>
+    <LinkTo
+      @route="crate.version"
+      @model={{@version.num}}
+      local-class="num-link"
+    >
+      {{@version.num}}
+    </LinkTo>
+
+    {{#if @version.yanked}}
+      <span local-class='yanked'>yanked</span>
+    {{/if}}
+  </div>
+
+  <span title={{date-format @version.created_at 'PPP'}} local-class="date">
+    {{date-format-distance-to-now @version.created_at addSuffix=true}}
+  </span>
+
+  {{#if this.isOwner}}
+    <YankButton @version={{@version}} local-class="yank-button" />
+  {{/if}}
+</div>

app/components/version-list/row.js

@@ -0,0 +1,12 @@
+import { computed } from '@ember/object';
+import { inject as service } from '@ember/service';
+import Component from '@glimmer/component';
+
+export default class VersionRow extends Component {
+  @service session;
+
+  @computed('args.version.crate.owner_user', 'session.currentUser.id')
+  get isOwner() {
+    return this.args.version.crate?.owner_user?.findBy('id', this.session.currentUser?.id);
+  }
+}

app/components/version-list/row.module.css

@@ -0,0 +1,45 @@
+.row {
+    display: flex;
+    align-items: center;
+    position: relative;
+    padding: 20px;
+    transition: background-color 300ms;
+
+    &:hover {
+        background-color: var(--grey200);
+        transition: background-color 0ms;
+    }
+
+    & >:first-child {
+        flex-grow: 1;
+    }
+}
+
+.num-link {
+    font-variant-numeric: tabular-nums;
+
+    &::after {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+    }
+}
+
+.date {
+    composes: small from '../../styles/shared/typography.module.css';
+    display: inline-block;
+    margin-left: 20px;
+    position: relative;
+}
+
+.yanked {
+    composes: yanked from '../../styles/shared/typography.module.css';
+}
+
+.yank-button {
+    position: relative;
+    margin-left: 10px;
+}

app/controllers/crate/versions.js

@@ -1,6 +1,7 @@
 :root {
     --violet800: hsl(252, 44%, 24%);
     --grey900: hsl(200, 15%, 19%);
+    --grey200: hsl(200, 17%, 96%);
     --green800: hsl(115, 31%, 31%);
     --yellow500: hsl(44, 100%, 60%);
 

app/styles/application.module.css

@@ -10,35 +10,17 @@
     margin-top: 10px;
     padding: 0 20px;
     background-color: white;
-}
+    list-style: none;
 
-.row {
-    display: flex;
-    justify-content: space-between;
-    flex-wrap: wrap;
-    padding: 20px 0;
-    border-bottom: 2px solid #d5d3cb;
+    > li {
+        border-bottom: 2px solid #d5d3cb;
 
-    &:last-of-type {
-        border: none;
+        &:last-of-type {
+            border: none;
+        }
     }
 }
 
-.date {
-    composes: small from '../shared/typography.module.css';
-    display: inline-block;
-    margin-left: 20px;
-}
-
-.yanked {
-    composes: yanked from '../shared/typography.module.css';
-}
-
-.arrow {
-    display: inline-block;
-    float: right;
-
-    svg {
-        background: #EEECDD;
-    }
+.row {
+    margin: 0 -20px;
 }

app/styles/crate/versions.module.css

@@ -8,24 +8,10 @@
   {{date-format this.model.created_at 'PPP'}}
 </span>
 
-<div local-class="list">
+<ul local-class="list">
   {{#each this.model.versions as |version|}}
-    <div local-class="row">
-      <div>
-        <LinkTo @route="crate.version" @model={{version.num}}>{{ version.num }}</LinkTo>
-
-        <span local-class="date">{{date-format version.created_at 'PPP'}}</span>
-        {{#if version.yanked}}
-          <span local-class='yanked'>yanked</span>
-        {{/if}}
-      </div>
-      {{#if this.isOwner}}
-        <YankButton @version={{version}} />
-      {{else}}
-        <LinkTo @route="crate.version" @model={{version.num}} local-class="arrow">
-          {{svg-jar "right-arrow"}}
-        </LinkTo>
-      {{/if}}
-    </div>
+    <li>
+      <VersionList::Row @version={{version}} local-class="row" />
+    </li>
   {{/each}}
-</div>
+</ul>