Skip to content

Commit e4eabbd

Browse files
jcenturionjcenturion
committed
Merge pull request #124 from mulesoft/chores/miscellaneous
Restyling resource level description
2 parents 577ecbd + 3d815b2 commit e4eabbd

File tree

9 files changed

+81
-56
lines changed

9 files changed

+81
-56
lines changed

‎dist/examples/leagues.raml‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ title: "La Liga"
33
version: "1.0"
44
baseUri: http://localhost:3000/api
55

6+
protocols: [ HTTP, HTTPS ]
7+
68
securitySchemes:
79
- basic:
810
type: Basic Authentication
@@ -51,9 +53,17 @@ securitySchemes:
5153
headers:
5254
auth:
5355

56+
resourceTypes:
57+
- base: {}
58+
59+
traits:
60+
- filterable: {}
61+
5462
securedBy: [ basic, digest_auth, oauth_2_0, custom_scheme_1, custom_scheme_2 ]
5563

5664
/teams:
65+
type: base
66+
is: [filterable]
5767
displayName: Teams
5868
description: |
5969
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sagittis ipsum felis, sed aliquam massa egestas vel. Sed scelerisque leo lorem, a gravida enim congue eget. Sed rutrum quis odio vitae sollicitudin. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc pulvinar arcu at diam pharetra finibus. Curabitur malesuada hendrerit odio id consectetur. Etiam felis augue, malesuada ut turpis vel, tincidunt sodales justo. Donec quam eros, accumsan ut elementum et, euismod placerat ligula. Phasellus consequat velit lacus. Aenean vel massa et sapien molestie imperdiet et id ex. Nulla quis suscipit libero.

‎dist/scripts/api-console.js‎

Lines changed: 11 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -503,8 +503,6 @@
503503
} else {
504504
jQuery($this).addClass('raml-console-is-active');
505505
jQuery($this).siblings('.raml-console-tab').removeClass('raml-console-is-active');
506-
$scope.traits = null;
507-
$scope.methodInfo = {};
508506
}
509507
};
510508
}
@@ -1745,13 +1743,6 @@
17451743
return collection.filter(function (el) { return el === status || el === null; }).length === collection.length;
17461744
}
17471745

1748-
$scope.showResourceDescription = function ($event) {
1749-
var $this = jQuery($event.currentTarget);
1750-
var $container = $this.closest('.raml-console-resource-list-item');
1751-
1752-
$container.find('.raml-console-resource-description').toggleClass('ng-hide');
1753-
};
1754-
17551746
$scope.hasResourcesWithChilds = function () {
17561747
return $scope.raml.resourceGroups.filter(function (el) {
17571748
return el.length > 1;
@@ -1768,7 +1759,7 @@
17681759

17691760
for (var i = 0; i < $scope.raml.resourceGroups.length; i++) {
17701761
var resources = $scope.raml.resourceGroups[i];
1771-
var status = resources.length > 1 ? false : resources[0].description ? false : null;
1762+
var status = resources.length > 1 ? false : null;
17721763
$scope.resourceList.push($scope.resourcesCollapsed ? true : status);
17731764
}
17741765

@@ -5663,11 +5654,13 @@ angular.module('ramlConsoleApp').run(['$templateCache', function($templateCache)
56635654
"\n" +
56645655
" <li id=\"{{generateId(resource.pathSegments)}}\" class=\"raml-console-resource-list-item\" ng-repeat=\"resourceGroup in raml.resourceGroups\">\n" +
56655656
" <header class=\"raml-console-resource raml-console-resource-root raml-console-clearfix\" ng-class=\"{ 'raml-console-is-active':showPanel }\" ng-init=\"resource = resourceGroup[0]\">\n" +
5666-
" <div class=\"raml-console-resource-path-container\" ng-init=\"index=$index\">\n" +
5657+
" <div class=\"raml-console-resource-path-container\" ng-init=\"index=$index\" ng-class=\"{'raml-console-resource-with-description': resource.description}\">\n" +
56675658
" <button class=\"raml-console-resource-root-toggle\" ng-class=\"{'raml-console-is-active': resourceList[$index]}\" ng-if=\"resourceGroup.length > 1\" ng-click=\"toggle($event, index, resourceList, 'resourcesCollapsed')\"></button>\n" +
56685659
"\n" +
56695660
" <h2 class=\"raml-console-resource-heading raml-console-resource-heading-large\">\n" +
5670-
" <a class=\"raml-console-resource-path-active\" ng-class=\"{'raml-console-resource-heading-hover':resourceGroup.length > 1}\" ng-repeat='segment in resource.pathSegments' ng-click=\"toggle($event, index, resourceList, 'resourcesCollapsed')\">{{segment.toString()}}</a>\n" +
5661+
" <a ng-if=\"resourceGroup.length > 1\" class=\"raml-console-resource-path-active\" ng-class=\"{'raml-console-resource-heading-hover':resourceGroup.length > 1}\" ng-repeat='segment in resource.pathSegments' ng-click=\"toggle($event, index, resourceList, 'resourcesCollapsed')\">{{segment.toString()}}</a>\n" +
5662+
"\n" +
5663+
" <a ng-if=\"resourceGroup.length == 1\" style=\"cursor: default;\" class=\"raml-console-resource-path-active\" ng-repeat='segment in resource.pathSegments'>{{segment.toString()}}</a>\n" +
56715664
" </h2>\n" +
56725665
"\n" +
56735666
" <resource-type></resource-type>\n" +
@@ -5676,6 +5669,8 @@ angular.module('ramlConsoleApp').run(['$templateCache', function($templateCache)
56765669
"\n" +
56775670
" <span ng-hide=\"methodInfo.is\" ng-if=\"resource.traits\" class=\"raml-console-flag raml-console-resource-heading-flag\"><b>Traits:</b> {{readResourceTraits(resource.traits)}}</span>\n" +
56785671
"\n" +
5672+
" <span class=\"raml-console-resource-level-description\" marked=\"resource.description\" opts=\"markedOptions\"></span>\n" +
5673+
"\n" +
56795674
" </div>\n" +
56805675
" <method-list></method-list>\n" +
56815676
" <close-button></close-button>\n" +
@@ -5686,37 +5681,25 @@ angular.module('ramlConsoleApp').run(['$templateCache', function($templateCache)
56865681
" <!-- Child Resources -->\n" +
56875682
" <ol class=\"raml-console-resource-list\" ng-class=\"{'raml-console-is-collapsed': resourcesCollapsed}\">\n" +
56885683
"\n" +
5689-
" <li class=\"raml-console-resource-list-item raml-console-resource-description\" ng-if=\"resource.description\">\n" +
5690-
" <div class=\"raml-console-resource-panel-primary-row raml-console-resource-panel-content raml-console-is-active\">\n" +
5691-
" <h3 class=\"raml-console-resource-heading-a\">Description</h3>\n" +
5692-
" <p marked=\"resource.description\" opts=\"markedOptions\"></p>\n" +
5693-
" </div>\n" +
5694-
" </li>\n" +
5695-
"\n" +
56965684
" <li id=\"{{generateId(resource.pathSegments)}}\" class=\"raml-console-resource-list-item\" ng-repeat=\"resource in resourceGroup\" ng-if=\"!$first\">\n" +
56975685
" <div class=\"raml-console-resource raml-console-clearfix\" ng-class=\"{ 'raml-console-is-active':showPanel }\">\n" +
5698-
" <div class=\"raml-console-resource-path-container\">\n" +
5699-
" <h3 class=\"raml-console-resource-heading\" ng-click=\"showResourceDescription($event)\" ng-class=\"{'raml-console-resource-heading-hover':resource.description}\">\n" +
5686+
" <div class=\"raml-console-resource-path-container\" ng-class=\"{'raml-console-resource-with-description': resource.description}\">\n" +
5687+
" <h3 class=\"raml-console-resource-heading\" style=\"cursor: default;\">\n" +
57005688
" <span ng-repeat-start='segment in resource.pathSegments' ng-if=\"!$last\">{{segment.toString()}}</span><span ng-repeat-end ng-if=\"$last\" class=\"raml-console-resource-path-active\">{{segment.toString()}}</span>\n" +
57015689
" </h3>\n" +
57025690
"\n" +
57035691
" <resource-type></resource-type>\n" +
57045692
" <span ng-if=\"methodInfo.is\" class=\"raml-console-flag raml-console-resource-heading-flag raml-console-resource-trait\"><b>Traits:</b> {{readTraits(methodInfo.is)}}</span>\n" +
57055693
"\n" +
57065694
" <span ng-hide=\"methodInfo.is\" ng-if=\"resource.traits\" class=\"raml-console-flag raml-console-resource-heading-flag\"><b>Traits:</b> {{readResourceTraits(resource.traits)}}</span>\n" +
5695+
"\n" +
5696+
" <span class=\"raml-console-resource-level-description\" marked=\"resource.description\" opts=\"markedOptions\"></span>\n" +
57075697
" </div>\n" +
57085698
"\n" +
57095699
" <method-list></method-list>\n" +
57105700
" <close-button></close-button>\n" +
57115701
" </div>\n" +
57125702
"\n" +
5713-
" <span class=\"raml-console-resource-list-item raml-console-resource-description\" ng-show=\"resourceGroup.length > 1\" ng-if=\"resource.description\">\n" +
5714-
" <div class=\"raml-console-resource-panel-primary-row raml-console-resource-panel-content raml-console-is-active\">\n" +
5715-
" <h3 class=\"raml-console-resource-heading-a\">Description</h3>\n" +
5716-
" <p marked=\"resource.description\" opts=\"markedOptions\"></p>\n" +
5717-
" </div>\n" +
5718-
" </span>\n" +
5719-
"\n" +
57205703
" <resource-panel></resource-panel>\n" +
57215704
" </li>\n" +
57225705
" </ol>\n" +

‎dist/styles/api-console-dark-theme.css‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1749,6 +1749,19 @@ ol.raml-console-resources-container {
17491749
margin-top: 0px;
17501750
}
17511751

1752+
.raml-console-resource-level-description {
1753+
font-size: 12px;
1754+
color: #878787;
1755+
font-weight: normal;
1756+
display: block;
1757+
margin-top: 5px;
1758+
width: 98%;
1759+
}
1760+
1761+
.raml-console-resource-with-description {
1762+
margin-bottom: 9px;
1763+
}
1764+
17521765
.raml-console-resource-response-jump {
17531766
margin-top: 50px;
17541767
position: absolute;

‎dist/styles/api-console-light-theme.css‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1749,6 +1749,19 @@ ol.raml-console-resources-container {
17491749
margin-top: 0px;
17501750
}
17511751

1752+
.raml-console-resource-level-description {
1753+
font-size: 12px;
1754+
color: #878787;
1755+
font-weight: normal;
1756+
display: block;
1757+
margin-top: 5px;
1758+
width: 98%;
1759+
}
1760+
1761+
.raml-console-resource-with-description {
1762+
margin-bottom: 9px;
1763+
}
1764+
17521765
.raml-console-resource-response-jump {
17531766
margin-top: 50px;
17541767
position: absolute;

‎src/app/directives/method-list.js‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -173,8 +173,6 @@
173173
} else {
174174
jQuery($this).addClass('raml-console-is-active');
175175
jQuery($this).siblings('.raml-console-tab').removeClass('raml-console-is-active');
176-
$scope.traits = null;
177-
$scope.methodInfo = {};
178176
}
179177
};
180178
}

‎src/app/resources/resources.js‎

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -120,13 +120,6 @@
120120
return collection.filter(function (el) { return el === status || el === null; }).length === collection.length;
121121
}
122122

123-
$scope.showResourceDescription = function ($event) {
124-
var $this = jQuery($event.currentTarget);
125-
var $container = $this.closest('.raml-console-resource-list-item');
126-
127-
$container.find('.raml-console-resource-description').toggleClass('ng-hide');
128-
};
129-
130123
$scope.hasResourcesWithChilds = function () {
131124
return $scope.raml.resourceGroups.filter(function (el) {
132125
return el.length > 1;
@@ -143,7 +136,7 @@
143136

144137
for (var i = 0; i < $scope.raml.resourceGroups.length; i++) {
145138
var resources = $scope.raml.resourceGroups[i];
146-
var status = resources.length > 1 ? false : resources[0].description ? false : null;
139+
var status = resources.length > 1 ? false : null;
147140
$scope.resourceList.push($scope.resourcesCollapsed ? true : status);
148141
}
149142

‎src/app/resources/resources.tpl.html‎

Lines changed: 10 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -43,11 +43,13 @@ <h2 class="raml-console-resource-section-title">
4343

4444
<li id="{{generateId(resource.pathSegments)}}" class="raml-console-resource-list-item" ng-repeat="resourceGroup in raml.resourceGroups">
4545
<header class="raml-console-resource raml-console-resource-root raml-console-clearfix" ng-class="{ 'raml-console-is-active':showPanel }" ng-init="resource = resourceGroup[0]">
46-
<div class="raml-console-resource-path-container" ng-init="index=$index">
46+
<div class="raml-console-resource-path-container" ng-init="index=$index" ng-class="{'raml-console-resource-with-description': resource.description}">
4747
<button class="raml-console-resource-root-toggle" ng-class="{'raml-console-is-active': resourceList[$index]}" ng-if="resourceGroup.length > 1" ng-click="toggle($event, index, resourceList, 'resourcesCollapsed')"></button>
4848

4949
<h2 class="raml-console-resource-heading raml-console-resource-heading-large">
50-
<a class="raml-console-resource-path-active" ng-class="{'raml-console-resource-heading-hover':resourceGroup.length > 1}" ng-repeat='segment in resource.pathSegments' ng-click="toggle($event, index, resourceList, 'resourcesCollapsed')">{{segment.toString()}}</a>
50+
<a ng-if="resourceGroup.length > 1" class="raml-console-resource-path-active" ng-class="{'raml-console-resource-heading-hover':resourceGroup.length > 1}" ng-repeat='segment in resource.pathSegments' ng-click="toggle($event, index, resourceList, 'resourcesCollapsed')">{{segment.toString()}}</a>
51+
52+
<a ng-if="resourceGroup.length == 1" style="cursor: default;" class="raml-console-resource-path-active" ng-repeat='segment in resource.pathSegments'>{{segment.toString()}}</a>
5153
</h2>
5254

5355
<resource-type></resource-type>
@@ -56,6 +58,8 @@ <h2 class="raml-console-resource-heading raml-console-resource-heading-large">
5658

5759
<span ng-hide="methodInfo.is" ng-if="resource.traits" class="raml-console-flag raml-console-resource-heading-flag"><b>Traits:</b> {{readResourceTraits(resource.traits)}}</span>
5860

61+
<span class="raml-console-resource-level-description" marked="resource.description" opts="markedOptions"></span>
62+
5963
</div>
6064
<method-list></method-list>
6165
<close-button></close-button>
@@ -66,37 +70,25 @@ <h2 class="raml-console-resource-heading raml-console-resource-heading-large">
6670
<!-- Child Resources -->
6771
<ol class="raml-console-resource-list" ng-class="{'raml-console-is-collapsed': resourcesCollapsed}">
6872

69-
<li class="raml-console-resource-list-item raml-console-resource-description" ng-if="resource.description">
70-
<div class="raml-console-resource-panel-primary-row raml-console-resource-panel-content raml-console-is-active">
71-
<h3 class="raml-console-resource-heading-a">Description</h3>
72-
<p marked="resource.description" opts="markedOptions"></p>
73-
</div>
74-
</li>
75-
7673
<li id="{{generateId(resource.pathSegments)}}" class="raml-console-resource-list-item" ng-repeat="resource in resourceGroup" ng-if="!$first">
7774
<div class="raml-console-resource raml-console-clearfix" ng-class="{ 'raml-console-is-active':showPanel }">
78-
<div class="raml-console-resource-path-container">
79-
<h3 class="raml-console-resource-heading" ng-click="showResourceDescription($event)" ng-class="{'raml-console-resource-heading-hover':resource.description}">
75+
<div class="raml-console-resource-path-container" ng-class="{'raml-console-resource-with-description': resource.description}">
76+
<h3 class="raml-console-resource-heading" style="cursor: default;">
8077
<span ng-repeat-start='segment in resource.pathSegments' ng-if="!$last">{{segment.toString()}}</span><span ng-repeat-end ng-if="$last" class="raml-console-resource-path-active">{{segment.toString()}}</span>
8178
</h3>
8279

8380
<resource-type></resource-type>
8481
<span ng-if="methodInfo.is" class="raml-console-flag raml-console-resource-heading-flag raml-console-resource-trait"><b>Traits:</b> {{readTraits(methodInfo.is)}}</span>
8582

8683
<span ng-hide="methodInfo.is" ng-if="resource.traits" class="raml-console-flag raml-console-resource-heading-flag"><b>Traits:</b> {{readResourceTraits(resource.traits)}}</span>
84+
85+
<span class="raml-console-resource-level-description" marked="resource.description" opts="markedOptions"></span>
8786
</div>
8887

8988
<method-list></method-list>
9089
<close-button></close-button>
9190
</div>
9291

93-
<span class="raml-console-resource-list-item raml-console-resource-description" ng-show="resourceGroup.length > 1" ng-if="resource.description">
94-
<div class="raml-console-resource-panel-primary-row raml-console-resource-panel-content raml-console-is-active">
95-
<h3 class="raml-console-resource-heading-a">Description</h3>
96-
<p marked="resource.description" opts="markedOptions"></p>
97-
</div>
98-
</span>
99-
10092
<resource-panel></resource-panel>
10193
</li>
10294
</ol>

‎src/assets/examples/leagues.raml‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ title: "La Liga"
33
version: "1.0"
44
baseUri: http://localhost:3000/api
55

6+
protocols: [ HTTP, HTTPS ]
7+
68
securitySchemes:
79
- basic:
810
type: Basic Authentication
@@ -51,9 +53,17 @@ securitySchemes:
5153
headers:
5254
auth:
5355

56+
resourceTypes:
57+
- base: {}
58+
59+
traits:
60+
- filterable: {}
61+
5462
securedBy: [ basic, digest_auth, oauth_2_0, custom_scheme_1, custom_scheme_2 ]
5563

5664
/teams:
65+
type: base
66+
is: [filterable]
5767
displayName: Teams
5868
description: |
5969
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sagittis ipsum felis, sed aliquam massa egestas vel. Sed scelerisque leo lorem, a gravida enim congue eget. Sed rutrum quis odio vitae sollicitudin. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc pulvinar arcu at diam pharetra finibus. Curabitur malesuada hendrerit odio id consectetur. Etiam felis augue, malesuada ut turpis vel, tincidunt sodales justo. Donec quam eros, accumsan ut elementum et, euismod placerat ligula. Phasellus consequat velit lacus. Aenean vel massa et sapien molestie imperdiet et id ex. Nulla quis suscipit libero.

‎src/scss/_resource.scss‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,19 @@ ol.resources-container {
88
margin-top: 0px;
99
}
1010

11+
.resource-level-description {
12+
font-size: 12px;
13+
color: #878787;
14+
font-weight: normal;
15+
display: block;
16+
margin-top: 5px;
17+
width: 98%;
18+
}
19+
20+
.resource-with-description {
21+
margin-bottom: 9px;
22+
}
23+
1124
.resource-response-jump {
1225
margin-top: 50px;
1326
position: absolute;

0 commit comments

Comments
 (0)