Some UI improvements
This commit is contained in:
parent
1142b1bc18
commit
77278f0391
3 changed files with 138 additions and 64 deletions
|
@ -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;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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,28 +107,32 @@
|
||||||
<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">
|
||||||
The certificate must be in PEM format.
|
The certificate must be in PEM format.
|
||||||
</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>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
|
@ -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>
|
||||||
|
|
Reference in a new issue