From 8481c36b727e4562ee67d7c35ff55a13d9f0014a Mon Sep 17 00:00:00 2001 From: Marion Curtil Date: Mon, 24 Feb 2020 10:35:45 +0100 Subject: [PATCH 1/4] :construction: Introduce an overlay on cards --- .../formatted-tickets.component.css | 64 +++++++++++++++++-- .../formatted-tickets.component.html | 50 ++++++++------- .../formatted-tickets.component.ts | 10 ++- src/assets/pencil-black.svg | 1 + 4 files changed, 93 insertions(+), 32 deletions(-) create mode 100644 src/assets/pencil-black.svg diff --git a/src/app/components/formatted-tickets/formatted-tickets.component.css b/src/app/components/formatted-tickets/formatted-tickets.component.css index ffc556e..1d2b168 100755 --- a/src/app/components/formatted-tickets/formatted-tickets.component.css +++ b/src/app/components/formatted-tickets/formatted-tickets.component.css @@ -218,7 +218,7 @@ p { background-position: 260% -25%; } -.issue-container > .tickeykey { +.issue-container .tickeykey { border-bottom: 1px solid black; height: 14%; width: 17mm; @@ -229,20 +229,20 @@ p { align-self: flex-start; } -.issue-container > .summary { +.issue-container .summary { font-size: 1em; overflow: hidden; margin: 1mm; flex: 1; } -.issue-container > .badge { +.issue-container .badge { align-self: flex-start; font-size: 0.6em; margin: 4px 0px 0px 0px; } -.issue-container > div { +.issue-container div { display: flex; justify-content: space-between; margin: 0px 0px -2mm 0px; @@ -250,7 +250,7 @@ p { border-top: 1px solid black; } -.issue-container > div > p { +.issue-container div > p { margin: 0px; } @@ -290,10 +290,10 @@ p { } } +@media screen { /*================================================== * Shadow effect * ===============================================*/ -@media screen { .full-ticket, .divided-ticket { position: relative; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; @@ -314,4 +314,54 @@ p { left: auto; transform: skew(8deg) rotate(3deg); } -} + +/*================================================== +* Hover effect +* ===============================================*/ + .overlay { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + height: 100%; + width: 100%; + border-radius: 3px; + } + + .overlay-background { + opacity: 0; + transition: .3s ease; + background-color: black; + height: 100%; + width: 100%; + border-radius: 3px; + } + + .full-ticket:hover { + cursor: pointer; + } + + .full-ticket:hover .overlay div { + opacity: 0.35; + + } + + .full-ticket:hover .overlay img { + opacity: 1; + transition: .3s ease; + } + + .overlay img { + opacity: 0; + filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(319deg) brightness(105%) contrast(110%); + width: 160px; + height: 160px; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + -ms-transform: translate(-50%, -50%); + text-align: center; + } +} \ No newline at end of file diff --git a/src/app/components/formatted-tickets/formatted-tickets.component.html b/src/app/components/formatted-tickets/formatted-tickets.component.html index fecde92..99f4b44 100755 --- a/src/app/components/formatted-tickets/formatted-tickets.component.html +++ b/src/app/components/formatted-tickets/formatted-tickets.component.html @@ -4,31 +4,37 @@

{{sprintName}}

-
-

{{issue.key | ticketkey}}

-

{{ issue.epic?(issue.epic.name | uppercase):"."}}

-
-
-
-
-

{{component}}

-
-

{{issue.summary}}

+
+
+

{{issue.key | ticketkey}}

+

{{ issue.epic?(issue.epic.name | uppercase):"."}}

-
- assignee photo area -

{{issue.complexity}}

+
+
+
+

{{component}}

+
+

{{issue.summary}}

+
+
+ assignee photo area +

{{issue.complexity}}

+
-
-
-
- start date -

... / ...

+
+
+ start date +

... / ...

+
+

... J

+
+

... / ...

+ end date +
-

... J

-
-

... / ...

- end date +
+
+
diff --git a/src/app/components/formatted-tickets/formatted-tickets.component.ts b/src/app/components/formatted-tickets/formatted-tickets.component.ts index 2174b9c..efe5ff1 100755 --- a/src/app/components/formatted-tickets/formatted-tickets.component.ts +++ b/src/app/components/formatted-tickets/formatted-tickets.component.ts @@ -30,11 +30,11 @@ export class FormattedTicketsComponent implements OnInit, OnDestroy { this.sprintName = this.issuesService.sprint ? this.issuesService.sprint.name : '' } - ngOnInit() { + ngOnInit(): void { this.prepareIssueDatasources() } - prepareIssueDatasources() { + prepareIssueDatasources(): void { this.printingConfigurationService.getToPrintIssues() .pipe(takeUntil(this.unsubscribe)) .subscribe(issues => { @@ -64,6 +64,7 @@ export class FormattedTicketsComponent implements OnInit, OnDestroy { return 1 } }) + return sortedIssues } @@ -76,6 +77,7 @@ export class FormattedTicketsComponent implements OnInit, OnDestroy { }) const issuesWithoutComponent = issues.filter(issue => issue.components.length === 0) groupedIssuesByComponent.push(issuesWithoutComponent) + return groupedIssuesByComponent } @@ -85,6 +87,7 @@ export class FormattedTicketsComponent implements OnInit, OnDestroy { issues.forEach(element => { components.push(...element.components) }) + return components .filter((value, index, array) => index === array.indexOf(value)) .sort((left, right) => { @@ -98,6 +101,7 @@ export class FormattedTicketsComponent implements OnInit, OnDestroy { issues.forEach(element => { types.push(element.type) }) + return types .filter((value, index, array) => index === array.indexOf(value)) .sort((left, right) => { @@ -113,7 +117,7 @@ export class FormattedTicketsComponent implements OnInit, OnDestroy { }) } - ngOnDestroy() { + ngOnDestroy(): void { this.unsubscribe.next() this.unsubscribe.complete() } diff --git a/src/assets/pencil-black.svg b/src/assets/pencil-black.svg new file mode 100644 index 0000000..94b6bdd --- /dev/null +++ b/src/assets/pencil-black.svg @@ -0,0 +1 @@ + \ No newline at end of file From 7b25f0139592a18b6870a4a2ca995d6353cd956d Mon Sep 17 00:00:00 2001 From: Marion Curtil Date: Fri, 28 Feb 2020 16:28:03 +0100 Subject: [PATCH 2/4] :lipstick: Introduce the edition buttons --- .../formatted-tickets.component.css | 46 +++++++++++++++++-- .../formatted-tickets.component.html | 2 + 2 files changed, 44 insertions(+), 4 deletions(-) diff --git a/src/app/components/formatted-tickets/formatted-tickets.component.css b/src/app/components/formatted-tickets/formatted-tickets.component.css index 1d2b168..6416d92 100755 --- a/src/app/components/formatted-tickets/formatted-tickets.component.css +++ b/src/app/components/formatted-tickets/formatted-tickets.component.css @@ -33,7 +33,6 @@ html, body { padding: 3mm; width: 120mm; height: 70mm; - overflow: hidden; display: flex; flex-flow: column nowrap; justify-content: flex-start; @@ -47,7 +46,6 @@ html, body { padding: 0mm; width: 126mm; height: 76mm; - overflow: hidden; display: flex; flex-flow: row nowrap; justify-content: flex-start; @@ -299,7 +297,7 @@ p { box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; } .full-ticket:before, .full-ticket:after, .divided-ticket:before, .divided-ticket:after { - content: ""; +/* content: ""; position: absolute; z-index: -1; box-shadow: 0 0 20px rgba(0, 0, 0, 0.8); @@ -307,7 +305,7 @@ p { bottom: 0; left: 10px; right: 10px; - border-radius: 100px / 10px; + border-radius: 100px / 10px; */ } .full-ticket:after, .divided-ticket:after { right: 10px; @@ -364,4 +362,44 @@ p { -ms-transform: translate(-50%, -50%); text-align: center; } + +/*================================================== +* Edition styling +* ===============================================*/ + .btn { + display: inline-block; + position: absolute; + text-decoration: none; + bottom: -20px; + right: 60px; + background: #ff8181; + color: #FFF; + width: 40px; + height: 40px; + line-height: 20px; + border-radius: 50%; + text-align: center; + font-weight: bold; + vertical-align: middle; + overflow: hidden; + box-shadow: 0 2px 2px rgba(0, 0, 0, 0.29); + border-bottom: solid 3px #bd6565; + transition: .4s; + margin: 0; + padding: 0; + } + + .btn2 { + right:100px; + } + + .btn:active { + top: none; + position: absolute; + -ms-transform: translateY(2px); + -webkit-transform: translateY(2px); + transform: translateY(2px); + box-shadow: 0 0 1px rgba(0, 0, 0, 0.15); + border-bottom: none; + } } \ No newline at end of file diff --git a/src/app/components/formatted-tickets/formatted-tickets.component.html b/src/app/components/formatted-tickets/formatted-tickets.component.html index 99f4b44..8955fe4 100755 --- a/src/app/components/formatted-tickets/formatted-tickets.component.html +++ b/src/app/components/formatted-tickets/formatted-tickets.component.html @@ -37,6 +37,8 @@

{{sprintName}}

+ +
From 0666795786ba248c96a3b72f862c2e2bb89ad0ff Mon Sep 17 00:00:00 2001 From: Marion Curtil Date: Fri, 6 Mar 2020 14:32:35 +0100 Subject: [PATCH 3/4] :lipstick: Manages the overlay and edition buttons state --- .../configuration/configuration.component.css | 14 ++++---- .../configuration.component.html | 6 ++-- .../formatted-tickets.component.css | 33 ++++++++++++++----- .../formatted-tickets.component.html | 11 ++++--- .../formatted-tickets.component.ts | 10 ++++++ .../get-started/get-started.component.html | 2 +- .../kanban-issues.component.html | 2 +- src/app/components/login/login.component.html | 2 +- src/styles.css | 11 ++++--- 9 files changed, 61 insertions(+), 30 deletions(-) diff --git a/src/app/components/configuration/configuration.component.css b/src/app/components/configuration/configuration.component.css index 775084d..6748f64 100755 --- a/src/app/components/configuration/configuration.component.css +++ b/src/app/components/configuration/configuration.component.css @@ -12,7 +12,7 @@ h2 { flex-direction: row; justify-content: flex-start; align-items: stretch; - padding: 10px 0px 40px; + padding: 10px 0 40px; } .form-section-title { @@ -25,7 +25,7 @@ h2 { } .form-section { - padding: 0px 20px 20px 10px; + padding: 0 20px 20px 10px; background: #eee; margin: 5px 0 5px 20px; border-radius: 5px; @@ -40,7 +40,7 @@ h2 { } .centered-form-section { - padding: 0px 20px 20px 10px; + padding: 0 20px 20px 10px; background: #eee; margin: 5px 0 5px 20px; border-radius: 5px; @@ -97,7 +97,7 @@ h2 { .center-self { display: flex; align-items: center; - margin: 30px 0px 10px; + margin: 30px 0 10px; justify-content: flex-start; } @@ -118,8 +118,8 @@ h2 { color: #369; text-align: center; border-radius: 50%; - margin: 0px 20px 0px 5px; - box-shadow: 2px 2px 4px 0px #ccc; + margin: 0 20px 0 5px; + box-shadow: 2px 2px 4px 0 #ccc; } .number-circle + div { @@ -211,7 +211,7 @@ h2 { /* overrding button margins */ button { - margin: 0px 20px 10px 20px; + margin: 0 20px 10px 20px; } form p { diff --git a/src/app/components/configuration/configuration.component.html b/src/app/components/configuration/configuration.component.html index 0e3d658..b2105a3 100755 --- a/src/app/components/configuration/configuration.component.html +++ b/src/app/components/configuration/configuration.component.html @@ -6,7 +6,7 @@

Configuration

Let's configure which Jira tickets to print and the space they'll take on a post-it.

- +
@@ -34,7 +34,7 @@

Let's configure which Jira tickets to print and the space they'll take on a

- +
@@ -104,7 +104,7 @@

Let's configure which Jira tickets to print and the space they'll take on a

- +
diff --git a/src/app/components/formatted-tickets/formatted-tickets.component.css b/src/app/components/formatted-tickets/formatted-tickets.component.css index 6416d92..ea9ca33 100755 --- a/src/app/components/formatted-tickets/formatted-tickets.component.css +++ b/src/app/components/formatted-tickets/formatted-tickets.component.css @@ -341,8 +341,7 @@ p { } .full-ticket:hover .overlay div { - opacity: 0.35; - + animation: 0.3s fadein both } .full-ticket:hover .overlay img { @@ -366,13 +365,13 @@ p { /*================================================== * Edition styling * ===============================================*/ - .btn { + .card-round-button { display: inline-block; position: absolute; text-decoration: none; bottom: -20px; - right: 60px; - background: #ff8181; + right: 80px; + background: #336699; color: #FFF; width: 40px; height: 40px; @@ -383,17 +382,20 @@ p { vertical-align: middle; overflow: hidden; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.29); - border-bottom: solid 3px #bd6565; + border-width: 0; + border-bottom: solid 3px #193d61; transition: .4s; margin: 0; padding: 0; } - .btn2 { - right:100px; + .card-cancel-button { + right:130px; + background: #888888; + border-bottom: solid 3px #333333; } - .btn:active { + .card-round-button:active { top: none; position: absolute; -ms-transform: translateY(2px); @@ -402,4 +404,17 @@ p { box-shadow: 0 0 1px rgba(0, 0, 0, 0.15); border-bottom: none; } + + .card-round-button:hover { + box-shadow: inset 10px 10px 40px 5px rgba(0,0,0,0.2); + } + + @keyframes fadein { + from { opacity: 0; } + to { opacity: 0.35; } + } + + .permanent-opacity { + animation: 0.3s fadein both; + } } \ No newline at end of file diff --git a/src/app/components/formatted-tickets/formatted-tickets.component.html b/src/app/components/formatted-tickets/formatted-tickets.component.html index 8955fe4..1404512 100755 --- a/src/app/components/formatted-tickets/formatted-tickets.component.html +++ b/src/app/components/formatted-tickets/formatted-tickets.component.html @@ -3,7 +3,7 @@

{{sprintName}}

-
+

{{issue.key | ticketkey}}

@@ -32,13 +32,16 @@

{{sprintName}}

end date
-
+
+
+
+
- - + +
diff --git a/src/app/components/formatted-tickets/formatted-tickets.component.ts b/src/app/components/formatted-tickets/formatted-tickets.component.ts index efe5ff1..e97b456 100755 --- a/src/app/components/formatted-tickets/formatted-tickets.component.ts +++ b/src/app/components/formatted-tickets/formatted-tickets.component.ts @@ -20,6 +20,7 @@ export class FormattedTicketsComponent implements OnInit, OnDestroy { isTimeTracked = false isComponentGrouped = false step = Step.PRINTING + fullTicketInEdition: number | null = null private unsubscribe = new Subject() constructor( @@ -117,6 +118,15 @@ export class FormattedTicketsComponent implements OnInit, OnDestroy { }) } + //Edition mode + enterFullTicketEditionMode(index: number) { + this.fullTicketInEdition = index + } + + exitFullTicketEditionMode() { + this.fullTicketInEdition = null + } + ngOnDestroy(): void { this.unsubscribe.next() this.unsubscribe.complete() diff --git a/src/app/components/get-started/get-started.component.html b/src/app/components/get-started/get-started.component.html index 750d10e..1ff9e29 100755 --- a/src/app/components/get-started/get-started.component.html +++ b/src/app/components/get-started/get-started.component.html @@ -40,7 +40,7 @@

Sign in

alt="where to find the board id in the url" />
- +

Printing configuration

diff --git a/src/app/components/kanban-issues/kanban-issues.component.html b/src/app/components/kanban-issues/kanban-issues.component.html index 954d3e0..7d3cd08 100755 --- a/src/app/components/kanban-issues/kanban-issues.component.html +++ b/src/app/components/kanban-issues/kanban-issues.component.html @@ -19,5 +19,5 @@

{{boardName}}

{{form.errors?.noIssue.message}}

- + diff --git a/src/app/components/login/login.component.html b/src/app/components/login/login.component.html index c650728..e000fb5 100755 --- a/src/app/components/login/login.component.html +++ b/src/app/components/login/login.component.html @@ -51,7 +51,7 @@

Let's retrieve your Jira board

- +
diff --git a/src/styles.css b/src/styles.css index bd9dc71..20ffae9 100755 --- a/src/styles.css +++ b/src/styles.css @@ -36,10 +36,13 @@ body, input[text], button { /* BUTTONS ============================== */ button:focus { outline: none !important; +} + +.regular-button:focus { border: 0; } -button { +.regular-button { margin: 30px 65px; background-color:#369; border-radius: 24px; @@ -53,16 +56,16 @@ button { text-decoration:none; } -button:hover { +.regular-button:hover { background-color:#476e9e; } -button:enabled:active { +.regular-button:enabled:active { position:relative; top:1px; } -button:disabled { +.regular-button:disabled { background-color: #555; } From d0f951fdfed11e8a7a5674c929e94d94f66a2ce4 Mon Sep 17 00:00:00 2001 From: Marion Curtil Date: Fri, 6 Mar 2020 19:13:27 +0100 Subject: [PATCH 4/4] :sparkles: Enable edition of fields before printing --- .../formatted-tickets.component.html | 102 +++++++++++------- .../formatted-tickets.component.ts | 33 +++++- src/app/services/scrum-issues/epic.ts | 7 +- src/app/services/scrum-issues/issue.ts | 2 +- 4 files changed, 103 insertions(+), 41 deletions(-) diff --git a/src/app/components/formatted-tickets/formatted-tickets.component.html b/src/app/components/formatted-tickets/formatted-tickets.component.html index 1404512..fa3997e 100755 --- a/src/app/components/formatted-tickets/formatted-tickets.component.html +++ b/src/app/components/formatted-tickets/formatted-tickets.component.html @@ -4,44 +4,8 @@

{{sprintName}}

-
-
-

{{issue.key | ticketkey}}

-

{{ issue.epic?(issue.epic.name | uppercase):"."}}

-
-
-
-
-

{{component}}

-
-

{{issue.summary}}

-
-
- assignee photo area -

{{issue.complexity}}

-
-
-
-
- start date -

... / ...

-
-

... J

-
-

... / ...

- end date -
-
-
-
- -
-
-
-
-
- - + +
@@ -59,3 +23,65 @@

{{sprintName}}
+ + +
+
+

{{fullPostitIssues[i].key | ticketkey}}

+

{{ fullPostitIssues[i].epic?(fullPostitIssues[i].epic?.name | uppercase):"."}}

+
+
+
+
+

{{component}}

+
+

{{fullPostitIssues[i].summary}}

+
+
+ assignee photo area +

{{fullPostitIssues[i].complexity}}

+
+
+
+
+ start date +

... / ...

+
+

... J

+
+

... / ...

+ end date +
+
+
+
+ +
+
+
+
+
+ + + +
+
+

{{fullPostitIssues[fullTicketInEdition].key | ticketkey}}

+ +
+
+
+
+

{{component}}

+
+ +
+
+ assignee photo area + +
+
+ + +
+ \ No newline at end of file diff --git a/src/app/components/formatted-tickets/formatted-tickets.component.ts b/src/app/components/formatted-tickets/formatted-tickets.component.ts index e97b456..8bdde7f 100755 --- a/src/app/components/formatted-tickets/formatted-tickets.component.ts +++ b/src/app/components/formatted-tickets/formatted-tickets.component.ts @@ -6,6 +6,8 @@ import { PrintingConfigurationService } from '../../services/printing-configurat import { Subject } from 'rxjs' import { takeUntil } from 'rxjs/operators' import { Step } from '../progress-bar/step' +import { FormBuilder, FormGroup, FormArray } from '@angular/forms' +import { Epic } from 'src/app/services/scrum-issues/epic' @Component({ selector: 'app-formatted-tickets', @@ -21,14 +23,21 @@ export class FormattedTicketsComponent implements OnInit, OnDestroy { isComponentGrouped = false step = Step.PRINTING fullTicketInEdition: number | null = null + fullTicketForm: FormGroup private unsubscribe = new Subject() constructor( private issuesService: ScrumIssuesService, private printingConfigurationService: PrintingConfigurationService, - private route: ActivatedRoute + private route: ActivatedRoute, + private formBuilder: FormBuilder ) { this.sprintName = this.issuesService.sprint ? this.issuesService.sprint.name : '' + this.fullTicketForm = this.formBuilder.group({ + epic: [''], + summary: [''], + complexity: [''] + }) } ngOnInit(): void { @@ -121,10 +130,32 @@ export class FormattedTicketsComponent implements OnInit, OnDestroy { //Edition mode enterFullTicketEditionMode(index: number) { this.fullTicketInEdition = index + this.fullTicketForm.get('epic')?.patchValue(this.fullPostitIssues[index].epic?.name) + this.fullTicketForm.get('complexity')?.patchValue(this.fullPostitIssues[index].complexity) + this.fullTicketForm.get('summary')?.patchValue(this.fullPostitIssues[index].summary) } exitFullTicketEditionMode() { this.fullTicketInEdition = null + this.fullTicketForm.reset() + } + + onFullTicketSubmit() { + if (this.fullTicketInEdition !== null) { + var modifiedIssue = this.fullPostitIssues[this.fullTicketInEdition] + modifiedIssue.complexity = this.fullTicketForm.get('complexity')?.value + var modifiedEpicName = this.fullTicketForm.get('epic')?.value + var epic: Epic + if (modifiedEpicName != null) { + epic = new Epic('', modifiedEpicName) + } else { + epic = new Epic('', '.') + } + modifiedIssue.epic = epic + modifiedIssue.summary = this.fullTicketForm.get('summary')?.value + this.fullPostitIssues[this.fullTicketInEdition] = modifiedIssue + this.fullTicketInEdition = null + } } ngOnDestroy(): void { diff --git a/src/app/services/scrum-issues/epic.ts b/src/app/services/scrum-issues/epic.ts index 7e3de7f..e235330 100644 --- a/src/app/services/scrum-issues/epic.ts +++ b/src/app/services/scrum-issues/epic.ts @@ -1,4 +1,9 @@ -export interface Epic { +export class Epic { key: string name: string + + public constructor(key: string, name: string) { + this.key = key + this.name = name + } } diff --git a/src/app/services/scrum-issues/issue.ts b/src/app/services/scrum-issues/issue.ts index 008671b..6cfaa76 100755 --- a/src/app/services/scrum-issues/issue.ts +++ b/src/app/services/scrum-issues/issue.ts @@ -4,7 +4,7 @@ export interface Issue { key: string summary: string components: string[] - epic: Epic + epic: Epic | undefined type: string column: string complexity: string