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; 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 --> <!-- Step 0 -->
<div class="panel" ng-show="convertStep == 0"> <div class="panel" ng-show="convertStep == 0">
<div class="panel-body" ng-show="user.organizations.length > 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 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 organization{{user.organizations.length > 1 ? 's' : ''}}. Please leave
{{user.organizations.length > 1 ? 'those organizations' : 'that organization'}} first. {{user.organizations.length > 1 ? 'those organizations' : 'that organization'}} first.
@ -10,7 +10,7 @@
</div> </div>
<div class="panel-body" ng-show="user.organizations.length == 0"> <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> Note: Converting a user account into an organization <b>cannot be undone</b>
</div> </div>
@ -20,8 +20,6 @@
<!-- Step 1 --> <!-- Step 1 -->
<div class="convert-form" ng-show="convertStep == 1"> <div class="convert-form" ng-show="convertStep == 1">
<h3>Convert to organization</h3>
<form method="post" name="convertForm" id="convertForm" ng-submit="convertToOrg()"> <form method="post" name="convertForm" id="convertForm" ng-submit="convertToOrg()">
<div class="form-group"> <div class="form-group">
<label for="orgName">Organization Name</label> <label for="orgName">Organization Name</label>
@ -88,7 +86,7 @@
<h4 class="modal-title">Convert to organization?</h4> <h4 class="modal-title">Convert to organization?</h4>
</div> </div>
<div class="modal-body"> <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>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>
<div class="modal-footer"> <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> <div class="quay-spinner 3x" ng-show="planLoading"></div>
<!-- Alerts --> <!-- 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 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. upgrade your subscription to avoid disruptions in your <span ng-show="organization">organization's</span> service.
</div> </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 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. upgrading your subscription to avoid future disruptions in your <span ng-show="organization">organization's</span> service.
</div> </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 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. upgrading your subscription to avoid future disruptions in your <span ng-show="organization">organization's</span> service.
</div> </div>
<!-- Trial info --> <!-- 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> Free trial until <strong>{{ parseDate(subscription.trialEnd) | date }}</strong>
</div> </div>

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

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

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

@ -49,11 +49,15 @@
<!-- Delete Repository --> <!-- Delete Repository -->
<div class="panel-body panel-section"> <div class="panel-body panel-section">
<div>Deleting a repository <b>cannot be undone</b>. Here be dragons!</div> <div class="co-alert co-alert-danger">
<button class="btn btn-danger" ng-click="askDelete()"> <button class="btn btn-danger" style="float: right; margin-top: -7px;"
<i class="fa fa-trash"></i> ng-click="askDelete()">
Delete Repository <i class="fa fa-trash"></i>
</button> Delete Repository
</button>
Deleting a repository <b>cannot be undone</b>. Here be dragons!
</div>
</div> </div>
<!-- Build Status Badge --> <!-- 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="co-panel-heading"><i class="fa fa-envelope-o"></i> E-mail Address</div>
<div class="panel-body" style="padding-top: 5px;"> <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. An e-mail has been sent to {{ sentEmail }} to verify the change.
</div> </div>
@ -145,11 +145,11 @@
<div class="panel-title">Generate Encrypted Password</div> <div class="panel-title">Generate Encrypted Password</div>
<div class="panel-body"> <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. 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>
<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 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. using the Docker command line interface. To generate an encrypted password, click the button below.
</div> </div>
@ -171,7 +171,7 @@
</span> </span>
<div class="panel-body"> <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()" <form class="form-change col-md-6" id="changePasswordForm" name="changePasswordForm" ng-submit="changePassword(); changePasswordForm.$setPristine()"