Skip to content

Commit c8fbc81

Browse files
committed
UX improvments; bugfixes
1 parent ee6ba18 commit c8fbc81

File tree

15 files changed

+87
-67
lines changed

15 files changed

+87
-67
lines changed

src/components/template-pages/api-details-page/ko/runtime/menu/api-nav-menu.html

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
<div class="list-container">
2-
<div class="items" data-bind="{css: {'full': api() && (api().type === 'websocket' || api().type === 'graphql')}}">
2+
<div class="items">
3+
API
34
<api-list-dropdown params="{ allowSelection: true }" class="entities-dropdown"></api-list-dropdown>
4-
<input type="search" class="form-control form-control-light" aria-label="Search this page"
5-
placeholder="Search this page" spellcheck="false" data-bind="textInput: pattern" />
65
<!-- ko if: api && versionApis().length > 0 -->
76
API version
87
<label class="select-badge">
@@ -14,6 +13,8 @@
1413
</span>
1514
</label>
1615
<!-- /ko -->
16+
<input type="search" class="form-control form-control-light" aria-label="Search for documentation and operations"
17+
placeholder="Search for documentation and operations" spellcheck="false" data-bind="textInput: pattern" />
1718
<hr>
1819
<details open class="details-styled">
1920
<summary aria-label="About">
@@ -192,27 +193,26 @@
192193
<!-- /ko -->
193194
<!-- /ko -->
194195
</details>
196+
<!-- ko if: api() && (api().type !== 'websocket' && api().type !== 'graphql') -->
197+
<div class="pt-40">
198+
<hr>
199+
<label class="select-badge">
200+
<select id="selectedDefinition" data-bind="value: selectedDefinition" class="download"
201+
aria-label="Download API definition">
202+
<option value="" disabled="disabled" selected="selected">Download API definition</option>
203+
<option value="openapi">Open API 3 (YAML)</option>
204+
<option value="openapi+json">Open API 3 (JSON)</option>
205+
<option value="swagger"> Open API 2 (JSON)</option>
206+
<option value="wadl">WADL</option>
207+
<!-- ko if: api().type === 'soap' -->
208+
<option value="wsdl">WSDL</option>
209+
<!-- /ko -->
210+
</select>
211+
<span class="arrow flex align-items-center justify-content-center">
212+
<i class="icon-emb icon-emb-chevron-down"></i>
213+
</span>
214+
</label>
215+
</div>
216+
<!-- /ko -->
195217
</div>
196-
<!-- ko if: api() && (api().type !== 'websocket' && api().type !== 'graphql') -->
197-
<div class="bottom-item">
198-
<hr>
199-
<label class="select-badge">
200-
<select id="selectedDefinition" data-bind="value: selectedDefinition" class="download"
201-
aria-label="Download API definition">
202-
<option value="" disabled="disabled" selected="selected">Download API definition</option>
203-
<option value="openapi">Open API 3 (YAML)</option>
204-
<option value="openapi+json">Open API 3 (JSON)</option>
205-
<option value="swagger"> Open API 2 (JSON)</option>
206-
<option value="wadl">WADL</option>
207-
<!-- ko if: api().type === 'soap' -->
208-
<option value="wsdl">WSDL</option>
209-
<!-- /ko -->
210-
</select>
211-
<span class="arrow flex align-items-center justify-content-center">
212-
<i class="icon-emb icon-emb-chevron-down"></i>
213-
</span>
214-
</label>
215-
</div>
216-
<!-- /ko -->
217-
218218
</div>

src/components/template-pages/api-details-page/ko/runtime/staticPages/about-api.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<h3>About this API</h3>
1+
<h3>Details</h3>
22

33
<div class="pb-12">
44
<span> type: API</span>

src/components/template-pages/api-details-page/ko/runtime/staticPages/api-products-cards.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ <h2 data-bind="text: quickViewProduct().name"></h2>
7272
</div>
7373
</div>
7474

75-
<span data-bind="text: quickViewProduct().description"></span>
75+
<span data-bind="markdown: quickViewProduct().description"></span>
7676

7777
<!-- ko if: quickViewProduct().terms -->
7878
<h5>Legal</h5>

src/components/template-pages/product-details-page/ko/runtime/menu/product-nav-menu.html

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
<div class="list-container">
22
<div class="items full">
3+
Product
34
<product-list-dropdown-runtime params="{ allowSelection: true }"
45
class="entities-dropdown"></product-list-dropdown-runtime>
5-
<input type="search" class="form-control form-control-light" aria-label="Search this page"
6-
placeholder="Search this page" spellcheck="false" data-bind="textInput: pattern" />
6+
<input type="search" class="form-control form-control-light" aria-label="Search for documentation"
7+
placeholder="Search for documentation" spellcheck="false" data-bind="textInput: pattern" />
78

89
<hr>
910
<details open class="details-styled">

src/components/template-pages/product-details-page/ko/runtime/menu/product-nav-menu.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import * as Constants from "../../../../../../constants";
1515
export class ProductNavMenu {
1616
public readonly staticSelectableMenuItems: menuItem[] = [
1717
{ displayName: "Details", value: "details", type: menuItemType.staticMenuItemType },
18-
{ displayName: "APIs included", value: "apis", type: menuItemType.staticMenuItemType },
18+
{ displayName: "Associated APIs", value: "apis", type: menuItemType.staticMenuItemType },
1919
{ displayName: "Subscriptions", value: "subscriptions", type: menuItemType.staticMenuItemType }
2020
];
2121

src/components/template-pages/product-details-page/ko/runtime/product-details-page.html

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@
1212
data-bind="text: product() ? product().displayName : 'The specified product does not exsist'"></h1>
1313
<button class="subscribe-button" data-bind="enable: canCreateNewSubscription ,click: openSubscriptionForm">
1414
<span>Subscribe</span>
15-
<i class="icon-emb icon-emb-plus"></i>
1615
</button>
1716
</div>
1817

@@ -41,7 +40,7 @@
4140

4241
<!-- ko if: selectedMenuItem()?.type === 'static' -->
4342
<!-- ko if: selectedMenuItem()?.value === 'details' -->
44-
<h3>About this Product</h3>
43+
<h3>Details</h3>
4544

4645
<div class="pb-12">
4746
<span> type: Product</span>

src/components/template-pages/product-details-page/ko/runtime/staticPages/product-apis-cards.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<h3>APIs in this prduct</h3>
1+
<h3>Associated APIs</h3>
22
<div class="cards">
33
<!-- ko if: working -->
44
<div class="cards-body">
@@ -72,7 +72,7 @@ <h2 data-bind="text: quickViewApi().name"></h2>
7272
</div>
7373
</div>
7474

75-
<span data-bind="text: quickViewApi().description"></span>
75+
<span data-bind="markdown: quickViewApi().description"></span>
7676

7777
<!-- ko if: quickViewApi().terms -->
7878
<h5>Legal</h5>

src/components/template-pages/product-details-page/ko/runtime/staticPages/product-details-page-subscriptions.html

Lines changed: 15 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -16,22 +16,15 @@ <h3>Subscriptions</h3>
1616
<!-- /ko -->
1717

1818
<!-- ko if: isUserSignedIn() -->
19-
<p>Below are your subscriptions for this product</p>
19+
<span
20+
data-bind="text: 'Manage your subscriptions. You can create at most ' + product().subscriptionsLimit + ' subscriptions to this product.'"></span>
2021

21-
<div class="info-block">
22-
<b>Maximum subscriptions: </b>
23-
<span
24-
data-bind="text: 'A total of ' + product().subscriptionsLimit + ' subscriptions can be created for this product.'"></span>
22+
<div class="info-block" data-bind="css: { 'show': !canCreateNewSubscription() }">
23+
<b>Subscription limit reached: </b>
24+
<span>You have reached the maximum number of subscriptions to this product.</span>
2525
</div>
2626

2727
<div class="table">
28-
<!-- ko if: subscriptions().length === 0-->
29-
<p>
30-
You don't have subscriptions yet.
31-
</p>
32-
<!-- /ko -->
33-
34-
<!-- ko if: subscriptions().length > 0-->
3528
<div class="table-head">
3629
<div class="table-row" role="row">
3730
<div class="col-6">Name</div>
@@ -100,6 +93,16 @@ <h3>Subscriptions</h3>
10093
<!-- /ko -->
10194
<!-- /ko -->
10295

96+
<!-- ko if: subscriptions().length === 0-->
97+
<div class="table-row">
98+
<div class="col-auto">
99+
<div class="text-truncate">
100+
You don't have subscriptions yet.
101+
</div>
102+
</div>
103+
</div>
104+
<!-- /ko -->
105+
103106
<!-- ko if: canCreateNewSubscription()-->
104107
<div class="table-row">
105108
<div class="col-auto">
@@ -112,9 +115,7 @@ <h3>Subscriptions</h3>
112115
</div>
113116
</div>
114117
<!-- /ko -->
115-
116118
</div>
117-
<!-- /ko -->
118119
</div>
119120
<!-- /ko -->
120121
<!-- /ko -->

src/components/template-pages/product-details-page/ko/runtime/staticPages/product-details-page-subscriptions.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -160,6 +160,7 @@ export class ProdutDetailsPageSubscriptions {
160160
const subscriptions = pageOfSubscriptions.value.map(item => new SubscriptionListItem(item, this.eventManager));
161161
this.subscriptions(subscriptions);
162162
this.nextLink(pageOfSubscriptions.nextLink);
163+
await this.calculateCanCreateNewSubscription();
163164
}
164165
catch (error) {
165166
if (error.code === "Unauthorized") {

src/components/template-pages/product-details-page/ko/runtime/subscripion-form/subscription-form.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,8 @@ export class SubscriptionForm {
6868
}
6969

7070
public async subscribe(): Promise<void> {
71+
this.subscriptionCreated(false);
72+
7173
if (!this.canSubscribe()) {
7274
return;
7375
}

0 commit comments

Comments
 (0)