feat: new option path-in-middle-panel

Author: RomanHotsiy

lib/components/Operation/operation.html

@@ -3,6 +3,8 @@
     <h2 class="operation-header sharable-header">
         <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-tags" *ngIf="operation.info.tags.length">
         <a *ngFor="let tag of operation.info.tags" attr.href="#tag/{{tag}}"> {{tag}} </a>
     </div>
@@ -16,7 +18,8 @@ <h2 class="operation-header sharable-header">
   <div class="operation-samples">
     <h4 class="operation-params-subheader">Definition</h4>
 
-    <endpoint-link [verb]="operation.verb" [path]="operation.path"> </endpoint-link>
+    <endpoint-link *ngIf="!pathInMiddlePanel"
+      [verb]="operation.verb" [path]="operation.path"> </endpoint-link>
 
     <div>
         <request-samples [pointer]="pointer" [schemaPointer]="operation.bodyParam?._pointer">

lib/components/Operation/operation.scss

@@ -57,6 +57,10 @@
   background: $samples-panel-bg-color;
 }
 
+.operation-samples pre {
+  color: $sample-panel-color;
+}
+
 .operation-samples header,
 .operation-samples > h5 {
   color: $sample-panel-headers-color;
@@ -103,3 +107,28 @@
     padding-bottom: 0;
   }
 }
+
+.operation-content /deep/ endpoint-link {
+  margin-bottom: 16px;
+
+  .operation-endpoint[class] {
+    padding: 5px 30px 5px 5px;
+    border: 0;
+    border-bottom: 1px solid $border-color;
+    border-radius: 0;
+    background-color: transparent;
+  }
+  .operation-api-url-path {
+    color: $black;
+  }
+
+  .expand-icon {
+    top: 8px;
+    background-color: $border-color;
+  }
+
+  .servers-overlay {
+    border: 1px solid $border-color;
+    border-top: 0;
+  }
+}

lib/components/Operation/operation.ts

@@ -35,12 +35,15 @@ export class Operation extends BaseComponent implements OnInit {
   @HostBinding('attr.operation-id') operationId;
 
   operation: OperationInfo;
+  pathInMiddlePanel: boolean;
 
   constructor(
     specMgr:SpecManager,
     private optionsService: OptionsService,
     private menu: MenuService) {
     super(specMgr);
+
+    this.pathInMiddlePanel = optionsService.options.pathInMiddlePanel;
   }
 
   init() {

lib/services/options.service.ts

@@ -17,7 +17,8 @@ const OPTION_NAMES = new Set([
   'lazyRendering',
   'expandResponses',
   'requiredPropsFirst',
-  'noAutoAuth'
+  'noAutoAuth',
+  'pathInMiddlePanel',
 ]);
 
 export interface Options {
@@ -31,6 +32,7 @@ export interface Options {
   $scrollParent?: HTMLElement | Window;
   requiredPropsFirst?: boolean;
   noAutoAuth?: boolean;
+  pathInMiddlePanel?: boolean;
   spec?: any;
 }
 
@@ -98,6 +100,7 @@ export class OptionsService {
     if (isString(this._options.lazyRendering)) this._options.lazyRendering = true;
     if (isString(this._options.requiredPropsFirst)) this._options.requiredPropsFirst = true;
     if (isString(this._options.noAutoAuth)) this._options.noAutoAuth = true;
+    if (isString(this._options.pathInMiddlePanel)) this._options.pathInMiddlePanel = true;
     if (isString(this._options.expandResponses)) {
       let str = this._options.expandResponses as string;
       if (str === 'all') return;