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

feat(ui): portainer wizard ui change for ce EE-3576 (#7405) 

* ui change for wizard
pull/7467/head
Richard Wei 2022-08-12 08:43:01 +12:00 committed by GitHub
parent a7ab0a5662
commit ee1ee633d7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
33 changed files with 272 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -102,13 +102,12 @@
--bg-switch-box-color: var(--ui-gray-5);
--bg-input-group-addon-color: var(--ui-gray-3);
--bg-btn-default-color: var(--white-color);
--bg-blocklist-hover-color: var(--ui-blue-3);
--bg-boxselector-color: var(--white-color);
--bg-blocklist-hover-color: var(--ui-blue-2);
--bg-boxselector-color: var(--ui-gray-2);
--bg-table-color: var(--white-color);
--bg-md-checkbox-color: var(--grey-12);
--bg-form-control-disabled-color: var(--grey-11);
--bg-modal-content-color: var(--white-color);
--bg-code-color: var(--grey-15);
--bg-navtabs-color: var(--white-color);
--bg-navtabs-hover-color: var(--grey-16);
--bg-table-selected-color: var(--grey-14);
@ -165,6 +164,12 @@
--bg-webeditor-color: var(--ui-gray-3);
--bg-button-group-color: var(--ui-white);
--bg-pagination-disabled-color: var(--ui-white);
--bg-nav-container-color: var(--ui-gray-2);
--bg-code-script-color: var(--ui-white);
--bg-nav-tabs-active-color: var(--ui-gray-4);
--bg-stepper-color: var(--ui-white);
--bg-stepper-active-color: var(--ui-blue-1);
--bg-code-color: var(--ui-white);
--text-main-color: var(--grey-7);
--text-body-color: var(--grey-6);
@ -178,7 +183,7 @@
--text-blocklist-hover-color: var(--grey-37);
--text-dashboard-item-color: var(--grey-32);
--text-danger-color: var(--red-1);
--text-code-color: var(--red-2);
--text-code-color: var(--ui-gray-9);
--text-navtabs-color: var(--grey-25);
--text-cm-default-color: var(--blue-1);
--text-cm-meta-color: var(--black-color);
@ -210,6 +215,9 @@
--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);
--text-stepper-active-color: var(--ui-blue-8);
--text-boxselector-header: var(--ui-black);
--border-color: var(--grey-42);
--border-widget-color: var(--grey-43);
@ -224,8 +232,8 @@
--border-boxselector-color: var(--grey-6);
--border-md-checkbox-color: var(--grey-19);
--border-modal-header-color: var(--grey-45);
--border-navtabs-color: var(--grey-19);
--border-form-section-title-color: var(--grey-26);
--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);
@ -247,6 +255,8 @@
--border-bootbox: var(--ui-gray-5);
--border-blocklist: var(--ui-gray-5);
--border-widget: var(--ui-gray-5);
--border-nav-container-color: var(--ui-gray-5);
--border-stepper-color: var(--ui-gray-4);
--shadow-box-color: 0 3px 10px -2px var(--grey-50);
--shadow-boxselector-color: 0 3px 10px -2px var(--grey-50);
@ -283,8 +293,20 @@
--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-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-widget-color: var(--grey-1);
--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-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-header-color: var(--grey-2);
@ -298,8 +320,7 @@
--bg-md-checkbox-color: var(--grey-31);
--bg-form-control-disabled-color: var(--grey-3);
--bg-modal-content-color: var(--grey-1);
--bg-code-color: var(--red-4);
--bg-navtabs-color: var(--grey-3);
--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);
@ -351,6 +372,11 @@
--bg-webeditor-color: var(--ui-gray-warm-9);
--bg-button-group-color: var(--ui-black);
--bg-pagination-disabled-color: var(--grey-1);
--bg-nav-container-color: var(--ui-gray-iron-10);
--bg-code-script-color: var(--ui-gray-warm-11);
--bg-nav-tabs-active-color: var(--ui-gray-warm-9);
--bg-stepper-color: var(--ui-gray-iron-10);
--bg-stepper-active-color: var(--ui-blue-8);
--text-main-color: var(--white-color);
--text-body-color: var(--white-color);
@ -398,6 +424,9 @@
--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);
--text-stepper-active-color: var(--ui-white);
--text-boxselector-header: var(--ui-white);
--border-color: var(--grey-3);
--border-widget-color: var(--grey-1);
@ -434,6 +463,8 @@
--border-blocklist: var(--ui-gray-9);
--border-widget: var(--ui-gray-9);
--border-pagination-color: var(--grey-1);
--border-nav-container-color: var(--ui-gray-neutral-8);
--border-stepper-color: var(--ui-gray-warm-9);
--blue-color: var(--blue-2);
--button-close-color: var(--white-color);
@ -513,11 +544,9 @@
--bg-pre-color: var(--grey-2);
--bg-navtabs-hover-color: var(--grey-3);
--bg-btn-default-color: var(--black-color);
--bg-code-color: var(--red-4);
--bg-navtabs-color: var(--black-color);
--bg-input-autofill-color: var(--black-color);
--bg-code-color: var(--grey-2);
--bg-navtabs-color: var(--grey-2);
--bg-code-color: var(--ui-black);
--bg-navtabs-hover-color: var(--grey-3);
--bg-btn-default-hover-color: var(--grey-3);
--bg-btn-default-color: var(--black-color);
@ -536,6 +565,11 @@
--bg-webeditor-color: var(--ui-gray-warm-9);
--bg-pagination-disabled-color: var(--ui-black);
--bg-pagination-hover-color: var(--ui-black);
--bg-nav-container-color: var(--ui-black);
--bg-code-script-color: var(--ui-black);
--bg-nav-tabs-active-color: var(--ui-black);
--bg-stepper-active-color: var(--ui-blue-8);
--bg-stepper-color: var(--ui-black);
--text-main-color: var(--white-color);
--text-body-color: var(--white-color);
@ -578,6 +612,8 @@
--text-pagination-span-color: var(--ui-white);
--text-bootbox: var(--white-color);
--text-pagination-span-hover-color: var(--ui-white);
--text-stepper-active-color: var(--ui-white);
--text-boxselector-header: var(--ui-white);
--border-color: var(--grey-55);
--border-widget-color: var(--white-color);
@ -610,6 +646,8 @@
--border-bootbox: var(--black-color);
--border-blocklist: var(--white-color);
--border-widget: var(--white-color);
--border-nav-container-color: var(--ui-white);
--border-stepper-color: var(--ui-gray-warm-9);
--shadow-box-color: none;
--shadow-boxselector-color: none;

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

@ -427,12 +427,29 @@ fieldset[disabled] .btn {
}
.nav-tabs > li.active > a {
border-top: 0px;
border-left: 0px;
border-right: 0px;
border-bottom: 3px solid red;
border: 0px;
}
.label-default {
line-height: 11px;
}
/* Code Script Style */
.code-script {
background-color: var(--bg-code-script-color);
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
padding: 5px;
}
.nav-container {
border: 1px solid var(--border-nav-container-color);
background-color: var(--bg-nav-container-color);
border-radius: 8px;
padding: 10px;
}
.nav-tabs > li {
background-color: var(--bg-nav-tabs-active-color);
border-top-right-radius: 8px;
}

11
app/assets/ico/agent.svg Normal file
View File

@ -0,0 +1,11 @@
<svg width="36" height="40" viewBox="0 0 36 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.3817 5.28003C22.1592 5.28003 28.4649 11.5865 28.4649 19.365C28.4649 27.1435 22.1592 33.45 14.3817 33.45C6.60065 33.4535 0.294922 27.1435 0.294922 19.365C0.294922 11.5865 6.60065 5.28003 14.3817 5.28003Z" fill="#E0F2FE"/>
<g clip-path="url(#clip0_9538_418895)">
<path d="M15.0049 13.2509L8.75488 20.7509H14.3799L13.7549 25.7509L20.0049 18.2509H14.3799L15.0049 13.2509Z" stroke="#0086C9" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<defs>
<clipPath id="clip0_9538_418895">
<rect width="15" height="15" fill="white" transform="translate(6.87988 12.0009)"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 719 B

4
app/assets/ico/api.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="36" height="40" viewBox="0 0 36 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.3817 5.28003C22.1592 5.28003 28.4649 11.5865 28.4649 19.365C28.4649 27.1435 22.1592 33.45 14.3817 33.45C6.60065 33.4535 0.294922 27.1435 0.294922 19.365C0.294922 11.5865 6.60065 5.28003 14.3817 5.28003Z" fill="#E0F2FE"/>
<path d="M9.32758 23.1544V23.0281C9.32758 21.9669 9.32758 21.4364 9.53409 21.0311C9.71574 20.6746 10.0056 20.3847 10.3621 20.2031C10.7674 19.9966 11.298 19.9966 12.3591 19.9966H16.4011C17.4622 19.9966 17.9928 19.9966 18.3981 20.2031C18.7546 20.3847 19.0444 20.6746 19.2261 21.0311C19.4326 21.4364 19.4326 21.9669 19.4326 23.0281V23.1544M9.32758 23.1544C8.62997 23.1544 8.06445 23.7199 8.06445 24.4175C8.06445 25.1151 8.62997 25.6806 9.32758 25.6806C10.0252 25.6806 10.5907 25.1151 10.5907 24.4175C10.5907 23.7199 10.0252 23.1544 9.32758 23.1544ZM19.4326 23.1544C18.735 23.1544 18.1695 23.7199 18.1695 24.4175C18.1695 25.1151 18.735 25.6806 19.4326 25.6806C20.1302 25.6806 20.6957 25.1151 20.6957 24.4175C20.6957 23.7199 20.1302 23.1544 19.4326 23.1544ZM14.3801 23.1544C13.6825 23.1544 13.117 23.7199 13.117 24.4175C13.117 25.1151 13.6825 25.6806 14.3801 25.6806C15.0777 25.6806 15.6432 25.1151 15.6432 24.4175C15.6432 23.7199 15.0777 23.1544 14.3801 23.1544ZM14.3801 23.1544V16.8388M10.5907 16.8388H18.1695C18.758 16.8388 19.0523 16.8388 19.2844 16.7426C19.5939 16.6144 19.8398 16.3685 19.968 16.059C20.0641 15.8269 20.0641 15.5326 20.0641 14.9441C20.0641 14.3555 20.0641 14.0613 19.968 13.8291C19.8398 13.5196 19.5939 13.2737 19.2844 13.1455C19.0523 13.0494 18.758 13.0494 18.1695 13.0494H10.5907C10.0022 13.0494 9.70789 13.0494 9.47576 13.1455C9.16626 13.2737 8.92036 13.5196 8.79217 13.8291C8.69602 14.0613 8.69602 14.3555 8.69602 14.9441C8.69602 15.5326 8.69602 15.8269 8.79217 16.059C8.92036 16.3685 9.16626 16.6144 9.47576 16.7426C9.70789 16.8388 10.0022 16.8388 10.5907 16.8388Z" stroke="#0086C9" stroke-width="1.15" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

1
app/assets/ico/cloud.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="auto" height="auto" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-cloud"><path d="M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 284 B

11
app/assets/ico/edge-agent.svg Normal file
View File

@ -0,0 +1,11 @@
<svg width="36" height="40" viewBox="0 0 36 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.3817 5.28003C22.1592 5.28003 28.4649 11.5865 28.4649 19.365C28.4649 27.1435 22.1592 33.45 14.3817 33.45C6.60065 33.4535 0.294922 27.1435 0.294922 19.365C0.294922 11.5865 6.60065 5.28003 14.3817 5.28003Z" fill="#E0F2FE"/>
<g clip-path="url(#clip0_9538_418898)">
<path d="M18.1297 18.2509H17.3422C17.1084 17.3452 16.6252 16.5233 15.9476 15.8786C15.27 15.2339 14.4252 14.7921 13.509 14.6035C12.5929 14.415 11.6423 14.4871 10.7651 14.8118C9.88797 15.1366 9.11948 15.7008 8.54699 16.4405C7.9745 17.1801 7.62095 18.0655 7.52652 18.9961C7.4321 19.9266 7.60058 20.865 8.01282 21.7046C8.42506 22.5442 9.06453 23.2513 9.85857 23.7456C10.6526 24.2399 11.5694 24.5016 12.5047 24.5009H18.1297C18.9585 24.5009 19.7534 24.1716 20.3394 23.5856C20.9255 22.9995 21.2547 22.2047 21.2547 21.3759C21.2547 20.5471 20.9255 19.7522 20.3394 19.1661C19.7534 18.5801 18.9585 18.2509 18.1297 18.2509Z" stroke="#0086C9" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<defs>
<clipPath id="clip0_9538_418898">
<rect width="15" height="15" fill="white" transform="translate(6.87988 12.0009)"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

11
app/assets/ico/import.svg Normal file
View File

@ -0,0 +1,11 @@
<svg width="37" height="40" viewBox="0 0 37 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.8817 5.28003C22.6592 5.28003 28.9649 11.5865 28.9649 19.365C28.9649 27.1435 22.6592 33.45 14.8817 33.45C7.10065 33.4535 0.794922 27.1435 0.794922 19.365C0.794922 11.5865 7.10065 5.28003 14.8817 5.28003Z" fill="#E0F2FE"/>
<g clip-path="url(#clip0_9540_418847)">
<path d="M17.3803 22.0008L14.8803 19.5008M14.8803 19.5008L12.3803 22.0008M14.8803 19.5008V25.1258M20.124 23.4946C20.7336 23.1623 21.2152 22.6364 21.4927 22C21.7702 21.3636 21.8279 20.6529 21.6567 19.98C21.4854 19.3072 21.095 18.7105 20.547 18.2842C19.9989 17.858 19.3246 17.6263 18.6303 17.6258H17.8428C17.6536 16.8941 17.301 16.2148 16.8115 15.639C16.322 15.0631 15.7083 14.6058 15.0166 14.3012C14.3249 13.9967 13.5731 13.8529 12.8179 13.8808C12.0626 13.9086 11.3235 14.1073 10.656 14.4619C9.98859 14.8165 9.41023 15.3178 8.96442 15.9281C8.51862 16.5384 8.21697 17.2418 8.08215 17.9855C7.94733 18.7291 7.98285 19.4937 8.18604 20.2216C8.38924 20.9496 8.75481 21.622 9.25529 22.1883" stroke="#0086C9" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<defs>
<clipPath id="clip0_9540_418847">
<rect width="15" height="15" fill="white" transform="translate(7.37988 12.0009)"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

4
app/assets/ico/socket.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="36" height="40" viewBox="0 0 36 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.3817 5.28003C22.1592 5.28003 28.4649 11.5865 28.4649 19.365C28.4649 27.1435 22.1592 33.45 14.3817 33.45C6.60065 33.4535 0.294922 27.1435 0.294922 19.365C0.294922 11.5865 6.60065 5.28003 14.3817 5.28003Z" fill="#E0F2FE"/>
<path d="M14.3797 23.5025C16.98 23.5025 19.0879 21.3946 19.0879 18.7943L19.0879 16.3519L16.7331 16.3519M14.3797 23.5025C11.7795 23.5025 9.67156 21.3946 9.67156 18.7943L9.67156 16.3519L16.7331 16.3519M14.3797 23.5025C14.3797 24.9593 14.3797 26.5726 16.7331 26.5726L17.7794 26.5726M16.7331 16.3519L16.7331 13.4274M12.0216 16.3519L12.0216 13.4274" stroke="#0086C9" stroke-width="1.33" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 768 B

1
app/assets/ico/upload-cloud.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="auto" height="auto" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-upload-cloud"><polyline points="16 16 12 12 8 16"></polyline><line x1="12" y1="12" x2="12" y2="21"></line><path d="M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3"></path><polyline points="16 16 12 12 8 16"></polyline></svg>
Side by Side

After

Width:  |  Height:  |  Size: 435 B

11
app/assets/ico/wizard/agent.svg Normal file
View File

@ -0,0 +1,11 @@
<svg width="36" height="40" viewBox="0 0 36 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.3817 5.28003C22.1592 5.28003 28.4649 11.5865 28.4649 19.365C28.4649 27.1435 22.1592 33.45 14.3817 33.45C6.60065 33.4535 0.294922 27.1435 0.294922 19.365C0.294922 11.5865 6.60065 5.28003 14.3817 5.28003Z" fill="#E0F2FE"/>
<g clip-path="url(#clip0_9538_418895)">
<path d="M15.0049 13.2509L8.75488 20.7509H14.3799L13.7549 25.7509L20.0049 18.2509H14.3799L15.0049 13.2509Z" stroke="#0086C9" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<defs>
<clipPath id="clip0_9538_418895">
<rect width="15" height="15" fill="white" transform="translate(6.87988 12.0009)"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 719 B

4
app/assets/ico/wizard/api.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="36" height="40" viewBox="0 0 36 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.3817 5.28003C22.1592 5.28003 28.4649 11.5865 28.4649 19.365C28.4649 27.1435 22.1592 33.45 14.3817 33.45C6.60065 33.4535 0.294922 27.1435 0.294922 19.365C0.294922 11.5865 6.60065 5.28003 14.3817 5.28003Z" fill="#E0F2FE"/>
<path d="M9.32758 23.1544V23.0281C9.32758 21.9669 9.32758 21.4364 9.53409 21.0311C9.71574 20.6746 10.0056 20.3847 10.3621 20.2031C10.7674 19.9966 11.298 19.9966 12.3591 19.9966H16.4011C17.4622 19.9966 17.9928 19.9966 18.3981 20.2031C18.7546 20.3847 19.0444 20.6746 19.2261 21.0311C19.4326 21.4364 19.4326 21.9669 19.4326 23.0281V23.1544M9.32758 23.1544C8.62997 23.1544 8.06445 23.7199 8.06445 24.4175C8.06445 25.1151 8.62997 25.6806 9.32758 25.6806C10.0252 25.6806 10.5907 25.1151 10.5907 24.4175C10.5907 23.7199 10.0252 23.1544 9.32758 23.1544ZM19.4326 23.1544C18.735 23.1544 18.1695 23.7199 18.1695 24.4175C18.1695 25.1151 18.735 25.6806 19.4326 25.6806C20.1302 25.6806 20.6957 25.1151 20.6957 24.4175C20.6957 23.7199 20.1302 23.1544 19.4326 23.1544ZM14.3801 23.1544C13.6825 23.1544 13.117 23.7199 13.117 24.4175C13.117 25.1151 13.6825 25.6806 14.3801 25.6806C15.0777 25.6806 15.6432 25.1151 15.6432 24.4175C15.6432 23.7199 15.0777 23.1544 14.3801 23.1544ZM14.3801 23.1544V16.8388M10.5907 16.8388H18.1695C18.758 16.8388 19.0523 16.8388 19.2844 16.7426C19.5939 16.6144 19.8398 16.3685 19.968 16.059C20.0641 15.8269 20.0641 15.5326 20.0641 14.9441C20.0641 14.3555 20.0641 14.0613 19.968 13.8291C19.8398 13.5196 19.5939 13.2737 19.2844 13.1455C19.0523 13.0494 18.758 13.0494 18.1695 13.0494H10.5907C10.0022 13.0494 9.70789 13.0494 9.47576 13.1455C9.16626 13.2737 8.92036 13.5196 8.79217 13.8291C8.69602 14.0613 8.69602 14.3555 8.69602 14.9441C8.69602 15.5326 8.69602 15.8269 8.79217 16.059C8.92036 16.3685 9.16626 16.6144 9.47576 16.7426C9.70789 16.8388 10.0022 16.8388 10.5907 16.8388Z" stroke="#0086C9" stroke-width="1.15" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

11
app/assets/ico/wizard/edge-agent.svg Normal file
View File

@ -0,0 +1,11 @@
<svg width="36" height="40" viewBox="0 0 36 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.3817 5.28003C22.1592 5.28003 28.4649 11.5865 28.4649 19.365C28.4649 27.1435 22.1592 33.45 14.3817 33.45C6.60065 33.4535 0.294922 27.1435 0.294922 19.365C0.294922 11.5865 6.60065 5.28003 14.3817 5.28003Z" fill="#E0F2FE"/>
<g clip-path="url(#clip0_9538_418898)">
<path d="M18.1297 18.2509H17.3422C17.1084 17.3452 16.6252 16.5233 15.9476 15.8786C15.27 15.2339 14.4252 14.7921 13.509 14.6035C12.5929 14.415 11.6423 14.4871 10.7651 14.8118C9.88797 15.1366 9.11948 15.7008 8.54699 16.4405C7.9745 17.1801 7.62095 18.0655 7.52652 18.9961C7.4321 19.9266 7.60058 20.865 8.01282 21.7046C8.42506 22.5442 9.06453 23.2513 9.85857 23.7456C10.6526 24.2399 11.5694 24.5016 12.5047 24.5009H18.1297C18.9585 24.5009 19.7534 24.1716 20.3394 23.5856C20.9255 22.9995 21.2547 22.2047 21.2547 21.3759C21.2547 20.5471 20.9255 19.7522 20.3394 19.1661C19.7534 18.5801 18.9585 18.2509 18.1297 18.2509Z" stroke="#0086C9" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<defs>
<clipPath id="clip0_9538_418898">
<rect width="15" height="15" fill="white" transform="translate(6.87988 12.0009)"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

11
app/assets/ico/wizard/import.svg Normal file
View File

@ -0,0 +1,11 @@
<svg width="37" height="40" viewBox="0 0 37 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.8817 5.28003C22.6592 5.28003 28.9649 11.5865 28.9649 19.365C28.9649 27.1435 22.6592 33.45 14.8817 33.45C7.10065 33.4535 0.794922 27.1435 0.794922 19.365C0.794922 11.5865 7.10065 5.28003 14.8817 5.28003Z" fill="#E0F2FE"/>
<g clip-path="url(#clip0_9540_418847)">
<path d="M17.3803 22.0008L14.8803 19.5008M14.8803 19.5008L12.3803 22.0008M14.8803 19.5008V25.1258M20.124 23.4946C20.7336 23.1623 21.2152 22.6364 21.4927 22C21.7702 21.3636 21.8279 20.6529 21.6567 19.98C21.4854 19.3072 21.095 18.7105 20.547 18.2842C19.9989 17.858 19.3246 17.6263 18.6303 17.6258H17.8428C17.6536 16.8941 17.301 16.2148 16.8115 15.639C16.322 15.0631 15.7083 14.6058 15.0166 14.3012C14.3249 13.9967 13.5731 13.8529 12.8179 13.8808C12.0626 13.9086 11.3235 14.1073 10.656 14.4619C9.98859 14.8165 9.41023 15.3178 8.96442 15.9281C8.51862 16.5384 8.21697 17.2418 8.08215 17.9855C7.94733 18.7291 7.98285 19.4937 8.18604 20.2216C8.38924 20.9496 8.75481 21.622 9.25529 22.1883" stroke="#0086C9" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<defs>
<clipPath id="clip0_9540_418847">
<rect width="15" height="15" fill="white" transform="translate(7.37988 12.0009)"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

4
app/assets/ico/wizard/socket.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="36" height="40" viewBox="0 0 36 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.3817 5.28003C22.1592 5.28003 28.4649 11.5865 28.4649 19.365C28.4649 27.1435 22.1592 33.45 14.3817 33.45C6.60065 33.4535 0.294922 27.1435 0.294922 19.365C0.294922 11.5865 6.60065 5.28003 14.3817 5.28003Z" fill="#E0F2FE"/>
<path d="M14.3797 23.5025C16.98 23.5025 19.0879 21.3946 19.0879 18.7943L19.0879 16.3519L16.7331 16.3519M14.3797 23.5025C11.7795 23.5025 9.67156 21.3946 9.67156 18.7943L9.67156 16.3519L16.7331 16.3519M14.3797 23.5025C14.3797 24.9593 14.3797 26.5726 16.7331 26.5726L17.7794 26.5726M16.7331 16.3519L16.7331 13.4274M12.0216 16.3519L12.0216 13.4274" stroke="#0086C9" stroke-width="1.33" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 768 B

1
app/assets/ico/zap.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="auto" height="auto" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-zap"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg>
Side by Side

After

Width:  |  Height:  |  Size: 286 B

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

@ -10,6 +10,8 @@
margin-bottom: 5px;
font-weight: bold;
user-select: none;
color: var(--text-boxselector-header);
padding: 0px 10px;
}
.boxselector_header .fa,
@ -115,6 +117,16 @@
padding-left: 20px;
}
.boxselector_wrapper input[type='radio']:not(:disabled) ~ label,
.box-selector-item input[type='radio']:not(:disabled) ~ label {
background-color: var(--bg-boxselector-color);
}
.boxselector_img_container {
line-height: 90px;
margin-bottom: 0;
}
.box-selector-item p {
margin-bottom: 0;
}

4
app/react/components/NavTabs/NavTabs.tsx
View File

@ -19,7 +19,7 @@ export function NavTabs({ options, selectedId, onSelect = () => {} }: Props) {
const selected = options.find((option) => option.id === selectedId);
return (
<>
<div className="nav-container">
<ul className="nav nav-tabs">
{options.map((option) => (
<li
@ -49,7 +49,7 @@ export function NavTabs({ options, selectedId, onSelect = () => {} }: Props) {
{selected && selected.children && (
<div className="tab-content">{selected.children}</div>
)}
</>
</div>
);
function handleSelect(option: Option) {

30
app/react/components/Stepper/Stepper.module.css
View File

@ -18,18 +18,18 @@
position: absolute;
content: '';
width: 100%;
top: 20px;
top: 15px;
left: -100%;
z-index: 2;
border-bottom: 5px solid var(--bg-stepper-item-counter);
border-bottom: 3px solid var(--border-stepper-color);
}
.step-wrapper::after {
position: absolute;
content: '';
border-bottom: 5px solid var(--bg-stepper-item-counter);
border-bottom: 3px solid var(--border-stepper-color);
width: 100%;
top: 20px;
top: 15px;
left: 0;
z-index: 2;
}
@ -46,11 +46,13 @@
display: flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
width: 30px;
height: 30px;
border-radius: 50%;
background: var(--bg-stepper-item-counter);
/* background: var(--ui-white); */
background: var(--bg-stepper-color);
margin-bottom: 6px;
border: 1px solid var(--ui-gray-6);
}
.step-wrapper.active {
@ -59,27 +61,29 @@
}
.step-wrapper.active .step {
background: #337ab7;
background: var(--bg-stepper-active-color);
border: 2px solid var(--ui-blue-8);
}
.step-wrapper.active .step-counter {
color: #fff;
color: var(--text-stepper-active-color);
}
.step-wrapper.completed .step {
background-color: #48b400;
background: var(--bg-stepper-active-color);
border: 2px solid var(--ui-blue-8);
}
.step-wrapper.completed .step-counter {
color: #fff;
color: var(--text-stepper-active-color);
}
.step-wrapper.completed::after {
position: absolute;
content: '';
border-bottom: 5px solid #48b400;
border-bottom: 3px solid var(--ui-blue-8);
width: 100%;
top: 20px;
top: 15px;
left: 0;
z-index: 3;
}

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

@ -3,6 +3,12 @@ import automode from '@/assets/ico/theme/auto.svg?c';
import darkmode from '@/assets/ico/theme/darkmode.svg?c';
import lightmode from '@/assets/ico/theme/lightmode.svg?c';
import highcontrastmode from '@/assets/ico/theme/highcontrastmode.svg?c';
// wizard icons
import agent from '@/assets/ico/wizard/agent.svg?c';
import api from '@/assets/ico/wizard/api.svg?c';
import edgeagent from '@/assets/ico/wizard/edge-agent.svg?c';
import cloudimport from '@/assets/ico/wizard/import.svg?c';
import socket from '@/assets/ico/wizard/socket.svg?c';
// general icons
import arrowsupdown from '@/assets/ico/arrows-updown.svg?c';
import arrowright from '@/assets/ico/arrow-right-long.svg?c';
@ -25,6 +31,7 @@ import heartbeat from '@/assets/ico/heartbeat.svg?c';
import laptop from '@/assets/ico/laptop.svg?c';
import laptopcode from '@/assets/ico/laptop-code.svg?c';
import ldap from '@/assets/ico/ldap.svg?c';
import magic from '@/assets/ico/magic.svg?c';
import magicwand from '@/assets/ico/magic-wand.svg?c';
import memory from '@/assets/ico/memory.svg?c';
import objectgroup from '@/assets/ico/object-group.svg?c';
@ -71,6 +78,11 @@ import internal from '@/assets/ico/vendor/internal.svg?c';
const placeholder = Placeholder;
export const SvgIcons = {
agent,
api,
edgeagent,
cloudimport,
socket,
automode,
darkmode,
lightmode,
@ -96,6 +108,7 @@ export const SvgIcons = {
laptop,
laptopcode,
ldap,
magic,
magicwand,
memory,
objectgroup,

2
app/react/components/form-components/FileUpload/FileUploadField.tsx
View File

@ -46,7 +46,7 @@ export function FileUploadField({
</Button>
<span className="vertical-center">
{value ? value.name : <Icon icon="x" feather mode="danger" />}
{value ? value.name : <Icon icon="x-circle" feather mode="danger" />}
</span>
</div>
);

2
app/react/portainer/environments/wizard/EnvironmentTypeSelectView/EndpointTypeView.tsx
View File

@ -33,7 +33,7 @@ export function EnvironmentTypeSelectView() {
<div className="row">
<div className="col-sm-12">
<Widget>
<WidgetTitle icon="fa-magic" title="Environment Wizard" />
<WidgetTitle icon="svg-magic" title="Environment Wizard" />
<WidgetBody>
<EnvironmentSelector
value={types}

9
app/react/portainer/environments/wizard/EnvironmentsCreationView/EnvironmentsCreationView.tsx
View File

@ -12,6 +12,7 @@ import { Widget, WidgetBody, WidgetTitle } from '@@/Widget';
import { PageHeader } from '@@/PageHeader';
import { Button } from '@@/buttons';
import { FormSection } from '@@/form-components/FormSection';
import { Icon } from '@@/Icon';
import { environmentTypes } from '../EnvironmentTypeSelectView/environment-types';
import { EnvironmentSelectorValue } from '../EnvironmentTypeSelectView/EnvironmentSelector';
@ -65,7 +66,7 @@ export function EnvironmentCreationView() {
<div className={styles.wizardWrapper}>
<Widget>
<WidgetTitle icon="fa-magic" title="Environment Wizard" />
<WidgetTitle icon="svg-magic" title="Environment Wizard" />
<WidgetBody>
<Stepper steps={steps} currentStep={currentStepIndex + 1} />
@ -83,11 +84,11 @@ export function EnvironmentCreationView() {
)}
>
<Button disabled={isFirstStep} onClick={onPreviousClick}>
<i className="fas fa-arrow-left space-right" /> Previous
<Icon icon="arrow-left" feather /> Previous
</Button>
<Button onClick={onNextClick}>
{isLastStep ? 'Finish' : 'Next'}
<i className="fas fa-arrow-right space-left" />
{isLastStep ? 'Close' : 'Next'}
<Icon icon="arrow-right" feather />
</Button>
</div>
</FormSection>

10
app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardAzure/WizardAzure.tsx
View File

@ -12,6 +12,7 @@ import { LoadingButton } from '@@/buttons/LoadingButton';
import { Input } from '@@/form-components/Input';
import { FormControl } from '@@/form-components/FormControl';
import { BoxSelector } from '@@/BoxSelector';
import { Icon } from '@@/Icon';
import { NameField, nameValidation } from '../shared/NameField';
import { AnalyticsStateKey } from '../types';
@ -37,7 +38,7 @@ const initialValues: FormValues = {
},
};
const options = [buildOption('api', 'fa fa-bolt', 'API', '', 'api')];
const options = [buildOption('api', 'svg-api', 'API', '', 'api')];
interface Props {
onCreate(environment: Environment, analytics: AnalyticsStateKey): void;
@ -116,11 +117,16 @@ export function WizardAzure({ onCreate }: Props) {
<div className="row">
<div className="col-sm-12">
<LoadingButton
className="vertical-center"
loadingText="Connecting environment..."
isLoading={mutation.isLoading}
disabled={!dirty || !isValid}
>
<i className="fa fa-plug" aria-hidden="true" /> Connect
<Icon
icon="svg-plug"
className="icon icon-sm vertical-center"
/>{' '}
Connect
</LoadingButton>
</div>
</div>

9
app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardDocker/APITab/APIForm.tsx
View File

@ -12,6 +12,7 @@ import {
import { LoadingButton } from '@@/buttons/LoadingButton';
import { FormControl } from '@@/form-components/FormControl';
import { Input } from '@@/form-components/Input';
import { Icon } from '@@/Icon';
import { NameField } from '../../shared/NameField';
import { MoreSettingsSection } from '../../shared/MoreSettingsSection';
@ -76,12 +77,16 @@ export function APIForm({ onCreate }: Props) {
<div className="form-group">
<div className="col-sm-12">
<LoadingButton
className="wizard-connect-button"
className="wizard-connect-button vertical-center"
loadingText="Connecting environment..."
isLoading={mutation.isLoading}
disabled={!dirty || !isValid}
>
<i className="fa fa-plug" aria-hidden="true" /> Connect
<Icon
icon="svg-plug"
className="icon icon-sm vertical-center"
/>{' '}
Connect
</LoadingButton>
</div>
</div>

4
app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardDocker/AgentTab/DeploymentScripts.tsx
View File

@ -59,7 +59,9 @@ function DeployCode({ code }: DeployCodeProps) {
<span className="text-muted small">
CLI script for installing agent on your environment with Docker Swarm:
</span>
<Code>{code}</Code>
<div className="code-script">
<Code>{code}</Code>
</div>
<CopyButton copyText={code}>Copy command</CopyButton>
</>
);

9
app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardDocker/SocketTab/SocketForm.tsx
View File

@ -10,6 +10,7 @@ import { LoadingButton } from '@@/buttons/LoadingButton';
import { FormControl } from '@@/form-components/FormControl';
import { Input } from '@@/form-components/Input';
import { SwitchField } from '@@/form-components/SwitchField';
import { Icon } from '@@/Icon';
import { NameField } from '../../shared/NameField';
import { MoreSettingsSection } from '../../shared/MoreSettingsSection';
@ -54,12 +55,16 @@ export function SocketForm({ onCreate }: Props) {
<div className="form-group">
<div className="col-sm-12">
<LoadingButton
className="wizard-connect-button"
className="wizard-connect-button vertical-center"
loadingText="Connecting environment..."
isLoading={mutation.isLoading}
disabled={!dirty || !isValid}
>
<i className="fa fa-plug" aria-hidden="true" /> Connect
<Icon
icon="svg-plug"
className="icon icon-sm vertical-center"
/>{' '}
Connect
</LoadingButton>
</div>
</div>

8
app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardDocker/WizardDocker.tsx
View File

@ -22,28 +22,28 @@ const defaultOptions: BoxSelectorOption<
>[] = [
{
id: 'agent',
icon: 'fa fa-bolt',
icon: 'svg-agent',
label: 'Agent',
description: '',
value: 'agent',
},
{
id: 'api',
icon: 'fa fa-cloud',
icon: 'svg-api',
label: 'API',
description: '',
value: 'api',
},
{
id: 'socket',
icon: 'fab fa-docker',
icon: 'svg-socket',
label: 'Socket',
description: '',
value: 'socket',
},
{
id: 'edgeAgent',
icon: 'fa fa-cloud', // Todo cloud with docker
icon: 'svg-edgeagent',
label: 'Edge Agent',
description: '',
value: 'edgeAgent',

2
app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardEndpointsList/WizardEndpointsList.tsx
View File

@ -44,7 +44,7 @@ export function WizardEndpointsList({ environmentIds }: Props) {
return (
<Widget>
<WidgetTitle icon="fa-plug" title="New Environments" />
<WidgetTitle icon="svg-plug" title="New Environments" />
<WidgetBody>
{environments.map((environment) => (
<div className={styles.wizardListWrapper} key={environment.Id}>

37
app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardKubernetes/KubeConfigTeaserForm.tsx
View File

@ -5,6 +5,7 @@ import { FormControl } from '@@/form-components/FormControl';
import { FormSectionTitle } from '@@/form-components/FormSectionTitle';
import { Input } from '@@/form-components/Input';
import { Button } from '@@/buttons';
import { TextTip } from '@@/Tip/TextTip';
const initialValues = {
kubeConfig: '',
@ -24,26 +25,22 @@ export function KubeConfigTeaserForm() {
<div className="form-group">
<div className="col-sm-12">
<span className="text-primary">
<i
className="fa fa-exclamation-circle space-right"
aria-hidden="true"
/>
</span>
<span className="text-muted small">
Import the
<a
href="https://kubernetes.io/docs/concepts/configuration/organize-cluster-access-kubeconfig/"
target="_blank"
className="space-right space-left"
rel="noreferrer"
>
kubeconfig file
</a>
of an existing Kubernetes cluster located on-premise or on a
cloud platform. This will create a corresponding environment in
Portainer and install the agent on the cluster. Please ensure:
</span>
<TextTip color="blue">
<span className="text-muted">
<a
href="https://docs.portainer.io/start/install/agent/kubernetes/import"
target="_blank"
rel="noreferrer"
className="mx-1"
>
Import the kubeconfig file
</a>
of an existing Kubernetes cluster located on-premise or on a
cloud platform. This will create a corresponding environment
in Portainer and install the agent on the cluster. Please
ensure:
</span>
</TextTip>
</div>
<div className="col-sm-12 text-muted small">
<ul className="p-2 pl-4">

6
app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardKubernetes/WizardKubernetes.tsx
View File

@ -25,14 +25,14 @@ interface Props {
const defaultOptions: BoxSelectorOption<EnvironmentCreationTypes>[] = [
{
id: 'agent_endpoint',
icon: 'fa fa-bolt',
icon: 'svg-agent',
label: 'Agent',
value: EnvironmentCreationTypes.AgentEnvironment,
description: '',
},
{
id: 'edgeAgent',
icon: 'fa fa-cloud', // Todo cloud with docker
icon: 'svg-edgeagent',
label: 'Edge Agent',
description: '',
value: EnvironmentCreationTypes.EdgeAgentEnvironment,
@ -40,7 +40,7 @@ const defaultOptions: BoxSelectorOption<EnvironmentCreationTypes>[] = [
},
{
id: 'kubeconfig_endpoint',
icon: 'fas fa-cloud-upload-alt',
icon: 'svg-cloudimport',
label: 'Import',
value: EnvironmentCreationTypes.KubeConfigEnvironment,
description: 'Import an existing Kubernetes config',

9
app/react/portainer/environments/wizard/EnvironmentsCreationView/shared/AgentForm/AgentForm.tsx
View File

@ -7,6 +7,7 @@ import { Environment } from '@/portainer/environments/types';
import { CreateAgentEnvironmentValues } from '@/portainer/environments/environment.service/create';
import { LoadingButton } from '@@/buttons/LoadingButton';
import { Icon } from '@@/Icon';
import { NameField } from '../NameField';
import { MoreSettingsSection } from '../MoreSettingsSection';
@ -53,12 +54,16 @@ export function AgentForm({ onCreate, showGpus = false }: Props) {
<div className="form-group">
<div className="col-sm-12">
<LoadingButton
className="wizard-connect-button"
className="wizard-connect-button vertical-center"
loadingText="Connecting environment..."
isLoading={mutation.isLoading}
disabled={!dirty || !isValid}
>
<i className="fa fa-plug" aria-hidden="true" /> Connect
<Icon
icon="svg-plug"
className="icon icon-sm vertical-center"
/>{' '}
Connect
</LoadingButton>
</div>
</div>

7
app/react/portainer/environments/wizard/EnvironmentsCreationView/shared/EdgeAgentTab/EdgeAgentForm/EdgeAgentForm.tsx
View File

@ -8,6 +8,7 @@ import { useCreateEdgeDeviceParam } from '@/react/portainer/environments/wizard/
import { FormSection } from '@@/form-components/FormSection';
import { LoadingButton } from '@@/buttons/LoadingButton';
import { Icon } from '@@/Icon';
import { MoreSettingsSection } from '../../MoreSettingsSection';
import { Hardware } from '../../Hardware/Hardware';
@ -55,11 +56,15 @@ export function EdgeAgentForm({ onCreate, readonly, showGpus = false }: Props) {
<div className="row">
<div className="col-sm-12">
<LoadingButton
className="vertical-center"
isLoading={createMutation.isLoading}
loadingText="Creating environment..."
disabled={!isValid}
>
<i className="fa fa-plug space-right" />
<Icon
icon="svg-plug"
className="icon icon-sm vertical-center"
/>
Create
</LoadingButton>
</div>

4
app/react/portainer/environments/wizard/HomeView/HomeView.tsx
View File

@ -23,7 +23,7 @@ export function HomeView() {
<div className="row">
<div className="col-sm-12">
<Widget>
<WidgetTitle title="Environment Wizard" icon="fa-magic" />
<WidgetTitle title="Environment Wizard" icon="svg-magic" />
<WidgetBody>
<div className="row">
<div className="col-sm-12 form-section-title">
@ -32,7 +32,7 @@ export function HomeView() {
<div className="text-muted small">
{localEnvironmentAdded.status === 'success' && (
<p>
We have connected your local environment of
We have connected your local environment of{' '}
{getTypeLabel(localEnvironmentAdded.type)} to Portainer.
</p>
)}