💄 Manages the overlay and edition buttons state

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 {

src/app/components/configuration/configuration.component.html

@@ -6,7 +6,7 @@
     <h1>Configuration</h1>
     <h2>Let's configure which Jira tickets to print and the space they'll take on a post-it.</h2>
   </div>
-  <button (click)="onSkip()" [disabled]="!preExistingData">Skip</button>
+  <button (click)="onSkip()" [disabled]="!preExistingData" class="regular-button">Skip</button>
 </div>
 <div>
   <div>
@@ -34,7 +34,7 @@ <h2>Let's configure which Jira tickets to print and the space they'll take on a
             <span class="bar"></span>
             <label>Project key</label>
           </div>
-          <button [disabled]="!projectKey" (click)="getIssueTypes()" id="fetch">{{ submittedProjectKey ? "Synchronize with Jira" : "Fetch" }}</button>
+          <button [disabled]="!projectKey" (click)="getIssueTypes()" id="fetch" class="regular-button">{{ submittedProjectKey ? "Synchronize with Jira" : "Fetch" }}</button>
         </div>
       </div>
       <div *ngIf="submittedProjectKey" class= "form-section size-limited scrollbar">
@@ -104,7 +104,7 @@ <h2>Let's configure which Jira tickets to print and the space they'll take on a
       </div>
       </div>
       <div *ngIf="submittedProjectKey" class="centered">
-          <button [disabled]='!submittedProjectKey || form.invalid ' (click)="onSubmit()">Save</button>
+          <button [disabled]='!submittedProjectKey || form.invalid' (click)="onSubmit()" class="regular-button">Save</button>
       </div>
     </form>
   </div>

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;
+    }
 }

src/app/components/formatted-tickets/formatted-tickets.component.html

@@ -3,7 +3,7 @@
 </div>
 <h1>{{sprintName}}</h1>
 <div class="flexcontainer">
-  <div class="full-ticket" *ngFor="let issue of fullPostitIssues">
+  <div class="full-ticket" *ngFor="let issue of fullPostitIssues; index as i">
     <div>
       <div class="story-header">
         <p class="tickeykey">{{issue.key | ticketkey}}</p>
@@ -32,13 +32,16 @@ <h1>{{sprintName}}</h1>
           <img src="../../assets/end.svg" alt="end date">
         </div>
       </div>
-      <div class="overlay">
+      <div *ngIf="!fullTicketInEdition && fullTicketInEdition !== 0" class="overlay" (click)="enterFullTicketEditionMode(i)">
         <div class="overlay-background"></div>
         <img src="../../assets/pencil-black.svg">
       </div>
+      <div *ngIf="fullTicketInEdition !== null && fullTicketInEdition !== i" class="overlay">
+        <div class="overlay-background permanent-opacity"></div>
+      </div>
     </div>
-    <button class="btn">.</button>
-    <button class="btn btn2">.</button>
+    <button *ngIf="fullTicketInEdition === i" class="card-round-button">&#10003;</button>
+    <button *ngIf="fullTicketInEdition === i" (click)="exitFullTicketEditionMode()" class="card-round-button card-cancel-button">&#10008;</button>
   </div>
   <ng-container *ngFor="let issues of smallPostitIssues">
     <div class="divided-ticket" *ngFor="let chunk of issues | chunks: 3; let i = index; let last = last">

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<void>()
 
   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()

src/app/components/get-started/get-started.component.html

@@ -40,7 +40,7 @@ <h2>Sign in</h2>
         alt="where to find the board id in the url"
       />
       <div *ngIf="!authenticated()" class="centered-container">
-        <button routerLink="/login">Sign in</button>
+        <button routerLink="/login" class="regular-button">Sign in</button>
       </div>
     </div>
     <h2>Printing configuration</h2>

src/app/components/kanban-issues/kanban-issues.component.html

@@ -19,5 +19,5 @@ <h2>{{boardName}}</h2>
     </div>
   </div>
   <p *ngIf="form.errors?.noIssue && form.dirty">{{form.errors?.noIssue.message}}</p>
-  <button type="submit" [disabled]="form.invalid">Format tickets</button>
+  <button type="submit" [disabled]="form.invalid" class="regular-button">Format tickets</button>
 </form>

src/app/components/login/login.component.html

@@ -51,7 +51,7 @@ <h1>Let's retrieve your Jira board</h1>
       </div>
     </div>
   <div class="centered">
-    <button>SIGN IN</button>
+    <button class="regular-button">SIGN IN</button>
   </div>
 </form>
 </div>

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;
 }