starred/1Panel
1
0
Fork 0
mirror of https://github.com/1Panel-dev/1Panel.git synced 2026-10-13 08:00:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: Enhance compose item interaction and styling (#12008)

Browse Source 
- Updated the compose item to include a new class for active state, improving visual feedback.
- Refactored action buttons into a dedicated container for better organization and hover effects.
- Added CSS transitions for smoother interactions on hover and active states.
This commit is contained in:
KOMATA
2026-03-02 13:43:34 +08:00
committed by GitHub
parent 8cead06d7b
commit 93489c85fa
2 changed files with 79 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/layout/components/Sidebar/index.scss
+1 -3
View File
@@ -23,9 +23,7 @@
}
&.is-active {
background-color: var(--el-menu-item-bg-color-active);
box-shadow:
0px 0px 4px rgba(0, 94, 235, 0.1),
inset 0 0 0 2px var(--el-color-primary);
box-shadow: 0px 0px 4px rgba(0, 94, 235, 0.1), inset 0 0 0 2px var(--el-color-primary);
&::before {
position: absolute;
frontend/src/views/container/compose/index.vue
+78 -48
View File
@@ -30,8 +30,11 @@
>
<el-table-column prop="name">
<template #default="{ row }">
<div class="cursor-pointer">
<div class="font-medium text-base">
<div
class="compose-item"
:class="{ 'is-active': currentCompose?.name === row.name && !isOnCreate }"
>
<div class="font-medium text-base compose-title">
{{ row.name }}
</div>
<div class="mb-1">
@@ -64,52 +67,54 @@
}}
</el-text>
</div>
<el-button
plain
round
size="small"
class="round-btn"
:disabled="!row?.workdir"
@click="openComposeFolder(row)"
>
{{ $t('home.dir') }}
</el-button>
<el-button
plain
round
size="small"
class="round-btn"
@click="handleComposeOperate('up', row)"
>
{{ $t('commons.operate.start') }}
</el-button>
<el-button
plain
round
size="small"
class="round-btn"
@click="handleComposeOperate('stop', row)"
>
{{ $t('commons.operate.stop') }}
</el-button>
<el-button
plain
round
size="small"
class="round-btn"
@click="handleComposeOperate('restart', row)"
>
{{ $t('commons.operate.restart') }}
</el-button>
<el-button
plain
round
size="small"
class="round-btn"
@click="onDelete(row)"
>
{{ $t('commons.operate.delete') }}
</el-button>
<div class="compose-actions">
<el-button
plain
round
size="small"
class="round-btn"
:disabled="!row?.workdir"
@click="openComposeFolder(row)"
>
{{ $t('home.dir') }}
</el-button>
<el-button
plain
round
size="small"
class="round-btn"
@click="handleComposeOperate('up', row)"
>
{{ $t('commons.operate.start') }}
</el-button>
<el-button
plain
round
size="small"
class="round-btn"
@click="handleComposeOperate('stop', row)"
>
{{ $t('commons.operate.stop') }}
</el-button>
<el-button
plain
round
size="small"
class="round-btn"
@click="handleComposeOperate('restart', row)"
>
{{ $t('commons.operate.restart') }}
</el-button>
<el-button
plain
round
size="small"
class="round-btn"
@click="onDelete(row)"
>
{{ $t('commons.operate.delete') }}
</el-button>
</div>
</div>
</template>
</el-table-column>
@@ -780,6 +785,31 @@ const onOpenLog = (row: any) => {
</script>
<style scoped lang="scss">
.compose-item {
cursor: pointer;
}
.compose-title {
transition: color 0.15s;
}
.compose-item.is-active .compose-title {
color: var(--el-color-primary);
}
.compose-actions {
opacity: 0;
max-height: 0;
overflow: hidden;
transition: opacity 0.2s, max-height 0.2s;
}
.compose-item:hover .compose-actions,
.compose-item.is-active .compose-actions {
opacity: 1;
max-height: 40px;
}
.svg-icon {
margin-top: -3px;
font-size: 6px;