From 7bb078584131e4774052c01c4161d7aef60118e4 Mon Sep 17 00:00:00 2001
From: Peter Golm <golm.peter@gmail.com>
Date: Sat, 1 Jul 2017 11:08:38 +0200
Subject: [PATCH 1/2] Add special rendering for deprecated operations

---
 demo/swagger.yaml                            | 1 +
 lib/components/Operation/operation.html      | 3 +++
 lib/components/Operation/operation.scss      | 4 ++++
 lib/components/Operation/operation.ts        | 2 ++
 lib/components/SideMenu/side-menu-items.html | 2 +-
 lib/components/SideMenu/side-menu-items.scss | 5 +++++
 lib/services/menu.service.ts                 | 3 ++-
 7 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/demo/swagger.yaml b/demo/swagger.yaml
index 63a0bcbb1d..7ffec7508d 100644
--- a/demo/swagger.yaml
+++ b/demo/swagger.yaml
@@ -336,6 +336,7 @@ paths:
       summary: Finds Pets by tags
       description: 'Muliple tags can be provided with comma seperated strings. Use tag1, tag2, tag3 for testing.'
       operationId: findPetsByTags
+      deprecated: true
       produces:
         - application/xml
         - application/json
diff --git a/lib/components/Operation/operation.html b/lib/components/Operation/operation.html
index 4fa9a34522..28a5592d86 100644
--- a/lib/components/Operation/operation.html
+++ b/lib/components/Operation/operation.html
@@ -5,6 +5,9 @@ <h2 class="operation-header sharable-header">
     </h2>
     <endpoint-link *ngIf="pathInMiddlePanel"
       [verb]="operation.verb" [path]="operation.path"> </endpoint-link>
+    <div class="operation-deprecated" *ngIf="operation.deprecated">
+        Warning: Deprecated
+    </div>
     <div class="operation-tags" *ngIf="operation.info.tags.length">
         <a *ngFor="let tag of operation.info.tags" attr.href="#tag/{{tag}}"> {{tag}} </a>
     </div>
diff --git a/lib/components/Operation/operation.scss b/lib/components/Operation/operation.scss
index d6cdfaf432..4c63abe2d8 100644
--- a/lib/components/Operation/operation.scss
+++ b/lib/components/Operation/operation.scss
@@ -18,6 +18,10 @@
   margin-bottom: calc(1em - 6px);
 }
 
+.operation-deprecated {
+  font-weight: bold;
+}
+
 .operation-tags {
   margin-top: 20px;
 
diff --git a/lib/components/Operation/operation.ts b/lib/components/Operation/operation.ts
index 0ad54e6b9c..dc86e7e67b 100644
--- a/lib/components/Operation/operation.ts
+++ b/lib/components/Operation/operation.ts
@@ -7,6 +7,7 @@ import { OptionsService, MenuService } from '../../services/';
 import { SwaggerBodyParameter } from '../../utils/swagger-typings';
 
 export interface OperationInfo {
+  deprecated: boolean;
   verb: string;
   path: string;
   info: {
@@ -50,6 +51,7 @@ export class Operation extends BaseComponent implements OnInit {
     this.operationId = this.componentSchema.operationId;
 
     this.operation = {
+      deprecated: this.componentSchema.deprecated,
       verb: JsonPointer.baseName(this.pointer),
       path: JsonPointer.baseName(this.pointer, 2),
       info: {
diff --git a/lib/components/SideMenu/side-menu-items.html b/lib/components/SideMenu/side-menu-items.html
index 8010e40485..726900cd3f 100644
--- a/lib/components/SideMenu/side-menu-items.html
+++ b/lib/components/SideMenu/side-menu-items.html
@@ -1,6 +1,6 @@
 <li *ngFor="let item of items; let idx = index" class="menu-item"
   ngClass="menu-item-depth-{{item.depth}} {{item.active ? 'active' : ''}} menu-item-for-{{item.metadata?.type}}">
-  <label class="menu-item-header" [ngClass]="{disabled: !item.ready}" (click)="activateItem(item)">
+  <label class="menu-item-header" [ngClass]="{disabled: !item.ready, deprecated: item?.metadata?.deprecated}" (click)="activateItem(item)">
     <span class="operation-type" [ngClass]="item?.metadata?.operation" *ngIf="item?.metadata?.operation"> {{item?.metadata?.operation}} </span><!--
  --><span class="menu-item-title">{{item.name}}</span>
    <svg *ngIf="item.items?.length" xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" viewBox="0 0 24 24" xml:space="preserve">
diff --git a/lib/components/SideMenu/side-menu-items.scss b/lib/components/SideMenu/side-menu-items.scss
index 386cbeb6b9..ebdec6698f 100644
--- a/lib/components/SideMenu/side-menu-items.scss
+++ b/lib/components/SideMenu/side-menu-items.scss
@@ -21,6 +21,11 @@
     color: lighten($text-color, 60%);
   }
 
+  &.deprecated {
+    text-decoration: line-through;
+    color: lighten($text-color, 60%);
+  }
+
   display: flex;
   justify-content: space-between;
 
diff --git a/lib/services/menu.service.ts b/lib/services/menu.service.ts
index 7ff779558e..b0873b27c8 100644
--- a/lib/services/menu.service.ts
+++ b/lib/services/menu.service.ts
@@ -340,7 +340,8 @@ export class MenuService {
           type: 'operation',
           pointer: operationInfo._pointer,
           operationId: operationInfo.operationId,
-          operation: operationInfo.operation
+          operation: operationInfo.operation,
+          deprecated: !!operationInfo.deprecated
         },
         parent: parent
       };

From 901178e48bd74d4f4bfc28e4258162e2cd7f83ae Mon Sep 17 00:00:00 2001
From: Peter Golm <golm.peter@gmail.com>
Date: Tue, 4 Jul 2017 07:32:04 +0200
Subject: [PATCH 2/2] Change styling of deprecated operation header

---
 lib/components/Operation/operation.html |  5 +----
 lib/components/Operation/operation.scss | 14 +++++++++++---
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/lib/components/Operation/operation.html b/lib/components/Operation/operation.html
index 28a5592d86..67bf81334a 100644
--- a/lib/components/Operation/operation.html
+++ b/lib/components/Operation/operation.html
@@ -1,13 +1,10 @@
 <div class="operation" *ngIf="operation">
   <div class="operation-content">
-    <h2 class="operation-header sharable-header">
+    <h2 class="operation-header sharable-header" [ngClass]="{deprecated: operation.deprecated}">
         <a class="share-link" href="#{{operation.anchor}}"></a>{{operation.summary}}
     </h2>
     <endpoint-link *ngIf="pathInMiddlePanel"
       [verb]="operation.verb" [path]="operation.path"> </endpoint-link>
-    <div class="operation-deprecated" *ngIf="operation.deprecated">
-        Warning: Deprecated
-    </div>
     <div class="operation-tags" *ngIf="operation.info.tags.length">
         <a *ngFor="let tag of operation.info.tags" attr.href="#tag/{{tag}}"> {{tag}} </a>
     </div>
diff --git a/lib/components/Operation/operation.scss b/lib/components/Operation/operation.scss
index 4c63abe2d8..f1e02b6754 100644
--- a/lib/components/Operation/operation.scss
+++ b/lib/components/Operation/operation.scss
@@ -16,10 +16,18 @@
 
 .operation-header {
   margin-bottom: calc(1em - 6px);
-}
 
-.operation-deprecated {
-  font-weight: bold;
+  &.deprecated {
+    &:after {
+      content: 'Deprecated';
+      color: $black;
+      background: $yellow;
+      padding: 3px 10px;
+      text-transform: uppercase;
+      display: inline-block;
+      margin: 0;
+    }
+  }
 }
 
 .operation-tags {