diff --git a/app/components/version-list/row.hbs b/app/components/version-list/row.hbs
index 945bed13a69..fef819c8462 100644
--- a/app/components/version-list/row.hbs
+++ b/app/components/version-list/row.hbs
@@ -94,21 +94,15 @@
{{/if}}
{{#if @version.featureList}}
-
- {{svg-jar "checkbox"}}
- {{@version.featureList.length}} {{if (eq @version.featureList.length 1) "Feature" "Features"}}
-
-
-
- {{#each @version.featureList as |feature|}}
- -
- {{svg-jar (if feature.isDefault "checkbox" "checkbox-empty")}}
- {{feature.name}}
-
- {{/each}}
-
-
-
+
{{/if}}
{{/if}}
@@ -117,4 +111,25 @@
-
\ No newline at end of file
+
+
+{{#if this.featuresOpen}}
+
+
+ {{#each @version.featureList as |feature|}}
+ -
+ {{svg-jar (if feature.isDefault "checkbox" "checkbox-empty")}}
+ {{feature.name}}
+
+ {{/each}}
+
+
+{{/if}}
diff --git a/app/components/version-list/row.js b/app/components/version-list/row.js
index 6eccca9108b..ad6b20cdb7b 100644
--- a/app/components/version-list/row.js
+++ b/app/components/version-list/row.js
@@ -10,6 +10,7 @@ export default class VersionRow extends Component {
@service session;
@tracked focused = false;
+ @tracked featuresOpen = false;
get releaseTrackTitle() {
let { version } = this.args;
@@ -55,4 +56,8 @@ export default class VersionRow extends Component {
@action setFocused(value) {
this.focused = value;
}
+
+ @action toggleDropdown() {
+ this.featuresOpen = !this.featuresOpen;
+ }
}
diff --git a/app/components/version-list/row.module.css b/app/components/version-list/row.module.css
index 0af001cff18..afd3a22224e 100644
--- a/app/components/version-list/row.module.css
+++ b/app/components/version-list/row.module.css
@@ -222,10 +222,43 @@
text-transform: none;
}
+.features-button {
+ text-align: center;
+ padding-top: var(--space-4xs);
+ position: relative;
+ cursor: help;
+ svg {
+ height: 1em;
+ width: auto;
+ margin-right: var(--space-4xs);
+ margin-bottom: -.2em;
+ }
+}
+
+.features-panel {
+ margin-top: var(--space-2xs);
+ letter-spacing: .7px;
+ font-size: 13px;
+ svg {
+ height: 1em;
+ width: auto;
+ margin-right: var(--space-4xs);
+ margin-bottom: -.1em;
+ }
+}
+
.feature-list {
padding: 0;
margin: var(--space-2xs) var(--space-3xs);
list-style: none;
+ user-select: text;
+
+ li {
+ padding: var(--space-4xs);
+ }
+ li svg {
+ vertical-align: middle;
+ }
}
.yank-button {