From 495c119ba1ea55a8eb9bd6a92b2d5f2f29b509e8 Mon Sep 17 00:00:00 2001 From: Tobias Bieniek Date: Sat, 30 Jan 2021 00:36:49 +0100 Subject: [PATCH] Extract `CrateSidebar` component --- app/components/crate-sidebar.hbs | 154 ++++++++++++++++++++++++ app/components/crate-sidebar.js | 24 ++++ app/components/crate-sidebar.module.css | 76 ++++++++++++ app/controllers/crate/version.js | 8 +- app/styles/crate/version.module.css | 80 ------------ app/templates/crate/version.hbs | 151 +---------------------- 6 files changed, 256 insertions(+), 237 deletions(-) create mode 100644 app/components/crate-sidebar.hbs create mode 100644 app/components/crate-sidebar.js create mode 100644 app/components/crate-sidebar.module.css diff --git a/app/components/crate-sidebar.hbs b/app/components/crate-sidebar.hbs new file mode 100644 index 00000000000..87654e3fe06 --- /dev/null +++ b/app/components/crate-sidebar.hbs @@ -0,0 +1,154 @@ +
+
+
+
Last Updated
+
+ {{date-format-distance-to-now @crate.updated_at addSuffix=true}} +
+
+ + {{#if @version.crate_size}} +
+
Crate Size
+
{{pretty-bytes @version.crate_size}}
+
+ {{/if}} + +
+

Owners

+ + {{#if this.isOwner}} +

+ + Manage owners + +

+ {{/if}} + +
    + {{#each @crate.owner_team as |team|}} +
  • + + + +
    • + {{/each}} + + {{#each @crate.owner_user as |user|}} +
  • + + + +
    • + {{/each}} +
+
+ +
+

Authors

+
    + {{#each @version.authorNames as |author|}} +
  • {{ format-email author }}
    • + {{/each}} +
+
+
+ +
+ {{#if @version.license}} +
+

License

+

{{ @version.license }}

+
+ {{/if}} + + {{#unless @crate.keywords.isPending}} + {{#if @crate.keywords}} +
+

Keywords

+
    + {{#each @crate.keywords as |keyword|}} +
  • {{keyword.id}}
    • + {{/each}} +
+
+ {{/if}} + {{/unless}} + + {{#unless @crate.categories.isPending}} + {{#if @crate.categories}} +
+

Categories

+
    + {{#each @crate.categories as |category|}} +
  • {{category.category}}
    • + {{/each}} +
+
+ {{/if}} + {{/unless}} + +
+

Versions

+
    + {{#each this.smallSortedVersions as |version|}} +
  • + + {{ version.num }} + + {{date-format version.created_at "PP"}} + {{#if version.yanked}} + yanked + {{/if}} +
    • + {{/each}} +
+ {{#if this.hasMoreVersions}} + + show all {{ @crate.versions.length }} versions + + {{/if}} +
+ +
+

Dependencies

+
    + {{#each @version.normalDependencies as |dep|}} +
    • + {{else}} + {{#if @version.loadDepsTask.isRunning}} +
  • Loading…
    • + {{else}} +
  • None
    • + {{/if}} + {{/each}} +
+
+ + {{#if @version.buildDependencies}} +
+

Build-Dependencies

+
    + {{#each @version.buildDependencies as |dep|}} +
    • + {{/each}} +
+
+ {{/if}} + + {{#if @version.devDependencies}} +
+

Dev-Dependencies

+
    + {{#each @version.devDependencies as |dep|}} +
    • + {{/each}} +
+
+ {{/if}} +
+
\ No newline at end of file diff --git a/app/components/crate-sidebar.js b/app/components/crate-sidebar.js new file mode 100644 index 00000000000..2929cc6bf27 --- /dev/null +++ b/app/components/crate-sidebar.js @@ -0,0 +1,24 @@ +import { computed } from '@ember/object'; +import { gt, readOnly } from '@ember/object/computed'; +import { inject as service } from '@ember/service'; +import Component from '@glimmer/component'; + +const NUM_VERSIONS = 5; + +export default class DownloadGraph extends Component { + @service session; + + @computed('args.crate.owner_user', 'session.currentUser.id') + get isOwner() { + return this.args.crate.owner_user.findBy('id', this.session.currentUser?.id); + } + + @readOnly('args.crate.versions') sortedVersions; + + @computed('sortedVersions') + get smallSortedVersions() { + return this.sortedVersions.slice(0, NUM_VERSIONS); + } + + @gt('sortedVersions.length', NUM_VERSIONS) hasMoreVersions; +} diff --git a/app/components/crate-sidebar.module.css b/app/components/crate-sidebar.module.css new file mode 100644 index 00000000000..81edbc98958 --- /dev/null +++ b/app/components/crate-sidebar.module.css @@ -0,0 +1,76 @@ +.authorship { + .top, .bottom { + display: flex; + flex-wrap: wrap; + + > * { margin-right: 1em; } + } + + .top > * { flex: 1 } + + @media only screen and (min-width: 890px) { + flex: 3; + border-left: 2px solid var(--gray-border); + padding-left: 20px; + + .top, .bottom { + flex-direction: column; + } + + ul { + padding-left: 20px; + } + } + + @media only screen and (max-width: 480px) { + .top, .bottom { + flex-direction: column; + } + } +} + +.last-update, +.crate-size { + composes: small from '../styles/shared/typography.module.css'; + line-height: 25px; +} + +.date { + font-weight: bold; + margin-bottom: 40px; +} + +/* + Since crate_size is a new field, older crates won't have it. + Preserve behaviour for older crates. For newer ones, keep + `Crate Size` closer to last updated. +*/ +.date-with-small-margin-bot { + font-weight: bold; + margin-bottom: 20px; +} + +.size { + font-weight: bold; + margin-bottom: 40px; +} + +ul.owners, ul.keywords { + display: flex; + flex-wrap: wrap; + list-style: none; + padding: 0; + margin: 0; + + li { + margin: 0 7px 7px 0; + } +} + +.yanked { + composes: yanked from '../styles/shared/typography.module.css'; +} + +.more-versions-link { + composes: small from '../styles/shared/typography.module.css'; +} diff --git a/app/controllers/crate/version.js b/app/controllers/crate/version.js index 1444acc8227..68caaf83c4c 100644 --- a/app/controllers/crate/version.js +++ b/app/controllers/crate/version.js @@ -1,6 +1,6 @@ import Controller from '@ember/controller'; import { computed } from '@ember/object'; -import { alias, gt, readOnly } from '@ember/object/computed'; +import { alias, readOnly } from '@ember/object/computed'; import { inject as service } from '@ember/service'; import subDays from 'date-fns/subDays'; @@ -21,8 +21,6 @@ export default class CrateVersionController extends Controller { @alias('model.crate') crate; @alias('model.requestedVersion') requestedVersion; @alias('model.version') currentVersion; - @alias('crate.keywords') keywords; - @alias('crate.categories') categories; @computed('crate.owner_user', 'session.currentUser.id') get isOwner() { @@ -36,10 +34,6 @@ export default class CrateVersionController extends Controller { return this.sortedVersions.slice(0, NUM_VERSIONS); } - @gt('sortedVersions.length', NUM_VERSIONS) hasMoreVersions; - @gt('keywords.length', 0) anyKeywords; - @gt('categories.length', 0) anyCategories; - @computed('downloads', 'extraDownloads', 'requestedVersion') get downloadData() { let downloads = this.downloads; diff --git a/app/styles/crate/version.module.css b/app/styles/crate/version.module.css index a547a0daba2..2f1d5048d3d 100644 --- a/app/styles/crate/version.module.css +++ b/app/styles/crate/version.module.css @@ -113,82 +113,6 @@ div.header { } } -.last-update, -.crate-size { - composes: small from '../shared/typography.module.css'; - line-height: 25px; -} - -.date { - font-weight: bold; - margin-bottom: 40px; -} - -/* - Since crate_size is a new field, older crates won't have it. - Preserve behaviour for older crates. For newer ones, keep - `Crate Size` closer to last updated. -*/ -.date-with-small-margin-bot { - font-weight: bold; - margin-bottom: 20px; -} - -.size { - font-weight: bold; - margin-bottom: 40px; -} - -.crate-info .authorship { - ul.owners, ul.keywords { - display: flex; - flex-wrap: wrap; - list-style: none; - padding: 0; - margin: 0; - - li { - margin: 0 7px 7px 0; - } - } -} - -.more-versions-link { - composes: small from '../shared/typography.module.css'; -} - -.authorship { - .top, .bottom { - display: flex; - flex-wrap: wrap; - - > * { margin-right: 1em; } - } - - .top > * { flex: 1 } - - @media only screen and (min-width: 890px) { - flex: 3; - border-left: 2px solid var(--gray-border); - padding-left: 20px; - - .top, .bottom { - flex-direction: column; - } - - ul { - padding-left: 20px; - } - } - - @media only screen and (max-width: 480px) { - .top, .bottom { - flex-direction: column; - } - } -} - - .about { line-height: 180%; margin-bottom: 40px; @@ -250,7 +174,3 @@ div.header { display: none; } } - -.yanked { - composes: yanked from '../shared/typography.module.css'; -} diff --git a/app/templates/crate/version.hbs b/app/templates/crate/version.hbs index abe86cce319..6a751674360 100644 --- a/app/templates/crate/version.hbs +++ b/app/templates/crate/version.hbs @@ -80,156 +80,7 @@ {{/if}} {{#if (or this.isOwner (not this.currentVersion.yanked))}} -
-
-
-
Last Updated
-
- {{date-format-distance-to-now this.crate.updated_at addSuffix=true}} -
-
- - {{#if this.currentVersion.crate_size}} -
-
Crate Size
-
{{pretty-bytes this.currentVersion.crate_size}}
-
- {{/if}} - -
-

Owners

- - {{#if this.isOwner}} -

- - Manage owners - -

- {{/if}} - -
    - {{#each this.crate.owner_team as |team|}} -
  • - - - -
    • - {{/each}} - - {{#each this.crate.owner_user as |user|}} -
  • - - - -
    • - {{/each}} -
-
- -
-

Authors

-
    - {{#each this.currentVersion.authorNames as |author|}} -
  • {{ format-email author }}
    • - {{/each}} -
-
-
- -
- {{#if this.currentVersion.license}} -
-

License

-

{{ this.currentVersion.license }}

-
- {{/if}} - - {{#unless this.crate.keywords.isPending}} - {{#if this.anyKeywords}} -
-

Keywords

-
    - {{#each this.keywords as |keyword|}} -
  • {{keyword.id}}
    • - {{/each}} -
-
- {{/if}} - {{/unless}} - - {{#unless this.crate.categories.isPending}} - {{#if this.anyCategories}} -
-

Categories

-
    - {{#each this.categories as |category|}} -
  • {{category.category}}
    • - {{/each}} -
-
- {{/if}} - {{/unless}} - -
-

Versions

-
    - {{#each this.smallSortedVersions as |version|}} -
  • - - {{ version.num }} - - {{date-format version.created_at "PP"}} - {{#if version.yanked}} - yanked - {{/if}} -
    • - {{/each}} -
- {{#if this.hasMoreVersions}} - - show all {{ this.crate.versions.length }} versions - - {{/if}} -
- -
-

Dependencies

-
    - {{#each this.currentVersion.normalDependencies as |dep|}} -
    • - {{else}} - {{#if this.currentVersion.loadDepsTask.isRunning}} -
  • Loading…
    • - {{else}} -
  • None
    • - {{/if}} - {{/each}} -
-
- - {{#if this.currentVersion.buildDependencies}} -
-

Build-Dependencies

-
    - {{#each this.currentVersion.buildDependencies as |dep|}} -
    • - {{/each}} -
-
- {{/if}} - - {{#if this.currentVersion.devDependencies}} -
-

Dev-Dependencies

-
    - {{#each this.currentVersion.devDependencies as |dep|}} -
    • - {{/each}} -
-
- {{/if}} -
-
+ {{/if}}