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

Address SGCI Phase 2 Feedback #324

Merged
merged 6 commits into from
Aug 5, 2020
Merged

Address SGCI Phase 2 Feedback #324

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
b51e09a
Hide purple boxes on landing, consistent naming for signUp
bodom0015 Jun 30, 2020
93f2702
Move "See Also" from Landing to the "Help" dropdown on the navbar
bodom0015 Jun 30, 2020
df7e405
Adjust hint text, make list / card buttons slightly more obvious
bodom0015 Jun 30, 2020
5c3af04
Highlight "Add" button, show popup when copying to clipboard, hide so…
bodom0015 Jun 30, 2020
892ba47
Hide "Add Application" button on Dashboard view
bodom0015 Jun 30, 2020
f0551ea
Increase size of Loading/Refresh icon
bodom0015 Jun 30, 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: 11 additions & 2 deletions gui/dashboard/catalog/CatalogController.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,9 @@ angular
* @author lambert8
* @see https://opensource.ncsa.illinois.edu/confluence/display/~lambert8/3.%29+Controllers%2C+Scopes%2C+and+Partial+Views
*/
.controller('CatalogController', [ '$scope', '$filter', '$interval', '$uibModal', '$location', '$log', '_', 'Analytics', 'NdsLabsApi', 'Project', 'Stack', 'Stacks',
.controller('CatalogController', [ '$scope', '$filter', '$interval', '$timeout', '$uibModal', '$location', '$log', '_', 'Analytics', 'NdsLabsApi', 'Project', 'Stack', 'Stacks',
'StackService', 'Specs', 'clipboard', 'Vocabulary', 'RandomPassword', 'AuthInfo', 'ProductName', 'ApiUri', 'DashboardAppPath', 'HomePathSuffix', 'AdvancedFeatures',
function($scope, $filter, $interval, $uibModal, $location, $log, _, Analytics, NdsLabsApi, Project, Stack, Stacks, StackService, Specs, clipboard, Vocabulary, RandomPassword, AuthInfo, ProductName, ApiUri, DashboardAppPath, HomePathSuffix, AdvancedFeatures) {
function($scope, $filter, $interval, $timeout, $uibModal, $location, $log, _, Analytics, NdsLabsApi, Project, Stack, Stacks, StackService, Specs, clipboard, Vocabulary, RandomPassword, AuthInfo, ProductName, ApiUri, DashboardAppPath, HomePathSuffix, AdvancedFeatures) {
"use strict";

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

$scope.showCopySuccess = false;
$scope.displayCopySuccessAlert = function() {
$scope.showCopySuccess = true;
$timeout(function() { $scope.showCopySuccess = false; }, 3000);
}

$scope.copyToClipboard = function(spec) {
if (!clipboard.supported) {
alert('Sorry, copy to clipboard is not supported');
Expand Down Expand Up @@ -131,6 +137,7 @@ angular
})(specCopy); // jshint ignore:line

clipboard.copyText(JSON.stringify(specCopy, null, 4));
$scope.displayCopySuccessAlert();
};

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

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

$scope.cloneSpec = function(spec) {
Expand Down
31 changes: 19 additions & 12 deletions gui/dashboard/catalog/catalog.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,11 @@ <h3>Applications</h3>
</tags-input>

<div class="input-group-btn">
<button id="toggleCardsBtn" type="button" class="btn btn-default" style="border-radius:0 !important;" ng-click="showCards = !showCards">
<i id="viewAsIcon" class="fa fa-fw" ng-class="{ 'fa-table': showCards, 'fa-list': !showCards }"></i>
<button id="toggleCardsBtnCards" type="button" class="btn" style="border-radius:0 !important;" ng-click="showCards = true" ng-class="{ 'btn-primary': showCards, 'btn-default': !showCards }">
<i id="viewAsIcon" class="fa fa-fw fa-table"></i>
</button>
<button id="toggleCardsBtn" type="button" class="btn" style="border-radius:0 !important;" ng-click="showCards = false" ng-class="{ 'btn-default': showCards, 'btn-primary': !showCards }">
<i id="viewAsIcon" class="fa fa-fw fa-list"></i>
</button>
</div>
<div class="input-group-btn">
Expand Down Expand Up @@ -62,18 +65,22 @@ <h3>Applications</h3>
No applications matched your search
</p>
<p class="text-center text-success" ng-show="(specs | display | showTags:tags.selected).length !== 0">
Choose an application below to configure
Choose an application below
</p>

<div class="alert alert-success" role="alert" ng-if="showCopySuccess" style="position:fixed;z-index:2;top:10%;right:10%;width:35%">
Text has been copied to your clipboard
</div>

<!-- Table -->
<table ng-if="!showCards" class="table table-hover table-striped" ng-hide="(specs | display | showTags:tags.selected).length === 0">
<thead>
<tr>
<th width="20%"><label>Name</label></th>
<th width="5%"><label>Source</label></th>
<th width="40%"><label>Description</label></th>
<th width="30%"></th>
<th width="5%"></th>
<th width="15%" ng-if="showCreateSpec || showImportSpec"><label>Source</label></th>
<th><label>Description</label></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
Expand All @@ -82,8 +89,8 @@ <h3>Applications</h3>
{{ spec.label }}
</th>

<td>
<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>
<td ng-if="showCreateSpec || showImportSpec">
<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 }}
</td>

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

<!-- Tags -->
<div class="row" style="margin:0;padding:0;">
<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>
<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>
<div class="pull-left">
<div class="text-center" style="padding:0;">
<button id="tag{{ $index }}" style="padding:0 4px 0 4px;margin:0 4px 0 4px;" class="btn btn-xs btn-default"
Expand Down Expand Up @@ -200,8 +207,8 @@ <h4 class="media-heading">{{ spec.label }}</h4>

<!-- Install button -->
<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;"
class="btn btn-xs btn-link" ng-click="install(spec)">
Add
class="btn btn-xs btn-default" ng-click="install(spec)">
<i class="fa fa-fw fa-plus"></i> Add
</button>
</div>

Expand Down
32 changes: 13 additions & 19 deletions gui/dashboard/dashboard/dashboard.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,35 +1,29 @@
<!-- The Dashboard View -->
<section>
<div class="row">
<div class="col-xs-8">
<div class="col-xs-12">
<h3>{{ project.name }} Dashboard</h3>
</div>
</div>

<div class="col-xs-4">
<div class="pull-right">
<a id="addApplicationBtn" class="btn btn-xs btn-primary" href="/dashboard/store"
ng-mouseenter="iconBounce = true" ng-mouseleave="iconBounce = false"
uib-tooltip="Add an Application Instance" tooltip-placement="left">
<i class="fa fa-fw fa-plus" ng-class="{ 'faa-bounce animated':iconBounce }"></i>
</a>

<button id="refreshBtn" class="btn btn-default btn-xs" ng-click="autoRefresh.toggle()"
<ol class="breadcrumb">
<li><a href="/landing/">{{ productName }}</a></li>
<li class="active">Dashboard</li>
</ol>

<div class="row">
<div class="col-sm-10">
<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>
</div>
<div class="col-sm-2">
<button id="refreshBtn" class="btn btn-default btn-sm pull-right" style="margin-top:-5px" ng-click="autoRefresh.toggle()"
ng-class="{ 'btn-info':autoRefresh.interval !== null }"
ng-mouseenter="iconSpin = true" ng-mouseleave="iconSpin = false"
uib-tooltip="Refresh" tooltip-placement="left">
<i class="fa fa-refresh fa-fw" ng-class="{ 'fa-spin':iconSpin || autoRefresh.interval !== null }"></i>
</button>
</div>
</div>
</div>

<ol class="breadcrumb">
<li><a href="/landing/">{{ productName }}</a></li>
<li class="active">Dashboard</li>
</ol>

<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>

<!-- Applications Area -->
<div class="row">
<div class="col-sm-12 fill-height">
Expand Down
20 changes: 10 additions & 10 deletions gui/landing/landing.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,21 +23,21 @@ <h1>Welcome to the {{ productName }}!</h1>
</div>

<div class="row">
<!-- Request Access Panel -->
<div class="col-sm-5" ng-if="!auth.token">
<!-- Sign Up Panel -->
<!--div class="col-sm-5" ng-if="!auth.token">
<div class="panel panel-primary" ng-if="!enableOAuth">
<div class="panel-heading">
<h3 class="panel-title">Request Access to {{ productName }}</h3>
<h3 class="panel-title">Sign Up for {{ productName }}</h3>
</div>
<div class="panel-body">
<p>For more about requesting access to {{ productName }}, click <a ng-href="{{ productUrl }}" target="_blank">here</a>!</p>
<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>
<p>For more about signing up for {{ productName }}, click <a ng-href="{{ productUrl }}" target="_blank">here</a>!</p>
<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>
</div>
</div>
</div>
</div-->

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

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

<!-- Help Links -->
<div class="col-sm-2">
<!--div class="col-sm-2" ng-class="{ 'col-sm-offset-10': !auth.token }">
<p>See Also:
<ul class="fa-ul">
<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>
Expand All @@ -76,6 +76,6 @@ <h3 class="panel-title">Already have an account?</h3>
<li><i class="fa-li fa fa-support"></i> <a href="/landing/contact" id="contactUsLink"> Contact Us</a></li>
</ul>
</p>
</div>
</div-->
</div>
</section>
2 changes: 1 addition & 1 deletion gui/shared/navbar/navbar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@
<!-- First, always draw our help links -->
<li>
<a id="helpDropdown" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-fw fa-question-circle-o"></i> <span class="caret"></span>
Help <span class="caret"></span>
</a>

<ul class="dropdown-menu dropdown-menu-right" role="menu">
Expand Down