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

package/rancher-components/Banner/Banner.vue

@@ -154,14 +154,9 @@ export default defineComponent({
 $left-border-size: 4px;
 $icon-size: 24px;
 
-.banner__content {
-  line-height: 18px !important;
-}
-
 .banner {
   display: flex;
-  /* margin: 15px 0; */
-  margin: 0px 0px 20px 0px;
+  margin: 15px 0;
   position: relative;
   width: 100%;
   color: var(--body-text);
@@ -200,16 +195,18 @@ $icon-size: 24px;
     }
   }
 
+  &.banner-disabled {
+    filter: grayscale(1);
+  }
+
   &__content {
-    padding: 9px 10px; 
+    padding: 10px;
     transition: all 0.2s ease;
-    line-height: 12px;
+    line-height: 20px;
     width: 100%;
     border-left: solid $left-border-size transparent;
     display: flex;
     gap: 3px;
-    word-wrap:break-word; 
-    word-break:break-all; 
 
     .primary & {
       background: var(--primary);
@@ -227,8 +224,7 @@ $icon-size: 24px;
     }
 
     .info & {
-      // background: var(--info-banner-bg);
-      background: #f2f2f2;
+      background: var(--info-banner-bg);
       border-color: var(--info);
     }
 

package/rancher-components/Card/Card.vue

@@ -76,7 +76,7 @@ export default defineComponent({
 <template>
   <div
     id="focus-trap-card-container-element"
-    class="card-containers"
+    class="card-container"
     :class="{'highlight-border': showHighlightBorder, 'card-sticky': sticky}"
     data-testid="card"
   >
@@ -89,7 +89,7 @@ export default defineComponent({
           {{ title }}
         </slot>
       </div>
-      <!-- <hr role="none"> -->
+      <hr role="none">
       <div
         class="card-body"
         data-testid="card-body-slot"
@@ -117,15 +117,17 @@ export default defineComponent({
 </template>
 
 <style lang='scss'>
- .card-containers {
+ .card-container {
   &.highlight-border {
     border-left: 5px solid var(--primary);
   }
+  border-radius: var(--border-radius);
   display: flex;
   flex-basis: 40%;
+  margin: 10px;
   min-height: 100px;
-  padding: 24px;
-  border: 1px solid var(--border);
+  padding: 10px;
+  box-shadow: 0 0 20px var(--shadow);
   &:not(.top) {
     align-items: top;
     flex-direction: row;
@@ -141,15 +143,14 @@ export default defineComponent({
     justify-content: center;
    }
    & .card-actions {
+     align-self: end;
      display: flex;
-     justify-content: flex-end;
      padding-top: 20px;
    }
    & .card-title {
     align-items: center;
     display: flex;
     width: 100%;
-    margin-bottom: 15px;
      h5 {
        margin: 0;
      }

package/rancher-components/Form/Checkbox/Checkbox.vue

@@ -317,7 +317,6 @@ export default defineComponent({
           <span
             v-else-if="label"
             :id="idForLabel"
-            :style="label == '记住用户名' ? { color: '#fff' } : ''"
           >{{ label }}</span>
           <i
             v-if="tooltipKey"
@@ -498,9 +497,6 @@ $fontColor: var(--input-label);
 
   // Disabled styles
   &.disabled {
-    span {
-      color: var(--muted);
-    }
     .checkbox-custom {
       background-color: var(--checkbox-disabled-bg);
       border-color: var(--checkbox-disabled-bg);

package/rancher-components/Form/LabeledInput/LabeledInput.vue

@@ -4,7 +4,6 @@ import TextAreaAutoGrow from '@components/Form/TextArea/TextAreaAutoGrow.vue';
 import LabeledTooltip from '@components/LabeledTooltip/LabeledTooltip.vue';
 import { escapeHtml, generateRandomAlphaString } from '@shell/utils/string';
 import cronstrue from 'cronstrue';
-import 'cronstrue/locales/zh_CN';
 import { isValidCron } from 'cron-validator';
 import { debounce } from 'lodash';
 import { useLabeledFormElement, labeledFormElementProps } from '@shell/composables/useLabeledFormElement';
@@ -227,8 +226,7 @@ export default defineComponent({
       }
 
       try {
-        // const hint = cronstrue.toString(this.value as string || '', { verbose: true });
-        const hint = cronstrue.toString(this.value as string || '', { locale: 'zh_CN' });
+        const hint = cronstrue.toString(this.value as string || '', { verbose: true });
 
         return hint;
       } catch (e) {
@@ -349,24 +347,6 @@ export default defineComponent({
 </script>
 
 <template>
-   <div class="label-input-all">
-    <slot name="label">
-      <label
-        v-if="hasLabel"
-        :for="inputId"
-      >
-        <t
-          v-if="labelKey"
-          :k="labelKey"
-        />
-        <template v-else-if="label">{{ label }}</template>
-
-        <span
-          v-if="requiredField"
-          class="required"
-        >*</span>
-      </label>
-    </slot>
   <div
     :class="{
       'labeled-input': true,
@@ -381,7 +361,7 @@ export default defineComponent({
       [className]: true
     }"
   >
-    <!-- <slot name="label">
+    <slot name="label">
       <label
         v-if="hasLabel"
         :for="inputId"
@@ -398,7 +378,7 @@ export default defineComponent({
           :aria-hidden="true"
         >*</span>
       </label>
-    </slot> -->
+    </slot>
 
     <slot name="prefix" />
 
@@ -482,8 +462,6 @@ export default defineComponent({
       />
     </div>
   </div>
-  <slot name="suffixNew" />
-</div>
 </template>
 <style scoped lang="scss">
 .labeled-input.view {
@@ -506,23 +484,6 @@ export default defineComponent({
     -moz-appearance: textfield;
   }
 }
-.label-input-all{
-  display: flex;
-  label{
-    width: 160px !important;
-    line-height: 32px;
-    .required{
-      color: red;
-    }
-  }
-}
-.span-4 {
-  width: none;
-}
-.v-popper--has-tooltip INPUT, .v-popper--has-tooltip INPUT:hover, .v-popper--has-tooltip INPUT:focus{
-  padding: 0px 0px 0px 11px;
-}
-
 </style>
 <style>
 .validation-message {

package/rancher-components/Form/Radio/RadioButton.vue

@@ -198,7 +198,7 @@ export default defineComponent({
         >
           <!-- slot content -->
         </slot>
-        <div
+        <span
           v-else-if="label"
           v-clean-html="label"
         />
@@ -264,25 +264,18 @@ $fontColor: var(--input-label);
   &.disabled,
   &.disabled .radio-label,
   &.disabled .radio-button-outer-container-description {
-    cursor: not-allowed;
-    color: var(--muted);
+    cursor: not-allowed
   }
 
-  .radio-custom {
-    height: 12px;
-    width: 12px;
-    min-height: 13px;
-    min-width: 13px;
+ .radio-custom {
+    height: 14px;
+    width: 14px;
+    min-height: 14px;
+    min-width: 14px;
     background-color: var(--input-bg);
     border-radius: 50%;
-    transition: all 0.3s ease-out;
     border: 1.5px solid var(--border);
-    margin-top: 3px !important;
-
-    &:focus {
-      outline: none;
-      border-radius: 50%;
-    }
+    margin-top: 5px;
   }
 
   input {
@@ -291,37 +284,20 @@ $fontColor: var(--input-label);
 
   .radio-custom {
     &[aria-checked="true"] {
-      background-color: #fff;
+      background-color: var(--primary);
       -webkit-transform: rotate(0deg) scale(1);
       -ms-transform: rotate(0deg) scale(1);
       transform: rotate(0deg) scale(1);
       opacity:1;
       border: 1.5px solid var(--primary);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      
 
-     &::after {
-      background-color: var(--primary);
-      width: 7px;
-      height: 7px;
-      display: inline;
-      content: "";
-      /* position: absolute; */
-      /* top: 17%;
-      left: 19%;
-      margin-left: 0.4px; */
-      /* top: 1.5px;
-      left: 1.5px; */
-      border-radius: 50%;
-      }
       // Ensure that checked radio buttons are muted but still visibly selected when muted
       &.text-muted {
         opacity: .25;
       }
     }
   }
+
   input:disabled ~ .radio-custom:not([aria-checked="true"]) {
     background-color: var(--disabled-bg);
     opacity: .25;
@@ -337,7 +313,7 @@ $fontColor: var(--input-label);
     display: inline-flex;
     flex-direction: column;
 
-    margin: 3px 16px 0px 5px;
+    margin: 3px 10px 0px 5px;
   }
 }
 

package/rancher-components/Form/Radio/RadioGroup.vue

@@ -237,14 +237,14 @@ export default defineComponent({
 </script>
 
 <template>
-  <div style="display: flex;">
+  <div>
     <!-- Label -->
     <div
       v-if="label || labelKey || tooltip || tooltipKey || $slots.label"
-      class="radio-group label radio-group-labelBox"
+      class="radio-group label"
     >
       <slot name="label">
-        <span class="radio-group-title">
+        <h3>
           <t
             v-if="labelKey"
             :k="labelKey"
@@ -262,7 +262,7 @@ export default defineComponent({
             v-clean-tooltip="tooltip"
             class="icon icon-info icon-lg"
           />
-        </span>
+        </h3>
       </slot>
     </div>
 
@@ -334,15 +334,7 @@ export default defineComponent({
   }
 
   .label{
-    font-size: 12px !important;
+    font-size: 14px !important;
   }
 }
-.radio-group-title{
-  font-size: 12px !important;
-  margin-bottom: 0px !important;
-  display: inline-block;
-}
-.radio-group-labelBox {
-  width: 160px;
-}
 </style>

package/rancher-components/Form/TextArea/TextAreaAutoGrow.vue

@@ -108,7 +108,7 @@ export default defineComponent({
      * (unless the input is long)
      */
     style(): string {
-      return `height: ${ this.curHeight }px; overflow: ${ this.overflow };min-height:${ this.curHeight }px;`;
+      return `height: ${ this.curHeight }px; overflow: ${ this.overflow };`;
     },
 
     className(): string | unknown[] | Record<string, boolean> {
@@ -165,13 +165,13 @@ export default defineComponent({
         return;
       }
 
-      // el.style.height = '1px';
+      el.style.height = '1px';
 
       const border = parseInt(getComputedStyle(el).getPropertyValue('borderTopWidth'), 10) || 0 + parseInt(getComputedStyle(el).getPropertyValue('borderBottomWidth'), 10) || 0;
       const neu = Math.max(this.minHeight, Math.min(el.scrollHeight + border, this.maxHeight));
 
       el.style.overflowY = el.scrollHeight > neu ? 'auto' : 'hidden';
-      // el.style.height = `${ neu }px`;
+      el.style.height = `${ neu }px`;
 
       this.curHeight = neu;
     }

package/rancher-components/Form/ToggleSwitch/ToggleSwitch.vue

@@ -94,7 +94,6 @@ export default defineComponent({
     :class="{'toggle-disabled': disabled}"
   >
     <span
-      style="width: 160px;"
       class="label no-select hand"
       :class="{ active: !state}"
       @click="toggle(false)"

package/rancher-components/LabeledTooltip/LabeledTooltip.vue

@@ -109,9 +109,9 @@ export default defineComponent({
 
      .status-icon {
         position:  absolute;
-        right: 5px;
-        top: 10px;
-        z-index: 3;
+        right: 30px;
+        top: $input-padding-lg;
+        z-index: z-index(hoverOverContent);
      }
 
     @mixin tooltipColors($color) {
@@ -120,19 +120,11 @@ export default defineComponent({
         }
     }
 
-    &.null {
-
-        .status-icon {
-          top: 5px;
-          right: -20px;
-        }
-    }
-
     &.error {
         @include tooltipColors(var(--error));
 
         .status-icon {
-          top: 9px !important;
+          top: 7px;
           right: 5px;
         }
     }

package/rancher-components/RcDropdown/RcDropdown.vue

@@ -52,7 +52,7 @@ const {
 
 provideDropdownContext();
 
-// const popperContainer = ref(null);
+const popperContainer = ref(null);
 const dropdownTarget = ref(null);
 
 useClickOutside(dropdownTarget, () => showMenu(false));
@@ -71,30 +71,16 @@ const applyShow = () => {
     :triggers="[]"
     :shown="isMenuOpen"
     :auto-hide="false"
-    append-to-body
+    :container="popperContainer"
     :placement="placement"
     :distance="distance"
     @apply-show="applyShow"
-    popper-class="custom-dropdown" 
   >
     <slot name="default">
       <!--Empty slot content Trigger-->
     </slot>
 
     <template #popper>
-      <!-- <div
-        ref="dropdownTarget"
-        class="dropdownTarget"
-        tabindex="-1"
-        role="menu"
-        aria-orientation="vertical"
-        dropdown-menu-collection
-        :aria-label="ariaLabel || 'Dropdown Menu'"
-        @keydown="handleKeydown"
-        @keydown.down.prevent="setFocus('down')"
-        @keydown.up.prevent="setFocus('up')"
-        
-      > -->
       <div
         ref="dropdownTarget"
         class="dropdownTarget"
@@ -106,8 +92,6 @@ const applyShow = () => {
         @keydown="handleKeydown"
         @keydown.down.prevent="setFocus('down')"
         @keydown.up.prevent="setFocus('up')"
-        @keydown.tab="showMenu(false)"
-        @keydown.escape="returnFocus"
       >
         <slot name="dropdownCollection">
           <!--Empty slot content-->
@@ -115,13 +99,14 @@ const applyShow = () => {
       </div>
     </template>
   </v-dropdown>
-  <!-- <div
+  <div
     ref="popperContainer"
     class="popperContainer"
     @keydown.tab="showMenu(false)"
     @keydown.escape="returnFocus"
   >
-  </div> -->
+    <!--Empty container for mounting popper content-->
+  </div>
 </template>
 
 <style lang="scss" scoped>
@@ -130,8 +115,7 @@ const applyShow = () => {
     &:deep(.v-popper__popper) {
 
       .v-popper__wrapper {
-        box-shadow: 0 5px 20px var(--shadow);
-        /* box-shadow: 0px 6px 18px 0px rgba(0, 0, 0, 0.25), 0px 4px 10px 0px rgba(0, 0, 0, 0.15); */
+        box-shadow: 0px 6px 18px 0px rgba(0, 0, 0, 0.25), 0px 4px 10px 0px rgba(0, 0, 0, 0.15);
         border-radius: var(--border-radius-lg);
 
         .v-popper__arrow-container {
@@ -140,9 +124,7 @@ const applyShow = () => {
 
         .v-popper__inner {
           overflow: unset;
-          /* padding: 10px 0 10px 0; */
-          padding: 0px;
-          /* min-width: 145px; */
+          padding: 10px 0 10px 0;
         }
       }
     }
@@ -156,14 +138,4 @@ const applyShow = () => {
       outline: none;
     }
   }
-
-  .custom-dropdown{
-    .v-popper__wrapper{
-      .v-popper__inner {
-        padding: 0px;
-      }
-    }
-  }
-
 </style>
-

package/rancher-components/RcDropdown/RcDropdownItem.vue

@@ -52,8 +52,8 @@ const handleClick = (e: MouseEvent) => {
     display: flex;
     gap: 8px;
     align-items: center;
-    padding: 8px 10px;
-    min-width: 145px;
+    padding: 9px 8px;
+    margin: 0 9px;
     border-radius: 4px;
 
     &:hover {

package/rancher-components/RcDropdown/RcDropdownMenu.vue

@@ -11,8 +11,6 @@ import IconOrSvg from '@shell/components/IconOrSvg';
 withDefaults(defineProps<RcDropdownMenuComponentProps>(), {
   buttonRole: 'primary',
   buttonSize: undefined,
-  isDetail: false,
-  showIcon: false
 });
 
 const emit = defineEmits(['update:open', 'select']);
@@ -33,10 +31,7 @@ const hasOptions = (options: DropdownOption[]) => {
       :data-testid="dataTestid"
       :aria-label="buttonAriaLabel"
     >
-      <div v-if="showIcon">
-        <i class="icon icon-actions" />
-      </div>
-      <a v-else href="javascript:;">操作</a>
+      <i class="icon icon-actions" />
     </rc-dropdown-trigger>
     <template #dropdownCollection>
       <template
@@ -47,7 +42,7 @@ const hasOptions = (options: DropdownOption[]) => {
           v-if="!a.divider"
           @click="(e: MouseEvent) => emit('select', e, a)"
         >
-          <!-- <template #before>
+          <template #before>
             <IconOrSvg
               v-if="a.icon || a.svg"
               :icon="a.icon"
@@ -55,7 +50,7 @@ const hasOptions = (options: DropdownOption[]) => {
               class="icon"
               color="header"
             />
-          </template> -->
+          </template>
           {{ a.label }}
         </rc-dropdown-item>
         <rc-dropdown-separator
@@ -66,7 +61,7 @@ const hasOptions = (options: DropdownOption[]) => {
         v-if="!hasOptions(options)"
         disabled
       >
-        暂无可执行的操作。
+        No actions available
       </rc-dropdown-item>
     </template>
   </rc-dropdown>

package/rancher-components/RcDropdown/types.ts

@@ -46,5 +46,4 @@ export type RcDropdownMenuComponentProps = {
   buttonAriaLabel?: string;
   dropdownAriaLabel?: string;
   dataTestid?: string;
-  showIcon?: Boolean;
 }

package/rancher-components/StringList/StringList.vue

@@ -633,7 +633,7 @@ export default defineComponent({
 }
 
 :deep() {
-  // .labeled-input INPUT.no-label,
+  .labeled-input INPUT.no-label,
   .labeled-input INPUT:hover.no-label,
   .labeled-input INPUT:focus.no-label {
     padding: 1px 0px 0px 0px;

package/static/loading-indicator.html

@@ -15,14 +15,14 @@
   animation: initial-load-animate 1s infinite linear;
   background-color: transparent;
   box-sizing: border-box;
-  border: 5px solid #1890FF;
+  border: 5px solid #008ACF;
   border-radius: 50%;
-  border-top-color: transparent;
+  border-top-color: #00B2E2;
   display: inline-block;
   height: 80px;
   margin: 0 auto;
   width: 80px;
-}}
+}
 
 @keyframes initial-load-animate {
   0% {

package/store/i18n.js

@@ -18,7 +18,7 @@ export const state = function() {
   // const available = translationContext.keys().map(path => path.replace(/^.*\/([^\/]+)\.[^.]+$/, '$1'));
   // Using require.context() forces them to all be in the same webpack chunk name... just hardcode the list for now so zh-hans
   // gets generated as it's own chunk instead of being loaded all the time.
-  const available = ['zh-hans', DEFAULT_LOCALE];
+  const available = [DEFAULT_LOCALE, 'zh-hans'];
 
   const out = {
     default:      DEFAULT_LOCALE,
@@ -229,7 +229,7 @@ export const actions = {
     const exists = !!state.available.find((loc) => loc === selected);
 
     if ( !selected || !exists) {
-      selected = 'zh-hans';
+      selected = state.default;
     }
 
     return dispatch('switchTo', selected);

package/store/modal.ts

@@ -17,7 +17,7 @@ const state = (): ModalState => ({
   componentProps:      {},
   resources:           [],
   closeOnClickOutside: false,
-  modalWidth:          '610px',
+  modalWidth:          '600px',
   modalSticky:         false
 });
 
@@ -45,7 +45,7 @@ const mutations: MutationTree<ModalState> = {
     state.componentProps = payload.componentProps || {};
     state.resources = Array.isArray(payload.resources) ? payload.resources : (payload.resources ? [payload.resources] : []);
     state.closeOnClickOutside = payload.closeOnClickOutside ?? false;
-    state.modalWidth = payload.modalWidth || '610px';
+    state.modalWidth = payload.modalWidth || '600px';
     state.modalSticky = payload.modalSticky ?? false;
   },
 
@@ -55,7 +55,7 @@ const mutations: MutationTree<ModalState> = {
     state.componentProps = {};
     state.resources = [];
     state.closeOnClickOutside = false;
-    state.modalWidth = '610px';
+    state.modalWidth = '600px';
     state.modalSticky = false;
   }
 };