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
+
.../...
+
+
+
+
+
+
+
+
-
{{component}}
+
{{component}}
-
{{issue.summary}}
+
{{fullPostitIssues[i].summary}}
-
{{issue.complexity}}
+
{{fullPostitIssues[i].complexity}}
+
+
+
+
+
-
-
-
-
{{issue.key | ticketkey}}
-
{{component}}
-
{{issue.summary}}
-
{{issue.complexity}}
-
-
.../...
-
... J
-
.../...
+
+
+
+
+
+
+
+
\ 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;
}