[Improve] modal style improvement

apache · Sep 15, 2024 · 5ae23dd · 5ae23dd
1 parent 378a7d0
commit 5ae23dd
Show file tree

Hide file tree

Showing 11 changed files with 29 additions and 41 deletions.
diff --git a/streampark-console/streampark-console-webapp/src/design/index.less b/streampark-console/streampark-console-webapp/src/design/index.less
@@ -115,3 +115,15 @@ textarea.ant-input,
 .ant-upload.ant-upload-drag {
   border-radius: 1px !important;
 }
+
+.pop-tip {
+  display: inline-block;
+  margin-top: 5px;
+  color: darkgrey;
+}
+
+[data-theme='dark'] {
+  .pop-tip {
+    color: #666;
+  }
+}
diff --git a/streampark-console/streampark-console-webapp/src/design/public.less b/streampark-console/streampark-console-webapp/src/design/public.less
@@ -56,8 +56,3 @@
     opacity: 0.75;
   }
 }
-
-.extra .conf-switch {
-  color: darkgrey;
-  margin-left: 8px;
-}
diff --git a/...treampark-console-webapp/src/views/flink/app/components/AppView/StartApplicationModal.vue b/...treampark-console-webapp/src/views/flink/app/components/AppView/StartApplicationModal.vue
@@ -75,8 +75,8 @@
           checkedChildren: 'ON',
           unCheckedChildren: 'OFF',
         },
-        defaultValue: true,
-        afterItem: () => h('span', { class: 'conf-switch' }, t('flink.app.view.savepointTip')),
+        defaultValue: receiveData.historySavePoint && receiveData.historySavePoint.length,
+        afterItem: () => h('span', { class: 'pop-tip' }, t('flink.app.view.savepointTip')),
       },
       {
         field: 'savepointPath',
@@ -86,7 +86,7 @@
             ? 'Select'
             : 'Input',
         afterItem: () =>
-          h('span', { class: 'conf-switch' }, handleSavePointTip(receiveData.historySavePoint)),
+          h('span', { class: 'pop-tip' }, handleSavePointTip(receiveData.historySavePoint)),
         slot: 'savepoint',
         ifShow: ({ values }) => values.restoreSavepoint,
         required: true,
@@ -99,7 +99,7 @@
           checkedChildren: 'ON',
           unCheckedChildren: 'OFF',
         },
-        afterItem: () => h('span', { class: 'conf-switch' }, t('flink.app.view.ignoreRestoredTip')),
+        afterItem: () => h('span', { class: 'pop-tip' }, t('flink.app.view.ignoreRestoredTip')),
         defaultValue: false,
         ifShow: ({ values }) => values.restoreSavepoint,
       },

diff --git a/...streampark-console-webapp/src/views/flink/app/components/AppView/StopApplicationModal.vue b/...streampark-console-webapp/src/views/flink/app/components/AppView/StopApplicationModal.vue
@@ -54,9 +54,8 @@
           checkedChildren: 'ON',
           unCheckedChildren: 'OFF',
         },
-        defaultValue: true,
-        afterItem: () =>
-          h('span', { class: 'conf-switch' }, t('flink.app.operation.enableSavePoint')),
+        defaultValue: false,
+        afterItem: () => h('span', { class: 'pop-tip' }, t('flink.app.operation.enableSavePoint')),
       },
       {
         field: 'customSavepoint',
@@ -78,7 +77,7 @@
         },
         defaultValue: false,
         ifShow: ({ values }) => !!values.triggerSavepoint,
-        afterItem: () => h('span', { class: 'conf-switch' }, t('flink.app.operation.enableDrain')),
+        afterItem: () => h('span', { class: 'pop-tip' }, t('flink.app.operation.enableDrain')),
       },
     ],
     colon: true,

diff --git a/streampark-console/streampark-console-webapp/src/views/flink/app/hooks/useApp.tsx b/streampark-console/streampark-console-webapp/src/views/flink/app/hooks/useApp.tsx
@@ -226,11 +226,7 @@ export const useFlinkApplication = (openStartModal: Fn) => {
       ],
       content: () => {
         return (
-          <Form
-            class="!pt-40px"
-            layout='vertical'
-            baseColProps = {{ span: 20, offset: 2 }}
-          >
+          <Form class="!pt-40px" layout="vertical" baseColProps={{ span: 20, offset: 2 }}>
             <Form.Item
               label="Job Name"
               validateStatus={unref(validateStatus)}
@@ -321,8 +317,8 @@ export const useFlinkApplication = (openStartModal: Fn) => {
             class="!pt-40px"
             ref={mappingRef}
             name="mappingForm"
-            baseColProps = {{ span: 20, offset: 2 }}
-            layout='vertical'
+            baseColProps={{ span: 20, offset: 2 }}
+            layout="vertical"
             v-model:model={formValue}
           >
             <Form.Item label="Job Name">

diff --git a/streampark-console/streampark-console-webapp/src/views/flink/app/hooks/useFlinkRender.tsx b/streampark-console/streampark-console-webapp/src/views/flink/app/hooks/useFlinkRender.tsx
@@ -232,7 +232,7 @@ export const renderOptionsItems = (
             rules={[{ validator: conf.validator }]}
           />
         )}
-        {conf.type === 'switch' && <span class="conf-switch">({conf.placeholder})</span>}
+        {conf.type === 'switch' && <span>({conf.placeholder})</span>}
         <p class="conf-desc"> {descriptionFilter(conf)} </p>
       </Form.Item>
     );

diff --git a/streampark-console/streampark-console-webapp/src/views/flink/app/styles/Add.less b/streampark-console/streampark-console-webapp/src/views/flink/app/styles/Add.less
@@ -75,6 +75,7 @@
   .conf-desc {
     color: darkgrey;
     margin-bottom: 0;
+    margin-top: 5px;
   }
 
   .sql-desc {

diff --git a/...k-console/streampark-console-webapp/src/views/flink/variable/components/VariableModal.vue b/...k-console/streampark-console-webapp/src/views/flink/variable/components/VariableModal.vue
@@ -120,7 +120,7 @@
         },
         defaultValue: false,
         afterItem: () =>
-          h('span', { class: 'conf-switch' }, t('flink.variable.form.desensitizationDesc')),
+          h('span', { class: 'pop-tip' }, t('flink.variable.form.desensitizationDesc')),
       },
       {
         field: 'description',
@@ -188,11 +188,3 @@
     }
   }
 </script>
-
-<style lang="less">
-  .conf-switch {
-    display: inline-block;
-    margin-top: 10px;
-    color: darkgrey;
-  }
-</style>
diff --git a/...mpark-console/streampark-console-webapp/src/views/setting/Alarm/components/AlertModal.vue b/...mpark-console/streampark-console-webapp/src/views/setting/Alarm/components/AlertModal.vue
@@ -56,7 +56,7 @@
           allowClear: true,
           placeholder: t('setting.alarm.alertNamePlaceHolder'),
         },
-        afterItem: () => h('span', { class: 'conf-switch' }, t('setting.alarm.alertNameTips')),
+        afterItem: () => h('span', { class: 'pop-tip' }, t('setting.alarm.alertNameTips')),
         dynamicRules: () => {
           return [
             {

diff --git a/...ark-console/streampark-console-webapp/src/views/setting/ExternalLink/components/Modal.vue b/...ark-console/streampark-console-webapp/src/views/setting/ExternalLink/components/Modal.vue
@@ -80,7 +80,7 @@
         afterItem: () =>
           h(
             'span',
-            { class: 'conf-switch' },
+            { class: 'pop-tip' },
             'Supported variables: {job_id}, {yarn_id}, {job_name}, Example: https://grafana/flink-monitoring?var-JobId=var-JobId={job_id}',
           ),
         rules: [

diff --git a/...ampark-console/streampark-console-webapp/src/views/setting/FlinkHome/components/Modal.vue b/...ampark-console/streampark-console-webapp/src/views/setting/FlinkHome/components/Modal.vue
@@ -42,7 +42,7 @@
           allowClear: true,
         },
         afterItem: () =>
-          h('span', { class: 'conf-switch' }, t('setting.flinkHome.operateMessage.flinkNameTips')),
+          h('span', { class: 'pop-tip' }, t('setting.flinkHome.operateMessage.flinkNameTips')),
         rules: [
           { required: true, message: t('setting.flinkHome.operateMessage.flinkNameIsRequired') },
         ],
@@ -56,7 +56,7 @@
           allowClear: true,
         },
         afterItem: () =>
-          h('span', { class: 'conf-switch' }, t('setting.flinkHome.operateMessage.flinkHomeTips')),
+          h('span', { class: 'pop-tip' }, t('setting.flinkHome.operateMessage.flinkHomeTips')),
         rules: [
           { required: true, message: t('setting.flinkHome.operateMessage.flinkHomeIsRequired') },
         ],
@@ -172,10 +172,3 @@
     </div>
   </BasicModal>
 </template>
-<style lang="less">
-  .conf-switch {
-    display: inline-block;
-    margin-top: 10px;
-    color: darkgrey;
-  }
-</style>