Merge pull request #975 from rocket-admin/mobile-version-dashboard

Mobile version dashboard

Author: lyubov-voloshko

frontend/src/app/app.component.css

@@ -59,6 +59,12 @@
     transition: outline 0.2s;
 }
 
+@media (prefers-color-scheme: dark) {
+    .nav-bar__button {
+        color: #fff;
+    }
+}
+
 .nav-bar__account-button ::ng-deep .mat-badge-content {
     top: 14px;
     left: 32px;
@@ -81,6 +87,12 @@
     font-weight: 500 !important;
 }
 
+@media (prefers-color-scheme: dark) {
+    .nav-bar__button_active {
+        --mdc-text-button-label-text-color: var(--color-accentedDarkPalette-500) !important;
+    }
+}
+
 @media screen and (max-width: 600px) {
     .nav-bar__button_active {
         color: inherit;

frontend/src/app/components/connect-db/connect-db.component.css

@@ -181,6 +181,12 @@
     text-decoration: none;
 }
 
+@media (prefers-color-scheme: dark) {
+    .instruction-step__link {
+        color: var(--color-accentedDarkPalette-500);
+    }
+}
+
 .instruction-step__link:hover {
     color: #FE5E85;
     text-decoration: underline;

frontend/src/app/components/dashboard/dashboard.component.css

@@ -8,10 +8,11 @@
     max-width: 240px;
 }
 
-/* .mat-sidenav {
-    padding-bottom: 16px;
-    width: clamp(200px, 15%, 280px);
-} */
+@media (width <= 600px) {
+    .table-list-sidenav {
+        display: none;
+    }
+}
 
 .side-bar_collapsed {
     position: static;
@@ -25,7 +26,7 @@
 
 @media (width <= 600px) {
     .side-bar_collapsed {
-        margin-left: -65px;
+        display: none;
     }
 }
 
@@ -44,13 +45,6 @@
     margin-top: 24px;
 }
 
-@media (width <= 600px) {
-    .toggle-button-position {
-        margin-bottom: -8px;
-        margin-top: 0;
-    }
-}
-
 .toggle-button {
     background-color: var(--mat-sidenav-content-background-color);
     border-radius: 4px 0 0 4px !important;
@@ -60,13 +54,6 @@
     box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.1),0px 6px 8px 0px rgba(0, 0, 0, 0.07),0px 1px 8px 0px rgba(0, 0, 0, 0.06);
 }
 
-@media (width <= 600px) {
-    .toggle-button {
-        min-width: 0 !important;
-        width: 36px !important;
-    }
-}
-
 .toggle-button::ng-deep .mat-button-wrapper {
     padding: 0;
 }
@@ -79,12 +66,6 @@
     margin-left: -2px;
 }
 
-@media (width <= 600px) {
-    .toggle-button-position__opened::ng-deep .material-icons {
-        margin-right: -2px;
-    }
-}
-
 .toggle-button-position__closed::ng-deep .material-icons {
     margin-left: 2px;
 }
@@ -125,12 +106,6 @@
     overflow-x: hidden;
 }
 
-@media (width <= 600px) {
-    .table-preview {
-        padding-top: 36px;
-    }
-}
-
 .table-preview-content {
     flex-grow: 1;
     width: 100%;
@@ -140,24 +115,3 @@
     display: none !important;
 }
 
-@media (width <= 600px) {
-    .sidenav-content__toggle-button {
-        /* margin-top: 24px; */
-        position: relative;
-        margin-bottom: -36px;
-        z-index: 2;
-    }
-
-    .sidenav-content__toggle-button::ng-deep .material-icons {
-        margin-right: -4px;
-    }
-
-    .sidenav-content__toggle-button_shown-mobile {
-        display: block !important;
-    }
-
-    .sidenav-content__toggle-button_shown-mobile::ng-deep .material-icons {
-        margin-left: -2px;
-    }
-}
-

frontend/src/app/components/dashboard/dashboard.component.html

@@ -81,6 +81,7 @@ <h3 class='mat-subheading-2'>Rocketadmin can not find any tables</h3>
                     [connectionID]="connectionID"
                     [isTestConnection]="currentConnectionIsTest"
                     [accessLevel]="currentConnectionAccessLevel"
+                    [tables]="tablesList"
                     (openFilters)="openTableFilters($event)"
                     (removeFilter)="removeFilter($event)"
                     (resetAllFilters)="clearAllFilters()"

frontend/src/app/components/dashboard/db-action-link-dialog/db-action-link-dialog.component.css

@@ -1,3 +1,9 @@
 .location-link {
     color: var(--color-accentedPalette-500);
+}
+
+@media (prefers-color-scheme: dark) {
+    .location-link {
+        color: var(--color-accentedDarkPalette-500);
+    }
 }

frontend/src/app/components/dashboard/db-table-actions/db-table-actions.component.css

@@ -116,6 +116,14 @@
     padding: 4px;
 }
 
+@media (prefers-color-scheme: dark) {
+    .text_highlighted {
+        background: var(--color-accentedDarkPalette-200);
+        color: var(--color-accentedDarkPalette-200-contrast);
+    }
+}
+
+
 .event {
     display: flex;
     align-items: center;
@@ -151,6 +159,14 @@
     --mdc-list-list-item-focus-label-text-color: var(--color-accentedPalette-500);
 }
 
+@media (prefers-color-scheme: dark) {
+    .list-action-list-item_active {
+        --mdc-list-list-item-label-text-color: var(--color-accentedDarkPalette-500);
+        --mdc-list-list-item-hover-label-text-color: var(--color-accentedDarkPalette-500);
+        --mdc-list-list-item-focus-label-text-color: var(--color-accentedDarkPalette-500);
+    }
+}
+
 /* .actions-icon-selector {
     display: flex;
     align-items: center;

frontend/src/app/components/dashboard/db-table-ai-panel/db-table-ai-panel.component.css

@@ -8,6 +8,13 @@
     transition: width 400ms ease, transform 400ms ease, opacity 400ms ease;
 }
 
+@media (width <= 600px) {
+    .ai-panel-sidebar {
+        width: 100vw;
+        z-index: 10;
+    }
+}
+
 .ai-panel-sidebar_open {
     opacity: 1;
     transform: translateX(24px);
@@ -34,6 +41,14 @@
     z-index: 0;
 }
 
+@media (width <= 600px) {
+    .ai-panel-sidebar-content {
+        left: 0;
+        width: 100vw;
+        z-index: 5;
+    }
+}
+
 .ai-panel-sidebar__header {
     display: flex;
     align-items: center;
@@ -165,4 +180,10 @@
 
 .link {
     color: var(--color-accentedPalette-500);
+}
+
+@media (prefers-color-scheme: dark) {
+    .link {
+        color: var(--color-accentedDarkPalette-500);
+    }
 }

frontend/src/app/components/dashboard/db-table/db-table.component.css

@@ -33,9 +33,38 @@
     }
 }
 
-.db-table-title .mat-h2 {
-    margin-bottom: 0;
-    margin-right: 8px;
+.table-name {
+    margin-bottom: 0 !important;
+    margin-right: 8px !important;
+}
+
+@media (width <= 600px) {
+    .table-name {
+        display: none;
+    }
+}
+
+.table-switcher {
+    display: none;
+}
+
+@media (width <= 600px) {
+    .table-switcher {
+        display: initial;
+        margin-top: 12px;
+    }
+}
+
+.table-switcher-option ::ng-deep .mdc-list-item__primary-text {
+    width: 100%;
+}
+
+.table-switcher-link {
+    display: inline-block;
+    color: inherit;
+    line-height: 48px;
+    text-decoration: none;
+    width: 100%;
 }
 
 .db-table-bulk-actions {
@@ -130,6 +159,12 @@
     pointer-events: none;
 }
 
+@media (prefers-color-scheme: dark) {
+    .ai-icon ::ng-deep svg path {
+        fill: #fff;
+    }
+}
+
 .db-table-manage-columns-button {
     display: inline-block;
 }
@@ -452,6 +487,12 @@ tr.mat-row:hover {
     color: var(--color-accentedPalette-500);
 }
 
+@media (prefers-color-scheme: dark) {
+    .foreign-key-link {
+        color: var(--color-accentedDarkPalette-500);
+    }
+}
+
 .empty-table {
     display: flex;
     flex-direction: column;

frontend/src/app/components/dashboard/db-table/db-table.component.html

@@ -1,6 +1,29 @@
 <div class="db-table-header" #focus>
     <div class="db-table-title">
-        <h2 class="mat-h2">{{ displayName }}</h2>
+        <h2 class="mat-h2 table-name">{{ displayName }}</h2>
+
+        <mat-form-field appearance="outline" class="table-switcher">
+            <mat-label>Table</mat-label>
+            <input type="text"
+                placeholder="Select a table"
+                matInput
+                [value]="name"
+                [matAutocomplete]="auto"
+                (focus)="onInputFocus()"
+                (input)="onInput($event.target.value)">
+            <mat-autocomplete autoActiveFirstOption
+                #auto="matAutocomplete">
+                <mat-option *ngFor="let table of filteredTables"
+                    class="table-switcher-option"
+                    [value]="table.table">
+                    <a class="table-switcher-link"
+                        routerLink="/dashboard/{{connectionID}}/{{table.table}}"
+                        [queryParams]="{page_index: 0, page_size: 30}">
+                        {{table.normalizedTableName}}
+                </a>
+                </mat-option>
+            </mat-autocomplete>
+        </mat-form-field>
 
         <button mat-icon-button (click)="loadRowsPage()">
             <mat-icon>refresh</mat-icon>
@@ -42,8 +65,8 @@ <h2 class="mat-h2">{{ displayName }}</h2>
                     angulartics2On="click"
                     angularticsAction="Dashboard: AI is clicked"
                     (click)="handleViewAIpanel()">
-                    <mat-icon svgIcon="ai_rocket"></mat-icon>
-                    AI
+                    <mat-icon svgIcon="ai_rocket" class="ai-icon"></mat-icon>
+                    AI insights
                 </button>
 
                 <a mat-button *ngIf="tableData && tableData.permissions && tableData.permissions.add && (!tableData.isEmptyTable || searchString || getFiltersCount(activeFilters))"