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

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

 <div class="wrapper">
+    <!-- breadcrumb -->
     <section class="Breadcrumbs">
         <a class="Breadcrumb Breadcrumb--path" cv-org-href="/admin/databases/">Databases</a>
         <cv-chevron-right-icon class="Breadcrumb-divider" width="12px" height="12px"></cv-chevron-right-icon>
@@ -6,26 +7,12 @@
         <h2 class="Breadcrumb Breadcrumb--page" ng-if="database.id">{{database.name}}</h2>
     </section>
 
-    <section>
-        <div class="p4 bordered">
-            <h3>Actions</h3>
-            <button class="Button" ng-click="save(database)">Sync</button>
-
-            <div>
-                <label>Danger Zone:</label>
-                <button class="Button" ng-click="save(database)">Remove this database</button>
-            </div>
-        </div>
-
-        <div class="bg-white rounded bordered">
-            <form name="form" novalidate>
+    <section class="Grid Grid--gutters">
+        <div class="Grid-cell">
+            <!-- form -->
+            <form class="bg-white rounded bordered shadowed" name="form" novalidate>
                 <div class="FormError" ng-show="form.$error.message">{{form.$error.message}}</div>
 
-                <div class="Form-field" ng-init="" ng-class="{'FormFieldError': form.name.$error.message == undefined}">
-                    <label class="Form-label">Name: <span ng-show="form.name.$error.message">{{form.name.$error.message}}</span></label>
-                    <input class="Form-input full" name="name" ng-model="database.name" required />
-                </div>
-
                 <div class="Form-field">
                     <label class="Form-label">Database Type:</label>
                     <label class="Select">
@@ -33,10 +20,16 @@
                     </label>
                 </div>
 
+                <div class="Form-field" ng-init="" ng-class="{'FormFieldError': form.name.$error.message == undefined}">
+                    <label class="Form-label Form-offset">Name: <span ng-show="form.name.$error.message">{{form.name.$error.message}}</span></label>
+                    <input class="Form-input Form-offset full" name="name" ng-model="database.name" />
+                </div>
+
+                <!-- TODO: database type dependent inputs -->
                 <div class="FormInputGroup" ng-show="database.engine == 'postgres'">
-                    <div class="Form-field" ng-class="{'FormFieldError': form.host.$error.message == undefined}">
-                        <label class="Form-label">Host: <span ng-show="form.host.$error.message">{{form.host.$error.message}}</span></label>
-                        <input class="Form-input full" name="host" ng-model="details.host" required />
+                    <div class="Form-field" ng-class="{'FormFieldError': form.host.$error.message != undefined}">
+                        <label class="Form-label Form-offset">Host: <span ng-show="form.host.$error.message">{{form.host.$error.message}}</span></label>
+                        <input class="Form-input Form-offset full" name="host" ng-model="details.host" required />
                     </div>
 
                     <div class="Form-field" ng-class="{'Form--error': form.port.$error.message == undefined}">
@@ -46,7 +39,7 @@
 
                     <div class="Form-field" ng-class="{'FormFieldError': form.dbname.$error.message == undefined}">
                         <label class="Form-label">Database name: <span ng-show="form.dbname.$error.message">{{form.dbname.$error.message}}</span></label>
-                        <input class="Form-input full" name="dbname" ng-model="details.dbname" required />
+                        <input class="Form-input full" name="dbname" ng-model="details.dbname" />
                     </div>
 
                     <div class="Form-field" ng-class="{'FormFieldError': form.user.$error.message == undefined}">
@@ -60,16 +53,29 @@
                     </div>
                 </div>
 
-                <div>
-                    <button class="Button" ng-class="{'Button--primary': form.$valid}" ng-click="save(database)" ng-disabled="!form.$valid">
-                        Save
-                    </button>
+                <!-- SAVE BUTTON -->
+                <button class="Button" ng-class="{'Button--primary': form.$valid}" ng-click="save(database)" ng-disabled="!form.$valid">
+                    Save
+                </button>
+                <!-- TODO: remove this fella -->
+                <button class="Button" ng-click="foo()">
+                    Status
+                </button>
+            </form>
+        </div>
+        <!-- actions -->
+        <div class="Grid-cell">
+            <div class="Actions">
+                <h3>Actions</h3>
+                <div class="Actions-group">
+                    <button class="Button" ng-click="save(database)">Sync</button>
+                </div>
 
-                    <button class="Button" ng-click="foo()">
-                        Status
-                    </button>
+                <div class="Actions-group Actions--dangerZone">
+                    <label class="Actions-groupLabel block">Danger Zone:</label>
+                    <button class="Button Button--danger" ng-click="save(database)">Remove this database</button>
                 </div>
-            </form>
+            </div>
         </div>
     </section>
-</div>
+</div><!-- wrapper -->

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

@@ -3,36 +3,36 @@
         <h2 class="PageTitle">Organization</h2>
     </section>
 
-    <section>
-        <div class="p4 bordered">
+    <section class="Grid Grid--1of2">
+        <!-- form -->
+        <div class="Grid-cell p4 bordered rounded shadowed">
             <form name="form" novalidate>
                 <div class="FormError" ng-show="form.$error.message">{{form.$error.message}}</div>
 
-                <div ng-class="{'FormFieldError': form.slug.$error.message == undefined}">
+                <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="input full" name="slug" ng-model="currentOrg.slug" ng-disabled="true" />
+                    <input class="Form-input full" name="slug" ng-model="currentOrg.slug" ng-disabled="true" />
                 </div>
 
-                <div ng-class="{'FormFieldError': form.name.$error.message == undefined}">
+                <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="input full" name="name" ng-model="currentOrg.name" required />
+                    <input class="Form-input full" name="name" ng-model="currentOrg.name" placeholder="What is the name of your organization?"/>
                 </div>
 
-                <div ng-class="{'FormFieldError': form.description.$error.message == undefined}">
+                <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="input full" name="description" ng-model="currentOrg.description" />
+                    <input class="Form-input full" name="description" ng-model="currentOrg.description" placeholder="What else should people know about this org?"/>
                 </div>
 
-                <div ng-class="{'FormFieldError': form.logo_url.$error.message == undefined}">
+                <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="input full" name="logo_url" ng-model="currentOrg.logo_url" />
+                    <input class="Form-input full" name="logo_url" ng-model="currentOrg.logo_url" placeholder="Link to an image of your logo"/>
                 </div>
 
-                <div>
-                    <button class="Button" ng-class="{'Button--primary': form.$valid}" ng-click="save(currentOrg)" ng-disabled="!form.$valid">
-                        Save
-                    </button>
-                </div>
+                <!-- SAVE BUTTON -->
+                <button class="Button" ng-class="{'Button--primary': form.$valid}" ng-click="save(currentOrg)" ng-disabled="!form.$valid">
+                    Save
+                </button>
             </form>
         </div>
     </section>

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

@@ -7,6 +7,8 @@
   --primary-button-bg-color: #4A90E2;
 
   --selected-button-bg-color: #F4F6F8;
+
+  --danger-button-bg-color: #EF8C8C;
 }
 
 .Button {
@@ -79,3 +81,9 @@
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, .12);
   background-color: var(--selected-button-bg-color);
 }
+
+.Button--danger {
+    background-color: var(--danger-button-bg-color);
+    border-color: var(--danger-button-bg-color);
+    color: #fff;
+}

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

 :root {
   --form-padding: 1em;
+  --form-input-placeholder-color: #C1C1C1;
 }
 
 /* TODO: deprecate this base object, it shouldn't be this specific */
@@ -8,6 +9,7 @@
   max-width: 640px;
 }
 
+/* TODO: combine this and the scoped version */
 .Form-label {
   display: block;
   color: #777;
@@ -16,8 +18,6 @@
 
 .Form-field {
    color: #ADADAD;
-   padding-left: 1em;
-   padding-right: 1em;
    margin-bottom: 1em;
 }
 
@@ -25,23 +25,47 @@
 /* form labels inherit the color of the parent, allowing for easy error changes */
 .Form-field .Form-label {
     display: block;
-    font-size: 1em;
+    font-size: 0.85em;
     font-weight: bold;
     color: currentColor;
 }
 
+.Form-field.Form--fieldError {
+    color: var(--error-color);
+}
+
 .Form-input {
-    padding-top: 0.25em;
-    padding-bottom: 0.25em;
+    padding-top: 1em;
+    padding-bottom: 1em;
     font-size: 1.185em;
     border: none;
     background-color: transparent;
 }
 
+.Form-offset {
+    padding-left: 1em;
+}
+
 .Form-input:focus {
     outline: none;
 }
 
+.Form-field .Form-input:before {
+    content: '';
+    width: 0.25em;
+    height: 0.25em;
+    background-color: red;
+    display: block;
+}
+
+.Form-field:hover .Form-input {
+    color: red;
+}
+
+.Form-field:hover .Form-input {
+    background: rgba(0, 0, 0, 0.02);
+}
+
 /* TODO: replace instances of Form-group with Form-field */
 .Form-group {
   padding: var(--form-padding);

resources/frontend_client/app/css/admin.css

@@ -15,7 +15,7 @@
     padding-top: 0;
     padding-bottom: 0;
     padding-left: 1em;
-    padding-right: 1em; 
+    padding-right: 1em;
     color: var(--admin-nav-item-text-color);
 }
 
@@ -58,8 +58,28 @@
     color: currentColor;
 }
 
+.Actions {
+    background-color: rgba(243,243,243,0.46);
+    border: 1px solid #E0E0E0;
+}
+
+.Actions-header {
+    padding: 1em;
+}
+
+.Actions-group {
+    padding: 1em;
+}
+
+.Actions-group.Actions--dangerZone {
+    color: var(--error-color);
+}
+
+.Actions-groupLabel {
+    margin-bottom: 1em;
+}
 
 /* TODO: this is for the ace editor and should be handled without an ID */
 #id_sql {
     height: 200px;
-}
\ No newline at end of file
+}

resources/frontend_client/app/css/core/breakpoints.css

+/* TODO: we should really have these as variables */
+
 @custom-media --breakpoint-min-sm (min-width: 40em);
 @custom-media --breakpoint-min-md (min-width: 60em);
 @custom-media --breakpoint-min-lg (min-width: 80em);

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

+:root {
+
+}
+
 .Grid {
-    display: flex;
-    margin: 0;
-    padding: 0;
-    flex-wrap: wrap;
+  display: flex;
+  flex-wrap: wrap;
+  list-style: none;
+  margin: 0;
+  padding: 0;
 }
 
-/* grid cells are used to create columns */
 .Grid-cell {
-    flex: 1;
+  flex: 1;
 }
 
-.Grid--gutters {
-  margin: -1em 0 0 -1em;
+.Grid--flexCells > .Grid-cell {
+  display: flex;
 }
-.Grid--gutters > .Grid-cell {
-  padding: 1em 0 0 1em;
+
+.Grid--top {
+  align-items: flex-start;
+}
+
+.Grid--bottom {
+  align-items: flex-end;
+}
+
+.Grid--center {
+  align-items: center;
+}
+
+.Grid--justifyCenter {
+  justify-content: center;
+}
+
+.Grid-cell--top {
+  align-self: flex-start;
+}
+
+.Grid-cell--bottom {
+  align-self: flex-end;
+}
+
+.Grid-cell--center {
+  align-self: center;
+}
+
+.Grid-cell--autoSize {
+  flex: none;
+}
+
+.Grid--fit > .Grid-cell {
+  flex: 1;
+}
+
+.Grid--full > .Grid-cell {
+  flex: 0 0 100%;
+}
+
+.Grid--1of2 > .Grid-cell {
+  flex: 0 0 50%;
+}
+
+.Grid--1of3 > .Grid-cell {
+  flex: 0 0 33.3333%;
 }
 
 .Grid--1of4 > .Grid-cell {
+  flex: 0 0 25%;
+}
+
+@media (break-sm) {
+  .small-Grid--fit > .Grid-cell {
+    flex: 1;
+  }
+  .small-Grid--full > .Grid-cell {
+    flex: 0 0 100%;
+  }
+  .small-Grid--1of2 > .Grid-cell {
+    flex: 0 0 50%;
+  }
+  .small-Grid--1of3 > .Grid-cell {
+    flex: 0 0 33.3333%;
+  }
+  .small-Grid--1of4 > .Grid-cell {
     flex: 0 0 25%;
+  }
 }
 
-.Grid--1of2 > .Grid-cell {
+@media (--break-md) {
+  .med-Grid--fit > .Grid-cell {
+    flex: 1;
+  }
+  .med-Grid--full > .Grid-cell {
+    flex: 0 0 100%;
+  }
+  .med-Grid--1of2 > .Grid-cell {
     flex: 0 0 50%;
+  }
+  .med-Grid--1of3 > .Grid-cell {
+    flex: 0 0 33.3333%;
+  }
+  .med-Grid--1of4 > .Grid-cell {
+    flex: 0 0 25%;
+  }
 }
 
+@media (--break-lg) {
+  .large-Grid--fit > .Grid-cell {
+    flex: 1;
+  }
+  .large-Grid--full > .Grid-cell {
+    flex: 0 0 100%;
+  }
+  .large-Grid--1of2 > .Grid-cell {
+    flex: 0 0 50%;
+  }
+  .large-Grid--1of3 > .Grid-cell {
+    flex: 0 0 33.3333%;
+  }
+  .large-Grid--1of4 > .Grid-cell {
+    flex: 0 0 25%;
+  }
+}
 
-/* TODO - use breakpoint md and add responsive grid classes */
-@media screen and (--breakpoint-max-lg) {
-    .Grid--1of4 > .Grid-cell {
-        flex: 50%;
-    }
+.Grid--gutters {
+  margin: -1em 0 1em -1em;
+}
+.Grid--gutters > .Grid-cell {
+  padding: 1em 0 0 1em;
 }
 
-@media screen and (--breakpoint-max-sm) {
-    .Grid--1of4 > .Grid-cell {
-        flex: 100%;
-    }
+.Grid--guttersLg {
+  margin: -1.5em 0 1.5em -1.5em;
+}
+.Grid--guttersLg > .Grid-cell {
+  padding: 1.5em 0 0 1.5em;
 }
 
-/* a simple utility to make sure an item fills its height */
-.fill-height: {
-    flex: 1;
+.Grid--guttersXl {
+  margin: -2em 0 2em -2em;
+}
+.Grid--guttersXl > .Grid-cell {
+  padding: 2em 0 0 2em;
+}
+
+@media (break-sm) {
+  .small-Grid--gutters {
+    margin: -1em 0 1em -1em;
+  }
+  .small-Grid--gutters > .Grid-cell {
+    padding: 1em 0 0 1em;
+  }
+  .small-Grid--guttersLg {
+    margin: -1.5em 0 1.5em -1.5em;
+  }
+  .small-Grid--guttersLg > .Grid-cell {
+    padding: 1.5em 0 0 1.5em;
+  }
+  .small-Grid--guttersXl {
+    margin: -2em 0 2em -2em;
+  }
+  .small-Grid--guttersXl > .Grid-cell {
+    padding: 2em 0 0 2em;
+  }
+}
+
+@media (--break-md) {
+  .med-Grid--gutters {
+    margin: -1em 0 1em -1em;
+  }
+  .med-Grid--gutters > .Grid-cell {
+    padding: 1em 0 0 1em;
+  }
+  .med-Grid--guttersLg {
+    margin: -1.5em 0 1.5em -1.5em;
+  }
+  .med-Grid--guttersLg > .Grid-cell {
+    padding: 1.5em 0 0 1.5em;
+  }
+  .med-Grid--guttersXl {
+    margin: -2em 0 2em -2em;
+  }
+  .med-Grid--guttersXl > .Grid-cell {
+    padding: 2em 0 0 2em;
+  }
+}
+
+@media (--break-lg) {
+  .large-Grid--gutters {
+    margin: -1em 0 1em -1em;
+  }
+  .large-Grid--gutters > .Grid-cell {
+    padding: 1em 0 0 1em;
+  }
+  .large-Grid--guttersLg {
+    margin: -1.5em 0 1.5em -1.5em;
+  }
+  .large-Grid--guttersLg > .Grid-cell {
+    padding: 1.5em 0 0 1.5em;
+  }
+  .large-Grid--guttersXl {
+    margin: -2em 0 2em -2em;
+  }
+  .large-Grid--guttersXl > .Grid-cell {
+    padding: 2em 0 0 2em;
+  }
 }

resources/frontend_client/app/css/query_builder.css

@@ -4,7 +4,6 @@ html {
 
 body {
     height: 100%;
-    background: #FBFCFD;
 }
 
 .SearchBar:focus {

resources/frontend_client/app/forms.js

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

resources/frontend_client/index.html

@@ -90,13 +90,15 @@
                 <div class="wrapper flex align-center">
                     <!-- org title -->
                     <div class="NavTitle flex align-center" ng-if="!user.is_multi_org">
-                        <svg id="cog" class="mr1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="16px" height="16px" fill="currentcolor">
+                        <!-- TODO: this should be an icon directive -->
+                        <svg id="cog" class="mr1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="22px" height="22px" fill="currentcolor">
                             <path d="M14 0 H18 L19 6 L20.707 6.707 L26 3.293 L28.707 6 L25.293 11.293 L26 13 L32 14 V18 L26 19 L25.293 20.707 L28.707 26 L26 28.707 L20.707 25.293 L19 26 L18 32 L14 32 L13 26 L11.293 25.293 L6 28.707 L3.293 26 L6.707 20.707 L6 19 L0 18 L0 14 L6 13 L6.707 11.293 L3.293 6 L6 3.293 L11.293 6.707 L13 6 L14 0 z M16 10 A6 6 0 0 0 16 22 A6 6 0 0 0 16 10 "></path>
                         </svg>
                         <span class="NavItem-text">{{currentOrg.name}} Admin</span>
                     </div>
                     <div class="NavTitle Dropdown" dropdown on-toggle="toggled(open)" ng-if="user.is_multi_org">
-                        <svg class="mr1" id="cog" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="16px" height="16px"fill="currentcolor">
+                        <!-- TODO: this should be an icon directive -->
+                        <svg class="mr1" id="cog" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="22px" height="22px"fill="currentcolor">
                             <path d="M14 0 H18 L19 6 L20.707 6.707 L26 3.293 L28.707 6 L25.293 11.293 L26 13 L32 14 V18 L26 19 L25.293 20.707 L28.707 26 L26 28.707 L20.707 25.293 L19 26 L18 32 L14 32 L13 26 L11.293 25.293 L6 28.707 L3.293 26 L6.707 20.707 L6 19 L0 18 L0 14 L6 13 L6.707 11.293 L3.293 6 L6 3.293 L11.293 6.707 L13 6 L14 0 z M16 10 A6 6 0 0 0 16 22 A6 6 0 0 0 16 10 "></path>
                         </svg>
                         <span dropdown-toggle>