feat(4ps): inline edit

mixcore · Jan 3, 2024 · a893f98 · a893f98
1 parent 2939a0e
commit a893f98
Show file tree

Hide file tree

Showing 8 changed files with 54 additions and 26 deletions.
diff --git a/apps/mix-cms/src/index.html b/apps/mix-cms/src/index.html
@@ -10,6 +10,7 @@
       href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/2.3.1/css/flag-icon.min.css"
       rel="stylesheet"
     />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0..1,0" />
 
     <link rel="manifest" href="manifest.webmanifest" />
     <meta name="theme-color" content="#1976d2" />

diff --git a/apps/mix-database/src/index.html b/apps/mix-database/src/index.html
@@ -6,20 +6,11 @@
     <base href="/" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/x-icon" href="favicon.ico" />
-    <!-- <link
-      rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
-    />
-    <link
-      rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-utilities.min.css"
-    /> -->
-
     <link
       href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/2.3.1/css/flag-icon.min.css"
       rel="stylesheet"
     />
-
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0..1,0" />
     <link rel="manifest" href="manifest.webmanifest" />
     <meta name="theme-color" content="#1976d2" />
   </head>

diff --git a/apps/mix-kanban/src/index.html b/apps/mix-kanban/src/index.html
@@ -1,3 +1,4 @@
+
 <!DOCTYPE html>
 <html lang="en">
   <head>
@@ -11,6 +12,7 @@
       href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/2.3.1/css/flag-icon.min.css"
       rel="stylesheet"
     />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0..1,0" />
 
     <link rel="manifest" href="manifest.webmanifest" />
     <meta name="theme-color" content="#1976d2" />

diff --git a/libs/mix-lib/src/model/core/database.model.ts b/libs/mix-lib/src/model/core/database.model.ts
@@ -421,3 +421,27 @@ export const DatabaseProviderDisplay: Record<
   [DatabaseProvider.PostgreSQL]: 'Postgres Sql',
   [DatabaseProvider.SQLITE]: 'Sql Lite',
 };
+
+export const DataTypeToAgCellEditor = (dataType: DataType) => {
+  switch (dataType) {
+    case DataType.Text:
+    case DataType.Icon:
+    case DataType.ImageUrl:
+    case DataType.VideoYoutube:
+    case DataType.Url:
+    case DataType.Password:
+      return 'agTextCellEditor';
+    case DataType.Integer:
+    case DataType.Double:
+    case DataType.Duration:
+      return 'agNumberCellEditor';
+    case DataType.Date:
+      return 'agDateCellEditor';
+    case DataType.DateTime:
+      return 'agDateCellEditor';
+    case DataType.MultilineText:
+      return 'agLargeTextCellEditor';
+    default:
+      return 'agTextCellEditor';
+  }
+};
diff --git a/libs/mix-share/src/components/main-side-menu/main-side-menu.component.scss b/libs/mix-share/src/components/main-side-menu/main-side-menu.component.scss
@@ -91,6 +91,10 @@
 
     &:hover {
       opacity: 0.8;
+
+      .mix-icon {
+        font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+      }
     }
 
     &:first-of-type {
@@ -126,6 +130,12 @@
     &.--active,
     &:hover {
       background-color: var(--menu-active-color);
+
+      .side-menu__parent-container {
+        .mix-icon {
+          font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+        }
+      }
     }
 
     &.--route-active {

diff --git a/libs/mix-share/src/modules/database/database-data/database-data.component.ts b/libs/mix-share/src/modules/database/database-data/database-data.component.ts
@@ -8,7 +8,12 @@ import {
 } from '@angular/core';
 import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { ActivatedRoute } from '@angular/router';
-import { MixDatabase, MixDynamicData, MixFilter } from '@mixcore/lib/model';
+import {
+  DataTypeToAgCellEditor,
+  MixDatabase,
+  MixDynamicData,
+  MixFilter,
+} from '@mixcore/lib/model';
 import { MixApiFacadeService } from '@mixcore/share/api';
 import {
   BasicMixFilterComponent,
@@ -181,6 +186,7 @@ export class DatabaseDataComponent
                   dataType: x.dataType,
                   columnType: 'value',
                 },
+                cellEditor: DataTypeToAgCellEditor(x.dataType),
               }
           );
           this.columnNames = s.db.columns.map((x) => x.displayName);

diff --git a/libs/share-styles/src/styles/material-symbol.scss b/libs/share-styles/src/styles/material-symbol.scss
@@ -1,18 +1,3 @@
-/* fallback */
-@font-face {
-  font-family: 'Material Symbols Outlined';
-  font-style: normal;
-  font-weight: 400;
-  src: url('./fonts/mat-symbol-400.woff2') format('woff2');
-}
-
-@font-face {
-  font-family: 'Material Symbols Outlined';
-  font-style: normal;
-  font-weight: 200;
-  src: url('./fonts/mat-symbol-200.woff2') format('woff2');
-}
-
 .material-symbols-outlined {
   font-family: 'Material Symbols Outlined';
   font-weight: normal;
@@ -43,4 +28,5 @@
   direction: ltr;
   -webkit-font-feature-settings: 'liga';
   -webkit-font-smoothing: antialiased;
+  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
 }
diff --git a/libs/share-styles/src/styles/tippy.scss b/libs/share-styles/src/styles/tippy.scss
@@ -46,8 +46,16 @@
   align-items: center;
   gap: 6px;
 
+  .mix-icon {
+    @apply text-gray-900;
+  }
+
   &:hover {
     background-color: var(--tui-base-02);
+
+    .mix-icon {
+      font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+    }
   }
 }