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

Some UI improvements

Browse source
This commit is contained in:
Joseph Schorr 2014-12-26 19:18:00 -05:00
parent 1142b1bc18
commit 77278f0391
3 changed files with 138 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -260,21 +260,82 @@
cursor: pointer; cursor: pointer;
} }
.co-panel-body label {
margin-bottom: 14px;
padding: 10px;
border: 1px solid #ddd;
border-radius: 6px;
background: #eee;
}
.config-setup-tool-element label input {
margin-right: 10px;
}
.config-file-field-element input { .config-file-field-element input {
display: inline-block; display: inline-block;
width: 78px; width: 78px;
margin-left: 10px; margin-left: 10px;
} }
.co-checkbox {
position: relative;
}
.co-checkbox input {
display: none;
}
.co-checkbox label {
position: relative;
padding-left: 28px;
}
.co-checkbox label:before {
content: '';
cursor: pointer;
position: absolute;
width: 20px;
height: 20px;
top: 0;
left: 0;
border-radius: 4px;
-webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,.4);
-moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,.4);
box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,.4);
background: -webkit-linear-gradient(top, #222 0%, #45484d 100%);
background: -moz-linear-gradient(top, #222 0%, #45484d 100%);
background: -o-linear-gradient(top, #222 0%, #45484d 100%);
background: -ms-linear-gradient(top, #222 0%, #45484d 100%);
background: linear-gradient(top, #222 0%, #45484d 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222', endColorstr='#45484d',GradientType=0 );
}
.co-checkbox label:after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
content: '';
position: absolute;
width: 11px;
height: 7px;
background: transparent;
top: 5px;
left: 4px;
border: 3px solid #fcfff4;
border-top: none;
border-right: none;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.co-checkbox label:hover::after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30);
opacity: 0.3;
}
.co-checkbox input[type=checkbox]:checked + label:after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
border: 3px solid rgb(26, 255, 26);
border-top: none;
border-right: none;
}

4
static/directives/config/config-file-field.html
View file

@ -1,7 +1,7 @@
<div class="config-file-field-element"> <div class="config-file-field-element">
<span ng-show="uploadProgress == null"> <span ng-show="uploadProgress == null">
<span ng-if="hasFile"><strong>{{ filename }}</strong> in the mounted config directory</span> <span ng-if="hasFile"><code>{{ filename }}</code></span>
<span class="nofile" ng-if="!hasFile">File {{ filename }} not found in mounted config directory: </span> <span class="nofile" ng-if="!hasFile"><code>{{ filename }}</code> not found in mounted config directory: </span>
<span ng-if="!hasFile"> <span ng-if="!hasFile">
<input type="file" ng-file-select="onFileSelect($files)"> <input type="file" ng-file-select="onFileSelect($files)">
</span> </span>

93
static/directives/config/config-setup-tool.html
View file

@ -56,9 +56,10 @@
<tr> <tr>
<td>User Creation:</td> <td>User Creation:</td>
<td> <td>
<label> <div class="co-checkbox">
<input type="checkbox" ng-model="config.FEATURE_USER_CREATION">Enable User Creation <input id="ftuc" type="checkbox" ng-model="config.FEATURE_USER_CREATION">
</label> <label for="ftuc">Enable User Creation</label>
</div>
<div class="help-text"> <div class="help-text">
If enabled, users can be created from the registry UI. If enabled, users can be created from the registry UI.
</div> </div>
@ -67,9 +68,10 @@
<tr> <tr>
<td>Build Support:</td> <td>Build Support:</td>
<td colspan="2"> <td colspan="2">
<label> <div class="co-checkbox">
<input type="checkbox" ng-model="config.FEATURE_BUILD_SUPPORT">Enable Dockerfile Build <input id="ftbs" type="checkbox" ng-model="config.FEATURE_BUILD_SUPPORT">
</label> <label for="ftbs">Enable Dockerfile Build</label>
</div>
<div class="help-text"> <div class="help-text">
If enabled, users can submit Dockerfiles to be built and pushed by the Enterprise Registry. If enabled, users can submit Dockerfiles to be built and pushed by the Enterprise Registry.
</div> </div>
@ -95,9 +97,9 @@
<td>Server hostname:</td> <td>Server hostname:</td>
<td> <td>
<span class="config-string-field" binding="config.SERVER_HOSTNAME" <span class="config-string-field" binding="config.SERVER_HOSTNAME"
placeholder="Hostname (and optional port)"></span> placeholder="Hostname (and optional port if non-standard)"></span>
<div class="help-text"> <div class="help-text">
The HTTP host (and optionally the port number) of the location The HTTP host (and optionally the port number if a non-standard HTTP/HTTPS port) of the location
where the registry will be accessible on the network where the registry will be accessible on the network
</div> </div>
</td> </td>
@ -105,17 +107,18 @@
<tr> <tr>
<td>SSL:</td> <td>SSL:</td>
<td> <td>
<label> <div class="co-checkbox">
<input type="checkbox" ng-model="config.PREFERRED_URL_SCHEME" <input id="enable-ssl" type="checkbox" ng-model="config.PREFERRED_URL_SCHEME"
ng-true-value="https" ng-false-value="http">Enable SSL ng-true-value="https" ng-false-value="http">
</label> <label for="enable-ssl">Enable SSL</label>
<div class="help-text"> </div>
<div class="help-text" style="margin-bottom: 10px">
A valid SSL certificate and private key files are required to use this option. A valid SSL certificate and private key files are required to use this option.
</div> </div>
</td>
</tr> <table class="config-table" ng-show="config.PREFERRED_URL_SCHEME == 'https'">
<tr ng-show="config.PREFERRED_URL_SCHEME == 'https'"> <tr>
<td class="non-input">SSL certificate:</td> <td class="non-input">Certificate:</td>
<td> <td>
<span class="config-file-field" filename="ssl.cert"></span> <span class="config-file-field" filename="ssl.cert"></span>
<div class="help-text"> <div class="help-text">
@ -123,13 +126,16 @@
</div </div
</td> </td>
</tr> </tr>
<tr ng-show="config.PREFERRED_URL_SCHEME == 'https'"> <tr>
<td class="non-input">SSL key:</td> <td class="non-input">Private key:</td>
<td> <td>
<span class="config-file-field" filename="ssl.key"></span> <span class="config-file-field" filename="ssl.key"></span>
</td> </td>
</tr> </tr>
</table> </table>
</td>
</tr>
</table>
</div> </div>
</div> </div>
@ -342,9 +348,10 @@
<tr ng-show="config.DISTRIBUTED_STORAGE_CONFIG.local[0] == 'RadosGWStorage'"> <tr ng-show="config.DISTRIBUTED_STORAGE_CONFIG.local[0] == 'RadosGWStorage'">
<td>Is Secure:</td> <td>Is Secure:</td>
<td> <td>
<label> <div class="co-checkbox">
<input type="checkbox" ng-model="config.DISTRIBUTED_STORAGE_CONFIG.local[1].is_secure">Requires SSL <input id="dsc-secure" type="checkbox" ng-model="config.DISTRIBUTED_STORAGE_CONFIG.local[1].is_secure">
</label> <label for="dsc-secure">Requires SSL</label>
</div>
</td> </td>
</tr> </tr>
<tr ng-show="config.DISTRIBUTED_STORAGE_CONFIG.local[0] == 'RadosGWStorage'"> <tr ng-show="config.DISTRIBUTED_STORAGE_CONFIG.local[0] == 'RadosGWStorage'">
@ -397,9 +404,10 @@
users to reset their passwords.</p> users to reset their passwords.</p>
</div> </div>
<label> <div class="co-checkbox">
<input type="checkbox" ng-model="config.FEATURE_MAILING">Enable E-mails <input id="ftmail" type="checkbox" ng-model="config.FEATURE_MAILING">
</label> <label for="ftmail">Enable E-mails</label>
</div>
<table class="config-table" ng-show="config.FEATURE_MAILING"> <table class="config-table" ng-show="config.FEATURE_MAILING">
<tr> <tr>
@ -419,9 +427,10 @@
<tr> <tr>
<td>TLS:</td> <td>TLS:</td>
<td> <td>
<label> <div class="co-checkbox">
<input type="checkbox" ng-model="config.MAIL_USE_TLS">Use TLS <input id="mut" type="checkbox" ng-model="config.MAIL_USE_TLS">
</label> <label for="mut">Use TLS</label>
</div>
</td> </td>
</tr> </tr>
<tr> <tr>
@ -438,9 +447,10 @@
<tr> <tr>
<td>Authentication:</td> <td>Authentication:</td>
<td> <td>
<label> <div class="co-checkbox">
<input type="checkbox" ng-model="mapped.use_mail_auth">Requires Authentication <input id="uma" type="checkbox" ng-model="mapped.use_mail_auth">
</label> <label for="uma">Requires Authentication</label>
</div>
<table class="config-table" ng-show="mapped.use_mail_auth"> <table class="config-table" ng-show="mapped.use_mail_auth">
<tr> <tr>
@ -550,9 +560,10 @@
</p> </p>
</div> </div>
<label> <div class="co-checkbox">
<input type="checkbox" ng-model="config.FEATURE_GITHUB_LOGIN">Enable Github Authentication <input id="ftghl" type="checkbox" ng-model="config.FEATURE_GITHUB_LOGIN">
</label> <label for="ftghl">Enable Github Authentication</label>
</div>
<table class="config-table" ng-show="config.FEATURE_GITHUB_LOGIN"> <table class="config-table" ng-show="config.FEATURE_GITHUB_LOGIN">
<tr> <tr>
@ -620,9 +631,10 @@
</p> </p>
</div> </div>
<label> <div class="co-checkbox">
<input type="checkbox" ng-model="config.FEATURE_GOOGLE_LOGIN">Enable Google Authentication <input id="ftgoa" type="checkbox" ng-model="config.FEATURE_GOOGLE_LOGIN">
</label> <label for="ftgoa">Enable Google Authentication</label>
</div>
<table class="config-table" ng-show="config.FEATURE_GOOGLE_LOGIN"> <table class="config-table" ng-show="config.FEATURE_GOOGLE_LOGIN">
<tr> <tr>
@ -668,9 +680,10 @@
</p> </p>
</div> </div>
<label> <div class="co-checkbox">
<input type="checkbox" ng-model="config.FEATURE_GITHUB_BUILD">Enable Github Triggers <input id="ftgb" type="checkbox" ng-model="config.FEATURE_GITHUB_BUILD">
</label> <label for="ftgb">Enable Github Triggers</label>
</div>
<table class="config-table" ng-show="config.FEATURE_GITHUB_BUILD"> <table class="config-table" ng-show="config.FEATURE_GITHUB_BUILD">
<tr> <tr>