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 {