From a48bcebdbd647c8a85aee8dc0fe80aa56c153b5d Mon Sep 17 00:00:00 2001 From: waysonwei Date: Tue, 24 Aug 2021 19:40:31 +1200 Subject: [PATCH] requirement from code review backport from EE --- api/http/handler/users/user_update.go | 6 +- api/portainer.go | 2 +- app/assets/css/app.css | 62 +++++++++++++++---- .../containerNetworksDatatable.html | 2 +- .../networks-datatable/networksDatatable.html | 11 +--- .../serviceTasksDatatable.html | 2 +- .../applicationsPortsDatatable.html | 11 +--- .../applicationsStacksDatatable.html | 5 +- .../placements-datatable/template.html | 15 +++-- .../ingresses-datatable/template.html | 5 +- app/kubernetes/views/summary/summary.html | 2 +- .../volumes-storages-datatable/template.html | 5 +- .../customTemplatesList.html | 2 +- .../template-list/templateList.html | 2 +- .../theme/theme-settings.controller.js | 40 ++++++++++++ .../components/theme/theme-settings.html | 47 ++++++++++++++ .../components/theme/theme-settings.js | 7 +++ app/portainer/models/user.js | 2 +- app/portainer/services/api/userService.js | 6 +- app/portainer/services/authentication.js | 19 ++---- app/portainer/services/theme-manager.js | 12 ---- app/portainer/services/themeManager.js | 23 +++++++ app/portainer/views/account/account.html | 49 +-------------- .../views/logout/logoutController.js | 2 +- app/portainer/views/main/mainController.js | 7 +-- 25 files changed, 202 insertions(+), 144 deletions(-) create mode 100644 app/portainer/components/theme/theme-settings.controller.js create mode 100644 app/portainer/components/theme/theme-settings.html create mode 100644 app/portainer/components/theme/theme-settings.js delete mode 100644 app/portainer/services/theme-manager.js create mode 100644 app/portainer/services/themeManager.js diff --git a/api/http/handler/users/user_update.go b/api/http/handler/users/user_update.go index 5e39c0282..02e337f3b 100644 --- a/api/http/handler/users/user_update.go +++ b/api/http/handler/users/user_update.go @@ -17,7 +17,7 @@ import ( type userUpdatePayload struct { Username string `validate:"required" example:"bob"` Password string `validate:"required" example:"cg9Wgky3"` - Usertheme string `example:"dark"` + UserTheme string `example:"dark"` // User role (1 for administrator account and 2 for regular account) Role int `validate:"required" enums:"1,2" example:"2"` } @@ -105,8 +105,8 @@ func (handler *Handler) userUpdate(w http.ResponseWriter, r *http.Request) *http user.Role = portainer.UserRole(payload.Role) } - if payload.Usertheme != "" { - user.Usertheme = payload.Usertheme + if payload.UserTheme != "" { + user.UserTheme = payload.UserTheme } err = handler.DataStore.User().UpdateUser(user.ID, user) diff --git a/api/portainer.go b/api/portainer.go index 4f69f4c79..19b4c0943 100644 --- a/api/portainer.go +++ b/api/portainer.go @@ -991,7 +991,7 @@ type ( Username string `json:"Username" example:"bob"` Password string `json:"Password,omitempty" example:"passwd"` // User Theme - Usertheme string `json:"Usertheme" example:"dark"` + UserTheme string `example:"dark"` // User role (1 for administrator account and 2 for regular account) Role UserRole `json:"Role" example:"1"` diff --git a/app/assets/css/app.css b/app/assets/css/app.css index 73e9dc5b3..9148da2b1 100644 --- a/app/assets/css/app.css +++ b/app/assets/css/app.css @@ -84,6 +84,7 @@ --text-multiselect-button-color: #fff; --text-multiselect-item-color: #fff; --text-sidebar-list-color: #fff; + --text-boxselector-wrapper-color: #fff; --border-color: #383838; --border-widget-color: #212121; @@ -117,6 +118,8 @@ --button-close-color: #fff; --button-opacity: 0.6; --button-opacity-hover: 0.3; + --shadow-box-color: none; + --shadow-boxselector-color: none; } :root[theme='highcontrast'] { @@ -135,6 +138,18 @@ --bg-boxselector-wrapper-disabled-color: #194973; --bg-dropdown-menu-color: #000; --bg-codemirror-selected-color: #383838; + --bg-row-header-color: #000; + --bg-sidebar-wrapper-color: #000; + --bg-motd-body-color: #000; + --bg-blocklist-hover-color: #000; + --bg-blocklist-item-selected-color: #000; + --bg-input-group-addon-color: #000; + --bg-table-color: #000; + --bg-codemirror-gutters-color: #000; + --bg-codemirror-color: #000; + --bg-codemirror-selected-color: #383838; + --bg-log-viewer-color: #000; + --bg-log-line-selected-color: #383838; --text-main-color: #fff; --text-body-color: #fff; @@ -142,11 +157,20 @@ --text-widget-header-color: #ffffff; --text-link-color: #3ea6ff; --text-link-hover-color: #3ea6ff; - --text-code-color: #fff; + --text-danger-color: #ff00e0; + --text-code-color: #000; --text-form-control-color: #fff; --text-blocklist-hover-color: #3ea5ff; - --text-danger-color: #ff00e0; - --text-dropdown-menu-color: #fff; + --text-boxselector-wrapper-color: #fff; + --text-dashboard-item-color: #41a6ff; + --text-form-section-title-color: #fff; + --text-muted-color: #fff; + --text-tooltip-color: #fff; + --text-blocklist-item-selected-color: #3ea6ff; + --text-input-group-addon-color: #fff; + --text-sidebar-list-color: #fff; + --text-codemirror-color: #fff; + --text-log-viewer-color: #fff; --border-color: rgba(255, 255, 255, 0.8); --border-widget-color: #fff; @@ -157,13 +181,18 @@ --border-datatable-top-color: rgba(255, 255, 255, 0.8); --border-sidebar-high-contrast: 1px solid #3ea6ff; --border-code-high-contrast: 1px solid #fff; + --border-boxselector-wrapper: 3px solid #337ab7; + --border-boxselector-wrapper-hover: 3px solid #90ccff; --border-panel-color: #fff; + --border-input-group-addon-color: rgb(54, 54, 54); --hover-sidebar-color: #3ea6ff; --hover-sidebar-color: #000; + --shadow-box-color: none; + --shadow-boxselector-color: none; } -:root[theme='light'] { +:root { --bg-card-color: #f6f6f6; --bg-main-color: #fff; --bg-body-color: #f3f3f3; @@ -395,7 +424,6 @@ fieldset[disabled] .form-control { code { color: var(--text-code-color); background-color: var(--bg-code-color); - border: var(--border-code-high-contrast); } .nav-tabs > li.active > a, @@ -528,6 +556,12 @@ json-tree .branch-preview { .pagination > li > span:focus { background-color: var(--bg-pagination-hover-color); border-color: var(--border-pagination-hover-color); +} + +.pagination > li > a:hover, +.pagination > li > span:hover, +.pagination > li > a:focus, +.pagination > li > span:focus { color: var(--text-pagination-span-hover-color); } @@ -545,14 +579,6 @@ json-tree .branch-preview { background-color: var(--bg-motd-body-color) !important; } -.multiSelect .checkboxLayer { - background-color: var(--bg-multiselect-checkbox-color); -} - -.multiSelect .multiSelectItem { - color: var(--text-multiselect-item-color); -} - .panel-body { background-color: var(--bg-panel-body-color) !important; } @@ -564,6 +590,16 @@ json-tree .branch-preview { .theme-information .col-sm-12 { padding-left: 0px; padding-right: 0px; + margin-top: 15px; +} + +.theme-panel { + margin-top: 15px; +} + +.summary { + color: var(--text-summary-color); + font-weight: 700; } /* Overide Vendor CSS */ diff --git a/app/docker/components/datatables/container-networks-datatable/containerNetworksDatatable.html b/app/docker/components/datatables/container-networks-datatable/containerNetworksDatatable.html index aafdcb42f..f1a81acaf 100644 --- a/app/docker/components/datatables/container-networks-datatable/containerNetworksDatatable.html +++ b/app/docker/components/datatables/container-networks-datatable/containerNetworksDatatable.html @@ -76,7 +76,7 @@ diff --git a/app/docker/components/datatables/networks-datatable/networksDatatable.html b/app/docker/components/datatables/networks-datatable/networksDatatable.html index 59ae18ad1..22aeb605f 100644 --- a/app/docker/components/datatables/networks-datatable/networksDatatable.html +++ b/app/docker/components/datatables/networks-datatable/networksDatatable.html @@ -171,16 +171,7 @@ allow-checkbox="true" > - - + Loading... diff --git a/app/docker/components/datatables/service-tasks-datatable/serviceTasksDatatable.html b/app/docker/components/datatables/service-tasks-datatable/serviceTasksDatatable.html index 21b8498f9..ed5998662 100644 --- a/app/docker/components/datatables/service-tasks-datatable/serviceTasksDatatable.html +++ b/app/docker/components/datatables/service-tasks-datatable/serviceTasksDatatable.html @@ -1,4 +1,4 @@ -
+
diff --git a/app/kubernetes/components/datatables/applications-ports-datatable/applicationsPortsDatatable.html b/app/kubernetes/components/datatables/applications-ports-datatable/applicationsPortsDatatable.html index d9095e660..ec593a0a0 100644 --- a/app/kubernetes/components/datatables/applications-ports-datatable/applicationsPortsDatatable.html +++ b/app/kubernetes/components/datatables/applications-ports-datatable/applicationsPortsDatatable.html @@ -105,8 +105,7 @@ @@ -177,11 +176,7 @@ - + @@ -198,7 +193,7 @@ ng-show="item.Expanded" ng-repeat-end ng-repeat="rule in port.IngressRules" - ng-style="{ background: item.Highlighted ? 'var(--bg-item-highlighted-color)' : 'var(--bg-item-highlighted-null-color)' }" + ng-class="{ 'datatable-highlighted': item.Highlighted, 'datatable-unhighlighted': !item.Highlighted }" > diff --git a/app/kubernetes/components/datatables/applications-stacks-datatable/applicationsStacksDatatable.html b/app/kubernetes/components/datatables/applications-stacks-datatable/applicationsStacksDatatable.html index 80a3d924e..9c1af495c 100644 --- a/app/kubernetes/components/datatables/applications-stacks-datatable/applicationsStacksDatatable.html +++ b/app/kubernetes/components/datatables/applications-stacks-datatable/applicationsStacksDatatable.html @@ -109,8 +109,7 @@ @@ -145,7 +144,7 @@ dir-paginate-end ng-show="item.Expanded" ng-repeat="app in item.Applications" - ng-style="{ background: item.Highlighted ? 'var(--bg-item-highlighted-color)' : 'var(--bg-item-highlighted-null-color)' }" + ng-class="{ 'datatable-highlighted': item.Highlighted, 'datatable-unhighlighted': !item.Highlighted }" > @@ -96,7 +95,7 @@ ng-if="$ctrl.isAdmin" ng-show="item.Expanded" ng-repeat="taint in item.UnmetTaints" - ng-style="{ background: item.Highlighted ? 'var(--bg-item-highlighted-color)' : 'var(--bg-item-highlighted-null-color)' }" + ng-class="{ 'datatable-highlighted': item.Highlighted, 'datatable-unhighlighted': !item.Highlighted }" > @@ -88,7 +87,7 @@ dir-paginate-end ng-show="item.Expanded" ng-repeat="path in item.Paths" - ng-style="{ background: item.Highlighted ? 'var(--bg-item-highlighted-color)' : 'var(--bg-item-highlighted-null-color)' }" + ng-class="{ 'datatable-highlighted': item.Highlighted, 'datatable-unhighlighted': !item.Highlighted }" > @@ -99,7 +98,7 @@ dir-paginate-end ng-show="item.Expanded" ng-repeat="vol in item.Volumes" - ng-style="{ background: item.Highlighted ? 'var(--bg-item-highlighted-color)' : 'var(--bg-item-highlighted-null-color)' }" + ng-class="{ 'datatable-highlighted': item.Highlighted, 'datatable-unhighlighted': !item.Highlighted }" >
- - -
diff --git a/app/kubernetes/views/applications/edit/components/placements-datatable/template.html b/app/kubernetes/views/applications/edit/components/placements-datatable/template.html index 33581dd21..9622f2225 100644 --- a/app/kubernetes/views/applications/edit/components/placements-datatable/template.html +++ b/app/kubernetes/views/applications/edit/components/placements-datatable/template.html @@ -75,8 +75,7 @@
This application is missing a toleration for the taint {{ taint.Key }}{{ taint.Value ? '=' + taint.Value : '' }}:{{ taint.Effect }} @@ -107,7 +106,7 @@
Placement constraint not respected for that node. @@ -119,7 +118,7 @@ ng-if="$ctrl.isAdmin" ng-show="item.Expanded" ng-repeat="label in item.UnmatchedNodeSelectorLabels" - ng-style="{ background: item.Highlighted ? 'var(--bg-item-highlighted-color)' : 'var(--bg-item-highlighted-null-color)' }" + ng-class="{ 'datatable-highlighted': item.Highlighted, 'datatable-unhighlighted': !item.Highlighted }" > This application can only be scheduled on a node where the label {{ label.key }} is set to {{ label.value }} @@ -130,7 +129,7 @@
Placement label not respected for that node. @@ -141,7 +140,7 @@
This application can only be scheduled on nodes respecting one of the following labels combination: @@ -152,7 +151,7 @@ ng-if="$ctrl.isAdmin" ng-show="item.Expanded" ng-repeat="aff in item.UnmatchedNodeAffinities" - ng-style="{ background: item.Highlighted ? 'var(--bg-item-highlighted-color)' : 'var(--bg-item-highlighted-null-color)' }" + ng-class="{ 'datatable-highlighted': item.Highlighted, 'datatable-unhighlighted': !item.Highlighted }" > diff --git a/app/kubernetes/views/resource-pools/edit/components/ingresses-datatable/template.html b/app/kubernetes/views/resource-pools/edit/components/ingresses-datatable/template.html index d86e268e1..27a359130 100644 --- a/app/kubernetes/views/resource-pools/edit/components/ingresses-datatable/template.html +++ b/app/kubernetes/views/resource-pools/edit/components/ingresses-datatable/template.html @@ -73,8 +73,7 @@
diff --git a/app/kubernetes/views/summary/summary.html b/app/kubernetes/views/summary/summary.html index 8ab3e4f16..cb62834f9 100644 --- a/app/kubernetes/views/summary/summary.html +++ b/app/kubernetes/views/summary/summary.html @@ -22,7 +22,7 @@
  • {{ summary.action }} {{ $ctrl.getArticle(summary.kind, summary.action) }} - {{ summary.kind }} named {{ summary.name }} + {{ summary.kind }} named {{ summary.name }} of type {{ summary.type }} diff --git a/app/kubernetes/views/volumes/components/volumes-storages-datatable/template.html b/app/kubernetes/views/volumes/components/volumes-storages-datatable/template.html index 3b6e24a28..b912d3f41 100644 --- a/app/kubernetes/views/volumes/components/volumes-storages-datatable/template.html +++ b/app/kubernetes/views/volumes/components/volumes-storages-datatable/template.html @@ -82,8 +82,7 @@
    • diff --git a/app/portainer/components/custom-templates-list/customTemplatesList.html b/app/portainer/components/custom-templates-list/customTemplatesList.html index c71a8b0d5..bc2cda229 100644 --- a/app/portainer/components/custom-templates-list/customTemplatesList.html +++ b/app/portainer/components/custom-templates-list/customTemplatesList.html @@ -10,7 +10,7 @@ -
    +
    -
    +
    { + this.state.userId = await this.Authentication.getUserDetails().ID; + const data = await this.UserService.user(this.state.userId); + this.state.userTheme = data.UserTheme || 'light'; + }); + } +} diff --git a/app/portainer/components/theme/theme-settings.html b/app/portainer/components/theme/theme-settings.html new file mode 100644 index 000000000..416612f85 --- /dev/null +++ b/app/portainer/components/theme/theme-settings.html @@ -0,0 +1,47 @@ + + +

    + + Dark and High-contrast theme are experimental. Some UI components might not display properly. +

    +     +     + + + +
    + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +     +     diff --git a/app/portainer/components/theme/theme-settings.js b/app/portainer/components/theme/theme-settings.js new file mode 100644 index 000000000..d8d57beb5 --- /dev/null +++ b/app/portainer/components/theme/theme-settings.js @@ -0,0 +1,7 @@ +import angular from 'angular'; +import controller from './theme-settings.controller'; + +angular.module('portainer.app').component('themeSettings', { + templateUrl: './theme-settings.html', + controller, +}); diff --git a/app/portainer/models/user.js b/app/portainer/models/user.js index b7c1a7f0c..4090e9100 100644 --- a/app/portainer/models/user.js +++ b/app/portainer/models/user.js @@ -2,7 +2,7 @@ export function UserViewModel(data) { this.Id = data.Id; this.Username = data.Username; this.Role = data.Role; - this.Usertheme = data.Usertheme; + this.UserTheme = data.UserTheme; if (data.Role === 1) { this.RoleName = 'administrator'; } else { diff --git a/app/portainer/services/api/userService.js b/app/portainer/services/api/userService.js index eca9548db..bb6e8622c 100644 --- a/app/portainer/services/api/userService.js +++ b/app/portainer/services/api/userService.js @@ -92,11 +92,7 @@ angular.module('portainer.app').factory('UserService', [ }; service.updateUserTheme = function (id, userTheme) { - var payload = { - Usertheme: userTheme, - }; - - return Users.updateTheme({ id: id }, payload).$promise; + return Users.updateTheme({ id }, { userTheme }).$promise; }; service.userMemberships = function (id) { diff --git a/app/portainer/services/authentication.js b/app/portainer/services/authentication.js index 6c5de3059..3a5073301 100644 --- a/app/portainer/services/authentication.js +++ b/app/portainer/services/authentication.js @@ -84,20 +84,11 @@ angular.module('portainer.app').factory('Authentication', [ return user; } - async function setDefaultTheme() { + async function setUserTheme() { const data = await UserService.user(user.ID); - - ThemeManager.setTheme('light'); - if (!data.Usertheme || data.Usertheme === 'light') { - ThemeManager.setTheme('light'); - StateManager.updateTheme('light'); - } else if (data.Usertheme === 'dark') { - ThemeManager.setTheme('dark'); - StateManager.updateTheme('dark'); - } else if (data.Usertheme === 'highcontrast') { - ThemeManager.setTheme('highcontrast'); - StateManager.updateTheme('highcontrast'); - } + // Initialize user theme base on Usertheme from database + const userTheme = data.UserTheme; + ThemeManager.setTheme(userTheme); } async function setUser(jwt) { @@ -106,7 +97,7 @@ angular.module('portainer.app').factory('Authentication', [ user.username = tokenPayload.username; user.ID = tokenPayload.id; user.role = tokenPayload.role; - await setDefaultTheme(); + await setUserTheme(); } function isAdmin() { diff --git a/app/portainer/services/theme-manager.js b/app/portainer/services/theme-manager.js deleted file mode 100644 index 671e03d72..000000000 --- a/app/portainer/services/theme-manager.js +++ /dev/null @@ -1,12 +0,0 @@ -angular.module('portainer.app').factory('ThemeManager', [ - /* @ngInject */ - function ThemeManagerFactory() { - var service = {}; - - service.setTheme = function (theme) { - document.documentElement.setAttribute('theme', theme); - }; - - return service; - }, -]); diff --git a/app/portainer/services/themeManager.js b/app/portainer/services/themeManager.js new file mode 100644 index 000000000..9cf18137b --- /dev/null +++ b/app/portainer/services/themeManager.js @@ -0,0 +1,23 @@ +angular.module('portainer.app').service('ThemeManager', ThemeManager); + +/* @ngInject */ + +export function ThemeManager(StateManager) { + return { + setTheme, + defaultTheme, + }; + + function setTheme(theme) { + if (!theme) { + document.documentElement.removeAttribute('theme'); + } else { + document.documentElement.setAttribute('theme', theme); + } + StateManager.updateTheme(theme); + } + + function defaultTheme() { + document.documentElement.removeAttribute('theme'); + } +} diff --git a/app/portainer/views/account/account.html b/app/portainer/views/account/account.html index 456db33a2..f387f9f21 100644 --- a/app/portainer/views/account/account.html +++ b/app/portainer/views/account/account.html @@ -78,53 +78,6 @@ -
    - - -

    - - Dark and High-contrast theme are experimental. Some UI components might not display properly. -

    -     -     - - - -
    - -
    -
    - - -
    -
    - - -
    -
    - - -
    -
    - - -
    -     -     +
    diff --git a/app/portainer/views/logout/logoutController.js b/app/portainer/views/logout/logoutController.js index 3f7cff1f2..43c9d8878 100644 --- a/app/portainer/views/logout/logoutController.js +++ b/app/portainer/views/logout/logoutController.js @@ -29,7 +29,7 @@ class LogoutController { const performApiLogout = this.$transition$.params().performApiLogout; const settings = await this.SettingsService.publicSettings(); - this.ThemeManager.setTheme('light'); + this.ThemeManager.defaultTheme(); try { await this.Authentication.logout(performApiLogout); diff --git a/app/portainer/views/main/mainController.js b/app/portainer/views/main/mainController.js index f004e8232..a942b62f3 100644 --- a/app/portainer/views/main/mainController.js +++ b/app/portainer/views/main/mainController.js @@ -4,7 +4,7 @@ angular.module('portainer.app').controller('MainController', [ 'StateManager', 'EndpointProvider', 'ThemeManager', - function ($scope, LocalStorage, StateManager, EndpointProvider, ThemeManager) { + function ($scope, LocalStorage, StateManager, EndpointProvider) { /** * Sidebar Toggle & Cookie Control */ @@ -13,11 +13,6 @@ angular.module('portainer.app').controller('MainController', [ return window.innerWidth; }; - // Portainer Default Theme - $scope.theme = 'light'; - - ThemeManager.setTheme($scope.theme); - $scope.applicationState = StateManager.getState(); $scope.endpointState = EndpointProvider.endpoint();