From 95fb5a4baa08d8a35d1e2433ddd3d10eee4f360f Mon Sep 17 00:00:00 2001 From: Chaim Lev-Ari Date: Fri, 12 Aug 2022 06:47:56 +0300 Subject: [PATCH] fix(ui): fix ui bugs [EE-3847] (#7453) --- app/assets/css/app.css | 10 +- app/assets/css/bootstrap-override.css | 19 ---- app/assets/css/button.css | 87 +++++++++++++----- app/assets/css/theme.css | 91 ++++++------------- app/assets/css/vendor-override.css | 30 +----- .../images-datatable/imagesDatatable.html | 24 ++--- .../services/edit/includes/constraints.html | 4 +- .../edit/includes/containerlabels.html | 2 +- .../edit/includes/environmentvariables.html | 2 +- .../views/services/edit/includes/hosts.html | 4 +- .../views/services/edit/includes/mounts.html | 2 +- .../services/edit/includes/networks.html | 4 +- .../edit/includes/placementPreferences.html | 4 +- .../views/services/edit/includes/ports.html | 4 +- .../services/edit/includes/servicelabels.html | 4 +- .../PageHeader/HeaderContainer.html | 4 - .../components/PageHeader/HeaderContainer.ts | 4 - .../PageHeader/HeaderContent.controller.js | 15 --- .../components/PageHeader/HeaderContent.html | 3 - .../components/PageHeader/HeaderContent.ts | 8 -- .../PageHeader/HeaderTitle.controller.js | 15 --- .../components/PageHeader/HeaderTitle.html | 20 ---- .../components/PageHeader/HeaderTitle.ts | 11 --- app/portainer/components/PageHeader/index.ts | 12 --- .../components/datatables/datatable.css | 70 ++++++++------ app/portainer/components/index.js | 3 +- .../components/BoxSelector/BoxSelector.css | 5 - .../PageHeader/Breadcrumbs/Breadcrumbs.css | 12 --- .../Breadcrumbs/Breadcrumbs.test.tsx | 7 +- .../PageHeader/Breadcrumbs/Breadcrumbs.tsx | 10 +- ...ntainer.css => HeaderContainer.module.css} | 46 +++++----- .../PageHeader/HeaderContainer.stories.tsx | 16 ++-- .../components/PageHeader/HeaderContainer.tsx | 7 +- .../PageHeader/HeaderContent.test.tsx | 31 ------- .../components/PageHeader/HeaderContent.tsx | 13 --- .../components/PageHeader/HeaderTitle.tsx | 12 ++- .../components/PageHeader/PageHeader.tsx | 6 +- .../__snapshots__/HeaderContent.test.tsx.snap | 3 - app/react/components/PageHeader/index.ts | 8 +- .../components/buttons/Button.stories.tsx | 18 ---- app/react/components/buttons/Button.tsx | 2 - .../buttons/ButtonGroup.stories.tsx | 14 +-- .../ContainersDatatableActions.tsx | 28 +++--- 43 files changed, 246 insertions(+), 448 deletions(-) delete mode 100644 app/portainer/components/PageHeader/HeaderContainer.html delete mode 100644 app/portainer/components/PageHeader/HeaderContainer.ts delete mode 100644 app/portainer/components/PageHeader/HeaderContent.controller.js delete mode 100644 app/portainer/components/PageHeader/HeaderContent.html delete mode 100644 app/portainer/components/PageHeader/HeaderContent.ts delete mode 100644 app/portainer/components/PageHeader/HeaderTitle.controller.js delete mode 100644 app/portainer/components/PageHeader/HeaderTitle.html delete mode 100644 app/portainer/components/PageHeader/HeaderTitle.ts delete mode 100644 app/portainer/components/PageHeader/index.ts delete mode 100644 app/react/components/PageHeader/Breadcrumbs/Breadcrumbs.css rename app/react/components/PageHeader/{HeaderContainer.css => HeaderContainer.module.css} (65%) delete mode 100644 app/react/components/PageHeader/HeaderContent.test.tsx delete mode 100644 app/react/components/PageHeader/HeaderContent.tsx delete mode 100644 app/react/components/PageHeader/__snapshots__/HeaderContent.test.tsx.snap diff --git a/app/assets/css/app.css b/app/assets/css/app.css index 14112535a..1dec9f844 100644 --- a/app/assets/css/app.css +++ b/app/assets/css/app.css @@ -40,6 +40,12 @@ body, position: relative; } +.logo { + display: inline; + max-width: 155px; + max-height: 55px; +} + .white-space-normal { white-space: normal !important; } @@ -76,10 +82,6 @@ body, font-size: 18px; } -.header_title_content { - margin-left: 5px; -} - .form-section-title { @apply text-gray-9; @apply th-dark:text-gray-5; diff --git a/app/assets/css/bootstrap-override.css b/app/assets/css/bootstrap-override.css index fd0c99306..501508817 100644 --- a/app/assets/css/bootstrap-override.css +++ b/app/assets/css/bootstrap-override.css @@ -329,25 +329,6 @@ input:checked + .slider:before { border: 0px; } -/* Databatle Setting Menu */ - -.tableMenu { - border: 1px solid var(--border-bootbox); - border-radius: 8px; -} - -[data-reach-menu-list], -[data-reach-menu-items] { - background: none; -} - -.dropdown-menu { - border-radius: 8px; -} -.dropdown-menu .tableMenu { - border: 0px; -} - /* Status Indicator Inside Table Section Label Style */ .table .label { border-radius: 8px !important; diff --git a/app/assets/css/button.css b/app/assets/css/button.css index de76ce96f..e83b9b873 100644 --- a/app/assets/css/button.css +++ b/app/assets/css/button.css @@ -1,17 +1,24 @@ .btn { - @apply disabled:opacity-60; @apply !outline-none; @apply border border-solid border-transparent; - border-radius: 5px; + border-radius: 8px; display: inline-flex; justify-content: space-around; align-items: center; gap: 5px; } -.btn-group { - display: inline-flex; +.btn.disabled, +.btn[disabled], +fieldset[disabled] .btn { + @apply opacity-40; + pointer-events: none; + touch-action: none; +} + +.btn:hover { + color: var(--text-button-hover-color); } .btn.active { @@ -19,12 +26,11 @@ } .btn-primary { - @apply bg-blue-8 border-blue-8; - @apply hover:bg-blue-9 hover:border-blue-9; + @apply text-white bg-blue-8 border-blue-8; + @apply hover:text-white hover:bg-blue-9 hover:border-blue-9; @apply th-dark:hover:bg-blue-7 th-dark:hover:border-blue-7; } -.btn-primary:focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary { @@ -40,20 +46,17 @@ /* Button Secondary */ .btn-secondary { @apply border border-solid; - @apply disabled:border-transparent; @apply text-blue-9 bg-blue-2 border-blue-8; - @apply hover:bg-blue-3 focus:bg-blue-3; + @apply hover:bg-blue-3; @apply th-dark:text-blue-3 th-dark:bg-gray-10 th-dark:border-blue-7; @apply th-dark:hover:bg-blue-11; - @apply th-dark:focus:bg-gray-10 th-dark:focus:border-blue-5; } .btn-danger { @apply bg-error-8 border-error-8; @apply hover:bg-error-7 hover:border-error-7 hover:text-white; - @apply focus:bg-error-8 focus:text-white focus:border-blue-5; } .btn-danger:active, @@ -68,19 +71,25 @@ @apply hover:bg-error-2 th-dark:hover:bg-error-11; @apply border-error-5 th-dark:border-error-7 th-highcontrast:border-error-7; @apply border border-solid; - - @apply focus:border-blue-5; } .btn-success { background-color: var(--ui-success-7); } +.btn-success:hover { + color: var(--white-color); +} + +/* secondary-grey */ +.btn-default, .btn-light { - @apply hover:bg-gray-2 th-dark:hover:bg-gray-9; - background-color: var(--bg-button-group-color); - border: 1px solid var(--border-button-group); - color: var(--text-button-group-color); + @apply bg-white border-gray-5 text-gray-9; + @apply hover:bg-gray-3 hover:border-gray-5 hover:text-gray-10; + + /* dark mode */ + @apply th-dark:bg-gray-warm-10 th-dark:border-gray-warm-7 th-dark:text-gray-warm-4; + @apply th-dark:hover:bg-gray-warm-9 th-dark:hover:border-gray-6 th-dark:hover:text-gray-warm-4; } .btn-light:active, @@ -89,15 +98,51 @@ background-color: var(--ui-gray-3); } -form a, -.form-group a, .hyperlink { color: var(--ui-blue-8); } -form a:hover, -.form-group a:hover, .hyperlink:hover { text-decoration: underline; color: var(--ui-blue-9); } + +.btn-group { + display: inline-flex; +} + +.input-group-btn .btn.active, +.btn-group .btn.active { + @apply bg-blue-2 text-blue-10 border-blue-5; + @apply th-dark:bg-blue-11 th-dark:text-blue-2 th-dark:border-blue-9; +} + +/* focus */ + +.btn-primary:focus, +.btn-secondary:focus, +.btn-light:focus { + @apply border-blue-5; +} + +.btn-danger:focus, +.btn-dangerlight:focus { + @apply border-blue-6; +} + +.btn-primary:focus, +.btn-secondary:focus, +.btn-light:focus, +.btn-danger:focus, +.btn-dangerlight:focus { + --btn-focus-color: var(--ui-blue-3); + box-shadow: 0px 0px 0px 4px var(--btn-focus-color); +} + +[theme='dark'] .btn-primary:focus, +[theme='dark'] .btn-secondary:focus, +[theme='dark'] .btn-light:focus, +[theme='dark'] .btn-danger:focus, +[theme='dark'] .btn-dangerlight:focus { + --btn-focus-color: var(--ui-blue-11); +} diff --git a/app/assets/css/theme.css b/app/assets/css/theme.css index e50508f98..150e891c5 100644 --- a/app/assets/css/theme.css +++ b/app/assets/css/theme.css @@ -93,10 +93,9 @@ --bg-main-color: var(--white-color); --bg-body-color: var(--grey-9); --bg-checkbox-border-color: var(--grey-49); - --bg-sidebar-header-color: var(--grey-37); --bg-widget-color: var(--white-color); --bg-widget-header-color: var(--grey-10); - --bg-widget-table-color: var(--grey-13); + --bg-widget-table-color: var(--ui-gray-3); --bg-header-color: var(--white-color); --bg-hover-table-color: var(--grey-14); --bg-switch-box-color: var(--ui-gray-5); @@ -111,6 +110,7 @@ --bg-navtabs-color: var(--white-color); --bg-navtabs-hover-color: var(--grey-16); --bg-table-selected-color: var(--grey-14); + --bg-codemirror-color: var(--white-color); --bg-codemirror-gutters-color: var(--grey-17); --bg-dropdown-menu-color: var(--white-color); --bg-log-viewer-color: var(--white-color); @@ -126,11 +126,7 @@ --bg-motd-body-color: var(--grey-20); --bg-item-highlighted-color: var(--grey-21); --bg-item-highlighted-null-color: var(--grey-14); - --bg-row-header-color: var(--white-color); - --bg-image-multiselect-button: linear-gradient(var(--white-color), var(--grey-17)); - --bg-multiselect-checkbox-color: var(--white-color); --bg-panel-body-color: var(--white-color); - --bg-codemirror-color: var(--white-color); --bg-codemirror-selected-color: var(--grey-22); --bg-tooltip-color: var(--ui-gray-11); --bg-input-sm-color: var(--white-color); @@ -149,8 +145,6 @@ --bg-btn-focus: var(--grey-59); --bg-boxselector-disabled-color: var(--white-color); --bg-small-select-color: var(--white-color); - --bg-app-datatable-thead: var(--grey-23); - --bg-app-datatable-tbody: var(--grey-24); --bg-stepper-item-active: var(--white-color); --bg-stepper-item-counter: var(--grey-61); --bg-sortbutton-color: var(--white-color); @@ -176,7 +170,6 @@ --text-link-color: var(--blue-2); --text-link-hover-color: var(--blue-4); --text-input-group-addon-color: var(--grey-25); - --text-btn-default-color: var(--grey-6); --text-blocklist-hover-color: var(--grey-37); --text-dashboard-item-color: var(--grey-32); --text-danger-color: var(--red-1); @@ -230,23 +223,18 @@ --border-md-checkbox-color: var(--grey-19); --border-modal-header-color: var(--grey-45); --border-navtabs-color: var(--ui-white); - --border-form-section-title-color: var(--grey-33); --border-codemirror-cursor-color: var(--black-color); - --border-codemirror-gutters-color: var(--grey-19); --border-pre-color: var(--grey-43); --border-blocklist-item-selected-color: var(--grey-46); - --border-pagination-color: var(--ui-white); --border-pagination-span-color: var(--ui-white); --border-pagination-hover-color: var(--ui-white); - --border-multiselect-button-color: var(--grey-48); - --border-searchbar-color: var(--grey-10); --border-panel-color: var(--white-color); + --border-input-sm-color: var(--grey-47); --border-daterangepicker-color: var(--grey-19); --border-calendar-table: var(--white-color); --border-daterangepicker: var(--grey-19); --border-pre-next-month: var(--black-color); --border-daterangepicker-after: var(--white-color); - --border-tooltip-color: var(--grey-47); --border-modal: 0px; --border-sortbutton: var(--grey-8); --border-bootbox: var(--ui-gray-5); @@ -261,7 +249,6 @@ --button-close-color: var(--black-color); --button-opacity: 0.2; --button-opacity-hover: 0.5; - --bg-boxselector-wrapper-color: var(--grey-6); --bg-image-multiselect: linear-gradient(var(--blue-2), var(--blue-2)); --bg-image-multiselect-button: linear-gradient(var(--white-color), var(--grey-17)); @@ -286,33 +273,27 @@ --text-button-group: var(--ui-gray-9); } +/* Dark Theme */ [theme='dark'] { - --bg-card-color: var(--grey-1); - --bg-main-color: var(--grey-2); --bg-body-color: var(--grey-2); --bg-btn-default-color: var(--grey-3); - --bg-blocklist-hover-color: var(--grey-iron-10); - --bg-boxselector-color: var(--grey-iron-10); + --bg-blocklist-hover-color: var(--ui-gray-iron-10); + --bg-boxselector-color: var(--ui-gray-iron-10); --bg-blocklist-item-selected-color: var(--grey-3); - --bg-boxselector-wrapper-disabled-color: var(--grey-39); --bg-card-color: var(--grey-1); --bg-checkbox-border-color: var(--grey-8); --bg-code-color: var(--ui-gray-warm-11); --bg-codemirror-color: var(--ui-gray-warm-11); --bg-codemirror-gutters-color: var(--ui-gray-warm-8); --bg-codemirror-selected-color: var(--ui-gray-warm-7); - --bg-dropdown-menu-color: var(--grey-1); + --bg-dropdown-menu-color: var(--ui-gray-7); --bg-main-color: var(--grey-2); --bg-widget-color: var(--ui-gray-warm-10); --bg-widget-header-color: var(--grey-1); - --bg-widget-table-color: var(--grey-1); + --bg-widget-table-color: var(--ui-gray-warm-9); --bg-header-color: var(--grey-2); --bg-hover-table-color: var(--grey-3); --bg-switch-box-color: var(--grey-53); - --bg-input-group-addon-color: var(--grey-3); - --bg-btn-default-color: var(--grey-3); - --bg-blocklist-hover-color: var(--grey-3); - --bg-boxselector-color: var(--grey-54); --bg-table-color: var(--grey-1); --bg-md-checkbox-color: var(--grey-31); --bg-form-control-disabled-color: var(--grey-3); @@ -320,14 +301,9 @@ --bg-navtabs-color: var(--ui-gray-warm-11); --bg-navtabs-hover-color: var(--grey-3); --bg-table-selected-color: var(--grey-3); - --bg-codemirror-color: var(--ui-gray-warm-11); - --bg-codemirror-gutters-color: var(--ui-gray-warm-8); - --bg-codemirror-selected-color: var(--ui-gray-warm-7); - --bg-dropdown-menu-color: var(--grey-1); --bg-log-viewer-color: var(--grey-2); --bg-log-line-selected-color: var(--grey-3); --bg-pre-color: var(--grey-2); - --bg-blocklist-item-selected-color: var(--grey-3); --bg-progress-color: var(--grey-3); --bg-pagination-color: var(--grey-3); --bg-pagination-span-color: var(--grey-1); @@ -336,13 +312,15 @@ --bg-motd-body-color: var(--grey-1); --bg-item-highlighted-color: var(--grey-2); --bg-item-highlighted-null-color: var(--grey-2); - --bg-row-header-color: var(--grey-2); - --bg-multiselect-button-color: var(--grey-3); - --bg-image-multiselect-button: none !important; - --bg-multiselect-checkbox-color: var(--grey-3); --bg-panel-body-color: var(--grey-1); - --bg-boxselector-wrapper-disabled-color: var(--grey-39); - --bg-sidebar-header-color: var(--grey-1); + --bg-input-group-addon-color: var(--grey-3); + --bg-tooltip-color: var(--grey-3); + --bg-input-sm-color: var(--grey-1); + --bg-service-datatable-thead: var(--grey-1); + --bg-inner-datatable-thead: var(--grey-1); + --bg-app-datatable-thead: var(--grey-1); + --bg-service-datatable-tbody: var(--grey-1); + --bg-app-datatable-tbody: var(--grey-1); --bg-multiselect-color: var(--grey-1); --bg-daterangepicker-color: var(--grey-3); --bg-calendar-color: var(--grey-3); @@ -351,19 +329,16 @@ --bg-daterangepicker-hover: var(--grey-4); --bg-daterangepicker-in-range: var(--ui-gray-warm-11); --bg-daterangepicker-active: var(--blue-14); - --bg-tooltip-color: var(--grey-3); --bg-input-autofill-color: var(--grey-2); --bg-btn-default-hover-color: var(--grey-3); --bg-btn-focus: var(--grey-3); --bg-boxselector-disabled-color: var(--grey-54); --bg-small-select-color: var(--grey-2); - --bg-app-datatable-thead: var(--grey-1); - --bg-app-datatable-tbody: var(--grey-1); --bg-stepper-item-active: var(--grey-1); --bg-stepper-item-counter: var(--grey-7); --bg-sortbutton-color: var(--grey-1); --bg-dashboard-item: var(--grey-3); - --bg-searchbar: var(--grey-2); + --bg-searchbar: var(--ui-grey-warm-11); --bg-inputbox: var(--grey-2); --bg-dropdown-hover: var(--grey-3); --bg-webeditor-color: var(--ui-gray-warm-9); @@ -383,7 +358,6 @@ --text-link-color: var(--blue-9); --text-link-hover-color: var(--blue-2); --text-input-group-addon-color: var(--grey-8); - --text-btn-default-color: var(--grey-8); --text-blocklist-hover-color: var(--white-color); --text-dashboard-item-color: var(--blue-2); --text-danger-color: var(--red-4); @@ -408,14 +382,13 @@ --text-ui-select-color: var(--white-color); --text-ui-select-hover-color: var(--white-color); --text-summary-color: var(--white-color); - --text-multiselect-button-color: var(--white-color); - --text-multiselect-item-color: var(--white-color); --text-boxselector-wrapper-color: var(--white-color); + --text-tooltip-color: var(--white-color); + --text-rzslider-color: var(--white-color); + --text-rzslider-limit-color: var(--white-color); --text-daterangepicker-end-date: var(--grey-7); --text-daterangepicker-in-range: var(--white-color); --text-daterangepicker-active: var(--white-color); - --text-tooltip-color: var(--white-color); - --text-btn-default-color: var(--white-color); --text-input-autofill-color: var(--grey-8); --text-button-hover-color: var(--white-color); --text-small-select-color: var(--grey-7); @@ -439,21 +412,18 @@ --border-md-checkbox-color: var(--grey-41); --border-modal-header-color: var(--grey-1); --border-navtabs-color: var(--grey-38); - --border-form-section-title-color: var(--grey-8); --border-codemirror-cursor-color: var(--white-color); - --border-codemirror-gutters-color: var(--grey-26); --border-pre-color: var(--grey-3); --border-blocklist-item-selected-color: var(--grey-38); --border-pagination-span-color: var(--grey-1); --border-pagination-hover-color: var(--grey-3); - --border-boxselector-wrapper-hover: 3px solid var(--blue-8); --border-panel-color: var(--grey-2); + --border-input-sm-color: var(--grey-3); --border-daterangepicker-color: var(--grey-3); --border-calendar-table: var(--grey-3); --border-daterangepicker: var(--grey-4); --border-pre-next-month: var(--white-color); --border-daterangepicker-after: var(--grey-3); - --border-tooltip-color: var(--grey-3); --border-modal: 0px; --border-sortbutton: var(--grey-3); --border-bootbox: var(--ui-gray-9); @@ -486,12 +456,13 @@ --sort-icon: var(--ui-gray-3); --border-checkbox: var(--ui-gray-5); --bg-checkbox: var(--white-color); - --border-searchbar: var(--grey-54); + --border-searchbar: var(--ui-gray-warm-9); --bg-button-group: var(--white-color); --border-button-group: var(--ui-gray-5); --text-button-group: var(--ui-gray-9); } +/* High Contrast Theme */ [theme='highcontrast'] { --bg-card-color: var(--black-color); --bg-main-color: var(--black-color); @@ -504,10 +475,8 @@ --bg-hover-table-color: var(--grey-3); --bg-switch-box-color: var(--grey-53); --bg-panel-body-color: var(--black-color); - --bg-boxselector-wrapper-disabled-color: var(--grey-39); --bg-dropdown-menu-color: var(--black-color); --bg-codemirror-selected-color: var(--grey-3); - --bg-row-header-color: var(--black-color); --bg-motd-body-color: var(--black-color); --bg-blocklist-hover-color: var(--black-color); --bg-blocklist-item-selected-color: var(--black-color); @@ -518,11 +487,15 @@ --bg-codemirror-selected-color: var(--grey-3); --bg-log-viewer-color: var(--black-color); --bg-log-line-selected-color: var(--grey-3); - --bg-sidebar-header-color: var(--black-color); --bg-modal-content-color: var(--black-color); --bg-form-control-disabled-color: var(--grey-1); --bg-input-sm-color: var(--black-color); --bg-item-highlighted-color: var(--black-color); + --bg-service-datatable-thead: var(--black-color); + --bg-inner-datatable-thead: var(--black-color); + --bg-app-datatable-thead: var(--black-color); + --bg-service-datatable-tbody: var(--black-color); + --bg-app-datatable-tbody: var(--black-color); --bg-pagination-color: var(--grey-3); --bg-pagination-span-color: var(--ui-black); --bg-multiselect-color: var(--grey-1); @@ -548,8 +521,6 @@ --bg-boxselector-color: var(--black-color); --bg-boxselector-disabled-color: var(--black-color); --bg-small-select-color: var(--black-color); - --bg-app-datatable-thead: var(--black-color); - --bg-app-datatable-tbody: var(--black-color); --bg-stepper-item-active: var(--black-color); --bg-stepper-item-counter: var(--grey-3); --bg-sortbutton-color: var(--grey-1); @@ -591,7 +562,6 @@ --text-daterangepicker-in-range: var(--white-color); --text-daterangepicker-active: var(--white-color); --text-ui-select-color: var(--white-color); - --text-btn-default-color: var(--white-color); --text-json-tree-color: var(--white-color); --text-json-tree-leaf-color: var(--white-color); --text-json-tree-branch-preview-color: var(--white-color); @@ -600,9 +570,7 @@ --text-input-autofill-color: var(--white-color); --text-navtabs-color: var(--white-color); --text-button-hover-color: var(--white-color); - --text-btn-default-color: var(--white-color); --text-small-select-color: var(--white-color); - --text-multiselect-item-color: var(--white-color); --text-pagination-span-color: var(--ui-white); --text-bootbox: var(--white-color); --text-pagination-span-hover-color: var(--ui-white); @@ -618,8 +586,6 @@ --border-datatable-top-color: var(--grey-55); --border-sidebar-high-contrast: 1px solid var(--blue-9); --border-code-high-contrast: 1px solid var(--white-color); - --border-boxselector-wrapper: 3px solid var(--blue-2); - --border-boxselector-wrapper-hover: 3px solid var(--blue-8); --border-panel-color: var(--white-color); --border-input-group-addon-color: var(--grey-54); --border-modal-header-color: var(--grey-3); @@ -631,7 +597,6 @@ --border-daterangepicker: var(--black-color); --border-pre-next-month: var(--white-color); --border-daterangepicker-after: var(--black-color); - --border-tooltip-color: var(--white-color); --border-pre-color: var(--grey-3); --border-codemirror-cursor-color: var(--white-color); --border-modal: 1px solid var(--white-color); diff --git a/app/assets/css/vendor-override.css b/app/assets/css/vendor-override.css index 2c0ded0ec..f2636fec0 100644 --- a/app/assets/css/vendor-override.css +++ b/app/assets/css/vendor-override.css @@ -48,12 +48,6 @@ a:focus { border: 1px solid var(--border-input-group-addon-color); } -.btn-default { - color: var(--text-btn-default-color); - background-color: var(--bg-btn-default-color); - border-color: var(--border-btn-default-color); -} - .text-danger { color: var(--ui-error-9); } @@ -207,6 +201,7 @@ code { .dropdown-menu { background: var(--bg-dropdown-menu-color); + border-radius: 8px; } .dropdown-menu > li > a { @@ -397,31 +392,8 @@ input:-webkit-autofill { -webkit-text-fill-color: var(--text-input-autofill-color) !important; } -.btn:hover { - color: var(--text-button-hover-color); -} - -.btn-default:hover { - background-color: var(--bg-btn-default-hover-color); -} - -.btn-primary:hover { - color: var(--white-color) !important; -} - -.btn-success:hover { - color: var(--white-color); -} - /* Overide Vendor CSS */ -.btn.disabled, -.btn[disabled], -fieldset[disabled] .btn { - pointer-events: none; - touch-action: none; -} - .multiSelect.inlineBlock button { margin: 0; } diff --git a/app/docker/components/datatables/images-datatable/imagesDatatable.html b/app/docker/components/datatables/images-datatable/imagesDatatable.html index b5ac08aa2..bfde8badd 100644 --- a/app/docker/components/datatables/images-datatable/imagesDatatable.html +++ b/app/docker/components/datatables/images-datatable/imagesDatatable.html @@ -48,19 +48,11 @@
  • Force Remove
    • - +
    + +
    diff --git a/app/docker/views/services/edit/includes/constraints.html b/app/docker/views/services/edit/includes/constraints.html index 46a6a4ddb..ab4e4a227 100644 --- a/app/docker/views/services/edit/includes/constraints.html +++ b/app/docker/views/services/edit/includes/constraints.html @@ -2,8 +2,8 @@
    - - placement constraint + + placement constraint
    diff --git a/app/docker/views/services/edit/includes/containerlabels.html b/app/docker/views/services/edit/includes/containerlabels.html index 87842ef02..1e800af6f 100644 --- a/app/docker/views/services/edit/includes/containerlabels.html +++ b/app/docker/views/services/edit/includes/containerlabels.html @@ -2,7 +2,7 @@
    - + container label
    diff --git a/app/docker/views/services/edit/includes/environmentvariables.html b/app/docker/views/services/edit/includes/environmentvariables.html index 2b81c3c5c..996a0e38a 100644 --- a/app/docker/views/services/edit/includes/environmentvariables.html +++ b/app/docker/views/services/edit/includes/environmentvariables.html @@ -2,7 +2,7 @@
    - + environment variable
    diff --git a/app/docker/views/services/edit/includes/hosts.html b/app/docker/views/services/edit/includes/hosts.html index f98c7c7ad..1e3823343 100644 --- a/app/docker/views/services/edit/includes/hosts.html +++ b/app/docker/views/services/edit/includes/hosts.html @@ -2,8 +2,8 @@
    - - add host entry + + add host entry
    diff --git a/app/docker/views/services/edit/includes/mounts.html b/app/docker/views/services/edit/includes/mounts.html index a0a9c512c..167364d2d 100644 --- a/app/docker/views/services/edit/includes/mounts.html +++ b/app/docker/views/services/edit/includes/mounts.html @@ -2,7 +2,7 @@
    - + mount
    diff --git a/app/docker/views/services/edit/includes/networks.html b/app/docker/views/services/edit/includes/networks.html index 645d7192a..28995a7b3 100644 --- a/app/docker/views/services/edit/includes/networks.html +++ b/app/docker/views/services/edit/includes/networks.html @@ -2,8 +2,8 @@
    - - network + + network
    diff --git a/app/docker/views/services/edit/includes/placementPreferences.html b/app/docker/views/services/edit/includes/placementPreferences.html index 639e7381c..08b82592e 100644 --- a/app/docker/views/services/edit/includes/placementPreferences.html +++ b/app/docker/views/services/edit/includes/placementPreferences.html @@ -2,8 +2,8 @@
    - - placement preference + + placement preference
    diff --git a/app/docker/views/services/edit/includes/ports.html b/app/docker/views/services/edit/includes/ports.html index 98c2bd660..23d565fbc 100644 --- a/app/docker/views/services/edit/includes/ports.html +++ b/app/docker/views/services/edit/includes/ports.html @@ -2,8 +2,8 @@
    - - port mapping + + port mapping
    diff --git a/app/docker/views/services/edit/includes/servicelabels.html b/app/docker/views/services/edit/includes/servicelabels.html index 2c7e93f16..dbdd784fb 100644 --- a/app/docker/views/services/edit/includes/servicelabels.html +++ b/app/docker/views/services/edit/includes/servicelabels.html @@ -2,8 +2,8 @@
    - - label + + label
    diff --git a/app/portainer/components/PageHeader/HeaderContainer.html b/app/portainer/components/PageHeader/HeaderContainer.html deleted file mode 100644 index b3e309b92..000000000 --- a/app/portainer/components/PageHeader/HeaderContainer.html +++ /dev/null @@ -1,4 +0,0 @@ -
    -
    -
    -
    diff --git a/app/portainer/components/PageHeader/HeaderContainer.ts b/app/portainer/components/PageHeader/HeaderContainer.ts deleted file mode 100644 index 260074ac4..000000000 --- a/app/portainer/components/PageHeader/HeaderContainer.ts +++ /dev/null @@ -1,4 +0,0 @@ -export const Header = { - transclude: true, - templateUrl: './HeaderContainer.html', -}; diff --git a/app/portainer/components/PageHeader/HeaderContent.controller.js b/app/portainer/components/PageHeader/HeaderContent.controller.js deleted file mode 100644 index 7392c6be5..000000000 --- a/app/portainer/components/PageHeader/HeaderContent.controller.js +++ /dev/null @@ -1,15 +0,0 @@ -export default class HeaderContentController { - /* @ngInject */ - constructor(Authentication) { - this.Authentication = Authentication; - this.display = !window.ddExtension; - this.username = null; - } - - $onInit() { - const userDetails = this.Authentication.getUserDetails(); - if (userDetails) { - this.username = userDetails.username; - } - } -} diff --git a/app/portainer/components/PageHeader/HeaderContent.html b/app/portainer/components/PageHeader/HeaderContent.html deleted file mode 100644 index a31ac2848..000000000 --- a/app/portainer/components/PageHeader/HeaderContent.html +++ /dev/null @@ -1,3 +0,0 @@ -
    -
    -
    diff --git a/app/portainer/components/PageHeader/HeaderContent.ts b/app/portainer/components/PageHeader/HeaderContent.ts deleted file mode 100644 index f66fc11ea..000000000 --- a/app/portainer/components/PageHeader/HeaderContent.ts +++ /dev/null @@ -1,8 +0,0 @@ -import controller from './HeaderContent.controller'; - -export const HeaderContent = { - requires: '^rdHeader', - transclude: true, - templateUrl: './HeaderContent.html', - controller, -}; diff --git a/app/portainer/components/PageHeader/HeaderTitle.controller.js b/app/portainer/components/PageHeader/HeaderTitle.controller.js deleted file mode 100644 index eb19086fe..000000000 --- a/app/portainer/components/PageHeader/HeaderTitle.controller.js +++ /dev/null @@ -1,15 +0,0 @@ -export default class HeaderTitle { - /* @ngInject */ - constructor(Authentication) { - this.Authentication = Authentication; - this.display = !window.ddExtension; - this.username = null; - } - - $onInit() { - const userDetails = this.Authentication.getUserDetails(); - if (userDetails) { - this.username = userDetails.username; - } - } -} diff --git a/app/portainer/components/PageHeader/HeaderTitle.html b/app/portainer/components/PageHeader/HeaderTitle.html deleted file mode 100644 index cbbb616bf..000000000 --- a/app/portainer/components/PageHeader/HeaderTitle.html +++ /dev/null @@ -1,20 +0,0 @@ -
    - {{ $ctrl.titleText }} - -
    - - - - - {{ $ctrl.username }} - - - - diff --git a/app/portainer/components/PageHeader/HeaderTitle.ts b/app/portainer/components/PageHeader/HeaderTitle.ts deleted file mode 100644 index 7cd135876..000000000 --- a/app/portainer/components/PageHeader/HeaderTitle.ts +++ /dev/null @@ -1,11 +0,0 @@ -import controller from './HeaderTitle.controller'; - -export const HeaderTitle = { - requires: '^rdHeader', - bindings: { - titleText: '@', - }, - transclude: true, - templateUrl: './HeaderTitle.html', - controller, -}; diff --git a/app/portainer/components/PageHeader/index.ts b/app/portainer/components/PageHeader/index.ts deleted file mode 100644 index 55f1efc7c..000000000 --- a/app/portainer/components/PageHeader/index.ts +++ /dev/null @@ -1,12 +0,0 @@ -import angular from 'angular'; - -import { Header } from './HeaderContainer'; -import { HeaderContent } from './HeaderContent'; -import { HeaderTitle } from './HeaderTitle'; - -export const pageHeaderModule = angular - .module('portainer.app.components.header', []) - - .component('rdHeader', Header) - .component('rdHeaderContent', HeaderContent) - .component('rdHeaderTitle', HeaderTitle).name; diff --git a/app/portainer/components/datatables/datatable.css b/app/portainer/components/datatables/datatable.css index 3b64ced6c..79268a91a 100644 --- a/app/portainer/components/datatables/datatable.css +++ b/app/portainer/components/datatables/datatable.css @@ -39,12 +39,12 @@ @apply text-blue-7; } -.datatable tr > td a { +.datatable tr > td a:not(.btn) { color: var(--ui-blue-8); } -.datatable tr > td a:hover, -.datatable tr > td a:focus { +.datatable tr > td a:not(.btn):hover, +.datatable tr > td a:not(.btn):focus { text-decoration: underline; } @@ -84,10 +84,13 @@ .datatable .searchBar input[type='text'] { border: 0px !important; + @apply placeholder:text-gray-7; + @apply th-dark:placeholder:text-gray-warm-7; } .datatable .searchIcon { - color: #767676; + @apply text-gray-7; + @apply th-dark:text-gray-warm-5; margin-right: 5px; } @@ -165,31 +168,6 @@ vertical-align: middle; } -[data-reach-menu-list], -[data-reach-menu-items] { - padding: 0px; - border: 1px var(--bg-dropdown-menu-color); -} - -.tableMenu { - color: #767676; - padding: 15px; - background-color: var(--bg-dropdown-menu-color) !important; -} - -.tableMenu .menuHeader { - font-size: 16px; -} - -.tableMenu .menuContent { - font-size: 12px; - margin: 10px 0; -} - -.tableMenu .menuContent .md-radio:first-child { - margin: 0; -} - .datatable thead tr > th { white-space: nowrap; vertical-align: middle; @@ -362,3 +340,37 @@ border-radius: 8px; flex-grow: 2; } + +/* Databatle Setting Menu */ + +.tableMenu { + border: 1px solid var(--border-bootbox); + border-radius: 8px; + + color: var(--text-dropdown-menu-color); + padding: 15px; + background-color: var(--bg-dropdown-menu-color) !important; +} + +[data-reach-menu-list], +[data-reach-menu-items] { + padding: 0px; + border: 1px var(--bg-dropdown-menu-color); +} + +.dropdown-menu .tableMenu { + border: 0px; +} + +.tableMenu .menuHeader { + font-size: 16px; +} + +.tableMenu .menuContent { + font-size: 12px; + margin: 10px 0; +} + +.tableMenu .menuContent .md-radio:first-child { + margin: 0; +} diff --git a/app/portainer/components/index.js b/app/portainer/components/index.js index 5938abdd0..0c07d58c7 100644 --- a/app/portainer/components/index.js +++ b/app/portainer/components/index.js @@ -5,12 +5,11 @@ import gitFormModule from './forms/git-form'; import porAccessManagementModule from './accessManagement'; import widgetModule from './widget'; import { boxSelectorModule } from './BoxSelector'; -import { pageHeaderModule } from './PageHeader'; import { beFeatureIndicator } from './BEFeatureIndicator'; import { InformationPanelAngular } from './InformationPanel'; export default angular - .module('portainer.app.components', [pageHeaderModule, boxSelectorModule, widgetModule, gitFormModule, porAccessManagementModule, formComponentsModule]) + .module('portainer.app.components', [boxSelectorModule, widgetModule, gitFormModule, porAccessManagementModule, formComponentsModule]) .component('informationPanel', InformationPanelAngular) .component('beFeatureIndicator', beFeatureIndicator).name; diff --git a/app/react/components/BoxSelector/BoxSelector.css b/app/react/components/BoxSelector/BoxSelector.css index b846b152b..03657e86a 100644 --- a/app/react/components/BoxSelector/BoxSelector.css +++ b/app/react/components/BoxSelector/BoxSelector.css @@ -12,8 +12,3 @@ flex-direction: column; } } - -.row.header { - background-color: var(--bg-body-color) !important; - margin-bottom: 5px !important; -} diff --git a/app/react/components/PageHeader/Breadcrumbs/Breadcrumbs.css b/app/react/components/PageHeader/Breadcrumbs/Breadcrumbs.css deleted file mode 100644 index f64c861a9..000000000 --- a/app/react/components/PageHeader/Breadcrumbs/Breadcrumbs.css +++ /dev/null @@ -1,12 +0,0 @@ -.breadcrumb-links { - font-size: 10px; -} - -.breadcrumb-links a { - color: var(--ui-blue-8); -} - -.breadcrumb-links a:hover { - text-decoration: underline; - color: var(--ui-blue-9); -} diff --git a/app/react/components/PageHeader/Breadcrumbs/Breadcrumbs.test.tsx b/app/react/components/PageHeader/Breadcrumbs/Breadcrumbs.test.tsx index cb128b903..a9e6608b7 100644 --- a/app/react/components/PageHeader/Breadcrumbs/Breadcrumbs.test.tsx +++ b/app/react/components/PageHeader/Breadcrumbs/Breadcrumbs.test.tsx @@ -8,8 +8,9 @@ test('should display a Breadcrumbs, breadcrumbs should be separated by >', async { label: 'bread2' }, { label: 'bread3' }, ]; - const { queryByText } = render(); + const { container } = render(); - const heading = queryByText(breadcrumbs.map((b) => b.label).join(' > ')); - expect(heading).toBeVisible(); + expect(container.firstChild?.textContent).toEqual( + breadcrumbs.map((b) => b.label).join('>') + ); }); diff --git a/app/react/components/PageHeader/Breadcrumbs/Breadcrumbs.tsx b/app/react/components/PageHeader/Breadcrumbs/Breadcrumbs.tsx index 3a7b32f1c..d7c46f33b 100644 --- a/app/react/components/PageHeader/Breadcrumbs/Breadcrumbs.tsx +++ b/app/react/components/PageHeader/Breadcrumbs/Breadcrumbs.tsx @@ -2,8 +2,6 @@ import { Fragment } from 'react'; import { Link } from '@@/Link'; -import './Breadcrumbs.css'; - export interface Crumb { label: string; link?: string; @@ -19,11 +17,11 @@ export function Breadcrumbs({ breadcrumbs }: Props) { : [breadcrumbs]; return ( -
    +
    {breadcrumbsArray.map((crumb, index) => ( - {renderCrumb(crumb)} - {index !== breadcrumbsArray.length - 1 ? ' > ' : ''} + {renderCrumb(crumb)} + {index !== breadcrumbsArray.length - 1 && >} ))}
    @@ -44,7 +42,7 @@ function renderCrumb(crumb: Crumb | string) { {crumb.label} diff --git a/app/react/components/PageHeader/HeaderContainer.css b/app/react/components/PageHeader/HeaderContainer.module.css similarity index 65% rename from app/react/components/PageHeader/HeaderContainer.css rename to app/react/components/PageHeader/HeaderContainer.module.css index d5a58e20d..6a23e673b 100644 --- a/app/react/components/PageHeader/HeaderContainer.css +++ b/app/react/components/PageHeader/HeaderContainer.module.css @@ -1,33 +1,29 @@ -.row.header .meta .page { - padding-top: 7px; +.header { + min-height: 60px; + margin-bottom: 15px; + + background-color: var(--bg-body-color); + margin-bottom: 5px !important; } -.row.header { - min-height: 60px; - background: var(--bg-row-header-color); - margin-bottom: 15px; -} -.row.header > div:last-child { +.header > div:last-child { padding-right: 0; } -.row.header .meta .page { - font-size: 17px; - padding-top: 11px; -} -.row.header .meta div { +.header .meta div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } -.row.header .login a { + +.header .login a { padding: 18px; display: block; } -.row.header .user { +.header .user { min-width: 130px; } -.row.header .user > .item { +.header .user > .item { width: 65px; height: 60px; float: right; @@ -35,36 +31,36 @@ text-align: center; vertical-align: middle; } -.row.header .user > .item a { +.header .user > .item a { color: #919191; display: block; } -.row.header .user > .item i { +.header .user > .item i { font-size: 20px; line-height: 55px; } -.row.header .user > .item img { +.header .user > .item img { width: 40px; height: 40px; margin-top: 10px; border-radius: 2px; } -.row.header .user > .item ul.dropdown-menu { +.header .user > .item ul.dropdown-menu { border-radius: 2px; -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.05); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.05); } -.row.header .user > .item ul.dropdown-menu .dropdown-header { +.header .user > .item ul.dropdown-menu .dropdown-header { text-align: center; } -.row.header .user > .item ul.dropdown-menu li.link { +.header .user > .item ul.dropdown-menu li.link { text-align: left; } -.row.header .user > .item ul.dropdown-menu li.link a { +.header .user > .item ul.dropdown-menu li.link a { padding-left: 7px; padding-right: 7px; } -.row.header .user > .item ul.dropdown-menu:before { +.header .user > .item ul.dropdown-menu:before { position: absolute; top: -7px; right: 23px; @@ -74,7 +70,7 @@ border-left: 7px solid transparent; content: ''; } -.row.header .user > .item ul.dropdown-menu:after { +.header .user > .item ul.dropdown-menu:after { position: absolute; top: -6px; right: 24px; diff --git a/app/react/components/PageHeader/HeaderContainer.stories.tsx b/app/react/components/PageHeader/HeaderContainer.stories.tsx index 8b3bc7faf..e870c6188 100644 --- a/app/react/components/PageHeader/HeaderContainer.stories.tsx +++ b/app/react/components/PageHeader/HeaderContainer.stories.tsx @@ -7,7 +7,6 @@ import { UserViewModel } from '@/portainer/models/user'; import { HeaderContainer } from './HeaderContainer'; import { Breadcrumbs } from './Breadcrumbs'; import { HeaderTitle } from './HeaderTitle'; -import { HeaderContent } from './HeaderContent'; export default { component: HeaderContainer, @@ -28,14 +27,13 @@ function Template({ title }: StoryProps) { - - - + + ); diff --git a/app/react/components/PageHeader/HeaderContainer.tsx b/app/react/components/PageHeader/HeaderContainer.tsx index 12bb1595f..acc840dad 100644 --- a/app/react/components/PageHeader/HeaderContainer.tsx +++ b/app/react/components/PageHeader/HeaderContainer.tsx @@ -1,6 +1,7 @@ import { PropsWithChildren, createContext, useContext } from 'react'; +import clsx from 'clsx'; -import './HeaderContainer.css'; +import styles from './HeaderContainer.module.css'; const Context = createContext(null); @@ -15,10 +16,10 @@ export function useHeaderContext() { export function HeaderContainer({ children }: PropsWithChildren) { return ( -
    +
    -
    {children}
    +
    {children}
    diff --git a/app/react/components/PageHeader/HeaderContent.test.tsx b/app/react/components/PageHeader/HeaderContent.test.tsx deleted file mode 100644 index e43ac28e0..000000000 --- a/app/react/components/PageHeader/HeaderContent.test.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import { renderWithQueryClient } from '@/react-tools/test-utils'; - -import { HeaderContainer } from './HeaderContainer'; -import { HeaderContent } from './HeaderContent'; - -test('should not render without a wrapping HeaderContainer', async () => { - const consoleErrorFn = jest - .spyOn(console, 'error') - .mockImplementation(() => jest.fn()); - - function renderComponent() { - return renderWithQueryClient(); - } - - expect(renderComponent).toThrowErrorMatchingSnapshot(); - - consoleErrorFn.mockRestore(); -}); - -test('should display a HeaderContent', async () => { - const content = 'content'; - - const { queryByText } = renderWithQueryClient( - - {content} - - ); - - const contentElement = queryByText(content); - expect(contentElement).toBeVisible(); -}); diff --git a/app/react/components/PageHeader/HeaderContent.tsx b/app/react/components/PageHeader/HeaderContent.tsx deleted file mode 100644 index 7a327a34c..000000000 --- a/app/react/components/PageHeader/HeaderContent.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import { PropsWithChildren } from 'react'; - -import { useHeaderContext } from './HeaderContainer'; - -export function HeaderContent({ children }: PropsWithChildren) { - useHeaderContext(); - - return ( -
    -
    {children}
    -
    - ); -} diff --git a/app/react/components/PageHeader/HeaderTitle.tsx b/app/react/components/PageHeader/HeaderTitle.tsx index 90dd8e575..006b5db1a 100644 --- a/app/react/components/PageHeader/HeaderTitle.tsx +++ b/app/react/components/PageHeader/HeaderTitle.tsx @@ -24,13 +24,17 @@ export function HeaderTitle({ title, children }: PropsWithChildren) { const { user } = useUser(); return ( -
    - {title} - {children} +
    +
    +
    + {title} +
    + {children && {children}} +
    - - - + + {reload && ( - ); -} - -export function Success() { - return ( - - ); -} - export function Danger() { return (