From cdc56d562b66dc96c0eea8462fc212f3fa46a55c Mon Sep 17 00:00:00 2001 From: Jeff Daley Date: Wed, 14 Jun 2023 10:10:23 -0400 Subject: [PATCH 01/42] WIP sidebar tweaks --- web/app/components/document/sidebar.hbs | 210 ++++++++++++------------ web/app/components/document/sidebar.ts | 17 +- web/tailwind.config.js | 1 + 3 files changed, 119 insertions(+), 109 deletions(-) diff --git a/web/app/components/document/sidebar.hbs b/web/app/components/document/sidebar.hbs index bfb0f0d14..e9a13377c 100644 --- a/web/app/components/document/sidebar.hbs +++ b/web/app/components/document/sidebar.hbs @@ -25,112 +25,125 @@ {{/let}}
-
- {{#if (is-empty @document.docNumber)}} - {{#unless - (is-empty @document.docType) - }}{{@document.docType}}{{/unless}} - - {{else}} - {{#unless - (is-empty @document.docType) - }}{{@document.docType}}{{/unless}} - • - - {{@document.docNumber}} - - - {{/if}} +
+
+ + + {{#if this.isDraft}} + + <:anchor as |dd|> + + + + + + + + {{/if}} +
{{#if this.editingIsDisabled}}

{{this.title}}

{{else}} - - <:default> - {{#unless (is-empty this.title)}} -

{{this.title}}

- {{else}} -

Enter a title here.

- {{/unless}} - - <:editing as |F|> - - - +
+ + + <:default> + {{#unless (is-empty this.title)}} +

{{this.title}}

+ {{else}} +

Enter a title here.

+ {{/unless}} + + <:editing as |F|> + + + +
{{/if}} -
-
+ {{! Summary }} +
+ {{#if this.editingIsDisabled}} +

{{this.summary}}

+ {{else}} + + <:default> + {{#unless (is-empty this.summary)}} +

+ {{this.summary}}

+ {{else}} +

+ Enter a summary here.

+ {{/unless}} + + <:editing as |F|> + + + + {{/if}} +
-
- Summary - {{#if this.editingIsDisabled}} -

{{this.summary}}

- {{else}} - +
- <:default> - {{#unless (is-empty this.summary)}} -

- {{this.summary}}

- {{else}} -

- Enter a summary here.

- {{/unless}} - - <:editing as |F|> - - - - {{/if}} + {{@document.docType}} +
+ {{#if this.statusIsShown}} +
+ {{@document.status}} +
+ {{/if}} +
-
- Status - -
+

Created {{or @document.createdDate "Unknown"}}

+ +
-
- - Created - -

{{or @document.createdDate "Unknown"}}

-
-
Last modified diff --git a/web/app/components/document/sidebar.ts b/web/app/components/document/sidebar.ts index 4a3aaacdd..d75960594 100644 --- a/web/app/components/document/sidebar.ts +++ b/web/app/components/document/sidebar.ts @@ -142,6 +142,11 @@ export default class DocumentSidebarComponent extends Component { - this.product = product; - await this.save.perform("product", this.product); - // productAbbreviation is computed by the back end - } - ); + updateProduct = restartableTask(async (product: string) => { + this.product = product; + await this.save.perform("product", this.product); + // productAbbreviation is computed by the back end + }); save = task(async (field: string, val: string | HermesUser[]) => { if (field && val) { diff --git a/web/tailwind.config.js b/web/tailwind.config.js index 5b5b8c1e8..4c20158c6 100644 --- a/web/tailwind.config.js +++ b/web/tailwind.config.js @@ -69,6 +69,7 @@ module.exports = { // Border "color-border-faint": "var(--token-color-border-faint)", + "color-border-action": "var(--token-color-border-action)", "color-border-critical": "var(--token-color-border-critical)", "color-border-faint": "var(--token-color-border-faint)", "color-border-primary": "var(--token-color-border-primary)", From f5a7b026b491ab78f94d98a6bf98edc95c12fa01 Mon Sep 17 00:00:00 2001 From: Jeff Daley Date: Wed, 14 Jun 2023 12:11:48 -0400 Subject: [PATCH 02/42] Prototype success animation --- web/app/components/document/sidebar.hbs | 48 +++++++++++++++++-- web/app/components/document/sidebar.ts | 33 ++++++++++++- .../components/document/sidebar/header.hbs | 3 +- web/app/components/document/sidebar/header.ts | 5 ++ web/app/components/x/dropdown-list/index.hbs | 1 + web/app/styles/animations.scss | 29 +++++++++++ web/app/styles/app.scss | 1 + web/app/styles/components/sidebar.scss | 29 ++++++++++- web/tailwind.config.js | 1 + 9 files changed, 142 insertions(+), 8 deletions(-) create mode 100644 web/app/styles/animations.scss diff --git a/web/app/components/document/sidebar.hbs b/web/app/components/document/sidebar.hbs index e9a13377c..af99f2f4d 100644 --- a/web/app/components/document/sidebar.hbs +++ b/web/app/components/document/sidebar.hbs @@ -4,6 +4,7 @@ @isCollapsed={{this.isCollapsed}} @toggleCollapsed={{this.toggleCollapsed}} @userHasScrolled={{this.userHasScrolled}} + @shareButtonIsShown={{eq this.draftVisibility "2"}} /> {{#unless this.isCollapsed}} @@ -26,22 +27,59 @@
-
+
{{#if this.isDraft}} - + <:anchor as |dd|> - + + <:item as |dd|> + + +
+

+ {{dd.attrs.title}} +

+

+ {{dd.attrs.description}} +

+
+ + + + {{/if}} diff --git a/web/app/components/document/sidebar.ts b/web/app/components/document/sidebar.ts index 499007b56..5d37dfd67 100644 --- a/web/app/components/document/sidebar.ts +++ b/web/app/components/document/sidebar.ts @@ -6,7 +6,7 @@ import { inject as service } from "@ember/service"; import { restartableTask, task } from "ember-concurrency"; import { dasherize } from "@ember/string"; import cleanString from "hermes/utils/clean-string"; -import { debounce } from "@ember/runloop"; +import { debounce, schedule } from "@ember/runloop"; import FetchService from "hermes/services/fetch"; import RouterService from "@ember/routing/router-service"; import SessionService from "hermes/services/session"; @@ -66,6 +66,8 @@ export default class DocumentSidebarComponent extends Component { + const shareButton = document.getElementById( + "sidebar-header-copy-url-button" + ); + assert("shareButton is expected", shareButton); + shareButton.classList.add("in"); + }); + } + updateProduct = restartableTask(async (product: string) => { this.product = product; await this.save.perform("product", this.product); diff --git a/web/app/components/document/sidebar/header.hbs b/web/app/components/document/sidebar/header.hbs index 8f91ac1c3..e5d510fc6 100644 --- a/web/app/components/document/sidebar/header.hbs +++ b/web/app/components/document/sidebar/header.hbs @@ -11,7 +11,7 @@ @size={{if @isCollapsed "24"}} /> {{#unless @isCollapsed}} - Dashboard + Dashboard {{/unless}}
@@ -22,6 +22,7 @@ @url={{this.url}} @tooltipPlacement={{if @isCollapsed "right" "bottom"}} class="sidebar-header-button" + id="sidebar-header-copy-url-button" /> {{/if}} void; userHasScrolled: boolean; + shareButtonIsShown?: boolean; }; } @@ -25,6 +26,10 @@ export default class DocumentSidebarHeaderComponent extends Component Date: Wed, 14 Jun 2023 14:49:59 -0400 Subject: [PATCH 03/42] Improved animations and icon-display logic --- web/app/components/document/sidebar.hbs | 11 +++-- web/app/components/document/sidebar.ts | 49 ++++++++++++++----- .../header/active-filter-list-item.hbs | 0 .../header/active-filter-list-item.ts | 0 .../header/active-filter-list.hbs | 0 .../header/active-filter-list.ts | 0 .../header/facet-dropdown.hbs | 0 .../header/facet-dropdown.ts | 0 .../{ => floating-u-i}/header/index.hbs | 0 .../{ => floating-u-i}/header/index.ts | 0 .../{ => floating-u-i}/header/nav.hbs | 0 .../{ => floating-u-i}/header/nav.ts | 0 .../{ => floating-u-i}/header/search.hbs | 0 .../{ => floating-u-i}/header/search.ts | 0 .../header/sort-dropdown.hbs | 0 .../header/sort-dropdown.ts | 0 .../{ => floating-u-i}/header/toolbar.hbs | 0 .../{ => floating-u-i}/header/toolbar.ts | 0 .../header/user-menu-highlight.hbs | 0 .../header/user-menu-highlight.ts | 0 web/app/helpers/get-facet-query-hash.ts | 2 +- web/app/services/active-filters.ts | 2 +- web/app/styles/animations.scss | 43 ++++++++++++++-- web/app/styles/components/sidebar.scss | 37 ++++++++++---- web/app/types/facets.d.ts | 2 +- .../components/header/toolbar-test.ts | 2 +- 26 files changed, 115 insertions(+), 33 deletions(-) rename web/app/components/{ => floating-u-i}/header/active-filter-list-item.hbs (100%) rename web/app/components/{ => floating-u-i}/header/active-filter-list-item.ts (100%) rename web/app/components/{ => floating-u-i}/header/active-filter-list.hbs (100%) rename web/app/components/{ => floating-u-i}/header/active-filter-list.ts (100%) rename web/app/components/{ => floating-u-i}/header/facet-dropdown.hbs (100%) rename web/app/components/{ => floating-u-i}/header/facet-dropdown.ts (100%) rename web/app/components/{ => floating-u-i}/header/index.hbs (100%) rename web/app/components/{ => floating-u-i}/header/index.ts (100%) rename web/app/components/{ => floating-u-i}/header/nav.hbs (100%) rename web/app/components/{ => floating-u-i}/header/nav.ts (100%) rename web/app/components/{ => floating-u-i}/header/search.hbs (100%) rename web/app/components/{ => floating-u-i}/header/search.ts (100%) rename web/app/components/{ => floating-u-i}/header/sort-dropdown.hbs (100%) rename web/app/components/{ => floating-u-i}/header/sort-dropdown.ts (100%) rename web/app/components/{ => floating-u-i}/header/toolbar.hbs (100%) rename web/app/components/{ => floating-u-i}/header/toolbar.ts (100%) rename web/app/components/{ => floating-u-i}/header/user-menu-highlight.hbs (100%) rename web/app/components/{ => floating-u-i}/header/user-menu-highlight.ts (100%) diff --git a/web/app/components/document/sidebar.hbs b/web/app/components/document/sidebar.hbs index af99f2f4d..5d250d3ee 100644 --- a/web/app/components/document/sidebar.hbs +++ b/web/app/components/document/sidebar.hbs @@ -43,22 +43,23 @@ <:anchor as |dd|> + - <:item as |dd|> diff --git a/web/app/components/document/sidebar.ts b/web/app/components/document/sidebar.ts index 5d37dfd67..57948ea6f 100644 --- a/web/app/components/document/sidebar.ts +++ b/web/app/components/document/sidebar.ts @@ -3,7 +3,12 @@ import { tracked } from "@glimmer/tracking"; import { action } from "@ember/object"; import { getOwner } from "@ember/application"; import { inject as service } from "@ember/service"; -import { restartableTask, task } from "ember-concurrency"; +import { + keepLatestTask, + restartableTask, + task, + timeout, +} from "ember-concurrency"; import { dasherize } from "@ember/string"; import cleanString from "hermes/utils/clean-string"; import { debounce, schedule } from "@ember/runloop"; @@ -15,6 +20,7 @@ import { AuthenticatedUser } from "hermes/services/authenticated-user"; import { HermesDocument, HermesUser } from "hermes/types/document"; import { assert } from "@ember/debug"; import Route from "@ember/routing/route"; +import Ember from "ember"; interface DocumentSidebarComponentSignature { Args: { @@ -144,6 +150,8 @@ export default class DocumentSidebarComponent extends Component { + protected setDraftVisibility = keepLatestTask(async (visibility: string) => { + if (this.draftVisibility === visibility) { + return; + } + + if (visibility === "1") { + // user is disabling the link button const shareButton = document.getElementById( "sidebar-header-copy-url-button" ); assert("shareButton is expected", shareButton); - shareButton.classList.add("in"); - }); - } + shareButton.classList.remove("in"); + shareButton.classList.add("out"); + + this.draftVisibilityIcon = "lock"; + // allow time for the animation to conclude + await timeout(Ember.testing ? 0 : 300); + } else { + this.draftVisibilityIcon = "enterprise"; + schedule("afterRender", () => { + console.log("afterRender"); + const shareButton = document.getElementById( + "sidebar-header-copy-url-button" + ); + assert("shareButton is expected", shareButton); + shareButton.classList.add("in"); + }); + } + this.draftVisibility = visibility; + }); updateProduct = restartableTask(async (product: string) => { this.product = product; diff --git a/web/app/components/header/active-filter-list-item.hbs b/web/app/components/floating-u-i/header/active-filter-list-item.hbs similarity index 100% rename from web/app/components/header/active-filter-list-item.hbs rename to web/app/components/floating-u-i/header/active-filter-list-item.hbs diff --git a/web/app/components/header/active-filter-list-item.ts b/web/app/components/floating-u-i/header/active-filter-list-item.ts similarity index 100% rename from web/app/components/header/active-filter-list-item.ts rename to web/app/components/floating-u-i/header/active-filter-list-item.ts diff --git a/web/app/components/header/active-filter-list.hbs b/web/app/components/floating-u-i/header/active-filter-list.hbs similarity index 100% rename from web/app/components/header/active-filter-list.hbs rename to web/app/components/floating-u-i/header/active-filter-list.hbs diff --git a/web/app/components/header/active-filter-list.ts b/web/app/components/floating-u-i/header/active-filter-list.ts similarity index 100% rename from web/app/components/header/active-filter-list.ts rename to web/app/components/floating-u-i/header/active-filter-list.ts diff --git a/web/app/components/header/facet-dropdown.hbs b/web/app/components/floating-u-i/header/facet-dropdown.hbs similarity index 100% rename from web/app/components/header/facet-dropdown.hbs rename to web/app/components/floating-u-i/header/facet-dropdown.hbs diff --git a/web/app/components/header/facet-dropdown.ts b/web/app/components/floating-u-i/header/facet-dropdown.ts similarity index 100% rename from web/app/components/header/facet-dropdown.ts rename to web/app/components/floating-u-i/header/facet-dropdown.ts diff --git a/web/app/components/header/index.hbs b/web/app/components/floating-u-i/header/index.hbs similarity index 100% rename from web/app/components/header/index.hbs rename to web/app/components/floating-u-i/header/index.hbs diff --git a/web/app/components/header/index.ts b/web/app/components/floating-u-i/header/index.ts similarity index 100% rename from web/app/components/header/index.ts rename to web/app/components/floating-u-i/header/index.ts diff --git a/web/app/components/header/nav.hbs b/web/app/components/floating-u-i/header/nav.hbs similarity index 100% rename from web/app/components/header/nav.hbs rename to web/app/components/floating-u-i/header/nav.hbs diff --git a/web/app/components/header/nav.ts b/web/app/components/floating-u-i/header/nav.ts similarity index 100% rename from web/app/components/header/nav.ts rename to web/app/components/floating-u-i/header/nav.ts diff --git a/web/app/components/header/search.hbs b/web/app/components/floating-u-i/header/search.hbs similarity index 100% rename from web/app/components/header/search.hbs rename to web/app/components/floating-u-i/header/search.hbs diff --git a/web/app/components/header/search.ts b/web/app/components/floating-u-i/header/search.ts similarity index 100% rename from web/app/components/header/search.ts rename to web/app/components/floating-u-i/header/search.ts diff --git a/web/app/components/header/sort-dropdown.hbs b/web/app/components/floating-u-i/header/sort-dropdown.hbs similarity index 100% rename from web/app/components/header/sort-dropdown.hbs rename to web/app/components/floating-u-i/header/sort-dropdown.hbs diff --git a/web/app/components/header/sort-dropdown.ts b/web/app/components/floating-u-i/header/sort-dropdown.ts similarity index 100% rename from web/app/components/header/sort-dropdown.ts rename to web/app/components/floating-u-i/header/sort-dropdown.ts diff --git a/web/app/components/header/toolbar.hbs b/web/app/components/floating-u-i/header/toolbar.hbs similarity index 100% rename from web/app/components/header/toolbar.hbs rename to web/app/components/floating-u-i/header/toolbar.hbs diff --git a/web/app/components/header/toolbar.ts b/web/app/components/floating-u-i/header/toolbar.ts similarity index 100% rename from web/app/components/header/toolbar.ts rename to web/app/components/floating-u-i/header/toolbar.ts diff --git a/web/app/components/header/user-menu-highlight.hbs b/web/app/components/floating-u-i/header/user-menu-highlight.hbs similarity index 100% rename from web/app/components/header/user-menu-highlight.hbs rename to web/app/components/floating-u-i/header/user-menu-highlight.hbs diff --git a/web/app/components/header/user-menu-highlight.ts b/web/app/components/floating-u-i/header/user-menu-highlight.ts similarity index 100% rename from web/app/components/header/user-menu-highlight.ts rename to web/app/components/floating-u-i/header/user-menu-highlight.ts diff --git a/web/app/helpers/get-facet-query-hash.ts b/web/app/helpers/get-facet-query-hash.ts index 56d81a2ec..5a3b34944 100644 --- a/web/app/helpers/get-facet-query-hash.ts +++ b/web/app/helpers/get-facet-query-hash.ts @@ -1,7 +1,7 @@ import Helper from "@ember/component/helper"; import { assert } from "@ember/debug"; import { inject as service } from "@ember/service"; -import { FacetName } from "hermes/components/header/toolbar"; +import { FacetName } from "hermes/components/floating-u-i/header/toolbar"; import ActiveFiltersService from "hermes/services/active-filters"; interface GetFacetQueryHashHelperSignature { diff --git a/web/app/services/active-filters.ts b/web/app/services/active-filters.ts index 3e40b57f9..db0ee4b8e 100644 --- a/web/app/services/active-filters.ts +++ b/web/app/services/active-filters.ts @@ -2,7 +2,7 @@ import RouterService from "@ember/routing/router-service"; import Service, { inject as service } from "@ember/service"; import { tracked } from "@glimmer/tracking"; import { DocumentsRouteParams } from "hermes/types/document-routes"; -import { ActiveFilters } from "hermes/components/header/toolbar"; +import { ActiveFilters } from "hermes/components/floating-u-i/header/toolbar"; export default class ActiveFiltersService extends Service { @service declare router: RouterService; diff --git a/web/app/styles/animations.scss b/web/app/styles/animations.scss index 87568b63b..e0a393251 100644 --- a/web/app/styles/animations.scss +++ b/web/app/styles/animations.scss @@ -16,14 +16,51 @@ } } -@keyframes slideUp { +@keyframes slideUpScaleUp { from { - transform: translateY(3px); + transform: translateY(5px) scale(0.8); + } +} + +@keyframes slideDown { + from { + transform: translateY(-3px); } } @keyframes scaleIn { from { - transform: scale(0.9); + transform: scale(0.3); + } +} + +@keyframes scaleDownToNormal { + from { + transform: scale(1.1); + } + to { + transform: scale(1); + } +} + +@keyframes scaleUpToNormalWithBounce { + 0% { + transform: scale(5); + } + + 100% { + transform: scale(1); + } +} + +@keyframes slideDownAndRotateLeft { + to { + transform: translateY(8px) rotate(-70deg); + } +} + +@keyframes slideUpAndRotateRight { + from { + transform: translateY(8px) rotate(-70deg); } } diff --git a/web/app/styles/components/sidebar.scss b/web/app/styles/components/sidebar.scss index 1a3192e8e..93e817eb3 100644 --- a/web/app/styles/components/sidebar.scss +++ b/web/app/styles/components/sidebar.scss @@ -26,25 +26,42 @@ } .sidebar-header-button { - @apply rounded-button-md py-2 px-3 flex items-center border border-transparent text-color-foreground-primary; + @apply relative rounded-button-md py-2 px-3 flex items-center border border-transparent text-color-foreground-primary; &:hover { @apply border-color-border-strong bg-color-foreground-high-contrast; } &.in { - @apply relative; - animation: fadeIn 120ms ease-in-out, scaleIn 150ms ease-in-out, - slideUp 160ms ease-in-out; + .flight-icon { + @apply opacity-0; + animation: fadeIn 200ms ease-in forwards, + slideUpScaleUp 250ms cubic-bezier(0, 1, 0.5, 1); + } - &::before { - @apply hds-elevation-mid; - @apply absolute top-0 left-0 w-full h-full rounded border border-color-palette-purple-200 bg-color-surface-highlight z-[-1]; + &::before, + &::after { content: ""; - animation: fadeIn 150ms ease-in-out, - scaleIn 2600ms cubic-bezier(0, 1, 1, 1), - fadeOut 400ms ease-in-out 2200ms forwards; + @apply opacity-0 absolute top-0 left-0 w-full h-full rounded border bg-color-surface-highlight z-[-1]; + } + + &::before { + animation: fadeIn 150ms ease-in forwards 50ms, + scaleIn 250ms cubic-bezier(0, 1, 0.5, 1) forwards, + fadeOut 500ms ease-out 2000ms forwards; } + + &::after { + animation: fadeIn 300ms ease-in forwards 50ms, + scaleIn 250ms cubic-bezier(0, 1, 0.5, 1) forwards, + fadeOut 1500ms ease-out 1000ms forwards; + border-color: #cf9cf8b4; + } + } + + &.out { + animation: fadeOut 60ms ease-out 80ms forwards, + slideDownAndRotateLeft 140ms ease-out forwards; } &.in:hover { diff --git a/web/app/types/facets.d.ts b/web/app/types/facets.d.ts index 51f2d2692..3b50f55ca 100644 --- a/web/app/types/facets.d.ts +++ b/web/app/types/facets.d.ts @@ -1,4 +1,4 @@ -import { FacetName } from "hermes/components/header/toolbar"; +import { FacetName } from "hermes/components/floating-u-i/header/toolbar"; /** * E.g., { docType: { "API": { count: 1, selected: false }}} diff --git a/web/tests/integration/components/header/toolbar-test.ts b/web/tests/integration/components/header/toolbar-test.ts index 3df0622d5..346a981da 100644 --- a/web/tests/integration/components/header/toolbar-test.ts +++ b/web/tests/integration/components/header/toolbar-test.ts @@ -3,7 +3,7 @@ import { setupRenderingTest } from "ember-qunit"; import { click, findAll, render } from "@ember/test-helpers"; import { hbs } from "ember-cli-htmlbars"; import { FacetDropdownObjects } from "hermes/types/facets"; -import { SortByLabel } from "hermes/components/header/toolbar"; +import { SortByLabel } from "hermes/components/floating-u-i/header/toolbar"; const FACETS = { docType: { From c6871e6fa8da6362501d763ced085a8a5bf1a76a Mon Sep 17 00:00:00 2001 From: Jeff Daley Date: Wed, 14 Jun 2023 17:17:51 -0400 Subject: [PATCH 04/42] Prep for loading state --- web/app/components/document/sidebar.hbs | 6 ++++-- web/app/components/document/sidebar.ts | 4 +++- web/app/components/document/sidebar/header.hbs | 2 ++ web/app/components/document/sidebar/header.ts | 7 +++++++ web/app/styles/components/sidebar.scss | 10 +++++----- 5 files changed, 21 insertions(+), 8 deletions(-) diff --git a/web/app/components/document/sidebar.hbs b/web/app/components/document/sidebar.hbs index 5d250d3ee..49c7e76de 100644 --- a/web/app/components/document/sidebar.hbs +++ b/web/app/components/document/sidebar.hbs @@ -5,6 +5,7 @@ @toggleCollapsed={{this.toggleCollapsed}} @userHasScrolled={{this.userHasScrolled}} @shareButtonIsShown={{eq this.draftVisibility "2"}} + @shareButtonIsLoading={{this.setDraftVisibility.isRunning}} /> {{#unless this.isCollapsed}} @@ -49,6 +50,7 @@ <:anchor as |dd|>
{{@document.docType}}
{{#if this.statusIsShown}}
{{@document.status}}
diff --git a/web/app/components/document/sidebar.ts b/web/app/components/document/sidebar.ts index 57948ea6f..484e6e407 100644 --- a/web/app/components/document/sidebar.ts +++ b/web/app/components/document/sidebar.ts @@ -292,7 +292,6 @@ export default class DocumentSidebarComponent extends Component { - console.log("afterRender"); const shareButton = document.getElementById( "sidebar-header-copy-url-button" ); @@ -300,7 +299,10 @@ export default class DocumentSidebarComponent extends Component { diff --git a/web/app/components/document/sidebar/header.hbs b/web/app/components/document/sidebar/header.hbs index e5d510fc6..ebbe103bc 100644 --- a/web/app/components/document/sidebar/header.hbs +++ b/web/app/components/document/sidebar/header.hbs @@ -21,6 +21,8 @@ data-test-copy-url-value={{this.url}} @url={{this.url}} @tooltipPlacement={{if @isCollapsed "right" "bottom"}} + @isLoading={{@shareButtonIsLoading}} + @loadingText="Creating link..." class="sidebar-header-button" id="sidebar-header-copy-url-button" /> diff --git a/web/app/components/document/sidebar/header.ts b/web/app/components/document/sidebar/header.ts index dc28ca95a..0d0815666 100644 --- a/web/app/components/document/sidebar/header.ts +++ b/web/app/components/document/sidebar/header.ts @@ -10,6 +10,7 @@ interface DocumentSidebarHeaderComponentSignature { toggleCollapsed: () => void; userHasScrolled: boolean; shareButtonIsShown?: boolean; + shareButtonIsLoading?: boolean; }; } @@ -56,3 +57,9 @@ export default class DocumentSidebarHeaderComponent extends Component Date: Wed, 14 Jun 2023 21:07:58 -0400 Subject: [PATCH 05/42] Update index.ts --- web/app/components/header/index.ts | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/web/app/components/header/index.ts b/web/app/components/header/index.ts index dbf421f96..869cc43dd 100644 --- a/web/app/components/header/index.ts +++ b/web/app/components/header/index.ts @@ -8,7 +8,10 @@ interface HeaderComponentSignature { }; } -export default class extends Component {} +export default class HeaderComponent extends Component {} + declare module "@glint/environment-ember-loose/registry" { - export default interface Registry {} + export default interface Registry { + Header: typeof HeaderComponent; + } } From 0552257dfa1013185cc2b05110f3ced1143cbf7c Mon Sep 17 00:00:00 2001 From: Jeff Daley Date: Wed, 14 Jun 2023 21:18:26 -0400 Subject: [PATCH 06/42] Create index.hbs --- web/app/components/header/index.hbs | 9 +++++++++ 1 file changed, 9 insertions(+) create mode 100644 web/app/components/header/index.hbs diff --git a/web/app/components/header/index.hbs b/web/app/components/header/index.hbs new file mode 100644 index 000000000..5254b0d52 --- /dev/null +++ b/web/app/components/header/index.hbs @@ -0,0 +1,9 @@ +
+ +
+ + + From 7a81d80534f64fe5b14f26dca52137bea24dead4 Mon Sep 17 00:00:00 2001 From: Jeff Daley Date: Thu, 15 Jun 2023 09:37:36 -0400 Subject: [PATCH 07/42] Move folders --- web/app/components/floating-u-i/header/index.hbs | 8 -------- .../{floating-u-i => }/header/active-filter-list-item.hbs | 0 .../{floating-u-i => }/header/active-filter-list-item.ts | 0 .../{floating-u-i => }/header/active-filter-list.hbs | 0 .../{floating-u-i => }/header/active-filter-list.ts | 0 .../{floating-u-i => }/header/facet-dropdown.hbs | 0 .../{floating-u-i => }/header/facet-dropdown.ts | 0 web/app/components/header/index.hbs | 1 - web/app/components/{floating-u-i => }/header/index.ts | 0 web/app/components/{floating-u-i => }/header/nav.hbs | 0 web/app/components/{floating-u-i => }/header/nav.ts | 0 web/app/components/{floating-u-i => }/header/search.hbs | 0 web/app/components/{floating-u-i => }/header/search.ts | 0 .../{floating-u-i => }/header/sort-dropdown.hbs | 0 .../components/{floating-u-i => }/header/sort-dropdown.ts | 0 web/app/components/{floating-u-i => }/header/toolbar.hbs | 0 web/app/components/{floating-u-i => }/header/toolbar.ts | 0 .../{floating-u-i => }/header/user-menu-highlight.hbs | 0 .../{floating-u-i => }/header/user-menu-highlight.ts | 0 web/app/helpers/get-facet-query-hash.ts | 2 +- web/app/services/active-filters.ts | 2 +- web/app/types/facets.d.ts | 2 +- web/tests/integration/components/header/toolbar-test.ts | 2 +- 23 files changed, 4 insertions(+), 13 deletions(-) delete mode 100644 web/app/components/floating-u-i/header/index.hbs rename web/app/components/{floating-u-i => }/header/active-filter-list-item.hbs (100%) rename web/app/components/{floating-u-i => }/header/active-filter-list-item.ts (100%) rename web/app/components/{floating-u-i => }/header/active-filter-list.hbs (100%) rename web/app/components/{floating-u-i => }/header/active-filter-list.ts (100%) rename web/app/components/{floating-u-i => }/header/facet-dropdown.hbs (100%) rename web/app/components/{floating-u-i => }/header/facet-dropdown.ts (100%) rename web/app/components/{floating-u-i => }/header/index.ts (100%) rename web/app/components/{floating-u-i => }/header/nav.hbs (100%) rename web/app/components/{floating-u-i => }/header/nav.ts (100%) rename web/app/components/{floating-u-i => }/header/search.hbs (100%) rename web/app/components/{floating-u-i => }/header/search.ts (100%) rename web/app/components/{floating-u-i => }/header/sort-dropdown.hbs (100%) rename web/app/components/{floating-u-i => }/header/sort-dropdown.ts (100%) rename web/app/components/{floating-u-i => }/header/toolbar.hbs (100%) rename web/app/components/{floating-u-i => }/header/toolbar.ts (100%) rename web/app/components/{floating-u-i => }/header/user-menu-highlight.hbs (100%) rename web/app/components/{floating-u-i => }/header/user-menu-highlight.ts (100%) diff --git a/web/app/components/floating-u-i/header/index.hbs b/web/app/components/floating-u-i/header/index.hbs deleted file mode 100644 index 8197fecf8..000000000 --- a/web/app/components/floating-u-i/header/index.hbs +++ /dev/null @@ -1,8 +0,0 @@ -
- -
- - diff --git a/web/app/components/floating-u-i/header/active-filter-list-item.hbs b/web/app/components/header/active-filter-list-item.hbs similarity index 100% rename from web/app/components/floating-u-i/header/active-filter-list-item.hbs rename to web/app/components/header/active-filter-list-item.hbs diff --git a/web/app/components/floating-u-i/header/active-filter-list-item.ts b/web/app/components/header/active-filter-list-item.ts similarity index 100% rename from web/app/components/floating-u-i/header/active-filter-list-item.ts rename to web/app/components/header/active-filter-list-item.ts diff --git a/web/app/components/floating-u-i/header/active-filter-list.hbs b/web/app/components/header/active-filter-list.hbs similarity index 100% rename from web/app/components/floating-u-i/header/active-filter-list.hbs rename to web/app/components/header/active-filter-list.hbs diff --git a/web/app/components/floating-u-i/header/active-filter-list.ts b/web/app/components/header/active-filter-list.ts similarity index 100% rename from web/app/components/floating-u-i/header/active-filter-list.ts rename to web/app/components/header/active-filter-list.ts diff --git a/web/app/components/floating-u-i/header/facet-dropdown.hbs b/web/app/components/header/facet-dropdown.hbs similarity index 100% rename from web/app/components/floating-u-i/header/facet-dropdown.hbs rename to web/app/components/header/facet-dropdown.hbs diff --git a/web/app/components/floating-u-i/header/facet-dropdown.ts b/web/app/components/header/facet-dropdown.ts similarity index 100% rename from web/app/components/floating-u-i/header/facet-dropdown.ts rename to web/app/components/header/facet-dropdown.ts diff --git a/web/app/components/header/index.hbs b/web/app/components/header/index.hbs index 5254b0d52..8197fecf8 100644 --- a/web/app/components/header/index.hbs +++ b/web/app/components/header/index.hbs @@ -6,4 +6,3 @@ @facets={{@facets}} @sortControlIsHidden={{@sortControlIsHidden}} /> - diff --git a/web/app/components/floating-u-i/header/index.ts b/web/app/components/header/index.ts similarity index 100% rename from web/app/components/floating-u-i/header/index.ts rename to web/app/components/header/index.ts diff --git a/web/app/components/floating-u-i/header/nav.hbs b/web/app/components/header/nav.hbs similarity index 100% rename from web/app/components/floating-u-i/header/nav.hbs rename to web/app/components/header/nav.hbs diff --git a/web/app/components/floating-u-i/header/nav.ts b/web/app/components/header/nav.ts similarity index 100% rename from web/app/components/floating-u-i/header/nav.ts rename to web/app/components/header/nav.ts diff --git a/web/app/components/floating-u-i/header/search.hbs b/web/app/components/header/search.hbs similarity index 100% rename from web/app/components/floating-u-i/header/search.hbs rename to web/app/components/header/search.hbs diff --git a/web/app/components/floating-u-i/header/search.ts b/web/app/components/header/search.ts similarity index 100% rename from web/app/components/floating-u-i/header/search.ts rename to web/app/components/header/search.ts diff --git a/web/app/components/floating-u-i/header/sort-dropdown.hbs b/web/app/components/header/sort-dropdown.hbs similarity index 100% rename from web/app/components/floating-u-i/header/sort-dropdown.hbs rename to web/app/components/header/sort-dropdown.hbs diff --git a/web/app/components/floating-u-i/header/sort-dropdown.ts b/web/app/components/header/sort-dropdown.ts similarity index 100% rename from web/app/components/floating-u-i/header/sort-dropdown.ts rename to web/app/components/header/sort-dropdown.ts diff --git a/web/app/components/floating-u-i/header/toolbar.hbs b/web/app/components/header/toolbar.hbs similarity index 100% rename from web/app/components/floating-u-i/header/toolbar.hbs rename to web/app/components/header/toolbar.hbs diff --git a/web/app/components/floating-u-i/header/toolbar.ts b/web/app/components/header/toolbar.ts similarity index 100% rename from web/app/components/floating-u-i/header/toolbar.ts rename to web/app/components/header/toolbar.ts diff --git a/web/app/components/floating-u-i/header/user-menu-highlight.hbs b/web/app/components/header/user-menu-highlight.hbs similarity index 100% rename from web/app/components/floating-u-i/header/user-menu-highlight.hbs rename to web/app/components/header/user-menu-highlight.hbs diff --git a/web/app/components/floating-u-i/header/user-menu-highlight.ts b/web/app/components/header/user-menu-highlight.ts similarity index 100% rename from web/app/components/floating-u-i/header/user-menu-highlight.ts rename to web/app/components/header/user-menu-highlight.ts diff --git a/web/app/helpers/get-facet-query-hash.ts b/web/app/helpers/get-facet-query-hash.ts index 5a3b34944..56d81a2ec 100644 --- a/web/app/helpers/get-facet-query-hash.ts +++ b/web/app/helpers/get-facet-query-hash.ts @@ -1,7 +1,7 @@ import Helper from "@ember/component/helper"; import { assert } from "@ember/debug"; import { inject as service } from "@ember/service"; -import { FacetName } from "hermes/components/floating-u-i/header/toolbar"; +import { FacetName } from "hermes/components/header/toolbar"; import ActiveFiltersService from "hermes/services/active-filters"; interface GetFacetQueryHashHelperSignature { diff --git a/web/app/services/active-filters.ts b/web/app/services/active-filters.ts index db0ee4b8e..3e40b57f9 100644 --- a/web/app/services/active-filters.ts +++ b/web/app/services/active-filters.ts @@ -2,7 +2,7 @@ import RouterService from "@ember/routing/router-service"; import Service, { inject as service } from "@ember/service"; import { tracked } from "@glimmer/tracking"; import { DocumentsRouteParams } from "hermes/types/document-routes"; -import { ActiveFilters } from "hermes/components/floating-u-i/header/toolbar"; +import { ActiveFilters } from "hermes/components/header/toolbar"; export default class ActiveFiltersService extends Service { @service declare router: RouterService; diff --git a/web/app/types/facets.d.ts b/web/app/types/facets.d.ts index 3b50f55ca..51f2d2692 100644 --- a/web/app/types/facets.d.ts +++ b/web/app/types/facets.d.ts @@ -1,4 +1,4 @@ -import { FacetName } from "hermes/components/floating-u-i/header/toolbar"; +import { FacetName } from "hermes/components/header/toolbar"; /** * E.g., { docType: { "API": { count: 1, selected: false }}} diff --git a/web/tests/integration/components/header/toolbar-test.ts b/web/tests/integration/components/header/toolbar-test.ts index 346a981da..3df0622d5 100644 --- a/web/tests/integration/components/header/toolbar-test.ts +++ b/web/tests/integration/components/header/toolbar-test.ts @@ -3,7 +3,7 @@ import { setupRenderingTest } from "ember-qunit"; import { click, findAll, render } from "@ember/test-helpers"; import { hbs } from "ember-cli-htmlbars"; import { FacetDropdownObjects } from "hermes/types/facets"; -import { SortByLabel } from "hermes/components/floating-u-i/header/toolbar"; +import { SortByLabel } from "hermes/components/header/toolbar"; const FACETS = { docType: { From 9c42126ea1f8419f98c65771e199ab54433b93f0 Mon Sep 17 00:00:00 2001 From: Jeff Daley Date: Thu, 15 Jun 2023 09:46:55 -0400 Subject: [PATCH 08/42] Popover tweak, type fixes --- web/app/components/document/sidebar.hbs | 3 ++- web/app/components/document/sidebar.ts | 9 ++------- web/app/components/x/dropdown-list/index.ts | 3 ++- web/app/components/x/dropdown-list/items.ts | 2 +- 4 files changed, 7 insertions(+), 10 deletions(-) diff --git a/web/app/components/document/sidebar.hbs b/web/app/components/document/sidebar.hbs index 8289ce215..15a220aea 100644 --- a/web/app/components/document/sidebar.hbs +++ b/web/app/components/document/sidebar.hbs @@ -44,7 +44,8 @@ <:anchor as |dd|> diff --git a/web/app/components/document/sidebar.ts b/web/app/components/document/sidebar.ts index 3e63fe2be..b7bd2ef6d 100644 --- a/web/app/components/document/sidebar.ts +++ b/web/app/components/document/sidebar.ts @@ -3,12 +3,7 @@ import { tracked } from "@glimmer/tracking"; import { action } from "@ember/object"; import { getOwner } from "@ember/application"; import { inject as service } from "@ember/service"; -import { - keepLatestTask, - restartableTask, - task, - timeout, -} from "ember-concurrency"; +import { restartableTask, task, timeout } from "ember-concurrency"; import { dasherize } from "@ember/string"; import cleanString from "hermes/utils/clean-string"; import { debounce, schedule } from "@ember/runloop"; @@ -273,7 +268,7 @@ export default class DocumentSidebarComponent extends Component { + protected setDraftVisibility = restartableTask(async (visibility: string) => { if (this.draftVisibility === visibility) { return; } diff --git a/web/app/components/x/dropdown-list/index.ts b/web/app/components/x/dropdown-list/index.ts index 9cac47b6d..c8274ba0d 100644 --- a/web/app/components/x/dropdown-list/index.ts +++ b/web/app/components/x/dropdown-list/index.ts @@ -17,7 +17,8 @@ interface XDropdownListComponentSignature { placement?: Placement; isSaving?: boolean; offset?: OffsetOptions; - onItemClick: (value: any, attributes: any) => void; + onItemClick?: (value: any, attributes: any) => void; + renderOut?: boolean; }; // TODO: Replace using Glint's `withBoundArgs` types Blocks: { diff --git a/web/app/components/x/dropdown-list/items.ts b/web/app/components/x/dropdown-list/items.ts index 174b29dbd..bdc462069 100644 --- a/web/app/components/x/dropdown-list/items.ts +++ b/web/app/components/x/dropdown-list/items.ts @@ -16,7 +16,7 @@ interface XDropdownListItemsComponentSignature { listItemRole: string; scrollContainer: HTMLElement; onInput: () => void; - onItemClick: (value: any, attributes?: any) => void; + onItemClick?: (value: any, attributes?: any) => void; registerScrollContainer?: (e: HTMLElement) => void; setFocusedItemIndex: (direction: FocusDirection) => void; hideContent: () => void; From 8dd6f1707c59486c03a65a94f771319fc5ea69c1 Mon Sep 17 00:00:00 2001 From: Jeff Daley Date: Wed, 5 Jul 2023 11:31:53 -0400 Subject: [PATCH 09/42] Cleanup, style tweaks --- web/app/components/document/sidebar.hbs | 18 +++++++++--- web/app/styles/animations.scss | 37 ------------------------- web/app/styles/components/sidebar.scss | 16 +++++------ 3 files changed, 22 insertions(+), 49 deletions(-) diff --git a/web/app/components/document/sidebar.hbs b/web/app/components/document/sidebar.hbs index 37b2b008d..8c8197f5a 100644 --- a/web/app/components/document/sidebar.hbs +++ b/web/app/components/document/sidebar.hbs @@ -14,6 +14,8 @@ {{on "scroll" this.onScroll}} {{did-insert this.registerBody}} > + +
-
+
{{@document.docType}}
@@ -198,7 +208,7 @@ {{else}} {{/if}}
diff --git a/web/app/styles/animations.scss b/web/app/styles/animations.scss index 66d30a41a..1e5dbb47f 100644 --- a/web/app/styles/animations.scss +++ b/web/app/styles/animations.scss @@ -16,18 +16,6 @@ } } -@keyframes slideUpScaleUp { - from { - transform: translateY(5px) scale(0.8); - } -} - -@keyframes slideDown { - from { - transform: translateY(-3px); - } -} - // For a custom scaleIn, define `--scaleInFrom` in the element's style attribute. // For example: .classToAnimate { --scaleInFrom: 0.5; animation: scaleIn 50ms; } @keyframes scaleIn { @@ -39,33 +27,8 @@ } } -@keyframes scaleDownToNormal { - from { - transform: scale(1.1); - } - to { - transform: scale(1); - } -} - -@keyframes scaleUpToNormalWithBounce { - 0% { - transform: scale(5); - } - - 100% { - transform: scale(1); - } -} - @keyframes slideDownAndRotateLeft { to { transform: translateY(8px) rotate(-70deg); } } - -@keyframes slideUpAndRotateRight { - from { - transform: translateY(8px) rotate(-70deg); - } -} diff --git a/web/app/styles/components/sidebar.scss b/web/app/styles/components/sidebar.scss index 3bc574598..af21c0a36 100644 --- a/web/app/styles/components/sidebar.scss +++ b/web/app/styles/components/sidebar.scss @@ -33,12 +33,6 @@ } &.in { - // .flight-icon { - // @apply opacity-0; - // animation: fadeIn 200ms ease-in forwards, - // slideUpScaleUp 250ms cubic-bezier(0, 1, 0.5, 1); - // } - &::before, &::after { content: ""; @@ -46,12 +40,14 @@ } &::before { + --scaleInFrom: 0.3; animation: fadeIn 150ms ease-in forwards 50ms, scaleIn 250ms cubic-bezier(0, 1, 0.5, 1) forwards, fadeOut 500ms ease-out 2000ms forwards; } &::after { + --scaleInFrom: 0.3; animation: fadeIn 300ms ease-in forwards 50ms, scaleIn 250ms cubic-bezier(0, 1, 0.5, 1) forwards, fadeOut 1500ms ease-out 1000ms forwards; @@ -70,7 +66,11 @@ } .draft-visibility-button { - @apply h-[30px] px-2; + @apply px-2.5; + // match the height of the header buttons + @apply h-[38px]; + // offset the extra height relative to the badge + @apply my-[-7px]; [class*=" flight-icon-chevron"] { @apply ml-px -mr-px; @@ -95,7 +95,7 @@ } .sidebar-body-container { - @apply pt-11 pb-10 pl-7 pr-3 space-y-8; + @apply pt-7 pb-10 pl-7 pr-3 space-y-8; } /* Style the scrollbar for Chrome, Safari, and Opera. */ From 79d80f271d823a5c5da52c179a06f65960371056 Mon Sep 17 00:00:00 2001 From: Jeff Daley Date: Wed, 5 Jul 2023 14:08:12 -0400 Subject: [PATCH 10/42] WIP Tooltip states --- web/app/components/copy-u-r-l-button.hbs | 14 +++++++--- web/app/components/copy-u-r-l-button.ts | 23 +++++++++++++++ web/app/components/document/sidebar.hbs | 3 +- web/app/components/document/sidebar.ts | 28 +++++++++++++++++-- .../components/document/sidebar/header.hbs | 6 ++-- web/app/components/document/sidebar/header.ts | 8 ++++++ web/app/modifiers/tooltip.ts | 19 ++++++++++++- web/app/styles/components/sidebar.scss | 28 +++++++++---------- 8 files changed, 104 insertions(+), 25 deletions(-) diff --git a/web/app/components/copy-u-r-l-button.hbs b/web/app/components/copy-u-r-l-button.hbs index 5025c50b3..0ef460301 100644 --- a/web/app/components/copy-u-r-l-button.hbs +++ b/web/app/components/copy-u-r-l-button.hbs @@ -1,14 +1,20 @@ -{{! @glint-nocheck: not typesafe yet }} - + diff --git a/web/app/components/copy-u-r-l-button.ts b/web/app/components/copy-u-r-l-button.ts index 7bbc8277d..b595ba604 100644 --- a/web/app/components/copy-u-r-l-button.ts +++ b/web/app/components/copy-u-r-l-button.ts @@ -13,6 +13,9 @@ interface CopyURLButtonComponentSignature { Args: { url: string; tooltipPlacement?: Placement; + tooltipIsForcedOpen?: boolean; + tooltipText?: string; + tooltipIcon?: string; }; } @@ -26,12 +29,26 @@ export default class CopyURLButtonComponent extends Component {{#unless this.isCollapsed}} diff --git a/web/app/components/document/sidebar.ts b/web/app/components/document/sidebar.ts index ddc36a646..8274c9bee 100644 --- a/web/app/components/document/sidebar.ts +++ b/web/app/components/document/sidebar.ts @@ -3,7 +3,7 @@ import { tracked } from "@glimmer/tracking"; import { action } from "@ember/object"; import { getOwner } from "@ember/application"; import { inject as service } from "@ember/service"; -import { restartableTask, task, timeout } from "ember-concurrency"; +import { dropTask, restartableTask, task, timeout } from "ember-concurrency"; import { dasherize } from "@ember/string"; import cleanString from "hermes/utils/clean-string"; import { debounce, schedule } from "@ember/runloop"; @@ -268,6 +268,29 @@ export default class DocumentSidebarComponent extends Component { + console.log("showCopyURLSuccessMessage"); + await timeout(500); + }); + protected setDraftVisibility = restartableTask(async (visibility: string) => { if (this.draftVisibility === visibility) { return; @@ -284,7 +307,7 @@ export default class DocumentSidebarComponent extends Component { @@ -293,6 +316,7 @@ export default class DocumentSidebarComponent extends Component diff --git a/web/app/components/document/sidebar/header.ts b/web/app/components/document/sidebar/header.ts index 0d0815666..f5110fb80 100644 --- a/web/app/components/document/sidebar/header.ts +++ b/web/app/components/document/sidebar/header.ts @@ -11,6 +11,8 @@ interface DocumentSidebarHeaderComponentSignature { userHasScrolled: boolean; shareButtonIsShown?: boolean; shareButtonIsLoading?: boolean; + shareButtonTooltipText?: string; + shareButtonTooltipIcon?: string; }; } @@ -26,6 +28,12 @@ export function isValidURL(input: string) { export default class DocumentSidebarHeaderComponent extends Component { @service("config") declare configSvc: ConfigService; + get tooltipIsForcedOpen() { + console.log("tooltipIsForcedOpen", this.args.shareButtonTooltipText); + // if there's custom text, we want to force the tooltip open + return !!this.args.shareButtonTooltipText; + } + protected get shareButtonIsShown() { if (this.args.shareButtonIsShown) { return this.args.shareButtonIsShown; diff --git a/web/app/modifiers/tooltip.ts b/web/app/modifiers/tooltip.ts index 40fc0bc8c..168f753bc 100644 --- a/web/app/modifiers/tooltip.ts +++ b/web/app/modifiers/tooltip.ts @@ -17,6 +17,7 @@ import { import { FOCUSABLE } from "hermes/components/editable-field"; import { guidFor } from "@ember/object/internals"; import htmlElement from "hermes/utils/html-element"; +import { schedule } from "@ember/runloop"; /** * A modifier that attaches a tooltip to a reference element on hover or focus. @@ -40,6 +41,8 @@ interface TooltipModifierSignature { Positional: [string]; Named: { placement?: Placement; + stayOpenOnClick?: boolean; + forceOpen?: boolean; }; }; } @@ -113,6 +116,8 @@ export default class TooltipModifier extends Modifier @tracked stayOpenOnClick = false; + @tracked forceOpen?: boolean; + /** * An asserted-to-exist reference to the reference element. */ @@ -146,6 +151,7 @@ export default class TooltipModifier extends Modifier * calculated by the `floating-ui` positioning library. */ @action showContent() { + console.log("showContent"); /** * Do nothing if the tooltip exists, e.g., if the user * hovers a reference that's already focused. @@ -320,7 +326,9 @@ export default class TooltipModifier extends Modifier * and the reference element is not focus-visible. */ @action maybeHideContent() { - if (this.reference.matches(":focus-visible")) { + console.log("maybeHideContent"); + console.log("isShown", this.forceOpen); + if (this.reference.matches(":focus-visible") || this.forceOpen) { return; } if (this.tooltip) { @@ -344,6 +352,7 @@ export default class TooltipModifier extends Modifier named: { placement?: Placement; stayOpenOnClick?: boolean; + forceOpen?: boolean; } ) { this._reference = element; @@ -359,6 +368,14 @@ export default class TooltipModifier extends Modifier this.stayOpenOnClick = named.stayOpenOnClick; } + this.forceOpen = named.forceOpen; + + if (named.forceOpen) { + if (this.forceOpen) { + schedule("afterRender", this, this.showContent); + } + } + this._reference.setAttribute("aria-describedby", `tooltip-${this.id}`); /** diff --git a/web/app/styles/components/sidebar.scss b/web/app/styles/components/sidebar.scss index af21c0a36..38d11195f 100644 --- a/web/app/styles/components/sidebar.scss +++ b/web/app/styles/components/sidebar.scss @@ -39,20 +39,20 @@ @apply opacity-0 absolute top-0 left-0 w-full h-full rounded border bg-color-surface-highlight z-[-1]; } - &::before { - --scaleInFrom: 0.3; - animation: fadeIn 150ms ease-in forwards 50ms, - scaleIn 250ms cubic-bezier(0, 1, 0.5, 1) forwards, - fadeOut 500ms ease-out 2000ms forwards; - } - - &::after { - --scaleInFrom: 0.3; - animation: fadeIn 300ms ease-in forwards 50ms, - scaleIn 250ms cubic-bezier(0, 1, 0.5, 1) forwards, - fadeOut 1500ms ease-out 1000ms forwards; - border-color: #cf9cf8b4; - } + // &::before { + // --scaleInFrom: 0.3; + // animation: fadeIn 150ms ease-in forwards 50ms, + // scaleIn 250ms cubic-bezier(0, 1, 0.5, 1) forwards, + // fadeOut 500ms ease-out 2000ms forwards; + // } + + // &::after { + // --scaleInFrom: 0.3; + // animation: fadeIn 300ms ease-in forwards 50ms, + // scaleIn 250ms cubic-bezier(0, 1, 0.5, 1) forwards, + // fadeOut 1500ms ease-out 1000ms forwards; + // border-color: #cf9cf8b4; + // } } &.out { From 1f697be57c44635288989c2af36539bbf4ac09ca Mon Sep 17 00:00:00 2001 From: Jeff Daley Date: Wed, 5 Jul 2023 17:35:26 -0400 Subject: [PATCH 11/42] Improve most UX bugs --- web/app/components/copy-u-r-l-button.hbs | 2 +- web/app/components/copy-u-r-l-button.ts | 5 +- web/app/components/document/sidebar.hbs | 2 +- web/app/components/document/sidebar.ts | 119 +++++++++++------- web/app/components/document/sidebar/header.ts | 8 +- web/app/modifiers/tooltip.ts | 38 ++++-- web/app/styles/components/sidebar.scss | 4 +- 7 files changed, 115 insertions(+), 63 deletions(-) diff --git a/web/app/components/copy-u-r-l-button.hbs b/web/app/components/copy-u-r-l-button.hbs index 0ef460301..31a67a8a1 100644 --- a/web/app/components/copy-u-r-l-button.hbs +++ b/web/app/components/copy-u-r-l-button.hbs @@ -3,7 +3,7 @@ {{tooltip this.tooltipText placement=this.tooltipPlacement - forceOpen=this.isForcedOpen + isForcedOpen=this.isForcedOpen stayOpenOnClick=true }} {{did-insert this.didInsertButton}} diff --git a/web/app/components/copy-u-r-l-button.ts b/web/app/components/copy-u-r-l-button.ts index b595ba604..f6f2938a1 100644 --- a/web/app/components/copy-u-r-l-button.ts +++ b/web/app/components/copy-u-r-l-button.ts @@ -29,8 +29,9 @@ export default class CopyURLButtonComponent extends Component diff --git a/web/app/components/document/sidebar.ts b/web/app/components/document/sidebar.ts index 8274c9bee..61aa5ade0 100644 --- a/web/app/components/document/sidebar.ts +++ b/web/app/components/document/sidebar.ts @@ -3,7 +3,13 @@ import { tracked } from "@glimmer/tracking"; import { action } from "@ember/object"; import { getOwner } from "@ember/application"; import { inject as service } from "@ember/service"; -import { dropTask, restartableTask, task, timeout } from "ember-concurrency"; +import { + dropTask, + keepLatestTask, + restartableTask, + task, + timeout, +} from "ember-concurrency"; import { dasherize } from "@ember/string"; import cleanString from "hermes/utils/clean-string"; import { debounce, schedule } from "@ember/runloop"; @@ -67,7 +73,7 @@ export default class DocumentSidebarComponent extends Component { - console.log("showCopyURLSuccessMessage"); - await timeout(500); + @tracked private _tempNewVisibility: string | null = null; + + protected showCopyURLSuccessMessage = restartableTask(async () => { + // TODO: this actually has to copy the URL to the clipboard + await timeout(1000); }); - protected setDraftVisibility = restartableTask(async (visibility: string) => { - if (this.draftVisibility === visibility) { - return; - } + protected setDraftVisibility = restartableTask( + async (newVisibility: string) => { - if (visibility === "1") { - // user is disabling the link button - const shareButton = document.getElementById( - "sidebar-header-copy-url-button" - ); - assert("shareButton is expected", shareButton); - shareButton.classList.remove("in"); - shareButton.classList.add("out"); + if (this._tempNewVisibility === newVisibility) { + return; + } - this.draftVisibilityIcon = "lock"; - // allow time for the animation to conclude - await timeout(Ember.testing ? 0 : 3000); - } else { - this.draftVisibilityIcon = "enterprise"; - schedule("afterRender", () => { - const shareButton = document.getElementById( - "sidebar-header-copy-url-button" + this._tempNewVisibility = newVisibility; + + try { + console.log("try"); + if (newVisibility === "restricted") { + console.log("if"); + // user is disabling the link button + const shareButton = document.getElementById( + "sidebar-header-copy-url-button" + ); + assert("shareButton is expected", shareButton); + shareButton.classList.remove("in"); + shareButton.classList.add("out"); + + this.draftVisibilityIcon = "lock"; + // allow time for the animation to conclude + await timeout(Ember.testing ? 0 : 3000); + this.draftVisibility = newVisibility; + } else { + console.log("else"); + this.draftVisibilityIcon = "enterprise"; + schedule("afterRender", () => { + const shareButton = document.getElementById( + "sidebar-header-copy-url-button" + ); + assert("shareButton is expected", shareButton); + shareButton.classList.add("in"); + }); + this.draftVisibility = newVisibility; + await timeout(Ember.testing ? 0 : 3000); + + if (this.draftVisibility === "shareable") { + void this.showCopyURLSuccessMessage.perform(); + } + } + } catch (error: unknown) { + this.maybeShowFlashError( + error as Error, + "Unable to update document visibility" ); - assert("shareButton is expected", shareButton); - shareButton.classList.add("in"); - void this.showCopyURLSuccessMessage.perform(); - }); + } finally { + // set the classes back to normal + // maybe don't bring CSS into this? + this._tempNewVisibility = null; + } } + ); - this.draftVisibility = visibility; - - await timeout(3000); - }); - - updateProduct = restartableTask(async (product: string) => { + updateProduct = keepLatestTask(async (product: string) => { this.product = product; await this.save.perform("product", this.product); // productAbbreviation is computed by the back end diff --git a/web/app/components/document/sidebar/header.ts b/web/app/components/document/sidebar/header.ts index f5110fb80..ee4d75542 100644 --- a/web/app/components/document/sidebar/header.ts +++ b/web/app/components/document/sidebar/header.ts @@ -29,9 +29,11 @@ export default class DocumentSidebarHeaderComponent extends Component @tracked stayOpenOnClick = false; - @tracked forceOpen?: boolean; + @tracked isForcedOpen?: boolean; /** * An asserted-to-exist reference to the reference element. @@ -151,7 +152,6 @@ export default class TooltipModifier extends Modifier * calculated by the `floating-ui` positioning library. */ @action showContent() { - console.log("showContent"); /** * Do nothing if the tooltip exists, e.g., if the user * hovers a reference that's already focused. @@ -326,9 +326,10 @@ export default class TooltipModifier extends Modifier * and the reference element is not focus-visible. */ @action maybeHideContent() { - console.log("maybeHideContent"); - console.log("isShown", this.forceOpen); - if (this.reference.matches(":focus-visible") || this.forceOpen) { + if (this.reference.matches(":focus-visible")) { + return; + } + if (this.isForcedOpen) { return; } if (this.tooltip) { @@ -342,6 +343,15 @@ export default class TooltipModifier extends Modifier this.tooltip = null; } + @action maybeForceHidden() { + if (this.isForcedOpen) { + schedule("afterRender", () => { + this.isForcedOpen = false; + this.maybeHideContent(); + }); + } + } + /** * The function that runs when the modified element is inserted and updated. * Sets up event listeners, local properties and some attributes. @@ -352,7 +362,7 @@ export default class TooltipModifier extends Modifier named: { placement?: Placement; stayOpenOnClick?: boolean; - forceOpen?: boolean; + isForcedOpen?: boolean; } ) { this._reference = element; @@ -368,12 +378,14 @@ export default class TooltipModifier extends Modifier this.stayOpenOnClick = named.stayOpenOnClick; } - this.forceOpen = named.forceOpen; - - if (named.forceOpen) { - if (this.forceOpen) { - schedule("afterRender", this, this.showContent); - } + if (named.isForcedOpen) { + this.isForcedOpen = named.isForcedOpen; + schedule("afterRender", () => { + this.showContent(); + }); + } else { + this.maybeForceHidden(); + // needs close logic } this._reference.setAttribute("aria-describedby", `tooltip-${this.id}`); diff --git a/web/app/styles/components/sidebar.scss b/web/app/styles/components/sidebar.scss index 38d11195f..11ff7cdf9 100644 --- a/web/app/styles/components/sidebar.scss +++ b/web/app/styles/components/sidebar.scss @@ -33,6 +33,8 @@ } &.in { + animation: fadeIn 0ms forwards; + &::before, &::after { content: ""; @@ -56,7 +58,7 @@ } &.out { - animation: fadeOut 60ms ease-out 80ms forwards, + animation: fadeOut 90ms ease-out 50ms forwards, slideDownAndRotateLeft 140ms ease-out forwards; } From 515ef51a95a6367776d81cfdfaab8ea55b3f275b Mon Sep 17 00:00:00 2001 From: Jeff Daley Date: Wed, 5 Jul 2023 20:36:17 -0400 Subject: [PATCH 12/42] Add isSelected check --- web/app/components/document/sidebar.hbs | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/web/app/components/document/sidebar.hbs b/web/app/components/document/sidebar.hbs index ad5462993..179ab8a65 100644 --- a/web/app/components/document/sidebar.hbs +++ b/web/app/components/document/sidebar.hbs @@ -71,6 +71,7 @@ <:item as |dd|> + {{log dd}} From f35d226ea9ad59d30e0c02ee33d286229d56ff5a Mon Sep 17 00:00:00 2001 From: Jeff Daley Date: Wed, 5 Jul 2023 21:08:01 -0400 Subject: [PATCH 13/42] Copy and design tweaks --- web/app/components/copy-u-r-l-button.ts | 4 ++-- web/app/components/document/sidebar.ts | 8 ++++---- web/app/styles/animations.scss | 2 +- web/app/styles/components/sidebar.scss | 4 ++-- .../integration/components/copy-u-r-l-button-test.ts | 2 +- 5 files changed, 10 insertions(+), 10 deletions(-) diff --git a/web/app/components/copy-u-r-l-button.ts b/web/app/components/copy-u-r-l-button.ts index f6f2938a1..2cf1b8aaf 100644 --- a/web/app/components/copy-u-r-l-button.ts +++ b/web/app/components/copy-u-r-l-button.ts @@ -24,7 +24,7 @@ export default class CopyURLButtonComponent extends Component { // TODO: this actually has to copy the URL to the clipboard - await timeout(1000); + await timeout(1500); }); protected setDraftVisibility = restartableTask( async (newVisibility: string) => { - if (this._tempNewVisibility === newVisibility) { + if (this.draftVisibility === newVisibility) { return; } + this._tempNewVisibility = newVisibility; try { diff --git a/web/app/styles/animations.scss b/web/app/styles/animations.scss index 1e5dbb47f..bd659813f 100644 --- a/web/app/styles/animations.scss +++ b/web/app/styles/animations.scss @@ -29,6 +29,6 @@ @keyframes slideDownAndRotateLeft { to { - transform: translateY(8px) rotate(-70deg); + transform: translateY(18px) rotate(-360deg); } } diff --git a/web/app/styles/components/sidebar.scss b/web/app/styles/components/sidebar.scss index 11ff7cdf9..1dd49e1b3 100644 --- a/web/app/styles/components/sidebar.scss +++ b/web/app/styles/components/sidebar.scss @@ -58,8 +58,8 @@ } &.out { - animation: fadeOut 90ms ease-out 50ms forwards, - slideDownAndRotateLeft 140ms ease-out forwards; + animation: fadeOut 200ms ease-out 50ms forwards, + slideDownAndRotateLeft 250ms ease-out forwards; } &.in:hover { diff --git a/web/tests/integration/components/copy-u-r-l-button-test.ts b/web/tests/integration/components/copy-u-r-l-button-test.ts index 310ca0bc5..e0f00405b 100644 --- a/web/tests/integration/components/copy-u-r-l-button-test.ts +++ b/web/tests/integration/components/copy-u-r-l-button-test.ts @@ -64,7 +64,7 @@ module("Integration | Component | copy-u-r-l-button", function (hooks) { "The tooltip can be rendered custom placement" ); - assert.dom(".hermes-tooltip .text").hasText("Copy URL"); + assert.dom(".hermes-tooltip .text").hasText("Copy link"); let clickPromise = click("[data-test-copy-url-button]"); From 0e30c35e4f4772cbd5b62d763a256aff2a7fe2aa Mon Sep 17 00:00:00 2001 From: Jeff Daley Date: Thu, 6 Jul 2023 10:07:47 -0400 Subject: [PATCH 14/42] WIP: Tooltip delay --- web/app/components/copy-u-r-l-button.hbs | 1 + web/app/components/copy-u-r-l-button.ts | 8 +- web/app/components/document/sidebar.hbs | 10 +- web/app/components/document/sidebar.ts | 5 - web/app/modifiers/tooltip.ts | 269 ++++++++++-------- web/app/styles/components/sidebar.scss | 2 +- web/tailwind.config.js | 2 + .../components/copy-u-r-l-button-test.ts | 2 +- 8 files changed, 168 insertions(+), 131 deletions(-) diff --git a/web/app/components/copy-u-r-l-button.hbs b/web/app/components/copy-u-r-l-button.hbs index 31a67a8a1..ce54151ec 100644 --- a/web/app/components/copy-u-r-l-button.hbs +++ b/web/app/components/copy-u-r-l-button.hbs @@ -5,6 +5,7 @@ placement=this.tooltipPlacement isForcedOpen=this.isForcedOpen stayOpenOnClick=true + delay=this.delay }} {{did-insert this.didInsertButton}} {{on "click" (perform this.copyURL)}} diff --git a/web/app/components/copy-u-r-l-button.ts b/web/app/components/copy-u-r-l-button.ts index 2cf1b8aaf..b47596dc0 100644 --- a/web/app/components/copy-u-r-l-button.ts +++ b/web/app/components/copy-u-r-l-button.ts @@ -47,7 +47,13 @@ export default class CopyURLButtonComponent extends Component <:item as |dd|> - {{log dd}} - {{! pills }} + {{! Pills }}
{{#if this.statusIsShown}}
{{@document.status}}
diff --git a/web/app/components/document/sidebar.ts b/web/app/components/document/sidebar.ts index f892702fc..4ae40aabe 100644 --- a/web/app/components/document/sidebar.ts +++ b/web/app/components/document/sidebar.ts @@ -306,18 +306,14 @@ export default class DocumentSidebarComponent extends Component { - if (this.draftVisibility === newVisibility) { return; } - this._tempNewVisibility = newVisibility; try { - console.log("try"); if (newVisibility === "restricted") { - console.log("if"); // user is disabling the link button const shareButton = document.getElementById( "sidebar-header-copy-url-button" @@ -331,7 +327,6 @@ export default class DocumentSidebarComponent extends Component { const shareButton = document.getElementById( diff --git a/web/app/modifiers/tooltip.ts b/web/app/modifiers/tooltip.ts index daf61d0f0..f7c031675 100644 --- a/web/app/modifiers/tooltip.ts +++ b/web/app/modifiers/tooltip.ts @@ -18,6 +18,10 @@ import { FOCUSABLE } from "hermes/components/editable-field"; import { guidFor } from "@ember/object/internals"; import htmlElement from "hermes/utils/html-element"; import { schedule } from "@ember/runloop"; +import { restartableTask, timeout } from "ember-concurrency"; +import Ember from "ember"; + +const DEFAULT_DELAY = Ember.testing ? 0 : 400; /** * A modifier that attaches a tooltip to a reference element on hover or focus. @@ -44,6 +48,7 @@ interface TooltipModifierSignature { stayOpenOnClick?: boolean; // TODO: investigate "trigger: manual" as an alternative isForcedOpen?: boolean; + delay?: number; }; }; } @@ -58,7 +63,10 @@ function cleanup(instance: TooltipModifier) { instance.reference.removeEventListener("click", instance.handleClick); instance.reference.removeEventListener("focusin", instance.onFocusIn); instance.reference.removeEventListener("focusout", instance.maybeHideContent); - instance.reference.removeEventListener("mouseenter", instance.showContent); + instance.reference.removeEventListener( + "mouseenter", + instance.showContent.perform + ); instance.reference.removeEventListener( "mouseleave", instance.maybeHideContent @@ -115,6 +123,8 @@ export default class TooltipModifier extends Modifier */ @tracked placement: Placement = "top"; + @tracked delay = DEFAULT_DELAY; + @tracked stayOpenOnClick = false; @tracked isForcedOpen?: boolean; @@ -151,127 +161,137 @@ export default class TooltipModifier extends Modifier * positioned relative to the reference element, as * calculated by the `floating-ui` positioning library. */ - @action showContent() { - /** - * Do nothing if the tooltip exists, e.g., if the user - * hovers a reference that's already focused. - */ - if (this.tooltip) { - return; - } - - /** - * Create the tooltip and set its attributes - */ - this.tooltip = document.createElement("div"); - this.tooltip.classList.add("hermes-tooltip"); - this.tooltip.setAttribute("id", `tooltip-${this.id}`); - this.tooltip.setAttribute("role", "tooltip"); - - /** - * Create the arrow and append it to the tooltip - */ - this._arrow = document.createElement("div"); - this._arrow.classList.add("arrow"); - this.tooltip.appendChild(this._arrow); - - /** - * Create the textElement and append it to the tooltip - */ - const textElement = document.createElement("div"); - textElement.textContent = this.tooltipText; - textElement.classList.add("text"); - this.tooltip.appendChild(textElement); - - /** - * Append the tooltip to the end of the document. - * We use the `ember-application` selector to ensure - * a consistent cross-environment parent; - * - * TODO: Add the ability to render the tooltip in place - */ - htmlElement(".ember-application").appendChild(this.tooltip); - - /** - * The function that calculates, and updates the tooltip's position. - * Called repeatedly by the `floating-ui` positioning library. - */ - let updatePosition = async () => { - if (!this.tooltip) { + showContent = restartableTask(async () => { + try { + /** + * Do nothing if the tooltip exists, e.g., if the user + * hovers a reference that's already focused. + */ + if (this.tooltip) { return; } - // https://floating-ui.com/docs/computePosition - computePosition(this.reference, this.tooltip, { - platform: platform, - placement: this.placement, - middleware: [ - offset(8), - flip(), - shift(), - arrow({ - element: this.arrow, - padding: 10, - }), - ], - }).then(({ x, y, placement, middlewareData }) => { + if (this.delay > 0) { + await timeout(this.delay); + } + + /** + * Create the tooltip and set its attributes + */ + this.tooltip = document.createElement("div"); + this.tooltip.classList.add("hermes-tooltip"); + this.tooltip.setAttribute("id", `tooltip-${this.id}`); + this.tooltip.setAttribute("role", "tooltip"); + + /** + * Create the arrow and append it to the tooltip + */ + this._arrow = document.createElement("div"); + this._arrow.classList.add("arrow"); + this.tooltip.appendChild(this._arrow); + + /** + * Create the textElement and append it to the tooltip + */ + const textElement = document.createElement("div"); + textElement.textContent = this.tooltipText; + textElement.classList.add("text"); + this.tooltip.appendChild(textElement); + + /** + * Append the tooltip to the end of the document. + * We use the `ember-application` selector to ensure + * a consistent cross-environment parent; + * + * TODO: Add the ability to render the tooltip in place + */ + htmlElement(".ember-application").appendChild(this.tooltip); + + /** + * The function that calculates, and updates the tooltip's position. + * Called repeatedly by the `floating-ui` positioning library. + */ + let updatePosition = async () => { if (!this.tooltip) { return; } - /** - * Update and set the tooltip's placement attribute - * based on the calculated placement (which could differ from - * the named argument passed to the modifier) - */ - this.placement = placement; - this.tooltip.setAttribute("data-tooltip-placement", this.placement); - - /** - * Position the tooltip - */ - Object.assign(this.tooltip.style, { - left: `${x}px`, - top: `${y}px`, - }); - - /** - * Position the arrow - * https://floating-ui.com/docs/arrow#usage - * https://codesandbox.io/s/mystifying-kare-ee3hmh?file=/src/index.js - */ - const basicTooltipPlacement = this.placement.split("-")[0] as Side; - const arrowStaticSide = { - top: "bottom", - right: "left", - bottom: "top", - left: "right", - }[basicTooltipPlacement] as Side; - - if (middlewareData.arrow) { - const { x, y } = middlewareData.arrow; - Object.assign(this.arrow.style, { - left: x != null ? `${x}px` : "", - top: y != null ? `${y}px` : "", - /** - * Ensure the static side gets unset when - * flipping to other placements' axes. - */ - right: "", - bottom: "", - [arrowStaticSide]: `${-this.arrow.offsetWidth / 2}px`, - transform: "rotate(45deg)", + // https://floating-ui.com/docs/computePosition + computePosition(this.reference, this.tooltip, { + platform: platform, + placement: this.placement, + middleware: [ + offset(8), + flip(), + shift(), + arrow({ + element: this.arrow, + padding: 10, + }), + ], + }).then(({ x, y, placement, middlewareData }) => { + if (!this.tooltip) { + return; + } + + /** + * Update and set the tooltip's placement attribute + * based on the calculated placement (which could differ from + * the named argument passed to the modifier) + */ + this.placement = placement; + this.tooltip.setAttribute("data-tooltip-placement", this.placement); + + /** + * Position the tooltip + */ + Object.assign(this.tooltip.style, { + left: `${x}px`, + top: `${y}px`, }); - } - }); - }; - this.floatingUICleanup = autoUpdate( - this.reference, - this.tooltip, - updatePosition - ); - } + /** + * Position the arrow + * https://floating-ui.com/docs/arrow#usage + * https://codesandbox.io/s/mystifying-kare-ee3hmh?file=/src/index.js + */ + const basicTooltipPlacement = this.placement.split("-")[0] as Side; + const arrowStaticSide = { + top: "bottom", + right: "left", + bottom: "top", + left: "right", + }[basicTooltipPlacement] as Side; + + if (middlewareData.arrow) { + const { x, y } = middlewareData.arrow; + Object.assign(this.arrow.style, { + left: x != null ? `${x}px` : "", + top: y != null ? `${y}px` : "", + /** + * Ensure the static side gets unset when + * flipping to other placements' axes. + */ + right: "", + bottom: "", + [arrowStaticSide]: `${-this.arrow.offsetWidth / 2}px`, + transform: "rotate(45deg)", + }); + } + }); + }; + + this.floatingUICleanup = autoUpdate( + this.reference, + this.tooltip, + updatePosition + ); + } catch (error) { + console.error(error); + } finally { + // do we need this? + } + }); /** * A click listener added in the `modify` hook that hides the tooltip @@ -316,7 +336,7 @@ export default class TooltipModifier extends Modifier */ @action onFocusIn() { if (this.reference.matches(":focus-visible")) { - this.showContent(); + this.showContent.perform(); } } @@ -332,15 +352,17 @@ export default class TooltipModifier extends Modifier if (this.isForcedOpen) { return; } - if (this.tooltip) { + if (this.tooltip || this.showContent.isRunning) { + this.showContent.cancelAll(); this.hideContent(); } } @action hideContent() { - assert("tooltip expected", this.tooltip); - this.tooltip.remove(); - this.tooltip = null; + if (this.tooltip) { + this.tooltip.remove(); + this.tooltip = null; + } } @action maybeForceHidden() { @@ -363,6 +385,7 @@ export default class TooltipModifier extends Modifier placement?: Placement; stayOpenOnClick?: boolean; isForcedOpen?: boolean; + delay?: number; } ) { this._reference = element; @@ -378,10 +401,16 @@ export default class TooltipModifier extends Modifier this.stayOpenOnClick = named.stayOpenOnClick; } + if (named.delay !== undefined) { + this.delay = named.delay; + } else { + this.delay = DEFAULT_DELAY; + } + if (named.isForcedOpen) { this.isForcedOpen = named.isForcedOpen; schedule("afterRender", () => { - this.showContent(); + this.showContent.perform(); }); } else { this.maybeForceHidden(); @@ -400,7 +429,7 @@ export default class TooltipModifier extends Modifier document.addEventListener("keydown", this.handleKeydown); this._reference.addEventListener("click", this.handleClick); this._reference.addEventListener("focusin", this.onFocusIn); - this._reference.addEventListener("mouseenter", this.showContent); + this._reference.addEventListener("mouseenter", this.showContent.perform); this._reference.addEventListener("focusout", this.maybeHideContent); this._reference.addEventListener("mouseleave", this.maybeHideContent); } diff --git a/web/app/styles/components/sidebar.scss b/web/app/styles/components/sidebar.scss index 1dd49e1b3..0f3bd1467 100644 --- a/web/app/styles/components/sidebar.scss +++ b/web/app/styles/components/sidebar.scss @@ -97,7 +97,7 @@ } .sidebar-body-container { - @apply pt-7 pb-10 pl-7 pr-3 space-y-8; + @apply pt-4 pb-10 pl-7 pr-3 space-y-8; } /* Style the scrollbar for Chrome, Safari, and Opera. */ diff --git a/web/tailwind.config.js b/web/tailwind.config.js index 07c67c030..03e0f3940 100644 --- a/web/tailwind.config.js +++ b/web/tailwind.config.js @@ -66,6 +66,7 @@ module.exports = { "color-surface-primary": "var(--token-color-surface-primary)", "color-surface-strong": "var(--token-color-surface-strong)", "color-surface-warning": "var(--token-color-surface-warning)", + "color-surface-success": "var(--token-color-surface-success)", // Border "color-border-faint": "var(--token-color-border-faint)", @@ -77,6 +78,7 @@ module.exports = { "color-border-strong": "var(--token-color-border-strong)", "color-border-warning": "var(--token-color-border-warning)", "color-border-highlight": "var(--token-color-border-highlight)", + "color-border-success": "var(--token-color-border-success)", // Page "color-page-faint": "var(--token-color-page-faint)", diff --git a/web/tests/integration/components/copy-u-r-l-button-test.ts b/web/tests/integration/components/copy-u-r-l-button-test.ts index e0f00405b..107cb0caf 100644 --- a/web/tests/integration/components/copy-u-r-l-button-test.ts +++ b/web/tests/integration/components/copy-u-r-l-button-test.ts @@ -70,7 +70,7 @@ module("Integration | Component | copy-u-r-l-button", function (hooks) { await waitFor("[data-url-copied=true]"); - assert.dom(".hermes-tooltip .text").hasText("Copied!"); + assert.dom(".hermes-tooltip .text").hasText("Link copied!"); await clickPromise; }); From f834df08f9b0f681b931dd27eb073e01b789cbaf Mon Sep 17 00:00:00 2001 From: Jeff Daley Date: Thu, 6 Jul 2023 15:14:34 -0400 Subject: [PATCH 15/42] Add delay to tooltip --- web/app/modifiers/tooltip.ts | 90 +++++++++++++++++-- .../integration/modifiers/tooltip-test.ts | 43 ++++++++- 2 files changed, 121 insertions(+), 12 deletions(-) diff --git a/web/app/modifiers/tooltip.ts b/web/app/modifiers/tooltip.ts index 40fc0bc8c..c50191896 100644 --- a/web/app/modifiers/tooltip.ts +++ b/web/app/modifiers/tooltip.ts @@ -17,6 +17,12 @@ import { import { FOCUSABLE } from "hermes/components/editable-field"; import { guidFor } from "@ember/object/internals"; import htmlElement from "hermes/utils/html-element"; +import { restartableTask, timeout } from "ember-concurrency"; +import Ember from "ember"; +import { set } from "mockdate"; +import simpleTimeout from "hermes/utils/simple-timeout"; + +const DEFAULT_DELAY = Ember.testing ? 0 : 400; /** * A modifier that attaches a tooltip to a reference element on hover or focus. @@ -40,6 +46,8 @@ interface TooltipModifierSignature { Positional: [string]; Named: { placement?: Placement; + delay?: number; + _isTestingDelay?: boolean; }; }; } @@ -54,7 +62,10 @@ function cleanup(instance: TooltipModifier) { instance.reference.removeEventListener("click", instance.handleClick); instance.reference.removeEventListener("focusin", instance.onFocusIn); instance.reference.removeEventListener("focusout", instance.maybeHideContent); - instance.reference.removeEventListener("mouseenter", instance.showContent); + instance.reference.removeEventListener( + "mouseenter", + instance.showContent.perform + ); instance.reference.removeEventListener( "mouseleave", instance.maybeHideContent @@ -69,6 +80,12 @@ function cleanup(instance: TooltipModifier) { } } +enum TooltipState { + Opening = "opening", + Open = "open", + Closed = "closed", +} + export default class TooltipModifier extends Modifier { constructor(owner: any, args: ArgsFor) { super(owner, args); @@ -104,6 +121,11 @@ export default class TooltipModifier extends Modifier */ @tracked tooltip: HTMLElement | null = null; + /** + * The state of the tooltip. TODO: Add more + */ + @tracked state: TooltipState = TooltipState.Closed; + /** * The placement of the tooltip relative to the reference element. * Defaults to `top` but can be overridden by invoking the modifier @@ -111,6 +133,9 @@ export default class TooltipModifier extends Modifier */ @tracked placement: Placement = "top"; + @tracked delay: number = DEFAULT_DELAY; + @tracked _isTestingDelay: boolean = false; + @tracked stayOpenOnClick = false; /** @@ -137,15 +162,34 @@ export default class TooltipModifier extends Modifier return this._arrow; } + get isOpening() { + return this.state === TooltipState.Opening; + } + + get isOpen() { + return this.state === TooltipState.Open; + } + + get isClosed() { + return this.state === TooltipState.Closed; + } + @tracked floatingUICleanup: (() => void) | null = null; + @action updateState(state: TooltipState) { + this.state = state; + if (this.reference) { + this.reference.setAttribute("data-tooltip-state", this.state); + } + } + /** * The action that runs on mouseenter and focusin. * Creates the tooltip element and adds it to the DOM, * positioned relative to the reference element, as * calculated by the `floating-ui` positioning library. */ - @action showContent() { + showContent = restartableTask(async () => { /** * Do nothing if the tooltip exists, e.g., if the user * hovers a reference that's already focused. @@ -154,6 +198,16 @@ export default class TooltipModifier extends Modifier return; } + this.updateState(TooltipState.Opening); + + if (this.delay > 0) { + await timeout(this.delay); + } + + if (this._isTestingDelay) { + await simpleTimeout(10); + } + /** * Create the tooltip and set its attributes */ @@ -265,7 +319,9 @@ export default class TooltipModifier extends Modifier this.tooltip, updatePosition ); - } + + this.updateState(TooltipState.Open); + }); /** * A click listener added in the `modify` hook that hides the tooltip @@ -310,7 +366,7 @@ export default class TooltipModifier extends Modifier */ @action onFocusIn() { if (this.reference.matches(":focus-visible")) { - this.showContent(); + this.showContent.perform(); } } @@ -323,15 +379,18 @@ export default class TooltipModifier extends Modifier if (this.reference.matches(":focus-visible")) { return; } - if (this.tooltip) { + if (this.tooltip || this.showContent.isRunning) { + this.showContent.cancelAll(); this.hideContent(); } } @action hideContent() { - assert("tooltip expected", this.tooltip); - this.tooltip.remove(); - this.tooltip = null; + if (this.tooltip) { + this.tooltip.remove(); + this.tooltip = null; + this.updateState(TooltipState.Closed); + } } /** @@ -344,6 +403,8 @@ export default class TooltipModifier extends Modifier named: { placement?: Placement; stayOpenOnClick?: boolean; + delay?: number; + _isTestingDelay?: boolean; } ) { this._reference = element; @@ -359,7 +420,18 @@ export default class TooltipModifier extends Modifier this.stayOpenOnClick = named.stayOpenOnClick; } + if (named._isTestingDelay) { + this._isTestingDelay = named._isTestingDelay; + } + + if (named.delay !== undefined) { + this.delay = named.delay; + } else { + this.delay = DEFAULT_DELAY; + } + this._reference.setAttribute("aria-describedby", `tooltip-${this.id}`); + this._reference.setAttribute("data-tooltip-state", this.state); /** * If the reference isn't inherently focusable, make it focusable. @@ -371,7 +443,7 @@ export default class TooltipModifier extends Modifier document.addEventListener("keydown", this.handleKeydown); this._reference.addEventListener("click", this.handleClick); this._reference.addEventListener("focusin", this.onFocusIn); - this._reference.addEventListener("mouseenter", this.showContent); + this._reference.addEventListener("mouseenter", this.showContent.perform); this._reference.addEventListener("focusout", this.maybeHideContent); this._reference.addEventListener("mouseleave", this.maybeHideContent); } diff --git a/web/tests/integration/modifiers/tooltip-test.ts b/web/tests/integration/modifiers/tooltip-test.ts index 5533d4d97..deab65940 100644 --- a/web/tests/integration/modifiers/tooltip-test.ts +++ b/web/tests/integration/modifiers/tooltip-test.ts @@ -1,15 +1,15 @@ import { module, test } from "qunit"; import { setupRenderingTest } from "ember-qunit"; -import { render, triggerEvent } from "@ember/test-helpers"; +import { render, triggerEvent, waitUntil } from "@ember/test-helpers"; import { hbs } from "ember-cli-htmlbars"; import htmlElement from "hermes/utils/html-element"; +import { wait } from "ember-animated/."; module("Integration | Modifier | tooltip", function (hooks) { setupRenderingTest(hooks); test("it renders", async function (assert) { await render(hbs` - {{! @glint-nocheck: not typesafe yet }}
Hover or focus me
@@ -76,7 +76,6 @@ module("Integration | Modifier | tooltip", function (hooks) { test("it takes a placement argument", async function (assert) { await render(hbs` - {{! @glint-nocheck: not typesafe yet }}
@@ -114,4 +113,42 @@ module("Integration | Modifier | tooltip", function (hooks) { "tooltip can be custom placed" ); }); + + test("it can open on a delay", async function (assert) { + await render(hbs` +
+ Hover or focus me +
+ `); + + let state = htmlElement(".tip").getAttribute("data-tooltip-state"); + + assert.equal(state, "closed", "tooltip is closed by default"); + + await triggerEvent(".tip", "mouseenter"); + + assert.equal( + htmlElement(".tip").getAttribute("data-tooltip-state"), + "opening", + "tooltip is in its opening state" + ); + + await waitUntil(() => { + return htmlElement(".tip").getAttribute("data-tooltip-state") === "open"; + }); + + assert.equal( + htmlElement(".tip").getAttribute("data-tooltip-state"), + "open", + "tooltip is open" + ); + + await triggerEvent(".tip", "mouseleave"); + + assert.equal( + htmlElement(".tip").getAttribute("data-tooltip-state"), + "closed", + "tooltip is in its closing state" + ); + }); }); From a909bc0b9c3bf4ff5ad5d1914cd280cd48366d0e Mon Sep 17 00:00:00 2001 From: Jeff Daley Date: Thu, 6 Jul 2023 15:40:01 -0400 Subject: [PATCH 16/42] Reduce default delay --- web/app/modifiers/tooltip.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/app/modifiers/tooltip.ts b/web/app/modifiers/tooltip.ts index c50191896..e4a321f80 100644 --- a/web/app/modifiers/tooltip.ts +++ b/web/app/modifiers/tooltip.ts @@ -22,7 +22,7 @@ import Ember from "ember"; import { set } from "mockdate"; import simpleTimeout from "hermes/utils/simple-timeout"; -const DEFAULT_DELAY = Ember.testing ? 0 : 400; +const DEFAULT_DELAY = Ember.testing ? 0 : 275; /** * A modifier that attaches a tooltip to a reference element on hover or focus. From 49737d91af9d917f469ab91a8fe61b07d4e88ed1 Mon Sep 17 00:00:00 2001 From: Jeff Daley Date: Thu, 6 Jul 2023 15:58:20 -0400 Subject: [PATCH 17/42] Cleanup and documentation --- web/app/modifiers/tooltip.ts | 64 +++++++++++-------- .../integration/modifiers/tooltip-test.ts | 2 +- 2 files changed, 37 insertions(+), 29 deletions(-) diff --git a/web/app/modifiers/tooltip.ts b/web/app/modifiers/tooltip.ts index e4a321f80..d8d6ea9bb 100644 --- a/web/app/modifiers/tooltip.ts +++ b/web/app/modifiers/tooltip.ts @@ -19,11 +19,16 @@ import { guidFor } from "@ember/object/internals"; import htmlElement from "hermes/utils/html-element"; import { restartableTask, timeout } from "ember-concurrency"; import Ember from "ember"; -import { set } from "mockdate"; import simpleTimeout from "hermes/utils/simple-timeout"; const DEFAULT_DELAY = Ember.testing ? 0 : 275; +enum TooltipState { + Opening = "opening", + Open = "open", + Closed = "closed", +} + /** * A modifier that attaches a tooltip to a reference element on hover or focus. * @@ -32,8 +37,8 @@ const DEFAULT_DELAY = Ember.testing ? 0 : 275; * *
* - * Takes text and an optional named `placement` argument: - * {{tooltip "Go back" placement="left-end"}} + * Takes text and optional arguments: + * {{tooltip "Go back" placement="left-end" delay=0}} * * TODO: * - Add `renderInPlace` argument @@ -47,7 +52,7 @@ interface TooltipModifierSignature { Named: { placement?: Placement; delay?: number; - _isTestingDelay?: boolean; + _useTestDelay?: boolean; }; }; } @@ -80,12 +85,6 @@ function cleanup(instance: TooltipModifier) { } } -enum TooltipState { - Opening = "opening", - Open = "open", - Closed = "closed", -} - export default class TooltipModifier extends Modifier { constructor(owner: any, args: ArgsFor) { super(owner, args); @@ -122,7 +121,8 @@ export default class TooltipModifier extends Modifier @tracked tooltip: HTMLElement | null = null; /** - * The state of the tooltip. TODO: Add more + * The state of the tooltip as it transitions to and from closed and open. + * Used in tests to assert that intermediary states are rendered. */ @tracked state: TooltipState = TooltipState.Closed; @@ -133,9 +133,24 @@ export default class TooltipModifier extends Modifier */ @tracked placement: Placement = "top"; + /** + * The delay before the tooltip is shown. + * Can be overridden with a `delay` argument. + */ @tracked delay: number = DEFAULT_DELAY; - @tracked _isTestingDelay: boolean = false; + /** + * Whether to use a delay in the testing environment. + * Triggers a short `simpleTimeout` on open so we can test + * the content's intermediary states. + */ + @tracked _useTestDelay: boolean = false; + + /** + * Whether the content should stay open on click. + * Used in components like `CopyURLButton` where we want to show + * a "success" message without closing and reopening the tooltip. + */ @tracked stayOpenOnClick = false; /** @@ -162,20 +177,13 @@ export default class TooltipModifier extends Modifier return this._arrow; } - get isOpening() { - return this.state === TooltipState.Opening; - } - - get isOpen() { - return this.state === TooltipState.Open; - } - - get isClosed() { - return this.state === TooltipState.Closed; - } - @tracked floatingUICleanup: (() => void) | null = null; + /** + * The action that runs when the content's [visibility] state changes. + * Updates the `data-tooltip-state` attribute on the reference + * so we can test intermediary states. + */ @action updateState(state: TooltipState) { this.state = state; if (this.reference) { @@ -204,7 +212,7 @@ export default class TooltipModifier extends Modifier await timeout(this.delay); } - if (this._isTestingDelay) { + if (this._useTestDelay) { await simpleTimeout(10); } @@ -404,7 +412,7 @@ export default class TooltipModifier extends Modifier placement?: Placement; stayOpenOnClick?: boolean; delay?: number; - _isTestingDelay?: boolean; + _useTestDelay?: boolean; } ) { this._reference = element; @@ -420,8 +428,8 @@ export default class TooltipModifier extends Modifier this.stayOpenOnClick = named.stayOpenOnClick; } - if (named._isTestingDelay) { - this._isTestingDelay = named._isTestingDelay; + if (named._useTestDelay) { + this._useTestDelay = named._useTestDelay; } if (named.delay !== undefined) { diff --git a/web/tests/integration/modifiers/tooltip-test.ts b/web/tests/integration/modifiers/tooltip-test.ts index deab65940..dd18574f3 100644 --- a/web/tests/integration/modifiers/tooltip-test.ts +++ b/web/tests/integration/modifiers/tooltip-test.ts @@ -116,7 +116,7 @@ module("Integration | Modifier | tooltip", function (hooks) { test("it can open on a delay", async function (assert) { await render(hbs` -
+
Hover or focus me
`); From df3d5727bd8ed3352f5c0744f7d5495a94fca2ad Mon Sep 17 00:00:00 2001 From: Jeff Daley Date: Thu, 6 Jul 2023 16:45:39 -0400 Subject: [PATCH 18/42] Cleanup and documentation --- web/app/modifiers/tooltip.ts | 1 + .../integration/modifiers/tooltip-test.ts | 24 +++++-------------- 2 files changed, 7 insertions(+), 18 deletions(-) diff --git a/web/app/modifiers/tooltip.ts b/web/app/modifiers/tooltip.ts index d8d6ea9bb..cd42b750d 100644 --- a/web/app/modifiers/tooltip.ts +++ b/web/app/modifiers/tooltip.ts @@ -212,6 +212,7 @@ export default class TooltipModifier extends Modifier await timeout(this.delay); } + // Used in tests to assert intermediary states if (this._useTestDelay) { await simpleTimeout(10); } diff --git a/web/tests/integration/modifiers/tooltip-test.ts b/web/tests/integration/modifiers/tooltip-test.ts index dd18574f3..20d2466f9 100644 --- a/web/tests/integration/modifiers/tooltip-test.ts +++ b/web/tests/integration/modifiers/tooltip-test.ts @@ -123,32 +123,20 @@ module("Integration | Modifier | tooltip", function (hooks) { let state = htmlElement(".tip").getAttribute("data-tooltip-state"); - assert.equal(state, "closed", "tooltip is closed by default"); + assert.equal(state, "closed"); await triggerEvent(".tip", "mouseenter"); - assert.equal( - htmlElement(".tip").getAttribute("data-tooltip-state"), - "opening", - "tooltip is in its opening state" - ); + const tip = htmlElement(".tip"); + + assert.equal(tip.getAttribute("data-tooltip-state"), "opening"); await waitUntil(() => { - return htmlElement(".tip").getAttribute("data-tooltip-state") === "open"; + return tip.getAttribute("data-tooltip-state") === "open"; }); - assert.equal( - htmlElement(".tip").getAttribute("data-tooltip-state"), - "open", - "tooltip is open" - ); - await triggerEvent(".tip", "mouseleave"); - assert.equal( - htmlElement(".tip").getAttribute("data-tooltip-state"), - "closed", - "tooltip is in its closing state" - ); + assert.equal(tip.getAttribute("data-tooltip-state"), "closed"); }); }); From 74207eb529c338dad078e3295a3275f4d7c6b7d7 Mon Sep 17 00:00:00 2001 From: Jeff Daley Date: Thu, 6 Jul 2023 20:39:04 -0400 Subject: [PATCH 19/42] Add open animation --- web/app/components/document/sidebar.ts | 6 +- web/app/modifiers/tooltip.ts | 103 +++++++++++++++++++------ web/app/styles/components/tooltip.scss | 14 ++-- 3 files changed, 89 insertions(+), 34 deletions(-) diff --git a/web/app/components/document/sidebar.ts b/web/app/components/document/sidebar.ts index 4ae40aabe..d18108d35 100644 --- a/web/app/components/document/sidebar.ts +++ b/web/app/components/document/sidebar.ts @@ -281,7 +281,7 @@ export default class DocumentSidebarComponent extends Component { // TODO: this actually has to copy the URL to the clipboard - await timeout(1500); + await timeout(1000); }); protected setDraftVisibility = restartableTask( diff --git a/web/app/modifiers/tooltip.ts b/web/app/modifiers/tooltip.ts index f2b8fcddf..dca7d432a 100644 --- a/web/app/modifiers/tooltip.ts +++ b/web/app/modifiers/tooltip.ts @@ -22,7 +22,8 @@ import Ember from "ember"; import simpleTimeout from "hermes/utils/simple-timeout"; import { schedule } from "@ember/runloop"; -const DEFAULT_DELAY = Ember.testing ? 0 : 275; +const DEFAULT_DELAY = Ember.testing ? 0 : 0; +const DEFAULT_OPEN_DURATION = Ember.testing ? 0 : 200; enum TooltipState { Opening = "opening", @@ -46,18 +47,21 @@ enum TooltipState { * - Add animation logic */ +interface TooltipModifierNamedArgs { + placement?: Placement; + stayOpenOnClick?: boolean; + // TODO: investigate "trigger: manual" as an alternative + isForcedOpen?: boolean; + delay?: number; + isDisabled?: boolean; + _useTestDelay?: boolean; +} + interface TooltipModifierSignature { Args: { Element: HTMLElement; Positional: [string]; - Named: { - placement?: Placement; - stayOpenOnClick?: boolean; - // TODO: investigate "trigger: manual" as an alternative - isForcedOpen?: boolean; - delay?: number; - _useTestDelay?: boolean; - }; + Named: TooltipModifierNamedArgs; }; } @@ -124,6 +128,8 @@ export default class TooltipModifier extends Modifier */ @tracked tooltip: HTMLElement | null = null; + @tracked tooltipContent: HTMLElement | null = null; + /** * The state of the tooltip as it transitions to and from closed and open. * Used in tests to assert that intermediary states are rendered. @@ -137,6 +143,8 @@ export default class TooltipModifier extends Modifier */ @tracked placement: Placement = "top"; + @tracked openDuration: number = DEFAULT_OPEN_DURATION; + /** * The delay before the tooltip is shown. * Can be overridden with a `delay` argument. @@ -185,6 +193,8 @@ export default class TooltipModifier extends Modifier @tracked floatingUICleanup: (() => void) | null = null; + @tracked transform: string = "none"; + /** * The action that runs when the content's [visibility] state changes. * Updates the `data-tooltip-state` attribute on the reference @@ -204,6 +214,7 @@ export default class TooltipModifier extends Modifier * calculated by the `floating-ui` positioning library. */ showContent = restartableTask(async () => { + console.log("task started"); /** * Do nothing if the tooltip exists, e.g., if the user * hovers a reference that's already focused. @@ -220,23 +231,30 @@ export default class TooltipModifier extends Modifier // Used in tests to assert intermediary states if (this._useTestDelay) { - await simpleTimeout(10); + await simpleTimeout(Ember.testing ? 0 : 50); } /** * Create the tooltip and set its attributes */ this.tooltip = document.createElement("div"); - this.tooltip.classList.add("hermes-tooltip"); + this.tooltip.classList.add( + "hermes-floating-ui-content", + "hermes-tooltip-positioner" + ); this.tooltip.setAttribute("id", `tooltip-${this.id}`); this.tooltip.setAttribute("role", "tooltip"); + this.tooltipContent = document.createElement("div"); + this.tooltipContent.classList.add("hermes-tooltip"); + this.tooltip.appendChild(this.tooltipContent); + /** * Create the arrow and append it to the tooltip */ this._arrow = document.createElement("div"); this._arrow.classList.add("arrow"); - this.tooltip.appendChild(this._arrow); + this.tooltipContent.appendChild(this._arrow); /** * Create the textElement and append it to the tooltip @@ -244,7 +262,7 @@ export default class TooltipModifier extends Modifier const textElement = document.createElement("div"); textElement.textContent = this.tooltipText; textElement.classList.add("text"); - this.tooltip.appendChild(textElement); + this.tooltipContent.appendChild(textElement); /** * Append the tooltip to the end of the document. @@ -327,6 +345,16 @@ export default class TooltipModifier extends Modifier }); } }); + + if (this.placement.startsWith("top")) { + this.transform = "scale(.97) translateY(1px)"; + } else if (this.placement.startsWith("bottom")) { + this.transform = "scale(.97) translateY(-1px)"; + } else if (this.placement.startsWith("left")) { + this.transform = "scale(.97) translateX(1px)"; + } else if (this.placement.startsWith("right")) { + this.transform = "scale(.97) translateX(-1px)"; + } }; this.floatingUICleanup = autoUpdate( @@ -334,6 +362,40 @@ export default class TooltipModifier extends Modifier this.tooltip, updatePosition ); + + if (this.openDuration) { + const fadeAnimation = this.tooltip.animate( + [{ opacity: 0 }, { opacity: 1 }], + { + duration: Ember.testing ? 0 : 50, + } + ); + const transformAnimation = this.tooltipContent.animate( + [{ transform: this.transform }, { transform: "none" }], + { + duration: this.openDuration, + easing: "ease-in-out", + } + ); + try { + console.log("trying..."); + // this isn't being awaited for some reason + await Promise.all([ + fadeAnimation.finished, + transformAnimation.finished, + ]); + console.log("done trying"); + } catch (e: unknown) { + console.log("caught error"); + } finally { + // for some reason this is being reached before the try block finishes + // when the tooltip is triggered force-open + // (and there is no error) + fadeAnimation.cancel(); + transformAnimation.cancel(); + } + } + this.updateState(TooltipState.Open); }); @@ -426,13 +488,7 @@ export default class TooltipModifier extends Modifier modify( element: Element, positional: [string], - named: { - placement?: Placement; - stayOpenOnClick?: boolean; - isForcedOpen?: boolean; - delay?: number; - _useTestDelay?: boolean; - } + named: TooltipModifierNamedArgs ) { this._reference = element; this._tooltipText = positional[0]; @@ -459,12 +515,15 @@ export default class TooltipModifier extends Modifier if (named.isForcedOpen) { this.isForcedOpen = named.isForcedOpen; + schedule("afterRender", () => { - this.showContent.perform(); + // make sure we're not cancelling an animation + if (!this.showContent.isRunning) { + this.showContent.perform(); + } }); } else { this.maybeForceHidden(); - // needs close logic } this._reference.setAttribute("aria-describedby", `tooltip-${this.id}`); diff --git a/web/app/styles/components/tooltip.scss b/web/app/styles/components/tooltip.scss index 2489b5462..49ae466cb 100644 --- a/web/app/styles/components/tooltip.scss +++ b/web/app/styles/components/tooltip.scss @@ -1,13 +1,9 @@ -.hermes-tooltip { - @apply absolute w-max bg-color-foreground-strong rounded py-2 px-2.5 text-color-foreground-high-contrast z-50; +.hermes-tooltip-positioner { + @apply z-50; +} - /* These positioning styles are overwritten by FloatingUI, - * but they ensure that the tooltip isn't added to the bottom of the page, - * where it could cause a reflow. This is especially important because - * the Google Docs iframe responds to layout changes and might - * otherwise jitter when a tooltip opened. - */ - @apply top-0 left-0; +.hermes-tooltip { + @apply w-max bg-color-foreground-strong rounded py-2 px-2.5 text-color-foreground-high-contrast z-50; .arrow { @apply absolute bg-color-foreground-strong h-2 w-2 -z-10 pointer-events-none; From a4d26d2098ef21353cd5f691095a4b7f2361fe8e Mon Sep 17 00:00:00 2001 From: Jeff Daley Date: Fri, 7 Jul 2023 11:17:10 -0400 Subject: [PATCH 20/42] WIP tile styles --- web/app/components/doc/row.hbs | 8 ++-- web/app/components/doc/state.hbs | 4 +- web/app/components/doc/thumbnail.hbs | 13 +++++- web/app/components/doc/tile.hbs | 50 ++++++++++++++------- web/app/components/document/sidebar.hbs | 32 ++++++------- web/app/components/person/index.hbs | 5 ++- web/app/components/person/index.ts | 3 +- web/app/helpers/dasherize.ts | 26 +++++++++++ web/app/styles/components/doc/tile.scss | 4 +- web/app/styles/hashicorp/product-badge.scss | 6 ++- 10 files changed, 104 insertions(+), 47 deletions(-) create mode 100644 web/app/helpers/dasherize.ts diff --git a/web/app/components/doc/row.hbs b/web/app/components/doc/row.hbs index 159bdcd54..39794ebcb 100644 --- a/web/app/components/doc/row.hbs +++ b/web/app/components/doc/row.hbs @@ -24,11 +24,9 @@ - + + {{this.productAreaName}} + diff --git a/web/app/components/doc/state.hbs b/web/app/components/doc/state.hbs index 84e08f561..21d5a0178 100644 --- a/web/app/components/doc/state.hbs +++ b/web/app/components/doc/state.hbs @@ -9,8 +9,8 @@ {{/unless}} - +/> --}} diff --git a/web/app/components/doc/thumbnail.hbs b/web/app/components/doc/thumbnail.hbs index 393eeefb9..19fe9ea02 100644 --- a/web/app/components/doc/thumbnail.hbs +++ b/web/app/components/doc/thumbnail.hbs @@ -9,6 +9,17 @@
+ {{#if (eq @status "wip")}} + + +
+
Draft
+ + {{/if}} {{#if this.isObsolete}} {{/if}} @@ -27,7 +38,7 @@ {{#if this.productShortName}}
diff --git a/web/app/components/doc/tile.hbs b/web/app/components/doc/tile.hbs index 42eb808e6..0e0e3bb91 100644 --- a/web/app/components/doc/tile.hbs +++ b/web/app/components/doc/tile.hbs @@ -2,9 +2,9 @@ @route="authenticated.document" @model={{@docID}} @query={{hash draft=@isDraft}} - class="flex flex-col items-start space-y-2 p-4 -m-4 rounded-md hover:bg-color-palette-neutral-50 active:bg-color-palette-neutral-100 overflow-hidden" + class="flex flex-col items-start p-4 -m-4 rounded-md hover:bg-color-palette-neutral-50 active:bg-color-palette-neutral-100 overflow-hidden" > -
+
-
+
+ {{!-- + {{if (eq @status "wip") "Draft" @docNumber}} + --}}

{{@title}}

- {{#if (not (is-empty @docNumber))}} - - {{@docNumber}} - - {{/if}} -
- -
- {{#if (not (is-empty @modifiedAgo))}} -

+

{{@modifiedAgo}}

{{/if}}
- +
+ +
+ +
+ {{!--
+ +
--}} +
+ {{or @productArea "Unknown"}} +
+
{{#if (and @isResult @snippet)}} diff --git a/web/app/components/document/sidebar.hbs b/web/app/components/document/sidebar.hbs index 1bf39c1f3..e72779bd5 100644 --- a/web/app/components/document/sidebar.hbs +++ b/web/app/components/document/sidebar.hbs @@ -12,18 +12,6 @@ {{on "scroll" this.onScroll}} {{did-insert this.registerBody}} > - {{#let (get-product-id this.product) as |productIcon|}} - {{#if productIcon}} -
- -
- {{/if}} - {{/let}} -
{{#if (is-empty @document.docNumber)}} @@ -141,10 +129,22 @@ />
{{else}} - +
+
+ +
+
+ {{or this.product "Unknown"}} +
+
{{/if}}
diff --git a/web/app/components/person/index.hbs b/web/app/components/person/index.hbs index 22f3f4ec4..82e308b41 100644 --- a/web/app/components/person/index.hbs +++ b/web/app/components/person/index.hbs @@ -14,7 +14,8 @@
{{/if}}
{{#if @imgURL}} @@ -34,7 +35,7 @@
{{or @email "Unknown"}} diff --git a/web/app/components/person/index.ts b/web/app/components/person/index.ts index db7418b62..48cf7420f 100644 --- a/web/app/components/person/index.ts +++ b/web/app/components/person/index.ts @@ -3,10 +3,11 @@ import Component from "@glimmer/component"; interface PersonComponentSignature { Element: HTMLDivElement; Args: { - email: string; + email?: string; imgURL?: string | null; ignoreUnknown?: boolean; badge?: string; + onlyShowAvatar?: boolean; }; } diff --git a/web/app/helpers/dasherize.ts b/web/app/helpers/dasherize.ts new file mode 100644 index 000000000..6a1f5081d --- /dev/null +++ b/web/app/helpers/dasherize.ts @@ -0,0 +1,26 @@ +import { helper } from "@ember/component/helper"; +import { dasherize } from "@ember/string"; + +export interface DasherizeHelperSignature { + Args: { + Positional: [value: string | undefined]; + }; + Return: string; +} + +const dasherizeHelper = helper( + ([value]: [string | undefined]) => { + if (typeof value === "string") { + return dasherize(value); + } + return ""; + } +); + +export default dasherizeHelper; + +declare module "@glint/environment-ember-loose/registry" { + export default interface Registry { + dasherize: typeof dasherizeHelper; + } +} diff --git a/web/app/styles/components/doc/tile.scss b/web/app/styles/components/doc/tile.scss index 32d0ce177..05f8efd5c 100644 --- a/web/app/styles/components/doc/tile.scss +++ b/web/app/styles/components/doc/tile.scss @@ -2,6 +2,6 @@ @apply text-display-200 font-semibold text-color-foreground-strong overflow-hidden; display: -webkit-box; -webkit-box-orient: vertical; - -webkit-line-clamp: 3; - line-clamp: 3; + -webkit-line-clamp: 2; + line-clamp: 2; } diff --git a/web/app/styles/hashicorp/product-badge.scss b/web/app/styles/hashicorp/product-badge.scss index 6f575f700..7e54b5a44 100644 --- a/web/app/styles/hashicorp/product-badge.scss +++ b/web/app/styles/hashicorp/product-badge.scss @@ -1,5 +1,9 @@ .product-badge { - @apply grid place-items-center absolute bg-gradient-to-br from-color-palette-neutral-500 to-color-palette-neutral-600 text-color-foreground-high-contrast; + @apply grid place-items-center absolute; +} + +.product-themed { + @apply bg-gradient-to-br from-color-palette-neutral-500 to-color-palette-neutral-600 text-color-foreground-high-contrast; // `.hcp` uses the default styles From 6f33aec3c4a07e07687e6a6e67bd9b834c6f8c1f Mon Sep 17 00:00:00 2001 From: Jeff Daley Date: Fri, 7 Jul 2023 11:49:38 -0400 Subject: [PATCH 21/42] Update thumbnail.hbs --- web/app/components/doc/thumbnail.hbs | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/web/app/components/doc/thumbnail.hbs b/web/app/components/doc/thumbnail.hbs index 19fe9ea02..9d1d9f51d 100644 --- a/web/app/components/doc/thumbnail.hbs +++ b/web/app/components/doc/thumbnail.hbs @@ -12,10 +12,10 @@ {{#if (eq @status "wip")}}
Draft
 From ca3554db6901bfe1d0883153ecbd36ba1cfa0fd7 Mon Sep 17 00:00:00 2001 From: Jeff Daley Date: Fri, 7 Jul 2023 11:53:13 -0400 Subject: [PATCH 22/42] Badge style tweaks --- web/app/components/doc/thumbnail.hbs | 2 +- web/app/components/document/sidebar.hbs | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/web/app/components/doc/thumbnail.hbs b/web/app/components/doc/thumbnail.hbs index 9d1d9f51d..11a9f5228 100644 --- a/web/app/components/doc/thumbnail.hbs +++ b/web/app/components/doc/thumbnail.hbs @@ -15,7 +15,7 @@ class="absolute top-[5px] left-[5px] font-medium text-body-100 px-1.5 py-1 uppercase mb-1.5 leading-none text-white" >
Draft
diff --git a/web/app/components/document/sidebar.hbs b/web/app/components/document/sidebar.hbs index 572a10399..1ec66d133 100644 --- a/web/app/components/document/sidebar.hbs +++ b/web/app/components/document/sidebar.hbs @@ -24,8 +24,8 @@ class="uppercase !rounded-[3px] {{if @document.isDraft - '!bg-color-palette-neutral-400 !text-white' - '!bg-color-palette-neutral-2X00 !bg-transparent pl-0 !text-color-foreground-faint' + '!bg-color-palette-neutral-500 !text-white' + '!bg-transparent pl-0 !text-color-foreground-faint' }} " /> From 92c9e4d1797ce3fe036ce041d7beebdc5493e04a Mon Sep 17 00:00:00 2001 From: Jeff Daley Date: Fri, 7 Jul 2023 13:09:15 -0400 Subject: [PATCH 23/42] Add default animation --- web/app/modifiers/tooltip.ts | 83 +++++++++++++++++++++----- web/app/styles/components/tooltip.scss | 10 +--- 2 files changed, 69 insertions(+), 24 deletions(-) diff --git a/web/app/modifiers/tooltip.ts b/web/app/modifiers/tooltip.ts index cd42b750d..6b44cb759 100644 --- a/web/app/modifiers/tooltip.ts +++ b/web/app/modifiers/tooltip.ts @@ -21,7 +21,8 @@ import { restartableTask, timeout } from "ember-concurrency"; import Ember from "ember"; import simpleTimeout from "hermes/utils/simple-timeout"; -const DEFAULT_DELAY = Ember.testing ? 0 : 275; +const DEFAULT_DELAY = 0; +const DEFAULT_OPEN_DURATION = 200; enum TooltipState { Opening = "opening", @@ -45,15 +46,19 @@ enum TooltipState { * - Add animation logic */ +interface TooltipModifierNamedArgs { + placement?: Placement; + stayOpenOnClick?: boolean; + delay?: number; + openDuration?: number; + _useTestDelay?: boolean; +} + interface TooltipModifierSignature { Args: { Element: HTMLElement; Positional: [string]; - Named: { - placement?: Placement; - delay?: number; - _useTestDelay?: boolean; - }; + Named: TooltipModifierNamedArgs; }; } @@ -116,10 +121,17 @@ export default class TooltipModifier extends Modifier @tracked _arrow: HTMLElement | null = null; /** - * The tooltip element that is rendered in the DOM. + * The tooltip element that is rendered in the DOM and positioned + * relative to the reference element. */ @tracked tooltip: HTMLElement | null = null; + /** + * The content within the positioned tooltip element. + * Used for animations that with `trans + */ + @tracked tooltipContent: HTMLElement | null = null; + /** * The state of the tooltip as it transitions to and from closed and open. * Used in tests to assert that intermediary states are rendered. @@ -133,6 +145,8 @@ export default class TooltipModifier extends Modifier */ @tracked placement: Placement = "top"; + @tracked openDuration: number = DEFAULT_OPEN_DURATION; + /** * The delay before the tooltip is shown. * Can be overridden with a `delay` argument. @@ -179,6 +193,8 @@ export default class TooltipModifier extends Modifier @tracked floatingUICleanup: (() => void) | null = null; + @tracked transform: string = "none"; + /** * The action that runs when the content's [visibility] state changes. * Updates the `data-tooltip-state` attribute on the reference @@ -208,7 +224,7 @@ export default class TooltipModifier extends Modifier this.updateState(TooltipState.Opening); - if (this.delay > 0) { + if (!Ember.testing && this.delay > 0) { await timeout(this.delay); } @@ -221,7 +237,10 @@ export default class TooltipModifier extends Modifier * Create the tooltip and set its attributes */ this.tooltip = document.createElement("div"); - this.tooltip.classList.add("hermes-tooltip"); + this.tooltip.classList.add( + "hermes-floating-ui-content", + "hermes-tooltip" + ); this.tooltip.setAttribute("id", `tooltip-${this.id}`); this.tooltip.setAttribute("role", "tooltip"); @@ -321,6 +340,16 @@ export default class TooltipModifier extends Modifier }); } }); + + if (this.placement.startsWith("top")) { + this.transform = "scale(.97) translateY(1px)"; + } else if (this.placement.startsWith("bottom")) { + this.transform = "scale(.97) translateY(-1px)"; + } else if (this.placement.startsWith("left")) { + this.transform = "scale(.97) translateX(1px)"; + } else if (this.placement.startsWith("right")) { + this.transform = "scale(.97) translateX(-1px)"; + } }; this.floatingUICleanup = autoUpdate( @@ -329,6 +358,31 @@ export default class TooltipModifier extends Modifier updatePosition ); + if (!Ember.testing && this.openDuration) { + const fadeAnimation = this.tooltip.animate( + [{ opacity: 0 }, { opacity: 1 }], + { + duration: Ember.testing ? 0 : 50, + } + ); + const transformAnimation = this.tooltip.animate( + [{ transform: this.transform }, { transform: "none" }], + { + duration: this.openDuration, + easing: "ease-in-out", + } + ); + try { + await Promise.all([ + fadeAnimation.finished, + transformAnimation.finished, + ]); + } finally { + fadeAnimation.cancel(); + transformAnimation.cancel(); + } + } + this.updateState(TooltipState.Open); }); @@ -409,12 +463,7 @@ export default class TooltipModifier extends Modifier modify( element: Element, positional: [string], - named: { - placement?: Placement; - stayOpenOnClick?: boolean; - delay?: number; - _useTestDelay?: boolean; - } + named: TooltipModifierNamedArgs ) { this._reference = element; this._tooltipText = positional[0]; @@ -433,6 +482,10 @@ export default class TooltipModifier extends Modifier this._useTestDelay = named._useTestDelay; } + if (named.openDuration) { + this.openDuration = named.openDuration; + } + if (named.delay !== undefined) { this.delay = named.delay; } else { diff --git a/web/app/styles/components/tooltip.scss b/web/app/styles/components/tooltip.scss index 2489b5462..b1fdd7c6b 100644 --- a/web/app/styles/components/tooltip.scss +++ b/web/app/styles/components/tooltip.scss @@ -1,13 +1,5 @@ .hermes-tooltip { - @apply absolute w-max bg-color-foreground-strong rounded py-2 px-2.5 text-color-foreground-high-contrast z-50; - - /* These positioning styles are overwritten by FloatingUI, - * but they ensure that the tooltip isn't added to the bottom of the page, - * where it could cause a reflow. This is especially important because - * the Google Docs iframe responds to layout changes and might - * otherwise jitter when a tooltip opened. - */ - @apply top-0 left-0; + @apply z-50 w-max bg-color-foreground-strong rounded py-2 px-2.5 text-color-foreground-high-contrast; .arrow { @apply absolute bg-color-foreground-strong h-2 w-2 -z-10 pointer-events-none; From 04d56fda1c923b63fb887237ee71d92ed05c3ab9 Mon Sep 17 00:00:00 2001 From: Jeff Daley Date: Fri, 7 Jul 2023 13:12:54 -0400 Subject: [PATCH 24/42] Update tooltip.ts --- web/app/modifiers/tooltip.ts | 21 +++------------------ 1 file changed, 3 insertions(+), 18 deletions(-) diff --git a/web/app/modifiers/tooltip.ts b/web/app/modifiers/tooltip.ts index 7b54a1de3..e591f0a31 100644 --- a/web/app/modifiers/tooltip.ts +++ b/web/app/modifiers/tooltip.ts @@ -130,14 +130,6 @@ export default class TooltipModifier extends Modifier */ @tracked tooltip: HTMLElement | null = null; - @tracked tooltipContent: HTMLElement | null = null; - - /** - * The content within the positioned tooltip element. - * Used for animations that with `trans - */ - @tracked tooltipContent: HTMLElement | null = null; - /** * The state of the tooltip as it transitions to and from closed and open. * Used in tests to assert that intermediary states are rendered. @@ -246,23 +238,16 @@ export default class TooltipModifier extends Modifier * Create the tooltip and set its attributes */ this.tooltip = document.createElement("div"); - this.tooltip.classList.add( - "hermes-floating-ui-content", - "hermes-tooltip" - ); + this.tooltip.classList.add("hermes-floating-ui-content", "hermes-tooltip"); this.tooltip.setAttribute("id", `tooltip-${this.id}`); this.tooltip.setAttribute("role", "tooltip"); - this.tooltipContent = document.createElement("div"); - this.tooltipContent.classList.add("hermes-tooltip"); - this.tooltip.appendChild(this.tooltipContent); - /** * Create the arrow and append it to the tooltip */ this._arrow = document.createElement("div"); this._arrow.classList.add("arrow"); - this.tooltipContent.appendChild(this._arrow); + this.tooltip.appendChild(this._arrow); /** * Create the textElement and append it to the tooltip @@ -270,7 +255,7 @@ export default class TooltipModifier extends Modifier const textElement = document.createElement("div"); textElement.textContent = this.tooltipText; textElement.classList.add("text"); - this.tooltipContent.appendChild(textElement); + this.tooltip.appendChild(textElement); /** * Append the tooltip to the end of the document. From 47ac4fa813b271c7d676b7d5acf16d1c3e3b4b03 Mon Sep 17 00:00:00 2001 From: Jeff Daley Date: Fri, 7 Jul 2023 13:15:09 -0400 Subject: [PATCH 25/42] Update sidebar.scss --- web/app/styles/components/sidebar.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/app/styles/components/sidebar.scss b/web/app/styles/components/sidebar.scss index 0f3bd1467..2a3035d2d 100644 --- a/web/app/styles/components/sidebar.scss +++ b/web/app/styles/components/sidebar.scss @@ -58,7 +58,7 @@ } &.out { - animation: fadeOut 200ms ease-out 50ms forwards, + animation: fadeOut 50ms ease-out 200ms forwards, slideDownAndRotateLeft 250ms ease-out forwards; } From 0d33bd303fb248cab1e113a5c8b6696c4179002a Mon Sep 17 00:00:00 2001 From: Jeff Daley Date: Mon, 17 Jul 2023 14:31:43 -0400 Subject: [PATCH 26/42] Update sidebar.hbs --- web/app/components/document/sidebar.hbs | 34 +++---------------------- 1 file changed, 3 insertions(+), 31 deletions(-) diff --git a/web/app/components/document/sidebar.hbs b/web/app/components/document/sidebar.hbs index 29dbb3320..a1c8afcde 100644 --- a/web/app/components/document/sidebar.hbs +++ b/web/app/components/document/sidebar.hbs @@ -3,6 +3,9 @@ @isCollapsed={{@isCollapsed}} @toggleCollapsed={{@toggleCollapsed}} @userHasScrolled={{this.userHasScrolled}} + @shareButtonIsShown={{eq this.draftVisibility "shareable"}} + @shareButtonTooltipText={{this.shareButtonTooltipText}} + @shareButtonTooltipIcon={{this.shareButtonTooltipIcon}} /> {{#unless @isCollapsed}} @@ -11,22 +14,9 @@ {{on "scroll" this.onScroll}} {{did-insert this.registerBody}} > - {{#let (get-product-id this.product) as |productIcon|}} - {{#if productIcon}} -
- -
- {{/if}} - {{/let}} -
- - {{#if (is-empty @document.docNumber)}} - {{#unless - (is-empty @document.docType) - }}{{@document.docType}}{{/unless}} - - {{else}} - {{#unless - (is-empty @document.docType) - }}{{@document.docType}}{{/unless}} - • - - {{@document.docNumber}} - - - {{/if}} -
-
{{#if this.isDraft}} From 73ff32898a44f40f75902d9fea5ca480023f2af9 Mon Sep 17 00:00:00 2001 From: Jeff Daley Date: Tue, 18 Jul 2023 17:37:47 -0400 Subject: [PATCH 27/42] Basic wiring up --- web/app/components/document/sidebar.hbs | 2 +- web/app/components/document/sidebar.ts | 61 ++++++++++++++++++++----- 2 files changed, 51 insertions(+), 12 deletions(-) diff --git a/web/app/components/document/sidebar.hbs b/web/app/components/document/sidebar.hbs index a1c8afcde..5ad47a990 100644 --- a/web/app/components/document/sidebar.hbs +++ b/web/app/components/document/sidebar.hbs @@ -3,7 +3,7 @@ @isCollapsed={{@isCollapsed}} @toggleCollapsed={{@toggleCollapsed}} @userHasScrolled={{this.userHasScrolled}} - @shareButtonIsShown={{eq this.draftVisibility "shareable"}} + @shareButtonIsShown={{or (not this.isDraft) this.draftIsShareable}} @shareButtonTooltipText={{this.shareButtonTooltipText}} @shareButtonTooltipIcon={{this.shareButtonTooltipIcon}} /> diff --git a/web/app/components/document/sidebar.ts b/web/app/components/document/sidebar.ts index 95da998ac..ff1522853 100644 --- a/web/app/components/document/sidebar.ts +++ b/web/app/components/document/sidebar.ts @@ -71,10 +71,22 @@ export default class DocumentSidebarComponent extends Component { const shareButton = document.getElementById( "sidebar-header-copy-url-button" @@ -332,12 +360,8 @@ export default class DocumentSidebarComponent extends Component { + try { + const response = await this.fetchSvc + .fetch(`/api/v1/drafts/${this.docID}/shareable`) + .then((response) => response?.json()); + if (response?.isShareable) { + this._draftIsShareable = true; + } + } catch {} + }); + approve = task(async () => { try { await this.fetchSvc.fetch(`/api/v1/approvals/${this.docID}`, { From 8d4b45ec90b6549b0fe94ebdb699c8d961e320a7 Mon Sep 17 00:00:00 2001 From: Jeff Daley Date: Wed, 19 Jul 2023 10:06:27 -0400 Subject: [PATCH 28/42] Update copyable URL (draft) --- web/app/components/document/sidebar/header.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/web/app/components/document/sidebar/header.ts b/web/app/components/document/sidebar/header.ts index 3bab25992..8bd638cac 100644 --- a/web/app/components/document/sidebar/header.ts +++ b/web/app/components/document/sidebar/header.ts @@ -38,6 +38,11 @@ export default class DocumentSidebarHeaderComponent extends Component Date: Wed, 19 Jul 2023 10:23:03 -0400 Subject: [PATCH 29/42] Add documentation to CopyURL --- web/app/components/copy-u-r-l-button.hbs | 10 +--- web/app/components/copy-u-r-l-button.ts | 51 +++++++++++++++---- .../components/document/sidebar/header.hbs | 2 +- 3 files changed, 45 insertions(+), 18 deletions(-) diff --git a/web/app/components/copy-u-r-l-button.hbs b/web/app/components/copy-u-r-l-button.hbs index ce54151ec..8df377610 100644 --- a/web/app/components/copy-u-r-l-button.hbs +++ b/web/app/components/copy-u-r-l-button.hbs @@ -3,7 +3,7 @@ {{tooltip this.tooltipText placement=this.tooltipPlacement - isForcedOpen=this.isForcedOpen + isForcedOpen=this.tooltipIsForcedOpen stayOpenOnClick=true delay=this.delay }} @@ -11,11 +11,5 @@ {{on "click" (perform this.copyURL)}} ...attributes > - + diff --git a/web/app/components/copy-u-r-l-button.ts b/web/app/components/copy-u-r-l-button.ts index b47596dc0..5998656a1 100644 --- a/web/app/components/copy-u-r-l-button.ts +++ b/web/app/components/copy-u-r-l-button.ts @@ -15,7 +15,7 @@ interface CopyURLButtonComponentSignature { tooltipPlacement?: Placement; tooltipIsForcedOpen?: boolean; tooltipText?: string; - tooltipIcon?: string; + icon?: string; }; } @@ -29,36 +29,69 @@ export default class CopyURLButtonComponent extends Component Date: Wed, 19 Jul 2023 10:30:00 -0400 Subject: [PATCH 30/42] Revert out-of-scope changes --- web/app/components/doc/row.hbs | 8 ++-- web/app/components/doc/state.hbs | 4 +- web/app/components/doc/thumbnail.hbs | 13 +----- web/app/components/doc/tile.hbs | 50 +++++++-------------- web/app/components/person/index.hbs | 5 +-- web/app/components/person/index.ts | 3 +- web/app/styles/animations.scss | 6 --- web/app/styles/components/doc/tile.scss | 4 +- web/app/styles/components/sidebar.scss | 19 +++----- web/app/styles/hashicorp/product-badge.scss | 6 +-- 10 files changed, 36 insertions(+), 82 deletions(-) diff --git a/web/app/components/doc/row.hbs b/web/app/components/doc/row.hbs index 39794ebcb..3e3977481 100644 --- a/web/app/components/doc/row.hbs +++ b/web/app/components/doc/row.hbs @@ -24,9 +24,11 @@ - - {{this.productAreaName}} - + diff --git a/web/app/components/doc/state.hbs b/web/app/components/doc/state.hbs index 21d5a0178..84e08f561 100644 --- a/web/app/components/doc/state.hbs +++ b/web/app/components/doc/state.hbs @@ -9,8 +9,8 @@ {{/unless}} -{{!-- --}} +/> diff --git a/web/app/components/doc/thumbnail.hbs b/web/app/components/doc/thumbnail.hbs index 11a9f5228..393eeefb9 100644 --- a/web/app/components/doc/thumbnail.hbs +++ b/web/app/components/doc/thumbnail.hbs @@ -9,17 +9,6 @@
- {{#if (eq @status "wip")}} - - -
-
Draft
- - {{/if}} {{#if this.isObsolete}} {{/if}} @@ -38,7 +27,7 @@ {{#if this.productShortName}}
diff --git a/web/app/components/doc/tile.hbs b/web/app/components/doc/tile.hbs index 0e0e3bb91..42eb808e6 100644 --- a/web/app/components/doc/tile.hbs +++ b/web/app/components/doc/tile.hbs @@ -2,9 +2,9 @@ @route="authenticated.document" @model={{@docID}} @query={{hash draft=@isDraft}} - class="flex flex-col items-start p-4 -m-4 rounded-md hover:bg-color-palette-neutral-50 active:bg-color-palette-neutral-100 overflow-hidden" + class="flex flex-col items-start space-y-2 p-4 -m-4 rounded-md hover:bg-color-palette-neutral-50 active:bg-color-palette-neutral-100 overflow-hidden" > -
+
-
- {{!-- - {{if (eq @status "wip") "Draft" @docNumber}} - --}} +

{{@title}}

+ {{#if (not (is-empty @docNumber))}} + + {{@docNumber}} + + {{/if}} +
+ +
+ {{#if (not (is-empty @modifiedAgo))}} -

+

{{@modifiedAgo}}

{{/if}}
-
- -
- -
- {{!--
- -
--}} -
- {{or @productArea "Unknown"}} -
-
+ {{#if (and @isResult @snippet)}} diff --git a/web/app/components/person/index.hbs b/web/app/components/person/index.hbs index 82e308b41..22f3f4ec4 100644 --- a/web/app/components/person/index.hbs +++ b/web/app/components/person/index.hbs @@ -14,8 +14,7 @@
{{/if}}
{{#if @imgURL}} @@ -35,7 +34,7 @@
{{or @email "Unknown"}} diff --git a/web/app/components/person/index.ts b/web/app/components/person/index.ts index 48cf7420f..db7418b62 100644 --- a/web/app/components/person/index.ts +++ b/web/app/components/person/index.ts @@ -3,11 +3,10 @@ import Component from "@glimmer/component"; interface PersonComponentSignature { Element: HTMLDivElement; Args: { - email?: string; + email: string; imgURL?: string | null; ignoreUnknown?: boolean; badge?: string; - onlyShowAvatar?: boolean; }; } diff --git a/web/app/styles/animations.scss b/web/app/styles/animations.scss index bd659813f..cc6d9d74c 100644 --- a/web/app/styles/animations.scss +++ b/web/app/styles/animations.scss @@ -26,9 +26,3 @@ transform: scale(1); } } - -@keyframes slideDownAndRotateLeft { - to { - transform: translateY(18px) rotate(-360deg); - } -} diff --git a/web/app/styles/components/doc/tile.scss b/web/app/styles/components/doc/tile.scss index 05f8efd5c..32d0ce177 100644 --- a/web/app/styles/components/doc/tile.scss +++ b/web/app/styles/components/doc/tile.scss @@ -2,6 +2,6 @@ @apply text-display-200 font-semibold text-color-foreground-strong overflow-hidden; display: -webkit-box; -webkit-box-orient: vertical; - -webkit-line-clamp: 2; - line-clamp: 2; + -webkit-line-clamp: 3; + line-clamp: 3; } diff --git a/web/app/styles/components/sidebar.scss b/web/app/styles/components/sidebar.scss index 2a3035d2d..bdd35f594 100644 --- a/web/app/styles/components/sidebar.scss +++ b/web/app/styles/components/sidebar.scss @@ -40,21 +40,12 @@ content: ""; @apply opacity-0 absolute top-0 left-0 w-full h-full rounded border bg-color-surface-highlight z-[-1]; } + } - // &::before { - // --scaleInFrom: 0.3; - // animation: fadeIn 150ms ease-in forwards 50ms, - // scaleIn 250ms cubic-bezier(0, 1, 0.5, 1) forwards, - // fadeOut 500ms ease-out 2000ms forwards; - // } - - // &::after { - // --scaleInFrom: 0.3; - // animation: fadeIn 300ms ease-in forwards 50ms, - // scaleIn 250ms cubic-bezier(0, 1, 0.5, 1) forwards, - // fadeOut 1500ms ease-out 1000ms forwards; - // border-color: #cf9cf8b4; - // } + @keyframes slideDownAndRotateLeft { + to { + transform: translateY(18px) rotate(-360deg); + } } &.out { diff --git a/web/app/styles/hashicorp/product-badge.scss b/web/app/styles/hashicorp/product-badge.scss index 7e54b5a44..6f575f700 100644 --- a/web/app/styles/hashicorp/product-badge.scss +++ b/web/app/styles/hashicorp/product-badge.scss @@ -1,9 +1,5 @@ .product-badge { - @apply grid place-items-center absolute; -} - -.product-themed { - @apply bg-gradient-to-br from-color-palette-neutral-500 to-color-palette-neutral-600 text-color-foreground-high-contrast; + @apply grid place-items-center absolute bg-gradient-to-br from-color-palette-neutral-500 to-color-palette-neutral-600 text-color-foreground-high-contrast; // `.hcp` uses the default styles From 4ce452e68717442910873e6e0b10246ce8047e42 Mon Sep 17 00:00:00 2001 From: Jeff Daley Date: Wed, 19 Jul 2023 11:26:10 -0400 Subject: [PATCH 31/42] Revert drastic design changes --- web/app/components/document/sidebar.hbs | 145 +++++++++++------------- web/app/styles/components/sidebar.scss | 2 +- 2 files changed, 70 insertions(+), 77 deletions(-) diff --git a/web/app/components/document/sidebar.hbs b/web/app/components/document/sidebar.hbs index 5ad47a990..8490b6319 100644 --- a/web/app/components/document/sidebar.hbs +++ b/web/app/components/document/sidebar.hbs @@ -14,9 +14,25 @@ {{on "scroll" this.onScroll}} {{did-insert this.registerBody}} > + {{#let (get-product-id this.product) as |productIcon|}} + {{#if productIcon}} +
+ +
+ {{/if}} + {{/let}} +
-
+ {{! div to break the parent's space-y styles }} +
- - {{/if}}
@@ -84,8 +98,7 @@ class="hds-typography-display-300 hds-font-weight-semibold hds-foreground-strong" >{{this.title}} {{else}} -
- +
{{/if}} +
- {{! Summary }} -
- {{#if this.editingIsDisabled}} -

{{this.summary}}

- {{else}} - - <:default> - {{#unless (is-empty this.summary)}} -

- {{this.summary}}

- {{else}} -

- Enter a summary here.

- {{/unless}} - - <:editing as |F|> - - - - {{/if}} -
+
- {{! Pills }} -
-
+ + {{#if this.editingIsDisabled}} +

{{this.summary}}

+ {{else}} + - {{@document.docType}} -
- {{#if this.statusIsShown}} -
- {{@document.status}} -
- {{/if}} + <:default> + {{#unless (is-empty this.summary)}} +

+ {{this.summary}}

+ {{else}} +

+ Enter a summary here.

+ {{/unless}} + + <:editing as |F|> + + + + {{/if}} +
+ +
+ +
+ +
@@ -192,20 +195,10 @@ />
{{else}} -
-
- -
-
- {{or this.product "Unknown"}} -
-
+ {{/if}}
diff --git a/web/app/styles/components/sidebar.scss b/web/app/styles/components/sidebar.scss index bdd35f594..1fe750e75 100644 --- a/web/app/styles/components/sidebar.scss +++ b/web/app/styles/components/sidebar.scss @@ -88,7 +88,7 @@ } .sidebar-body-container { - @apply pt-4 pb-10 pl-7 pr-3 space-y-8; + @apply pt-14 pb-10 pl-7 pr-3 space-y-8; } /* Style the scrollbar for Chrome, Safari, and Opera. */ From 132128aa0253870084c68b4634dad6bd6821e59d Mon Sep 17 00:00:00 2001 From: Jeff Daley Date: Wed, 19 Jul 2023 11:28:42 -0400 Subject: [PATCH 32/42] Rename a prop --- web/app/components/doc/row.hbs | 8 ++++---- web/app/components/document/sidebar.hbs | 2 +- web/app/components/document/sidebar.ts | 2 +- web/app/components/document/sidebar/header.hbs | 2 +- web/app/components/document/sidebar/header.ts | 2 +- 5 files changed, 8 insertions(+), 8 deletions(-) diff --git a/web/app/components/doc/row.hbs b/web/app/components/doc/row.hbs index 3e3977481..159bdcd54 100644 --- a/web/app/components/doc/row.hbs +++ b/web/app/components/doc/row.hbs @@ -25,10 +25,10 @@ + @text={{this.productAreaName}} + @icon={{or (get-product-id @productArea) "folder"}} + title={{this.productAreaName}} + /> diff --git a/web/app/components/document/sidebar.hbs b/web/app/components/document/sidebar.hbs index 8490b6319..eb21afb50 100644 --- a/web/app/components/document/sidebar.hbs +++ b/web/app/components/document/sidebar.hbs @@ -5,7 +5,7 @@ @userHasScrolled={{this.userHasScrolled}} @shareButtonIsShown={{or (not this.isDraft) this.draftIsShareable}} @shareButtonTooltipText={{this.shareButtonTooltipText}} - @shareButtonTooltipIcon={{this.shareButtonTooltipIcon}} + @shareButtonIcon={{this.shareButtonIcon}} /> {{#unless @isCollapsed}} diff --git a/web/app/components/document/sidebar.ts b/web/app/components/document/sidebar.ts index ff1522853..37718b14f 100644 --- a/web/app/components/document/sidebar.ts +++ b/web/app/components/document/sidebar.ts @@ -292,7 +292,7 @@ export default class DocumentSidebarComponent extends Component Date: Wed, 19 Jul 2023 12:50:07 -0400 Subject: [PATCH 33/42] Improve UI reactivity --- web/app/components/document/sidebar.hbs | 6 +- web/app/components/document/sidebar.ts | 243 ++++++++++++++++-------- web/app/styles/components/sidebar.scss | 10 - 3 files changed, 166 insertions(+), 93 deletions(-) diff --git a/web/app/components/document/sidebar.hbs b/web/app/components/document/sidebar.hbs index eb21afb50..97147d86c 100644 --- a/web/app/components/document/sidebar.hbs +++ b/web/app/components/document/sidebar.hbs @@ -3,9 +3,9 @@ @isCollapsed={{@isCollapsed}} @toggleCollapsed={{@toggleCollapsed}} @userHasScrolled={{this.userHasScrolled}} - @shareButtonIsShown={{or (not this.isDraft) this.draftIsShareable}} - @shareButtonTooltipText={{this.shareButtonTooltipText}} - @shareButtonIcon={{this.shareButtonIcon}} + @shareButtonIsShown={{this.shareButtonIsShown}} + @shareButtonTooltipText={{this.temporaryShareButtonTooltipText}} + @shareButtonIcon={{this.temporaryShareButtonIcon}} /> {{#unless @isCollapsed}} diff --git a/web/app/components/document/sidebar.ts b/web/app/components/document/sidebar.ts index 37718b14f..ebbee3e05 100644 --- a/web/app/components/document/sidebar.ts +++ b/web/app/components/document/sidebar.ts @@ -10,7 +10,7 @@ import { task, timeout, } from "ember-concurrency"; -import { dasherize } from "@ember/string"; +import { capitalize, dasherize } from "@ember/string"; import cleanString from "hermes/utils/clean-string"; import { debounce, schedule } from "@ember/runloop"; import FetchService from "hermes/services/fetch"; @@ -22,6 +22,7 @@ import { HermesDocument, HermesUser } from "hermes/types/document"; import { assert } from "@ember/debug"; import Route from "@ember/routing/route"; import Ember from "ember"; +import htmlElement from "hermes/utils/html-element"; interface DocumentSidebarComponentSignature { Args: { @@ -34,6 +35,19 @@ interface DocumentSidebarComponentSignature { }; } +export enum DraftVisibility { + Restricted = "restricted", + Shareable = "shareable", +} + +export enum DraftVisibilityIcon { + Restricted = "lock", + Shareable = "enterprise", + Loading = "loading", +} + +const SHARE_BUTTON_SELECTOR = "#sidebar-header-copy-url-button"; + export default class DocumentSidebarComponent extends Component { @service("fetch") declare fetchSvc: FetchService; @service declare router: RouterService; @@ -71,21 +85,73 @@ export default class DocumentSidebarComponent extends Component { - // TODO: this actually has to copy the URL to the clipboard - await timeout(1000); + /** + * A task that waits for a short time and then resolves. + * Used to trigger the "link created" state of the share button. + */ + protected showCreateLinkSuccessMessage = restartableTask(async () => { + await timeout(Ember.testing ? 0 : 1000); }); + /** + * Sets the draft's `isShareable` property based on a selection + * in the draft-visibility dropdown. Immediately updates the UI + * to reflect the intended change while a request is made to the + * back end. Once the request completes, the UI is updated again + * to reflect the actual state of the document. + */ protected setDraftVisibility = restartableTask( - async (newVisibility: string) => { + async (newVisibility: DraftVisibility) => { if (this.draftVisibility === newVisibility) { return; } - this._tempNewVisibility = newVisibility; - try { - if (newVisibility === "restricted") { - // user is disabling the link button - const shareButton = document.getElementById( - "sidebar-header-copy-url-button" - ); - assert("shareButton is expected", shareButton); - shareButton.classList.remove("in"); + if (newVisibility === DraftVisibility.Restricted) { + this.newDraftVisibilityIcon = DraftVisibilityIcon.Restricted; + + const shareButton = htmlElement(SHARE_BUTTON_SELECTOR); + shareButton.classList.add("out"); void this.fetchSvc.fetch(`/api/v1/drafts/${this.docID}/shareable`, { @@ -336,15 +421,18 @@ export default class DocumentSidebarComponent extends Component { - const shareButton = document.getElementById( - "sidebar-header-copy-url-button" - ); - assert("shareButton is expected", shareButton); - shareButton.classList.add("in"); - }); - - void this.showCopyURLSuccessMessage.perform(); + // Kick off the timer for the "link created" state. + void this.showCreateLinkSuccessMessage.perform(); } } catch (error: unknown) { - this.maybeShowFlashError( + this.showFlashError( error as Error, - "Unable to update document visibility" + "Unable to update draft visibility" ); } finally { - // set the classes back to normal - // maybe don't bring CSS into this? - this._tempNewVisibility = null; + // reset the new-visibility-intent icon + this.newDraftVisibilityIcon = null; } } ); @@ -493,13 +573,16 @@ export default class DocumentSidebarComponent extends Component { try { const response = await this.fetchSvc .fetch(`/api/v1/drafts/${this.docID}/shareable`) .then((response) => response?.json()); if (response?.isShareable) { - this._draftIsShareable = true; + this._docIsShareable = true; } } catch {} }); diff --git a/web/app/styles/components/sidebar.scss b/web/app/styles/components/sidebar.scss index 1fe750e75..2e3b91bd8 100644 --- a/web/app/styles/components/sidebar.scss +++ b/web/app/styles/components/sidebar.scss @@ -32,16 +32,6 @@ @apply border-color-border-strong bg-color-foreground-high-contrast; } - &.in { - animation: fadeIn 0ms forwards; - - &::before, - &::after { - content: ""; - @apply opacity-0 absolute top-0 left-0 w-full h-full rounded border bg-color-surface-highlight z-[-1]; - } - } - @keyframes slideDownAndRotateLeft { to { transform: translateY(18px) rotate(-360deg); From 37d59d40ae6b920fb12ad045569ecac38b3a1590 Mon Sep 17 00:00:00 2001 From: Jeff Daley Date: Wed, 19 Jul 2023 12:51:24 -0400 Subject: [PATCH 34/42] Remove unused property --- web/app/components/copy-u-r-l-button.hbs | 1 - web/app/components/copy-u-r-l-button.ts | 11 ----------- 2 files changed, 12 deletions(-) diff --git a/web/app/components/copy-u-r-l-button.hbs b/web/app/components/copy-u-r-l-button.hbs index 8df377610..d13b7addd 100644 --- a/web/app/components/copy-u-r-l-button.hbs +++ b/web/app/components/copy-u-r-l-button.hbs @@ -5,7 +5,6 @@ placement=this.tooltipPlacement isForcedOpen=this.tooltipIsForcedOpen stayOpenOnClick=true - delay=this.delay }} {{did-insert this.didInsertButton}} {{on "click" (perform this.copyURL)}} diff --git a/web/app/components/copy-u-r-l-button.ts b/web/app/components/copy-u-r-l-button.ts index 5998656a1..efd3dcfe1 100644 --- a/web/app/components/copy-u-r-l-button.ts +++ b/web/app/components/copy-u-r-l-button.ts @@ -78,17 +78,6 @@ export default class CopyURLButtonComponent extends Component Date: Wed, 19 Jul 2023 12:52:24 -0400 Subject: [PATCH 35/42] Remove unused import --- web/app/components/document/sidebar.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/web/app/components/document/sidebar.ts b/web/app/components/document/sidebar.ts index ebbee3e05..d27de4f40 100644 --- a/web/app/components/document/sidebar.ts +++ b/web/app/components/document/sidebar.ts @@ -4,7 +4,6 @@ import { action } from "@ember/object"; import { getOwner } from "@ember/application"; import { inject as service } from "@ember/service"; import { - dropTask, keepLatestTask, restartableTask, task, From 8112020e8f9dec41d34d3acfdb60740f21dacd55 Mon Sep 17 00:00:00 2001 From: Jeff Daley Date: Wed, 19 Jul 2023 12:56:59 -0400 Subject: [PATCH 36/42] Rename didInsert --- web/app/components/document/sidebar.hbs | 2 +- web/app/components/document/sidebar.ts | 9 +++++++-- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/web/app/components/document/sidebar.hbs b/web/app/components/document/sidebar.hbs index 97147d86c..4418c418a 100644 --- a/web/app/components/document/sidebar.hbs +++ b/web/app/components/document/sidebar.hbs @@ -12,7 +12,7 @@
{{#let (get-product-id this.product) as |productIcon|}} {{#if productIcon}} diff --git a/web/app/components/document/sidebar.ts b/web/app/components/document/sidebar.ts index d27de4f40..5bd08117c 100644 --- a/web/app/components/document/sidebar.ts +++ b/web/app/components/document/sidebar.ts @@ -11,7 +11,7 @@ import { } from "ember-concurrency"; import { capitalize, dasherize } from "@ember/string"; import cleanString from "hermes/utils/clean-string"; -import { debounce, schedule } from "@ember/runloop"; +import { debounce } from "@ember/runloop"; import FetchService from "hermes/services/fetch"; import RouterService from "@ember/routing/router-service"; import SessionService from "hermes/services/session"; @@ -564,7 +564,11 @@ export default class DocumentSidebarComponent extends Component { try { From bdd3b2ebcd953b2502db5ac1d5c226df2d9f97b6 Mon Sep 17 00:00:00 2001 From: Jeff Daley Date: Wed, 19 Jul 2023 13:06:57 -0400 Subject: [PATCH 37/42] Documentation and dasherize test --- web/app/components/document/sidebar.ts | 5 ++-- web/app/components/document/sidebar/header.ts | 16 ++++++++++++ .../integration/helpers/dasherize-test.ts | 26 +++++++++++++++++++ 3 files changed, 45 insertions(+), 2 deletions(-) create mode 100644 web/tests/integration/helpers/dasherize-test.ts diff --git a/web/app/components/document/sidebar.ts b/web/app/components/document/sidebar.ts index 5bd08117c..379a7d0f0 100644 --- a/web/app/components/document/sidebar.ts +++ b/web/app/components/document/sidebar.ts @@ -135,9 +135,10 @@ export default class DocumentSidebarComponent extends Component { @service("config") declare configSvc: ConfigService; + /** + * Whether the tooltip is forced open, regardless of hover state. + * True if the parent component has passed a tooltip text prop, + * e.g., "Creating link..." or "Link created." + */ get tooltipIsForcedOpen() { if (this.args.shareButtonTooltipText) { return true; @@ -28,6 +33,11 @@ export default class DocumentSidebarHeaderComponent extends Component; +} + +module("Integration | Helper | dasherize", function (hooks) { + setupRenderingTest(hooks); + + test("it dasherizes strings", async function (this: DasherizeHelperTestContext, assert) { + await render(hbs` +
{{dasherize "foo Bar"}}
+
{{dasherize "fooBar"}}
+
{{dasherize "foo_bar"}}
+
{{dasherize undefined}}
+ `); + + assert.equal(find(".one")?.textContent?.trim(), "foo-bar"); + assert.equal(find(".two")?.textContent?.trim(), "foo-bar"); + assert.equal(find(".three")?.textContent?.trim(), "foo-bar"); + assert.equal(find(".four")?.textContent?.trim(), ""); + }); +}); From 221652ca2f6006af1200d568bfe8fb45d6ef253a Mon Sep 17 00:00:00 2001 From: Jeff Daley Date: Wed, 19 Jul 2023 13:15:18 -0400 Subject: [PATCH 38/42] Remove old code, unused color variables --- web/app/modifiers/tooltip.ts | 13 +++++++++---- web/tailwind.config.js | 4 ---- 2 files changed, 9 insertions(+), 8 deletions(-) diff --git a/web/app/modifiers/tooltip.ts b/web/app/modifiers/tooltip.ts index d15ad4fbb..a5246c8f9 100644 --- a/web/app/modifiers/tooltip.ts +++ b/web/app/modifiers/tooltip.ts @@ -50,11 +50,9 @@ enum TooltipState { interface TooltipModifierNamedArgs { placement?: Placement; stayOpenOnClick?: boolean; - // TODO: investigate "trigger: manual" as an alternative isForcedOpen?: boolean; delay?: number; openDuration?: number; - isDisabled?: boolean; _useTestDelay?: boolean; } @@ -175,6 +173,11 @@ export default class TooltipModifier extends Modifier */ @tracked stayOpenOnClick = false; + /** + * Whether the tooltip should be forced open, regardless of hover state. + * Used in components like `CopyURLButton` to programmatically open the tooltip + * to show states that aren't triggered by hover, e.g., "Creating link..." + */ @tracked isForcedOpen?: boolean; /** @@ -377,8 +380,6 @@ export default class TooltipModifier extends Modifier } ); try { - console.log("trying..."); - // this isn't being awaited for some reason await Promise.all([ fadeAnimation.finished, transformAnimation.finished, @@ -465,6 +466,10 @@ export default class TooltipModifier extends Modifier } } + /** + * The function that runs when the modifier is updated. + * Used to catch when `named.isForcedOpen` changes from true to false. + */ @action maybeForceHidden() { if (this.isForcedOpen) { schedule("afterRender", () => { diff --git a/web/tailwind.config.js b/web/tailwind.config.js index 03e0f3940..91f0be734 100644 --- a/web/tailwind.config.js +++ b/web/tailwind.config.js @@ -66,19 +66,15 @@ module.exports = { "color-surface-primary": "var(--token-color-surface-primary)", "color-surface-strong": "var(--token-color-surface-strong)", "color-surface-warning": "var(--token-color-surface-warning)", - "color-surface-success": "var(--token-color-surface-success)", // Border "color-border-faint": "var(--token-color-border-faint)", - "color-border-action": "var(--token-color-border-action)", "color-border-critical": "var(--token-color-border-critical)", "color-border-highlight": "var(--token-color-border-highlight)", "color-border-faint": "var(--token-color-border-faint)", "color-border-primary": "var(--token-color-border-primary)", "color-border-strong": "var(--token-color-border-strong)", "color-border-warning": "var(--token-color-border-warning)", - "color-border-highlight": "var(--token-color-border-highlight)", - "color-border-success": "var(--token-color-border-success)", // Page "color-page-faint": "var(--token-color-page-faint)", From 274edc20ac9de1b4efc2e86360d9a68c8e9fc05d Mon Sep 17 00:00:00 2001 From: Jeff Daley Date: Wed, 19 Jul 2023 13:17:35 -0400 Subject: [PATCH 39/42] CSS tweak --- web/app/styles/components/sidebar.scss | 4 ---- 1 file changed, 4 deletions(-) diff --git a/web/app/styles/components/sidebar.scss b/web/app/styles/components/sidebar.scss index 2e3b91bd8..bb8373b2b 100644 --- a/web/app/styles/components/sidebar.scss +++ b/web/app/styles/components/sidebar.scss @@ -42,10 +42,6 @@ animation: fadeOut 50ms ease-out 200ms forwards, slideDownAndRotateLeft 250ms ease-out forwards; } - - &.in:hover { - @apply bg-transparent; - } } .draft-visibility-button { From 1a3b787f1d21598d285a7b7e464f8b71da976a14 Mon Sep 17 00:00:00 2001 From: Jeff Daley Date: Wed, 19 Jul 2023 13:28:25 -0400 Subject: [PATCH 40/42] Add CopyURLButton tests --- web/app/components/copy-u-r-l-button.hbs | 2 +- web/app/components/copy-u-r-l-button.ts | 8 --- .../components/copy-u-r-l-button-test.ts | 57 +++++++++++++++++-- 3 files changed, 52 insertions(+), 15 deletions(-) diff --git a/web/app/components/copy-u-r-l-button.hbs b/web/app/components/copy-u-r-l-button.hbs index d13b7addd..841739385 100644 --- a/web/app/components/copy-u-r-l-button.hbs +++ b/web/app/components/copy-u-r-l-button.hbs @@ -2,7 +2,7 @@ data-test-copy-url-button {{tooltip this.tooltipText - placement=this.tooltipPlacement + placement=@tooltipPlacement isForcedOpen=this.tooltipIsForcedOpen stayOpenOnClick=true }} diff --git a/web/app/components/copy-u-r-l-button.ts b/web/app/components/copy-u-r-l-button.ts index efd3dcfe1..78c8a73c9 100644 --- a/web/app/components/copy-u-r-l-button.ts +++ b/web/app/components/copy-u-r-l-button.ts @@ -44,14 +44,6 @@ export default class CopyURLButtonComponent extends Component(hbs`
`); - - assert .dom("[data-test-copy-url-button]") .hasClass("test-class") @@ -74,4 +78,45 @@ module("Integration | Component | copy-u-r-l-button", function (hooks) { await clickPromise; }); + + test("the tooltip can be forced open", async function (assert) { + await render(hbs` +
+ +
+ `); + + assert.dom(".hermes-tooltip").exists("The tooltip is rendered"); + }); + + test("the tooltip text can be overridden", async function (assert) { + await render(hbs` +
+ +
+ `); + + assert.dom(".hermes-tooltip .text").hasText("Creating link..."); + }); + + test("the icon can be overridden", async function (assert) { + await render(hbs` +
+ +
+ `); + + assert.dom(".hermes-icon").hasClass("loading"); + }); }); From bda5c5be4f13e5544cc8a6dc665e3cd6f605c755 Mon Sep 17 00:00:00 2001 From: Jeff Daley Date: Wed, 19 Jul 2023 15:34:26 -0400 Subject: [PATCH 41/42] Additional tests and cleanup --- web/app/components/copy-u-r-l-button.hbs | 2 + web/app/components/copy-u-r-l-button.ts | 2 +- web/app/components/document/sidebar.hbs | 26 +-- web/app/components/document/sidebar.ts | 19 +- web/app/components/document/sidebar/header.ts | 2 +- web/mirage/config.ts | 22 ++- .../acceptance/authenticated/document-test.ts | 180 ++++++++++++++++-- 7 files changed, 218 insertions(+), 35 deletions(-) diff --git a/web/app/components/copy-u-r-l-button.hbs b/web/app/components/copy-u-r-l-button.hbs index 841739385..870fcb1a4 100644 --- a/web/app/components/copy-u-r-l-button.hbs +++ b/web/app/components/copy-u-r-l-button.hbs @@ -1,5 +1,7 @@ @@ -71,17 +76,16 @@ <:item as |dd|>
-

- {{dd.attrs.title}} -

-

- {{dd.attrs.description}} -

+

{{dd.attrs.title}}

+

{{dd.attrs.description}}

{ @@ -112,6 +117,14 @@ export default class DocumentSidebarComponent extends Component { + return new Response(200, {}, { isShareable: false }); + }); + /** * Used by the RelatedResources component when the doc is a draft. */ this.get("drafts/:document_id/related-resources", (schema, request) => { - console.log('drafts related resources'); let hermesDocuments = schema.relatedHermesDocument .all() .models.map((doc) => { @@ -488,6 +494,20 @@ export default function (mirageConfig) { return new Response(200, {}, {}); } ); + + // Update whether a draft is shareable. + this.put("/drafts/:document_id/shareable", (schema, request) => { + const isShareable = JSON.parse(request.requestBody).isShareable; + + let doc = schema.document.findBy({ + objectID: request.params.document_id, + }); + + if (doc) { + doc.update({ isShareable }); + return new Response(200, {}, doc.attrs); + } + }); }, }; diff --git a/web/tests/acceptance/authenticated/document-test.ts b/web/tests/acceptance/authenticated/document-test.ts index f8d7bee9e..07ca9a86a 100644 --- a/web/tests/acceptance/authenticated/document-test.ts +++ b/web/tests/acceptance/authenticated/document-test.ts @@ -1,14 +1,35 @@ -import { click, findAll, visit, waitFor } from "@ember/test-helpers"; +import { + click, + findAll, + triggerEvent, + visit, + waitFor, +} from "@ember/test-helpers"; import { setupApplicationTest } from "ember-qunit"; import { module, test } from "qunit"; import { authenticateSession } from "ember-simple-auth/test-support"; import { MirageTestContext, setupMirage } from "ember-cli-mirage/test-support"; import { getPageTitle } from "ember-page-title/test-support"; +import { + DraftVisibility, + DraftVisibilityDescription, + DraftVisibilityIcon, +} from "hermes/components/document/sidebar"; +import { capitalize } from "@ember/string"; +import window from "ember-window-mock"; const ADD_RELATED_RESOURCE_BUTTON_SELECTOR = "[data-test-section-header-button-for='Related resources']"; const ADD_RELATED_DOCUMENT_OPTION_SELECTOR = ".related-document-option"; const FLASH_MESSAGE_SELECTOR = "[data-test-flash-notification]"; +const SIDEBAR_TITLE_BADGE_SELECTOR = "[data-test-sidebar-title-badge]"; +const TOOLTIP_SELECTOR = ".hermes-tooltip"; +const DRAFT_VISIBILITY_DROPDOWN_SELECTOR = + "[data-test-draft-visibility-dropdown]"; +const DRAFT_VISIBILITY_TOGGLE_SELECTOR = "[data-test-draft-visibility-toggle]"; +const COPY_URL_BUTTON_SELECTOR = "[data-test-sidebar-copy-url-button]"; +const DRAFT_VISIBILITY_OPTION_SELECTOR = "[data-test-draft-visibility-option]"; +const SECOND_DRAFT_VISIBILITY_LIST_ITEM_SELECTOR = `${DRAFT_VISIBILITY_DROPDOWN_SELECTOR} li:nth-child(2)`; interface AuthenticatedDocumentRouteTestContext extends MirageTestContext {} @@ -44,10 +65,6 @@ module("Acceptance | authenticated/document", function (hooks) { const initialProduct = this.server.schema.products.find(2).attrs; const initialProductName = initialProduct.name; - const initialProductAbbreviation = initialProduct.abbreviation + "-001"; - - const targetProductAbbreviation = - this.server.schema.products.find(1).attrs.abbreviation; this.server.create("document", { objectID: docID, @@ -57,16 +74,11 @@ module("Acceptance | authenticated/document", function (hooks) { await visit(`/document/${docID}?draft=true`); - const docNumberSelector = "[data-test-sidebar-doc-number]"; const productSelectSelector = "[data-test-product-select]"; const productSelectTriggerSelector = "[data-test-badge-dropdown-trigger]"; const productSelectDropdownItemSelector = "[data-test-product-select-badge-dropdown-item]"; - assert - .dom(docNumberSelector) - .hasText(initialProductAbbreviation, "The document number is correct"); - assert .dom(productSelectSelector) .exists("drafts show a product select element") @@ -92,15 +104,11 @@ module("Acceptance | authenticated/document", function (hooks) { await click(productSelectDropdownItemSelector); assert - .dom(docNumberSelector) + .dom(productSelectSelector) .hasText( - targetProductAbbreviation + "-001", - "The document is patched with the correct docNumber" + "Test Product 0", + "The document product is updated to the selected product" ); - - this.server.schema.document - .findBy({ objectID: docID }) - .update("isDraft", false); }); test("a published doc's productArea can't be changed ", async function (this: AuthenticatedDocumentRouteTestContext, assert) { @@ -141,4 +149,142 @@ module("Acceptance | authenticated/document", function (hooks) { assert.dom(FLASH_MESSAGE_SELECTOR).containsText("Unable to save resource"); }); + + test("a draft can toggle its `isShareable` property", async function (this: AuthenticatedDocumentRouteTestContext, assert) { + this.server.create("document", { + objectID: 1, + title: "Test Document", + product: "Test Product 0", + appCreated: true, + status: "WIP", + isDraft: true, + }); + + await visit("/document/1?draft=true"); + + assert.dom(COPY_URL_BUTTON_SELECTOR).doesNotExist("not yet shareable"); + assert.dom(SIDEBAR_TITLE_BADGE_SELECTOR).containsText("Draft"); + assert.dom(DRAFT_VISIBILITY_TOGGLE_SELECTOR).exists(); + assert + .dom(DRAFT_VISIBILITY_TOGGLE_SELECTOR) + .hasAttribute("data-test-icon", DraftVisibilityIcon.Restricted); + assert + .dom(DRAFT_VISIBILITY_TOGGLE_SELECTOR) + .hasAttribute("data-test-chevron-direction", "down"); + + assert.dom(TOOLTIP_SELECTOR).doesNotExist(); + + await triggerEvent(DRAFT_VISIBILITY_TOGGLE_SELECTOR, "mouseenter"); + + assert + .dom(TOOLTIP_SELECTOR) + .hasText(capitalize(DraftVisibility.Restricted)); + + await click(DRAFT_VISIBILITY_TOGGLE_SELECTOR); + + assert + .dom(DRAFT_VISIBILITY_TOGGLE_SELECTOR) + .hasAttribute("data-test-chevron-direction", "up"); + assert.dom(DRAFT_VISIBILITY_DROPDOWN_SELECTOR).exists("dropdown is open"); + + assert.dom(DRAFT_VISIBILITY_OPTION_SELECTOR).exists({ count: 2 }); + + assert + .dom(DRAFT_VISIBILITY_OPTION_SELECTOR + " h4") + .containsText(capitalize(DraftVisibility.Restricted)); + + assert + .dom(DRAFT_VISIBILITY_OPTION_SELECTOR + " p") + .containsText(DraftVisibilityDescription.Restricted); + + assert + .dom(DRAFT_VISIBILITY_OPTION_SELECTOR) + .hasAttribute("data-test-is-checked") + .hasAttribute("data-test-value", DraftVisibility.Restricted); + + // assert that the second option has the correct text + + assert + .dom(`${SECOND_DRAFT_VISIBILITY_LIST_ITEM_SELECTOR} h4`) + .containsText(capitalize(DraftVisibility.Shareable)); + + assert + .dom(`${SECOND_DRAFT_VISIBILITY_LIST_ITEM_SELECTOR} p`) + .containsText(DraftVisibilityDescription.Shareable); + + assert + .dom( + `${SECOND_DRAFT_VISIBILITY_LIST_ITEM_SELECTOR} ${DRAFT_VISIBILITY_OPTION_SELECTOR}` + ) + .doesNotHaveAttribute("data-test-is-checked") + .hasAttribute("data-test-value", DraftVisibility.Shareable); + + const clickPromise = click( + `${DRAFT_VISIBILITY_DROPDOWN_SELECTOR} li:nth-child(2) ${DRAFT_VISIBILITY_OPTION_SELECTOR}` + ); + + await waitFor(`${COPY_URL_BUTTON_SELECTOR}[data-test-icon="running"]`); + + assert + .dom(`${COPY_URL_BUTTON_SELECTOR}[data-test-icon="running"]`) + .exists('a "running" state is shown'); + assert.dom(TOOLTIP_SELECTOR).hasText("Creating link..."); + + await waitFor(`${COPY_URL_BUTTON_SELECTOR}[data-test-icon="smile"]`); + + assert + .dom(`${COPY_URL_BUTTON_SELECTOR}[data-test-icon="smile"]`) + .exists('a "smile" state is shown'); + assert.dom(TOOLTIP_SELECTOR).hasText("Link created!"); + + await clickPromise; + + await waitFor(`${COPY_URL_BUTTON_SELECTOR}[data-test-icon="link"]`); + + assert + .dom(DRAFT_VISIBILITY_DROPDOWN_SELECTOR) + .doesNotExist("dropdown is closed"); + + assert + .dom(DRAFT_VISIBILITY_TOGGLE_SELECTOR) + .hasAttribute("data-test-icon", DraftVisibilityIcon.Shareable); + + assert.dom(TOOLTIP_SELECTOR).doesNotExist("the tooltip is force-closed"); + + await triggerEvent(DRAFT_VISIBILITY_TOGGLE_SELECTOR, "mouseenter"); + + assert.dom(TOOLTIP_SELECTOR).hasText(capitalize(DraftVisibility.Shareable)); + + assert + .dom(COPY_URL_BUTTON_SELECTOR) + .exists("now shareable") + .hasAttribute( + "data-test-url", + window.location.href, + "the URL to be copied is correct" + ); + + await click(DRAFT_VISIBILITY_TOGGLE_SELECTOR); + + assert + .dom(DRAFT_VISIBILITY_OPTION_SELECTOR) + .doesNotHaveAttribute("data-test-is-checked"); + + assert + .dom( + `${SECOND_DRAFT_VISIBILITY_LIST_ITEM_SELECTOR} ${DRAFT_VISIBILITY_OPTION_SELECTOR}` + ) + .hasAttribute("data-test-is-checked"); + + // Turn it back to restricted + await click(DRAFT_VISIBILITY_OPTION_SELECTOR); + + assert + .dom(DRAFT_VISIBILITY_TOGGLE_SELECTOR) + .hasAttribute("data-test-icon", DraftVisibilityIcon.Restricted); + + assert + .dom(COPY_URL_BUTTON_SELECTOR) + .doesNotExist("copyURLButton is removed"); + }); }); From 8e23b77c670f3d566bc26c7115154cbe1dc0d5af Mon Sep 17 00:00:00 2001 From: Jeff Daley Date: Wed, 19 Jul 2023 15:47:12 -0400 Subject: [PATCH 42/42] Fix failing tests --- web/tests/integration/components/copy-u-r-l-button-test.ts | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/web/tests/integration/components/copy-u-r-l-button-test.ts b/web/tests/integration/components/copy-u-r-l-button-test.ts index f7eaabd8f..eac4b29b9 100644 --- a/web/tests/integration/components/copy-u-r-l-button-test.ts +++ b/web/tests/integration/components/copy-u-r-l-button-test.ts @@ -18,14 +18,12 @@ interface CopyURLButtonComponentTextContext extends TestContext { module("Integration | Component | copy-u-r-l-button", function (hooks) { setupRenderingTest(hooks); - hooks.beforeEach(function () { + test("it renders as expected", async function (assert) { sinon.stub(navigator.clipboard, "writeText").resolves(); sinon .stub(navigator.clipboard, "readText") .resolves("https://hashicorp.com"); - }); - test("it renders as expected", async function (assert) { this.set("tooltipPlacement", undefined); // Render with padding so the tooltip has room on all sides: @@ -117,6 +115,6 @@ module("Integration | Component | copy-u-r-l-button", function (hooks) {
`); - assert.dom(".hermes-icon").hasClass("loading"); + assert.dom(".flight-icon").hasAttribute("data-test-icon", "loading"); }); });