From 912921ad632990a111912f881349941fbfbaa00b Mon Sep 17 00:00:00 2001 From: Tobias Bieniek Date: Thu, 25 Feb 2021 16:03:09 +0100 Subject: [PATCH 1/8] Add navigation tabs to the crate details page --- app/components/crate-header.hbs | 23 ++++++++++++- app/components/crate-header.js | 1 + app/components/crate-header.module.css | 4 +++ app/components/nav-tabs.hbs | 5 +++ app/components/nav-tabs.module.css | 18 +++++++++++ app/components/nav-tabs/tab.hbs | 9 ++++++ app/components/nav-tabs/tab.module.css | 45 ++++++++++++++++++++++++++ 7 files changed, 104 insertions(+), 1 deletion(-) create mode 100644 app/components/nav-tabs.hbs create mode 100644 app/components/nav-tabs.module.css create mode 100644 app/components/nav-tabs/tab.hbs create mode 100644 app/components/nav-tabs/tab.module.css diff --git a/app/components/crate-header.hbs b/app/components/crate-header.hbs index 2978d7a8d99..be44659cae6 100644 --- a/app/components/crate-header.hbs +++ b/app/components/crate-header.hbs @@ -12,4 +12,25 @@ {{/if}} - \ No newline at end of file + + + + + Readme + + + + {{@crate.versions.length}} Versions + + + + Dependents + + \ No newline at end of file diff --git a/app/components/crate-header.js b/app/components/crate-header.js index 31ade95919b..05f4279e910 100644 --- a/app/components/crate-header.js +++ b/app/components/crate-header.js @@ -2,5 +2,6 @@ import { inject as service } from '@ember/service'; import Component from '@glimmer/component'; export default class CrateHeader extends Component { + @service router; @service session; } diff --git a/app/components/crate-header.module.css b/app/components/crate-header.module.css index 1d19ea91a7e..3f3881432d7 100644 --- a/app/components/crate-header.module.css +++ b/app/components/crate-header.module.css @@ -29,3 +29,7 @@ width: 32px; height: 32px; } + +.nav { + margin-bottom: 20px; +} diff --git a/app/components/nav-tabs.hbs b/app/components/nav-tabs.hbs new file mode 100644 index 00000000000..980bccf398e --- /dev/null +++ b/app/components/nav-tabs.hbs @@ -0,0 +1,5 @@ + \ No newline at end of file diff --git a/app/components/nav-tabs.module.css b/app/components/nav-tabs.module.css new file mode 100644 index 00000000000..b8c83139f2a --- /dev/null +++ b/app/components/nav-tabs.module.css @@ -0,0 +1,18 @@ +.list { + --nav-tabs-border-width: 2px; + --nav-tabs-padding-h: 20px; + --nav-tabs-padding-v: 12px; + --nav-tabs-radius: 5px; + + display: flex; + list-style: none; + padding: 0; + margin: 0; + border-bottom: var(--nav-tabs-border-width) solid var(--gray-border); + + @media only screen and (max-width: 550px) { + flex-direction: column; + border-left: var(--nav-tabs-border-width) solid var(--gray-border); + border-bottom: none; + } +} diff --git a/app/components/nav-tabs/tab.hbs b/app/components/nav-tabs/tab.hbs new file mode 100644 index 00000000000..225f6c0ea81 --- /dev/null +++ b/app/components/nav-tabs/tab.hbs @@ -0,0 +1,9 @@ +
  • + + {{yield}} + +
    • \ No newline at end of file diff --git a/app/components/nav-tabs/tab.module.css b/app/components/nav-tabs/tab.module.css new file mode 100644 index 00000000000..1f76bbd1d1d --- /dev/null +++ b/app/components/nav-tabs/tab.module.css @@ -0,0 +1,45 @@ +.link { + display: block; + padding: + calc(var(--nav-tabs-padding-v) + var(--nav-tabs-border-width)) + var(--nav-tabs-padding-h) + var(--nav-tabs-padding-v); + color: var(--main-color); + border-top-left-radius: var(--nav-tabs-radius); + border-top-right-radius: var(--nav-tabs-radius); + border-bottom: var(--nav-tabs-border-width) solid transparent; + margin-bottom: calc(0px - var(--nav-tabs-border-width)); + transition: all 300ms; + + &.active { + color: var(--link-hover-color); + border-bottom-color: var(--link-hover-color); + background: var(--main-bg-dark); + } + + &:hover { + color: var(--link-hover-color); + border-bottom-color: var(--link-hover-color); + transition: all 0s; + } + + @media only screen and (max-width: 550px) { + padding: + var(--nav-tabs-padding-v) + var(--nav-tabs-padding-h) + var(--nav-tabs-padding-v) + calc(var(--nav-tabs-padding-h) + var(--nav-tabs-border-width)); + + border-top-left-radius: 0; + border-bottom-right-radius: var(--nav-tabs-radius); + border-bottom: none; + border-left: var(--nav-tabs-border-width) solid transparent; + margin-bottom: 0; + margin-left: calc(0px - var(--nav-tabs-border-width)); + + &.active, + &:hover { + border-left-color: var(--link-hover-color); + } + } +} From 403b67c74ed7d521e9b56c9e1aceb8dec0404590 Mon Sep 17 00:00:00 2001 From: Tobias Bieniek Date: Thu, 25 Feb 2021 16:10:00 +0100 Subject: [PATCH 2/8] crate.reverse-dependencies: Remove obsolete "Back" link --- app/templates/crate/reverse-dependencies.hbs | 4 ---- 1 file changed, 4 deletions(-) diff --git a/app/templates/crate/reverse-dependencies.hbs b/app/templates/crate/reverse-dependencies.hbs index 9fb77dfcd29..abfb4364f1a 100644 --- a/app/templates/crate/reverse-dependencies.hbs +++ b/app/templates/crate/reverse-dependencies.hbs @@ -1,9 +1,5 @@ -
    - ⬅ Back to {{ this.crate.name }} -
    -
    Date: Thu, 25 Feb 2021 16:12:57 +0100 Subject: [PATCH 3/8] crate.versions: Remove obsolete "Back" link --- app/styles/crate/versions.module.css | 9 +++++++++ app/templates/crate/versions.hbs | 14 +++++--------- 2 files changed, 14 insertions(+), 9 deletions(-) diff --git a/app/styles/crate/versions.module.css b/app/styles/crate/versions.module.css index 939a9121278..19da67b5142 100644 --- a/app/styles/crate/versions.module.css +++ b/app/styles/crate/versions.module.css @@ -3,10 +3,19 @@ align-items: center; justify-content: space-between; margin-bottom: 10px; + + @media only screen and (max-width: 550px) { + display: block; + } } .page-description { composes: small from '../shared/typography.module.css'; + + @media only screen and (max-width: 550px) { + display: block; + margin-bottom: 15px; + } } .list { diff --git a/app/templates/crate/versions.hbs b/app/templates/crate/versions.hbs index 0f11c234c6e..19e74e896f5 100644 --- a/app/templates/crate/versions.hbs +++ b/app/templates/crate/versions.hbs @@ -1,9 +1,11 @@
    - - ⬅ Back to Main Page - + + All {{ this.model.versions.length }} + versions of {{ this.model.name }} since + {{date-format this.model.created_at 'PPP'}} +
    Sort by @@ -14,12 +16,6 @@
    - - All {{ this.model.versions.length }} - versions of {{ this.model.name }} since - {{date-format this.model.created_at 'PPP'}} - -
      {{#each this.sortedVersions as |version|}}
    • From 303e515d644ff340b23ea54cc789623e99a03275 Mon Sep 17 00:00:00 2001 From: Tobias Bieniek Date: Thu, 25 Feb 2021 16:13:42 +0100 Subject: [PATCH 4/8] CrateSidebar: Remove "Versions" list This is now much more prominently displayed as a dedicated tab --- app/components/crate-sidebar.hbs | 22 ---------------------- tests/acceptance/crate-test.js | 4 ++-- 2 files changed, 2 insertions(+), 24 deletions(-) diff --git a/app/components/crate-sidebar.hbs b/app/components/crate-sidebar.hbs index 38670e4fa18..30a561be256 100644 --- a/app/components/crate-sidebar.hbs +++ b/app/components/crate-sidebar.hbs @@ -152,28 +152,6 @@ {{/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

        diff --git a/tests/acceptance/crate-test.js b/tests/acceptance/crate-test.js index affa87ef728..a918a7b82d1 100644 --- a/tests/acceptance/crate-test.js +++ b/tests/acceptance/crate-test.js @@ -97,7 +97,7 @@ module('Acceptance | crate page', function (hooks) { this.server.loadFixtures(); await visit('/crates/nanomsg'); - await click('[data-test-all-versions-link]'); + await click('[data-test-versions-tab] a'); assert.dom('[data-test-page-description]').hasText(/All 13\s+versions of nanomsg since\s+December \d+th, 2014/); }); @@ -183,7 +183,7 @@ module('Acceptance | crate page', function (hooks) { await visit('/crates/nanomsg'); assert.dom('[data-test-license]').hasText('Apache-2.0'); - await click('[data-test-version-link="0.5.0"]'); + await visit('/crates/nanomsg/0.5.0'); assert.dom('[data-test-license]').hasText('MIT OR Apache-2.0'); }); From cf05b899de6983968812b60b4d24c73e50f90145 Mon Sep 17 00:00:00 2001 From: Tobias Bieniek Date: Thu, 25 Feb 2021 16:14:01 +0100 Subject: [PATCH 5/8] CrateSidebar: Remove "Dependent Crates" link This is now much more prominently displayed as a dedicated tab --- app/components/crate-sidebar.hbs | 4 ---- tests/acceptance/crate-test.js | 2 +- 2 files changed, 1 insertion(+), 5 deletions(-) diff --git a/app/components/crate-sidebar.hbs b/app/components/crate-sidebar.hbs index 30a561be256..8fce392d625 100644 --- a/app/components/crate-sidebar.hbs +++ b/app/components/crate-sidebar.hbs @@ -165,10 +165,6 @@ {{/if}} {{/each}}
      - - - Show dependent crates -
      {{#if @version.buildDependencies}} diff --git a/tests/acceptance/crate-test.js b/tests/acceptance/crate-test.js index a918a7b82d1..0e8ad3e2a0d 100644 --- a/tests/acceptance/crate-test.js +++ b/tests/acceptance/crate-test.js @@ -106,7 +106,7 @@ module('Acceptance | crate page', function (hooks) { this.server.loadFixtures(); await visit('/crates/nanomsg'); - await click('[data-test-reverse-deps-link]'); + await click('[data-test-rev-deps-tab] a'); assert.equal(currentURL(), '/crates/nanomsg/reverse_dependencies'); assert.dom('a[href="/crates/unicorn-rpc"]').hasText('unicorn-rpc'); From b63095f4194f50c8dace27f99c534286084a4287 Mon Sep 17 00:00:00 2001 From: Tobias Bieniek Date: Thu, 25 Feb 2021 16:06:47 +0100 Subject: [PATCH 6/8] crate.owners: Display `CrateHeader` at the top ... instead of the generic `PageHeader` --- app/templates/crate/owners.hbs | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/app/templates/crate/owners.hbs b/app/templates/crate/owners.hbs index 68678332d43..2b4cf137000 100644 --- a/app/templates/crate/owners.hbs +++ b/app/templates/crate/owners.hbs @@ -1,10 +1,6 @@ {{page-title 'Manage Crate Owners'}} - +

      Add Owner

      From e47aee680501556a7b0c49160bd10f7e7e6de4e1 Mon Sep 17 00:00:00 2001 From: Tobias Bieniek Date: Thu, 25 Feb 2021 16:08:46 +0100 Subject: [PATCH 7/8] CrateHeader: Show "Settings" tab if user is a crate owner --- app/components/crate-header.hbs | 6 ++++++ app/components/crate-header.js | 6 ++++++ 2 files changed, 12 insertions(+) diff --git a/app/components/crate-header.hbs b/app/components/crate-header.hbs index be44659cae6..438a3731bed 100644 --- a/app/components/crate-header.hbs +++ b/app/components/crate-header.hbs @@ -33,4 +33,10 @@ Dependents + + {{#if this.isOwner}} + + Settings + + {{/if}} \ No newline at end of file diff --git a/app/components/crate-header.js b/app/components/crate-header.js index 05f4279e910..76df2e710a4 100644 --- a/app/components/crate-header.js +++ b/app/components/crate-header.js @@ -1,7 +1,13 @@ +import { computed } from '@ember/object'; import { inject as service } from '@ember/service'; import Component from '@glimmer/component'; export default class CrateHeader extends Component { @service router; @service session; + + @computed('args.crate.owner_user', 'session.currentUser.id') + get isOwner() { + return this.args.crate.owner_user.findBy('id', this.session.currentUser?.id); + } } From 2849e702a54dfd3a7dbba8debd79a70c9adc094b Mon Sep 17 00:00:00 2001 From: Tobias Bieniek Date: Thu, 25 Feb 2021 16:50:50 +0100 Subject: [PATCH 8/8] CrateSidebar: Remove "Manage Owners" link This is now much more prominently displayed as a dedicated tab --- app/components/crate-sidebar.hbs | 8 -------- app/components/crate-sidebar.js | 8 -------- tests/acceptance/crate-test.js | 6 +++--- 3 files changed, 3 insertions(+), 19 deletions(-) diff --git a/app/components/crate-sidebar.hbs b/app/components/crate-sidebar.hbs index 8fce392d625..c0de1fceb06 100644 --- a/app/components/crate-sidebar.hbs +++ b/app/components/crate-sidebar.hbs @@ -79,14 +79,6 @@

      Owners

      - {{#if this.isOwner}} -

      - - Manage owners - -

      - {{/if}} -
        {{#each @crate.owner_team as |team|}}
      • diff --git a/app/components/crate-sidebar.js b/app/components/crate-sidebar.js index a33cfc44a53..44b570fa04b 100644 --- a/app/components/crate-sidebar.js +++ b/app/components/crate-sidebar.js @@ -1,18 +1,10 @@ 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') diff --git a/tests/acceptance/crate-test.js b/tests/acceptance/crate-test.js index 0e8ad3e2a0d..fe28d846506 100644 --- a/tests/acceptance/crate-test.js +++ b/tests/acceptance/crate-test.js @@ -211,7 +211,7 @@ module('Acceptance | crate page', function (hooks) { await visit('/crates/nanomsg'); - assert.dom('[data-test-manage-owners-link]').doesNotExist(); + assert.dom('[data-test-settings-tab]').doesNotExist(); }); test('navigating to the owners page when not an owner', async function (assert) { @@ -222,7 +222,7 @@ module('Acceptance | crate page', function (hooks) { await visit('/crates/nanomsg'); - assert.dom('[data-test-manage-owners-link]').doesNotExist(); + assert.dom('[data-test-settings-tab]').doesNotExist(); }); test('navigating to the owners page', async function (assert) { @@ -232,7 +232,7 @@ module('Acceptance | crate page', function (hooks) { this.authenticateAs(user); await visit('/crates/nanomsg'); - await click('[data-test-manage-owners-link]'); + await click('[data-test-settings-tab] a'); assert.equal(currentURL(), '/crates/nanomsg/owners'); });