chore: edit minor design

Signed-off-by: yuda <[email protected]>
cloudforet-io · Dec 20, 2024 · 099a7ac · 099a7ac
1 parent 94f4369
commit 099a7ac
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 18 deletions.
diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformEvaluate.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformEvaluate.vue
@@ -240,21 +240,7 @@ watch(() => state.invalid, (_invalid) => {
                             </p-field-title>
                         </div>
                         <div class="field-expression-wrapper">
-                            <p-field-title size="sm"
-                                           color="gray"
-                                           required
-                                           class="use-condition-title"
-                                           :label="$t('COMMON.WIDGETS.DATA_TABLE.FORM.EVAL.USE_CONDITION')"
-                            >
-                                <template #right>
-                                    <p-toggle-button :value="'condition' in expression"
-                                                     class="condition-toggle-button"
-                                                     @change-toggle="handleToggleCondition(eIdx)"
-                                    />
-                                </template>
-                            </p-field-title>
-                            <p-field-group v-if="'condition' in expression"
-                                           :label="$t('COMMON.WIDGETS.DATA_TABLE.FORM.EVAL.CONDITION')"
+                            <p-field-group :label="$t('COMMON.WIDGETS.DATA_TABLE.FORM.EVAL.CONDITION')"
                                            style-type="secondary"
                                            required
                                            class="expression-form"
@@ -268,9 +254,14 @@ watch(() => state.invalid, (_invalid) => {
                                         >
                                             Pandas Query
                                         </p-link>
+                                        <p-toggle-button :value="'condition' in expression"
+                                                         class="condition-toggle-button"
+                                                         @change-toggle="handleToggleCondition(eIdx)"
+                                        />
                                     </div>
                                 </template>
-                                <p-textarea :value.sync="expression.condition"
+                                <p-textarea v-if="'condition' in expression"
+                                            :value.sync="expression.condition"
                                             :placeholder="CONDITION_PLACEHOLDER"
                                             @update:value="handleChangeFieldValue(eIdx, 'condition', $event)"
                                 />

diff --git a/...b/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformValueMapping.vue b/...b/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformValueMapping.vue
@@ -273,13 +273,14 @@ watch(() => state.invalid, (_invalid) => {
 <style scoped lang="scss">
 .widget-form-data-table-card-transform-value-mapping {
     .case-form-wrapper {
-        @apply border border-gray-200 rounded-lg;
+        @apply bg-gray-100 rounded-lg;
         padding: 0.625rem 0.5rem;
         margin-bottom: 0.5rem;
         .case-form-card {
-            @apply bg-gray-100 rounded;
+            @apply bg-white rounded border border-gray-150;
             position: relative;
             padding: 0.5rem;
+            z-index: 1;
             margin-bottom: 0.5rem;
             &.expanded {
                 width: 35rem;