Skip to content

style: change import license button style #8969

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
f2c-ci-robot merged 1 commit into from
Jun 9, 2025
Merged

style: change import license button style #8969

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 2 additions & 6 deletions frontend/src/components/license-import/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,8 @@
</div>
<el-button
type="primary"
class="mt-3 w-52 custom-button"
class="mt-3"
size="large"
:disabled="loading || uploaderFiles.length == 0"
plain
@click="submit"
Expand Down Expand Up @@ -153,8 +154,3 @@ defineExpose({
acceptParams,
});
</script>
<style lang="scss" scoped>
.custom-button {
letter-spacing: 4px;
}
</style>
Copy link
Copy Markdown
Member

@wanghe-fit2cloud wanghe-fit2cloud Jun 9, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The provided code snippet does not contain any obvious errors, but there are some minor improvements that could be made:

  1. Spacing and Consistency: The use of mt-3 without specifying the direction (left, right, etc.) might cause unexpected spacing unless explicitly set. Consider using both mt-3 and optional ml-auto for alignment if needed.

  2. Button Size: The size="large" prop is added to the button, which enhances its visual appeal. However, it's important to ensure that this size matches other components' styles in the application.

  3. Scss Customization: While .custom-button is still styled with letter-spacing: auto;, adding explicit values can improve readability and potentially control the design more precisely.

Here’s an optimized version of the code snippet:

@@ -39,7 +39,8 @@
                 </div>
                 <el-button
                     type="primary"
-                    class="mt-3"
+                    class="mt-3 ml-auto custom-button"
+                    style={{ width }}
                     :disabled="loading || uploaderFiles.length === 0"
                     plain
                     @click="submit"
@@ -153,5 +154,8 @@ defineExpose({
     acceptParams,
 });

<style lang="scss" scoped>
.custom-button {
    letter-spacing: .5em; /* Using a fixed value instead of 'auto' */
}
</style>

Summary:

  • Use consistent placement for classes like ml-auto to align buttons correctly.
  • Add specific widths where necessary to avoid unexpected behavior.
  • Maintain consistency with CSS styling preferences for clarity.

2 changes: 1 addition & 1 deletion frontend/src/views/app-store/installed/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -388,7 +388,7 @@
<AppIgnore ref="ignoreRef" @close="search" />
<ComposeLogs ref="composeLogRef" />
<TaskLog ref="taskLogRef" @close="search" />
<Detail ref="detailRef" @close="search" />
<Detail ref="detailRef" />
<IgnoreApp ref="ignoreAppRef" @close="search" />
</template>

Copy link
Copy Markdown
Member

@wanghe-fit2cloud wanghe-fit2cloud Jun 9, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The change from <Detail ref="detailRef" @close="search" to <Detail ref="detailRef"> is incorrect. If you want to remove the @close="search" event listener (which doesn't seem necessary since there's no corresponding handler defined), simply close the tag like so:

<Detail ref="detailRef" />

Make sure to add appropriate comments or documentation if needed, but this should resolve the inconsistency.

Expand Down
Loading