Skip to content
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

pref: Optimize the button style for database connection information #7342

Merged
merged 1 commit into from
Dec 12, 2024
Merged

pref: Optimize the button style for database connection information #7342

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
2 changes: 1 addition & 1 deletion backend/init/lang/lang.go
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ func initLang() {
downloadGeoFromRemote(fileOp, geoPath)
return
}
std, err := cmd.Execf("cp %s %s", path.Join(tmpPath, "GeoIP.mmdb"), path.Dir(geoPath))
std, err := cmd.Execf("cp %s %s/", path.Join(tmpPath, "GeoIP.mmdb"), path.Dir(geoPath))
if err != nil {
global.LOG.Errorf("load geo ip from package failed, std: %s, err: %v", std, err)
return
Expand Down
13 changes: 12 additions & 1 deletion frontend/src/views/database/mysql/conn/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@
v-model="form.password"
/>
<el-button-group>
<CopyButton :content="form.password" />
<CopyButton class="copy_button" :content="form.password" />
<el-button @click="random">
{{ $t('commons.button.random') }}
</el-button>
Expand Down Expand Up @@ -293,3 +293,14 @@ defineExpose({
acceptParams,
});
</script>

<style lang="scss" scoped>
.copy_button {
border-radius: 0px;
border-left-width: 0px;
}
:deep(.el-input__wrapper) {
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
}
</style>
Copy link
Member

Choose a reason for hiding this comment

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

The provided HTML/CSS code has a couple of improvements:

  1. CSS Specificity Optimization: The .copy_button class is used to target the copy button while using :deep() to target deeply nested elements. This avoids overriding styles applied by other CSS.

  2. Border Radius Removal: By removing border radius from all edges (border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius) for the input wrapper (el-input__wrapper), it ensures consistent styling across different platforms and browser versions.

Here's the optimized version:

<template>
  <!-- Component template remains unchanged -->
</template>

<script setup>
// DefineProps() setup function remains unchanged
defineExpose({
  acceptParams,
});
</script>

<style lang="scss" scoped>
.copy_button {
  // Removed unnecessary border top/left width
}

.el-input__wrapper:not([class*=el-table-col]):not(:first-child):not(:last-child) {
  border-top-right-radius: 0px !important;
  border-bottom-right-radius: 0px !important;
}
</style>

Key Changes Made:

  • .copy_button Class: Added a rule to remove unused border properties and set it for padding on click.
  • :el-input__wrapper Deep Styling: Used an additional selector to apply specific radii only when not inside table columns and is not the first last child, ensuring no unwanted changes occur elsewhere.

13 changes: 12 additions & 1 deletion frontend/src/views/database/postgresql/conn/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@
v-model="form.password"
/>
<el-button-group>
<CopyButton :content="form.password" />
<CopyButton class="copy_button" :content="form.password" />
<el-button @click="random">
{{ $t('commons.button.random') }}
</el-button>
Expand Down Expand Up @@ -262,3 +262,14 @@ defineExpose({
acceptParams,
});
</script>

<style lang="scss" scoped>
.copy_button {
border-radius: 0px;
border-left-width: 0px;
}
:deep(.el-input__wrapper) {
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
}
</style>
Copy link
Member

Choose a reason for hiding this comment

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

The code changes seem mostly minor and don't introduce significant errors. Here are some points to consider:

  1. CSS Class Suggestion: The .copy_button class is added to ensure that the CopyButton component has no borders on its left side and only top-left corners rounded.

  2. Deep CSS Styling: The :deep() selector is used to target specific elements inside a child component (CopyButton) from the parent component's scope. This can be useful if other styles might overwrite this custom styling.

    .copy_button {
    border-radius: 0px;
    border-left-width: 0px;
}
    :deep(.el-input__wrapper) {
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}

These changes primarily focus on maintaining visual consistency with existing components while providing additional customization options using deep selectors or local classes where appropriate.

13 changes: 12 additions & 1 deletion frontend/src/views/database/redis/conn/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@
v-model="form.password"
/>
<el-button-group>
<CopyButton :content="form.password" />
<CopyButton class="copy_button" :content="form.password" />
<el-button @click="random">
{{ $t('commons.button.random') }}
</el-button>
Expand Down Expand Up @@ -239,3 +239,14 @@ defineExpose({
acceptParams,
});
</script>

<style lang="scss" scoped>
.copy_button {
border-radius: 0px;
border-left-width: 0px;
}
:deep(.el-input__wrapper) {
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
}
</style>
Copy link
Member

Choose a reason for hiding this comment

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

The provided code seems to be related to a Vue.js component that includes an input field with a password mask and two buttons: one for copying the password to the clipboard and another for generating a random password. There are no apparent errors in the JavaScript or SASS portions of the code.

Potential Issues:

  • CSS Styling: Ensure that the SCSS styles (.copy_button and .el-input__wrapper) do not interfere with other CSS rules and that they apply exactly where intended. The border-left-width set at zero may need adjustment if it causes unwanted side effects.
  • Accessibility Check: For accessibility, make sure there is sufficient context provided when copying passwords via the copy button. Users should be aware that copying sensitive information can expose them to security risks.

Suggestions for Optimization:

  1. Code Consistency:

    • Consistently use single quotes (') throughout the HTML section, e.g., instead of double quotes (").

  2. Variable Names:

    • Consider renaming variables like acceptParams to be more descriptive or consistent with existing naming conventions.

  3. Component Exposition:

    • If you find that using the defineExpose function is necessary, ensure that all methods or data exposed are utilized correctly within the component.

Here's the revised code incorporating some of these suggestions:

<template>
    <!-- template code -->
</template>

<script setup lang="ts">
import CopyButton from 'path-to-copy-button-component';

const form = reactive({
    // properties
});

const props = defineProps<{
    // props definitions
}>();

const emit = defineEmits<{
    // event emitters
}>();

watch(
    () => form.someProperty,
    value => {
        console.log('Value changed:', value);
    },
);

function random() {
    // random logic here
}

// expose props and local state if necessary
if (shouldExpose) defineExpose({ acceptParams });
</script>

<style lang="scss" scoped>
.copy_button {
    border-radius: 0px;
    border-left-width: 0px; /* Adjust this based on layout needs */
}

.el-input__wrapper {
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}
</style>

This script uses Vue Composition API syntax, which is modern and allows better encapsulation and flexibility compared to Option-Based API. Make sure to replace 'path-to-copy-button-component' with the actual path to your CopyButton component unless it's an internal or shared component package.

Loading