perf: form help tip style

public/theme/element-extra.css

@@ -317,11 +317,16 @@ td .el-button.el-button--mini {
 
 .el-tooltip__popper.is-light {
   background: #FFF;
+  max-width: 500px;
   border: 1px solid #e7eaec;
+  box-shadow: 0 1.6px 3.6px 0 rgba(0, 0, 0, .132), 0 .3px .9px 0 rgba(0, 0, 0, .108);
+  line-height: 1.5;
+  padding: 10px;
 }
 
 .el-tooltip__popper.is-light .popper__arrow {
-  border-bottom-color: #e7eaec !important;
+  border-bottom-color: #c2d1e1 !important;
+  border-top-color: #c2d1e1 !important;
 }
 
 .el-dialog__headerbtn .el-dialog__close {

src/components/Form/AutoDataForm/utils.js

@@ -160,6 +160,18 @@ export class FormFieldGenerator {
     return field
   }
 
+  afterGenerateField(field) {
+    field.label = toSentenceCase(field.label)
+    if (field.helpText) {
+      field.helpText = toSentenceCase(field.helpText)
+    }
+    if ((!field.helpTip && field.helpText && field.helpTextAsTip) || field.component === Switcher) {
+      field.helpTip = field.helpText
+      field.helpText = ''
+    }
+    return field
+  }
+
   generateField(name, fieldsMeta, remoteFieldsMeta) {
     let field = { id: name, prop: name, el: {}, attrs: {}, rules: [] }
     const remoteFieldMeta = remoteFieldsMeta[name] || {}
@@ -174,11 +186,8 @@ export class FormFieldGenerator {
     field = Object.assign(field, fieldMeta)
     field.el = el
     field.rules = rules
-    field.label = toSentenceCase(field.label)
-    if (field.helpText) {
-      field.helpText = toSentenceCase(field.helpText)
-    }
     field = this.setPlaceholder(field, remoteFieldMeta)
+    field = this.afterGenerateField(field)
     _.set(field, 'attrs.error', '')
     Vue.$log.debug('Generate field: ', name, field)
     return field

src/components/Form/DataForm/components/el-form-renderer/components/render-form-item.vue

@@ -8,11 +8,11 @@
     v-bind="data.attrs"
   >
     <template v-if="data.label" #label>
-      <span>{{ data.label }}</span>
+      <el-tooltip v-if="data.helpTip" effect="light" placement="top" popper-class="help-tips">
-      <el-tooltip v-if="data.helpTips" effect="light" placement="top" popper-class="help-tips">
+        <div slot="content" v-html="data.helpTip" />
-        <div slot="content" v-html="data.helpTips" />
+        <i class="el-icon-warning-outline help-tip-icon" />
-        <i class="fa fa-question-circle-o" />
       </el-tooltip>
+      <span>{{ data.label }}</span>
     </template>
     <template v-if="readonly && hasReadonlyContent">
       <div
@@ -282,3 +282,12 @@ export default {
   }
 }
 </script>
+<style lang='scss'>
+.help-tip-icon {
+  font-weight: bold;
+
+  &:hover {
+    cursor: pointer;
+  }
+}
+</style>

src/components/Table/AutoDataTable/index.vue

@@ -187,16 +187,16 @@ export default {
       // this.$log.debug('Field: ', type, col.prop, col)
       return col
     },
-    addHelpTipsIfNeed(col) {
+    addHelpTipIfNeed(col) {
-      const helpTips = col.helpTips
+      const helpTip = col.helpTip
-      if (!helpTips) {
+      if (!helpTip) {
         return col
       }
       col.renderHeader = (h, { column, $index }) => {
         return (
           <span>{column.label}
             <el-tooltip placement='bottom' effect='light' popperClass='help-tips'>
-              <div slot='content' domPropsInnerHTML={helpTips}/>
+              <div slot='content' domPropsInnerHTML={helpTip}/>
               <el-button style='padding: 0'>
                 <i class='fa fa-info-circle'/>
               </el-button>
@@ -282,7 +282,7 @@ export default {
       col = this.generateColumnByName(name, col)
       col = this.setDefaultFormatterIfNeed(col)
       col = Object.assign(col, customMeta)
-      col = this.addHelpTipsIfNeed(col)
+      col = this.addHelpTipIfNeed(col)
       col = this.addFilterIfNeed(col)
       col = this.addOrderingIfNeed(col)
       col = this.updateLabelIfNeed(col)

src/views/accounts/AccountBackup/AccountBackupCreateUpdate.vue

@@ -18,8 +18,7 @@ export default {
     return {
       url: '/api/v1/accounts/account-backup-plans/',
       fields: [
-        [this.$t('Basic'), ['name']],
+        [this.$t('Basic'), ['name', 'types']],
-        [this.$t('Types'), ['types']],
         [this.$t('Backup'),
           [
             'backup_type',

src/views/accounts/AccountTemplate/const.js

@@ -53,7 +53,8 @@ export const templateFieldsMeta = (vm) => {
     secret_strategy: {
       hidden: (formValue) => {
         return !canRandomSecretTypes.includes(formValue.secret_type)
-      }
+      },
+      helpTextAsTip: true
     },
     secret: {
       label: vm.$t('Password'),

src/views/assets/Cloud/Strategy/StrategyCreateUpdate.vue

@@ -27,7 +27,7 @@ export default {
         },
         rule_relation: {
           label: this.$t('RuleRelation'),
-          helpTips: this.$t('RuleRelationHelpTips')
+          helpTip: this.$t('RuleRelationhelpTip')
         },
         strategy_rules: {
           component: RuleInput

src/views/assets/Cloud/SyncInstanceTask/SyncInstanceTaskCreateUpdate.vue

@@ -56,17 +56,17 @@ export default {
         },
         hostname_strategy: {
           rules: [rules.RequiredChange],
-          helpTips: this.$t('HostnameStrategy')
+          helpTip: this.$t('HostnameStrategy')
         },
         is_always_update: {
           type: 'switch',
           label: this.$t('IsAlwaysUpdate'),
-          helpTips: this.$t('IsAlwaysUpdateHelpTips')
+          helpTip: this.$t('IsAlwaysUpdateHelpTip')
         },
         fully_synchronous: {
           type: 'switch',
           label: this.$t('FullySynchronous'),
-          helpTips: this.$t('FullySynchronousHelpTips')
+          helpTip: this.$t('FullySynchronousHelpTip')
         },
         regions: {
           component: Select2,
@@ -105,7 +105,7 @@ export default {
         strategy: {
           label: this.$t('Strategy'),
           component: SyncInstanceTaskStrategy,
-          helpTips: this.$t('StrategyHelpTips')
+          helpTip: this.$t('StrategyHelpTip')
         }
       },
       updateSuccessNextRoute: { name: 'CloudCenter' },

src/views/assets/Cloud/SyncInstanceTask/components/SyncInstanceTaskStrategy/AttrDialog.vue

@@ -45,7 +45,7 @@ export default {
       fieldsMeta: {
         rule_relation: {
           label: this.$t('RuleRelation'),
-          helpTips: this.$t('RuleRelationHelpTips')
+          helpTip: this.$t('RuleRelationHelpTip')
         },
         strategy_rules: {
           label: this.$t('Rule'),

src/views/users/User/UserCreateUpdate.vue

@@ -202,7 +202,7 @@ export default {
         fieldsToUpdate.forEach(field => {
           const msg = this.$t('disallowSelfUpdateFields', { attr: this.fieldsMeta[field]['label'] })
           this.fieldsMeta[field].el.disabled = true
-          this.fieldsMeta[field].helpTips = msg
+          this.fieldsMeta[field].helpTip = msg
         })
       }
       this.fieldsMeta.password.el.userIsOrgAdmin = user['is_org_admin']