FatttSnake/oxygen-ui
1
0
Fork 0
Code Pull Requests Activity

Feat(Menu): Add tool menu via drag and drop

Browse Source 
Drag and drop a tool card to add tool menu
This commit is contained in:
Fat Snake
2024-04-30 13:42:36 +08:00
parent 843f47346a
commit 7b61a5fdb3
30 changed files with 785 additions and 298 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
src/assets/css/components/common/sidebar.scss
View File

@@ -55,13 +55,14 @@
.scroll {
min-height: 0;
flex: 1;
width: 100%;
}
ul {
> li {
> li, > div > li {
padding: 2px 14px;
&.item {
position: relative;
margin: 4px 14px;
font-size: 1.4em;
>.menu-bt {
@@ -78,6 +79,10 @@
height: 40px;
font-size: constants.$SIZE_ICON_SM;
cursor: pointer;
img{
width: 100%;
}
}
a {
@@ -86,6 +91,7 @@
height: 100%;
width: 100%;
transition: all 0.2s;
background-color: constants.$origin-color;
.text {
flex: 1;
@@ -94,7 +100,12 @@
&.active {
color: constants.$origin-color;
background-color: constants.$main-color !important;
background-color: constants.$main-color;
img {
filter: drop-shadow(1000px 0 0 constants.$origin-color);
transform: translate(-1000px);
}
}
}
}
@@ -136,11 +147,11 @@
&.active {
color: constants.$origin-color;
background-color: constants.$main-color !important;
background-color: constants.$main-color;
}
}
&:hover a {
&:hover a:not(.active) {
background-color: constants.$background-color;
}
}
@@ -149,7 +160,7 @@
&:hover {
>.menu-bt {
a {
a:not(.active) {
background-color: constants.$background-color;
}
}
@@ -171,6 +182,22 @@
}
}
}
.delete {
.menu-bt {
border: {
width: 1px;
color: constants.$error-secondary-color;
style: dashed;
};
filter: drop-shadow(1000px 0 0 constants.$error-secondary-color);
transform: translate(-1000px);
> a {
background-color: transparent !important;
}
}
}
}
}
@@ -257,7 +284,7 @@
}
.menu-bt {
.text {
.text, .extend {
display: none;
}
}

5
src/assets/css/components/dnd/drag-handle.scss Normal file
View File

@@ -0,0 +1,5 @@
[data-component=component-drag-handle] {
background-color: transparent;
color: unset;
cursor: grab;
}

28
src/assets/css/components/tools/repository-card.scss
View File

@@ -1,6 +1,8 @@
@use '@/assets/css/constants' as constants;
[data-component=component-repository-card] {
height: 100%;
.repository-card {
width: 100%;
height: 100%;
@@ -12,23 +14,25 @@
flex: 0 0 auto;
}
.version-select {
position: absolute;
top: 10px;
left: 10px;
width: 9em;
}
.header {
display: flex;
width: 100%;
align-items: center;
padding: 10px;
.upgrade-bt {
position: absolute;
top: 10px;
right: 10px;
font-size: 1.8em;
.version-select {
width: 9em;
margin-right: auto;
}
>:not(.version-select) {
font-size: 1.6em;
}
}
.icon {
display: flex;
padding-top: 50px;
padding-top: 10px;
padding-bottom: 20px;
color: constants.$production-color;
font-size: constants.$SIZE_ICON_XL;

57
src/assets/css/components/tools/store-card.scss
View File

@@ -1,6 +1,7 @@
@use '@/assets/css/constants' as constants;
[data-component=component-store-card] {
height: 100%;
cursor: pointer;
.store-card {
@@ -14,10 +15,31 @@
flex: 0 0 auto;
}
.header {
display: flex;
width: 100%;
padding: 10px;
justify-content: space-between;
.version {
width: 0;
}
.operation {
display: flex;
font-size: 1.6em;
gap: 4px;
opacity: 0;
> *:hover {
color: constants.$font-secondary-color;
}
}
}
.icon {
display: flex;
padding-top: 40px;
padding-top: 10px;
padding-bottom: 20px;
color: constants.$production-color;
font-size: constants.$SIZE_ICON_XL;
@@ -28,12 +50,6 @@
}
}
.version {
position: absolute;
left: 10px;
top: 10px;
}
.info {
padding-top: 20px;
@@ -43,8 +59,16 @@
}
.tool-desc {
margin-top: 10px;
margin: {
top: 10px;
left: auto;
right: auto;
};
color: constants.$font-secondary-color;
overflow: hidden;
text-overflow: ellipsis;
max-height: 40px;
width: 80%;
}
}
@@ -68,17 +92,16 @@
align-items: center;
}
}
}
.operation {
display: flex;
position: absolute;
top: 10px;
right: 12px;
font-size: 1.6em;
gap: 4px;
:hover {
.header {
.version {
opacity: 0;
}
> *:hover {
color: constants.$font-secondary-color;
.operation {
opacity: 1;
}
}
}

7
src/assets/css/pages/tools-framework.scss
View File

@@ -4,6 +4,13 @@
[data-component=tools-framework] {
.left-panel {
background-color: constants.$origin-color;
.menu-droppable {
display: flex;
min-height: 0;
flex: 1;
width: 100%;
}
}
.right-panel {

5
src/assets/css/pages/tools/index.scss
View File

@@ -11,7 +11,7 @@
flex-wrap: wrap;
justify-content: flex-start;
> .card-box {
> .card-box, > div {
width: 180px;
height: 290px;
flex: 0 0 auto;
@@ -77,6 +77,7 @@
flex-direction: row;
align-items: center;
gap: 20px;
margin-top: 20px;
:first-child, :last-child {
height: 0;
@@ -99,7 +100,7 @@
flex-wrap: wrap;
justify-content: flex-start;
> .card-box {
> .card-box, > div {
width: 180px;
height: 290px;
flex: 0 0 auto;

2
src/assets/css/pages/tools/store.scss
View File

@@ -26,7 +26,7 @@
flex-wrap: wrap;
justify-content: center;
> .card-box {
> div {
width: 180px;
height: 290px;
flex: 0 0 auto;

2
src/assets/css/pages/tools/user.scss
View File

@@ -68,7 +68,7 @@
flex-wrap: wrap;
justify-content: center;
> .card-box {
> div {
width: 180px;
height: 290px;
flex: 0 0 auto;

1
src/assets/svg/handle.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z" /></svg>
Side by Side

After

Width:  |  Height:  |  Size: 325 B