From d12317b68e4942db28abc7f474ea4f83b7da9e7f Mon Sep 17 00:00:00 2001 From: Ryan Wang Date: Mon, 31 Oct 2022 16:01:28 +0800 Subject: [PATCH] perf: improve the layout and style of forms (#673) Change form style from horizontal to vertical. --- src/formkit/theme.ts | 40 +++++++++---------- .../components/ReplyCreationModal.vue | 3 +- .../components/SinglePageSettingModal.vue | 1 + .../posts/components/PostSettingModal.vue | 1 + src/modules/interface/themes/ThemeSetting.vue | 4 +- src/modules/system/plugins/PluginSetting.vue | 4 +- src/modules/system/settings/SystemSetting.vue | 4 +- .../users/layouts/UserProfileLayout.vue | 4 +- 8 files changed, 31 insertions(+), 30 deletions(-) diff --git a/src/formkit/theme.ts b/src/formkit/theme.ts index 40b488e1..f7a39199 100644 --- a/src/formkit/theme.ts +++ b/src/formkit/theme.ts @@ -1,21 +1,21 @@ const textClassification = { - label: "block font-bold text-sm formkit-invalid:text-red-500 w-56", - wrapper: "flex flex-col sm:flex-row items-start sm:items-center", + label: "block text-sm font-medium text-gray-700 formkit-invalid:text-red-500", + wrapper: "flex flex-col gap-4", inner: - "inline-flex items-center w-full relative box-border border border-gray-300 formkit-invalid:border-red-500 h-9 rounded-base overflow-hidden focus-within:border-primary mt-2 sm:mt-0", + "inline-flex items-center w-full relative box-border border border-gray-300 formkit-invalid:border-red-500 h-9 rounded-base overflow-hidden focus-within:border-primary focus-within:shadow-sm w-full sm:max-w-lg transition-all", input: "outline-0 bg-white antialiased resize-none w-full text-black block transition-all appearance-none h-full px-3 text-sm", }; const boxClassification = { + label: textClassification.label, + legend: textClassification.label, fieldset: - "border border-gray-300 rounded-base px-2 py-2 focus-within:border-primary", - legend: "font-bold text-sm", + "border border-gray-300 rounded-base px-2 py-2 focus-within:border-primary max-w-lg", wrapper: "flex items-center mb-1 cursor-pointer", - help: "mb-2", + help: "mb-2 mt-0", input: - "form-check-input appearance-none h-4 w-4 mr-2 border border-gray-500 rounded-sm bg-white checked:bg-primary focus:outline-none focus:ring-0 transition duration-200", - label: "text-sm text-gray-700", + "form-check-input h-4 w-4 mr-2 border border-gray-500 rounded-sm bg-white checked:bg-primary focus:outline-none focus:ring-0 transition duration-200", inner: "flex items-center", }; @@ -27,23 +27,21 @@ const buttonClassification = { const theme: Record> = { global: { - outer: "formkit-disabled:opacity-50", - help: "text-xs mt-1.5 text-gray-500", + form: "divide-y divide-gray-100", + outer: "formkit-disabled:opacity-50 py-4 first:pt-0 last:pb-0", + help: "text-xs mt-2 text-gray-500", messages: "list-none p-0 mt-1.5 mb-0", - message: "text-red-500 mb-1 text-xs", - form: "flex flex-col space-y-4", + message: "text-red-500 mt-2 text-xs", }, button: buttonClassification, color: { - label: "block mb-1 font-bold text-sm", + ...textClassification, + inner: "", input: "w-16 h-8 appearance-none cursor-pointer border border-gray-300 rounded-md mb-2 p-1", }, file: { - label: "block mb-1 font-bold text-sm", - inner: "cursor-pointer", - input: - "text-gray-600 text-sm mb-1 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:bg-blue-500 file:text-white hover:file:bg-blue-600", + ...textClassification, noFiles: "block text-gray-800 text-sm mb-1", fileItem: "block flex text-gray-800 text-sm mb-1", fileRemove: "ml-auto text-blue-500 text-sm", @@ -54,7 +52,8 @@ const theme: Record> = { input: boxClassification.input.replace("rounded-sm", "rounded-full"), }, range: { - inner: "", + ...textClassification, + inner: "w-full sm:max-w-lg", input: "form-range appearance-none w-full h-2 p-0 bg-gray-200 rounded-full focus:outline-none focus:ring-0 focus:shadow-none", }, @@ -74,10 +73,9 @@ const theme: Record> = { "datetime-local": textClassification, textarea: { ...textClassification, - inner: - "inline-flex items-center w-full relative box-border border border-gray-300 formkit-invalid:border-red-500 h-32 rounded-base overflow-hidden focus-within:border-primary mt-2 sm:mt-0", + inner: textClassification.inner.replace("h-9", "h-full"), input: - "outline-0 bg-white antialiased w-full text-black block transition-all appearance-none h-full px-3 py-2 text-sm", + textClassification.input.replace("resize-none", "resize-y") + " py-2", }, }; diff --git a/src/modules/contents/comments/components/ReplyCreationModal.vue b/src/modules/contents/comments/components/ReplyCreationModal.vue index b13d2679..b873a1dc 100644 --- a/src/modules/contents/comments/components/ReplyCreationModal.vue +++ b/src/modules/contents/comments/components/ReplyCreationModal.vue @@ -137,7 +137,7 @@ watchEffect(() => { { type="textarea" validation="required" validation-label="内容" + :rows="6" >
diff --git a/src/modules/contents/pages/components/SinglePageSettingModal.vue b/src/modules/contents/pages/components/SinglePageSettingModal.vue index db1a1dc9..7ed429c6 100644 --- a/src/modules/contents/pages/components/SinglePageSettingModal.vue +++ b/src/modules/contents/pages/components/SinglePageSettingModal.vue @@ -214,6 +214,7 @@ watchEffect(() => { name="raw" label="自定义摘要" type="textarea" + :rows="5" > diff --git a/src/modules/contents/posts/components/PostSettingModal.vue b/src/modules/contents/posts/components/PostSettingModal.vue index a53b73c2..623214f0 100644 --- a/src/modules/contents/posts/components/PostSettingModal.vue +++ b/src/modules/contents/posts/components/PostSettingModal.vue @@ -228,6 +228,7 @@ watchEffect(() => { label="自定义摘要" name="raw" type="textarea" + :rows="5" > diff --git a/src/modules/interface/themes/ThemeSetting.vue b/src/modules/interface/themes/ThemeSetting.vue index 8831ab35..985627ee 100644 --- a/src/modules/interface/themes/ThemeSetting.vue +++ b/src/modules/interface/themes/ThemeSetting.vue @@ -53,8 +53,8 @@ watch( );