Skip to content

Commit 35cd723

Browse files
bodom0015bodom0015
authored
Address SGCI Phase 2 Feedback (#324)
* Hide purple boxes on landing, consistent naming for signUp * Move "See Also" from Landing to the "Help" dropdown on the navbar * Adjust hint text, make list / card buttons slightly more obvious * Highlight "Add" button, show popup when copying to clipboard, hide source when not needed * Hide "Add Application" button on Dashboard view * Increase size of Loading/Refresh icon
1 parent 490795e commit 35cd723

File tree

5 files changed

+54
-44
lines changed

5 files changed

+54
-44
lines changed

‎dashboard/catalog/CatalogController.js

+11-2
Original file line numberDiff line numberDiff line change
@@ -22,9 +22,9 @@ angular
2222
* @author lambert8
2323
* @see https://opensource.ncsa.illinois.edu/confluence/display/~lambert8/3.%29+Controllers%2C+Scopes%2C+and+Partial+Views
2424
*/
25-
.controller('CatalogController', [ '$scope', '$filter', '$interval', '$uibModal', '$location', '$log', '_', 'Analytics', 'NdsLabsApi', 'Project', 'Stack', 'Stacks',
25+
.controller('CatalogController', [ '$scope', '$filter', '$interval', '$timeout', '$uibModal', '$location', '$log', '_', 'Analytics', 'NdsLabsApi', 'Project', 'Stack', 'Stacks',
2626
'StackService', 'Specs', 'clipboard', 'Vocabulary', 'RandomPassword', 'AuthInfo', 'ProductName', 'ApiUri', 'DashboardAppPath', 'HomePathSuffix', 'AdvancedFeatures',
27-
function($scope, $filter, $interval, $uibModal, $location, $log, _, Analytics, NdsLabsApi, Project, Stack, Stacks, StackService, Specs, clipboard, Vocabulary, RandomPassword, AuthInfo, ProductName, ApiUri, DashboardAppPath, HomePathSuffix, AdvancedFeatures) {
27+
function($scope, $filter, $interval, $timeout, $uibModal, $location, $log, _, Analytics, NdsLabsApi, Project, Stack, Stacks, StackService, Specs, clipboard, Vocabulary, RandomPassword, AuthInfo, ProductName, ApiUri, DashboardAppPath, HomePathSuffix, AdvancedFeatures) {
2828
"use strict";
2929

3030
$scope.showCreateSpec = AdvancedFeatures.showCreateSpec;
@@ -97,6 +97,12 @@ angular
9797
$scope.$watch(function () { return Project.project; }, function(newValue, oldValue) { projectId = newValue.namespace; });
9898
$scope.$watch('tags.selected', function(newValue, oldValue) { refilter($scope.specs, newValue); }, true);
9999

100+
$scope.showCopySuccess = false;
101+
$scope.displayCopySuccessAlert = function() {
102+
$scope.showCopySuccess = true;
103+
$timeout(function() { $scope.showCopySuccess = false; }, 3000);
104+
}
105+
100106
$scope.copyToClipboard = function(spec) {
101107
if (!clipboard.supported) {
102108
alert('Sorry, copy to clipboard is not supported');
@@ -131,6 +137,7 @@ angular
131137
})(specCopy); // jshint ignore:line
132138

133139
clipboard.copyText(JSON.stringify(specCopy, null, 4));
140+
$scope.displayCopySuccessAlert();
134141
};
135142

136143
var getQuickStartUrl = function(spec) {
@@ -148,6 +155,7 @@ angular
148155
console.log("Copying to clipboard:", quickstartUrl);
149156
clipboard.copyText(quickstartUrl);
150157
Analytics.trackEvent('application', 'share-url', spec.key, 1, true);
158+
$scope.displayCopySuccessAlert ();
151159
};
152160

153161
$scope.shareEmbed = function(spec) {
@@ -161,6 +169,7 @@ angular
161169
console.log("Copying to clipboard:", htmlString);
162170
clipboard.copyText(htmlString);
163171
Analytics.trackEvent('application', 'share-embed', spec.key, 1, true);
172+
$scope.displayCopySuccessAlert();
164173
};
165174

166175
$scope.cloneSpec = function(spec) {

‎dashboard/catalog/catalog.html

+19-12
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,11 @@ <h3>Applications</h3>
2828
</tags-input>
2929

3030
<div class="input-group-btn">
31-
<button id="toggleCardsBtn" type="button" class="btn btn-default" style="border-radius:0 !important;" ng-click="showCards = !showCards">
32-
<i id="viewAsIcon" class="fa fa-fw" ng-class="{ 'fa-table': showCards, 'fa-list': !showCards }"></i>
31+
<button id="toggleCardsBtnCards" type="button" class="btn" style="border-radius:0 !important;" ng-click="showCards = true" ng-class="{ 'btn-primary': showCards, 'btn-default': !showCards }">
32+
<i id="viewAsIcon" class="fa fa-fw fa-table"></i>
33+
</button>
34+
<button id="toggleCardsBtn" type="button" class="btn" style="border-radius:0 !important;" ng-click="showCards = false" ng-class="{ 'btn-default': showCards, 'btn-primary': !showCards }">
35+
<i id="viewAsIcon" class="fa fa-fw fa-list"></i>
3336
</button>
3437
</div>
3538
<div class="input-group-btn">
@@ -62,18 +65,22 @@ <h3>Applications</h3>
6265
No applications matched your search
6366
</p>
6467
<p class="text-center text-success" ng-show="(specs | display | showTags:tags.selected).length !== 0">
65-
Choose an application below to configure
68+
Choose an application below
6669
</p>
70+
71+
<div class="alert alert-success" role="alert" ng-if="showCopySuccess" style="position:fixed;z-index:2;top:10%;right:10%;width:35%">
72+
Text has been copied to your clipboard
73+
</div>
6774

6875
<!-- Table -->
6976
<table ng-if="!showCards" class="table table-hover table-striped" ng-hide="(specs | display | showTags:tags.selected).length === 0">
7077
<thead>
7178
<tr>
7279
<th width="20%"><label>Name</label></th>
73-
<th width="5%"><label>Source</label></th>
74-
<th width="40%"><label>Description</label></th>
75-
<th width="30%"></th>
76-
<th width="5%"></th>
80+
<th width="15%" ng-if="showCreateSpec || showImportSpec"><label>Source</label></th>
81+
<th><label>Description</label></th>
82+
<th></th>
83+
<th></th>
7784
</tr>
7885
</thead>
7986
<tbody>
@@ -82,8 +89,8 @@ <h3>Applications</h3>
8289
{{ spec.label }}
8390
</th>
8491

85-
<td>
86-
<i class="fa fa-fw" tooptip-placement="top-right" uib-tooltip="Source: {{ spec.catalog | capitalize }}" ng-class="{ 'fa-user': spec.catalog === 'user', 'fa-server': spec.catalog === 'system' }"></i>
92+
<td ng-if="showCreateSpec || showImportSpec">
93+
<i class="fa fa-fw" tooptip-placement="top-right" uib-tooltip="Source: {{ spec.catalog | capitalize }}" ng-class="{ 'fa-user': spec.catalog === 'user', 'fa-server': spec.catalog === 'system' }"></i> {{ spec.key }}
8794
</td>
8895

8996
<td>
@@ -164,7 +171,7 @@ <h4 class="media-heading">{{ spec.label }}</h4>
164171

165172
<!-- Tags -->
166173
<div class="row" style="margin:0;padding:0;">
167-
<small class="pull-right" uib-tooltip="Source: {{ spec.catalog | capitalize }}" tooltip-placement="left"><small><i class="fa fa-fw" ng-class="{ 'fa-user': spec.catalog === 'user', 'fa-server': spec.catalog === 'system' }"></i> {{ spec.key }}</small></small>
174+
<small ng-if="showCreateSpec || showImportSpec" class="pull-right" uib-tooltip="Source: {{ spec.catalog | capitalize }}" tooltip-placement="left"><small><i class="fa fa-fw" ng-class="{ 'fa-user': spec.catalog === 'user', 'fa-server': spec.catalog === 'system' }"></i> {{ spec.key }}</small></small>
168175
<div class="pull-left">
169176
<div class="text-center" style="padding:0;">
170177
<button id="tag{{ $index }}" style="padding:0 4px 0 4px;margin:0 4px 0 4px;" class="btn btn-xs btn-default"
@@ -200,8 +207,8 @@ <h4 class="media-heading">{{ spec.label }}</h4>
200207

201208
<!-- Install button -->
202209
<button id="addBtn" ng-disabled="installs[spec.key].progress > 0" ng-if="installs[spec.key].count === 0 && installs[spec.key].progress === 0" style="margin:7px;"
203-
class="btn btn-xs btn-link" ng-click="install(spec)">
204-
Add
210+
class="btn btn-xs btn-default" ng-click="install(spec)">
211+
<i class="fa fa-fw fa-plus"></i> Add
205212
</button>
206213
</div>
207214

‎dashboard/dashboard/dashboard.html

+13-19
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,29 @@
11
<!-- The Dashboard View -->
22
<section>
33
<div class="row">
4-
<div class="col-xs-8">
4+
<div class="col-xs-12">
55
<h3>{{ project.name }} Dashboard</h3>
66
</div>
7+
</div>
78

8-
<div class="col-xs-4">
9-
<div class="pull-right">
10-
<a id="addApplicationBtn" class="btn btn-xs btn-primary" href="/dashboard/store"
11-
ng-mouseenter="iconBounce = true" ng-mouseleave="iconBounce = false"
12-
uib-tooltip="Add an Application Instance" tooltip-placement="left">
13-
<i class="fa fa-fw fa-plus" ng-class="{ 'faa-bounce animated':iconBounce }"></i>
14-
</a>
15-
16-
<button id="refreshBtn" class="btn btn-default btn-xs" ng-click="autoRefresh.toggle()"
9+
<ol class="breadcrumb">
10+
<li><a href="/landing/">{{ productName }}</a></li>
11+
<li class="active">Dashboard</li>
12+
</ol>
13+
14+
<div class="row">
15+
<div class="col-sm-10">
16+
<p>This view shows the status of any applications that you have already added. To start an application, expand one below and then choose Launch.</p>
17+
</div>
18+
<div class="col-sm-2">
19+
<button id="refreshBtn" class="btn btn-default btn-sm pull-right" style="margin-top:-5px" ng-click="autoRefresh.toggle()"
1720
ng-class="{ 'btn-info':autoRefresh.interval !== null }"
1821
ng-mouseenter="iconSpin = true" ng-mouseleave="iconSpin = false"
1922
uib-tooltip="Refresh" tooltip-placement="left">
2023
<i class="fa fa-refresh fa-fw" ng-class="{ 'fa-spin':iconSpin || autoRefresh.interval !== null }"></i>
2124
</button>
22-
</div>
2325
</div>
2426
</div>
25-
26-
<ol class="breadcrumb">
27-
<li><a href="/landing/">{{ productName }}</a></li>
28-
<li class="active">Dashboard</li>
29-
</ol>
30-
31-
<p>This view shows the status of any applications that you have already added. To start an application, expand one below and then choose Launch.</p>
32-
3327
<!-- Applications Area -->
3428
<div class="row">
3529
<div class="col-sm-12 fill-height">

‎landing/landing.html

+10-10
Original file line numberDiff line numberDiff line change
@@ -23,21 +23,21 @@ <h1>Welcome to the {{ productName }}!</h1>
2323
</div>
2424

2525
<div class="row">
26-
<!-- Request Access Panel -->
27-
<div class="col-sm-5" ng-if="!auth.token">
26+
<!-- Sign Up Panel -->
27+
<!--div class="col-sm-5" ng-if="!auth.token">
2828
<div class="panel panel-primary" ng-if="!enableOAuth">
2929
<div class="panel-heading">
30-
<h3 class="panel-title">Request Access to {{ productName }}</h3>
30+
<h3 class="panel-title">Sign Up for {{ productName }}</h3>
3131
</div>
3232
<div class="panel-body">
33-
<p>For more about requesting access to {{ productName }}, click <a ng-href="{{ productUrl }}" target="_blank">here</a>!</p>
34-
<a id="signUpBtn" ng-href="/login/register{{ rd ? '?rd=' + rd : '' }}" class="btn btn-default">Request Access <i class="fa fa-fw fa-caret-right"></i></a>
33+
<p>For more about signing up for {{ productName }}, click <a ng-href="{{ productUrl }}" target="_blank">here</a>!</p>
34+
<a id="signUpBtn" ng-href="/login/register{{ rd ? '?rd=' + rd : '' }}" class="btn btn-default">Sign Up <i class="fa fa-fw fa-caret-right"></i></a>
3535
</div>
3636
</div>
37-
</div>
37+
</div-->
3838

3939
<!-- Sign In Panel -->
40-
<div class="col-sm-5" ng-if="!auth.token">
40+
<!--div class="col-sm-5" ng-if="!auth.token">
4141
<div class="panel panel-primary">
4242
<div class="panel-heading">
4343
<h3 class="panel-title">Already have an account?</h3>
@@ -47,7 +47,7 @@ <h3 class="panel-title">Already have an account?</h3>
4747
<a id="signInBtn" class="btn btn-default" ng-href="{{ signinLink }}">Sign in here <i class="fa fa-fw fa-caret-right"></i></a>
4848
</div>
4949
</div>
50-
</div>
50+
</div-->
5151

5252
<!-- Getting Started (walkthrough?) -->
5353
<div class="col-sm-10" ng-if="auth.token">
@@ -61,7 +61,7 @@ <h3 class="panel-title">Already have an account?</h3>
6161
</div>
6262

6363
<!-- Help Links -->
64-
<div class="col-sm-2">
64+
<!--div class="col-sm-2" ng-class="{ 'col-sm-offset-10': !auth.token }">
6565
<p>See Also:
6666
<ul class="fa-ul">
6767
<li ng-repeat="link in helpLinks"><i class="fa-li fa {{ link.icon }}"></i> <a ng-href="{{ link.url }}" id="helpLink{{$index}}" target="_blank">{{ link.name }}</a></li>
@@ -76,6 +76,6 @@ <h3 class="panel-title">Already have an account?</h3>
7676
<li><i class="fa-li fa fa-support"></i> <a href="/landing/contact" id="contactUsLink"> Contact Us</a></li>
7777
</ul>
7878
</p>
79-
</div>
79+
</div-->
8080
</div>
8181
</section>

‎shared/navbar/navbar.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@
4242
<!-- First, always draw our help links -->
4343
<li>
4444
<a id="helpDropdown" class="dropdown-toggle" data-toggle="dropdown">
45-
<i class="fa fa-fw fa-question-circle-o"></i> <span class="caret"></span>
45+
Help <span class="caret"></span>
4646
</a>
4747

4848
<ul class="dropdown-menu dropdown-menu-right" role="menu">

0 commit comments

Comments
 (0)