Some UI improvements

static/css/core-ui.css

@@ -260,21 +260,82 @@
   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 {
   display: inline-block;
   width: 78px;
   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;
+}
+
+

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

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

static/directives/config/config-setup-tool.html

@@ -56,9 +56,10 @@
         <tr>
           <td>User Creation:</td>
           <td>
-            <label>
-              <input type="checkbox" ng-model="config.FEATURE_USER_CREATION">Enable User Creation
-            </label>
+            <div class="co-checkbox">
+              <input id="ftuc" type="checkbox" ng-model="config.FEATURE_USER_CREATION">
+              <label for="ftuc">Enable User Creation</label>
+            </div>
             <div class="help-text">
                If enabled, users can be created from the registry UI.
             </div>
@@ -67,9 +68,10 @@
         <tr>
           <td>Build Support:</td>
           <td colspan="2">
-            <label>
-              <input type="checkbox" ng-model="config.FEATURE_BUILD_SUPPORT">Enable Dockerfile Build
-            </label>
+            <div class="co-checkbox">
+              <input id="ftbs" type="checkbox" ng-model="config.FEATURE_BUILD_SUPPORT">
+              <label for="ftbs">Enable Dockerfile Build</label>
+            </div>
             <div class="help-text">
                If enabled, users can submit Dockerfiles to be built and pushed by the Enterprise Registry.
             </div>
@@ -95,9 +97,9 @@
           <td>Server hostname:</td>
           <td>
             <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">
-               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
             </div>
           </td>
@@ -105,28 +107,32 @@
         <tr>
           <td>SSL:</td>
           <td>
-            <label>
-              <input type="checkbox" ng-model="config.PREFERRED_URL_SCHEME"
-                     ng-true-value="https" ng-false-value="http">Enable SSL
-            </label>
-            <div class="help-text">
+            <div class="co-checkbox">
+              <input id="enable-ssl" type="checkbox" ng-model="config.PREFERRED_URL_SCHEME"
+                     ng-true-value="https" ng-false-value="http">
+              <label for="enable-ssl">Enable SSL</label>
+            </div>
+            <div class="help-text" style="margin-bottom: 10px">
                A valid SSL certificate and private key files are required to use this option.
             </div>
-          </td>
-        </tr>
-        <tr ng-show="config.PREFERRED_URL_SCHEME == 'https'">
-          <td class="non-input">SSL certificate:</td>
-          <td>
-            <span class="config-file-field" filename="ssl.cert"></span>
-            <div class="help-text">
-              The certificate must be in PEM format.
-            </div
-          </td>
-        </tr>
-        <tr ng-show="config.PREFERRED_URL_SCHEME == 'https'">
-          <td class="non-input">SSL key:</td>
-          <td>
-            <span class="config-file-field" filename="ssl.key"></span>
+
+            <table class="config-table"  ng-show="config.PREFERRED_URL_SCHEME == 'https'">
+              <tr>
+                <td class="non-input">Certificate:</td>
+                <td>
+                  <span class="config-file-field" filename="ssl.cert"></span>
+                  <div class="help-text">
+                    The certificate must be in PEM format.
+                  </div
+                </td>
+              </tr>
+              <tr>
+                <td class="non-input">Private key:</td>
+                <td>
+                  <span class="config-file-field" filename="ssl.key"></span>
+                </td>
+              </tr>
+            </table>
           </td>
         </tr>
       </table>
@@ -342,9 +348,10 @@
           <tr ng-show="config.DISTRIBUTED_STORAGE_CONFIG.local[0] == 'RadosGWStorage'">
             <td>Is Secure:</td>
             <td>
-              <label>
-                <input type="checkbox" ng-model="config.DISTRIBUTED_STORAGE_CONFIG.local[1].is_secure">Requires SSL
-              </label>
+              <div class="co-checkbox">
+                <input id="dsc-secure" type="checkbox" ng-model="config.DISTRIBUTED_STORAGE_CONFIG.local[1].is_secure">
+                <label for="dsc-secure">Requires SSL</label>
+              </div>
             </td>
           </tr>
           <tr ng-show="config.DISTRIBUTED_STORAGE_CONFIG.local[0] == 'RadosGWStorage'">
@@ -397,9 +404,10 @@
         users to reset their passwords.</p>
       </div>
 
-      <label>
-        <input type="checkbox" ng-model="config.FEATURE_MAILING">Enable E-mails
-      </label>
+      <div class="co-checkbox">
+        <input id="ftmail" type="checkbox" ng-model="config.FEATURE_MAILING">
+        <label for="ftmail">Enable E-mails</label>
+      </div>
 
       <table class="config-table" ng-show="config.FEATURE_MAILING">
         <tr>
@@ -419,9 +427,10 @@
         <tr>
           <td>TLS:</td>
           <td>
-            <label>
-              <input type="checkbox" ng-model="config.MAIL_USE_TLS">Use TLS
-            </label>
+            <div class="co-checkbox">
+              <input id="mut" type="checkbox" ng-model="config.MAIL_USE_TLS">
+              <label for="mut">Use TLS</label>
+            </div>
           </td>
         </tr>
         <tr>
@@ -438,9 +447,10 @@
         <tr>
           <td>Authentication:</td>
           <td>
-            <label>
-              <input type="checkbox" ng-model="mapped.use_mail_auth">Requires Authentication
-            </label>
+            <div class="co-checkbox">
+              <input id="uma" type="checkbox" ng-model="mapped.use_mail_auth">
+              <label for="uma">Requires Authentication</label>
+            </div>
 
             <table class="config-table" ng-show="mapped.use_mail_auth">
               <tr>
@@ -550,9 +560,10 @@
         </p>
       </div>
 
-      <label>
-        <input type="checkbox" ng-model="config.FEATURE_GITHUB_LOGIN">Enable Github Authentication
-      </label>
+      <div class="co-checkbox">
+        <input id="ftghl" type="checkbox" ng-model="config.FEATURE_GITHUB_LOGIN">
+        <label for="ftghl">Enable Github Authentication</label>
+      </div>
 
       <table class="config-table" ng-show="config.FEATURE_GITHUB_LOGIN">
         <tr>
@@ -620,9 +631,10 @@
         </p>
       </div>
 
-      <label>
-        <input type="checkbox" ng-model="config.FEATURE_GOOGLE_LOGIN">Enable Google Authentication
-      </label>
+      <div class="co-checkbox">
+        <input id="ftgoa" type="checkbox" ng-model="config.FEATURE_GOOGLE_LOGIN">
+        <label for="ftgoa">Enable Google Authentication</label>
+      </div>
 
       <table class="config-table" ng-show="config.FEATURE_GOOGLE_LOGIN">
         <tr>
@@ -668,9 +680,10 @@
         </p>
       </div>
 
-      <label>
-        <input type="checkbox" ng-model="config.FEATURE_GITHUB_BUILD">Enable Github Triggers
-      </label>
+      <div class="co-checkbox">
+        <input id="ftgb" type="checkbox" ng-model="config.FEATURE_GITHUB_BUILD">
+        <label for="ftgb">Enable Github Triggers</label>
+      </div>
 
       <table class="config-table" ng-show="config.FEATURE_GITHUB_BUILD">
         <tr>