diff --git a/app/components/dependency-list/row.hbs b/app/components/dependency-list/row.hbs
index 1b9243ba5c..dd4b48bcb9 100644
--- a/app/components/dependency-list/row.hbs
+++ b/app/components/dependency-list/row.hbs
@@ -28,11 +28,33 @@
{{@dependency.crate_id}}
-
- {{#if @dependency.optional}}
+ {{#if @dependency.optional}}
+
optional
- {{/if}}
-
+
+ {{/if}}
+
+ {{#if this.featuresDescription}}
+
+ {{! extra for better tooltip alignment }}
+
+ {{this.featuresDescription}}
+
+
+
+ -
+ {{svg-jar (if @dependency.default_features "checkbox" "checkbox-empty")}} default features
+
+ {{#each @dependency.features as |feature|}}
+ -
+ {{svg-jar "checkbox"}} {{feature}}
+
+ {{/each}}
+
+
+
+
+ {{/if}}
{{#if (or this.description this.loadCrateTask.isRunning)}}
diff --git a/app/components/dependency-list/row.js b/app/components/dependency-list/row.js
index 75585bc167..967c0a14d6 100644
--- a/app/components/dependency-list/row.js
+++ b/app/components/dependency-list/row.js
@@ -26,6 +26,19 @@ export default class VersionRow extends Component {
return this.loadCrateTask.lastSuccessful?.value?.description;
}
+ get featuresDescription() {
+ let { default_features: defaultFeatures, features } = this.args.dependency;
+ let numFeatures = features.length;
+
+ if (numFeatures !== 0) {
+ return defaultFeatures
+ ? `${numFeatures} extra feature${numFeatures > 1 ? 's' : ''}`
+ : `only ${numFeatures} feature${numFeatures > 1 ? 's' : ''}`;
+ } else if (!defaultFeatures) {
+ return 'no default features';
+ }
+ }
+
@task *loadCrateTask() {
let { dependency } = this.args;
return yield this.store.findRecord('crate', dependency.crate_id);
diff --git a/app/components/dependency-list/row.module.css b/app/components/dependency-list/row.module.css
index ef9f7dda70..f453872ee3 100644
--- a/app/components/dependency-list/row.module.css
+++ b/app/components/dependency-list/row.module.css
@@ -94,6 +94,7 @@
text-transform: uppercase;
letter-spacing: .7px;
font-size: 13px;
+ margin-right: 15px;
a {
position: relative;
@@ -115,6 +116,32 @@
text-transform: none;
letter-spacing: normal;
}
+
+ @media only screen and (max-width: 550px) {
+ display: block;
+ margin-top: 10px;
+ }
+}
+
+.optional-label {
+ composes: metadata;
+}
+
+.features-label {
+ composes: metadata;
+}
+
+.feature-list {
+ padding: 0;
+ margin: 10px 5px;
+ list-style: none;
+
+ svg {
+ height: 1em;
+ width: auto;
+ margin-right: 2px;
+ margin-bottom: -.1em;
+ }
}
.description {