Skip to content

Commit

Permalink
Merge branch 'main' into jeffdaley/animated-project-resources
Browse files Browse the repository at this point in the history
  • Loading branch information
@jeffdaley
jeffdaley committed Jan 17, 2024
2 parents b41019e + 87d4cf0 commit 48fa783
Show file tree
Hide file tree
Showing 13 changed files with 280 additions and 58 deletions.
57 changes: 41 additions & 16 deletions web/app/components/new/document-template-list.hbs
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,46 @@
<div class="flex items-center gap-3.5">
<h1>Choose a template</h1>
{{#if this.flags.projects}}
<div class="hermes-h4 mt-[5px] mr-0.5">
or
<div class="flex items-center justify-between">

<div class="flex items-center gap-3.5">
<h1>Choose a template</h1>
{{#if this.flags.projects}}
<div class="hermes-h4 mt-[5px] mr-0.5">
or
</div>
<div class="relative mt-1">
<Hds::Button
data-test-start-a-project-button
@text="Start a project"
@icon="chevron-right"
@iconPosition="trailing"
@route="authenticated.new.project"
@color="secondary"
class="-ml-px pl-[18px]"
/>
<Hds::Badge
@text="New"
@color="highlight"
@type="outlined"
@size="small"
class="border-color-foreground-highlight-on-surface pointer-events-none absolute top-0 right-0 translate-x-[55%] -translate-y-1/2 border !bg-color-page-primary mix-blend-normal"
/>
</div>
{{/if}}
</div>
<div
class="mt-1 flex cursor-default items-center gap-2 text-color-foreground-faint"
{{tooltip
"A project is a public collection of documents and links organized around an effort."
class="w-[260px]"
placement="bottom-end"
offset=(hash mainAxis=8 crossAxis=10)
}}
>
<div class="underline decoration-dotted underline-offset-[5px]">
Whatʼs a project
</div>
<Hds::Button
data-test-start-a-project-button
@text="Start a project"
@icon="chevron-right"
@iconPosition="trailing"
@route="authenticated.new.project"
@color="secondary"
class="mt-[4px]"
/>
{{/if}}
<FlightIcon @name="help" class="-ml-px" />
</div>
</div>

<ol class="mt-8 grid auto-rows-min grid-cols-2 gap-2">
{{#each this.docTypes as |docType|}}
<li
Expand Down
143 changes: 143 additions & 0 deletions web/app/components/project/index.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,149 @@
</div>
</div>

<AnimatedContainer @motion={{this.motion}}>
<div class="pb-6">
<div class="relative z-20 max-w-3xl pb-5">
<AnimatedContainer @motion={{this.motion}}>

{{! Title }}
<div class="mt-7 flex">
<EditableField
class="project-title text-display-600"
data-test-project-title
@value={{this.title}}
@tag="h1"
@placeholder="Add project title"
@buttonSize="medium"
@onSave={{this.saveTitle}}
@isReadOnly={{not this.projectIsActive}}
@isRequired={{true}}
@isSaving={{this.titleIsSaving}}
/>
</div>

{{#animated-if
(or this.description this.projectIsActive)
rules=this.descriptionTransitionRules
}}
{{! Description }}
<div class="flex">
<EditableField
class="project-description"
data-test-project-description
@value="{{this.description}}"
@onSave={{this.saveDescription}}
@isReadOnly={{not this.projectIsActive}}
@isSaving={{this.descriptionIsSaving}}
@placeholder="Add a description"
@buttonSize="medium"
/>
</div>
{{/animated-if}}
</AnimatedContainer>

</div>

{{#if this.jiraIsEnabled}}
<AnimatedContainer
@motion={{this.motion}}
{{did-insert this.maybeLoadJiraInfo}}
>
{{! Jira }}
{{#animated-if this.jiraWidgetIsShown rules=this.jiraTransitionRules}}
<div class="mt-5 w-full">
<Project::JiraWidget
@issue={{this.jiraIssue}}
@onIssueRemove={{this.removeJiraIssue}}
@onIssueSelect={{this.addJiraIssue}}
@isLoading={{this.loadJiraIssue.isRunning}}
@isReadOnly={{not this.projectIsActive}}
/>
</div>
{{/animated-if}}
</AnimatedContainer>
{{/if}}

{{! Plus button }}
<RelatedResources
@modalHeaderTitle="Add project resource"
@modalInputPlaceholder="Search docs or paste a URL..."
@addResource={{this.addResource}}
>
<:header as |rr|>
{{#animated-if
this.projectIsActive
rules=this.plusButtonTransitionRules
initialInsertion=true
finalRemoval=true
}}
<Action
data-test-add-project-resource-button
{{on "click" rr.showModal}}
class="hds-button hds-button--color-primary add-project-resource-button pill-button pointer-events-auto absolute right-14 -bottom-10 z-10 grid h-20 w-20 place-items-center"
>
<FlightIcon @name="plus" @size="24" class="relative h-9 w-9" />
</Action>
{{/animated-if}}
</:header>
</RelatedResources>

</div>
</AnimatedContainer>
</div>

<div
class="relative border-t border-t-color-border-primary bg-color-page-primary"
>
{{! Resources }}
<div class="max-w-3xl">
{{#if (or this.hermesDocuments.length this.externalLinks.length)}}
{{#if this.hermesDocuments.length}}

{{! Documents }}
<div class="mt-7 flex h-6 items-center gap-2">
<h3 data-test-documents-header class="hermes-h4">
Documents
</h3>
<Hds::BadgeCount
data-test-document-count
@text="{{this.hermesDocuments.length}}"
/>
</div>
<ol data-test-document-list class="divided-list mt-3">
{{#each this.hermesDocuments as |document|}}
<li class="group relative" data-test-document-list-item>
<Project::Resource
@isReadOnly={{not this.projectIsActive}}
@overflowMenuItems={{hash
delete=(hash
label="Remove"
icon="trash"
action=(fn this.deleteResource document)
)
}}
>
<:default>
<div class="flex items-center gap-2 pl-1.5">
<Project::StatusIcon @status={{dd.value}} />
<span>
{{dd.attrs.label}}
</span>
</div>
</:default>
</X::DropdownList::CheckableItem>
</dd.Action>
</:item>
</X::DropdownList>
<CopyURLButton
@isIconOnly={{true}}
@url={{this.url}}
class="hds-button hds-button--color-secondary pill-button h-9 w-9 justify-center border-color-border-strong p-0"
/>
</div>
</div>
</div>

<AnimatedContainer @motion={{this.containerMotion}}>
<div class="pb-6">
<div class="relative z-20 max-w-3xl pb-5">
Expand Down
24 changes: 14 additions & 10 deletions web/app/components/project/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -142,6 +142,14 @@ export default class ProjectIndexComponent extends Component<ProjectIndexCompone
return this.status === ProjectStatus.Active;
}

/**
* A single array of all resources. Used by the "Add..." modal
* to prevent duplicate resources from being added.
*/
protected get relatedResources() {
return [...this.hermesDocuments, ...this.externalLinks];
}

/**
* Whether the JiraWidget should be shown.
* True if the project is active, or if the project has a Jira issue
Expand Down Expand Up @@ -176,14 +184,6 @@ export default class ProjectIndexComponent extends Component<ProjectIndexCompone
}
}

/**
* A single array of all resources. Used by the "Add..." modal
* to prevent duplicate resources from being added.
*/
protected get relatedResources() {
return [...this.hermesDocuments, ...this.externalLinks];
}

/**
* The related resources object, minimally formatted for a PUT request to the API.
*/
Expand Down Expand Up @@ -518,7 +518,9 @@ export default class ProjectIndexComponent extends Component<ProjectIndexCompone
from: -10,
},
translate: {
y: { from: 25 },
y: {
from: 25,
},
},
duration: animationDuration * 0.85,
easing: easeOutExpo,
Expand All @@ -538,7 +540,9 @@ export default class ProjectIndexComponent extends Component<ProjectIndexCompone
to: -70,
},
translate: {
y: { to: 15 },
y: {
to: 15,
},
},
duration,
easing,
Expand Down
23 changes: 14 additions & 9 deletions web/app/components/x/dropdown-list/checkable-item.hbs
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<div
data-test-checkable-item
class="checkable-item checkmark-position--{{or @checkmarkPosition 'leading'}}
flex w-full items-center gap-2.5"
w-full items-center gap-2.5"
...attributes
>

Expand All @@ -12,22 +12,27 @@
class="check {{if @isSelected 'visible' 'invisible'}}"
/>

<div data-test-checkable-item-content class="checkable-item-content w-full">
<div
data-test-checkable-item-content
class="checkable-item-content w-full overflow-hidden"
>
{{#if (has-block "default")}}
{{yield}}
{{else}}
<div class="x-dropdown-list-item-value">
<div data-test-x-dropdown-list-item-value class="truncate">
{{@value}}
</div>
{{/if}}
</div>

{{#if @count}}
<Hds::BadgeCount
data-test-x-dropdown-list-checkable-item-count
@text="{{@count}}"
@size="small"
class="x-dropdown-list-item-count checkable-item-count"
/>
<div class="grid">
<Hds::BadgeCount
data-test-x-dropdown-list-checkable-item-count
@text="{{@count}}"
@size="small"
class="checkable-item-count ml-auto"
/>
</div>
{{/if}}
</div>
6 changes: 4 additions & 2 deletions web/app/components/x/dropdown-list/index.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,9 @@
@offset={{@offset}}
@disableClose={{@disableClose}}
@matchAnchorWidth={{@matchAnchorWidth}}
class="{{unless (eq @placement null) 'hermes-popover'}} x-dropdown-list"
class="x-dropdown-list
{{unless (eq @placement null) 'hermes-popover'}}
{{if this.inputIsShown 'has-input'}}"
data-test-x-dropdown-list-content
{{will-destroy this.onDestroy}}
...attributes
Expand Down Expand Up @@ -96,7 +98,7 @@
{{will-destroy this.resetFilteredItems}}
{{dismissible dismiss=f.hideContent related=f.anchor}}
id="x-dropdown-list-container-{{f.contentID}}"
class="x-dropdown-list-container {{if this.inputIsShown 'has-input'}}"
class="x-dropdown-list-container"
role={{if this.inputIsShown "combobox"}}
>
{{#if @isLoading}}
Expand Down
Loading

0 comments on commit 48fa783

Please sign in to comment.