dashboard-shell-shell 1.0.1000000117 → 1.0.1000000118

package/components/form/LabeledSelect.vue

@@ -290,7 +290,7 @@ export default {
 </script>
 
 <template>
-  <div style="display: flex;">
+   <div style="display: flex;">
     <div
       :class="{ 'labeled-container': true, raised, empty, [mode]: true, 'is-lable': isLabel }"
       :style="{ border: 'none', width: selectWidth===''?'160px':selectWidth,lineHeight: '32px' }"
@@ -309,196 +309,196 @@ export default {
       </label>
     </div>
     <!-- label -->
-    <div
-      ref="select"
-      class="labeled-select"
-      :class="[
-        $attrs.class,
-        {
-          disabled: isView || disabled,
-          focused,
-          [mode]: true,
-          [status]: status,
-          taggable: $attrs.taggable,
-          taggable: $attrs.multiple,
-          hoverable: hoverTooltip,
-          'compact-input': isCompact,
-          'no-label': !hasLabel
-        }
-      ]"
-      :tabindex="isView || disabled ? -1 : 0"
-      role="listbox"
-      @click="focusSearch"
-      @keydown.enter="focusSearch"
-      @keydown.down.prevent="focusSearch"
-      @keydown.space.prevent="focusSearch"
+  <div
+    ref="select"
+    class="labeled-select"
+    :class="[
+      $attrs.class,
+      {
+        disabled: isView || disabled,
+        focused,
+        [mode]: true,
+        [status]: status,
+        taggable: $attrs.taggable,
+        taggable: $attrs.multiple,
+        hoverable: hoverTooltip,
+        'compact-input': isCompact,
+        'no-label': !hasLabel
+      }
+    ]"
+    :tabindex="isView || disabled ? -1 : 0"
+    role="listbox"
+    @click="focusSearch"
+    @keydown.enter="focusSearch"
+    @keydown.down.prevent="focusSearch"
+    @keydown.space.prevent="focusSearch"
+  >
+    <!-- <div
+      :class="{ 'labeled-container': true, raised, empty, [mode]: true }"
+      :style="{ border: 'none' }"
     >
-      <!-- <div
-        :class="{ 'labeled-container': true, raised, empty, [mode]: true }"
-        :style="{ border: 'none' }"
+      <label
+        v-if="hasLabel"
+        :id="`labeled-select-uid-${uid}`"
       >
-        <label
-          v-if="hasLabel"
-          :id="`labeled-select-uid-${uid}`"
-        >
-          <t
-            v-if="labelKey"
-            :k="labelKey"
-          />
-          <template v-else-if="label">{{ label }}</template>
-
-          <span
-            v-if="requiredField"
-            class="required"
-          >*</span>
-        </label>
-      </div> -->
-      <v-select
-        ref="select-input"
-        :aria-labelledby="hasLabel ? `labeled-select-uid-${uid}` : ''"
-        v-bind="filteredAttrs"
-        class="inline"
-        :append-to-body="appendToBody"
-        :calculate-position="positionDropdown"
-        :class="{ 'no-label': !(label || '').length}"
-        :clearable="clearable"
-        :disabled="isView || disabled || loading"
-        :get-option-key="getOptionKey"
-        :get-option-label="(opt) => getOptionLabel(opt)"
-        :label="optionLabel"
-        :options="_options"
-        :map-keydown="mappedKeys"
-        :placeholder="placeholder"
-        :reduce="(x) => reduce(x)"
-        :filterable="isFilterable"
-        :searchable="isSearchable"
-        :selectable="selectable"
-        :modelValue="value != null && !loading ? value : ''"
-        :dropdown-should-open="dropdownShouldOpen"
-        :tabindex="-1"
-        role="listitem"
-        @update:modelValue="$emit('selecting', $event); $emit('update:value', $event)"
-        @search:blur="onBlur"
-        @search:focus="onFocus"
-        @search="onSearch"
-        @open="onOpen"
-        @close="onClose"
-        @option:selecting="$emit('selecting', $event)"
-        @option:deselecting="$emit('deselecting', $event)"
-      >
-      
-        <template #option="option">
-          <template v-if="showTagPrompts">
-            <div class="only-user-opts">
-              {{ t('labeledSelect.pressEnter', {input:getOptionLabel(option.label)}) }}
-            </div>
-          </template>
-          <template v-else-if="option.kind === 'group'">
-            <div class="vs__option-kind-group">
-              <i
-                v-if="option.icon"
-                class="icon"
-                :class="{ [option.icon]: true}"
-              />
-              <b>{{ getOptionLabel(option) }}</b>
-              <div v-if="option.badge">
-                {{ option.badge }}
-              </div>
-            </div>
-          </template>
-          <!-- <template v-else-if="option.kind === 'divider'">
-            <hr role="none">
-          </template> -->
-          <template v-else-if="option.kind === 'highlighted'">
-            <div class="option-kind-highlighted">
-              {{ option.label }}
-            </div>
-          </template>
-          <div
-            v-else
-            class="vs__option-kind"
-            :class="{ 'has-icon' : hasGroupIcon}"
-            @mousedown="(e) => onClickOption(option, e)"
-          >
-            {{ getOptionLabel(option) }}
+        <t
+          v-if="labelKey"
+          :k="labelKey"
+        />
+        <template v-else-if="label">{{ label }}</template>
+
+        <span
+          v-if="requiredField"
+          class="required"
+        >*</span>
+      </label>
+    </div> -->
+    <v-select
+      ref="select-input"
+      :aria-labelledby="hasLabel ? `labeled-select-uid-${uid}` : ''"
+      v-bind="filteredAttrs"
+      class="inline"
+      :append-to-body="appendToBody"
+      :calculate-position="positionDropdown"
+      :class="{ 'no-label': !(label || '').length}"
+      :clearable="clearable"
+      :disabled="isView || disabled || loading"
+      :get-option-key="getOptionKey"
+      :get-option-label="(opt) => getOptionLabel(opt)"
+      :label="optionLabel"
+      :options="_options"
+      :map-keydown="mappedKeys"
+      :placeholder="placeholder"
+      :reduce="(x) => reduce(x)"
+      :filterable="isFilterable"
+      :searchable="isSearchable"
+      :selectable="selectable"
+      :modelValue="value != null && !loading ? value : ''"
+      :dropdown-should-open="dropdownShouldOpen"
+      :tabindex="-1"
+      role="listitem"
+      @update:modelValue="$emit('selecting', $event); $emit('update:value', $event)"
+      @search:blur="onBlur"
+      @search:focus="onFocus"
+      @search="onSearch"
+      @open="onOpen"
+      @close="onClose"
+      @option:selecting="$emit('selecting', $event)"
+      @option:deselecting="$emit('deselecting', $event)"
+    >
+    
+      <template #option="option">
+        <template v-if="showTagPrompts">
+          <div class="only-user-opts">
+            {{ t('labeledSelect.pressEnter', {input:getOptionLabel(option.label)}) }}
+          </div>
+        </template>
+        <template v-else-if="option.kind === 'group'">
+          <div class="vs__option-kind-group">
             <i
-              v-if="option.error"
-              class="icon icon-warning pull-right"
-              style="font-size: 20px;"
+              v-if="option.icon"
+              class="icon"
+              :class="{ [option.icon]: true}"
             />
+            <b>{{ getOptionLabel(option) }}</b>
+            <div v-if="option.badge">
+              {{ option.badge }}
+            </div>
           </div>
         </template>
-        <!-- Pass down templates provided by the caller -->
-        <template
-          v-for="(_, slot) of $slots"
-          :key="slot"
-          #[slot]="scope"
+        <!-- <template v-else-if="option.kind === 'divider'">
+          <hr role="none">
+        </template> -->
+        <template v-else-if="option.kind === 'highlighted'">
+          <div class="option-kind-highlighted">
+            {{ option.label }}
+          </div>
+        </template>
+        <div
+          v-else
+          class="vs__option-kind"
+          :class="{ 'has-icon' : hasGroupIcon}"
+          @mousedown="(e) => onClickOption(option, e)"
         >
-          <slot
-            :name="slot"
-            v-bind="scope"
+          {{ getOptionLabel(option) }}
+          <i
+            v-if="option.error"
+            class="icon icon-warning pull-right"
+            style="font-size: 20px;"
           />
-        </template>
+        </div>
+      </template>
+      <!-- Pass down templates provided by the caller -->
+      <template
+        v-for="(_, slot) of $slots"
+        :key="slot"
+        #[slot]="scope"
+      >
+        <slot
+          :name="slot"
+          v-bind="scope"
+        />
+      </template>
 
-        <template #list-footer>
-          <div
-            v-if="canPaginate && totalResults && pages > 1"
-            class="pagination-slot"
-          >
-            <div class="load-more">
-              <i
-                v-if="paginating"
-                class="icon icon-spinner icon-spin"
-              />
-              <div v-else>
-                <a
-                  v-if="canLoadMore"
-                  @click="loadMore"
-                > {{ t('labelSelect.pagination.more') }}</a>
-              </div>
+      <template #list-footer>
+        <div
+          v-if="canPaginate && totalResults && pages > 1"
+          class="pagination-slot"
+        >
+          <div class="load-more">
+            <i
+              v-if="paginating"
+              class="icon icon-spinner icon-spin"
+            />
+            <div v-else>
+              <a
+                v-if="canLoadMore"
+                @click="loadMore"
+              > {{ t('labelSelect.pagination.more') }}</a>
             </div>
+          </div>
 
-            <div class="count">
-              {{ optionCounts }}
-            </div>
+          <div class="count">
+            {{ optionCounts }}
           </div>
-        </template>
-        <template #no-options="{ search }">
-          <div class="no-options-slot">
-            <template v-if="showTagPrompts">
-              <span v-if="!searching">{{ t('labeledSelect.startTyping') }}</span>
-            </template>
-            <div
-              v-else-if="paginating"
-              class="paginating"
-            >
-              <i class="icon icon-spinner icon-spin" />
-            </div>
-            <template v-else-if="search">
-              {{ t('labelSelect.noOptions.noMatch') }}
-            </template>
-            <template v-else>
-              {{ t(noOptionsLabelKey) }}
-            </template>
+        </div>
+      </template>
+      <template #no-options="{ search }">
+        <div class="no-options-slot">
+          <template v-if="showTagPrompts">
+            <span v-if="!searching">{{ t('labeledSelect.startTyping') }}</span>
+          </template>
+          <div
+            v-else-if="paginating"
+            class="paginating"
+          >
+            <i class="icon icon-spinner icon-spin" />
           </div>
-        </template>
-      </v-select>
-      <i
-        v-if="loading"
-        class="icon icon-spinner icon-spin icon-lg"
-      />
-      <LabeledTooltip
-        v-if="tooltip && !focused"
-        :hover="hoverTooltip"
-        :value="tooltip"
-        :status="status"
-      />
-      <LabeledTooltip
-        v-if="!!validationMessage"
-        :hover="hoverTooltip"
-        :value="validationMessage"
-      />
-    </div>
+          <template v-else-if="search">
+            {{ t('labelSelect.noOptions.noMatch') }}
+          </template>
+          <template v-else>
+            {{ t(noOptionsLabelKey) }}
+          </template>
+        </div>
+      </template>
+    </v-select>
+    <i
+      v-if="loading"
+      class="icon icon-spinner icon-spin icon-lg"
+    />
+    <LabeledTooltip
+      v-if="tooltip && !focused"
+      :hover="hoverTooltip"
+      :value="tooltip"
+      :status="status"
+    />
+    <LabeledTooltip
+      v-if="!!validationMessage"
+      :hover="hoverTooltip"
+      :value="validationMessage"
+    />
+  </div>
   </div>
 </template>
 

package/components/form/Members/ClusterPermissionsEditor.vue

@@ -232,10 +232,11 @@ export default {
     v-else
     class="cluster-permissions-editor"
   >
-    <div class="row mt-10 mb-20">
+    <div class="row mt-10">
       <div class="col span-12">
         <SelectPrincipal
           v-focus
+          class="mb-20"
           :mode="mode"
           :retain-selection="true"
           data-testid="cluster-member-select"

package/components/form/Members/MembershipEditor.vue

@@ -170,7 +170,7 @@ export default {
   >
     <template #column-headers>
       <div class="box mb-0">
-        <div class="column-headers row" style="width: 95%;">
+        <div class="column-headers row">
           <div class="col span-6">
             <label class="text-label">{{ t('membershipEditor.user') }}</label>
           </div>

package/components/form/NameNsDescription.vue

@@ -356,7 +356,7 @@ export default {
 
     colSpan() {
       if (!this.horizontal) {
-        return `span-5`;
+        return `span-6`;
       }
       // Name and namespace take up two columns.
       // let cols = (this.nameNsHidden ? 0 : 2) + (this.descriptionHidden ? 0 : 1) + this.extraColumns.length;
@@ -430,17 +430,12 @@ export default {
 
 <template>
   <div class="row">
-
-    <!-- 命名空间创建输入框 -->
     <div
       v-if="namespaced && !nameNsHidden && createNamespace"
       :data-testid="componentTestid + '-namespace-create'"
-      class="col span-5"
-      :class=" isDialog? 'namespace-item-row mb-20': 'col span-5'"
-      style="display: flex;"
+      class="col span-6"
+      :class=" isDialog? 'namespace-item-row mb-20': 'col span-6'"
     >
-
-      <!-- 输入命名空间名称 -->
       <LabeledInput
         ref="namespaceInput"
         v-model:value="namespace"
@@ -452,8 +447,6 @@ export default {
         :required="nameRequired"
         :rules="rules.namespace"
       />
-
-      <!-- 取消创建命名空间按钮 -->
       <button
         aria="Cancel create"
         @click="cancelCreateNamespace"
@@ -464,12 +457,10 @@ export default {
         />
       </button>
     </div>
-
-    <!-- 命名空间选择下拉框 -->
     <div
       v-if="namespaced && !nameNsHidden && !createNamespace"
       :data-testid="componentTestid + '-namespace'"
-      :class=" isDialog? 'namespace-item-row mb-20': 'col span-5'"
+      :class=" isDialog? 'namespace-item-row mb-20': 'col span-6'"
     >
       <LabeledSelect
         v-show="!createNamespace"
@@ -488,7 +479,6 @@ export default {
       />
     </div>
 
-    <!-- 名称输入框 -->
     <div
       v-if="!nameNsHidden"
       :data-testid="componentTestid + '-name'"
@@ -509,15 +499,12 @@ export default {
       />
     </div>
 
-    <!-- 自定义插槽，可插入额外内容 -->
     <slot name="customize" />
     <!-- <div
       v-show="!descriptionHidden"
       :data-testid="componentTestid + '-description'"
-      :class="['col', extraColumns.length > 0 ? 'span-3' : 'span-5']"
+      :class="['col', extraColumns.length > 0 ? 'span-3' : 'span-6']"
     > -->
-
-    <!-- 额外的动态列 -->
     <div
       v-for="(slot, i) in extraColumns"
       :key="i"
@@ -525,8 +512,6 @@ export default {
     >
       <slot :name="slot" />
     </div>
-
-    <!-- 描述输入框 -->
     <div
       v-show="!descriptionHidden"
       :data-testid="componentTestid + '-description'"
@@ -544,15 +529,12 @@ export default {
       />
     </div>
 
-    <!-- 底部插槽 -->
     <div
       v-if="$slots.bottom"
       style="width: 100%;"
     >
       <slot name="bottom" />
     </div>
-
-    <!-- 间隔占位符 -->
     <div
       v-if="showSpacer"
       class="spacer"
@@ -563,8 +545,13 @@ export default {
 <style lang="scss" scoped>
 button {
   all: unset;
+  height: 0;
+  position: relative;
+  top: -35px;
+  float: right;
+  margin-right: 7px;
+
   cursor: pointer;
-  margin-left: 10px;
 
   .align-value {
     padding-top: 7px;

package/components/form/Password.vue

@@ -153,13 +153,12 @@ export default {
     </LabeledInput>
     <div
       v-if="isRandom"
-      class="genPassword"
+      class="mt-10 genPassword"
     >
       <a
         href="#"
         @click.prevent.stop="generatePassword"
-        style="height: 32px;display: flex;align-items: center;"
-      ><i class="icon icon-refresh mr-5 pl-5" /> {{ t('changePassword.newGeneratedPassword') }}</a>
+      ><i class="icon icon-refresh" /> {{ t('changePassword.newGeneratedPassword') }}</a>
     </div>
   </div>
 </template>
@@ -171,9 +170,6 @@ export default {
 
     .labeled-input {
       .addon {
-        position: absolute;
-        top: 6px;
-        right: 6px;
         /* display: flex;
         align-items: center;
         justify-content: center;

package/components/form/ResourceQuota/Namespace.vue

@@ -78,7 +78,7 @@ export default {
       <div style="width: 400px;">
         <label>{{ t('resourceQuota.headers.projectResourceAvailability') }}</label>
       </div>
-      <div style="width: 500px;">
+      <div style="width: 400px;">
         <label>{{ t('resourceQuota.headers.limit') }}</label>
       </div>
     </div>

package/components/form/ResourceQuota/NamespaceRow.vue

@@ -190,18 +190,16 @@ export default {
         :color-stops="{'100': '--primary'}"
       />
     </div>
-    <div style="width: 500px;">
-      <UnitInput
-        :value="value.limit[type]"
-        :mode="mode"
-        :placeholder="typeOption.placeholder"
-        :increment="typeOption.increment"
-        :input-exponent="typeOption.inputExponent"
-        :base-unit="typeOption.baseUnit"
-        :output-modifier="true"
-        @update:value="update"
-      />
-    </div>
+    <UnitInput
+      :value="value.limit[type]"
+      :mode="mode"
+      :placeholder="typeOption.placeholder"
+      :increment="typeOption.increment"
+      :input-exponent="typeOption.inputExponent"
+      :base-unit="typeOption.baseUnit"
+      :output-modifier="true"
+      @update:value="update"
+    />
   </div>
 </template>
 
@@ -210,7 +208,6 @@ export default {
     align-self: center;
   }
   .rowNew {
-    margin-bottom: 10px;
     display: flex;
     justify-content: space-between;
 

package/components/form/ResourceQuota/ProjectRow.vue

@@ -70,6 +70,7 @@ export default {
 <template>
   <div
     v-if="typeOption"
+    style="justify-content: right;"
     class="rowNew"
   >
     <Select

package/components/form/Select.vue

@@ -372,8 +372,8 @@ export default {
     }
 
     :deep() .labeled-tooltip.error .status-icon {
-      top: 7px !important;
-      right: 2px !important;
+      top: 7px;
+      right: 2px;
     }
 
     :deep() .vs__selected-options {

package/components/nav/Favorite.vue

@@ -44,13 +44,9 @@ export default {
 
 <style lang="scss" scoped>
   .favorite {
-    display: flex;
-    align-items: center;
     position: relative;
     cursor: pointer;
-    font-size: 22px;
-    margin-top: 4px;
-    margin-left: 10px;
+    font-size: 20px;
     transform: ease-in-out-all 1s;
 
     &.icon-star-open {