dashboard-shell-shell 0.0.1000000000001130 → 0.0.1000000000001133

package/assets/styles/base/_mixins.scss

@@ -159,5 +159,5 @@
 @mixin focus-outline {
   // Focus for form like elements (not to be confused with basic :focus style)
   // we need to use !important because it needs to superseed other classes that might impact outlines
-  // outline: 2px solid var(--primary-keyboard-focus);
+  outline: 2px solid var(--primary-keyboard-focus);
 }

package/assets/styles/global/_button.scss

@@ -1,4 +1,4 @@
-$btn-padding: 0 10px;
+$btn-padding: 0 10px 0 10px;
 $btn-sm-padding: 0 7px 0 7px;
 $btn-height: 32px;
 $btn-sm-height: 32px;
@@ -20,14 +20,13 @@ button,
   -ms-user-select: none;
   user-select: none;
   border: 0;
-  padding: $btn-padding;
+  // padding: $btn-padding;
   border-radius: var(--border-radius);
-  // color: var(--lightest);
+  color: var(--lightest);
   line-height: $btn-height !important;
   height: $btn-height !important;
   min-width: 100px;
   justify-content: center;
-  
 
   > .icon:not(:only-child) {
     margin-right: 6px;
@@ -35,7 +34,7 @@ button,
 
   &:hover {
     text-decoration: none;
-    // color: var(--lightest);
+    color: var(--lightest);
   }
 
   &.bg-transparent {
@@ -43,10 +42,6 @@ button,
   }
 }
 
-.bg-primary {
-  color: var(--lightest);
-}
-
 //icon button
 .icon-btn {
   padding: 0;
@@ -68,7 +63,7 @@ button,
   padding: $btn-sm-padding;
   min-height: $btn-sm-height;
   line-height: 32px;
-  min-width: 100px;
+  width: 100px;
 }
 
 //btn roles
@@ -99,11 +94,10 @@ button,
   // border: solid 1px var(--primary);
   border: solid 1px #d9d9d9;
   line-height: $btn-height - 2px;
-  min-width: 100px;
+  width: 100px;
 
   &:hover, &._hover {
-    // color: var(--lightest) !important;
-    color: var(--input-label) !important;
+    color: var(--lightest) !important;
     box-shadow: 0 4px 6px 0 rgba(0,0,0,.2)!important;
   }
 
@@ -111,8 +105,7 @@ button,
     background: transparent;
     box-shadow: 0 4px 6px 0 rgba(0,0,0,.2)!important;
     // background-color: var(--primary-hover-bg);
-    // color: var(--lightest) !important;
-    color: var(--input-label) !important;
+    color: var(--lightest) !important;
     // color: var(--primary-text) !important;
   }
 
@@ -169,8 +162,8 @@ button,
 }
 
 .role-multi-action {
-  //  background: var(--accent-btn);
-  //  border: solid thin var(--primary);
+   // background: var(--accent-btn);
+   border: solid thin var(--primary);
    color: var(--primary) !important;
    border-radius: 2px;
    min-width: 32px;

package/assets/styles/global/_form.scss

@@ -20,11 +20,11 @@ TEXTAREA,
   box-sizing: border-box;
   width: 100%;
   // padding: 4px 11px;
+  // background-color: var(--input-bg);
   // border-radius: var(--border-radius);
+  // border: solid var(--border-width) var(--input-border);
   
   color: var(--input-text);
-  background-color: var(--input-bg);
-  border: solid var(--border-width) var(--input-border);
 
 
   @include input-status-color;

package/assets/styles/global/_labeled-input.scss

@@ -10,7 +10,7 @@
 
   &.compact-input {
     min-height: $unlabeled-input-height;
-    // padding: 0 10px;
+    padding: 0 10px;
 
     INPUT.no-label {
       line-height: $input-line-height;
@@ -74,7 +74,7 @@
     padding: 0 0 0 0;
     // line-height: calc(#{$input-line-height} + 1px);
     line-height: calc(29px + 1px);
-    // border: solid var(--border-width) var(--input-border);
+    border: solid var(--border-width) var(--input-border);
     padding: 0px 11px;
     box-sizing: border-box;
     border-radius: 2px;
@@ -123,10 +123,7 @@
       font-weight: normal;
       line-height: 1;
       text-align: center;
-      position: absolute;
-      top: 5px;
-      right: 5px;
-      // background-color: #fff;
+      background-color: #fff;
     }
   }
 

package/assets/styles/global/_select.scss

@@ -2,7 +2,9 @@
   cursor: text;
   padding: 0;
   width: 100%;
-
+ &:hover{
+  box-shadow: 0 4px 6px 0 var(--input-border-box-shadow);
+ }
   .selected {
     padding-top: $input-padding-lg;
   }
@@ -21,7 +23,7 @@
 .labeled-select,
 .unlabeled-select {
   min-width: 75px;
-  min-height: 32px;
+  height: 32px;
   width: $input-width;
 
   .required {
@@ -104,8 +106,7 @@
       width: unset !important;
 
       &:not(:only-child) {
-        margin-bottom: 2px;
-        margin-top: 2px;
+        margin-bottom: 3px;
       }
     }
   }
@@ -196,6 +197,6 @@
   }
 
   .labeled-tooltip .status-icon {
-    // top: $input-padding-sm;
+    top: $input-padding-sm;
   }
 }

package/assets/styles/global/_tooltip.scss

@@ -126,7 +126,6 @@
   border-radius: var(--border-radius-lg);
 
   .v-popper__inner {
-    border-radius: 4px;
     background: $color;
     color: var(--popover-text);
     padding: 10px;

package/assets/styles/themes/_dark.scss

@@ -38,8 +38,6 @@
 
   --slate: #{$slate};
 
-  --lightest                   : #{rgba($lightest, 1)};
-
   --default                    : #{$dark};
   --default-text               : #{$light};
   --default-hover-bg           : #{darken($dark, 10%)};

package/assets/styles/themes/_light.scss

@@ -6,7 +6,7 @@ $darkest   : #333;
 $darker    : #333;
 
 //light disabled
-$dark      : #ffffff;
+$dark      : #B6B6C2;
 
 //light border and buttons
 $medium    : #d7d7d7;
@@ -30,7 +30,7 @@ $secondary       : $darker;
 $link            : #1890FF;
 
 // Status colors
-$success         : #1890FF;
+$success         : #5D995D;
 $warning         : #DAC342;
 $error           : #F64747;
 // $error           : #A30014;
@@ -112,8 +112,6 @@ BODY, .theme-light {
       }
   }
 
-  --lightest                   : #{rgba($lightest, 1)};
-
   --default                    : #{$light};
   --default-text               : #{contrast-color($light)};
   --default-hover-bg           : #{darken($light, 10%)};
@@ -339,7 +337,6 @@ BODY, .theme-light {
   --nav-hover                  : #{$medium};
   --nav-hover-color            :#1890FF;
   --nav-expander-hover         : #{darken($medium, 10%)};
-  --nav-icon-badge-bg          : #{$dark};
   --nav-border                 : #{$medium};
   --nav-border-size            : 1px;
 

package/assets/styles/vendor/vue-select.scss

@@ -321,7 +321,6 @@ $transition-duration: 150ms;
     }
     .vs__selected {
       color: var(--input-text);
-      background-color: rgba(0, 0, 0, 0);
     }
   }
 
@@ -331,7 +330,7 @@ $transition-duration: 150ms;
   }
   .vs__dropdown-toggle {
     background-color: var(--input-bg);
-    border: none !important;
+    border: none;
     padding: none;
     border-radius: var(--border-radius);
     border: 1px solid var(--dropdown-border);

package/components/ActionDropdown.vue

@@ -212,7 +212,6 @@ export default {
       border: 1px solid var(--dropdown-border);
       padding: 0px;
       text-align: left;
-      border-radius: 4px;
 
       LI {
         padding: 10px;

package/components/ActionMenuShell.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted } from 'vue';
+import { computed } from 'vue';
 import { useStore } from 'vuex';
 import { useRoute } from 'vue-router';
 
@@ -83,7 +83,6 @@ const execute = (action: any, event: MouseEvent, args?: any) => {
 const options = computed(() => store.getters['action-menu/optionsArray']);
 
 const menuOptions = () => {
-
   if (props.customActions && props.customActions.length > 0) {
     return props.customActions;
   }
@@ -91,9 +90,6 @@ const menuOptions = () => {
   return options.value;
 };
 
-onMounted(() => {
-})
-
 </script>
 
 <template>
@@ -106,6 +102,5 @@ onMounted(() => {
     :data-testid="dataTestid"
     @update:open="openChanged"
     @select="(e: MouseEvent, option: object) => execute(option, e)"
-    :showIcon="false"
   />
 </template>

package/components/BrandImage.vue

@@ -79,45 +79,37 @@ export default {
     },
 
     pathToBrandedImage() {
-
       if (this.fileName === 'rancher-logo.svg' || this.supportCustomLogo) {
         if (this.theme === 'dark' && this.uiLogoDark) {
-
           return this.uiLogoDark;
         }
 
         if (this.uiLogoLight) {
-
           return this.uiLogoLight;
         }
       }
 
       if (this.fileName === 'banner.svg') {
         if (this.theme === 'dark' && this.uiBannerDark) {
-
           return this.uiBannerDark;
         }
 
         if (this.uiBannerLight) {
-
           return this.uiBannerLight;
         }
       }
 
       if (this.fileName === 'login-landscape.svg') {
         if (this.theme === 'dark' && this.uiLoginBackgroundDark) {
-
           return this.uiLoginBackgroundDark;
         }
 
         if (this.uiLoginBackgroundLight) {
-
           return this.uiLoginBackgroundLight;
         }
       }
 
       if (!this.brand) {
-
         return this.defaultPathToBrandedImage;
       } else {
         if (this.theme === 'dark' || this.dark) {

package/components/ClusterIconMenu.vue

@@ -159,7 +159,7 @@ export default {
     display: flex;
     align-items: center;
     justify-content: center;
-    color: var(--primary);
+    color: var(--default-active-text);
     font-weight: bold;
     background: var(--nav-icon-badge-bg);
     border: 1px solid var(--border);

package/components/CodeMirror.vue

@@ -369,7 +369,6 @@ export default {
       }
 
       .CodeMirror-lines {
-        background-color: var(--input-bg);
         color: var(--input-text);
         padding: 0;
 

package/components/CruResource.vue

@@ -887,7 +887,6 @@ form.create-resource-container .cru {
   }
 }
 .cru {
-  height: 100%;
   display: flex;
   flex-direction: column;
   flex-grow: 1;

package/components/CruResourceFooter.vue

@@ -120,7 +120,7 @@ export default {
   z-index: z-index('cruFooter');
 
   .btn {
-    margin-left: 10px;
+    margin-right: 10px;
   }
 }
 

package/components/ExplorerProjectsNamespaces.vue

@@ -441,7 +441,6 @@ export default {
         </router-link>
       </template>
     </Masthead>
-    <!-- harvester------------------------------------------------------3 -->
     <!-- Extensions area -->
     <ExtensionPanel
       :resource="{}"

package/components/IndentedPanel.vue

@@ -4,17 +4,23 @@ export default {};
 
 <template>
   <div
-    class="indented-panels"
+    class="indented-panel"
   >
     <slot />
   </div>
 </template>
 
 <style lang="scss">
-  .indented-panels {
+  .indented-panel {
     height: 100%;
-    width: 100%;
-    padding: 0 20px;
+    width: 90%;
+    margin-left: 5%;
   }
 
+  @media only screen and (max-width: map-get($breakpoints, '--viewport-9')) {
+    .indented-panel {
+      margin: 0 20px;
+      width: initial;
+    }
+  }
 </style>

package/components/PromptRemove.vue

@@ -460,8 +460,8 @@ export default {
       box-shadow: none;
     }
     #confirm {
-      width: 100%;
-      // margin-left: 3px;
+      width: 90%;
+      margin-left: 3px;
     }
 
     .actions {

package/components/ResourceDetail/Masthead.vue

@@ -469,27 +469,20 @@ export default {
 </script>
 
 <template>
-
-  <!-- 顶部区域的容器 -->
   <div class="masthead">
     <div class="title">
-
-      <!-- 面包屑导航（创建 API 密钥时不显示） -->
+      <!-- 创建api密钥不需要面包屑 -->
       <div
         v-if="!(parentRouteOverride === 'account' && resource=== 'token')"
         class="excram-list"
       >
-
-        <!-- 遍历 demoDisplay 生成面包屑路径 -->
         <span
           v-for="(item,index) in demoDisplay"
           :key="index"
         >
-          <span v-if="item">{{ item }}</span>
-          <span v-if="item">/</span>
+          <span>{{ item }}</span>
+          <span>/</span>
         </span>
-
-        <!-- 最后一个面包屑显示当前操作（查看/编辑/创建）+ 父资源名称 -->
         <span class="excram-last-name">
           {{ (realMode === 'view'? '查看': realMode === 'edit' ? '编辑':'创建') + parent.displayName }}
         </span>

package/components/ResourceDetail/index.vue

@@ -457,14 +457,8 @@ export default {
 </script>
 
 <template>
-
-  <!-- 如果数据还在加载中，或者资源未找到，则显示 Loading 组件 -->
   <Loading v-if="$fetchState.pending || notFound" />
-
-  <!-- 数据加载完成且资源存在时 -->
-  <div style="padding: 20px 0 20px 20px;height: 100%;" v-else>
-
-    <!-- 顶部 Masthead 区域 -->
+  <div v-else>
     <Masthead
       v-if="showMasthead"
       :resource="resourceType"
@@ -475,28 +469,20 @@ export default {
       :has-graph="hasGraph"
       :has-detail="hasCustomDetail"
       :has-edit="hasCustomEdit"
-      :can-view-yaml="canViewYaml"
       :resource-subtype="resourceSubtype"
       :parent-route-override="parentRouteOverride"
       :store-override="storeOverride"
     >
-
-      <!-- 详情顶部信息，仅在查看模式且是详情页面时显示 -->
       <!-- <DetailTop
         v-if="isView && isDetail"
         :value="liveModel"
       /> -->
     </Masthead>
-
-
-    <!-- 错误信息显示区域 -->
     <div
       v-if="hasErrors"
       id="cru-errors"
       class="cru__errors"
     >
-
-      <!-- 循环渲染错误 Banner -->
       <Banner
         v-for="(err, i) in errors"
         :key="i"
@@ -509,14 +495,12 @@ export default {
       />
     </div>
 
-    <!-- 力导向图模式 -->
     <ForceDirectedTreeChart
       v-if="isGraph && canViewChart"
       :data="chartData"
       :fdc-config="getGraphConfig"
     />
 
-    <!-- YAML 查看/编辑模式 -->
     <ResourceYaml
       v-else-if="isYaml"
       ref="resourceyaml"
@@ -530,7 +514,6 @@ export default {
       @error="e=>errors.push(e)"
     />
 
-    <!-- 动态组件渲染，根据 showComponent 动态选择组件 -->
     <component
       :is="showComponent"
       v-else
@@ -549,8 +532,6 @@ export default {
       @set-subtype="setSubtype"
     />
 
-
-    <!-- 快捷键按钮（隐藏） -->
     <button
       v-if="isView"
       v-shortkey.once="['shift','d']"

package/components/ResourceList/Masthead.vue

@@ -191,7 +191,6 @@ export default {
 </script>
 
 <template>
-  <!-- 顶部 header，带有子标题（subheader）样式类 -->
   <header class="with-subheader">
     <!-- <slot name="typeDescription">
       <TypeDescription :resource="resource" />
@@ -266,7 +265,6 @@ export default {
 </template>
 
 <style lang="scss" scoped>
-
   .title {
     /* align-items: center;
     display: flex; */
@@ -303,7 +301,7 @@ export default {
   }
   .masthod-title-description{
     font-family: 'Microsoft YaHei';
-    margin-top: 20px;
+    margin: 20px 0px;
   }
   .actions-container{
     /* display: flex; */

package/components/ResourceList/ResourceLoadingIndicator.vue

@@ -77,7 +77,7 @@ export default {
 <template>
   <div
     v-if="count && !haveAll"
-    class="resource-loading-indicator"
+    class="ml-10 resource-loading-indicator"
   >
     <div class="inner">
       <div class="resource-loader">
@@ -118,12 +118,10 @@ export default {
     .resource-loader {
       padding: 1px 10px;
       width: max-content;
-      height: 20px;
 
       .rl-fg, .rl-bg {
-        display: flex;
         align-content: center;
-        font-size: 12px;
+        display: flex;
 
         > i {
           font-size: 18px;
@@ -131,7 +129,6 @@ export default {
         }
 
         > span {
-          margin-top: 2px;
           margin-left: 5px;
         }
       }

package/components/ResourceTable.vue

@@ -4,7 +4,6 @@ import { get } from '@shell/utils/object';
 import { mapPref, GROUP_RESOURCES } from '@shell/store/prefs';
 import ButtonGroup from '@shell/components/ButtonGroup';
 import SortableTable from '@shell/components/SortableTable';
-import MastheadBtn from '@shell/components/ResourceList/Masthead-btn.vue';
 import { NAMESPACE, AGE } from '@shell/config/table-headers';
 import { findBy } from '@shell/utils/array';
 import { ExtensionPoint, TableColumnLocation } from '@shell/core/types';
@@ -44,7 +43,7 @@ export default {
 
   emits: ['clickedActionButton'],
 
-  components: { ButtonGroup, SortableTable, MastheadBtn },
+  components: { ButtonGroup, SortableTable },
 
   props: {
     schema: {
@@ -213,49 +212,6 @@ export default {
       type:    String,
       default: '名称'
     },
-
-    resource: {
-      type:     String,
-      required: true,
-    },
-
-    typeDisplay: {
-      type:    String,
-      default: null,
-    },
-    isCreatable: {
-      type:    Boolean,
-      default: null,
-    },
-    isYamlCreatable: {
-      type:    Boolean,
-      default: null,
-    },
-    createLocation: {
-      type:    Object,
-      default: null,
-    },
-    yamlCreateLocation: {
-      type:    Object,
-      default: null,
-    },
-    createButtonLabel: {
-      type:    String,
-      default: null
-    },
-    /**
-     * Inherited global identifier prefix for tests
-     * Define a term based on the parent component to avoid conflicts on multiple components
-     */
-    componentTestid: {
-      type:    String,
-      default: 'masthead'
-    },
-
-    mainButtonVisible: {
-      type:    Boolean,
-      default: false
-    },
   },
 
   data() {
@@ -685,32 +641,6 @@ export default {
     @group-value-change="group = $event"
     @enter="handleEnterKeyPress"
   >
-
-    <template #search-main-button>
-      <MastheadBtn
-        v-if="mainButtonVisible"
-        :schema="schema"
-        :resource="resource"
-        :create-button-label="createButtonLabel"
-        :yaml-create-button-label="yamlCreateLocation"
-        :create-location="createLocation"
-        :is-yaml-creatable="isYamlCreatable"
-        :is-creatable="isCreatable"
-        :type-display="typeDisplay"
-        :component-testid="componentTestid"
-      >
-      
-        <template #extraActions>
-          <slot name="extraActions" />
-        </template>
-
-        <template #createButton>
-          <slot name="createButton" />
-        </template>
-
-      </ MastheadBtn>
-    </template>
-
     <template
       v-if="showGrouping && _groupOptions.length > 1"
       #header-middle