Skip to content

Commit 621416a

Browse files
bradnoblebradnoble
committed
clean up main nav
Flow works better in the UI now but I seem to have broken the automatic forwarding after upload and import. (I didn’t touch the .js, so I’m not sure what I did that would break it.)
1 parent e48b109 commit 621416a

File tree

9 files changed

+151
-109
lines changed

9 files changed

+151
-109
lines changed

‎public/seams.css

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,12 @@
11

2+
.tree-nav_link.disabled {
3+
text-decoration: line-through;
4+
}
5+
.tree-nav .tree-nav hr {
6+
border-top: 1px solid #ccc;
7+
margin: 1rem 0;
8+
}
9+
210
.collapsible {
311
display: none;
412
}

‎views/index.html

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -33,27 +33,27 @@
3333
<a ng-class="{'current': !selectedView || selectedView === 'about'}" class="tree-nav_link" href="#/about">Simple Search Service</a>
3434
<ul class="tree-nav">
3535
<li class="tree-nav_item">
36-
<a ng-class="{'current': selectedView === 'get'}" class="tree-nav_link" href="#/get">Get data</a>
36+
<a ng-class="{'current': selectedView === 'get', 'disabled': currentStatus == 'imported'}" class="tree-nav_link" href="#/get">Get data</a>
3737
</li>
3838
<li class="tree-nav_item">
39-
<a ng-class="{'current': selectedView === 'upload'}" class="tree-nav_link" href="#/upload">Upload data</a>
39+
<a ng-class="{'current': selectedView === 'upload', 'disabled': currentStatus == 'imported'}" class="tree-nav_link" href="#/upload">Upload data</a>
4040
</li>
4141
<li class="tree-nav_item">
42-
<a ng-class="{'current': selectedView === 'import'}" class="tree-nav_link" ng-if="currentStatus && currentStatus != 'new'" href="#/import">Create Index</a>
43-
<a class="tree-nav_link disabled" ng-if="!currentStatus || currentStatus == 'new'">Create Index</a>
42+
<a ng-class="{'current': selectedView === 'import', 'disabled': !currentStatus || currentStatus == 'new' || currentStatus == 'imported'}" class="tree-nav_link" href="#/import">Create Index</a>
4443
</li>
4544
<li class="tree-nav_item">
46-
<a ng-class="{'current': selectedView === 'search'}" class="tree-nav_link" ng-if="currentStatus == 'imported'" href="#/search">Search</a>
47-
<a class="tree-nav_link disabled" ng-if="currentStatus != 'imported'">Search</a>
45+
<a ng-class="{'current': selectedView === 'search', 'disabled': currentStatus != 'imported'}" class="tree-nav_link" href="#/search">Search</a>
4846
</li>
4947
<li class="tree-nav_item">
50-
<a ng-class="{'current': selectedView === 'api'}" class="tree-nav_link" ng-if="currentStatus == 'imported'" href="#/api">Content API</a>
51-
<a class="tree-nav_link disabled" ng-if="currentStatus != 'imported'">Content API</a>
48+
<a ng-class="{'current': selectedView === 'api', 'disabled': currentStatus != 'imported'}" class="tree-nav_link" href="#/api">Content API</a>
5249
</li>
53-
<li class="tree-nav_item" ng-class="{'active':selectedView === 'settings'}">
54-
<a ng-class="{'current': selectedView === 'settings'}" class="tree-nav_link" href="#/settings">Settings</a>
50+
51+
<hr />
52+
53+
<li class="tree-nav_item">
54+
<a ng-class="{'current': selectedView === 'settings', 'disabled': currentStatus != 'imported'}" class="tree-nav_link" href="#/settings">Settings</a>
5555
</li>
56-
<li class="tree-nav_item" ng-class="{'active':selectedView === 'ingredients'}">
56+
<li class="tree-nav_item">
5757
<a ng-class="{'current': selectedView === 'ingredients'}" class="tree-nav_link" href="#/ingredients">Ingredients</a>
5858
</li>
5959
</ul>

‎views/templates/api.html

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,20 @@
11
<section class="layout_section theme_light">
22

3-
<h1 class="type_heading" id="toc_0"><mark class="type_mark">Content API</mark></h1>
3+
<h1 class="type_heading" id="toc_0"><mark class="type_mark">Content API</mark></h1>
44

5-
<p class="type_copy">You've just seen how the Simple Search Service can power a search engine, now you'll see how it can power content discovery. Here, the interface uses context from the page to query the service.</p>
5+
<p>Use the API to power content discovery.</p>
66

77
</section>
88

99
<section class="layout_section">
1010

11-
<div api-example ng-show="currentStatus == 'imported' && dbschema" apiExampleAction="apiExampleFacetSearch" apiExampleTitle="Faceted Search" apiExampleTemplate="apiexamplefacet.html"></div>
11+
<div ng-show="!currentStatus || currentStatus != 'imported'">
12+
<p class="type_copy">
13+
No data indexed.
14+
</p>
15+
<button type="button" class="button_primary" ng-click="goToNextPage('upload')">Back</button>
16+
</div>
1217

13-
<p class="type_copy">In your application, you may not want to present the results as a table. No problem, you can present the results however you see fit. <a class="type_link" href="https://console.ng.bluemix.net/data/discovery/fullservice/cloudant-nosql-db/resources" target="_blank">See the Resources tab in the Bluemix catalog</a> for an example.</p>
14-
15-
<button type="button" class="button_primary" ng-click="goToNextPage('settings')">Continue</button>
18+
<div api-example ng-show="currentStatus == 'imported' && dbschema" apiExampleAction="apiExampleFacetSearch" apiExampleTitle="Faceted Search" apiExampleTemplate="apiexamplefacet.html"></div>
1619

1720
</section>

‎views/templates/apiexamplefacet.html

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,4 +24,8 @@ <h2 class="type_heading"><mark class="type_mark">Using the API</mark></h2>
2424
<p class="type_copy">{{message ? message : 'The API is returning ' + apiExampleDocs.data.rows.length + ' of ' + apiExampleDocs.data.total_rows}} results. If you want to show more or less per API call, <a class="type_link" href="#/settings">set a new query limit</a>.</p>
2525
<!-- </div> -->
2626

27+
<p class="type_copy">
28+
In your application, you may not want to present the results as a table. No problem, you can present the results however you see fit. <a class="type_link" href="https://console.ng.bluemix.net/data/discovery/fullservice/cloudant-nosql-db/resources" target="_blank">See the Resources tab in the Bluemix catalog</a> for an example.
29+
</p>
30+
2731
</div>

‎views/templates/get.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
<h1 class="type_heading" id="toc_0"><mark class="type_mark">Get Data</mark></h1>
44

5-
<p class="type_copy">You have options.</p>
5+
<p>You have options.</p>
66

77
</section>
88

‎views/templates/import.html

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
<section class="layout_section theme_light">
22
<h1 class="type_heading"><mark class="type_mark">Create the Search Index</mark></h1>
33

4+
<p>Preview your data, and pick fields to facet.</p>
5+
46
<div ng-show="currentStatus == 'uploaded'">
57
<p class="type_copy">Here's a preview of your data. Make sure the data types are correct. (E.g., if you want to <code>facet</code> by a number, you'll need to change the data type from <code>number</code> to <code>string</code>.)</p>
68
<p class="type_copy"><strong>Pay extra attention to the Facet column.</strong> Check the checkbox next to those values you want to search by, and we'll automatically index those values as <code>counts</code> (i.e., <em>facets</em>).</p>
@@ -11,17 +13,24 @@ <h1 class="type_heading"><mark class="type_mark">Create the Search Index</mark><
1113

1214
<section class="layout_section">
1315

16+
<div ng-show="!currentStatus">
17+
<p class="type_copy">
18+
No data uploaded.
19+
</p>
20+
<button type="button" class="button_primary" ng-click="goToNextPage('upload')">Back</button>
21+
</div>
22+
23+
<div ng-show="currentStatus == 'new'">
24+
<p class="type_copy">Upload a comma separated values (CSV) or tab separated values (TSV) file.</p>
25+
</div>
26+
1427
<div ng-show="currentStatus == 'imported'" class="alert alert-success">
1528
<p class="type_copy">Your data was indexed successfully.</p>
1629
<div class="button_group">
1730
<button type="button" class="button_primary" ng-click="goToNextPage('search')"> Continue </button>
1831
</div>
1932
</div>
2033

21-
<div ng-show="!currentStatus || currentStatus == 'new'">
22-
<p class="type_copy">Upload a comma separated values (CSV) or tab separated values (TSV) file.</p>
23-
</div>
24-
2534
<div ng-show="currentStatus == 'uploaded'">
2635

2736
<div id="schemacontent" class="table_container"></div>

‎views/templates/search.html

Lines changed: 68 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,73 +1,85 @@
11
<section class="layout_section theme_light">
22
<h1 class="type_heading"><mark class="type_mark">Search</mark></h1>
3-
<p>
4-
Results delivered in {{searchDocs.time}} ms | <a class="type_copy type_link no_underline" role="button" ng-click="expandedtips = !expandedtips;toggle('searchTips')"> {{ expandedtips ? '&#9660;' : '&#9658;' }} Search tips</a>
5-
</p>
6-
7-
<ul class="type_copy collapsible" id="searchTips">
8-
<li>
9-
<code class="type_mark">*:*</code> will bring back everything you've indexed
10-
</li>
11-
<li>
12-
<code class="type_mark">[key]:'[value]'</code> will bring back results that match the <code class="type_mark">[key]</code> with the <code class="type_mark">[value]</code>; e.g., <code class="type_mark">town:'ashfield'</code>
13-
</li>
14-
<li>
15-
<code class="type_mark">[key1]:'[value1]' OR [key2]:'[value2]'</code> is the syntax for multiple matches.<br>
16-
Combine free text and faceted search like this: <code class="type_mark">willowbank AND [key]:'[value]'</code></li>
17-
</ul>
18-
19-
<form ng-submit="search()">
20-
<div class="form_field" id="searchcontrol">
21-
<div class="form_addon-group">
22-
<!-- <span class="form_text-addon">https://.../search?q=</span> -->
23-
<input type="text" class="input_text" id="q" placeholder="" name="searchterm" ng-model="querystring" ng-change="$root.searchdirty = querystring !== '*:*'">
24-
<span class="input_text-clear" ng-click="$root.searchdirty = false;clearSearch();" ng-show="$root.searchdirty">&times;</span>
25-
<button type="submit" class="button_primary search_button" ng-click="search()"> Search </button>
26-
</div>
27-
</div>
28-
</form>
29-
3+
<p>Free-text and faceted search.</p>
304
</section>
31-
<section class="layout_section theme_dark">
325

33-
<section class="tabbed-panel">
34-
<ul class="tabbed-panel_tab-group">
35-
<li class="tabbed-panel_tab" ng-class="{'current': currentSearchPanel === 'html'}" ng-click="currentSearchPanel = 'html'">HTML</li>
36-
<li class="tabbed-panel_tab" ng-class="{'current': currentSearchPanel === 'json'}" ng-click="currentSearchPanel = 'json'">JSON Preview</li>
37-
<li class="tabbed-panel_tab" ng-class="{'current': currentSearchPanel === 'rawjson'}" ng-click="currentSearchPanel = 'rawjson'">Raw JSON</li>
38-
</ul>
6+
<section class="layout_section theme_dark">
397

40-
<div id="viewashtml" class="tabbed-panel_panel theme_light" ng-if="currentSearchPanel == 'html'">
41-
<div preview-search-html></div>
8+
<div ng-show="!currentStatus || currentStatus != 'imported'">
9+
<p class="type_copy">
10+
No data indexed.
11+
</p>
12+
<button type="button" class="button_primary" ng-click="goToNextPage('upload')">Back</button>
4213
</div>
4314

44-
<div id="viewasjson" class="tabbed-panel_panel" ng-if="currentSearchPanel == 'json'">
15+
<div ng-show="currentStatus && currentStatus == 'imported'">
16+
<p>
17+
Results delivered in {{searchDocs.time}} ms | <a class="type_copy type_link no_underline" role="button" ng-click="expandedtips = !expandedtips;toggle('searchTips')"> {{ expandedtips ? '&#9660;' : '&#9658;' }} Search tips</a>
18+
</p>
4519

46-
<p class="type_copy">The <code>counts</code> and <code>rows</code> presented as JSON.</p>
20+
<ul class="type_copy collapsible" id="searchTips">
21+
<li>
22+
<code class="type_mark">*:*</code> will bring back everything you've indexed
23+
</li>
24+
<li>
25+
<code class="type_mark">[key]:'[value]'</code> will bring back results that match the <code class="type_mark">[key]</code> with the <code class="type_mark">[value]</code>; e.g., <code class="type_mark">town:'ashfield'</code>
26+
</li>
27+
<li>
28+
<code class="type_mark">[key1]:'[value1]' OR [key2]:'[value2]'</code> is the syntax for multiple matches.<br>
29+
Combine free text and faceted search like this: <code class="type_mark">willowbank AND [key]:'[value]'</code></li>
30+
</ul>
4731

48-
<div class="grid_row five-column">
49-
<div class="grid_column two">
50-
<h4>Facets <small>aka <code>counts</code></small></h4>
51-
<code class="type_codeblock" id="facets">{{ searchDocs.data.counts | json }}</code>
32+
<form ng-submit="search()">
33+
<div class="form_field" id="searchcontrol">
34+
<div class="form_addon-group">
35+
<!-- <span class="form_text-addon">https://.../search?q=</span> -->
36+
<input type="text" class="input_text" id="q" placeholder="" name="searchterm" ng-model="querystring" ng-change="$root.searchdirty = querystring !== '*:*'">
37+
<span class="input_text-clear" ng-click="$root.searchdirty = false;clearSearch();" ng-show="$root.searchdirty">&times;</span>
38+
<button type="submit" class="button_primary search_button" ng-click="search()"> Search </button>
39+
</div>
5240
</div>
53-
<div class="grid_column three">
54-
<h4>Rows <small ng-class="{'api-summary-message':message}" ng-show="searchDocs.data.total_rows >= 0">{{message ? message : 'Showing ' + searchDocs.data.rows.length + ' of ' + searchDocs.data.total_rows}}</small></h4>
55-
<code class="type_codeblock" id="documents">{{ searchDocs.data.rows | json }}</code>
41+
</form>
42+
43+
<section class="tabbed-panel">
44+
<ul class="tabbed-panel_tab-group">
45+
<li class="tabbed-panel_tab" ng-class="{'current': currentSearchPanel === 'html'}" ng-click="currentSearchPanel = 'html'">HTML</li>
46+
<li class="tabbed-panel_tab" ng-class="{'current': currentSearchPanel === 'json'}" ng-click="currentSearchPanel = 'json'">JSON Preview</li>
47+
<li class="tabbed-panel_tab" ng-class="{'current': currentSearchPanel === 'rawjson'}" ng-click="currentSearchPanel = 'rawjson'">Raw JSON</li>
48+
</ul>
49+
50+
<div id="viewashtml" class="tabbed-panel_panel theme_light" ng-if="currentSearchPanel == 'html'">
51+
<div preview-search-html></div>
5652
</div>
57-
</div>
5853

59-
</div>
54+
<div id="viewasjson" class="tabbed-panel_panel" ng-if="currentSearchPanel == 'json'">
6055

61-
<div id="viewAsRawJSON" class="tabbed-panel_panel" ng-if="currentSearchPanel == 'rawjson'">
62-
<p class="type_copy">The full JSON object returned by the service.
63-
</p>
64-
<code class="type_codeblock">{{ searchDocs.data | json }}</code>
65-
</div>
56+
<p class="type_copy">The <code>counts</code> and <code>rows</code> presented as JSON.</p>
6657

67-
</section>
58+
<div class="grid_row five-column">
59+
<div class="grid_column two">
60+
<h4>Facets <small>aka <code>counts</code></small></h4>
61+
<code class="type_codeblock" id="facets">{{ searchDocs.data.counts | json }}</code>
62+
</div>
63+
<div class="grid_column three">
64+
<h4>Rows <small ng-class="{'api-summary-message':message}" ng-show="searchDocs.data.total_rows >= 0">{{message ? message : 'Showing ' + searchDocs.data.rows.length + ' of ' + searchDocs.data.total_rows}}</small></h4>
65+
<code class="type_codeblock" id="documents">{{ searchDocs.data.rows | json }}</code>
66+
</div>
67+
</div>
6868

69+
</div>
70+
71+
<div id="viewAsRawJSON" class="tabbed-panel_panel" ng-if="currentSearchPanel == 'rawjson'">
72+
<p class="type_copy">The full JSON object returned by the service.
73+
</p>
74+
<code class="type_codeblock">{{ searchDocs.data | json }}</code>
75+
</div>
76+
77+
</section>
78+
79+
80+
<div class="button_group">
81+
<button type="button" class="button_primary" ng-click="goToNextPage('api')"> Continue </button>
82+
</div>
83+
</div>
6984

70-
<div class="button_group">
71-
<button type="button" class="button_primary" ng-click="goToNextPage('api')"> Continue </button>
72-
</div>
7385
</section>

‎views/templates/settings.html

Lines changed: 29 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -4,25 +4,34 @@ <h1 class="type_heading"><mark class="type_mark">Settings</mark></h1>
44

55
<section class="layout_section theme_dark">
66

7-
<div class="form_field">
8-
<label for="querylimit" class="form_label">Query limit</label>
9-
<input name="querylimit" type="number" class="input_text" min=1 ng-model="settings.querylimit" ng-change="dirty = true" required>
10-
<p id="helpBlock" class="type_copy">Sets the <code>limit</code> parameter on API calls.</p>
11-
</div>
12-
13-
<button id="savesettings" type="button" class="button_primary" ng-click="dirty = false;saveSettings();" ng-disabled="dirty != true || saving">{{ saving ? 'Saving...' : 'Save' }}</button>
14-
15-
16-
<hr>
17-
18-
<h2 class="type_heading"><mark class="type_mark">Delete data</mark></h2>
19-
<p class="type_copy">If you want to use this service to index different data, or to re-index the same data with different facets or data types, you can blow away your database, and the indexes, and start over again.</p>
20-
<button name="deletedata" class="button_primary" ng-click="showDeleteDialog()">Delete data</button>
21-
22-
<div id="deleteData" tabindex="-1" role="dialog" ng-if="deleteDialogShown">
23-
<p class="type_copy" id="deleteDataBody">Are you sure you want to delete all of your data?</p>
24-
<button type="button" class="button_secondary" data-dismiss="modal">Cancel</button>
25-
<button id="deletebutton" type="button" class="button_primary" ng-click="deleteEverything()">Delete All</button>
26-
</div>
7+
<div ng-show="!currentStatus || currentStatus != 'imported'">
8+
<p class="type_copy">
9+
No data indexed.
10+
</p>
11+
<button type="button" class="button_primary" ng-click="goToNextPage('upload')">Back</button>
12+
</div>
13+
14+
<div ng-show="currentStatus && currentStatus == 'imported'">
15+
<div class="form_field">
16+
<label for="querylimit" class="form_label">Query limit</label>
17+
<input name="querylimit" type="number" class="input_text" min=1 ng-model="settings.querylimit" ng-change="dirty = true" required>
18+
<p id="helpBlock" class="type_copy">Sets the <code>limit</code> parameter on API calls.</p>
19+
</div>
20+
21+
<button id="savesettings" type="button" class="button_primary" ng-click="dirty = false;saveSettings();" ng-disabled="dirty != true || saving">{{ saving ? 'Saving...' : 'Save' }}</button>
22+
23+
24+
<hr>
25+
26+
<h2 class="type_heading"><mark class="type_mark">Delete data</mark></h2>
27+
<p class="type_copy">If you want to use this service to index different data, or to re-index the same data with different facets or data types, you can blow away your database, and the indexes, and start over again.</p>
28+
<button name="deletedata" class="button_primary" ng-click="showDeleteDialog()">Delete data</button>
29+
30+
<div id="deleteData" tabindex="-1" role="dialog" ng-if="deleteDialogShown">
31+
<p class="type_copy" id="deleteDataBody">Are you sure you want to delete all of your data?</p>
32+
<button type="button" class="button_secondary" data-dismiss="modal">Cancel</button>
33+
<button id="deletebutton" type="button" class="button_primary" ng-click="deleteEverything()">Delete All</button>
34+
</div>
35+
</div>
2736

2837
</section>

0 commit comments

Comments
 (0)