Docker/portainer
Docker/portainer
1
0
Fork 0
mirror of https://github.com/portainer/portainer.git synced 2025-08-05 05:45:22 +02:00
Code Issues Releases Activity

refactor(ui): replace ng selectors with react-select [EE-3608] (#7203)

Browse source 
Co-authored-by: LP B <xAt0mZ@users.noreply.github.com>
This commit is contained in:
Chaim Lev-Ari 2022-09-21 10:10:58 +03:00 • committed by GitHub
parent 1e21961e6a
commit ceaee4e175
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
66 changed files with 1188 additions and 625 deletions
Download patch file Download diff file Expand all files Collapse all files

54
app/assets/css/app.css
View file

@ -692,60 +692,6 @@ input[type='checkbox'] {
/*!bootbox override*/
/*angular-multi-select override*/
.multiSelect > button {
min-height: 30px !important;
background-image: var(--bg-image-multiselect-button);
border-color: var(--border-multiselect);
color: var(--text-multiselect);
background-color: var(--bg-multiselect-color);
}
.multiSelect > button:hover {
background-image: var(--bg-image-multiselect-hover);
}
.multiSelect .checkboxLayer {
border-color: var(--border-multiselect-checkboxlayer);
}
.multiSelect .checkBoxContainer {
background-color: var(--bg-multiselect-checkboxcontainer);
}
.multiSelect .multiSelectItem {
color: var(--text-multiselect-item);
}
.multiSelect .helperContainer {
background-color: var(--bg-multiselect-helpercontainer);
}
.multiSelect .multiSelectFocus {
background-image: var(--bg-image-multiselect);
}
.multiSelect .multiSelectItem:not(.multiSelectGroup).selected {
background-image: var(--bg-image-multiselect);
color: var(--white-color);
border: none;
}
.multiSelect .multiSelectItem:hover,
.multiSelect .multiSelectGroup:hover {
border-color: var(--grey-3);
background-image: var(--bg-image-multiselect) !important;
color: var(--white-color) !important;
}
.multiSelect .tickMark,
.widget .widget-body table tbody .multiSelect .tickMark {
top: 2px;
right: 12px;
font-size: 20px !important;
}
/*!angular-multi-select override*/
/*toaster override*/
#toast-container > div {
opacity: 0.9;

2
app/assets/css/index.js
View file

@ -1,4 +1,3 @@
import 'ui-select/dist/select.css';
import 'bootstrap/dist/css/bootstrap.css';
import '@fortawesome/fontawesome-free/css/brands.css';
import '@fortawesome/fontawesome-free/css/solid.css';
@ -11,7 +10,6 @@ import 'codemirror/addon/lint/lint.css';
import 'angular-json-tree/dist/angular-json-tree.css';
import 'angular-loading-bar/build/loading-bar.css';
import 'angular-moment-picker/dist/angular-moment-picker.min.css';
import 'angular-multiselect/isteven-multi-select.css';
import 'spinkit/spinkit.min.css';
import '@reach/menu-button/styles.css';

38
app/assets/css/theme.css
View file

@ -125,7 +125,6 @@
--border-pagination-color: var(--ui-white);
--bg-pagination-span-color: var(--white-color);
--bg-pagination-hover-color: var(--ui-blue-3);
--bg-ui-select-hover-color: var(--grey-14);
--bg-motd-body-color: var(--grey-20);
--bg-item-highlighted-color: var(--grey-21);
--bg-item-highlighted-null-color: var(--grey-14);
@ -135,7 +134,6 @@
--bg-input-sm-color: var(--white-color);
--bg-app-datatable-thead: var(--grey-23);
--bg-app-datatable-tbody: var(--grey-24);
--bg-multiselect-color: var(--white-color);
--bg-daterangepicker-color: var(--white-color);
--bg-calendar-color: var(--white-color);
--bg-calendar-table-color: var(--white-color);
@ -194,8 +192,6 @@
--text-pagination-color: var(--grey-26);
--text-pagination-span-color: var(--grey-3);
--text-pagination-span-hover-color: var(--grey-3);
--text-ui-select-color: var(--grey-6);
--text-ui-select-hover-color: var(--grey-28);
--text-summary-color: var(--black-color);
--text-tooltip-color: var(--white-color);
--text-rzslider-color: var(--grey-36);
@ -253,16 +249,6 @@
--button-opacity: 0.2;
--button-opacity-hover: 0.5;
--bg-image-multiselect: linear-gradient(var(--blue-2), var(--blue-2));
--bg-image-multiselect-button: linear-gradient(var(--white-color), var(--grey-17));
--bg-image-multiselect-hover: linear-gradient(var(--white-color), var(--grey-43));
--border-multiselect: var(--grey-48);
--border-multiselect-checkboxlayer: var(--grey-51);
--text-multiselect: var(--grey-29);
--text-multiselect-selectitem: var(--white-color);
--bg-multiselect-checkboxcontainer: var(--white-color);
--text-multiselect-item: var(--grey-30);
--bg-multiselect-helpercontainer: var(--white-color);
--text-input-textarea: var(--white-color);
--user-menu-icon-color: var(--ui-gray-4);
@ -315,7 +301,6 @@
--bg-pagination-color: var(--grey-3);
--bg-pagination-span-color: var(--grey-1);
--bg-pagination-hover-color: var(--grey-3);
--bg-ui-select-hover-color: var(--grey-3);
--bg-motd-body-color: var(--grey-1);
--bg-item-highlighted-color: var(--grey-2);
--bg-item-highlighted-null-color: var(--grey-2);
@ -328,7 +313,6 @@
--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);
--bg-calendar-table-color: var(--grey-3);
@ -386,8 +370,6 @@
--text-pagination-color: var(--white-color);
--text-pagination-span-color: var(--ui-white);
--text-pagination-span-hover-color: var(--ui-white);
--text-ui-select-color: var(--white-color);
--text-ui-select-hover-color: var(--white-color);
--text-summary-color: var(--white-color);
--text-boxselector-wrapper-color: var(--white-color);
--text-tooltip-color: var(--white-color);
@ -447,15 +429,6 @@
--shadow-box-color: none;
--shadow-boxselector-color: none;
--bg-image-multiselect: linear-gradient(var(--grey-38), var(--grey-38));
--bg-image-multiselect-button: linear-gradient(var(--grey-1), var(--grey-1));
--bg-image-multiselect-hover: linear-gradient(var(--grey-3), var(--grey-3));
--border-multiselect: var(--grey-3);
--border-multiselect-checkboxlayer: var(--grey-3);
--text-multiselect: var(--white-color);
--bg-multiselect-checkboxcontainer: var(--grey-3);
--text-multiselect-item: var(--white-color);
--bg-multiselect-helpercontainer: var(--grey-1);
--text-input-textarea: var(--grey-1);
--user-menu-icon-color: var(--grey-3);
@ -508,7 +481,6 @@
--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);
--bg-daterangepicker-color: var(--black-color);
--bg-calendar-color: var(--black-color);
--bg-calendar-table-color: var(--black-color);
@ -568,7 +540,6 @@
--text-daterangepicker-end-date: var(--ui-white);
--text-daterangepicker-in-range: var(--white-color);
--text-daterangepicker-active: var(--white-color);
--text-ui-select-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);
@ -619,15 +590,6 @@
--shadow-box-color: none;
--shadow-boxselector-color: none;
--bg-image-multiselect: linear-gradient(var(--black-color), var(--black-color));
--bg-image-multiselect-button: linear-gradient(var(--grey-1), var(--grey-1));
--bg-image-multiselect-hover: linear-gradient(var(--grey-3), var(--grey-3));
--border-multiselect: var(--black-color);
--border-multiselect-checkboxlayer: var(--grey-3);
--text-multiselect: var(--white-color);
--bg-multiselect-checkboxcontainer: var(--grey-3);
--text-multiselect-item: var(--white-color);
--bg-multiselect-helpercontainer: var(--grey-1);
--text-input-textarea: var(--black-color);
--bg-item-highlighted-null-color: var(--grey-2);
--text-cm-default-color: var(--blue-9);

31
app/assets/css/vendor-override.css
View file

@ -245,37 +245,6 @@ json-tree .branch-preview {
background-color: var(--bg-progress-color);
}
.ui-select-search,
.ui-select-toggle {
height: 30px;
min-width: 260px;
padding: 4px 12px;
}
.ui-select-toggle {
justify-content: flex-start !important;
}
.ui-select-match-text {
display: flex;
flex-direction: row-reverse;
align-items: center;
}
.ui-select-match-text > a {
verical-align: middle;
}
.ui-select-bootstrap .ui-select-choices-row > span {
color: var(--text-ui-select-color);
}
.ui-select-bootstrap .ui-select-choices-row > span:hover,
.ui-select-bootstrap .ui-select-choices-row > span:focus {
background-color: var(--bg-ui-select-hover-color);
color: var(--text-ui-select-hover-color);
}
.motd-body {
background-color: var(--bg-motd-body-color) !important;
}