feat(ui): portainer base component css change [EE-3381] (#7115)

2025-08-08 23:35:31 +02:00 · 2022-06-23 09:32:18 +03:00 · 2022-06-23 09:32:18 +03:00 · f78a6568a6
commit f78a6568a6
parent 825269c119
70 changed files with 999 additions and 1596 deletions
--- a/app/portainer/components/PageHeader/HeaderContent.html
+++ b/app/portainer/components/PageHeader/HeaderContent.html
@ -1,11 +1,3 @@
 <div class="breadcrumb-links">
  <div class="pull-left" ng-transclude></div>
-  <div class="pull-right" ng-if="$ctrl.username && $ctrl.display">
-    <a ui-sref="portainer.account" style="margin-right: 5px">
-      <u> <i class="fa fa-wrench" aria-hidden="true"></i> my account </u>
-    </a>
-    <a ui-sref="portainer.logout({performApiLogout: true})" class="text-danger" style="margin-right: 25px" data-cy="template-logoutButton">
-      <u> <i class="fa fa-sign-out-alt" aria-hidden="true"></i> log out</u>
-    </a>
-  </div>
 </div>
--- a/app/portainer/components/PageHeader/HeaderTitle.html
+++ b/app/portainer/components/PageHeader/HeaderTitle.html
@ -1,8 +1,20 @@
 <div class="page white-space-normal">
  {{ $ctrl.titleText }}
  <span class="header_title_content" ng-transclude></span>
-  <span class="pull-right user-box" ng-if="$ctrl.username && $ctrl.display">
-    <i class="fa fa-user-circle" aria-hidden="true"></i>
-    {{ $ctrl.username }}
-  </span>
 </div>
+
+<span class="pull-right myaccount-container" uib-dropdown on-toggle="toggled(open)">
+  <a href class="myaccount-dropdown" uib-dropdown-toggle>
+    <span class="pull-right user-box" ng-if="$ctrl.username">
+      <i class="fa fa-user-circle" aria-hidden="true"></i> {{ $ctrl.username }} <i class="fa fa-angle-down myaccount-icon" aria-hidden="true"></i>
+    </span>
+  </a>
+  <ul class="dropdown-menu" uib-dropdown-menu>
+    <li>
+      <a ui-sref="portainer.account">My account</a>
+    </li>
+    <li>
+      <a ui-sref="portainer.logout({performApiLogout: true})" data-cy="template-logoutButton">Log out</a>
+    </li>
+  </ul>
+</span>
--- a/app/portainer/components/Tip/Tooltip/Tooltip.css
+++ b/app/portainer/components/Tip/Tooltip/Tooltip.css
@ -1,10 +1,9 @@
 .tooltip.portainer-tooltip .tooltip-inner {
-  font-family: Montserrat;
  background-color: var(--bg-tooltip-color);
  padding: 0.833em 1em;
  color: var(--text-tooltip-color);
-  border: 1px solid var(--border-tooltip-color);
-  border-radius: 0.14285714rem;
+  border: 1px solid var(--border-tooltip-color) !important;
+  border-radius: 10px;
  box-shadow: 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
 }

--- a/app/portainer/components/Tip/Tooltip/TooltipAngular.ts
+++ b/app/portainer/components/Tip/Tooltip/TooltipAngular.ts
@ -13,9 +13,9 @@ export const TooltipAngular: IComponentOptions = {
    tooltip-class="portainer-tooltip"
    uib-tooltip="{{$ctrl.message}}"
  >
-    <i
-      class="fa fa-question-circle blue-icon tooltip-icon"
-      aria-hidden="true"
-    ></i>
+  <i
+  class="fa fa-question-circle blue-icon tooltip-icon"
+  aria-hidden="true"
+  ></i>
  </span>`,
 };
--- a/app/portainer/components/custom-templates-list/customTemplatesList.html
+++ b/app/portainer/components/custom-templates-list/customTemplatesList.html
@ -2,7 +2,7 @@
  <rd-widget>
    <rd-widget-body classes="no-padding">
      <div class="toolBar">
-        <div class="toolBarTitle"> <i class="fa" ng-class="$ctrl.titleIcon" aria-hidden="true" style="margin-right: 2px"></i> {{ $ctrl.titleText }} </div>
+        <div class="toolBarTitle"> <pr-icon icon="$ctrl.titleIcon" class-name="space-right"></pr-icon> {{ $ctrl.titleText }} </div>
      </div>
      <div class="actionBar">
        <button type="button" class="btn btn-sm btn-primary" ui-state="$ctrl.createPath"> <i class="fa fa-plus space-right" aria-hidden="true"></i>Add Custom Template </button>
--- a/app/portainer/components/datatables/datatable-columns-visibility/datatable-columns-visibility.html
+++ b/app/portainer/components/datatables/datatable-columns-visibility/datatable-columns-visibility.html
@ -1,5 +1,5 @@
 <span class="setting" ng-class="{ 'setting-active': $ctrl.state.isOpen }" uib-dropdown dropdown-append-to-body auto-close="disabled" is-open="$ctrl.state.isOpen">
-  <span uib-dropdown-toggle><i class="fa fa-columns space-right" aria-hidden="true"></i>Columns</span>
+  <span uib-dropdown-toggle aria-label="Columns"><i class="fa fa-columns space-right" aria-hidden="true"></i></span>
  <div class="dropdown-menu dropdown-menu-right" uib-dropdown-menu>
    <div class="tableMenu">
      <div class="menuHeader"> Show / Hide Columns </div>
--- a/app/portainer/components/datatables/datatable.css
+++ b/app/portainer/components/datatables/datatable.css
@ -1,12 +1,11 @@
 .datatable .toolBar {
  background-color: var(--bg-card-color);
-  color: var(--text-main-color);
  overflow: auto;
  padding: 10px;
+  font-size: 16px;
 }

 .datatable .actionBar {
-  color: #767676;
  padding: 10px;
 }

@ -26,12 +25,11 @@
 }

 .datatable .toolBar .setting-active {
-  color: #337ab7;
+  color: var(--ui-blue-4);
 }

 .datatable .searchBar {
-  border-top: 1px solid var(--border-color);
-  border-bottom: 1px solid var(--border-color);
+  border: 1px solid var(--border-color);
  padding: 8px;
  background: var(--bg-main-color);
 }
@ -116,7 +114,7 @@

 .tableMenu {
  color: #767676;
-  padding: 10px;
+  padding: 15px;
  background-color: var(--bg-dropdown-menu-color) !important;
 }

@ -125,11 +123,8 @@
 }

 .tableMenu .menuContent {
-  border-bottom: 1px solid #777;
  font-size: 12px;
  margin: 10px 0;
-  max-height: 140px;
-  overflow-y: auto;
 }

 .tableMenu .menuContent .md-radio:first-child {
--- a/app/portainer/components/datatables/stacks-datatable/stacksDatatable.html
+++ b/app/portainer/components/datatables/stacks-datatable/stacksDatatable.html
@ -3,10 +3,45 @@
    <rd-widget-body classes="no-padding">
      <div class="toolBar">
        <div class="toolBarTitle"><i class="fa" ng-class="$ctrl.titleIcon" aria-hidden="true" style="margin-right: 2px"></i> {{ $ctrl.titleText }} </div>
+        <div class="searchBar">
+          <i class="fa fa-search searchIcon" aria-hidden="true"></i>
+          <input
+            type="text"
+            class="searchInput"
+            ng-model="$ctrl.state.textFilter"
+            ng-change="$ctrl.onTextFilterChange()"
+            placeholder="Search..."
+            auto-focus
+            ng-model-options="{ debounce: 300 }"
+            data-cy="stack-searchInput"
+          />
+        </div>
+        <div class="actionBar" ng-if="!$ctrl.offlineMode" authorization="PortainerStackCreate, PortainerStackDelete">
+          <button
+            type="button"
+            class="btn btn-sm btn-danger"
+            authorization="PortainerStackDelete"
+            ng-disabled="$ctrl.state.selectedItemCount === 0"
+            ng-click="$ctrl.removeAction($ctrl.state.selectedItems)"
+            data-cy="stack-removeStackButton"
+          >
+            <i class="fa fa-trash-alt space-right" aria-hidden="true"></i>Remove
+          </button>
+          <button
+            ng-disabled="!$ctrl.createEnabled"
+            type="button"
+            class="btn btn-sm btn-primary"
+            ui-sref="docker.stacks.newstack"
+            authorization="PortainerStackCreate"
+            data-cy="stack-addStackButton"
+          >
+            <i class="fa fa-plus space-right" aria-hidden="true"></i>Add stack
+          </button>
+        </div>
        <div class="settings">
          <datatable-columns-visibility columns="$ctrl.columnVisibility.columns" on-change="($ctrl.onColumnVisibilityChange)"></datatable-columns-visibility>
          <span class="setting" ng-class="{ 'setting-active': $ctrl.settings.open }" uib-dropdown dropdown-append-to-body auto-close="disabled" is-open="$ctrl.settings.open">
-            <span uib-dropdown-toggle><i class="fa fa-cog" aria-hidden="true"></i> Settings</span>
+            <span uib-dropdown-toggle aria-label="Settings"><i class="fa fa-cog" aria-hidden="true"></i></span>
            <div class="dropdown-menu dropdown-menu-right" uib-dropdown-menu>
              <div class="tableMenu">
                <div class="menuHeader"> Table settings </div>
@ -43,41 +78,7 @@
          </span>
        </div>
      </div>
-      <div class="actionBar" ng-if="!$ctrl.offlineMode" authorization="PortainerStackCreate, PortainerStackDelete">
-        <button
-          type="button"
-          class="btn btn-sm btn-danger"
-          authorization="PortainerStackDelete"
-          ng-disabled="$ctrl.state.selectedItemCount === 0"
-          ng-click="$ctrl.removeAction($ctrl.state.selectedItems)"
-          data-cy="stack-removeStackButton"
-        >
-          <i class="fa fa-trash-alt space-right" aria-hidden="true"></i>Remove
-        </button>
-        <button
-          ng-disabled="!$ctrl.createEnabled"
-          type="button"
-          class="btn btn-sm btn-primary"
-          ui-sref="docker.stacks.newstack"
-          authorization="PortainerStackCreate"
-          data-cy="stack-addStackButton"
-        >
-          <i class="fa fa-plus space-right" aria-hidden="true"></i>Add stack
-        </button>
-      </div>
-      <div class="searchBar">
-        <i class="fa fa-search searchIcon" aria-hidden="true"></i>
-        <input
-          type="text"
-          class="searchInput"
-          ng-model="$ctrl.state.textFilter"
-          ng-change="$ctrl.onTextFilterChange()"
-          placeholder="Search..."
-          auto-focus
-          ng-model-options="{ debounce: 300 }"
-          data-cy="stack-searchInput"
-        />
-      </div>
+
      <div class="table-responsive">
        <table class="table table-hover nowrap-cells" data-cy="stack-stackTable">
          <thead>
--- a/app/portainer/components/datatables/titlebar/datatable-titlebar.html
+++ b/app/portainer/components/datatables/titlebar/datatable-titlebar.html
@ -1,7 +1,7 @@
 <div class="toolBar">
  <div class="toolBarTitle">
-    <i class="fa" ng-class="$ctrl.icon" aria-hidden="true" style="margin-right: 2px"></i>
-    <span style="margin-right: 10px">{{ $ctrl.title }}</span>
+    <pr-icon icon="$ctrl.icon" feather="$ctrl.featherIcon" class-name="space-right"></pr-icon>
+    {{ $ctrl.title }}
    <be-feature-indicator feature="$ctrl.feature"></be-feature-indicator>
  </div>
 </div>
--- a/app/portainer/components/datatables/titlebar/index.js
+++ b/app/portainer/components/datatables/titlebar/index.js
@ -3,6 +3,7 @@ export const datatableTitlebar = {
    icon: '@',
    title: '@',
    feature: '@',
+    featherIcon: '<',
  },
  templateUrl: './datatable-titlebar.html',
 };
--- a/app/portainer/components/widget/rd-widget-title.ts
+++ b/app/portainer/components/widget/rd-widget-title.ts
@ -3,6 +3,7 @@ export const rdWidgetTitle = {
  bindings: {
    titleText: '@',
    icon: '@',
+    featherIcon: '<',
    classes: '@?',
  },
  transclude: {
@ -12,7 +13,7 @@ export const rdWidgetTitle = {
    <div class="widget-header">
      <div class="row">
        <span ng-class="$ctrl.classes" class="pull-left">
-          <i class="fa" ng-class="$ctrl.icon"></i>
+          <pr-icon icon="$ctrl.icon" feather="$ctrl.featherIcon"></pr-icon>
          <span ng-transclude="title">{{ $ctrl.titleText }}</span>
        </span>
        <span ng-class="$ctrl.classes" class="pull-right" ng-transclude></span>
--- a/app/portainer/home/EnvironmentList/EnvironmentItem/EnvironmentStatsItem.tsx
+++ b/app/portainer/home/EnvironmentList/EnvironmentItem/EnvironmentStatsItem.tsx
@ -1,15 +1,21 @@
-import clsx from 'clsx';
 import { PropsWithChildren } from 'react';

-interface Props {
+import { Icon, IconProps } from '@/react/components/Icon';
+
+interface Props extends IconProps {
  value: string | number;
  icon: string;
 }

-export function Stat({ value, icon, children }: PropsWithChildren<Props>) {
+export function Stat({
+  value,
+  icon,
+  children,
+  featherIcon,
+}: PropsWithChildren<Props>) {
  return (
    <span>
-      <i className={clsx('fa  space-right', icon)} aria-hidden="true" />
+      <Icon className="space-right" icon={icon} feather={featherIcon} />
      <span>{value}</span>
      {children && <span className="space-left">{children}</span>}
    </span>
--- a/app/portainer/home/EnvironmentList/EnvironmentList.module.css
+++ b/app/portainer/home/EnvironmentList/EnvironmentList.module.css
@ -1,3 +1,8 @@
+.actionBar {
+  margin-left: 15px !important;
+  margin-right: 15px !important;
+}
+
 .actionBar .description {
  margin-bottom: 10px;
 }
@ -9,6 +14,12 @@
 .filter-container {
  display: flex;
  justify-content: flex-start;
+  padding: 0px 5px;
+}
+
+.filter-container input[type='text'] {
+  background: none !important;
+  border: 0px !important;
 }

 .filter-left {
@ -61,3 +72,8 @@
  width: 100%;
  padding-left: 10px;
 }
+
+.filterSearchbar input[type='text'] {
+  background: none !important;
+  border: 0px !important;
+}
--- a/app/portainer/home/EnvironmentList/EnvironmentList.tsx
+++ b/app/portainer/home/EnvironmentList/EnvironmentList.tsx
@ -279,7 +279,6 @@ export function EnvironmentList({ onClickItem, onRefresh }: Props) {

            <TableActions className={styles.actionBar}>
              <div className={styles.description}>
-                <i className="fa fa-exclamation-circle blue-icon space-right" />
                Click on an environment to manage
              </div>
              <div className={styles.actionButton}>
--- a/app/portainer/react/components/index.ts
+++ b/app/portainer/react/components/index.ts
@ -1,7 +1,10 @@
 import angular from 'angular';

 import { r2a } from '@/react-tools/react2angular';
+import { Icon } from '@/react/components/Icon';
+import { ReactQueryDevtoolsWrapper } from '@/react/components/ReactQueryDevtoolsWrapper';

+import { PageHeader } from '@@/PageHeader';
 import { TagSelector } from '@@/TagSelector';
 import { Loading } from '@@/Widget/Loading';
 import { PasswordCheckHint } from '@@/PasswordCheckHint';
@ -24,4 +27,10 @@ export const componentsModule = angular
    r2a(PasswordCheckHint, ['forceChangePassword', 'passwordValid'])
  )
  .component('rdLoading', r2a(Loading, []))
-  .component('viewLoading', r2a(ViewLoading, ['message'])).name;
+  .component('viewLoading', r2a(ViewLoading, ['message']))
+  .component(
+    'pageHeader',
+    r2a(PageHeader, ['title', 'breadcrumbs', 'loading', 'onReload', 'reload'])
+  )
+  .component('prIcon', r2a(Icon, ['className', 'feather', 'icon']))
+  .component('reactQueryDevTools', r2a(ReactQueryDevtoolsWrapper, [])).name;
--- a/app/portainer/settings/edge-compute/AutomaticEdgeEnvCreation/AutoEnvCreationSettingsForm.tsx
+++ b/app/portainer/settings/edge-compute/AutomaticEdgeEnvCreation/AutoEnvCreationSettingsForm.tsx
@ -108,7 +108,7 @@ export function AutoEnvCreationSettingsForm({ settings }: Props) {
                isLoading={mutation.isLoading}
                disabled={!isValid || !dirty}
              >
-                Save Settings
+                Save settings
              </LoadingButton>
            </div>
          </div>
--- a/app/portainer/settings/edge-compute/EdgeComputeSettings/EdgeComputeSettings.tsx
+++ b/app/portainer/settings/edge-compute/EdgeComputeSettings/EdgeComputeSettings.tsx
@ -115,7 +115,7 @@ export function EdgeComputeSettings({ settings, onSubmit }: Props) {
                      isLoading={isSubmitting}
                      loadingText="Saving settings..."
                    >
-                      Save Settings
+                      Save settings
                    </LoadingButton>
                  </div>
                </div>
--- a/app/portainer/settings/edge-compute/SettingsFDO/SettingsFDO.tsx
+++ b/app/portainer/settings/edge-compute/SettingsFDO/SettingsFDO.tsx
@ -149,7 +149,7 @@ export function SettingsFDO({ settings, onSubmit }: Props) {
                      isLoading={isSubmitting}
                      loadingText="Saving settings..."
                    >
-                      Save Settings
+                      Save settings
                    </LoadingButton>
                  </div>
                </div>
--- a/app/portainer/settings/edge-compute/SettingsOpenAMT/SettingsOpenAMT.tsx
+++ b/app/portainer/settings/edge-compute/SettingsOpenAMT/SettingsOpenAMT.tsx
@ -252,7 +252,7 @@ export function SettingsOpenAMT({ settings, onSubmit }: Props) {
                      isLoading={isSubmitting}
                      loadingText="Saving settings..."
                    >
-                      Save Settings
+                      Save settings
                    </LoadingButton>
                  </div>
                </div>
--- a/app/portainer/settings/general/ssl-certificate/ssl-certificate.html
+++ b/app/portainer/settings/general/ssl-certificate/ssl-certificate.html
@ -76,7 +76,7 @@
                analytics-event="portainer-settings-edit"
                analytics-properties="{ metadata: { forceHTTPS: $ctrl.formValues.forceHTTPS } }"
              >
-                <span ng-hide="$ctrl.state.actionInProgress || $ctrl.state.reloadingPage">Apply Changes</span>
+                <span ng-hide="$ctrl.state.actionInProgress || $ctrl.state.reloadingPage">Apply changes</span>
                <span ng-show="$ctrl.state.actionInProgress">Saving in progress...</span>
                <span ng-show="$ctrl.state.reloadingPage">Reloading Page...</span>
              </button>
--- a/app/portainer/views/settings/authentication/settingsAuthentication.html
+++ b/app/portainer/views/settings/authentication/settingsAuthentication.html
@ -1,7 +1,4 @@
-<rd-header>
-  <rd-header-title title-text="Authentication settings"></rd-header-title>
-  <rd-header-content> <a ui-sref="portainer.settings">Settings</a> &gt; Authentication </rd-header-content>
-</rd-header>
+<page-header title="'Authentication settings'" breadcrumbs="[{label:'Settings', link:'portainer.settings'}, 'Authentication']"> </page-header>

 <div class="row">
  <div class="col-sm-12">
@ -13,7 +10,7 @@
          <div class="form-group">
            <label for="user_timeout" class="col-sm-2 control-label text-left">
              Session lifetime
-              <portainer-tooltip message="Time before users are forced to relogin."></portainer-tooltip>
+              <portainer-tooltip message="Time before users are forced to relogin." position="bottom"></portainer-tooltip>
            </label>
            <div class="col-sm-10">
              <select
--- a/app/portainer/views/sidebar/sidebar.html
+++ b/app/portainer/views/sidebar/sidebar.html
@ -3,7 +3,7 @@
  <div class="sidebar-header">
    <a ui-sref="portainer.home" data-cy="portainerSidebar-homeImage">
      <img ng-if="logo" ng-src="{{ logo }}" class="img-responsive logo" />
-      <img ng-if="!logo" src="~@/assets/images/logo.png" class="img-responsive logo" alt="Portainer" />
+      <img ng-if="!logo" src="~@/assets/images/logo_alt.svg" class="img-responsive logo" alt="Portainer" />
    </a>
    <a ng-click="toggleSidebar()"><span class="menu-icon glyphicon glyphicon-transfer"></span></a>
  </div>