Merge branch 'ag-new-admin-ui' of github.com:metabase/metabase-init into ag-new-admin-ui

resources/frontend_client/app/admin/databases/partials/database_edit.html

@@ -6,9 +6,9 @@
         <h2 class="Breadcrumb Breadcrumb--page" ng-if="database.id">{{database.name}}</h2>
     </section>
 
-    <section class="Grid Grid--gutters">
+    <section class="Grid Grid--gutters Grid--1of3">
         <!-- form -->
-        <div class="Grid-cell">
+        <div class="Grid-cell Cell--2of3">
             <form class="bg-white rounded bordered shadowed" name="form" novalidate>
                 <div class="FormError" ng-show="form.$error.message">{{form.$error.message}}</div>
 

resources/frontend_client/app/admin/organization/partials/org_settings.html

@@ -3,34 +3,40 @@
         <h2 class="PageTitle">Organization</h2>
     </section>
 
-    <section class="Grid Grid--1of2">
-        <div class="Grid-cell p4 bordered rounded shadowed">
-            <form name="form" novalidate>
+    <section class="Grid Grid--gutters Grid--full Grid--2of3">
+        <!-- form -->
+        <div class="Grid-cell Cell--2of3">
+            <form class="Form-new bordered rounded shadowed" name="form" novalidate>
                 <div class="FormError" ng-show="form.$error.message">{{form.$error.message}}</div>
 
                 <div class="Form-field" ng-class="{'Form--fieldError': form.slug.$error.message !== undefined}">
                     <mb-form-label form="form" display-name="Slug" field-name="slug"></mb-form-label>
-                    <input class="Form-input full" name="slug" ng-model="currentOrg.slug" ng-disabled="true" />
+                    <input class="Form-input Form-offset full" name="slug" ng-model="currentOrg.slug" ng-disabled="true" />
                 </div>
 
                 <div class="Form-field" ng-class="{'Form--fieldError': form.name.$error.message !== undefined}">
                     <mb-form-label form="form" display-name="Name" field-name="name"></mb-form-label>
-                    <input class="Form-input full" name="name" ng-model="currentOrg.name" placeholder="What is the name of your organization?"/>
+                    <input class="Form-input Form-offset full" name="name" ng-model="currentOrg.name" placeholder="What is the name of your organization?"/>
+                    <span class="Form-charm"></span>
                 </div>
 
                 <div class="Form-field" ng-class="{'Form--fieldError': form.description.$error.message !== undefined}">
                     <mb-form-label form="form" display-name="Description" field-name="description"></mb-form-label>
-                    <input class="Form-input full" name="description" ng-model="currentOrg.description" placeholder="What else should people know about this org?"/>
+                    <input class="Form-input Form-offset full" name="description" ng-model="currentOrg.description" placeholder="What else should people know about this org?"/>
+                    <span class="Form-charm"></span>
                 </div>
 
                 <div class="Form-field" ng-class="{'Form--fieldError': form.logo_url.$error.message !== undefined}">
                     <mb-form-label form="form" display-name="Logo url" field-name="logo_url"></mb-form-label>
-                    <input class="Form-input full" name="logo_url" ng-model="currentOrg.logo_url" placeholder="Link to an image of your logo"/>
+                    <input class="Form-input Form-offset full" name="logo_url" ng-model="currentOrg.logo_url" placeholder="Link to an image of your logo"/>
+                    <span class="Form-charm"></span>
                 </div>
 
-                <button class="Button" ng-class="{'Button--primary': form.$valid}" ng-click="save(currentOrg)" ng-disabled="!form.$valid">
-                    Save
-                </button>
+                <div class="Form-actions">
+                    <button class="Button" ng-class="{'Button--primary': form.$valid}" ng-click="save(currentOrg)" ng-disabled="!form.$valid">
+                        Save
+                    </button>
+                </div>
             </form>
         </div>
     </section>

resources/frontend_client/app/components/buttons/buttons.css

@@ -22,7 +22,8 @@
   cursor: pointer;
   padding: 0.6rem 0.8rem;
   text-decoration: none;
-  font-size: 0.8rem;
+  font-size: 0.8em;
+  line-height: 1em;
 
   display: inline-block;
   box-sizing: border-box;

resources/frontend_client/app/components/form/form.css

 :root {
-  --form-padding: 1em;
-  --form-input-placeholder-color: #C1C1C1;
+    --form-padding: 1em;
+    --form-input-placeholder-color: #C1C1C1;
 }
 
 /* TODO: deprecate this base object, it shouldn't be this specific */
@@ -9,6 +9,10 @@
   max-width: 640px;
 }
 
+.Form-new {
+    padding-top: 2em;
+}
+
 /* TODO: combine this and the scoped version */
 .Form-label {
   display: block;
@@ -17,8 +21,9 @@
 }
 
 .Form-field {
-   color: #ADADAD;
-   margin-bottom: 1em;
+    position: relative;
+    color: #929292;
+    margin-bottom: 1em;
 }
 
 /* TODO: remove this scoping once we've converted non admin forms */
@@ -35,37 +40,64 @@
 }
 
 .Form-input {
-    padding-top: 1em;
-    padding-bottom: 1em;
+    padding-top: 0.8em;
+    padding-bottom: 0.8em;
     font-size: 1.185em;
     border: none;
     background-color: transparent;
-}
-
-.Form-offset {
-    padding-left: 1em;
+    transition: color .3s linear;
 }
 
 .Form-input:focus {
     outline: none;
 }
 
-.Form-field .Form-input:before {
-    content: '';
-    width: 0.25em;
-    height: 0.25em;
-    background-color: red;
+.Form-offset {
+    padding-left: 2rem;
+}
+
+.Form-charm {
+    position: absolute;
     display: block;
+    top: 0;
+    left: 0;
+    width: 0.15em;
+    height: 100%;
+    background-color: #ddd;
+    box-sizing: border-box;
+    opacity: 0;
+    transition: background-color .3s linear;
+    transition: opacity .3s linear;
 }
 
-.Form-field:hover .Form-input {
-    color: red;
+
+.Form-field.Form--fieldError .Form-charm {
+    background-color: var(--error-color);
+    opacity: 1;
+}
+
+.Form-input:focus + .Form-charm {
+    background-color: var(--brand-color);
+    opacity: 1;
 }
 
 .Form-field:hover .Form-input {
+    color: #ddd;
     background: rgba(0, 0, 0, 0.02);
 }
 
+.Form-field:hover .Form-charm {
+    opacity: 1;
+}
+
+.Form-field:hover .Form-input:focus {
+    transition: color .3s linear;
+    color: #444;
+    background-color: transparent;
+    transition: background .3s linear;
+}
+
+
 /* TODO: replace instances of Form-group with Form-field */
 .Form-group {
   padding: var(--form-padding);
@@ -77,3 +109,7 @@
   pointer-events: none;
   transition: opacity .3s linear;
 }
+
+.Form-actions {
+    padding: 2em;
+}

resources/frontend_client/app/css/admin.css

@@ -8,14 +8,15 @@
     padding: 1em;
     background: var(--admin-nav-bg-color);
     color: #fff;
+    font-size: 0.85rem;
 }
 
 .AdminNav .NavItem {
     /* cancel out padding as .AdminNav + flex will allow for proper centering */
     padding-top: 0;
     padding-bottom: 0;
-    padding-left: 1em;
-    padding-right: 1em;
+    padding-left: 1.25rem;
+    padding-right: 1.25rem;
     color: var(--admin-nav-item-text-color);
 }
 
@@ -61,21 +62,24 @@
 .Actions {
     background-color: rgba(243,243,243,0.46);
     border: 1px solid #E0E0E0;
+    padding: 2em;
 }
 
-.Actions-header {
-    padding: 1em;
+.Actions-group {
+    margin-bottom: 2em;
 }
 
-.Actions-group {
-    padding: 1em;
+.Actions-group:last-child {
+    margin-bottom: 0;
 }
 
 .Actions-group.Actions--dangerZone {
     color: var(--error-color);
 }
 
+
 .Actions-groupLabel {
+    font-size: 0.85em;
     margin-bottom: 1em;
 }
 

resources/frontend_client/app/css/core/grid.css

@@ -207,3 +207,12 @@
     padding: 2em 0 0 2em;
   }
 }
+
+
+.Grid-cell.Cell--1of3 {
+    flex: 0 0 33.3333%;
+}
+
+.Grid-cell.Cell--2of3 {
+    flex: 0 0 66.6666%;
+}

resources/frontend_client/app/css/core/rounded.css

 :root {
-  --default-border-radius: 4px;
+  --default-border-radius: 3px;
 }
 .rounded {
   border-radius: var(--default-border-radius);

resources/frontend_client/app/css/core/shadow.css

 :root {
-    --shadow-color: rgba(0, 0, 0, .07);
+    --shadow-color: rgba(0, 0, 0, .08);
 }
 .shadowed {
-  box-shadow: 0 1px 1px var(--shadow-color);
+  box-shadow: 0 2px 2px var(--shadow-color);
 }

resources/frontend_client/app/forms.js

@@ -46,7 +46,7 @@ MetabaseForms.directive('mbFormLabel', [function () {
     return {
         restrict: 'E',
         replace: true,
-        template: '<label class="Form-label">{{displayName}}: <span ng-show="form[fieldName].$error.message">{{form[fieldName].$error.message}}</span></label>',
+        template: '<label class="Form-label Form-offset">{{displayName}}: <span ng-show="form[fieldName].$error.message">{{form[fieldName].$error.message}}</span></label>',
         scope: {
             form: '=',
             displayName: '@',