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

Add new co-alert CSS styles and fix some other UI issues

Browse source
This commit is contained in:
Joseph Schorr 2015-04-03 17:47:39 -04:00
parent f46d9c88cf
commit 5ed900c9bc
7 changed files with 135 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

75
static/css/core-ui.css
View file

@ -960,3 +960,78 @@
margin-bottom: 10px;
}
.co-alert {
padding: 16px;
padding-left: 46px;
position: relative;
margin-bottom: 20px;
position: relative;
border: 1px solid #eee;
}
.co-alert.co-alert-success {
background: #F0FFF4;
}
.co-alert.co-alert-success:before {
font-family: FontAwesome;
content: "\f058";
position: absolute;
top: 11px;
left: 12px;
font-size: 22px;
color: #83D29C;
}
.co-alert.co-alert-info {
background: #F0FAFF;
}
.co-alert.co-alert-info:before {
font-family: FontAwesome;
content: "\f05a";
position: absolute;
top: 11px;
left: 12px;
font-size: 22px;
color: #83B7D2;
}
.co-alert.co-alert-warning {
background: #FFFBF0;
}
.co-alert.co-alert-warning:before {
font-family: FontAwesome;
content: "\f071";
position: absolute;
top: 11px;
left: 12px;
font-size: 22px;
color: #E4C212;
}
.co-alert.co-alert-danger {
background: #FFF0F0;
}
.co-alert.co-alert-danger:before {
font-family: core-icons;
content: "\f107";
position: absolute;
top: 11px;
left: 12px;
font-size: 22px;
color: red;
}
.co-alert.co-alert-danger:after {
font-family: FontAwesome;
content: "\f12a";
position: absolute;
top: 16px;
left: 20px;
font-size: 16px;
color: white;
z-index: 2;
}

35
static/css/directives/ui/convert-user-to-org.css Normal file
View file

@ -0,0 +1,35 @@
.convert-user-to-org .convert-form h3 {
margin-bottom: 20px;
}
.convert-user-to-org #convertForm {
max-width: 700px;
}
.convert-user-to-org #convertForm .form-group {
margin-bottom: 20px;
}
.convert-user-to-org #convertForm input {
margin-bottom: 10px;
margin-left: 20px;
}
.convert-user-to-org #convertForm .existing-data {
font-size: 16px;
font-weight: bold;
}
.convert-user-to-org #convertForm .description {
margin-top: 10px;
display: block;
color: #888;
font-size: 12px;
margin-left: 20px;
}
.convert-user-to-org #convertForm .existing-data {
display: block;
padding-left: 20px;
margin-top: 10px;
}

8
static/directives/convert-user-to-org.html
View file

@ -2,7 +2,7 @@
<!-- Step 0 -->
<div class="panel" ng-show="convertStep == 0">
<div class="panel-body" ng-show="user.organizations.length > 0">
<div class="alert alert-info">
<div class="co-alert co-alert-info">
Cannot convert this account into an organization, as it is a member of {{user.organizations.length}} other
organization{{user.organizations.length > 1 ? 's' : ''}}. Please leave
{{user.organizations.length > 1 ? 'those organizations' : 'that organization'}} first.
@ -10,7 +10,7 @@
</div>
<div class="panel-body" ng-show="user.organizations.length == 0">
<div class="alert alert-warning">
<div class="co-alert co-alert-warning">
Note: Converting a user account into an organization <b>cannot be undone</b>
</div>
@ -20,8 +20,6 @@
<!-- Step 1 -->
<div class="convert-form" ng-show="convertStep == 1">
<h3>Convert to organization</h3>
<form method="post" name="convertForm" id="convertForm" ng-submit="convertToOrg()">
<div class="form-group">
<label for="orgName">Organization Name</label>
@ -88,7 +86,7 @@
<h4 class="modal-title">Convert to organization?</h4>
</div>
<div class="modal-body">
<div class="alert alert-danger">You will not be able to login to this account once converted</div>
<div class="co-alert co-alert-danger">You will not be able to login to this account once converted!</div>
<div>Are you <b>absolutely sure</b> you would like to convert this account to an organization? Once done, there is no going back.</div>
</div>
<div class="modal-footer">

8
static/directives/plan-manager.html
View file

@ -3,23 +3,23 @@
<div class="quay-spinner 3x" ng-show="planLoading"></div>
<!-- Alerts -->
<div class="alert alert-danger" ng-show="limit == 'over' && !planLoading">
<div class="co-alert co-alert-danger" ng-show="limit == 'over' && !planLoading">
You are using more private repositories than your plan allows. Please
upgrade your subscription to avoid disruptions in your <span ng-show="organization">organization's</span> service.
</div>
<div class="alert alert-warning" ng-show="limit == 'at' && !planLoading">
<div class="co-alert co-alert-warning" ng-show="limit == 'at' && !planLoading">
You are at your current plan's number of allowed private repositories. It might be time to think about
upgrading your subscription to avoid future disruptions in your <span ng-show="organization">organization's</span> service.
</div>
<div class="alert alert-success" ng-show="limit == 'near' && !planLoading">
<div class="co-alert co-alert-info" ng-show="limit == 'near' && !planLoading">
You are nearing the number of allowed private repositories. It might be time to think about
upgrading your subscription to avoid future disruptions in your <span ng-show="organization">organization's</span> service.
</div>
<!-- Trial info -->
<div class="alert alert-success" ng-show="subscription.trialEnd != null" style="font-size: 125%">
<div class="co-alert co-alert-success" ng-show="subscription.trialEnd != null" style="font-size: 125%">
Free trial until <strong>{{ parseDate(subscription.trialEnd) | date }}</strong>
</div>

10
static/directives/plans-table.html
View file

@ -16,12 +16,12 @@
</ul>
<div class="hidden-xs">
<table class="table table-hover plans-table-table" ng-show="plans">
<table class="co-table plans-table-table" ng-show="plans">
<thead>
<th>Plan</th>
<th>Private Repositories</th>
<th style="min-width: 85px">Price</th>
<th></th>
<td>Plan</td>
<td>Private Repositories</td>
<td style="min-width: 85px">Price</td>
<td></td>
</thead>
<tr ng-repeat="plan in plans" ng-class="currentPlan == plan ? 'active' : ''">

8
static/directives/repo-view/repo-panel-settings.html
View file

@ -49,11 +49,15 @@
<!-- Delete Repository -->
<div class="panel-body panel-section">
<div>Deleting a repository <b>cannot be undone</b>. Here be dragons!</div>
<button class="btn btn-danger" ng-click="askDelete()">
<div class="co-alert co-alert-danger">
<button class="btn btn-danger" style="float: right; margin-top: -7px;"
ng-click="askDelete()">
<i class="fa fa-trash"></i>
Delete Repository
</button>
Deleting a repository <b>cannot be undone</b>. Here be dragons!
</div>
</div>
<!-- Build Status Badge -->

8
static/partials/user-view.html
View file

@ -95,7 +95,7 @@
<div class="co-panel-heading"><i class="fa fa-envelope-o"></i> E-mail Address</div>
<div class="panel-body" style="padding-top: 5px;">
<div class="alert alert-success" ng-show="changeEmailInfo.state == 'sent'">
<div class="co-alert co-alert-success" ng-show="changeEmailInfo.state == 'sent'">
An e-mail has been sent to {{ sentEmail }} to verify the change.
</div>
@ -145,11 +145,11 @@
<div class="panel-title">Generate Encrypted Password</div>
<div class="panel-body">
<div class="alert alert-info" ng-if="!Features.REQUIRE_ENCRYPTED_BASIC_AUTH">
<div class="co-alert co-alert-info" ng-if="!Features.REQUIRE_ENCRYPTED_BASIC_AUTH">
Due to Docker storing passwords entered on the command line in <strong>plaintext</strong>, it is highly recommended to use the button below to generate an an encrypted version of your password.
</div>
<div class="alert alert-warning" ng-if="Features.REQUIRE_ENCRYPTED_BASIC_AUTH">
<div class="co-alert co-alert-warning" ng-if="Features.REQUIRE_ENCRYPTED_BASIC_AUTH">
This installation is set to <strong>require</strong> encrypted passwords when
using the Docker command line interface. To generate an encrypted password, click the button below.
</div>
@ -171,7 +171,7 @@
</span>
<div class="panel-body">
<div class="alert alert-warning">Note: Changing your password will also invalidate any generated encrypted passwords.</div>
<div class="co-alert co-alert-warning">Note: Changing your password will also invalidate any generated encrypted passwords.</div>
<form class="form-change col-md-6" id="changePasswordForm" name="changePasswordForm" ng-submit="changePassword(); changePasswordForm.$setPristine()"