168 lines
4.1 KiB
Vue
168 lines
4.1 KiB
Vue
<template>
|
|
<div class="group-context-menu">
|
|
<div class="top-region">
|
|
<div class="group-name-input">
|
|
<el-input
|
|
:ref="el => groupcontextmenu.groupNameInput = el"
|
|
v-model="value"
|
|
size="default"
|
|
></el-input>
|
|
</div>
|
|
<div class="group-color-selector">
|
|
<span
|
|
v-for="(item, index) in groupColors"
|
|
:key="index"
|
|
:style="makeColorStyle(item.color)"
|
|
class="item"
|
|
@click="onClick(item)"
|
|
>
|
|
<span
|
|
class="focus-circle"
|
|
:class="{'active': item.color === currentGroupColor}"
|
|
></span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
<div class="group-function-list">
|
|
<div class="item"
|
|
@click="cancelGroup()"
|
|
>
|
|
<span class="iconfont icon-cancel-group"></span>
|
|
<span>{{ t('context-menu.group.cancel') }}</span>
|
|
</div>
|
|
<div class="item"
|
|
@click="deleteGroup()"
|
|
>
|
|
<span class="iconfont icon-delete-group"></span>
|
|
<span>{{ t('context-menu.group.delete') }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed, ref } from 'vue';
|
|
import { cancelGroup, deleteGroup, groupColors, makeColorStyle } from './manage-group';
|
|
import { useI18n } from 'vue-i18n';
|
|
import { contextmenu, groupcontextmenu } from './handle-contextmenu';
|
|
|
|
const { t } = useI18n();
|
|
|
|
const currentGroupColor = computed(() => {
|
|
if (groupcontextmenu.currentGroupView) {
|
|
return groupcontextmenu.currentGroupView.groupInfo.color;
|
|
}
|
|
return '';
|
|
})
|
|
|
|
const value = computed({
|
|
get() {
|
|
if (groupcontextmenu.currentGroupView) {
|
|
return groupcontextmenu.currentGroupView.groupInfo.name;
|
|
} else {
|
|
return '';
|
|
}
|
|
},
|
|
set(v) {
|
|
if (groupcontextmenu.currentGroupView) {
|
|
groupcontextmenu.currentGroupView.groupInfo.name = v;
|
|
}
|
|
}
|
|
});
|
|
|
|
|
|
function onClick(item) {
|
|
groupcontextmenu.currentGroupView.groupInfo.color = item.color;
|
|
}
|
|
|
|
</script>
|
|
|
|
<style>
|
|
.group-context-menu {
|
|
z-index: 200;
|
|
border-radius: .5em;
|
|
padding: 10px;
|
|
position: fixed;
|
|
box-shadow: 0 0 10px 1px rgb(16, 16, 16);
|
|
background-color: var(--sidebar);
|
|
border: solid 1px var(--sidebar-border);
|
|
}
|
|
|
|
.group-context-menu .top-region {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.group-name-input {
|
|
width: 95%;
|
|
}
|
|
|
|
.group-color-selector {
|
|
margin-top: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.group-color-selector .item {
|
|
border-radius: 99em;
|
|
width: 20px;
|
|
height: 20px;
|
|
margin: 5px;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.group-color-selector .item .focus-circle {
|
|
border-radius: 99em;
|
|
width: 12px;
|
|
height: 12px;
|
|
}
|
|
|
|
.group-color-selector .item .focus-circle.active {
|
|
border: 2px solid var(--sidebar);
|
|
}
|
|
|
|
.group-function-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.group-function-list .item {
|
|
font-size: 0.9rem;
|
|
display: flex;
|
|
align-items: center;
|
|
margin: 5px;
|
|
padding: 3px;
|
|
padding-left: 10px;
|
|
border-radius: .5em;
|
|
transition: var(--animation-3s);
|
|
cursor: pointer;
|
|
width: 90%;
|
|
position: relative;
|
|
}
|
|
|
|
.group-function-list .item .iconfont {
|
|
font-size: 1.1rem;
|
|
width: 35px;
|
|
}
|
|
|
|
.group-function-list .item:hover {
|
|
color: var(--sidebar);
|
|
background: linear-gradient(
|
|
90deg,
|
|
#7CA532 25%,
|
|
rgba(200, 200, 200, 1) 37%,
|
|
rgba(255, 255, 255, 0) 63%
|
|
);
|
|
background-size: 400% 100%;
|
|
animation: loading-mask 1.5s cubic-bezier(0.23,1,0.32,1);
|
|
-webkit-animation: loading-mask 1.5s cubic-bezier(0.23,1,0.32,1);
|
|
transition: var(--animation-3s);
|
|
}
|
|
|
|
</style> |