dashboard-shell-shell 3.0.5-test.6 → 3.0.5-test.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (218) hide show
  1. package/assets/brand/harvester/favicon.png +0 -0
  2. package/assets/brand/suse/favicon.png +0 -0
  3. package/assets/icons/demo.css +539 -0
  4. package/assets/icons/demo.css:Zone.Identifier +0 -0
  5. package/assets/icons/demo_index.html +1131 -0
  6. package/assets/icons/demo_index.html:Zone.Identifier +0 -0
  7. package/assets/icons/iconfont.css +216 -0
  8. package/assets/icons/iconfont.css:Zone.Identifier +0 -0
  9. package/assets/icons/iconfont.js +1 -0
  10. package/assets/icons/iconfont.js:Zone.Identifier +0 -0
  11. package/assets/icons/iconfont.json +324 -0
  12. package/assets/icons/iconfont.json:Zone.Identifier +0 -0
  13. package/assets/icons/iconfont.ttf +0 -0
  14. package/assets/icons/iconfont.ttf:Zone.Identifier +0 -0
  15. package/assets/icons/iconfont.woff +0 -0
  16. package/assets/icons/iconfont.woff2 +0 -0
  17. package/assets/icons/iconfont.woff2:Zone.Identifier +0 -0
  18. package/assets/icons/iconfont.woff:Zone.Identifier +0 -0
  19. package/assets/images/API.svg +3 -0
  20. package/assets/images/action.svg +6 -0
  21. package/assets/images/login/password.svg +20 -0
  22. package/assets/images/login/user.svg +6 -0
  23. package/assets/images/login-bg.png +0 -0
  24. package/assets/images/login-left.png +0 -0
  25. package/assets/images/login-logo.svg +19 -0
  26. package/assets/images/logo.png +0 -0
  27. package/assets/images/pl/half-logo.svg +2 -23
  28. package/assets/images/pl/harvester.png +0 -0
  29. package/assets/images/pl/logo.png +0 -0
  30. package/assets/images/promp-yellow.svg +5 -0
  31. package/assets/images/user.png +0 -0
  32. package/assets/styles/all.scss +63 -0
  33. package/assets/styles/app.scss +4 -0
  34. package/assets/styles/base/_basic.scss +2 -2
  35. package/assets/styles/base/_mixins.scss +1 -1
  36. package/assets/styles/base/_typography.scss +2 -1
  37. package/assets/styles/base/_variables.scss +14 -7
  38. package/assets/styles/global/_button.scss +43 -25
  39. package/assets/styles/global/_columns.scss +3 -1
  40. package/assets/styles/global/_form.scss +45 -13
  41. package/assets/styles/global/_labeled-input.scss +54 -26
  42. package/assets/styles/global/_layout.scss +8 -3
  43. package/assets/styles/global/_select.scss +25 -17
  44. package/assets/styles/global/_table.scss +7 -1
  45. package/assets/styles/global/_tooltip.scss +56 -8
  46. package/assets/styles/themes/_dark.scss +3 -0
  47. package/assets/styles/themes/_light.scss +66 -43
  48. package/assets/styles/vendor/vue-select.scss +22 -9
  49. package/assets/translations/en-us.yaml +28 -4
  50. package/assets/translations/zh-hans.yaml +452 -189
  51. package/components/ActionDropdown.vue +2 -1
  52. package/components/ActionMenu.vue +2 -2
  53. package/components/ActionMenuShell.vue +2 -0
  54. package/components/AppModal.vue +46 -5
  55. package/components/BrandImage.vue +1 -0
  56. package/components/ButtonDropdown.vue +26 -4
  57. package/components/ButtonMultiAction.vue +1 -0
  58. package/components/ClusterIconMenu.vue +1 -1
  59. package/components/CodeMirror.vue +20 -6
  60. package/components/ConsumptionGauge.vue +24 -5
  61. package/components/CopyToClipboard.vue +15 -0
  62. package/components/CruResource.vue +9 -8
  63. package/components/CruResourceFooter.vue +2 -2
  64. package/components/DashboardOptions.vue +29 -17
  65. package/components/DotState.vue +84 -0
  66. package/components/Drawer/Chrome.vue +2 -2
  67. package/components/Drawer/ResourceDetailDrawer/ConfigTab.vue +22 -22
  68. package/components/Drawer/ResourceDetailDrawer/YamlTab.vue +1 -1
  69. package/components/Drawer/ResourceDetailDrawer/index.vue +2 -1
  70. package/components/ExplorerMembers.vue +18 -3
  71. package/components/ExplorerProjectsNamespaces.vue +19 -5
  72. package/components/GlobalRoleBindings.vue +112 -48
  73. package/components/GrafanaDashboard.vue +4 -4
  74. package/components/GrowlManager.vue +3 -1
  75. package/components/HardwareResourceGauge.vue +39 -3
  76. package/components/IndentedPanel.vue +4 -10
  77. package/components/InfoBox.vue +3 -3
  78. package/components/InputOrDisplay.vue +28 -2
  79. package/components/LabelValue.vue +20 -1
  80. package/components/ModalWithCard.vue +12 -3
  81. package/components/PodSecurityAdmission.vue +1 -1
  82. package/components/PromptModal.vue +1 -1
  83. package/components/PromptRemove.vue +30 -11
  84. package/components/Resource/Detail/Metadata/IdentifyingInformation/index.vue +1 -3
  85. package/components/Resource/Detail/Metadata/KeyValue.vue +8 -4
  86. package/components/Resource/Detail/Metadata/index.vue +3 -1
  87. package/components/Resource/Detail/TitleBar/Title.vue +4 -3
  88. package/components/Resource/Detail/TitleBar/Top.vue +2 -0
  89. package/components/Resource/Detail/TitleBar/index.vue +109 -24
  90. package/components/ResourceDetail/Masthead/legacy.vue +181 -38
  91. package/components/ResourceDetail/legacy.vue +32 -14
  92. package/components/ResourceList/Masthead.vue +226 -54
  93. package/components/ResourceList/ResourceLoadingIndicator.vue +5 -2
  94. package/components/ResourceTable.vue +24 -2
  95. package/components/SideNav.vue +74 -20
  96. package/components/SortableTable/THead.vue +33 -3
  97. package/components/SortableTable/index.vue +1016 -463
  98. package/components/SortableTable/paging.js +26 -16
  99. package/components/SortableTable/selection.js +2 -2
  100. package/components/Tabbed/Tab.vue +3 -3
  101. package/components/Tabbed/index.vue +47 -29
  102. package/components/YamlEditor.vue +0 -1
  103. package/components/auth/Principal.vue +37 -13
  104. package/components/auth/RoleDetailEdit.vue +58 -7
  105. package/components/auth/SelectPrincipal.vue +1 -0
  106. package/components/breadcrumb/index.vue +316 -0
  107. package/components/form/ArrayList.vue +41 -33
  108. package/components/form/ArrayListGrouped.vue +10 -2
  109. package/components/form/ArrayListSelect.vue +1 -1
  110. package/components/form/BannerSettings.vue +64 -59
  111. package/components/form/ChangePassword.vue +4 -4
  112. package/components/form/ColorInput.vue +32 -8
  113. package/components/form/Footer.vue +11 -8
  114. package/components/form/InputWithSelect.vue +8 -5
  115. package/components/form/KeyValue.vue +47 -7
  116. package/components/form/LabeledSelect.vue +214 -242
  117. package/components/form/Labels.vue +3 -3
  118. package/components/form/MatchExpressions.vue +24 -7
  119. package/components/form/Members/ClusterPermissionsEditor.vue +1 -2
  120. package/components/form/Members/MembershipEditor.vue +1 -1
  121. package/components/form/NameNsDescription.vue +59 -20
  122. package/components/form/Password.vue +16 -7
  123. package/components/form/PodAffinity.vue +4 -5
  124. package/components/form/ResourceQuota/Namespace.vue +4 -4
  125. package/components/form/ResourceQuota/NamespaceRow.vue +18 -17
  126. package/components/form/ResourceQuota/Project.vue +4 -4
  127. package/components/form/ResourceQuota/ProjectRow.vue +3 -6
  128. package/components/form/Select.vue +5 -2
  129. package/components/form/SimpleSecretSelector.vue +29 -9
  130. package/components/form/Taints.vue +2 -1
  131. package/components/form/UnitInput.vue +8 -3
  132. package/components/form/WorkloadPorts.vue +143 -123
  133. package/components/formatter/BadgeStateFormatter.vue +8 -5
  134. package/components/formatter/LiveDate.vue +3 -3
  135. package/components/nav/Favorite.vue +5 -1
  136. package/components/nav/Group.vue +132 -99
  137. package/components/nav/Header.vue +124 -27
  138. package/components/nav/HeaderPageActionMenu.vue +1 -0
  139. package/components/nav/NamespaceFilter.vue +20 -17
  140. package/components/nav/TopLevelMenu.vue +182 -119
  141. package/components/nav/Type.vue +63 -41
  142. package/composables/useClickOutside.ts +1 -1
  143. package/config/private-label.js +15 -11
  144. package/config/product/auth.js +17 -7
  145. package/config/product/settings.js +19 -9
  146. package/config/settings.ts +28 -0
  147. package/config/table-headers.js +3 -2
  148. package/dialog/ForceMachineRemoveDialog.vue +2 -2
  149. package/dialog/ScalePoolDownDialog.vue +2 -2
  150. package/edit/management.cattle.io.user.vue +17 -4
  151. package/edit/monitoring.coreos.com.alertmanagerconfig/auth.vue +19 -19
  152. package/edit/monitoring.coreos.com.alertmanagerconfig/receiverConfig.vue +31 -31
  153. package/edit/monitoring.coreos.com.alertmanagerconfig/routeConfig.vue +36 -12
  154. package/edit/monitoring.coreos.com.alertmanagerconfig/types/email.vue +6 -6
  155. package/edit/monitoring.coreos.com.alertmanagerconfig/types/opsgenie.vue +10 -10
  156. package/edit/monitoring.coreos.com.alertmanagerconfig/types/pagerduty.vue +4 -4
  157. package/edit/monitoring.coreos.com.alertmanagerconfig/types/slack.vue +4 -4
  158. package/edit/monitoring.coreos.com.alertmanagerconfig/types/webhook.vue +1 -1
  159. package/edit/monitoring.coreos.com.receiver/types/email.vue +6 -6
  160. package/edit/monitoring.coreos.com.receiver/types/opsgenie.vue +10 -10
  161. package/edit/monitoring.coreos.com.receiver/types/pagerduty.vue +5 -5
  162. package/edit/monitoring.coreos.com.receiver/types/slack.vue +4 -4
  163. package/edit/namespace.vue +1 -2
  164. package/edit/token.vue +31 -12
  165. package/edit/workload/index.vue +4 -4
  166. package/list/management.cattle.io.setting.vue +22 -13
  167. package/list/management.cattle.io.user.vue +7 -3
  168. package/list/namespace.vue +3 -0
  169. package/list/provisioning.cattle.io.cluster.vue +6 -7
  170. package/mixins/brand.js +17 -0
  171. package/package.json +1 -1
  172. package/pages/account/pri.vue +229 -0
  173. package/pages/auth/login.vue +220 -52
  174. package/pages/auth/setup.vue +142 -19
  175. package/pages/c/_cluster/_product/namespaces.vue +5 -5
  176. package/pages/c/_cluster/auth/roles/index.vue +56 -5
  177. package/pages/c/_cluster/monitoring/monitor/index.vue +2 -2
  178. package/pages/c/_cluster/settings/banners.vue +174 -102
  179. package/pages/c/_cluster/settings/brand.vue +350 -302
  180. package/pages/c/_cluster/settings/performance.vue +61 -38
  181. package/pages/home.vue +70 -30
  182. package/pages/prefs.vue +27 -25
  183. package/pkg/tsconfig.json +9 -9
  184. package/pkg/vue.config.js +1 -1
  185. package/plugins/dashboard-store/resource-class.js +28 -27
  186. package/promptRemove/mixin/roleDeletionCheck.js +2 -2
  187. package/public/index.html +4 -4
  188. package/rancher-components/BadgeState/BadgeState.vue +38 -55
  189. package/rancher-components/Banner/Banner.vue +12 -8
  190. package/rancher-components/Card/Card.vue +7 -8
  191. package/rancher-components/Form/Checkbox/Checkbox.vue +4 -0
  192. package/rancher-components/Form/LabeledInput/LabeledInput.vue +42 -3
  193. package/rancher-components/Form/Radio/RadioButton.vue +35 -11
  194. package/rancher-components/Form/Radio/RadioGroup.vue +13 -5
  195. package/rancher-components/Form/TextArea/TextAreaAutoGrow.vue +3 -3
  196. package/rancher-components/Form/ToggleSwitch/ToggleSwitch.vue +1 -0
  197. package/rancher-components/LabeledTooltip/LabeledTooltip.vue +12 -4
  198. package/rancher-components/RcDropdown/RcDropdown.vue +35 -7
  199. package/rancher-components/RcDropdown/RcDropdownItem.vue +2 -2
  200. package/rancher-components/RcDropdown/RcDropdownMenu.vue +12 -6
  201. package/rancher-components/RcDropdown/types.ts +1 -0
  202. package/rancher-components/StringList/StringList.vue +1 -1
  203. package/scripts/publish-shell.sh +1 -1
  204. package/static/favicon.ico +0 -0
  205. package/static/favicon.png +0 -0
  206. package/static/loading-indicator.html +3 -3
  207. package/store/i18n.js +5 -2
  208. package/store/modal.ts +3 -3
  209. package/store/prefs.js +11 -4
  210. package/store/type-map.js +32 -2
  211. package/types/shell/index.d.ts +78 -97
  212. package/utils/error.js +89 -8
  213. package/utils/errorTranslate.json +1351 -0
  214. package/utils/router.js +21 -0
  215. package/utils/select.js +26 -3
  216. package/utils/string.js +8 -5
  217. package/utils/title.ts +1 -1
  218. package/vue.config.js +1 -1
package/plugins/dashboard-store/resource-class.js CHANGED
@@ -913,42 +913,42 @@ export default class Resource {
913
913
  {
914
914
  action: this.canUpdate ? 'goToEdit' : 'goToViewConfig',
915
915
  label: this.t(this.canUpdate ? 'action.edit' : 'action.view'),
916
- icon: 'icon icon-edit',
916
+ // icon: 'icon icon-edit',
917
917
  enabled: this.canCustomEdit,
918
918
  },
919
- {
920
- action: this.canEditYaml ? 'goToEditYaml' : 'goToViewYaml',
921
- label: this.t(this.canEditYaml ? 'action.editYaml' : 'action.viewYaml'),
922
- icon: 'icon icon-file',
923
- enabled: this.canYaml,
924
- },
919
+ // {
920
+ // action: this.canEditYaml ? 'goToEditYaml' : 'goToViewYaml',
921
+ // label: this.t(this.canEditYaml ? 'action.editYaml' : 'action.viewYaml'),
922
+ // icon: 'icon icon-file',
923
+ // enabled: this.canYaml,
924
+ // },
925
925
  {
926
926
  action: (this.canCustomEdit ? 'goToClone' : 'cloneYaml'),
927
927
  label: this.t('action.clone'),
928
- icon: 'icon icon-copy',
929
- enabled: this.canClone && this.canCreate && (this.canCustomEdit || this.canYaml),
930
- },
931
- { divider: true },
932
- {
933
- action: 'download',
934
- label: this.t('action.download'),
935
- icon: 'icon icon-download',
936
- bulkable: true,
937
- bulkAction: 'downloadBulk',
938
- enabled: this.canYaml,
939
- weight: -9,
940
- },
941
- {
942
- action: 'viewInApi',
943
- label: this.t('action.viewInApi'),
944
- icon: 'icon icon-external-link',
945
- enabled: this.canViewInApi,
928
+ // icon: 'icon icon-copy',
929
+ enabled: this.canClone && this.canCreate && (this.canCustomEdit || this.canYaml)&& this.schema.id!=='event',
946
930
  },
931
+ // { divider: true },
932
+ // {
933
+ // action: 'download',
934
+ // label: this.t('action.download'),
935
+ // icon: 'icon icon-download',
936
+ // bulkable: true,
937
+ // bulkAction: 'downloadBulk',
938
+ // enabled: this.canYaml,
939
+ // weight: -9,
940
+ // },
941
+ // {
942
+ // action: 'viewInApi',
943
+ // label: this.t('action.viewInApi'),
944
+ // icon: 'icon icon-external-link',
945
+ // enabled: this.canViewInApi,
946
+ // },
947
947
  {
948
948
  action: 'promptRemove',
949
949
  altAction: 'remove',
950
950
  label: this.t('action.remove'),
951
- icon: 'icon icon-trash',
951
+ // icon: 'icon icon-trash',
952
952
  bulkable: true,
953
953
  enabled: this.canDelete,
954
954
  bulkAction: 'promptRemove',
@@ -1322,7 +1322,8 @@ export default class Resource {
1322
1322
  }
1323
1323
 
1324
1324
  get detailLocation() {
1325
- return this._detailLocation;
1325
+ let location = this._detailLocation;
1326
+ return location;
1326
1327
  }
1327
1328
 
1328
1329
  goToDetail() {
package/promptRemove/mixin/roleDeletionCheck.js CHANGED
@@ -92,10 +92,10 @@ export default {
92
92
  this.info = '';
93
93
  this.warning = this.t('rbac.globalRoles.usersBound', { count: uniqueUsersWithBinds.size });
94
94
  } else {
95
- this.info = this.t('rbac.globalRoles.notBound', null, true);
95
+ this.info = this.t('rbac.globalRoles.notBound');
96
96
  }
97
97
  } else {
98
- this.info = this.t('rbac.globalRoles.notBound', null, true);
98
+ this.info = this.t('rbac.globalRoles.notBound');
99
99
  }
100
100
  } catch (e) {
101
101
  this.info = this.t('rbac.globalRoles.unableToCheck');
package/public/index.html CHANGED
@@ -6,7 +6,7 @@
6
6
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
7
7
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
8
8
  <link rel="shortcut icon" type="image/x-icon" href="/favicon.png">
9
- <title>Rancher</title>
9
+ <title>HCI</title>
10
10
  </head>
11
11
 
12
12
  <body>
@@ -49,11 +49,11 @@
49
49
 
50
50
  .initial-load-spinner {
51
51
  animation: initial-load-animate 1s infinite linear;
52
- background-color: var(--loading-bg-color);
52
+ background-color: transparent;
53
53
  box-sizing: border-box;
54
- border: 5px solid #008ACF;
54
+ border: 5px solid #1890FF;
55
55
  border-radius: 50%;
56
- border-top-color: #00B2E2;
56
+ border-top-color: transparent;
57
57
  display: inline-block;
58
58
  height: 80px;
59
59
  margin: 0 auto;
package/rancher-components/BadgeState/BadgeState.vue CHANGED
@@ -1,5 +1,6 @@
1
1
  <script lang="ts">
2
2
  import { PropType, defineComponent } from 'vue';
3
+ import { mapGetters } from 'vuex';
3
4
 
4
5
  interface Badge {
5
6
  stateBackground: string;
@@ -47,74 +48,56 @@ export default defineComponent({
47
48
  },
48
49
 
49
50
  computed: {
51
+ ...mapGetters({ t: 'i18n/t' }),
50
52
  bg(): string | null {
51
53
  return this.value?.stateBackground || this.color;
52
54
  },
53
55
 
54
56
  msg(): string | null {
55
- return this.value?.stateDisplay || this.label;
57
+ let text = this.value?.stateDisplay || this.label;
58
+ let zhText = this.t(`stateLabel.${ text }`)
59
+ return zhText ? zhText : text
56
60
  }
57
61
  }
58
62
  });
59
63
  </script>
60
64
 
61
65
  <template>
62
- <span :class="['badge-state', bg]">
63
- <i
64
- v-if="icon"
65
- class="icon"
66
- :class="{[icon]: true, 'mr-5': !!msg}"
67
- />
68
- <span class="msg">{{ msg }}</span>
69
- <slot name="content-right" />
70
- </span>
66
+ <div style="display: flex;flex-direction: row;align-items: center;font-size: 12px;">
67
+ <div :class="{ [bg]: true }"></div>
68
+ <span style="margin-left: 5px;">{{ msg }}</span>
69
+
70
+ </div>
71
71
  </template>
72
-
73
72
  <style lang="scss" scoped>
74
- .badge-state {
75
- align-items: center;
76
- display: inline-flex;
77
- padding: 2px 10px;
78
- border: 1px solid transparent;
79
- border-radius: 20px;
80
-
81
- &.bg-info {
82
- border-color: var(--info);
83
- }
84
-
85
- &.bg-error {
86
- border-color: var(--error);
87
- }
88
-
89
- &.bg-warning {
90
- border-color: var(--warning);
91
- }
92
-
93
- // Successful states are de-emphasized by using [text-]color instead of background-color
94
- &.bg-success {
95
- color: var(--success);
96
- background: transparent;
97
- border-color: var(--success);
98
- }
99
-
100
- // Added badge-disabled instead of bg-disabled since bg-disabled is used in other places with !important styling, an investigation is needed to make the naming consistent
101
- &.badge-disabled {
102
- color: var(--badge-state-disabled-text);
103
- background-color: var( --badge-state-disabled-bg);
104
- border: 1px solid var(--badge-state-disabled-border);
105
- }
73
+ .bg-error {
74
+ width: 10px; /* 圆点的宽度 */
75
+ height: 10px; /* 圆点的高度 */
76
+ background-color: #DD0C17; /* 圆点的颜色 */
77
+ border-radius: 50%; /* 设置为圆形 */
106
78
  }
107
- </style>
108
- <style lang="scss">
109
- // TODO: #6005
110
- // Investigate why this is here.. I don't think that styles for sortable table should belong here
111
- .sortable-table TD .badge-state {
112
- @include clip;
113
- display: inline-block;
114
- max-width: 100%;
115
- position: relative;
116
- max-width: 110px;
117
- font-size: .85em;
118
- vertical-align: middle;
79
+ .bg-darker {
80
+ width: 10px; /* 圆点的宽度 */
81
+ height: 10px; /* 圆点的高度 */
82
+ background-color: #DD0C17; /* 圆点的颜色 */
83
+ border-radius: 50%; /* 设置为圆形 */
84
+ }
85
+ .bg-success {
86
+ width: 10px; /* 圆点的宽度 */
87
+ height: 10px; /* 圆点的高度 */
88
+ background-color: #95F204 !important; /* 圆点的颜色 */
89
+ border-radius: 50%; /* 设置为圆形 */
90
+ }
91
+ .bg-warning {
92
+ width: 10px; /* 圆点的宽度 */
93
+ height: 10px; /* 圆点的高度 */
94
+ background-color: #DAC342; /* 圆点的颜色 */
95
+ border-radius: 50%; /* 设置为圆形 */
96
+ }
97
+ .bg-info {
98
+ width: 10px; /* 圆点的宽度 */
99
+ height: 10px; /* 圆点的高度 */
100
+ background-color: #1890FF; /* 圆点的颜色 */
101
+ border-radius: 50%; /* 设置为圆形 */
119
102
  }
120
103
  </style>
package/rancher-components/Banner/Banner.vue CHANGED
@@ -154,9 +154,14 @@ export default defineComponent({
154
154
  $left-border-size: 4px;
155
155
  $icon-size: 24px;
156
156
 
157
+ .banner__content {
158
+ line-height: 18px !important;
159
+ }
160
+
157
161
  .banner {
158
162
  display: flex;
159
- margin: 15px 0;
163
+ /* margin: 15px 0; */
164
+ margin: 0px 0px 20px 0px;
160
165
  position: relative;
161
166
  width: 100%;
162
167
  color: var(--body-text);
@@ -195,18 +200,16 @@ $icon-size: 24px;
195
200
  }
196
201
  }
197
202
 
198
- &.banner-disabled {
199
- filter: grayscale(1);
200
- }
201
-
202
203
  &__content {
203
- padding: 10px;
204
+ padding: 9px 10px;
204
205
  transition: all 0.2s ease;
205
- line-height: 20px;
206
+ line-height: 12px;
206
207
  width: 100%;
207
208
  border-left: solid $left-border-size transparent;
208
209
  display: flex;
209
210
  gap: 3px;
211
+ word-wrap:break-word;
212
+ word-break:break-all;
210
213
 
211
214
  .primary & {
212
215
  background: var(--primary);
@@ -224,7 +227,8 @@ $icon-size: 24px;
224
227
  }
225
228
 
226
229
  .info & {
227
- background: var(--info-banner-bg);
230
+ // background: var(--info-banner-bg);
231
+ background: #f2f2f2;
228
232
  border-color: var(--info);
229
233
  }
230
234
 
package/rancher-components/Card/Card.vue CHANGED
@@ -76,7 +76,7 @@ export default defineComponent({
76
76
  <template>
77
77
  <div
78
78
  id="focus-trap-card-container-element"
79
- class="card-container"
79
+ class="card-containers"
80
80
  :class="{'highlight-border': showHighlightBorder, 'card-sticky': sticky}"
81
81
  data-testid="card"
82
82
  >
@@ -89,7 +89,7 @@ export default defineComponent({
89
89
  {{ title }}
90
90
  </slot>
91
91
  </div>
92
- <hr role="none">
92
+ <!-- <hr role="none"> -->
93
93
  <div
94
94
  class="card-body"
95
95
  data-testid="card-body-slot"
@@ -117,17 +117,15 @@ export default defineComponent({
117
117
  </template>
118
118
 
119
119
  <style lang='scss'>
120
- .card-container {
120
+ .card-containers {
121
121
  &.highlight-border {
122
122
  border-left: 5px solid var(--primary);
123
123
  }
124
- border-radius: var(--border-radius);
125
124
  display: flex;
126
125
  flex-basis: 40%;
127
- margin: 10px;
128
126
  min-height: 100px;
129
- padding: 10px;
130
- box-shadow: 0 0 20px var(--shadow);
127
+ padding: 24px;
128
+ border: 1px solid var(--border);
131
129
  &:not(.top) {
132
130
  align-items: top;
133
131
  flex-direction: row;
@@ -143,14 +141,15 @@ export default defineComponent({
143
141
  justify-content: center;
144
142
  }
145
143
  & .card-actions {
146
- align-self: end;
147
144
  display: flex;
145
+ justify-content: flex-end;
148
146
  padding-top: 20px;
149
147
  }
150
148
  & .card-title {
151
149
  align-items: center;
152
150
  display: flex;
153
151
  width: 100%;
152
+ margin-bottom: 15px;
154
153
  h5 {
155
154
  margin: 0;
156
155
  }
package/rancher-components/Form/Checkbox/Checkbox.vue CHANGED
@@ -317,6 +317,7 @@ export default defineComponent({
317
317
  <span
318
318
  v-else-if="label"
319
319
  :id="idForLabel"
320
+ :style="label == '记住用户名' ? { color: '#fff' } : ''"
320
321
  >{{ label }}</span>
321
322
  <i
322
323
  v-if="tooltipKey"
@@ -497,6 +498,9 @@ $fontColor: var(--input-label);
497
498
 
498
499
  // Disabled styles
499
500
  &.disabled {
501
+ span {
502
+ color: var(--muted);
503
+ }
500
504
  .checkbox-custom {
501
505
  background-color: var(--checkbox-disabled-bg);
502
506
  border-color: var(--checkbox-disabled-bg);
package/rancher-components/Form/LabeledInput/LabeledInput.vue CHANGED
@@ -4,6 +4,7 @@ import TextAreaAutoGrow from '@components/Form/TextArea/TextAreaAutoGrow.vue';
4
4
  import LabeledTooltip from '@components/LabeledTooltip/LabeledTooltip.vue';
5
5
  import { escapeHtml, generateRandomAlphaString } from '@shell/utils/string';
6
6
  import cronstrue from 'cronstrue';
7
+ import 'cronstrue/locales/zh_CN';
7
8
  import { isValidCron } from 'cron-validator';
8
9
  import { debounce } from 'lodash';
9
10
  import { useLabeledFormElement, labeledFormElementProps } from '@shell/composables/useLabeledFormElement';
@@ -226,7 +227,8 @@ export default defineComponent({
226
227
  }
227
228
 
228
229
  try {
229
- const hint = cronstrue.toString(this.value as string || '', { verbose: true });
230
+ // const hint = cronstrue.toString(this.value as string || '', { verbose: true });
231
+ const hint = cronstrue.toString(this.value as string || '', { locale: 'zh_CN' });
230
232
 
231
233
  return hint;
232
234
  } catch (e) {
@@ -347,6 +349,24 @@ export default defineComponent({
347
349
  </script>
348
350
 
349
351
  <template>
352
+ <div class="label-input-all">
353
+ <slot name="label">
354
+ <label
355
+ v-if="hasLabel"
356
+ :for="inputId"
357
+ >
358
+ <t
359
+ v-if="labelKey"
360
+ :k="labelKey"
361
+ />
362
+ <template v-else-if="label">{{ label }}</template>
363
+
364
+ <span
365
+ v-if="requiredField"
366
+ class="required"
367
+ >*</span>
368
+ </label>
369
+ </slot>
350
370
  <div
351
371
  :class="{
352
372
  'labeled-input': true,
@@ -361,7 +381,7 @@ export default defineComponent({
361
381
  [className]: true
362
382
  }"
363
383
  >
364
- <slot name="label">
384
+ <!-- <slot name="label">
365
385
  <label
366
386
  v-if="hasLabel"
367
387
  :for="inputId"
@@ -378,7 +398,7 @@ export default defineComponent({
378
398
  :aria-hidden="true"
379
399
  >*</span>
380
400
  </label>
381
- </slot>
401
+ </slot> -->
382
402
 
383
403
  <slot name="prefix" />
384
404
 
@@ -462,6 +482,8 @@ export default defineComponent({
462
482
  />
463
483
  </div>
464
484
  </div>
485
+ <slot name="suffixNew" />
486
+ </div>
465
487
  </template>
466
488
  <style scoped lang="scss">
467
489
  .labeled-input.view {
@@ -484,6 +506,23 @@ export default defineComponent({
484
506
  -moz-appearance: textfield;
485
507
  }
486
508
  }
509
+ .label-input-all{
510
+ display: flex;
511
+ label{
512
+ width: 160px !important;
513
+ line-height: 32px;
514
+ .required{
515
+ color: red;
516
+ }
517
+ }
518
+ }
519
+ .span-4 {
520
+ width: none;
521
+ }
522
+ .v-popper--has-tooltip INPUT, .v-popper--has-tooltip INPUT:hover, .v-popper--has-tooltip INPUT:focus{
523
+ padding: 0px 0px 0px 11px;
524
+ }
525
+
487
526
  </style>
488
527
  <style>
489
528
  .validation-message {
package/rancher-components/Form/Radio/RadioButton.vue CHANGED
@@ -198,7 +198,7 @@ export default defineComponent({
198
198
  >
199
199
  <!-- slot content -->
200
200
  </slot>
201
- <span
201
+ <div
202
202
  v-else-if="label"
203
203
  v-clean-html="label"
204
204
  />
@@ -264,18 +264,25 @@ $fontColor: var(--input-label);
264
264
  &.disabled,
265
265
  &.disabled .radio-label,
266
266
  &.disabled .radio-button-outer-container-description {
267
- cursor: not-allowed
267
+ cursor: not-allowed;
268
+ color: var(--muted);
268
269
  }
269
270
 
270
- .radio-custom {
271
- height: 14px;
272
- width: 14px;
273
- min-height: 14px;
274
- min-width: 14px;
271
+ .radio-custom {
272
+ height: 12px;
273
+ width: 12px;
274
+ min-height: 13px;
275
+ min-width: 13px;
275
276
  background-color: var(--input-bg);
276
277
  border-radius: 50%;
278
+ transition: all 0.3s ease-out;
277
279
  border: 1.5px solid var(--border);
278
- margin-top: 5px;
280
+ margin-top: 3px !important;
281
+
282
+ &:focus {
283
+ outline: none;
284
+ border-radius: 50%;
285
+ }
279
286
  }
280
287
 
281
288
  input {
@@ -284,20 +291,37 @@ $fontColor: var(--input-label);
284
291
 
285
292
  .radio-custom {
286
293
  &[aria-checked="true"] {
287
- background-color: var(--primary);
294
+ background-color: #fff;
288
295
  -webkit-transform: rotate(0deg) scale(1);
289
296
  -ms-transform: rotate(0deg) scale(1);
290
297
  transform: rotate(0deg) scale(1);
291
298
  opacity:1;
292
299
  border: 1.5px solid var(--primary);
300
+ display: flex;
301
+ align-items: center;
302
+ justify-content: center;
303
+
293
304
 
305
+ &::after {
306
+ background-color: var(--primary);
307
+ width: 7px;
308
+ height: 7px;
309
+ display: inline;
310
+ content: "";
311
+ /* position: absolute; */
312
+ /* top: 17%;
313
+ left: 19%;
314
+ margin-left: 0.4px; */
315
+ /* top: 1.5px;
316
+ left: 1.5px; */
317
+ border-radius: 50%;
318
+ }
294
319
  // Ensure that checked radio buttons are muted but still visibly selected when muted
295
320
  &.text-muted {
296
321
  opacity: .25;
297
322
  }
298
323
  }
299
324
  }
300
-
301
325
  input:disabled ~ .radio-custom:not([aria-checked="true"]) {
302
326
  background-color: var(--disabled-bg);
303
327
  opacity: .25;
@@ -313,7 +337,7 @@ $fontColor: var(--input-label);
313
337
  display: inline-flex;
314
338
  flex-direction: column;
315
339
 
316
- margin: 3px 10px 0px 5px;
340
+ margin: 3px 16px 0px 5px;
317
341
  }
318
342
  }
319
343
 
package/rancher-components/Form/Radio/RadioGroup.vue CHANGED
@@ -237,14 +237,14 @@ export default defineComponent({
237
237
  </script>
238
238
 
239
239
  <template>
240
- <div>
240
+ <div style="display: flex;">
241
241
  <!-- Label -->
242
242
  <div
243
243
  v-if="label || labelKey || tooltip || tooltipKey || $slots.label"
244
- class="radio-group label"
244
+ class="radio-group label radio-group-labelBox"
245
245
  >
246
246
  <slot name="label">
247
- <h3>
247
+ <span class="radio-group-title">
248
248
  <t
249
249
  v-if="labelKey"
250
250
  :k="labelKey"
@@ -262,7 +262,7 @@ export default defineComponent({
262
262
  v-clean-tooltip="tooltip"
263
263
  class="icon icon-info icon-lg"
264
264
  />
265
- </h3>
265
+ </span>
266
266
  </slot>
267
267
  </div>
268
268
 
@@ -334,7 +334,15 @@ export default defineComponent({
334
334
  }
335
335
 
336
336
  .label{
337
- font-size: 14px !important;
337
+ font-size: 12px !important;
338
338
  }
339
339
  }
340
+ .radio-group-title{
341
+ font-size: 12px !important;
342
+ margin-bottom: 0px !important;
343
+ display: inline-block;
344
+ }
345
+ .radio-group-labelBox {
346
+ width: 160px;
347
+ }
340
348
  </style>
package/rancher-components/Form/TextArea/TextAreaAutoGrow.vue CHANGED
@@ -108,7 +108,7 @@ export default defineComponent({
108
108
  * (unless the input is long)
109
109
  */
110
110
  style(): string {
111
- return `height: ${ this.curHeight }px; overflow: ${ this.overflow };`;
111
+ return `height: ${ this.curHeight }px; overflow: ${ this.overflow };min-height:${ this.curHeight }px;`;
112
112
  },
113
113
 
114
114
  className(): string | unknown[] | Record<string, boolean> {
@@ -165,13 +165,13 @@ export default defineComponent({
165
165
  return;
166
166
  }
167
167
 
168
- el.style.height = '1px';
168
+ // el.style.height = '1px';
169
169
 
170
170
  const border = parseInt(getComputedStyle(el).getPropertyValue('borderTopWidth'), 10) || 0 + parseInt(getComputedStyle(el).getPropertyValue('borderBottomWidth'), 10) || 0;
171
171
  const neu = Math.max(this.minHeight, Math.min(el.scrollHeight + border, this.maxHeight));
172
172
 
173
173
  el.style.overflowY = el.scrollHeight > neu ? 'auto' : 'hidden';
174
- el.style.height = `${ neu }px`;
174
+ // el.style.height = `${ neu }px`;
175
175
 
176
176
  this.curHeight = neu;
177
177
  }
package/rancher-components/Form/ToggleSwitch/ToggleSwitch.vue CHANGED
@@ -94,6 +94,7 @@ export default defineComponent({
94
94
  :class="{'toggle-disabled': disabled}"
95
95
  >
96
96
  <span
97
+ style="width: 160px;"
97
98
  class="label no-select hand"
98
99
  :class="{ active: !state}"
99
100
  @click="toggle(false)"
package/rancher-components/LabeledTooltip/LabeledTooltip.vue CHANGED
@@ -109,9 +109,9 @@ export default defineComponent({
109
109
 
110
110
  .status-icon {
111
111
  position: absolute;
112
- right: 30px;
113
- top: $input-padding-lg;
114
- z-index: z-index(hoverOverContent);
112
+ right: 5px;
113
+ top: 10px;
114
+ z-index: 3;
115
115
  }
116
116
 
117
117
  @mixin tooltipColors($color) {
@@ -120,11 +120,19 @@ export default defineComponent({
120
120
  }
121
121
  }
122
122
 
123
+ &.null {
124
+
125
+ .status-icon {
126
+ top: 5px;
127
+ right: -20px;
128
+ }
129
+ }
130
+
123
131
  &.error {
124
132
  @include tooltipColors(var(--error));
125
133
 
126
134
  .status-icon {
127
- top: 7px;
135
+ top: 9px !important;
128
136
  right: 5px;
129
137
  }
130
138
  }