mirror of https://github.com/portainer/portainer
feat(app): ui additional css class [EE-3594] (#7157)
* feat(app): ui additional css class [EE-3594]pull/7166/head
Chaim Lev-Ari
GitHub
parent
cd66e32912
commit
6fe26a52dd
|
|
@ -90,6 +90,7 @@ body,
|
|||
margin-bottom: 15px;
|
||||
color: var(--text-form-section-title-color);
|
||||
padding-left: 0;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.form-horizontal .control-label.text-left {
|
||||
|
|
|
|||
|
|
@ -1,14 +1,45 @@
|
|||
/* Main Color UI Override*/
|
||||
/* Label, Section Title */
|
||||
|
||||
.control-label {
|
||||
color: var(--ui-gray-7);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.form-section-title {
|
||||
color: var(--ui-gray-9);
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.vertical-center {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background: var(--bg-dashboard-item) !important;
|
||||
}
|
||||
|
||||
/* Button */
|
||||
.btn {
|
||||
border-radius: 5px;
|
||||
display: inline-flex;
|
||||
justify-content: space-around;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
pr-icon {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.btn.active {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
/* Button Primary */
|
||||
.btn-primary {
|
||||
background-color: var(--ui-blue-8);
|
||||
}
|
||||
|
|
@ -16,7 +47,19 @@
|
|||
.btn-primary:hover,
|
||||
.btn-primary:focus,
|
||||
.btn-primary:active .active {
|
||||
background-color: var(--ui-blue-2);
|
||||
background-color: var(--ui-blue-9);
|
||||
}
|
||||
|
||||
.btn-primary:active,
|
||||
.btn-primary.active,
|
||||
.open > .dropdown-toggle.btn-primary {
|
||||
background-color: var(--ui-blue-9);
|
||||
}
|
||||
|
||||
.nav-pills > li.active > a,
|
||||
.nav-pills > li.active > a:hover,
|
||||
.nav-pills > li.active > a:focus {
|
||||
background-color: var(--ui-blue-8);
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
|
|
@ -27,6 +70,69 @@
|
|||
background-color: var(--ui-success-7);
|
||||
}
|
||||
|
||||
.btn-dangerlight {
|
||||
background-color: var(--ui-error-2) !important;
|
||||
border: 1px solid var(--border-button-group);
|
||||
color: var(--ui-error-8);
|
||||
}
|
||||
|
||||
.btn-dangerlight:hover {
|
||||
color: var(--ui-error-9) !important;
|
||||
background-color: var(--ui-error-3) !important;
|
||||
}
|
||||
|
||||
.btn-light {
|
||||
background-color: var(--bg-button-group);
|
||||
border: 1px solid var(--border-button-group);
|
||||
color: var(--text-button-group);
|
||||
}
|
||||
|
||||
.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);
|
||||
border: 1px solid var(--ui-blue-8);
|
||||
color: var(--ui-blue-9);
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
/* Input Group Addon */
|
||||
.input-group-addon:first-child {
|
||||
border-top-left-radius: 5px;
|
||||
border-bottom-left-radius: 5px;
|
||||
}
|
||||
|
||||
.input-group .form-control:not(:first-child):not(:last-child) {
|
||||
border-top-right-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
}
|
||||
|
||||
.input-group-btn:last-child .btn {
|
||||
margin-left: 5px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
/* Toggle switch */
|
||||
.switch {
|
||||
position: relative;
|
||||
|
|
@ -41,6 +147,10 @@
|
|||
height: 0;
|
||||
}
|
||||
|
||||
.switch input[type='checkbox']:disabled + .slider {
|
||||
background-color: var(--ui-gray-3);
|
||||
}
|
||||
|
||||
/* Toggle */
|
||||
|
||||
.slider {
|
||||
|
|
@ -196,6 +306,7 @@ input:checked + .slider:before {
|
|||
|
||||
.toolBar > .settings {
|
||||
width: 60px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.datatable .toolBar .settings {
|
||||
|
|
@ -212,48 +323,6 @@ input:checked + .slider:before {
|
|||
border-top: 1px solid var(--border-table-color);
|
||||
}
|
||||
|
||||
/* Button Group */
|
||||
.input-group-addon:first-child {
|
||||
border-top-left-radius: 5px;
|
||||
border-bottom-left-radius: 5px;
|
||||
}
|
||||
|
||||
.input-group .form-control:not(:first-child):not(:last-child) {
|
||||
border-top-right-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
}
|
||||
|
||||
.input-group-btn:last-child .btn {
|
||||
margin-left: 5px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
|
||||
background-color: var(--bg-button-group);
|
||||
border: 1px solid var(--border-button-group);
|
||||
color: var(--text-button-group);
|
||||
}
|
||||
|
||||
.btn-group .btn-light {
|
||||
background-color: var(--bg-button-group);
|
||||
border: 1px solid var(--border-button-group);
|
||||
color: var(--text-button-group);
|
||||
}
|
||||
|
||||
.btn-group .btn-dangerlight {
|
||||
background-color: var(--ui-error-2);
|
||||
border: 1px solid var(--border-button-group);
|
||||
color: var(--ui-error-8);
|
||||
}
|
||||
|
||||
.btn.active {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* Toaster */
|
||||
|
||||
#toast-container > .toast-success {
|
||||
|
|
@ -375,33 +444,6 @@ input:checked + .slider:before {
|
|||
border: 0px;
|
||||
}
|
||||
|
||||
/* Boxselector */
|
||||
|
||||
.boxselector_wrapper input[type='radio']:checked + label,
|
||||
.box-selector-item input[type='radio']:checked + label {
|
||||
background: var(--ui-blue-3) !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;
|
||||
}
|
||||
|
||||
/* Databatle Setting Menu */
|
||||
|
||||
.tableMenu {
|
||||
|
|
@ -421,48 +463,112 @@ input:checked + .slider:before {
|
|||
border: 0px;
|
||||
}
|
||||
|
||||
/* Myaccount Dropdown Menu */
|
||||
|
||||
.myaccount-dropdown {
|
||||
color: var(--text-body-color);
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.myaccount-container {
|
||||
margin-top: -25px;
|
||||
}
|
||||
|
||||
.myaccount-icon {
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
.myaccount-link {
|
||||
display: inline;
|
||||
border: 0px;
|
||||
background: none;
|
||||
padding: 10px 0px;
|
||||
}
|
||||
|
||||
/* Status Indicator Label Style */
|
||||
.label {
|
||||
/* Status Indicator Inside Table Section Label Style */
|
||||
.table .label {
|
||||
border-radius: 8px !important;
|
||||
}
|
||||
|
||||
.label-danger {
|
||||
.table .label .label-danger {
|
||||
background-color: var(--ui-error-8);
|
||||
}
|
||||
|
||||
.label-success {
|
||||
.table .label .label-success {
|
||||
background-color: var(--ui-success-7);
|
||||
}
|
||||
|
||||
/* Feather Icon */
|
||||
/* Feather Icon Variants */
|
||||
|
||||
.feather {
|
||||
display: block;
|
||||
color: var(--text-body-color);
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
position: relative;
|
||||
top: 3px;
|
||||
margin-right: 5px;
|
||||
color: var(--text-body-color);
|
||||
}
|
||||
|
||||
.icon-xs {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
.icon-sm {
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
}
|
||||
|
||||
.icon-md {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
.icon-lg {
|
||||
height: 22px;
|
||||
width: 22px;
|
||||
}
|
||||
|
||||
.icon-xl {
|
||||
height: 26px;
|
||||
width: 26px;
|
||||
}
|
||||
|
||||
.icon-primary {
|
||||
color: var(--ui-blue-8);
|
||||
}
|
||||
|
||||
.icon-white {
|
||||
color: var(--white-color);
|
||||
}
|
||||
|
||||
.icon-dark {
|
||||
color: var(--ui-black);
|
||||
}
|
||||
|
||||
.icon-secondary {
|
||||
color: var(--ui-gray-8);
|
||||
}
|
||||
|
||||
.icon-warning {
|
||||
color: var(--ui-warning-8);
|
||||
}
|
||||
|
||||
.icon-danger {
|
||||
color: var(--ui-error-8);
|
||||
}
|
||||
|
||||
.icon-success {
|
||||
color: var(--ui-success-6);
|
||||
}
|
||||
|
||||
.icon-nested-gray {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
padding: 5px;
|
||||
text-align: center;
|
||||
border-radius: 50%;
|
||||
background-color: var(--ui-gray-4);
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.icon-nested-blue {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
padding: 5px;
|
||||
text-align: center;
|
||||
border-radius: 50%;
|
||||
background-color: var(--ui-blue-3);
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.icon-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
/* Required Label with asterisk */
|
||||
|
||||
.required:after {
|
||||
content: '*';
|
||||
color: var(--ui-error-9);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -98,6 +98,7 @@ div.input-mask {
|
|||
color: var(--text-widget-header-color);
|
||||
padding: 10px 15px;
|
||||
line-height: 30px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.widget .widget-header i {
|
||||
margin-right: 5px;
|
||||
|
|
|
|||
|
|
@ -165,8 +165,7 @@
|
|||
|
||||
--text-main-color: var(--grey-7);
|
||||
--text-body-color: var(--grey-6);
|
||||
--text-sidebar-title-color: var(--blue-3);
|
||||
--text-widget-header-color: var(--grey-7);
|
||||
--text-widget-header-color: var(--ui-gray-11);
|
||||
--text-form-control-color: var(--grey-25);
|
||||
--text-muted-color: var(--grey-26);
|
||||
--text-link-color: var(--blue-2);
|
||||
|
|
@ -346,7 +345,6 @@
|
|||
|
||||
--text-main-color: var(--white-color);
|
||||
--text-body-color: var(--white-color);
|
||||
--text-sidebar-title-color: var(--grey-8);
|
||||
--text-widget-header-color: var(--white-color);
|
||||
--text-form-control-color: var(--white-color);
|
||||
--text-muted-color: var(--grey-8);
|
||||
|
|
@ -526,7 +524,6 @@
|
|||
|
||||
--text-main-color: var(--white-color);
|
||||
--text-body-color: var(--white-color);
|
||||
--text-sidebar-title-color: var(--grey-8);
|
||||
--text-widget-header-color: var(--white-color);
|
||||
--text-link-color: var(--blue-9);
|
||||
--text-link-hover-color: var(--blue-9);
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@ a:focus {
|
|||
}
|
||||
|
||||
.text-danger {
|
||||
color: var(--text-danger-color);
|
||||
color: var(--ui-error-9);
|
||||
}
|
||||
|
||||
.table .table {
|
||||
|
|
@ -373,6 +373,10 @@ input:-webkit-autofill {
|
|||
color: var(--white-color);
|
||||
}
|
||||
|
||||
.btn-success:hover {
|
||||
color: var(--white-color);
|
||||
}
|
||||
|
||||
/* Overide Vendor CSS */
|
||||
|
||||
.btn.disabled,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="1.21426" y="0.5" width="15" height="15" rx="7.5" fill="#0086C9"/>
|
||||
<path d="M12.0474 5.5L7.4641 10.0833L5.38077 8" stroke="white" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<rect x="1.21426" y="0.5" width="15" height="15" rx="7.5" stroke="#0086C9"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 390 B |
|
|
@ -0,0 +1,6 @@
|
|||
<svg width="79" height="44" viewBox="0 0 79 44" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M45.3224 11.3193L54.6351 27.3044L63.9515 43.2856H45.3224H26.6934L36.006 27.3044L45.3224 11.3193Z" fill="#CB2026"/>
|
||||
<path d="M64.1569 38.7032H79.0003L69.6839 22.7181L60.3713 6.73692L52.9496 19.4733L59.1631 30.1388L64.1569 38.7032Z" fill="#CB2026"/>
|
||||
<path d="M31.9306 29.5575L27.9455 22.7181L18.6291 6.73692L9.31645 22.7181L0 38.7032H18.6291H26.5993L29.2151 34.2158L31.9306 29.5575Z" fill="#CB2026"/>
|
||||
<path d="M33.2951 27.2245L33.763 26.4228L40.4214 15.0011L31.78 0.174988L24.6575 12.3984L30.5258 22.4674L33.2951 27.2245Z" fill="#CB2026"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 650 B |
|
|
@ -0,0 +1,6 @@
|
|||
<svg width="53" height="53" viewBox="0 0 53 53" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M24.6796 0.74147H0V25.1903H24.6796V0.74147Z" fill="#F35325"/>
|
||||
<path d="M52.0165 0.741547H27.3369V25.1904H52.0165V0.741547Z" fill="#81BC06"/>
|
||||
<path d="M24.6796 27.8229H0V52.2718H24.6796V27.8229Z" fill="#05A6F0"/>
|
||||
<path d="M52.0165 27.8229H27.3369V52.2718H52.0165V27.8229Z" fill="#FFBA08"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 401 B |
|
|
@ -0,0 +1,4 @@
|
|||
<svg width="51" height="57" viewBox="0 0 51 57" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M49.4176 17.75L43.882 0.819107H7.28089L1.74531 17.75C1.74531 17.75 -4.79215 34.8935 10.4787 45.4348C24.3922 55.0404 25.5814 56.2077 25.5814 56.2077C25.5814 56.2077 26.7707 55.038 40.6842 45.4348C55.955 34.8935 49.4176 17.75 49.4176 17.75Z" fill="#F4552A"/>
|
||||
<path d="M25.5851 0.984695L31.4835 17.6745L49.4453 18.0361L35.1283 28.7097L40.3323 45.6217L25.5851 35.5293L10.838 45.6217L16.042 28.7097L1.72498 18.0361L19.6868 17.6745L25.5851 0.984695Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 572 B |
|
|
@ -11,18 +11,20 @@
|
|||
>
|
||||
<div class="col-lg-12 col-md-12 col-xs-12">
|
||||
<rd-widget>
|
||||
<rd-widget-header icon="fa-cogs" title-text="Actions"></rd-widget-header>
|
||||
<rd-widget-header icon="settings" feather-icon="true" title-text="Actions"></rd-widget-header>
|
||||
<rd-widget-body classes="padding">
|
||||
<div class="btn-group" role="group" aria-label="...">
|
||||
<button authorization="DockerContainerStart" class="btn btn-light btn-sm" ng-click="start()" ng-disabled="container.State.Running || container.IsPortainer"
|
||||
><i class="fa fa-play space-right" aria-hidden="true"></i>Start</button
|
||||
>
|
||||
<button authorization="DockerContainerStop" class="btn btn-light btn-sm" ng-click="stop()" ng-disabled="!container.State.Running || container.IsPortainer"
|
||||
><i class="fa fa-stop space-right" aria-hidden="true"></i>Stop</button
|
||||
>
|
||||
<button authorization="DockerContainerKill" class="btn btn-light btn-sm" ng-click="kill()" ng-disabled="!container.State.Running || container.IsPortainer"
|
||||
><i class="fa fa-bomb space-right" aria-hidden="true"></i>Kill</button
|
||||
>
|
||||
<button authorization="DockerContainerStart" class="btn btn-light btn-sm" ng-click="start()" ng-disabled="container.State.Running || container.IsPortainer">
|
||||
<pr-icon icon="'play'" feather="true" class-name="'feather'"></pr-icon>
|
||||
Start
|
||||
</button>
|
||||
<button authorization="DockerContainerStop" class="btn btn-light btn-sm" ng-click="stop()" ng-disabled="!container.State.Running || container.IsPortainer">
|
||||
<pr-icon icon="'square'" feather="true"></pr-icon>
|
||||
Stop
|
||||
</button>
|
||||
<button authorization="DockerContainerKill" class="btn btn-light btn-sm" ng-click="kill()" ng-disabled="!container.State.Running || container.IsPortainer">
|
||||
<i class="fa fa-bomb space-right" aria-hidden="true"></i>Kill
|
||||
</button>
|
||||
<button authorization="DockerContainerRestart" class="btn btn-light btn-sm" ng-click="restart()" ng-disabled="!container.State.Running || container.IsPortainer"
|
||||
><i class="fa fa-sync space-right" aria-hidden="true"></i>Restart</button
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,4 @@
|
|||
<rd-header>
|
||||
<rd-header-title title-text="Dashboard"></rd-header-title>
|
||||
<rd-header-content>Environment summary</rd-header-content>
|
||||
</rd-header>
|
||||
<page-header title="'Dashboard'" breadcrumbs="['Environment summary']"> </page-header>
|
||||
|
||||
<div class="row" ng-if="applicationState.endpoint.mode.agentProxy && applicationState.endpoint.mode.provider === 'DOCKER_SWARM_MODE'">
|
||||
<div class="col-sm-12">
|
||||
|
|
|
|||
|
|
@ -5,6 +5,10 @@ declare module '*.png' {
|
|||
export default '' as string;
|
||||
}
|
||||
|
||||
declare module '*.svg' {
|
||||
export default '' as string;
|
||||
}
|
||||
|
||||
type SvgrComponent = React.StatelessComponent<React.SVGAttributes<SVGElement>>;
|
||||
|
||||
declare module '*.svg?c' {
|
||||
|
|
|
|||
|
|
@ -12,6 +12,8 @@
|
|||
.datatable .toolBar .toolBarTitle {
|
||||
float: left;
|
||||
margin: 5px 0 0 10px;
|
||||
color: var(--text-widget-header-color);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.datatable .toolBar .settings {
|
||||
|
|
@ -37,7 +39,7 @@
|
|||
.datatable .searchInput {
|
||||
background: none;
|
||||
border: none;
|
||||
width: 95%;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.datatable .searchIcon {
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ export const rdWidgetTitle = {
|
|||
template: `
|
||||
<div class="widget-header">
|
||||
<div class="row">
|
||||
<span ng-class="$ctrl.classes" class="pull-left">
|
||||
<span ng-class="$ctrl.classes" class="pull-left vertical-center">
|
||||
<pr-icon icon="$ctrl.icon" feather="$ctrl.featherIcon"></pr-icon>
|
||||
<span ng-transclude="title">{{ $ctrl.titleText }}</span>
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
|
||||
.refresh-environments-button {
|
||||
margin-left: 0 !important;
|
||||
padding: 8px 15px;
|
||||
}
|
||||
|
||||
.filter-container {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import { ReactNode, useEffect, useState } from 'react';
|
||||
import clsx from 'clsx';
|
||||
import { RefreshCcw } from 'react-feather';
|
||||
|
||||
import { usePaginationLimitState } from '@/portainer/hooks/usePaginationLimitState';
|
||||
import {
|
||||
|
|
@ -287,10 +288,13 @@ export function EnvironmentList({ onClickItem, onRefresh }: Props) {
|
|||
<Button
|
||||
onClick={onRefresh}
|
||||
data-cy="home-refreshEndpointsButton"
|
||||
className={clsx(styles.refreshEnvironmentsButton)}
|
||||
className={clsx(
|
||||
'vertical-center',
|
||||
styles.refreshEnvironmentsButton
|
||||
)}
|
||||
>
|
||||
<i
|
||||
className="fa fa-sync space-right"
|
||||
<RefreshCcw
|
||||
className="feather icon-sm icon-white"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
Refresh
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
.kubeconfig-button {
|
||||
padding: 8px 15px;
|
||||
}
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
import { useState } from 'react';
|
||||
import { Download } from 'react-feather';
|
||||
|
||||
import { Environment } from '@/portainer/environments/types';
|
||||
import { EnvironmentsQueryParams } from '@/portainer/environments/environment.service/index';
|
||||
|
|
@ -7,6 +8,7 @@ import { trackEvent } from '@/angulartics.matomo/analytics-services';
|
|||
|
||||
import { Button } from '@@/buttons';
|
||||
|
||||
import styles from './KubeconfigButton.module.css';
|
||||
import { KubeconfigPrompt } from './KubeconfigPrompt';
|
||||
import '@reach/dialog/styles.css';
|
||||
|
||||
|
|
@ -27,8 +29,9 @@ export function KubeconfigButton({ environments, envQueryParams }: Props) {
|
|||
|
||||
return (
|
||||
<>
|
||||
<Button onClick={handleClick}>
|
||||
<i className="fas fa-download space-right" /> kubeconfig
|
||||
<Button className={styles.kubeconfigButton} onClick={handleClick}>
|
||||
<Download className="feather-icon-white" aria-hidden="true" />{' '}
|
||||
Kubeconfig
|
||||
</Button>
|
||||
{prompt()}
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
padding: 10px;
|
||||
background-color: var(--bg-tooltip-color);
|
||||
min-width: max-content;
|
||||
color: var(--black);
|
||||
color: var(--text-tooltip-color);
|
||||
box-shadow: var(--shadow-box-color);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,37 @@
|
|||
import { FeatureId } from '@/portainer/feature-flags/enums';
|
||||
import Microsoft from '@/assets/ico/microsoft.svg?c';
|
||||
import Ldap from '@/assets/ico/ldap.svg?c';
|
||||
import Oauth from '@/assets/ico/oauth.svg?c';
|
||||
|
||||
export const options = [
|
||||
{
|
||||
id: 'auth_internal',
|
||||
icon: 'user',
|
||||
featherIcon: true,
|
||||
label: 'Internal',
|
||||
description: 'Internal authentication mechanism',
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
id: 'auth_ldap',
|
||||
icon: Ldap,
|
||||
label: 'LDAP',
|
||||
description: 'LDAP authentication',
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
id: 'auth_ad',
|
||||
icon: Microsoft,
|
||||
label: 'Microsoft Active Directory',
|
||||
description: 'AD authentication',
|
||||
value: 4,
|
||||
feature: FeatureId.HIDE_INTERNAL_AUTH,
|
||||
},
|
||||
{
|
||||
id: 'auth_oauth',
|
||||
icon: Oauth,
|
||||
label: 'OAuth',
|
||||
description: 'OAuth authentication',
|
||||
value: 3,
|
||||
},
|
||||
];
|
||||
|
|
@ -22,7 +22,10 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<span class="col-sm-12 text-muted small"> Changing from default is only recommended if you have additional layers of authentication in front of Portainer. </span>
|
||||
<span class="col-sm-12 text-muted small"
|
||||
><pr-icon icon="'alert-triangle'" feather="true" class-name="'icon-sm icon-yellow'"></pr-icon> Changing from default is only recommended if you have additional layers
|
||||
of authentication in front of Portainer.
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-12 form-section-title"> Authentication method </div>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
import angular from 'angular';
|
||||
import _ from 'lodash-es';
|
||||
|
||||
import { FeatureId } from '@/portainer/feature-flags/enums';
|
||||
import { buildLdapSettingsModel, buildAdSettingsModel } from '@/portainer/settings/authentication/ldap/ldap-settings.model';
|
||||
import { options } from './options';
|
||||
|
||||
angular.module('portainer.app').controller('SettingsAuthenticationController', SettingsAuthenticationController);
|
||||
|
||||
|
|
@ -46,12 +46,7 @@ function SettingsAuthenticationController($q, $scope, $state, Notifications, Set
|
|||
},
|
||||
};
|
||||
|
||||
$scope.authOptions = [
|
||||
{ id: 'auth_internal', icon: 'fa fa-users', label: 'Internal', description: 'Internal authentication mechanism', value: 1 },
|
||||
{ id: 'auth_ldap', icon: 'fa fa-users', label: 'LDAP', description: 'LDAP authentication', value: 2 },
|
||||
{ id: 'auth_ad', icon: 'fab fa-microsoft', label: 'Microsoft Active Directory', description: 'AD authentication', value: 4, feature: FeatureId.HIDE_INTERNAL_AUTH },
|
||||
{ id: 'auth_oauth', icon: 'fa fa-users', label: 'OAuth', description: 'OAuth authentication', value: 3 },
|
||||
];
|
||||
$scope.authOptions = options;
|
||||
|
||||
$scope.onChangeAuthMethod = function onChangeAuthMethod(value) {
|
||||
$scope.authMethod = value;
|
||||
|
|
|
|||
|
|
@ -1,11 +1,4 @@
|
|||
<rd-header id="view-top">
|
||||
<rd-header-title title-text="Application templates list">
|
||||
<a data-toggle="tooltip" title="Refresh" ui-sref="docker.templates" ui-sref-opts="{reload: true}">
|
||||
<i class="fa fa-sync" aria-hidden="true"></i>
|
||||
</a>
|
||||
</rd-header-title>
|
||||
<rd-header-content>Templates</rd-header-content>
|
||||
</rd-header>
|
||||
<page-header title="'Application templates list'" breadcrumbs="['Templates']"> </page-header>
|
||||
|
||||
<div class="row">
|
||||
<!-- stack-form -->
|
||||
|
|
|
|||
|
|
@ -2,3 +2,34 @@
|
|||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 700px) {
|
||||
.boxselector_wrapper {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
.root {
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,6 +24,8 @@
|
|||
.boxselector_wrapper input[type='radio']:not(:disabled) ~ label {
|
||||
cursor: pointer;
|
||||
background-color: var(--bg-boxselector-wrapper-disabled-color);
|
||||
text-align: left;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.boxselector_wrapper input[type='radio']:not(:disabled):hover ~ label:hover {
|
||||
|
|
@ -38,7 +40,7 @@
|
|||
border: 1px solid var(--border-boxselector-color);
|
||||
border-radius: 2px;
|
||||
padding: 10px 10px 0 10px;
|
||||
text-align: center;
|
||||
text-align: left;
|
||||
box-shadow: var(--shadow-boxselector-color);
|
||||
position: relative;
|
||||
}
|
||||
|
|
@ -52,31 +54,30 @@
|
|||
pointer-events: none;
|
||||
}
|
||||
|
||||
.boxselector_wrapper input[type='radio']:checked + label {
|
||||
background: var(--selected-item-color);
|
||||
.boxselector_wrapper input[type='radio']:checked + label,
|
||||
.box-selector-item input[type='radio']:checked + label {
|
||||
color: white;
|
||||
padding-top: 20px;
|
||||
background-image: url(../../../assets/ico/checked.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 15px top 15px;
|
||||
border-color: var(--selected-item-color);
|
||||
}
|
||||
|
||||
.boxselector_wrapper input[type='radio']:checked + label::after {
|
||||
.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);
|
||||
font-family: 'Font Awesome 5 Free';
|
||||
border: 2px solid var(--selected-item-color);
|
||||
content: '\f00c';
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
position: absolute;
|
||||
top: -15px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
line-height: 26px;
|
||||
text-align: center;
|
||||
border-radius: 50%;
|
||||
background: white;
|
||||
box-shadow: 0 2px 5px -2px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
: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);
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 700px) {
|
||||
|
|
@ -110,3 +111,23 @@
|
|||
.box-selector-item.limited.business :checked + label {
|
||||
color: initial;
|
||||
}
|
||||
|
||||
.boxselector_img_container {
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.boxselector_img {
|
||||
height: 48px;
|
||||
width: 48px;
|
||||
left: 5px;
|
||||
}
|
||||
|
||||
.boxselector_icon,
|
||||
.boxselector_icon img {
|
||||
height: 48px;
|
||||
width: 48px;
|
||||
color: var(--ui-blue-4);
|
||||
font-size: 48px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -49,19 +49,19 @@ export function BoxSelectorItem<T extends number | string>({
|
|||
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_header">
|
||||
<div className="boxselector_img_container">
|
||||
{!!option.icon && (
|
||||
<Icon
|
||||
icon={option.icon}
|
||||
feather={option.featherIcon}
|
||||
className="space-right"
|
||||
className="boxselector_icon space-right"
|
||||
/>
|
||||
)}
|
||||
{option.label}
|
||||
</div>
|
||||
<div className="boxselector_header">{option.label}</div>
|
||||
|
||||
<p className="box-selector-item-description">{option.description}</p>
|
||||
</label>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
import type { FeatureId } from '@/portainer/feature-flags/enums';
|
||||
|
||||
export interface BoxSelectorOption<T> {
|
||||
import { IconProps } from '@@/Icon';
|
||||
|
||||
export interface BoxSelectorOption<T> extends IconProps {
|
||||
id: string;
|
||||
icon: string;
|
||||
featherIcon?: boolean;
|
||||
label: string;
|
||||
description: string;
|
||||
value: T;
|
||||
|
|
|
|||
|
|
@ -3,6 +3,8 @@
|
|||
font-size: 17px;
|
||||
background: none;
|
||||
margin-right: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.menu-list {
|
||||
|
|
@ -23,6 +25,13 @@
|
|||
font-size: 14px;
|
||||
color: var(--text-dropdown-menu-color);
|
||||
text-decoration: none !important;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.arrow-down {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.menu-link:hover {
|
||||
|
|
|
|||
|
|
@ -28,9 +28,9 @@ export function HeaderTitle({ title, children }: PropsWithChildren<Props>) {
|
|||
<span className="header_title_content">{children}</span>
|
||||
<Menu>
|
||||
<MenuButton className={clsx('pull-right', styles.menuButton)}>
|
||||
<User className="feather" />
|
||||
<User className="icon-nested-gray" />
|
||||
{user && <span>{user.Username}</span>}
|
||||
<ChevronDown className="feather" />
|
||||
<ChevronDown className={styles.arrowDown} />
|
||||
</MenuButton>
|
||||
|
||||
<MenuList className={styles.menuList}>
|
||||
|
|
|
|||
|
|
@ -33,6 +33,9 @@ export function PageHeader({
|
|||
|
||||
return (
|
||||
<HeaderContainer>
|
||||
<HeaderContent>
|
||||
<Breadcrumbs breadcrumbs={breadcrumbs} />
|
||||
</HeaderContent>
|
||||
<HeaderTitle title={title}>
|
||||
{reload && (
|
||||
<Button
|
||||
|
|
@ -46,9 +49,6 @@ export function PageHeader({
|
|||
</Button>
|
||||
)}
|
||||
</HeaderTitle>
|
||||
<HeaderContent>
|
||||
<Breadcrumbs breadcrumbs={breadcrumbs} />
|
||||
</HeaderContent>
|
||||
</HeaderContainer>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ type Type = 'submit' | 'button' | 'reset';
|
|||
type Color =
|
||||
| 'default'
|
||||
| 'primary'
|
||||
| 'secondary'
|
||||
| 'success'
|
||||
| 'warning'
|
||||
| 'danger'
|
||||
|
|
|
|||
|
|
@ -30,16 +30,17 @@
|
|||
.root :global .selector__menu {
|
||||
background-color: var(--bg-multiselect-color);
|
||||
border: 1px solid var(--border-multiselect);
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.root :global .selector__option {
|
||||
background-color: var(--bg-multiselect-color);
|
||||
border: 1px solid var(--border-multiselect);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.root :global .selector__option:active,
|
||||
.root :global .selector__option--is-focused {
|
||||
background-color: var(--blue-8);
|
||||
background-color: var(--ui-gray-3);
|
||||
}
|
||||
|
||||
:global :root[theme='dark'] :local .root :global .selector__option:active,
|
||||
|
|
|
|||
Loading…
Reference in New Issue