feat: added sidebar, fixed styles

vxcontrol · Dec 25, 2023 · df209fa · df209fa
1 parent a36e99e
commit df209fa
Show file tree

Hide file tree

Showing 8 changed files with 230 additions and 175 deletions.
diff --git a/web/libs/features/modules-interactivity/src/lib/components/grid/grid.component.js b/web/libs/features/modules-interactivity/src/lib/components/grid/grid.component.js
diff --git a/...eractivity/src/lib/components/module-interactive-part/_module-interactive-part.theme.scss b/...eractivity/src/lib/components/module-interactive-part/_module-interactive-part.theme.scss
@@ -0,0 +1,30 @@
+$grid-border-color: #e4e7ed;
+
+@mixin module-interactive-part-theme($mosaic-theme) {
+    .module-interactivity-container {
+        .drag-select {
+            .sortable-ghost {
+                color: #fff !important;
+                background: #909399 !important;
+            }
+        }
+
+        .el-table .el-table__row_selected {
+            background-color: #f0f7ff;
+        }
+
+        .el-pagination__selected {
+            color: #606266;
+        }
+
+        .vue-grid__search-input .el-input-group__prepend {
+            background-color: #fff;
+        }
+
+        .vue-grid__container,
+        .sidebar,
+        .el-button.el-button--default {
+            border-color: $grid-border-color;
+        }
+    }
+}
diff --git a/...ctivity/src/lib/components/module-interactive-part/module-interactive-part.component.scss b/...ctivity/src/lib/components/module-interactive-part/module-interactive-part.component.scss
@@ -1,3 +1,5 @@
+$pagination-height: 58px;
+
 .module-interactivity-part {
     display: block;
     box-sizing: border-box;
@@ -11,8 +13,6 @@
     .drag-select {
         .sortable-ghost {
             opacity: 0.8;
-            color: #fff !important;
-            background: #909399 !important;
         }
 
         .el-tag {
@@ -86,13 +86,8 @@
         }
     }
 
-    .el-table .el-table__row_selected {
-        background-color: #f0f7ff;
-    }
-
     .el-pagination__selected {
         font-weight: normal;
-        color: #606266;
     }
 
     .el-table .el-table__row .cell {
@@ -110,9 +105,16 @@
         text-overflow: ellipsis;
     }
 
+    .el-table--fit {
+        height: calc(100% - $pagination-height) !important;
+    }
+
+    .el-pagination {
+        padding: 15px 15px;
+    }
+
     .vue-grid__search-input .el-input-group__prepend {
         width: 140px;
-        background-color: #fff;
     }
 
     .vue-grid__search-container_has-searchable-fields {
@@ -149,6 +151,14 @@
 
     .vue-grid__container {
         position: relative;
+        border-top: 1px solid transparent;
+    }
+
+    .sidebar {
+        width: 280px;
+        min-width: 280px;
+        padding: 15px 15px 0;
+        border-left: 1px solid transparent;
     }
 
     .vue-grid_no-selectable {
@@ -166,4 +176,8 @@
         right: 0;
         padding: 0 10px;
     }
+
+    .el-button.el-button--default {
+        border-color: transparent;
+    }
 }
diff --git a/web/libs/i18n-resources/en-US/modules-interactivity.json b/web/libs/i18n-resources/en-US/modules-interactivity.json
@@ -1,8 +1,9 @@
 {
+    "ModulesInteractivity.Grid.DropdownItemText.ClearSelection": "Clear selection",
     "ModulesInteractivity.Grid.DropdownItemText.SelectAll": "Select All",
     "ModulesInteractivity.Grid.DropdownItemText.SelectPage": "Select everything on the page",
-    "ModulesInteractivity.Grid.DropdownItemText.ClearSelection": "Clear selection",
-    "ModulesInteractivity.Grid.Text.RowsSummary": "Total: {total}, {selected, select, all {all selected} other {selected: {selected}}}",
     "ModulesInteractivity.Grid.SelectPlaceholder.SelectColumns": "Select the displayed columns in the table",
+    "ModulesInteractivity.Grid.Text.RowsSummary": "Total: {total}",
+    "ModulesInteractivity.Grid.Text.RowsSummarySelected": "Total: {total}, {selected, select, all {all selected} other {selected: {selected}}}",
     "ModulesInteractivity.Grid.TooltipText.ColumnsSettings": "Columns setting"
 }
diff --git a/web/libs/i18n-resources/ru-RU/modules-interactivity.json b/web/libs/i18n-resources/ru-RU/modules-interactivity.json
@@ -1,8 +1,9 @@
 {
+    "ModulesInteractivity.Grid.DropdownItemText.ClearSelection": "Снять выделение",
     "ModulesInteractivity.Grid.DropdownItemText.SelectAll": "Выбрать все",
     "ModulesInteractivity.Grid.DropdownItemText.SelectPage": "Выбрать все на странице",
-    "ModulesInteractivity.Grid.DropdownItemText.ClearSelection": "Снять выделение",
-    "ModulesInteractivity.Grid.Text.RowsSummary": "Всего: {total}, {selected, select, all {выбраны все} other {выбрано: {selected}}}",
     "ModulesInteractivity.Grid.SelectPlaceholder.SelectColumns": "Выберите отображаемые столбцы в таблице",
+    "ModulesInteractivity.Grid.Text.RowsSummary": "Всего: {total}",
+    "ModulesInteractivity.Grid.Text.RowsSummarySelected": "Всего: {total}, {selected, select, all {выбраны все} other {выбрано: {selected}}}",
     "ModulesInteractivity.Grid.TooltipText.ColumnsSettings": "Выбрать столбцы"
 }
diff --git a/web/libs/styles/src/lib/_components.theme.scss b/web/libs/styles/src/lib/_components.theme.scss
@@ -32,6 +32,7 @@
 @use '../../../features/agents/src/lib/routes/agents-page/agents-page.theme';
 @use '../../../features/distributions/src/lib/routes/distributions-page/distributions-page.theme';
 @use '../../../features/login/src/lib/routes/login-page/login-page.theme';
+@use '../../../features/modules-interactivity/src/lib/components/module-interactive-part/module-interactive-part.theme';
 @use '../../../features/modules/src/lib/components/import-module-modal/import-module-modal.theme';
 @use '../../../features/modules/src/lib/components/toggle-item/toggle-item.theme';
 @use '../../../features/password/src/lib/routes/password-change/password-change.theme';
@@ -47,6 +48,7 @@
     @include action-details-panel.action-details-panel-theme($mosaic-theme);
     @include action-priority.action-priority-theme($mosaic-theme);
     @include actionbar.actionbar-theme($mosaic-theme);
+    @include ag-grid-theme.ag-grid-theme($mosaic-theme);
     @include agent-connection-status.agent-connection-status-theme($mosaic-theme);
     @include agent-version.agent-version-theme($mosaic-theme);
     @include agents-page.agents-page-component-theme($mosaic-theme);
@@ -68,15 +70,15 @@
     @include import-module-modal.import-module-modal-theme($mosaic-theme);
     @include login-page.login-page-theme($mosaic-theme);
     @include mc-tabs.mc-tabs($mosaic-theme);
+    @include module-interactive-part.module-interactive-part-theme($mosaic-theme);
     @include modules-config.modules-config-theme($mosaic-theme);
     @include multiple-selection-panel.multiple-selection-panel-theme($mosaic-theme);
     @include navbar.navbar-theme($mosaic-theme);
     @include os.os-theme($mosaic-theme);
     @include page-layout.page-layout-theme($mosaic-theme);
-    @include progress-container.progress-container-theme($mosaic-theme);
     @include password-change.password-change-theme($mosaic-theme);
     @include policies-page.policies-page-component-theme($mosaic-theme);
-    @include ag-grid-theme.ag-grid-theme($mosaic-theme);
+    @include progress-container.progress-container-theme($mosaic-theme);
     @include related-list.related-list-theme($mosaic-theme);
     @include secure-module-config.secure-module-config-theme($mosaic-theme);
     @include sidebar.sidebar-theme($mosaic-theme);

diff --git a/web/libs/styles/src/lib/element-ui/components/table.scss b/web/libs/styles/src/lib/element-ui/components/table.scss
@@ -48,10 +48,6 @@
             }
         }
 
-        &::before {
-            @include mixins.extend-rule(border-pseudo);
-        }
-
         // table--border
         @include mixins.m(border) {
             th {

diff --git a/web/libs/styles/src/lib/overriden-vue/_overriden-vue.theme.scss b/web/libs/styles/src/lib/overriden-vue/_overriden-vue.theme.scss
@@ -26,4 +26,12 @@
     .vue_error-text {
         color: theming.mc-color(map-get($theme, error), 400) !important;
     }
+
+    .el-pagination .el-select .el-input .el-input__inner {
+        border-color: map-get($theme, foreground, divider);
+    }
+
+    .el-tabs--left .el-tabs__header.is-left {
+        margin-right: theming.$size-l;
+    }
 }