vbatts/quay
Archived
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Better UX for indicating upgrade is necessary to users

Browse source
This commit is contained in:
Joseph Schorr 2017-04-04 16:15:33 -04:00
parent 1243350d30
commit 30d5f2a138
3 changed files with 59 additions and 86 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
static/css/directives/ui/repo-count-checker.css
View file

@ -1,26 +1,3 @@
.repo-count-checker .btn {
margin-top: 0px !important;
}
.repo-count-checker .co-alert { .repo-count-checker .co-alert {
margin-bottom: 6px !important; margin-bottom: 16px;
padding-right: 120px;
} }
.repo-count-checker .co-alert .btn {
position: absolute;
top: 10px;
right: 10px;
}
@media (max-width: 767px) {
.repo-count-checker .co-alert {
padding-right: 10px;
}
.repo-count-checker .co-alert .btn {
position: relative;
margin-top: 20px;
margin-bottom: 10px;
}
}

14
static/directives/repo-count-checker.html
View file

@ -1,17 +1,13 @@
<div class="repo-count-checker-element"> <div class="repo-count-checker-element">
<div class="required-plan" ng-show="isEnabled && planRequired && planRequired.title"> <div class="required-plan" ng-show="isEnabled && planRequired && planRequired.title">
<div class="co-alert co-alert-info"> <div class="co-alert co-alert-warning thin">
In order to make this repository private under In order to make this repository private under
<strong ng-if="isUserNamespace">your personal namespace</strong> <strong ng-if="isUserNamespace">your personal namespace</strong>
<strong ng-if="!isUserNamespace">organization <b>{{ repo.namespace }}</b></strong>, you will need to upgrade your plan to <strong ng-if="!isUserNamespace">{{ namespace }}</strong>, you will need to upgrade the namespace's plan to at least a
<b style="border-bottom: 1px dotted black;" data-html="true" <b style="border-bottom: 1px dotted black; cursor: default" data-html="true"
data-title="{{ '<b>' + planRequired.title + '</b><br>' + planRequired.privateRepos + ' private repositories' }}" bs-tooltip> data-title="{{ '<b>' + planRequired.title + '</b><br>' + planRequired.privateRepos + ' private repositories' }}" bs-tooltip>{{ planRequired.title }}</b> plan.
{{ planRequired.title }}
</b>.
This will cost $<span>{{ planRequired.price / 100 }}</span>/month.
<a class="btn btn-primary" ng-click="upgradePlan()" ng-show="!planChanging">Upgrade now</a>
</div> </div>
<span ng-if="isUserNamespace && user.organizations.length == 1" style="margin-left: 6px; display: inline-block;">or did you mean to have this repository under the <b>{{ user.organizations[0].name }}</b> namespace?</span> <a class="btn btn-primary" ng-click="upgradePlan()" ng-show="!planChanging">Upgrade {{ namespace }} to {{ planRequired.title }}</a>
<div class="cor-loader-inline" ng-show="planChanging"></div> <div class="cor-loader-inline" ng-show="planChanging"></div>
</div> </div>
<div class="cor-loader-inline" ng-show="isEnabled && checkingPlan"></div> <div class="cor-loader-inline" ng-show="isEnabled && checkingPlan"></div>

106
static/partials/new-repo.html
View file

@ -97,75 +97,75 @@
</div> </div>
</div> </div>
<div class="row" ng-show="Features.BUILD_SUPPORT"> <div ng-show="repo.is_public == '1' || (!planRequired && !checkingPlan)">
<div class="row" ng-show="Features.BUILD_SUPPORT">
<div class="col-md-12">
<div class="section">
<div class="section-title">Initialize repository</div>
<div class="col-md-12"> <div style="padding-top: 10px;">
<div class="section"> <!-- Empty -->
<div class="section-title">Initialize repository</div> <div class="repo-option">
<input type="radio" id="initEmpty" name="initialize" ng-model="repo.initialize" value="">
<i class="fa fa-hdd-o fa-lg" style="padding: 6px; padding-left: 8px; padding-right: 6px;"></i>
<label for="initEmpty" style="color: #aaa;">(Empty repository)</label>
</div>
<div style="padding-top: 10px;"> <!-- Dockerfile -->
<!-- Empty --> <div class="repo-option">
<div class="repo-option"> <input type="radio" id="initDockerfile" name="initialize" ng-model="repo.initialize" value="dockerfile">
<input type="radio" id="initEmpty" name="initialize" ng-model="repo.initialize" value=""> <i class="fa fa-file fa-lg" style="padding: 6px; padding-left: 10px; padding-right: 8px;"></i>
<i class="fa fa-hdd-o fa-lg" style="padding: 6px; padding-left: 8px; padding-right: 6px;"></i> <label for="initDockerfile">Initialize from a <b>Dockerfile</b></label>
<label for="initEmpty" style="color: #aaa;">(Empty repository)</label> </div>
</div>
<!-- Dockerfile --> <!-- SCM -->
<div class="repo-option"> <div class="repo-option"
<input type="radio" id="initDockerfile" name="initialize" ng-model="repo.initialize" value="dockerfile"> ng-repeat="type in TriggerService.getTypes()"
<i class="fa fa-file fa-lg" style="padding: 6px; padding-left: 10px; padding-right: 8px;"></i> ng-if="TriggerService.isEnabled(type)">
<label for="initDockerfile">Initialize from a <b>Dockerfile</b></label> <input type="radio" id="init{{type}}" name="initialize" ng-model="repo.initialize" value="{{ type }}">
</div> <i class="fa fa-lg" ng-class="TriggerService.getIcon(type)"
style="padding: 6px; padding-left: 10px; padding-right: 12px;"></i>
<!-- SCM --> <label for="init{{type}}">Link to a {{ TriggerService.getTitle(type) }}</label>
<div class="repo-option" </div>
ng-repeat="type in TriggerService.getTypes()"
ng-if="TriggerService.isEnabled(type)">
<input type="radio" id="init{{type}}" name="initialize" ng-model="repo.initialize" value="{{ type }}">
<i class="fa fa-lg" ng-class="TriggerService.getIcon(type)"
style="padding: 6px; padding-left: 10px; padding-right: 12px;"></i>
<label for="init{{type}}">Link to a {{ TriggerService.getTitle(type) }}</label>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="row" ng-show="repo.initialize == 'dockerfile' || repo.initialize == 'zipfile'"> <div class="row" ng-show="repo.initialize == 'dockerfile' || repo.initialize == 'zipfile'">
<div class="col-md-12"> <div class="col-md-12">
<div class="section"> <div class="section">
<div class="section-title">Initialize from Dockerfile</div> <div class="section-title">Initialize from Dockerfile</div>
<div style="padding-top: 20px;"> <div style="padding-top: 20px;">
<div class="initialize-repo"> <div class="initialize-repo">
<div class="dockerfile-build-form" repository="repo || createdForBuild" <div class="dockerfile-build-form" repository="repo || createdForBuild"
is-ready="hasDockerfile" is-ready="hasDockerfile"
ready-for-build="readyForBuild(startBuild)"></div> ready-for-build="readyForBuild(startBuild)"></div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="row" <div class="row"
ng-repeat="type in TriggerService.getTypes()" ng-repeat="type in TriggerService.getTypes()"
ng-if="TriggerService.isEnabled(type) && repo.initialize == type"> ng-if="TriggerService.isEnabled(type) && repo.initialize == type">
<div class="col-md-12"> <div class="col-md-12">
<div class="co-alert co-alert-info"> <div class="co-alert co-alert-info">
You will be redirected to authorize for {{ TriggerService.getTitle(type) }} once the repository has been created You will be redirected to authorize for {{ TriggerService.getTitle(type) }} once the repository has been created
</div>
</div> </div>
</div> </div>
</div>
<div class="row"> <div class="row">
<div class="col-md-12">
<div class="col-md-12"> <button class="btn btn-large btn-primary" type="submit"
<button class="btn btn-large btn-primary" type="submit" ng-disabled="buildStarted || newRepoForm.$invalid || (repo.is_public == '0' && (planRequired || checkingPlan)) || ((repo.initialize == 'dockerfile' || repo.initialize == 'zipfile') && !hasDockerfile)">
ng-disabled="buildStarted || newRepoForm.$invalid || (repo.is_public == '0' && (planRequired || checkingPlan)) || ((repo.initialize == 'dockerfile' || repo.initialize == 'zipfile') && !hasDockerfile)"> <i class="fa fa-large" ng-class="repo.is_public == '1' ? 'fa-unlock' : 'fa-lock'"
<i class="fa fa-large" ng-class="repo.is_public == '1' ? 'fa-unlock' : 'fa-lock'" style="margin-right: 4px"></i>
style="margin-right: 4px"></i> Create {{ repo.is_public == '1' ? 'Public' : 'Private' }} Repository
Create {{ repo.is_public == '1' ? 'Public' : 'Private' }} Repository </button>
</button> </div>
</div> </div>
</div> </div>