Merge pull request #1853 from iminoso/skeleton-experiment

Add skeleton experiment for new repo page
This commit is contained in:
Ian Minoso 2016-09-20 18:25:50 -04:00 committed by GitHub
commit 502fa23d31
5 changed files with 127 additions and 85 deletions

View file

@ -204,6 +204,9 @@ quayApp.config(['$routeProvider', '$locationProvider', 'pages', function($routeP
// Enterprise marketing page // Enterprise marketing page
.route('/enterprise', 'enterprise') .route('/enterprise', 'enterprise')
// Public Repo Experiments
.route('/__exp/publicRepo', 'public-repo-exp')
// Default: Redirect to the landing page // Default: Redirect to the landing page
.otherwise({redirectTo: '/'}); .otherwise({redirectTo: '/'});
}]); }]);

View file

@ -0,0 +1,19 @@
(function() {
/**
* Experiment enable new public repo
*/
angular.module('quayPages').config(['pages', function(pages) {
pages.create('public-repo-exp', 'public-repo-exp.html', ExpCtrl, {
'newLayout': true
});
}]);
function ExpCtrl($scope, CookieService) {
$scope.isEnabled = CookieService.get('quay.public-repo-exp') == 'true';
$scope.setEnabled = function(value) {
$scope.isEnabled = value;
CookieService.putPermanent('quay.public-repo-exp', value.toString());
};
}
}());

View file

@ -7,10 +7,10 @@
'newLayout': true, 'newLayout': true,
'title': '{{ namespace }}/{{ name }}', 'title': '{{ namespace }}/{{ name }}',
'description': 'Repository {{ namespace }}/{{ name }}' 'description': 'Repository {{ namespace }}/{{ name }}'
}) });
}]); }]);
function RepoViewCtrl($scope, $routeParams, $location, $timeout, ApiService, UserService, AngularPollChannel, ImageLoaderService) { function RepoViewCtrl($scope, $routeParams, $location, $timeout, ApiService, UserService, AngularPollChannel, ImageLoaderService, CookieService) {
$scope.namespace = $routeParams.namespace; $scope.namespace = $routeParams.namespace;
$scope.name = $routeParams.name; $scope.name = $routeParams.name;
@ -60,6 +60,10 @@
$scope.repositoryResource = ApiService.getRepoAsResource(params).get(function(repo) { $scope.repositoryResource = ApiService.getRepoAsResource(params).get(function(repo) {
$scope.repository = repo; $scope.repository = repo;
$scope.viewScope.repository = repo; $scope.viewScope.repository = repo;
$scope.publicRepoExperiment = CookieService.get('quay.public-repo-exp') == 'true';
// Flag for new repo page experiment
$scope.newRepoExperiment = $scope.repository.is_public && $scope.user.username != $scope.repository.namespace && $scope.publicRepoExperiment;
// Load the remainder of the data async, so we don't block the initial view from // Load the remainder of the data async, so we don't block the initial view from
// showing. // showing.

View file

@ -0,0 +1,10 @@
<div class="page-content">
<div class="cor-title">
<span class="cor-title-link"></span>
<span class="cor-title-content">Experiment: New Public Repo Page Layout</span>
</div>
<div class="co-main-content-panel">
<button class="btn btn-success" ng-if="!isEnabled" ng-click="setEnabled(true)">Enable Experiment</button>
<button class="btn btn-failure" ng-if="isEnabled" ng-click="setEnabled(false)">Disable Experiment</button>
</div>
</div>

View file

@ -2,102 +2,108 @@
resource="repositoryResource" resource="repositoryResource"
error-message="'Repository not found'"> error-message="'Repository not found'">
<div class="page-content"> <div class="page-content">
<div class="cor-title"> <!-- New Public Repo Page experiment -->
<span class="cor-title-link"> <div ng-if="newRepoExperiment">
<a class="back-link" href="/repository">
Repositories
</a>
</span>
<span class="cor-title-content">
<span class="repo-circle no-background hidden-xs" repo="viewScope.repository"></span>
{{ namespace }} / {{ name }}
<span class="repo-star hidden-xs" repository="viewScope.repository" ng-if="!user.anonymous"></span>
</span>
</div> </div>
<!-- Old Repo Page -->
<div class="cor-tab-panel"> <div ng-if="!newRepoExperiment">
<div class="cor-tabs"> <div class="cor-title">
<span class="cor-tab" tab-active="true" tab-title="Information" tab-target="#info" <span class="cor-title-link">
tab-init="showInfo()"> <a class="back-link" href="/repository">
<i class="fa fa-info-circle"></i> Repositories
</a>
</span> </span>
<span class="cor-title-content">
<span class="cor-tab" tab-title="Tags" tab-target="#tags" id="tagsTab" <span class="repo-circle no-background hidden-xs" repo="viewScope.repository"></span>
tab-init="showTags()"> {{ namespace }} / {{ name }}
<i class="fa fa-tags"></i> <span class="repo-star hidden-xs" repository="viewScope.repository" ng-if="!user.anonymous"></span>
</span> </span>
</div>
<span class="cor-tab" tab-title="Builds" tab-target="#builds" id="buildsTab" <div class="cor-tab-panel">
tab-init="showBuilds()" <div class="cor-tabs">
quay-show="viewScope.repository.can_write && Features.BUILD_SUPPORT"> <span class="cor-tab" tab-active="true" tab-title="Information" tab-target="#info"
<i class="fa fa-tasks"></i> tab-init="showInfo()">
</span> <i class="fa fa-info-circle"></i>
</span>
<span class="cor-tab" tab-title="Visualize" tab-target="#changes" <span class="cor-tab" tab-title="Tags" tab-target="#tags" id="tagsTab"
tab-shown="handleChangesState(true)" tab-init="showTags()">
tab-hidden="handleChangesState(false)"> <i class="fa fa-tags"></i>
<i class="fa fa-code-fork"></i> </span>
</span>
<!-- Admin Only Tabs --> <span class="cor-tab" tab-title="Builds" tab-target="#builds" id="buildsTab"
<span class="cor-tab" tab-title="Usage Logs" tab-target="#logs" tab-init="showLogs()" tab-init="showBuilds()"
ng-show="viewScope.repository.can_admin"> quay-show="viewScope.repository.can_write && Features.BUILD_SUPPORT">
<i class="fa fa-bar-chart"></i> <i class="fa fa-tasks"></i>
</span> </span>
<span class="cor-tab" tab-title="Settings" tab-target="#settings" id="settingsTab" <span class="cor-tab" tab-title="Visualize" tab-target="#changes"
tab-init="showSettings()" tab-shown="handleChangesState(true)"
ng-show="viewScope.repository.can_admin"> tab-hidden="handleChangesState(false)">
<i class="fa fa-gear"></i> <i class="fa fa-code-fork"></i>
</span> </span>
</div> <!-- /cor-tabs -->
<div class="cor-tab-content"> <!-- Admin Only Tabs -->
<!-- Information --> <span class="cor-tab" tab-title="Usage Logs" tab-target="#logs" tab-init="showLogs()"
<div id="info" class="tab-pane active"> ng-show="viewScope.repository.can_admin">
<div class="repo-panel-info" <i class="fa fa-bar-chart"></i>
repository="viewScope.repository" </span>
builds="viewScope.builds"
is-enabled="infoShown"></div>
</div>
<!-- Tags --> <span class="cor-tab" tab-title="Settings" tab-target="#settings" id="settingsTab"
<div id="tags" class="tab-pane"> tab-init="showSettings()"
<div class="repo-panel-tags" ng-show="viewScope.repository.can_admin">
repository="viewScope.repository" <i class="fa fa-gear"></i>
image-loader="viewScope.imageLoader" </span>
selected-tags="viewScope.selectedTags" </div> <!-- /cor-tabs -->
is-enabled="tagsShown"></div>
</div>
<!-- Builds --> <div class="cor-tab-content">
<div id="builds" class="tab-pane"> <!-- Information -->
<div class="repo-panel-builds" <div id="info" class="tab-pane active">
repository="viewScope.repository" <div class="repo-panel-info"
builds="viewScope.builds" repository="viewScope.repository"
is-enabled="buildsShown"></div> builds="viewScope.builds"
</div> is-enabled="infoShown"></div>
</div>
<!-- Changes --> <!-- Tags -->
<div id="changes" class="tab-pane"> <div id="tags" class="tab-pane">
<div class="repo-panel-changes" <div class="repo-panel-tags"
repository="viewScope.repository" repository="viewScope.repository"
image-loader="viewScope.imageLoader" image-loader="viewScope.imageLoader"
selected-tags="viewScope.selectedTags" selected-tags="viewScope.selectedTags"
is-enabled="viewScope.changesVisible"></div> is-enabled="tagsShown"></div>
</div> </div>
<!-- Usage Logs --> <!-- Builds -->
<div id="logs" class="tab-pane" ng-if="viewScope.repository.can_admin"> <div id="builds" class="tab-pane">
<div class="logs-view" repository="viewScope.repository" makevisible="logsShown"></div> <div class="repo-panel-builds"
</div> repository="viewScope.repository"
builds="viewScope.builds"
is-enabled="buildsShown"></div>
</div>
<!-- Settings --> <!-- Changes -->
<div id="settings" class="tab-pane" ng-if="viewScope.repository.can_admin"> <div id="changes" class="tab-pane">
<div class="repo-panel-settings" repository="viewScope.repository" <div class="repo-panel-changes"
is-enabled="settingsShown"></div> repository="viewScope.repository"
</div> image-loader="viewScope.imageLoader"
</div> <!-- /cor-tab-content --> selected-tags="viewScope.selectedTags"
is-enabled="viewScope.changesVisible"></div>
</div>
<!-- Usage Logs -->
<div id="logs" class="tab-pane" ng-if="viewScope.repository.can_admin">
<div class="logs-view" repository="viewScope.repository" makevisible="logsShown"></div>
</div>
<!-- Settings -->
<div id="settings" class="tab-pane" ng-if="viewScope.repository.can_admin">
<div class="repo-panel-settings" repository="viewScope.repository"
is-enabled="settingsShown"></div>
</div>
</div> <!-- /cor-tab-content -->
</div>
</div> </div>
</div> </div>
</div> </div>