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 ffc556e..ea9ca33 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; @@ -218,7 +216,7 @@ p { background-position: 260% -25%; } -.issue-container > .tickeykey { +.issue-container .tickeykey { border-bottom: 1px solid black; height: 14%; width: 17mm; @@ -229,20 +227,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 +248,7 @@ p { border-top: 1px solid black; } -.issue-container > div > p { +.issue-container div > p { margin: 0px; } @@ -290,16 +288,16 @@ 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; } .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,11 +305,116 @@ p { bottom: 0; left: 10px; right: 10px; - border-radius: 100px / 10px; + border-radius: 100px / 10px; */ } .full-ticket:after, .divided-ticket:after { right: 10px; 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 { + animation: 0.3s fadein both + } + + .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; + } + +/*================================================== +* Edition styling +* ===============================================*/ + .card-round-button { + display: inline-block; + position: absolute; + text-decoration: none; + bottom: -20px; + right: 80px; + background: #336699; + 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-width: 0; + border-bottom: solid 3px #193d61; + transition: .4s; + margin: 0; + padding: 0; + } + + .card-cancel-button { + right:130px; + background: #888888; + border-bottom: solid 3px #333333; + } + + .card-round-button: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; + } + + .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 fecde92..fa3997e 100755 --- a/src/app/components/formatted-tickets/formatted-tickets.component.html +++ b/src/app/components/formatted-tickets/formatted-tickets.component.html @@ -3,21 +3,43 @@

{{sprintName}}

-
+
+ + +
+ +
+
+

{{issue.key | ticketkey}}

+

{{component}}

+

{{issue.summary}}

+

{{issue.complexity}}

+
+

.../...

+

... J

+

.../...

+
+
+
+
+
+ + +
-

{{issue.key | ticketkey}}

-

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

+

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

+

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

assignee photo area -

{{issue.complexity}}

+

{{fullPostitIssues[i].complexity}}

+
+
+ +
+
+
+
- -
-
-

{{issue.key | ticketkey}}

-

{{component}}

-

{{issue.summary}}

-

{{issue.complexity}}

-
-

.../...

-

... J

-

.../...

+ + + +
+
+

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

+ +
+
+ +
+ 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 2174b9c..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', @@ -20,21 +22,29 @@ export class FormattedTicketsComponent implements OnInit, OnDestroy { isTimeTracked = false 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() { + ngOnInit(): void { this.prepareIssueDatasources() } - prepareIssueDatasources() { + prepareIssueDatasources(): void { this.printingConfigurationService.getToPrintIssues() .pipe(takeUntil(this.unsubscribe)) .subscribe(issues => { @@ -64,6 +74,7 @@ export class FormattedTicketsComponent implements OnInit, OnDestroy { return 1 } }) + return sortedIssues } @@ -76,6 +87,7 @@ export class FormattedTicketsComponent implements OnInit, OnDestroy { }) const issuesWithoutComponent = issues.filter(issue => issue.components.length === 0) groupedIssuesByComponent.push(issuesWithoutComponent) + return groupedIssuesByComponent } @@ -85,6 +97,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 +111,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 +127,38 @@ export class FormattedTicketsComponent implements OnInit, OnDestroy { }) } - ngOnDestroy() { + //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 { 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/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 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 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; }