Merge pull request #1452 from rocket-admin/fixes

lyubov-voloshko · web-flow · commit 73212a1918b8 · 2025-11-27T02:52:42.000+02:00
Fixes
diff --git a/frontend/src/app/components/dashboard/dashboard.component.css b/frontend/src/app/components/dashboard/dashboard.component.css
@@ -1,3 +1,7 @@
+:host {
+    margin-bottom: -60px;
+}
+
 .mat-sidenav-container {
     height: 100%;
     /* height: calc(100vh - 56px); */
@@ -50,10 +54,6 @@
     text-decoration: none;
 }
 
-.mat-sidenav-content {
-    padding: 0 24px;
-}
-
 .toggle-button {
     margin-top: 8px;
     margin-left: 12px;
@@ -116,6 +116,10 @@
 
 .table-preview-content {
     flex-grow: 1;
+    padding-bottom: 24px;
+    height: calc(100vh - 44px);
+    padding: 0 24px;
+    overflow-y: scroll;
     width: 100%;
 }
 
diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-row-view/db-table-row-view.component.css b/frontend/src/app/components/dashboard/db-table-view/db-table-row-view/db-table-row-view.component.css
@@ -12,7 +12,7 @@
     background-color: var(--mat-sidenav-content-background-color);
     border-left: solid 1px rgba(0, 0, 0, 0.12);
     opacity: 1;
-    transform: translateX(24px);
+    transform: translateX(0);
     width: clamp(200px, 22vw, 400px);
 }
 
@@ -31,7 +31,7 @@
         left: 0;
         min-height: initial;
         max-height: initial;
-        width: calc(100vw - 24px);
+        width: 100vw;
         z-index: 2;
     }
 }
diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.css b/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.css
@@ -201,7 +201,7 @@
 
 @media (prefers-color-scheme: light) {
     .db-table-manage-columns-button__count {
-        color: rgba(0, 0, 0, 0.64);
+        color: rgba(0, 0, 0, 0.52);
     }
 }
 
@@ -289,7 +289,7 @@
 
 @media (prefers-color-scheme: dark) {
     .db-table ::ng-deep .db-table-row:hover {
-        --hover-color: var(--color-primaryPalette-500);
+        --hover-color: var(--color-primaryPalette-900);
     }
 }
 
@@ -429,13 +429,13 @@ th.mat-header-cell, td.mat-cell {
 
 @media (prefers-color-scheme: light) {
     .db-table-cell-actions {
-        color: #4f4f4f;
+        color: rgba(0,0,0,0.64);
     }
 }
 
 @media (prefers-color-scheme: dark) {
     .db-table-cell-actions {
-        color: #cdcdcd;
+        color: rgba(255,255,255,0.64);
     }
 }
 
@@ -466,6 +466,17 @@ th.mat-header-cell, td.mat-cell {
     justify-content: flex-end;
 }
 
+.db-table-cell-action-button {
+    --mdc-icon-button-state-layer-size: 30px !important;
+    --mdc-icon-button-icon-size: 20px !important;
+}
+
+.db-table-cell-action-button ::ng-deep .mat-icon {
+    font-size: 20px;
+    height: 20px;
+    width: 20px;
+}
+
 .table-cell-content {
     overflow: hidden;
     white-space: nowrap;
diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.html b/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.html
@@ -282,6 +282,7 @@ <h2 class="mat-h2 table-name">{{ displayName }}</h2>
                 <mat-cell *matCellDef="let element; let i = index" class="db-table-cell-actions">
                     <ng-container *ngIf="tableData.tableActions && tableData.tableActions.length">
                         <button type="button" mat-icon-button *ngFor="let action of tableData.tableActions"
+                            class="db-table-cell-action-button"
                             [matTooltip]="action.title"
                             (click)="handleAction($event, action, element)">
                             <mat-icon fontSet="material-icons-outlined">
@@ -292,6 +293,7 @@ <h2 class="mat-h2 table-name">{{ displayName }}</h2>
                     <a mat-icon-button *ngIf="tableData.permissions.edit"
                         routerLink="/dashboard/{{connectionID}}/{{name}}/entry"
                         [queryParams]="tableData.getQueryParams(element)"
+                        class="db-table-cell-action-button"
                         attr.data-testid="table-edit-record-{{i}}-link"
                         attr.data-test-primary-key-name="{{tableData.keyAttributes[0]?.column_name}}"
                         attr.data-test-primary-key-value="{{element[tableData.keyAttributes[0]?.column_name]}}"
@@ -304,6 +306,7 @@ <h2 class="mat-h2 table-name">{{ displayName }}</h2>
                     <a mat-icon-button *ngIf="tableData.permissions.add"
                         routerLink="/dashboard/{{connectionID}}/{{name}}/entry"
                         [queryParams]="tableData.getQueryParams(element, 'dub')"
+                        class="db-table-cell-action-button"
                         attr.data-testid="table-duplicate-record-{{i}}-link"
                         attr.data-test-primary-key-name="{{tableData.keyAttributes[0]?.column_name}}"
                         attr.data-test-primary-key-value="{{element[tableData.keyAttributes[0]?.column_name]}}"
@@ -314,6 +317,7 @@ <h2 class="mat-h2 table-name">{{ displayName }}</h2>
                         <mat-icon fontSet="material-icons-outlined">difference</mat-icon>
                     </a>
                     <button type="button" mat-icon-button *ngIf="tableData.permissions.delete && tableData.canDelete"
+                        class="db-table-cell-action-button"
                         attr.data-testid="table-delete-record-{{i}}-button"
                         angulartics2On="click"
                         angularticsAction="Dashboard: delete row is clicked"
diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-widgets/widget/widget.component.css b/frontend/src/app/components/dashboard/db-table-view/db-table-widgets/widget/widget.component.css
@@ -14,7 +14,7 @@
 .code-editor-box {
     display: block;
     border: 1px solid rgba(0, 0, 0, 0.38);
-    border-radius: 0;
+    border-radius: 4px;
     margin-bottom: 20px;
     overflow-y: auto;
     resize: vertical;
diff --git a/frontend/src/app/components/dashboard/db-tables-data-source.ts b/frontend/src/app/components/dashboard/db-tables-data-source.ts
@@ -317,7 +317,7 @@ export class TablesDataSource implements DataSource<Object> {
   getActionsColumnWidth(actions, permissions) {
     const defaultActionsCount = permissions.edit + permissions.add + (!!permissions.delete && !!this.canDelete);
     const totalActionsCount = actions.length + defaultActionsCount;
-    const lengthValue = ((totalActionsCount * 36) + 32);
+    const lengthValue = ((totalActionsCount * 30) + 32);
     return totalActionsCount === 0 ? '0' : `${lengthValue}px`
   }
 
diff --git a/frontend/src/app/components/ui-components/record-edit-fields/code/code.component.css b/frontend/src/app/components/ui-components/record-edit-fields/code/code.component.css
@@ -1,7 +1,7 @@
 .code-editor-box {
     display: block;
     border: 1px solid rgba(0, 0, 0, 0.38);
-    border-radius: 0;
+    border-radius: 4px;
     margin-top: 4px;
     margin-bottom: 20px;
     /* overflow-y: auto;
diff --git a/frontend/src/app/components/ui-components/record-edit-fields/json-editor/json-editor.component.css b/frontend/src/app/components/ui-components/record-edit-fields/json-editor/json-editor.component.css
@@ -1,7 +1,7 @@
 .code-editor-box {
     display: block;
     border: 1px solid rgba(0, 0, 0, 0.38);
-    border-radius: 0;
+    border-radius: 4px;
     margin-top: 4px;
     margin-bottom: 20px;
     /* overflow-y: auto;
diff --git a/frontend/src/app/components/ui-components/table-display-fields/foreign-key/foreign-key.component.css b/frontend/src/app/components/ui-components/table-display-fields/foreign-key/foreign-key.component.css
@@ -13,9 +13,18 @@
   transition: background 100ms, border-color 100ms;
 }
 
-.foreign-key-button:hover{
-  background-color: var(--color-accentedPalette-100);
-  border: 1px solid var(--color-accentedPalette-300);
+@media (prefers-color-scheme: dark) {
+  .foreign-key-button:hover{
+    background-color: var(--color-accentedPalette-900);
+    border: 1px solid var(--color-accentedPalette-700);
+  }
+}
+
+@media (prefers-color-scheme: light) {
+  .foreign-key-button:hover{
+    background-color: var(--color-accentedPalette-100);
+    border: 1px solid var(--color-accentedPalette-300);
+  }
 }
 
 .foreign-key-button_selected {
diff --git a/frontend/src/custom-theme.scss b/frontend/src/custom-theme.scss
@@ -22,7 +22,7 @@ html {
   --mdc-filled-button-container-shape: 4px;
   --mdc-outlined-button-container-shape: 4px;
   --mdc-text-button-container-shape: 4px;
-  --mdc-outlined-text-field-container-shape: 0px !important;
+  --mdc-outlined-text-field-container-shape: 4px !important;
 }
 
 @media (prefers-color-scheme: dark) {

Original file line number	Diff line number	Diff line change
`@@ -12,7 +12,7 @@`
`12`	`12`	`background-color: var(--mat-sidenav-content-background-color);`
`13`	`13`	`border-left: solid 1px rgba(0, 0, 0, 0.12);`
`14`	`14`	`opacity: 1;`
`15`		`- transform: translateX(24px);`
	`15`	`+ transform: translateX(0);`
`16`	`16`	`width: clamp(200px, 22vw, 400px);`
`17`	`17`	`}`
`18`	`18`
`@@ -31,7 +31,7 @@`
`31`	`31`	`left: 0;`
`32`	`32`	`min-height: initial;`
`33`	`33`	`max-height: initial;`
`34`		`- width: calc(100vw - 24px);`
	`34`	`+ width: 100vw;`
`35`	`35`	`z-index: 2;`
`36`	`36`	`}`
`37`	`37`	`}`
Original file line number	Diff line number	Diff line change
`@@ -201,7 +201,7 @@`
`201`	`201`
`202`	`202`	`@media (prefers-color-scheme: light) {`
`203`	`203`	`.db-table-manage-columns-button__count {`
`204`		`- color: rgba(0, 0, 0, 0.64);`
	`204`	`+ color: rgba(0, 0, 0, 0.52);`
`205`	`205`	`}`
`206`	`206`	`}`
`207`	`207`
`@@ -289,7 +289,7 @@`
`289`	`289`
`290`	`290`	`@media (prefers-color-scheme: dark) {`
`291`	`291`	`.db-table ::ng-deep .db-table-row:hover {`
`292`		`- --hover-color: var(--color-primaryPalette-500);`
	`292`	`+ --hover-color: var(--color-primaryPalette-900);`
`293`	`293`	`}`
`294`	`294`	`}`
`295`	`295`
`@@ -429,13 +429,13 @@ th.mat-header-cell, td.mat-cell {`
`429`	`429`
`430`	`430`	`@media (prefers-color-scheme: light) {`
`431`	`431`	`.db-table-cell-actions {`
`432`		`- color: #4f4f4f;`
	`432`	`+ color: rgba(0,0,0,0.64);`
`433`	`433`	`}`
`434`	`434`	`}`
`435`	`435`
`436`	`436`	`@media (prefers-color-scheme: dark) {`
`437`	`437`	`.db-table-cell-actions {`
`438`		`- color: #cdcdcd;`
	`438`	`+ color: rgba(255,255,255,0.64);`
`439`	`439`	`}`
`440`	`440`	`}`
`441`	`441`
`@@ -466,6 +466,17 @@ th.mat-header-cell, td.mat-cell {`
`466`	`466`	`justify-content: flex-end;`
`467`	`467`	`}`
`468`	`468`
	`469`	`+.db-table-cell-action-button {`
	`470`	`+ --mdc-icon-button-state-layer-size: 30px !important;`
	`471`	`+ --mdc-icon-button-icon-size: 20px !important;`
	`472`	`+}`
	`473`	`+`
	`474`	`+.db-table-cell-action-button ::ng-deep .mat-icon {`
	`475`	`+ font-size: 20px;`
	`476`	`+ height: 20px;`
	`477`	`+ width: 20px;`
	`478`	`+}`
	`479`	`+`
`469`	`480`	`.table-cell-content {`
`470`	`481`	`overflow: hidden;`
`471`	`482`	`white-space: nowrap;`
Original file line number	Diff line number	Diff line change
`@@ -317,7 +317,7 @@ export class TablesDataSource implements DataSource<Object> {`
`317`	`317`	`getActionsColumnWidth(actions, permissions) {`
`318`	`318`	`const defaultActionsCount = permissions.edit + permissions.add + (!!permissions.delete && !!this.canDelete);`
`319`	`319`	`const totalActionsCount = actions.length + defaultActionsCount;`
`320`		`- const lengthValue = ((totalActionsCount * 36) + 32);`
	`320`	`+ const lengthValue = ((totalActionsCount * 30) + 32);`
`321`	`321`	return totalActionsCount === 0 ? '0' : `${lengthValue}px`
`322`	`322`	`}`
`323`	`323`
Original file line number	Diff line number	Diff line change
`@@ -22,7 +22,7 @@ html {`
`22`	`22`	`--mdc-filled-button-container-shape: 4px;`
`23`	`23`	`--mdc-outlined-button-container-shape: 4px;`
`24`	`24`	`--mdc-text-button-container-shape: 4px;`
`25`		`- --mdc-outlined-text-field-container-shape: 0px !important;`
	`25`	`+ --mdc-outlined-text-field-container-shape: 4px !important;`
`26`	`26`	`}`
`27`	`27`
`28`	`28`	`@media (prefers-color-scheme: dark) {`