github
/
portainer
mirror of https://github.com/portainer/portainer
1
0
Fork 0
Code Issues Releases Wiki Activity

feat(sidebar): add dark theme colors [EE-3666] (#7414)

pull/6738/head
Chaim Lev-Ari 2022-08-10 07:12:20 +03:00 committed by GitHub
parent fb3a31a4fd
commit c3ce4d8b53
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
83 changed files with 1738 additions and 1200 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/agent/components/files-datatable/filesDatatable.html
View File

@ -3,7 +3,9 @@
<rd-widget-body classes="no-padding">
<div class="toolBar">
<div class="toolBarTitle vertical-center">
<pr-icon icon="$ctrl.titleIcon" feather="true" class-name="'icon-nested-blue'" mode="'primary'"></pr-icon>
<div class="widget-icon space-right">
<pr-icon icon="$ctrl.titleIcon" feather="true"></pr-icon>
</div>
{{ $ctrl.titleText }}
</div>
<div class="searchBar vertical-center">

6
app/assets/css/app.css
View File

@ -86,11 +86,15 @@ body,
}
.form-section-title {
@apply text-gray-9;
@apply th-dark:text-gray-5;
@apply th-highcontrast:text-white;
margin-top: 5px;
margin-bottom: 10px;
color: var(--text-form-section-title-color);
padding-left: 0;
font-weight: 500;
font-size: 16px;
}
.form-horizontal .control-label.text-left {

17
app/assets/css/bootstrap-override.css
View File

@ -16,11 +16,6 @@
font-weight: 500;
}
.form-section-title {
color: var(--ui-gray-9);
font-size: 16px;
}
.vertical-center {
display: inline-flex;
align-items: center;
@ -178,8 +173,16 @@ input:checked + .slider:before {
/* Widget */
.widget .widget-icon i {
color: var(--ui-blue-8);
.widget .widget-icon {
@apply text-lg !p-2 mr-1;
@apply bg-blue-3 text-blue-8;
@apply th-dark:bg-gray-9 th-dark:text-blue-3;
border-radius: 50%;
display: inline-flex;
justify-content: center;
align-items: center;
padding: 1.5%;
}
.widget .widget-body table thead {

90
app/assets/css/button.css
View File

@ -1,4 +1,8 @@
.btn {
@apply disabled:opacity-60;
@apply !outline-none;
@apply border border-solid border-transparent;
border-radius: 5px;
display: inline-flex;
justify-content: space-around;
@ -15,81 +19,76 @@
}
.btn-primary {
background-color: var(--ui-blue-8);
@apply bg-blue-8 border-blue-8;
@apply hover:bg-blue-9 hover:border-blue-9;
@apply th-dark:hover:bg-blue-7 th-dark:hover:border-blue-7;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active .active {
background-color: var(--ui-blue-9);
}
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
background-color: var(--ui-blue-9);
@apply bg-blue-9 border-blue-5;
}
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
background-color: var(--ui-blue-8);
@apply bg-blue-8;
}
/* 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 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 {
background-color: var(--ui-error-8);
@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,
.btn-danger.active,
.open > .dropdown-toggle.btn-danger {
@apply bg-error-8 text-white border-blue-5;
}
.btn-dangerlight {
@apply text-error-9 th-dark:text-white;
@apply bg-error-3 th-dark:bg-error-9;
@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-dangerlight {
border: 1px solid var(--text-button-dangerlight-color);
color: var(--ui-error-9);
}
.btn-dangerlight:hover {
color: var(--ui-error-9) !important;
background-color: var(--ui-error-2) !important;
}
.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);
}
.btn-light:hover {
background-color: var(--ui-gray-2) !important;
}
.btn-light:active,
.btn-light.active,
.open > .dropdown-toggle.btn-light {
background-color: var(--ui-gray-3);
}
/* Button Secondary */
.btn-secondary {
background-color: var(--ui-blue-2) !important;
border: 1px solid var(--ui-blue-8) !important;
color: var(--ui-blue-9) !important;
}
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active .active {
background-color: var(--ui-blue-3) !important;
color: var(--ui-blue-9) !important;
}
.btn-secondary:disabled {
background-color: var(--ui-blue-1);
border: 1px solid var(--ui-blue-1);
color: var(--ui-blue-5);
}
form a,
.form-group a,
.hyperlink {
@ -102,8 +101,3 @@ form a:hover,
text-decoration: underline;
color: var(--ui-blue-9);
}
.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
background: var(--bg-button-group-color) !important;
color: var(--text-button-group-color);
}

13
app/assets/css/icon.css
View File

@ -101,19 +101,6 @@ pr-icon {
padding: 1.5%;
}
.icon-nested-gray {
display: flex;
justify-content: center;
align-items: center;
height: 30px;
width: 30px;
padding: 5px;
text-align: center;
border-radius: 50%;
background-color: var(--ui-gray-4);
margin-right: 5px;
}
.icon-nested-blue {
display: flex;
justify-content: center;

19
app/assets/css/rdash.css
View File

@ -100,9 +100,7 @@ div.input-mask {
line-height: 30px;
font-weight: 500;
}
.widget .widget-header i {
margin-right: 5px;
}
.widget .widget-body {
padding: 20px;
border-radius: 8px;
@ -148,20 +146,7 @@ div.input-mask {
border-top: 1px solid #e9e9e9;
padding: 10px;
}
.widget .widget-icon {
background: #30426a;
width: 65px;
height: 65px;
border-radius: 50%;
text-align: center;
vertical-align: middle;
margin-right: 15px;
}
.widget .widget-icon i {
line-height: 66px;
color: #ffffff;
font-size: 30px;
}
.widget .widget-footer {
border-top: 1px solid #e9e9e9;
padding: 10px;

10
app/assets/css/theme.css
View File

@ -180,7 +180,6 @@
--text-danger-color: var(--red-1);
--text-code-color: var(--red-2);
--text-navtabs-color: var(--grey-25);
--text-form-section-title-color: var(--grey-26);
--text-cm-default-color: var(--blue-1);
--text-cm-meta-color: var(--black-color);
--text-cm-string-color: var(--red-3);
@ -211,7 +210,6 @@
--text-small-select-color: var(--grey-25);
--text-bootbox: var(--ui-gray-7);
--text-button-group-color: var(--ui-gray-9);
--text-button-dangerlight-color: var(--ui-error-5);
--border-color: var(--grey-42);
--border-widget-color: var(--grey-43);
@ -281,7 +279,7 @@
--text-button-group: var(--ui-gray-9);
}
:root[theme='dark'] {
[theme='dark'] {
--bg-card-color: var(--grey-1);
--bg-main-color: var(--grey-2);
--bg-body-color: var(--grey-2);
@ -368,7 +366,6 @@
--text-danger-color: var(--red-4);
--text-code-color: var(--white-color);
--text-navtabs-color: var(--white-color);
--text-form-section-title-color: var(--grey-8);
--text-cm-default-color: var(--blue-10);
--text-cm-meta-color: var(--white-color);
--text-cm-string-color: var(--red-5);
@ -401,7 +398,6 @@
--text-small-select-color: var(--grey-7);
--text-bootbox: var(--white-color);
--text-button-group-color: var(--ui-white);
--text-button-dangerlight-color: var(--ui-error-7);
--border-color: var(--grey-3);
--border-widget-color: var(--grey-1);
@ -468,7 +464,7 @@
--text-button-group: var(--ui-gray-9);
}
:root[theme='highcontrast'] {
[theme='highcontrast'] {
--bg-card-color: var(--black-color);
--bg-main-color: var(--black-color);
--bg-body-color: var(--black-color);
@ -552,7 +548,6 @@
--text-blocklist-hover-color: var(--blue-11);
--text-boxselector-wrapper-color: var(--white-color);
--text-dashboard-item-color: var(--blue-12);
--text-form-section-title-color: var(--white-color);
--text-muted-color: var(--white-color);
--text-tooltip-color: var(--white-color);
--text-blocklist-item-selected-color: var(--blue-9);
@ -582,7 +577,6 @@
--text-multiselect-item-color: var(--white-color);
--text-pagination-span-color: var(--ui-white);
--text-bootbox: var(--white-color);
--text-button-dangerlight-color: var(--ui-error-7);
--text-pagination-span-hover-color: var(--ui-white);
--border-color: var(--grey-55);

5
app/assets/css/vendor-override.css
View File

@ -318,7 +318,6 @@ json-tree .branch-preview {
}
input,
button,
select,
textarea {
background: var(--text-input-textarea);
@ -410,10 +409,6 @@ input:-webkit-autofill {
color: var(--white-color) !important;
}
.btn-danger:hover {
color: var(--white-color);
}
.btn-success:hover {
color: var(--white-color);
}

6
app/docker/components/datatables/configs-datatable/configsDatatable.html
View File

@ -3,7 +3,9 @@
<rd-widget-body classes="no-padding">
<div class="toolBar">
<div class="toolBarTitle vertical-center">
<pr-icon icon="$ctrl.titleIcon" feather="true" class-name="'icon-nested-blue'" mode="'primary'"></pr-icon>
<div class="widget-icon space-right">
<pr-icon icon="$ctrl.titleIcon" feather="true"></pr-icon>
</div>
{{ $ctrl.titleText }}
</div>
<div class="searchBar vertical-center">
@ -28,7 +30,7 @@
ng-click="$ctrl.removeAction($ctrl.state.selectedItems)"
data-cy="config-removeConfigButton"
>
<pr-icon icon="'trash-2'" feather="true" mode="'danger'"></pr-icon>Remove
<pr-icon icon="'trash-2'" feather="true"></pr-icon>Remove
</button>
<button
type="button"

4
app/docker/components/datatables/container-networks-datatable/containerNetworksDatatable.html
View File

@ -66,9 +66,7 @@
button-spinner="$ctrl.leaveNetworkActionInProgress"
ng-click="$ctrl.leaveNetworkAction($ctrl.container, key)"
>
<span ng-hide="$ctrl.leaveNetworkActionInProgress"
><pr-icon icon="'trash-2'" feather="true" mode="'danger'" class-name="'icon-secondary icon-md'"></pr-icon> Leave network</span
>
<span ng-hide="$ctrl.leaveNetworkActionInProgress"> <pr-icon icon="'trash-2'" feather="true" class-name="'icon-secondary icon-md'"></pr-icon> Leave network</span>
<span ng-show="$ctrl.leaveNetworkActionInProgress">Leaving network...</span>
</button>
</td>

4
app/docker/components/datatables/container-processes-datatable/containerProcessesDatatable.html
View File

@ -3,7 +3,9 @@
<rd-widget-body classes="no-padding">
<div class="toolBar">
<div class="toolBarTitle vertical-center">
<pr-icon icon="$ctrl.titleIcon" feather="true" class-name="'icon-nested-blue'" mode="'primary'"></pr-icon>
<div class="widget-icon space-right">
<pr-icon icon="$ctrl.titleIcon" feather="true"></pr-icon>
</div>
{{ $ctrl.titleText }}
</div>
<div class="searchBar vertical-center">

4
app/docker/components/datatables/events-datatable/eventsDatatable.html
View File

@ -3,7 +3,9 @@
<rd-widget-body classes="no-padding">
<div class="toolBar">
<div class="toolBarTitle vertical-center">
<pr-icon icon="$ctrl.titleIcon" feather="true" class-name="'icon-nested-blue'" mode="'primary'"></pr-icon>
<div class="widget-icon space-right">
<pr-icon icon="$ctrl.titleIcon" feather="true"></pr-icon>
</div>
{{ $ctrl.titleText }}
</div>
<div class="searchBar vertical-center">

14
app/docker/components/datatables/images-datatable/imagesDatatable.html
View File

@ -3,7 +3,9 @@
<rd-widget-body classes="no-padding">
<div class="toolBar show-dropdown">
<div class="toolBarTitle vertical-center">
<pr-icon icon="$ctrl.titleIcon" feather="true" class-name="'icon-nested-blue'" mode="'primary'"></pr-icon>
<div class="widget-icon space-right">
<pr-icon icon="$ctrl.titleIcon" feather="true"></pr-icon>
</div>
{{ $ctrl.titleText }}
</div>
<div class="searchBar vertical-center">
@ -29,7 +31,7 @@
ng-click="$ctrl.removeAction($ctrl.state.selectedItems)"
data-cy="image-removeImageButton"
>
<pr-icon icon="'trash-2'" feather="true" mode="'danger'"></pr-icon>Remove
<pr-icon icon="'trash-2'" feather="true"></pr-icon>Remove
</button>
<button
type="button"
@ -58,24 +60,24 @@
<div class="btn-group">
<button
type="button"
class="btn btn-sm btn-secondary h-fit vertical-center !ml-0"
class="btn btn-sm btn-secondary h-fit"
ui-sref="docker.images.import"
authorization="DockerImageLoad"
ng-disabled="$ctrl.exportInProgress"
data-cy="image-importImageButton"
>
<pr-icon icon="'upload'" feather="true" mode="'secondary'"></pr-icon>Import
<pr-icon icon="'upload'" feather="true"></pr-icon>Import
</button>
<button
type="button"
class="btn btn-sm btn-secondary h-fit vertical-center !ml-0"
class="btn btn-sm btn-secondary h-fit"
ng-disabled="$ctrl.state.selectedItemCount === 0 || $ctrl.exportInProgress"
ng-click="$ctrl.downloadAction($ctrl.state.selectedItems)"
button-spinner="$ctrl.exportInProgress"
authorization="DockerImageGet"
data-cy="image-exportImageButton"
>
<pr-icon icon="'download'" feather="true" mode="'secondary'"></pr-icon>
<pr-icon icon="'download'" feather="true"></pr-icon>
<span ng-hide="$ctrl.exportInProgress">Export</span>
<span ng-show="$ctrl.exportInProgress">Export in progress...</span>
</button>

6
app/docker/components/datatables/networks-datatable/networksDatatable.html
View File

@ -3,7 +3,9 @@
<rd-widget-body classes="no-padding">
<div class="toolBar">
<div class="toolBarTitle vertical-center">
<pr-icon icon="$ctrl.titleIcon" feather="true" class-name="'icon-nested-blue'" mode="'primary'"></pr-icon>
<div class="widget-icon space-right">
<pr-icon icon="$ctrl.titleIcon" feather="true"></pr-icon>
</div>
{{ $ctrl.titleText }}
</div>
<div class="searchBar vertical-center">
@ -28,7 +30,7 @@
ng-click="$ctrl.removeAction($ctrl.state.selectedItems)"
data-cy="network-removeNetworkButton"
>
<pr-icon icon="'trash-2'" feather="true" mode="'danger'"></pr-icon>Remove
<pr-icon icon="'trash-2'" feather="true"></pr-icon>Remove
</button>
<button
type="button"

4
app/docker/components/datatables/nodes-datatable/nodesDatatable.html
View File

@ -3,7 +3,9 @@
<rd-widget-body classes="no-padding">
<div class="toolBar">
<div class="toolBarTitle vertical-center">
<pr-icon icon="$ctrl.titleIcon" feather="true" class-name="'icon-nested-blue'" mode="'primary'"></pr-icon>
<div class="widget-icon space-right">
<pr-icon icon="$ctrl.titleIcon" feather="true"></pr-icon>
</div>
{{ $ctrl.titleText }}
</div>
<div class="searchBar vertical-center">

6
app/docker/components/datatables/secrets-datatable/secretsDatatable.html
View File

@ -3,7 +3,9 @@
<rd-widget-body classes="no-padding">
<div class="toolBar">
<div class="toolBarTitle vertical-center">
<pr-icon icon="$ctrl.titleIcon" feather="true" class-name="'icon-nested-blue'" mode="'primary'"></pr-icon>
<div class="widget-icon space-right">
<pr-icon icon="$ctrl.titleIcon" feather="true"></pr-icon>
</div>
{{ $ctrl.titleText }}
</div>
<div class="searchBar vertical-center">
@ -28,7 +30,7 @@
ng-click="$ctrl.removeAction($ctrl.state.selectedItems)"
data-cy="secret-removeSecretButton"
>
<pr-icon icon="'trash-2'" feather="true" mode="'danger'"></pr-icon>Remove
<pr-icon icon="'trash-2'" feather="true"></pr-icon>Remove
</button>
<button
type="button"

6
app/docker/components/datatables/services-datatable/actions/servicesDatatableActions.html
View File

@ -3,13 +3,13 @@
<button
ng-if="$ctrl.showUpdateAction"
type="button"
class="btn btn-sm btn-light h-fit vertical-center !ml-0"
class="btn btn-sm btn-light h-fit"
authorization="DockerServiceUpdate"
ng-disabled="$ctrl.selectedItemCount === 0"
ng-click="$ctrl.updateAction($ctrl.selectedItems)"
data-cy="service-updateServiceButton"
>
<pr-icon icon="'refresh-cw'" feather="true" mode="'secondary'"></pr-icon>Update
<pr-icon icon="'refresh-cw'" feather="true"></pr-icon>Update
</button>
<button
type="button"
@ -19,7 +19,7 @@
ng-click="$ctrl.removeAction($ctrl.selectedItems)"
data-cy="service-removeServiceButton"
>
<pr-icon icon="'trash-2'" feather="true" mode="'danger'"></pr-icon>Remove
<pr-icon icon="'trash-2'" feather="true"></pr-icon>Remove
</button>
</div>
<button type="button" class="btn btn-sm btn-primary" ui-sref="docker.services.new" ng-if="$ctrl.showAddAction" authorization="DockerServiceCreate">

4
app/docker/components/datatables/services-datatable/servicesDatatable.html
View File

@ -3,7 +3,9 @@
<rd-widget-body classes="no-padding">
<div class="toolBar">
<div class="toolBarTitle vertical-center">
<pr-icon icon="$ctrl.titleIcon" feather="true" class-name="'icon-nested-blue'" mode="'primary'"></pr-icon>
<div class="widget-icon space-right">
<pr-icon icon="$ctrl.titleIcon" feather="true"></pr-icon>
</div>
{{ $ctrl.titleText }}
</div>
<div class="searchBar vertical-center">

4
app/docker/components/datatables/tasks-datatable/tasksDatatable.html
View File

@ -3,7 +3,9 @@
<rd-widget-body classes="no-padding">
<div class="toolBar">
<div class="toolBarTitle vertical-center">
<pr-icon icon="$ctrl.titleIcon" feather="true" class-name="'icon-nested-blue'" mode="'primary'"></pr-icon>
<div class="widget-icon space-right">
<pr-icon icon="$ctrl.titleIcon" feather="true"></pr-icon>
</div>
{{ $ctrl.titleText }}
</div>
<div class="searchBar vertical-center">

6
app/docker/components/datatables/volumes-datatable/volumesDatatable.html
View File

@ -3,7 +3,9 @@
<rd-widget-body classes="no-padding">
<div class="toolBar">
<div class="toolBarTitle vertical-center">
<pr-icon icon="$ctrl.titleIcon" feather="true" class-name="'icon-nested-blue'" mode="'primary'"></pr-icon>
<div class="widget-icon space-right">
<pr-icon icon="$ctrl.titleIcon" feather="true"></pr-icon>
</div>
{{ $ctrl.titleText }}
</div>
<div class="searchBar vertical-center">
@ -28,7 +30,7 @@
ng-click="$ctrl.removeAction($ctrl.state.selectedItems)"
data-cy="volume-removeVolumeButton"
>
<pr-icon icon="'trash-2'" feather="true" mode="'danger'" class="leading-none"></pr-icon>Remove
<pr-icon icon="'trash-2'" feather="true" class="leading-none"></pr-icon>Remove
</button>
<button
type="button"

2
app/docker/views/secrets/edit/secret.html
View File

@ -16,7 +16,7 @@
<td>
{{ secret.Id }}
<button authorization="DockerSecretDelete" class="btn btn-xs btn-dangerlight" ng-click="removeSecret(secret.Id)"
><pr-icon icon="'trash-2'" feather="true" mode="'danger'"></pr-icon>Delete this secret</button
><pr-icon icon="'trash-2'" feather="true"></pr-icon>Delete this secret</button
>
</td>
</tr>

5
app/kubernetes/components/datatables/application/containers-datatable/containersDatatable.html
View File

@ -3,9 +3,10 @@
<rd-widget-body classes="no-padding">
<div class="toolBar">
<div class="toolBarTitle flex">
<div class="flex justify-center content-center mr-2 icon-nested-blue vertical-center">
<pr-icon icon="'server'" mode="'primary'" feather="true"></pr-icon>
<div class="widget-icon space-right">
<pr-icon icon="'server'" feather="true"></pr-icon>
</div>
<span>
{{ $ctrl.titleText }}
</span>

4
app/kubernetes/components/datatables/applications-datatable/applicationsDatatable.html
View File

@ -3,7 +3,9 @@
<div ng-if="$ctrl.isPrimary" class="toolBar !flex-col gap-1">
<div class="toolBar vertical-center !gap-x-5 !gap-y-1 flex-wrap !p-0 w-full">
<div class="toolBarTitle vertical-center">
<pr-icon icon="'box'" feather="true" class-name="'icon-nested-blue'" mode="'primary'"></pr-icon>
<div class="widget-icon space-right">
<pr-icon icon="'box'" feather="true"></pr-icon>
</div>
Applications
</div>
<div class="searchBar vertical-center">

4
app/kubernetes/components/datatables/applications-ports-datatable/applicationsPortsDatatable.html
View File

@ -4,7 +4,9 @@
<div class="toolBar vertical-center !gap-x-5 !gap-y-1 flex-wrap !p-0 w-full">
<!-- title -->
<div class="toolBarTitle vertical-center">
<pr-icon icon="'repeat'" feather="true" class-name="'icon-nested-blue'" mode="'primary'"></pr-icon>
<div class="widget-icon space-right">
<pr-icon icon="'repeat'" feather="true"></pr-icon>
</div>
Port mappings
</div>
<div class="searchBar vertical-center">

4
app/kubernetes/components/datatables/applications-stacks-datatable/applicationsStacksDatatable.html
View File

@ -4,7 +4,9 @@
<div class="toolBar vertical-center !gap-x-5 !gap-y-1 flex-wrap !p-0 w-full">
<!-- title -->
<div class="toolBarTitle vertical-center">
<pr-icon icon="'list'" feather="true" class-name="'icon-nested-blue'" mode="'primary'"></pr-icon>
<div class="widget-icon space-right">
<pr-icon icon="'list'" feather="true"></pr-icon>
</div>
Stacks
</div>
<!-- actions -->

4
app/kubernetes/components/datatables/configurations-datatable/configurationsDatatable.html
View File

@ -5,7 +5,9 @@
<div class="toolBar !flex-col gap-1">
<div class="toolBar vertical-center !gap-x-5 !gap-y-1 flex-wrap !p-0 w-full">
<div class="toolBarTitle">
<pr-icon icon="'lock'" feather="true" class-name="'icon-nested-blue'" mode="'primary'"></pr-icon>
<div class="widget-icon space-right">
<pr-icon icon="'lock'" feather="true"></pr-icon>
</div>
ConfigMaps & Secrets
</div>
<div class="searchBar vertical-center w-72 !mr-0">

5
app/kubernetes/components/datatables/events-datatable/eventsDatatable.html
View File

@ -1,9 +1,10 @@
<div class="datatable">
<div class="toolBar">
<div class="toolBarTitle flex">
<div class="icon-nested-blue flex justify-center items-center">
<pr-icon icon="'rotate-ccw'" mode="'primary'" feather="true" class="vertical-center"></pr-icon>
<div class="widget-icon space-right">
<pr-icon icon="'rotate-ccw'" feather="true"></pr-icon>
</div>
{{ $ctrl.titleText }}
</div>
<div class="searchBar">

4
app/kubernetes/components/datatables/integrated-applications-datatable/integratedApplicationsDatatable.html
View File

@ -3,7 +3,9 @@
<rd-widget-body classes="no-padding">
<div class="toolBar">
<div class="toolBarTitle vertical-center">
<pr-icon icon="$ctrl.titleIcon" class-name="'icon-nested-blue vertical-center'" mode="'primary'"></pr-icon>
<div class="widget-icon space-right">
<pr-icon icon="$ctrl.titleIcon" feather="true"></pr-icon>
</div>
{{ $ctrl.titleText }}
</div>
<div class="searchBar vertical-center">

5
app/kubernetes/components/datatables/node-applications-datatable/nodeApplicationsDatatable.html
View File

@ -3,9 +3,10 @@
<rd-widget-body classes="no-padding">
<div class="toolBar">
<div class="toolBarTitle flex">
<div class="flex justify-center content-center mr-2 icon-nested-blue vertical-center">
<i class="fa icon icon-primary icon-sm" ng-class="$ctrl.titleIcon" aria-hidden="true"></i>
<div class="widget-icon space-right">
<pr-icon icon="$ctrl.titleIcon" feather="true"></pr-icon>
</div>
<span class="vertical-center">
{{ $ctrl.titleText }}
</span>

5
app/kubernetes/components/datatables/nodes-datatable/nodesDatatable.html
View File

@ -3,9 +3,10 @@
<rd-widget-body classes="no-padding">
<div class="toolBar">
<div class="toolBarTitle flex">
<div class="flex justify-center content-center mr-2 icon-nested-blue vertical-center">
<i class="fa icon icon-primary icon-sm" ng-class="$ctrl.titleIcon" aria-hidden="true"></i>
<div class="widget-icon space-right">
<pr-icon icon="$ctrl.titleIcon"></pr-icon>
</div>
<span class="vertical-center">
{{ $ctrl.titleText }}
</span>

4
app/kubernetes/components/datatables/resource-pools-datatable/resourcePoolsDatatable.html
View File

@ -5,7 +5,9 @@
<div class="toolBar !flex-col gap-1">
<div class="toolBar vertical-center !gap-x-5 !gap-y-1 flex-wrap !p-0 w-full">
<div class="toolBarTitle vertical-center">
<pr-icon icon="'layers'" feather="true" class-name="'icon-nested-blue'" mode="'primary'"></pr-icon>
<div class="widget-icon space-right">
<pr-icon icon="'layers'" feather="true"></pr-icon>
</div>
Namespaces
</div>
<div class="searchBar vertical-center">

4
app/kubernetes/components/datatables/volumes-datatable/volumesDatatable.html
View File

@ -3,7 +3,9 @@
<div class="toolBar !flex-col gap-1">
<div class="toolBar vertical-center !gap-x-5 !gap-y-1 flex-wrap !p-0 w-full">
<div class="toolBarTitle vertical-center">
<pr-icon icon="'database'" feather="true" class-name="'icon-nested-blue'" mode="'primary'"></pr-icon>
<div class="widget-icon space-right">
<pr-icon icon="'database'" feather="true"></pr-icon>
</div>
Volumes
</div>
<div class="searchBar vertical-center">

4
app/kubernetes/components/helm/helm-templates/helm-add-repository/helm-add-repository.html
View File

@ -1,7 +1,9 @@
<rd-widget>
<div class="toolBar px-5 pt-5">
<div class="toolBarTitle">
<pr-icon icon="'svg-helm'" class-name="'icon-nested-blue'" mode="'primary'"></pr-icon>
<div class="widget-icon space-right">
<pr-icon icon="'svg-helm'"></pr-icon>
</div>
Additional repositories
</div>
</div>

8
app/kubernetes/components/helm/helm-templates/helm-templates-list/helm-templates-list-item/helm-templates-list-item.html
View File

@ -12,9 +12,11 @@
size="'xl'"
></fallback-image>
</span>
<span class="blocklist-item-logo vertical-center" ng-if="!$ctrl.model.icon">
<pr-icon icon="'svg-helm'" mode="'primary'" class-name="'icon-nested-blue'"></pr-icon>
</span>
<div class="widget-icon space-right" ng-if="!$ctrl.model.icon">
<pr-icon icon="'svg-helm'"></pr-icon>
</div>
<!-- !helmchart-image -->
<!-- helmchart-details -->
<div class="col-sm-12 helm-template-item-details">

5
app/kubernetes/components/helm/helm-templates/helm-templates-list/helm-templates-list.html
View File

@ -3,7 +3,10 @@
<rd-widget-body classes="no-padding">
<div class="toolBar vertical-center !gap-x-5 !gap-y-1 flex-wrap w-full relative">
<div class="toolBarTitle vertical-center">
<pr-icon icon="$ctrl.titleIcon" feather="true" mode="'primary'" class-name="'icon-nested-blue space-right'"></pr-icon>
<div class="widget-icon space-right">
<pr-icon icon="$ctrl.titleIcon" feather="true"></pr-icon>
</div>
{{ $ctrl.titleText }}
</div>

1
app/kubernetes/views/applications/console/console.html
View File

@ -47,7 +47,6 @@
ng-model="ctrl.state.command"
name="console_command"
uib-typeahead="command for command in ctrl.state.availableCommands | filter:$viewValue | limitTo:5"
typeahead-show-hint="true"
typeahead-min-length="0"
auto-focus
/>

1
app/kubernetes/views/applications/create/createApplication.html
View File

@ -199,7 +199,6 @@
ng-model="ctrl.formValues.StackName"
name="stack_name"
uib-typeahead="stack for stack in ctrl.stacks | filter:$viewValue | limitTo:7"
typeahead-show-hint="true"
typeahead-min-length="0"
data-cy="k8sAppCreate-stackName"
/>

5
app/kubernetes/views/applications/edit/components/placements-datatable/template.html
View File

@ -1,9 +1,10 @@
<div class="datatable">
<div class="toolBar">
<div class="toolBarTitle flex">
<div class="flex justify-center content-center mr-2 icon-nested-blue vertical-center">
<i class="fa icon icon-primary icon-sm" ng-class="$ctrl.titleIcon" aria-hidden="true"></i>
<div class="widget-icon space-right">
<pr-icon icon="$ctrl.titleIcon" feather="true"></pr-icon>
</div>
<span class="vertical-center">
{{ $ctrl.titleText }}
</span>

5
app/kubernetes/views/applications/helm/helm.html
View File

@ -13,7 +13,10 @@
<rd-widget>
<div class="toolBar vertical-center !gap-x-5 !gap-y-1 p-5 flex-wrap w-full">
<div class="toolBarTitle vertical-center">
<pr-icon icon="'svg-helm'" class-name="'icon-nested-blue'" mode="'primary'"></pr-icon>
<div class="widget-icon space-right">
<pr-icon icon="'svg-helm'"></pr-icon>
</div>
Release
</div>
</div>

2
app/kubernetes/views/cluster/node/node.html
View File

@ -264,7 +264,7 @@
refresh-callback="ctrl.getApplications"
loading="ctrl.state.applicationsLoading"
title-text="Applications running on this node"
title-icon="fa-laptop-code"
title-icon="box"
>
</kubernetes-node-applications-datatable>
</div>

4
app/kubernetes/views/dashboard/dashboard.html
View File

@ -8,7 +8,9 @@
<rd-widget>
<div class="toolBar vertical-center w-full">
<div class="toolBarTitle vertical-center p-5">
<pr-icon icon="'svg-tachometer'" class-name="'icon-nested-blue [&>svg]:!h-5 [&>svg]:!w-5'" mode="'primary'" class="vertical-center"></pr-icon>
<div class="widget-icon space-right">
<pr-icon icon="'svg-tachometer'"></pr-icon>
</div>
Environment info
</div>
</div>

5
app/kubernetes/views/resource-pools/edit/components/ingresses-datatable/template.html
View File

@ -3,7 +3,10 @@
<rd-widget-body classes="no-padding">
<div class="toolBar">
<div class="toolBarTitle vertical-center">
<pr-icon icon="$ctrl.titleIcon" feather="true" class-name="'icon-nested-blue'"></pr-icon>
<div class="widget-icon space-right">
<pr-icon icon="$ctrl.titleIcon" feather="true"></pr-icon>
</div>
{{ $ctrl.titleText }}
</div>
<div class="searchBar vertical-center">

4
app/kubernetes/views/volumes/components/volumes-storages-datatable/template.html
View File

@ -3,7 +3,9 @@
<div class="toolBar !flex-col gap-1">
<div class="toolBar vertical-center !gap-x-5 !gap-y-1 flex-wrap !p-0 w-full">
<div class="toolBarTitle vertical-center">
<pr-icon icon="'database'" feather="true" class-name="'icon-nested-blue'" mode="'primary'"></pr-icon>
<div class="widget-icon space-right">
<pr-icon icon="'database'" feather="true"></pr-icon>
</div>
Storage
</div>
<div class="searchBar vertical-center !mr-0">

4
app/portainer/components/access-datatable/accessDatatable.html
View File

@ -3,7 +3,9 @@
<rd-widget-body classes="no-padding">
<div class="toolBar">
<div class="toolBarTitle vertical-center">
<pr-icon icon="$ctrl.titleIcon" feather="true" class-name="'icon-white icon-primary icon-nested-blue'"></pr-icon>
<div class="widget-icon space-right">
<pr-icon icon="$ctrl.titleIcon" feather="true"></pr-icon>
</div>
{{ $ctrl.titleText }}
</div>
<div class="searchBar vertical-center">

2
app/portainer/components/custom-templates-list/customTemplatesList.html
View File

@ -37,7 +37,7 @@
Edit
</a>
<button class="btn btn-dangerlight btn-sm vertical-center" ng-click="$ctrl.onDeleteClick(template.Id); $event.stopPropagation();">
<pr-icon icon="'trash-2'" feather="true" mode="'danger'"></pr-icon>
<pr-icon icon="'trash-2'" feather="true"></pr-icon>
Delete
</button>
</div>

4
app/portainer/components/datatables/access-tokens-datatable/access-tokens-datatable.html
View File

@ -3,7 +3,9 @@
<rd-widget-body classes="no-padding">
<div class="toolBar vertical-center">
<div class="toolBarTitle vertical-center">
<pr-icon icon="$ctrl.titleIcon" feather="true" class-name="'icon-primary icon-nested-blue'"></pr-icon>
<div class="widget-icon space-right">
<pr-icon icon="$ctrl.titleIcon" feather="true"></pr-icon>
</div>
<span>{{ $ctrl.titleText }}</span>
</div>
<div class="searchBar vertical-center">

1
app/portainer/components/datatables/datatable.css
View File

@ -6,6 +6,7 @@
border-radius: 8px;
display: flex;
align-items: center;
gap: 5px;
}

5
app/portainer/components/datatables/endpoints-datatable/endpointsDatatable.html
View File

@ -3,7 +3,10 @@
<rd-widget-body classes="no-padding">
<div class="toolBar">
<div class="toolBarTitle vertical-center">
<pr-icon icon="$ctrl.titleIcon" feather="true" class-name="'icon-white icon-primary icon-nested-blue'"></pr-icon>
<div class="widget-icon space-right">
<pr-icon icon="$ctrl.titleIcon" feather="true"></pr-icon>
</div>
{{ $ctrl.titleText }}
</div>
<div class="searchBar vertical-center">

9
app/portainer/components/datatables/groups-datatable/groupsDatatable.html
View File

@ -3,10 +3,12 @@
<rd-widget-body classes="no-padding">
<div class="toolBar">
<div class="toolBarTitle vertical-center">
<pr-icon icon="$ctrl.titleIcon" feather="true" class-name="'icon-white icon-primary icon-nested-blue'"></pr-icon>
<div class="widget-icon space-right">
<pr-icon icon="$ctrl.titleIcon" feather="true"></pr-icon>
</div>
{{ $ctrl.titleText }}
</div>
<div class="searchBar">
<div class="searchBar vertical-center">
<pr-icon icon="'search'" feather="true"></pr-icon>
<input
type="text"
@ -27,7 +29,8 @@
ng-click="$ctrl.removeAction($ctrl.state.selectedItems)"
data-cy="endpointGroup-removeGroupButton"
>
<pr-icon icon="'trash-2'" feather="true"></pr-icon>Remove
<pr-icon icon="'trash-2'" feather="true"></pr-icon>
Remove
</button>
<button type="button" class="btn btn-sm btn-primary h-fit" ui-sref="portainer.groups.new" data-cy="endpointGroup-addGroupButton">
<pr-icon icon="'plus'" feather="true"></pr-icon>Add group

6
app/portainer/components/datatables/registries-datatable/registriesDatatable.html
View File

@ -3,7 +3,9 @@
<rd-widget-body classes="no-padding">
<div class="toolBar">
<div class="toolBarTitle vertical-center">
<pr-icon icon="$ctrl.titleIcon" feather="true" class-name="'icon-nested-blue'" mode="'primary'"></pr-icon>
<div class="widget-icon space-right">
<pr-icon icon="$ctrl.titleIcon" feather="true"></pr-icon>
</div>
{{ $ctrl.titleText }}
</div>
<div class="searchBar vertical-center">
@ -28,7 +30,7 @@
ng-click="$ctrl.removeAction($ctrl.state.selectedItems)"
data-cy="registry-removeRegistryButton"
>
<pr-icon icon="'trash-2'" feather="true" mode="'danger'"></pr-icon>Remove
<pr-icon icon="'trash-2'" feather="true"></pr-icon>Remove
</button>
<button type="button" class="btn btn-sm btn-primary h-fit vertical-center !ml-0" ui-sref="portainer.registries.new" data-cy="registry-addRegistryButton">
<pr-icon icon="'plus'" feather="true"></pr-icon>Add registry

9
app/portainer/components/datatables/stacks-datatable/stacksDatatable.html
View File

@ -3,7 +3,9 @@
<rd-widget-body classes="no-padding" ng-if="$ctrl.createEnabled">
<div class="toolBar vertical-center !gap-x-5 !gap-y-1 flex-wrap">
<div class="toolBarTitle vertical-center">
<pr-icon icon="'layers'" feather="true" class-name="'icon-nested-blue vertical-center'" mode="'primary'"></pr-icon>
<div class="widget-icon space-right">
<pr-icon icon="'layers'" feather="true"></pr-icon>
</div>
{{ $ctrl.titleText }}
</div>
<div class="searchBar vertical-center !mr-0">
@ -21,15 +23,14 @@
</div>
<div class="actionBar !gap-3" ng-if="!$ctrl.offlineMode" authorization="PortainerStackCreate, PortainerStackDelete">
<button
ng-disabled="!$ctrl.createEnabled"
type="button"
class="btn btn-sm btn-dangerlight h-fit vertical-center !ml-0"
authorization="PortainerStackDelete"
ng-disabled="$ctrl.state.selectedItemCount === 0"
ng-disabled="!$ctrl.createEnabled || $ctrl.state.selectedItemCount === 0"
ng-click="$ctrl.removeAction($ctrl.state.selectedItems)"
data-cy="stack-removeStackButton"
>
<pr-icon icon="'trash-2'" feather="true" mode="'danger'"></pr-icon>Remove
<pr-icon icon="'trash-2'" feather="true"></pr-icon>Remove
</button>
<button
ng-disabled="!$ctrl.createEnabled"

5
app/portainer/components/datatables/strings-datatable/strings-datatable.html
View File

@ -2,7 +2,10 @@
<rd-widget>
<div class="toolBar vertical-center !gap-x-5 !gap-y-1 flex-wrap w-full relative">
<div class="toolBarTitle vertical-center">
<pr-icon icon="$ctrl.titleIcon" feather="true" mode="'primary'" class-name="'icon-nested-blue space-right'"></pr-icon>
<div class="widget-icon space-right">
<pr-icon icon="$ctrl.titleIcon" feather="true"></pr-icon>
</div>
{{ $ctrl.titleText }}
</div>
<div class="searchBar vertical-center">

6
app/portainer/components/datatables/tags-datatable/tagsDatatable.html
View File

@ -3,10 +3,12 @@
<rd-widget-body classes="no-padding">
<div class="toolBar">
<div class="toolBarTitle vertical-center">
<pr-icon icon="$ctrl.titleIcon" feather="true" class-name="'icon-white icon-primary icon-nested-blue'"></pr-icon>
<div class="widget-icon space-right">
<pr-icon icon="$ctrl.titleIcon" feather="true"></pr-icon>
</div>
{{ $ctrl.titleText }}
</div>
<div class="searchBar">
<div class="searchBar vertical-center">
<pr-icon icon="'search'" feather="true"></pr-icon>
<input
type="text"

6
app/portainer/components/datatables/users-datatable/usersDatatable.html
View File

@ -3,7 +3,9 @@
<rd-widget-body classes="no-padding">
<div class="toolBar vertical-center !gap-x-5 !gap-y-1 flex-wrap">
<div class="toolBarTitle vertical-center">
<pr-icon icon="$ctrl.titleIcon" feather="true" class-name="'icon-nested-blue'" mode="'primary'"></pr-icon>
<div class="widget-icon space-right">
<pr-icon icon="$ctrl.titleIcon" feather="true"></pr-icon>
</div>
{{ $ctrl.titleText }}
</div>
@ -27,7 +29,7 @@
ng-click="$ctrl.removeAction($ctrl.state.selectedItems)"
data-cy="user-removeUserButton"
>
<pr-icon icon="'trash-2'" feather="true" mode="'danger'"></pr-icon>Remove
<pr-icon icon="'trash-2'" feather="true"></pr-icon>Remove
</button>
</div>
</div>

4
app/portainer/components/widget/rd-widget-title.ts
View File

@ -14,7 +14,9 @@ export const rdWidgetTitle = {
<div class="widget-header" ng-class="$ctrl.parentClasses">
<div class="row">
<span ng-class="$ctrl.classes" class="pull-left vertical-center">
<pr-icon icon="$ctrl.icon" feather="$ctrl.featherIcon" class-name="'icon-nested-blue'" mode="'primary'"></pr-icon>
<div class="widget-icon space-right">
<pr-icon icon="$ctrl.icon" feather="$ctrl.featherIcon"></pr-icon>
</div>
<span ng-transclude="title">{{ $ctrl.titleText }}</span>
</span>
<span ng-class="$ctrl.classes" class="pull-right" ng-transclude></span>

1
app/portainer/home/EnvironmentList/EnvironmentItem/EnvironmentItem.module.css
View File

@ -7,6 +7,7 @@
border: 0;
margin: 0;
padding: 0;
background: transparent;
}
.item {

1
app/portainer/home/EnvironmentList/EnvironmentList.module.css
View File

@ -50,6 +50,7 @@
border: 0px;
padding: 10px;
height: 60px;
background: transparent;
}
.action-button {

5
app/portainer/user-activity/activity-logs-view/activity-logs-datatable/activity-logs-datatable.html
View File

@ -3,7 +3,10 @@
<rd-widget-body classes="no-padding">
<div class="toolBar vertical-center !gap-x-5 !gap-y-1 flex-wrap">
<div class="toolBarTitle vertical-center">
<pr-icon icon="'svg-clockrewind'" class-name="'icon-nested-blue'" mode="'primary'"></pr-icon>
<div class="widget-icon space-right">
<pr-icon icon="'svg-clockrewind'"></pr-icon>
</div>
Activity Logs
<be-feature-indicator feature="{{::$ctrl.feature}}"></be-feature-indicator>
</div>

5
app/portainer/user-activity/auth-logs-view/auth-logs-datatable/auth-logs-datatable.html
View File

@ -3,7 +3,10 @@
<rd-widget-body classes="no-padding">
<div class="toolBar vertical-center !gap-x-5 !gap-y-1 flex-wrap">
<div class="toolBarTitle vertical-center">
<pr-icon icon="'svg-clockrewind'" class-name="'icon-nested-blue'" mode="'primary'"></pr-icon>
<div class="widget-icon space-right">
<pr-icon icon="'svg-clockrewind'"></pr-icon>
</div>
Authentication Events
<be-feature-indicator feature="{{::$ctrl.feature}}"></be-feature-indicator>
</div>

65
app/react/components/BoxSelector/BoxOption.tsx Normal file
View File

@ -0,0 +1,65 @@
import clsx from 'clsx';
import { PropsWithChildren } from 'react';
import ReactTooltip from 'react-tooltip';
import './BoxSelectorItem.css';
import { BoxSelectorOption } from './types';
interface Props<T extends number | string> {
radioName: string;
option: BoxSelectorOption<T>;
onChange?(value: T): void;
selectedValue: T;
disabled?: boolean;
tooltip?: string;
className?: string;
type?: 'radio' | 'checkbox';
}
export function BoxOption<T extends number | string>({
radioName,
option,
onChange = () => {},
selectedValue,
disabled,
tooltip,
className,
type = 'radio',
children,
}: PropsWithChildren<Props<T>>) {
const tooltipId = `box-option-${radioName}-${option.id}`;
return (
<div
className={clsx('box-selector-item', className)}
data-tip
data-for={tooltipId}
tooltip-append-to-body="true"
tooltip-placement="bottom"
tooltip-class="portainer-tooltip"
>
<input
type={type}
name={radioName}
id={option.id}
checked={option.value === selectedValue}
value={option.value}
disabled={disabled}
onChange={() => onChange(option.value)}
/>
<label htmlFor={option.id} data-cy={`${radioName}_${option.value}`}>
{children}
</label>
{tooltip && (
<ReactTooltip
place="bottom"
className="portainer-tooltip"
id={tooltipId}
>
{tooltip}
</ReactTooltip>
)}
</div>
);
}

20
app/react/components/BoxSelector/BoxSelector.css
View File

@ -13,26 +13,6 @@
}
}
.boxselector_wrapper input[type='radio']:checked + label,
.box-selector-item input[type='radio']:checked + label {
background-color: var(--bg-blocklist-hover-color) !important;
color: black !important;
border-radius: 8px;
border-color: var(--ui-blue-7);
padding: 15px;
box-shadow: none;
}
.boxselector_wrapper input[type='radio']:not(:disabled) + label,
.box-selector-item input[type='radio']:not(:disabled) + label {
background: var(--ui-gray-2);
color: var(--black-color) !important;
border-radius: 8px;
border-color: var(--ui-gray-5);
padding: 15px;
box-shadow: none;
}
.row.header {
background-color: var(--bg-body-color) !important;
margin-bottom: 5px !important;

121
app/react/components/BoxSelector/BoxSelectorItem.css
View File

@ -1,6 +1,5 @@
.boxselector_wrapper > div,
.box-selector-item {
--selected-item-color: var(--ui-blue-6);
flex: 1;
}
@ -22,38 +21,40 @@
display: none;
}
.boxselector_wrapper input[type='radio']:not(:disabled) ~ label,
.box-selector-item input[type='radio']:not(:disabled) ~ label {
cursor: pointer;
background-color: var(--bg-boxselector-wrapper-disabled-color);
.boxselector_wrapper label,
.box-selector-item label {
@apply border border-solid;
@apply bg-gray-2 border-gray-5 text-black;
@apply th-dark:bg-gray-iron-10 th-dark:border-gray-neutral-8 th-dark:text-white;
font-weight: normal;
font-size: 12px;
display: block;
border-radius: 8px;
padding: 15px;
text-align: left;
box-shadow: var(--shadow-boxselector-color);
position: relative;
text-align: left;
height: 100%;
}
.boxselector_wrapper input[type='radio']:not(:disabled):hover ~ label:hover,
.box-selector-item input[type='radio']:not(:disabled):hover ~ label:hover {
/* not disabled */
.boxselector_wrapper input[type='radio']:not(:disabled) ~ label,
.box-selector-item input[type='radio']:not(:disabled) ~ label {
box-shadow: none;
cursor: pointer;
}
.boxselector_wrapper label,
.box-selector-item label {
font-weight: normal;
font-size: 12px;
display: block;
background: var(--bg-boxselector-color);
border: 1px solid var(--border-boxselector-color);
border-radius: 2px;
padding: 10px 10px 0 10px;
text-align: left;
box-shadow: var(--shadow-boxselector-color);
position: relative;
}
/* disabled */
.box-selector-item input:disabled + label,
.boxselector_wrapper label.boxselector_disabled {
background: var(--bg-boxselector-disabled-color) !important;
border-color: #787878;
color: #787878;
@apply !bg-white;
@apply th-dark:!bg-gray-7;
@apply th-highcontrast:!bg-black;
filter: opacity(0.3) grayscale(1);
cursor: not-allowed;
pointer-events: none;
}
@ -63,30 +64,19 @@
pointer-events: auto;
}
/* checked */
.boxselector_wrapper input[type='radio']:checked + label,
.box-selector-item input[type='radio']:checked + label {
color: white;
@apply bg-blue-3 border-blue-6;
@apply th-dark:bg-blue-10 th-dark:border-blue-7;
background-image: url(../../../assets/ico/checked.svg);
background-repeat: no-repeat;
background-position: right 15px top 15px;
border-color: var(--selected-item-color);
}
.box-selector-item input[type='radio']:checked:disabled + label {
color: #787878;
}
.boxselector_wrapper input[type='radio']:checked + label .box_selector_mask_icon {
color: var(--selected-item-color);
}
:root[theme='highcontrast'] .box_selector_mask_icon,
:root[theme='dark'] .box_selector_mask_icon {
color: var(--bg-boxselector-wrapper-disabled-color);
}
.box_selector_mask_icon {
color: var(--bg-boxselector-color);
border-radius: 8px;
padding: 15px;
box-shadow: none;
}
@media only screen and (max-width: 700px) {
@ -95,48 +85,23 @@
}
}
.box-selector-item.limited.business {
--selected-item-color: var(--BE-only);
}
.box-selector-item.limited.business label {
border-color: var(--BE-only);
border-width: 2px;
}
.box-selector-item .limited-icon {
position: absolute;
left: 1em;
top: calc(50% - 0.5em);
height: 1em;
}
@media (min-width: 992px) {
.box-selector-item .limited-icon {
left: 2em;
}
}
.box-selector-item.limited.business :checked + label {
background-color: initial;
color: initial;
.box-selector-item.limited.business label,
.box-selector-item.limited.business input[type='radio']:checked + label {
@apply border-warning-7 bg-warning-1 text-black;
@apply th-dark:bg-warning-3;
}
.boxselector_img_container {
width: 100%;
margin-bottom: 20px;
text-align: left;
}
.boxselector_img {
height: 48px;
width: 48px;
left: 5px;
line-height: 90px;
margin-bottom: 0;
}
.boxselector_icon,
.boxselector_icon img {
color: var(--ui-blue-8);
font-size: 90px;
display: block;
}
@ -149,16 +114,6 @@
padding-left: 20px;
}
.boxselector_wrapper input[type='radio']:not(:disabled) ~ label,
.box-selector-item input[type='radio']:not(:disabled) ~ label {
background-color: var(--ui-gray-2);
}
.boxselector_img_container {
line-height: 90px;
margin-bottom: 0;
}
.box-selector-item p {
margin-bottom: 0;
}

72
app/react/components/BoxSelector/BoxSelectorItem.tsx
View File

@ -1,5 +1,4 @@
import clsx from 'clsx';
import ReactTooltip from 'react-tooltip';
import { isLimitedToBE } from '@/portainer/feature-flags/feature-flags.service';
import { Icon } from '@/react/components/Icon';
@ -7,6 +6,8 @@ import { Icon } from '@/react/components/Icon';
import './BoxSelectorItem.css';
import { BoxSelectorOption } from './types';
import { LimitedToBeIndicator } from './LimitedToBeIndicator';
import { BoxOption } from './BoxOption';
interface Props<T extends number | string> {
radioName: string;
@ -27,53 +28,38 @@ export function BoxSelectorItem<T extends number | string>({
}: Props<T>) {
const limitedToBE = isLimitedToBE(option.feature);
const tooltipId = `box-selector-item-${radioName}-${option.id}`;
const beIndicatorTooltipId = `box-selector-item-${radioName}-${option.id}-limited`;
return (
<div
className={clsx('box-selector-item', {
<BoxOption
className={clsx({
business: limitedToBE,
limited: limitedToBE,
})}
data-tip
data-for={tooltipId}
tooltip-append-to-body="true"
tooltip-placement="bottom"
tooltip-class="portainer-tooltip"
radioName={radioName}
option={option}
selectedValue={selectedValue}
disabled={disabled}
onChange={(value) => onChange(value, limitedToBE)}
tooltip={tooltip}
>
<input
type="radio"
name={radioName}
id={option.id}
checked={option.value === selectedValue}
value={option.value}
disabled={disabled}
onChange={() => onChange(option.value, limitedToBE)}
/>
<label htmlFor={option.id} data-cy={`${radioName}_${option.value}`}>
{limitedToBE && <i className="fas fa-briefcase limited-icon" />}
<div className="boxselector_img_container">
{!!option.icon && (
<Icon
icon={option.icon}
feather={option.featherIcon}
className="boxselector_icon space-right"
/>
)}
<>
{limitedToBE && (
<LimitedToBeIndicator tooltipId={beIndicatorTooltipId} />
)}
<div className={clsx({ 'opacity-30': limitedToBE })}>
<div className="boxselector_img_container">
{!!option.icon && (
<Icon
icon={option.icon}
feather={option.featherIcon}
className="boxselector_icon space-right"
/>
)}
</div>
<div className="boxselector_header">{option.label}</div>
<p className="box-selector-item-description">{option.description}</p>
</div>
<div className="boxselector_header">{option.label}</div>
<p className="box-selector-item-description">{option.description}</p>
</label>
{tooltip && (
<ReactTooltip
place="bottom"
className="portainer-tooltip"
id={tooltipId}
>
{tooltip}
</ReactTooltip>
)}
</div>
</>
</BoxOption>
);
}

35
app/react/components/BoxSelector/LimitedToBeIndicator.tsx Normal file
View File

@ -0,0 +1,35 @@
import { HelpCircle } from 'react-feather';
import ReactTooltip from 'react-tooltip';
interface Props {
tooltipId: string;
}
export function LimitedToBeIndicator({ tooltipId }: Props) {
return (
<>
<div className="absolute left-0 top-0 w-full">
<div className="mx-auto max-w-fit bg-warning-4 rounded-b-lg py-1 px-3 flex gap-1 text-sm items-center">
<span className="text-warning-9">Pro Feature</span>
<HelpCircle
className="feather !text-warning-7"
data-tip
data-for={tooltipId}
tooltip-append-to-body="true"
tooltip-placement="top"
tooltip-class="portainer-tooltip"
/>
</div>
</div>
<ReactTooltip
className="portainer-tooltip"
id={tooltipId}
place="top"
delayHide={1000}
>
Business Edition feature. <br />
This feature is currently limited to Business Edition users only.
</ReactTooltip>
</>
);
}

13
app/react/components/Icon.tsx
View File

@ -53,7 +53,12 @@ export function Icon({ icon, feather, className, mode, size }: Props) {
if (icon.indexOf('svg-') === 0) {
const svgIcon = icon.replace('svg-', '');
return <Svg icon={svgIcon as keyof typeof SvgIcons} className={classes} />;
return (
<Svg
icon={svgIcon as keyof typeof SvgIcons}
className={clsx(classes, '!flex')}
/>
);
}
if (feather) {
@ -66,6 +71,10 @@ export function Icon({ icon, feather, className, mode, size }: Props) {
}
return (
<i className={clsx('fa', icon, classes)} aria-hidden="true" role="img" />
<i
className={clsx(icon.startsWith('fa-') ? `fa ${icon}` : icon, classes)}
aria-hidden="true"
role="img"
/>
);
}

10
app/react/components/PageHeader/HeaderTitle.tsx
View File

@ -36,7 +36,15 @@ export function HeaderTitle({ title, children }: PropsWithChildren<Props>) {
data-cy="userMenu-button"
aria-label="User menu toggle"
>
<User className="icon-nested-gray" />
<div
className={clsx(
'icon-badge text-lg !p-2 mr-1',
'bg-gray-4 text-gray-8',
'th-dark:bg-gray-warm-10 th-dark:text-gray-warm-7'
)}
>
<User className="feather" />
</div>
{user && <span>{user.Username}</span>}
<ChevronDown className={styles.arrowDown} />
</MenuButton>

12
app/react/components/Widget/WidgetTitle.tsx
View File

@ -25,11 +25,13 @@ export function WidgetTitle({
<div className="widget-header">
<div className="row">
<span className={clsx('pull-left', className)}>
<Icon
icon={icon}
feather={featherIcon}
className="icon-nested-blue icon-primary space-right"
/>
<div className="widget-icon">
<Icon
icon={icon}
feather={featherIcon}
className="space-right feather"
/>
</div>
<span>{title}</span>
</span>
<span className={clsx('pull-right', className)}>{children}</span>

57
app/react/components/buttons/Button.stories.tsx
View File

@ -9,6 +9,63 @@ export default {
title: 'Components/Buttons/Button',
} as Meta;
export function DifferentTheme() {
const colors = [
'primary',
'secondary',
'success',
'danger',
'dangerlight',
'warning',
'light',
'link',
] as const;
const themes = ['light', 'dark', 'highcontrast'] as const;
const states = ['', 'disabled'] as const;
return (
<table>
<thead>
<tr>
<th>Color/Theme</th>
{themes.map((theme) => (
<th key={theme} className="text-center">
{theme}
</th>
))}
</tr>
</thead>
<tbody>
{colors.map((color) => (
<tr key={color}>
<td>{color}</td>
{themes.map((theme) => (
<td
key={theme}
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
theme={theme}
className="p-5"
style={{ background: 'var(--bg-body-color)' }}
>
{states.map((state) => (
<Button
color={color}
key={state}
disabled={state === 'disabled'}
>
{state} {color} button
</Button>
))}
</td>
))}
</tr>
))}
</tbody>
</table>
);
}
function Template({
onClick,
color,

9
app/react/components/buttons/Button.tsx
View File

@ -58,14 +58,7 @@ export function Button({
/* eslint-disable-next-line react/button-has-type */
type={type}
disabled={disabled}
className={clsx(
{
'opacity-60': disabled,
},
`btn btn-${color}`,
sizeClass(size),
className
)}
className={clsx(`btn btn-${color}`, sizeClass(size), className)}
onClick={onClick}
title={title}
// eslint-disable-next-line react/jsx-props-no-spreading

12
app/react/components/datatables/TableTitle.tsx
View File

@ -19,11 +19,13 @@ export function TableTitle({
return (
<div className="toolBar">
<div className="toolBarTitle">
<Icon
icon={icon}
feather={featherIcon}
className="icon-nested-blue icon-primary space-right"
/>
<div className="widget-icon">
<Icon
icon={icon}
feather={featherIcon}
className="space-right feather"
/>
</div>
{label}
</div>

8
app/react/portainer/environments/wizard/EnvironmentTypeSelectView/KaaSIcon.module.css
View File

@ -1,8 +0,0 @@
.selected .mask-icon {
color: var(--selected-item-color);
}
.mask-icon {
color: var(--bg-boxselector-color);
transform: scale(1.2);
}

21
app/react/portainer/environments/wizard/EnvironmentTypeSelectView/KaaSIcon.tsx
View File

@ -1,21 +0,0 @@
import clsx from 'clsx';
import styles from './KaaSIcon.module.css';
export interface Props {
selected?: boolean;
className?: string;
}
export function KaaSIcon({ selected, className }: Props) {
return (
<span
className={clsx('fa-stack fa-1x', styles.root, className, {
[styles.selected]: selected,
})}
>
<i className="fas fa-cloud fa-stack-2x" />
<i className={clsx('fas fa-dharmachakra fa-stack-1x', styles.maskIcon)} />
</span>
);
}

17
app/react/portainer/environments/wizard/EnvironmentTypeSelectView/environment-types.ts
View File

@ -1,34 +1,29 @@
import { FeatureId } from '@/portainer/feature-flags/enums';
import { KaaSIcon, Props as KaaSIconProps } from './KaaSIcon';
import KaaSIcon from './kaas-icon.svg?c';
interface WizardEnvironmentOption {
id: string;
title: string;
icon: string | { ({ selected, className }: KaaSIconProps): JSX.Element };
description: string;
featureId?: FeatureId;
}
export const environmentTypes: WizardEnvironmentOption[] = [
export const environmentTypes = [
{
id: 'docker',
title: 'Docker',
icon: 'fab fa-docker',
description:
'Connect to Docker Standalone / Swarm via URL/IP, API or Socket',
featureId: undefined,
},
{
id: 'kubernetes',
title: 'Kubernetes',
icon: 'fas fa-dharmachakra',
description: 'Connect to a kubernetes environment via URL/IP',
featureId: undefined,
},
{
id: 'aci',
title: 'ACI',
description: 'Connect to ACI environment via API',
icon: 'fab fa-microsoft',
featureId: undefined,
},
{
id: 'nomad',
@ -44,4 +39,4 @@ export const environmentTypes: WizardEnvironmentOption[] = [
icon: KaaSIcon,
featureId: FeatureId.KAAS_PROVISIONING,
},
];
] as const;

5
app/react/portainer/environments/wizard/EnvironmentTypeSelectView/kaas-icon.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="auto" height="auto" viewBox="0 0 22 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M11 0C6.78119 0 3.3251 3.26563 3.02165 7.40697C1.24457 8.17346 0 9.9404 0 12C0 14.7614 2.23858 17 5 17H16.5C19.5376 17 22 14.5376 22 11.5C22 9.30813 20.7183 7.41775 18.8658 6.53369C18.1766 2.81531 14.9177 0 11 0ZM11.4999 4.40625C11.4999 4.13011 11.276 3.90625 10.9999 3.90625C10.7237 3.90625 10.4999 4.13011 10.4999 4.40625V4.70044C9.67915 4.79483 8.92827 5.11878 8.31307 5.60645L8.1049 5.39828C7.90964 5.20302 7.59306 5.20302 7.39779 5.39828C7.20253 5.59354 7.20253 5.91013 7.39779 6.10539L7.60597 6.31356C7.11829 6.92876 6.79434 7.67964 6.69995 8.50036H6.40576C6.12962 8.50036 5.90576 8.72422 5.90576 9.00036C5.90576 9.2765 6.12962 9.50036 6.40576 9.50036H6.69996C6.79437 10.3211 7.11834 11.0719 7.60602 11.6871L7.39779 11.8953C7.20253 12.0906 7.20253 12.4072 7.39779 12.6024C7.59306 12.7977 7.90964 12.7977 8.1049 12.6024L8.31314 12.3942C8.92832 12.8819 9.67918 13.2058 10.4999 13.3002V13.5945C10.4999 13.8706 10.7237 14.0945 10.9999 14.0945C11.276 14.0945 11.4999 13.8706 11.4999 13.5945V13.3002C12.3206 13.2057 13.0714 12.8818 13.6866 12.3942L13.8948 12.6024C14.0901 12.7977 14.4067 12.7977 14.602 12.6024C14.7972 12.4072 14.7972 12.0906 14.602 11.8953L14.3937 11.687C14.8813 11.0719 15.2053 10.321 15.2997 9.50036H15.594C15.8701 9.50036 16.094 9.2765 16.094 9.00036C16.094 8.72422 15.8701 8.50036 15.594 8.50036H15.2997C15.2053 7.67966 14.8814 6.92881 14.3937 6.31363L14.602 6.10539C14.7972 5.91013 14.7972 5.59354 14.602 5.39828C14.4067 5.20302 14.0901 5.20302 13.8948 5.39828L13.6866 5.60651C13.0714 5.11883 12.3206 4.79486 11.4999 4.70045V4.40625ZM10.4999 5.70917C9.95399 5.7914 9.45154 6.00621 9.02637 6.31975L10.4999 7.79326V5.70917ZM8.31926 7.02685C8.00572 7.45203 7.79091 7.95448 7.70868 8.50036H9.79277L8.31926 7.02685ZM7.7087 9.50036C7.79095 10.0462 8.00576 10.5487 8.31931 10.9738L9.79277 9.50036H7.7087ZM9.02643 11.6809C9.4516 11.9944 9.95402 12.2092 10.4999 12.2914V10.2075L9.02643 11.6809ZM11.4999 12.2914C12.0457 12.2092 12.5481 11.9944 12.9733 11.6809L11.4999 10.2075V12.2914ZM13.6804 10.9738C13.9939 10.5486 14.2087 10.0462 14.2909 9.50036H12.207L13.6804 10.9738ZM14.2909 8.50036C14.2087 7.95451 13.9939 7.45208 13.6804 7.02692L12.207 8.50036H14.2909ZM12.9733 6.3198L11.4999 7.79326V5.70919C12.0457 5.79144 12.5482 6.00625 12.9733 6.3198Z"
fill="currentColor" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

41
app/react/portainer/environments/wizard/components/Option/Option.module.css
View File

@ -1,27 +1,32 @@
.optionTile {
.root {
--selected-item-color: var(--blue-2);
@apply border border-solid;
@apply bg-gray-2 border-gray-5 text-black;
@apply th-dark:bg-gray-iron-10 th-dark:border-gray-neutral-8 th-dark:text-white;
display: block;
width: 200px;
min-height: 300px;
border-radius: 5px;
padding: 25px 20px;
cursor: pointer;
box-shadow: 0 3px 10px -2px rgb(161 170 166 / 60%);
box-shadow: var(--shadow-boxselector-color);
margin: 0;
display: block;
width: 200px;
min-height: 300px;
}
.feature {
--selected-item-color: var(--blue-2);
border: 1px solid rgb(163, 163, 163);
}
.feature:hover {
box-shadow: 0 3px 10px -2px rgb(161 170 166 / 80%);
border: 1px solid var(--blue-2);
border-color: var(--blue-2);
color: #337ab7;
box-shadow: 0 3px 10px -2px rgb(161 170 166 / 80%);
}
.teaser {
border: 2px solid var(--BE-only) !important;
@apply border-2;
border-color: var(--BE-only);
color: var(--text-muted-color);
}
@ -29,14 +34,10 @@
box-shadow: 0 3px 10px -2px rgb(161 170 166 / 80%);
}
.active:hover {
color: #fff;
}
.active {
background: #337ab7;
color: #fff;
border: 1px solid var(--blue-2);
@apply bg-blue-3 border-blue-6;
@apply th-dark:bg-blue-10 th-dark:border-blue-7;
box-shadow: 0 3px 10px -2px rgb(161 170 166 / 80%);
}
@ -45,5 +46,5 @@
}
.icon-component {
font-size: 40px;
font-size: 80px;
}

2
app/react/portainer/environments/wizard/components/Option/Option.tsx
View File

@ -33,7 +33,7 @@ export function Option({
return (
<button
className={clsx(
styles.optionTile,
styles.root,
isLimited ? styles.teaser : styles.feature,
'border-0',
{

11
app/react/sidebar/EnvironmentSidebar.tsx
View File

@ -1,6 +1,7 @@
import { useCurrentStateAndParams, useRouter } from '@uirouter/react';
import { useEffect } from 'react';
import { X, Slash } from 'react-feather';
import clsx from 'clsx';
import {
PlatformType,
@ -31,7 +32,13 @@ export function EnvironmentSidebar() {
}
return (
<div className="rounded border border-dotted py-2 be:bg-gray-10 bg-blue-11 be:border-gray-8 border-blue-9">
<div
className={clsx(
'rounded border border-dotted py-2',
'bg-blue-11 be:bg-gray-10 th-dark:bg-gray-warm-11',
'border-blue-9 be:border-gray-8 th-dark:border-gray-warm-9'
)}
>
{environment ? (
<Content environment={environment} onClear={clearEnvironment} />
) : (
@ -138,7 +145,7 @@ function Title({ environment, onClear }: TitleProps) {
title="Clear environment"
type="button"
onClick={onClear}
className="flex items-center justify-center be:bg-gray-9 bg-blue-10 hover:bg-blue-9 be:hover:bg-gray-7 transition-colors duration-200 rounded border-0 text-sm h-5 w-5 p-1 ml-auto mr-2 text-gray-5 be:text-gray-6 hover:text-white be:hover:text-white"
className="flex items-center justify-center be:bg-gray-9 bg-blue-10 th-dark:bg-gray-warm-10 hover:bg-blue-9 be:hover:bg-gray-7 th-dark:hover:bg-gray-8 transition-colors duration-200 rounded border-0 text-sm h-5 w-5 p-1 ml-auto mr-2 text-gray-5 be:text-gray-6 hover:text-white be:hover:text-white"
>
<X />
</button>

2
app/react/sidebar/Header.tsx
View File

@ -31,7 +31,7 @@ export function Header({ logo }: Props) {
<button
type="button"
onClick={() => toggle()}
className="w-6 h-6 flex justify-center items-center text-gray-4 be:text-gray-5 border-0 rounded text-sm bg-blue-11 hover:bg-blue-10 be:bg-gray-10 be:hover:bg-gray-8 transition-colors duration-200 hover:text-white be:hover:text-white"
className="w-6 h-6 flex justify-center items-center text-gray-4 be:text-gray-5 border-0 rounded text-sm bg-blue-11 hover:bg-blue-10 be:bg-gray-10 be:hover:bg-gray-8 th-dark:bg-gray-warm-11 hover:th-dark:bg-gray-warm-9 transition-colors duration-200 hover:text-white be:hover:text-white"
aria-label="Toggle Sidebar"
title="Toggle Sidebar"
>

2
app/react/sidebar/Sidebar.tsx
View File

@ -32,7 +32,7 @@ export function Sidebar() {
<nav
className={clsx(
styles.root,
'p-5 flex flex-col be:bg-gray-11 bg-blue-10'
'p-5 flex flex-col be:bg-gray-11 bg-blue-10 th-dark:bg-gray-warm-10'
)}
aria-label="Main"
>

2
app/react/sidebar/SidebarItem/Head.tsx
View File

@ -34,7 +34,7 @@ export function Head({
const { isOpen } = useSidebarState();
const anchorProps = useSrefActive(
to,
'bg-blue-8 be:bg-gray-8',
'bg-blue-8 be:bg-gray-8 th-dark:bg-gray-9',
params,
options,
ignorePaths

16
package.json
View File

@ -152,13 +152,13 @@
"@babel/preset-react": "^7.16.0",
"@babel/preset-typescript": "^7.16.0",
"@simbathesailor/use-what-changed": "^2.0.0",
"@storybook/addon-actions": "^6.4.9",
"@storybook/addon-essentials": "^6.4.9",
"@storybook/addon-links": "^6.4.9",
"@storybook/addon-actions": "^6.5.10",
"@storybook/addon-essentials": "^6.5.10",
"@storybook/addon-links": "^6.5.10",
"@storybook/addon-postcss": "^2.0.0",
"@storybook/builder-webpack5": "^6.4.9",
"@storybook/manager-webpack5": "^6.4.9",
"@storybook/react": "^6.4.9",
"@storybook/builder-webpack5": "^6.5.10",
"@storybook/manager-webpack5": "^6.5.10",
"@storybook/react": "^6.5.10",
"@svgr/webpack": "^6.2.1",
"@testing-library/jest-dom": "^5.16.1",
"@testing-library/react": "^12.1.2",
@ -204,7 +204,7 @@
"eslint-plugin-react": "^7.27.1",
"eslint-plugin-react-hooks": "^4.3.0",
"eslint-plugin-regex": "^1.9.0",
"eslint-plugin-storybook": "^0.5.5",
"eslint-plugin-storybook": "^0.6.3",
"eslint-webpack-plugin": "^3.1.1",
"grunt": "^1.4.1",
"grunt-cli": "^1.4.3",
@ -225,7 +225,7 @@
"load-grunt-tasks": "^3.5.2",
"lodash-webpack-plugin": "^0.11.6",
"mini-css-extract-plugin": "^2.5.3",
"msw-storybook-addon": "^1.5.0",
"msw-storybook-addon": "^1.6.3",
"ngtemplate-loader": "^2.1.0",
"plop": "^2.6.0",
"postcss": "^8.4.14",

6
tailwind.config.js
View File

@ -28,9 +28,9 @@ module.exports = {
plugins: [
plugin(({ addVariant }) => {
addVariant('be', '[data-edition="BE"] &');
addVariant('th-highcontrast', '[theme="highcontrast"] &');
addVariant('th-dark', '[theme="dark"] &');
addVariant('be', '&:is([data-edition="BE"] *)');
addVariant('th-highcontrast', '&:is([theme="highcontrast"] *)');
addVariant('th-dark', '&:is([theme="dark"] *)');
}),
],
};

1980
yarn.lock
View File

File diff suppressed because it is too large Load Diff