Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

UI V2 #99

Merged
merged 7 commits into from
Nov 2, 2020
Merged

UI V2 #99

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
2af58cc
tbreadcrump, title, descrition and headers
alameenkhader Sep 25, 2020
c5fe38f
query parameters
alameenkhader Sep 25, 2020
7100ff6
adding tabs
alameenkhader Sep 28, 2020
9196a59
adding more components
alameenkhader Sep 29, 2020
67c6c2a
adding view raw and copy icon
alameenkhader Sep 30, 2020
789e5b0
fixing test coverage
alameenkhader Nov 2, 2020
057b4f1
fixing teast coverage failures
alameenkhader Nov 2, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 13 additions & 0 deletions app/assets/javascripts/apidoco/application.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,5 +18,18 @@
//= require apidoco/clipboard.min
//= require apidoco/directives/ngclipboard
//= require apidoco/apidoco_app
//
// Icons
//= require apidoco/icons/linkIcon
//= require apidoco/icons/copyIcon
//= require apidoco/icons/redirectIcon
//
//= Components
//= require apidoco/components/tabbed/ad-tabbed
//= require apidoco/components/tabbed/headers/ad-headers
//= require apidoco/components/tabbed/parameters/ad-parameters
//= require apidoco/components/tabbed/example-headers/ad-example-headers
//= require apidoco/components/tabbed/example-body/ad-example-body
//
//= require apidoco/directives/jq_json_viewer
//= require apidoco/controllers/documentations_controller
57 changes: 57 additions & 0 deletions app/assets/javascripts/apidoco/components/tabbed/ad-tabbed.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
<!-- Tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link active" data-toggle="tab" href="#request-{{$ctrl.index}}" role="tab" aria-controls="request-{{$ctrl.index}}" aria-selected="true">Request</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#response-{{$ctrl.index}}" role="tab" aria-controls="response-{{$ctrl.index}}" aria-selected="false">Response</a>
</li>
</ul>

<div class="tab-content">
<!-- Request -->
<div class="tab-pane fade show active" id="request-{{$ctrl.index}}" role="tabpanel" aria-labelledby="request-{{$ctrl.index}}">
<!-- Headers -->
<ad-headers headers="$ctrl.doc.header" ng-if="$ctrl.doc.header"></ad-headers>

<!-- Parameters -->
<ad-parameters params="$ctrl.doc.params" ng-if="$ctrl.doc.params && $ctrl.doc.params.length > 0"></ad-parameters>

<!-- Examples -->
<div
ng-if="$ctrl.doc.examples && $ctrl.doc.examples.length > 0"
ng-repeat="example in $ctrl.doc.examples">
<!-- Headers -->
<ad-example-headers
headers="example.request_headers"
ng-if="example.request_headers">
</ad-example-headers>

<!-- Body -->
<ad-example-body
body="example.request"
ng-if="example.request">
</ad-example-body>
</div>
</div>

<!-- Response -->
<div class="tab-pane fade" id="response-{{$ctrl.index}}" role="tabpanel" aria-labelledby="response-{{$ctrl.index}}">
<!-- Examples -->
<div
ng-if="$ctrl.doc.examples && $ctrl.doc.examples.length > 0"
ng-repeat="example in $ctrl.doc.examples">
<!-- Headers -->
<ad-example-headers
headers="example.response_headers"
ng-if="example.response_headers">
</ad-example-headers>

<!-- Body -->
<ad-example-body
body="example.response"
ng-if="example.response">
</ad-example-body>
</div>
</div>
</div>
9 changes: 9 additions & 0 deletions app/assets/javascripts/apidoco/components/tabbed/ad-tabbed.js.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
"use strict";

angular.module("apiDocoApp").component("adTabbed", {
templateUrl: "<%= asset_path('apidoco/components/tabbed/ad-tabbed.html') %>",
bindings: {
doc: "<",
index: "<",
},
});
29 changes: 29 additions & 0 deletions app/assets/javascripts/apidoco/components/tabbed/example-body/ad-example-body.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
<hr style="margin-top: 0; margin-bottom: 0; border: 0;"> <!-- To fix the weird issue when runnuing the specs, The component was not not rendering without this hack -->

<div class="section-block card">
<div class="card-body">
<div class="d-flex">
<h5 class="card-title">Body <small class="text-muted">example</small></h5>

<!-- Buttons -->
<!-- <button
class="btn btn-light btn-sm ml-auto"
type="button"
ng-click="viewRaw($ctrl.body)"
title="View Raw">
<redirect-icon />
</button> -->
<button
class="btn btn-light btn-sm ml-auto"
type="button"
ngclipboard
data-clipboard-text="{{$ctrl.body}}"
title="Copy to Clipboard">
<copy-icon />
</button>
</div>

<!-- Json viewer -->
<div jq-json-viewer data="$ctrl.body"></div>
</div>
</div>
8 changes: 8 additions & 0 deletions app/assets/javascripts/apidoco/components/tabbed/example-body/ad-example-body.js.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
"use strict";

angular.module("apiDocoApp").component("adExampleBody", {
templateUrl: "<%= asset_path('apidoco/components/tabbed/example-body/ad-example-body.html') %>",
bindings: {
body: "<",
},
});
10 changes: 10 additions & 0 deletions app/assets/javascripts/apidoco/components/tabbed/example-headers/ad-example-headers.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
<div class="section-block card">
<div class="card-body">
<h5 class="card-title">Headers <small class="text-muted">example</small></h5>
<div class="btn-group pull-right" role="group">
<button class="btn btn-default btn-sm" ng-click="viewRaw($ctrl.headers)">Raw</button>
<button class="btn btn-default btn-sm" ngclipboard data-clipboard-text="{{$ctrl.headers}}">Copy</button>
</div>
<div jq-json-viewer data="$ctrl.headers"></div>
</div>
</div>
8 changes: 8 additions & 0 deletions app/assets/javascripts/apidoco/components/tabbed/example-headers/ad-example-headers.js.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
"use strict";

angular.module("apiDocoApp").component("adExampleHeaders", {
templateUrl: "<%= asset_path('apidoco/components/tabbed/example-headers/ad-example-headers.html') %>",
bindings: {
headers: "<",
},
});
15 changes: 15 additions & 0 deletions app/assets/javascripts/apidoco/components/tabbed/headers/ad-headers.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<div class="section-block card">
<div class="card-body">
<h5 class="card-title">Headers</h5>
<div ng-repeat="(key, value) in $ctrl.headers" class="d-flex row mb-1">
<div class="d-flex col-2">
{{key}}
<!-- TODO: Implement required/optional -->
</div>
<div class="col-1"><span class="badge badge-pill badge-light">string</span></div>
<div class="ml-1 text-muted col-3">
{{value}}
</div>
</div>
</div>
</div>
8 changes: 8 additions & 0 deletions app/assets/javascripts/apidoco/components/tabbed/headers/ad-headers.js.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
"use strict";

angular.module("apiDocoApp").component("adHeaders", {
templateUrl: "<%= asset_path('apidoco/components/tabbed/headers/ad-headers.html') %>",
bindings: {
headers: "<",
},
});
24 changes: 24 additions & 0 deletions app/assets/javascripts/apidoco/components/tabbed/parameters/ad-parameters.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
<hr style="margin-top: 0; margin-bottom: 0; border: 0;"> <!-- To fix the weird issue when runnuing the specs, The component was not not rendering without this hack -->

<div class="card section-block">
<div class="card-body">
<h5 class="card-title">Body Properties</h5>
<div ng-repeat="param in $ctrl.params" class="row mb-2">
<div class="col-2 flex-column">
<div>{{param.key}}</div>
<div>
<small class="text-danger font-weight-lighter text-uppercase" ng-if="param.required">REQUIRED</small>
<small class="text-info font-weight-lighter text-uppercase" ng-if="!param.required">OPTIONAL</small>
</div>
</div>
<div class="col-1 text-lowercase"><span class="badge badge-pill badge-light">{{param.type}}</span></div>
<div class="ml-1 text-muted col-3" ng-if="param.description">{{param.description}}</div>
<div class="ml-1 text-muted col-5">
{{param.notes}}
<p ng-if="$ctrl.param.validations">
<small ng-repeat="validation in param.validations">{{validation}}<br></small>
</p>
</div>
</div>
</div>
</div>
8 changes: 8 additions & 0 deletions app/assets/javascripts/apidoco/components/tabbed/parameters/ad-parameters.js.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
"use strict";

angular.module("apiDocoApp").component("adParameters", {
templateUrl: "<%= asset_path('apidoco/components/tabbed/parameters/ad-parameters.html') %>",
bindings: {
params: "<",
},
});
13 changes: 13 additions & 0 deletions app/assets/javascripts/apidoco/icons/copyIcon.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
"use strict";
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Use the function form of "use strict".


angular.module("apiDocoApp").directive("copyIcon", [
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

'angular' is not defined.

function () {
return {
restrict: "E",
template:
'<svg viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true">' +
'<path fill-rule="evenodd" d="M5.75 1a.75.75 0 00-.75.75v3c0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75v-3a.75.75 0 00-.75-.75h-4.5zm.75 3V2.5h3V4h-3zm-2.874-.467a.75.75 0 00-.752-1.298A1.75 1.75 0 002 3.75v9.5c0 .966.784 1.75 1.75 1.75h8.5A1.75 1.75 0 0014 13.25v-9.5a1.75 1.75 0 00-.874-1.515.75.75 0 10-.752 1.298.25.25 0 01.126.217v9.5a.25.25 0 01-.25.25h-8.5a.25.25 0 01-.25-.25v-9.5a.25.25 0 01.126-.217z"></path>' +
"</svg>",
};
},
]);
12 changes: 12 additions & 0 deletions app/assets/javascripts/apidoco/icons/linkIcon.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
"use strict";
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Use the function form of "use strict".


angular.module("apiDocoApp").directive("linkIcon", [
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

'angular' is not defined.

function () {
return {
restrict: "E",
template:
'<svg height="16" viewBox="0 0 16 16" version="1.1" width="16" aria-hidden="true">' +
'<path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg>',
};
},
]);
13 changes: 13 additions & 0 deletions app/assets/javascripts/apidoco/icons/redirectIcon.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
"use strict";
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Use the function form of "use strict".


angular.module("apiDocoApp").directive("redirectIcon", [
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

'angular' is not defined.

function () {
return {
restrict: "E",
template:
'<svg height="16" width="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">' +
'<path fill="currentColor" d="M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z" class=""></path>' +
'</svg>',
};
},
]);
7 changes: 4 additions & 3 deletions app/assets/stylesheets/apidoco/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,8 @@
}

#page-content-wrapper {
background-color: #f5f8fa;
background-color: #ffffff;
padding: 0px;
}

.text_wheat {
Expand All @@ -27,8 +28,8 @@ h2.section-title {
}

.section-block {
padding-bottom: 15px;
padding-top: 15px;
margin-bottom: 15px;
margin-top: 15px;
}

h3 {
Expand Down
4 changes: 3 additions & 1 deletion app/assets/stylesheets/apidoco/simple-sidebar.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,7 +113,9 @@
}

#sidebar-wrapper {
width: 225px;
width: 20%;
min-width: 300px;
max-width: 400px;
}

#wrapper.toggled #sidebar-wrapper {
Expand Down
70 changes: 0 additions & 70 deletions app/views/apidoco/apis/_examples.html
View file
Open in desktop

This file was deleted.

Loading