tsanie/ui-lib
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

issue fix

Browse Source
This commit is contained in:
Chen Lily
2024-01-18 17:25:44 +08:00
parent fb9e920c15
commit feec8b59a7
7 changed files with 265 additions and 231 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
lib/ui/css/dropdown.css Normal file
View File

@ -0,0 +1 @@
.ui-drop-wrapper{display:inline-block;border:none;border-radius:unset;-webkit-user-select:none;-moz-user-select:none;user-select:none;position:relative;font-size:var(--font-size);font-family:var(--font-family)}.ui-drop-wrapper>.ui-drop-header{background-color:var(--bg-color);display:flex;height:26px;border:1px solid var(--border-color);border-radius:var(--border-radius);transition:border-color .12s ease}.ui-drop-wrapper>.ui-drop-header:focus,.ui-drop-wrapper>.ui-drop-header:focus-visible{outline:none}.ui-drop-wrapper>.ui-drop-header:focus,.ui-drop-wrapper>.ui-drop-header:hover{border-color:var(--focus-border-color)}.ui-drop-wrapper>.ui-drop-header:disabled{border-color:var(--disabled-border-color);color:var(--disabled-color);background-color:var(--disabled-bg-color)}.ui-drop-wrapper>.ui-drop-header>.ui-drop-text{flex:1 1 auto;cursor:pointer;font-size:var(--font-size);padding:0 6px;overflow:hidden;text-overflow:ellipsis;border:none;white-space:nowrap}.ui-drop-wrapper>.ui-drop-header>.ui-drop-text:focus,.ui-drop-wrapper>.ui-drop-header>.ui-drop-text:focus-visible{outline:none}.ui-drop-wrapper>.ui-drop-header>input.ui-drop-text{cursor:initial}.ui-drop-wrapper>.ui-drop-header>input.ui-drop-text::-moz-placeholder{font-size:var(--font-smaller-size);font-style:italic}.ui-drop-wrapper>.ui-drop-header>input.ui-drop-text::placeholder{font-size:var(--font-smaller-size);font-style:italic}.ui-drop-wrapper>.ui-drop-header>.ui-drop-caret{flex:0 0 auto;width:26px;display:flex;justify-content:center;align-items:center;cursor:pointer}.ui-drop-wrapper>.ui-drop-header>.ui-drop-caret::after{display:block;content:"";border-top:4px solid;border-left:4px solid rgba(0,0,0,0);border-right:4px solid rgba(0,0,0,0);height:0;width:0}.ui-drop-wrapper>.ui-drop-header.disabled{border-color:var(--disabled-border-color);background-color:var(--disabled-bg-color);color:var(--disabled-color)}.ui-drop-wrapper>.ui-drop-header.disabled:focus{border-color:var(--disabled-border-color)}.ui-drop-wrapper>.ui-drop-header.disabled>.ui-drop-text,.ui-drop-wrapper>.ui-drop-header.disabled>.ui-drop-caret{cursor:default}.ui-drop-box{position:absolute;visibility:hidden;opacity:0;transform:scaleY(0);transform-origin:top;background-color:var(--bg-color);top:28px;z-index:2;transition:transform 120ms ease,opacity 120ms ease,visibility 120ms ease;min-width:calc(100% + 2px);box-sizing:border-box;box-shadow:0 3px 6px -4px rgba(0,0,0,.12),0 6px 16px 0 rgba(0,0,0,.08),0 9px 28px 8px rgba(0,0,0,.05);left:-1px}.ui-drop-box.slide-up{transform-origin:bottom;top:unset;bottom:28px}.ui-drop-box.active{visibility:visible;opacity:1;transform:scaleY(1)}.ui-drop-box>.ui-drop-search{box-sizing:border-box;height:36px;line-height:36px;padding:0 8px;position:relative;display:flex;align-items:center}.ui-drop-box>.ui-drop-search>input[type=text]{box-sizing:border-box;width:100%;height:26px;padding:0 6px 0 22px;color:var(--color);border:1px solid var(--border-color);border-radius:var(--border-radius);transition:border-color .12s ease}.ui-drop-box>.ui-drop-search>input[type=text]:focus,.ui-drop-box>.ui-drop-search>input[type=text]:focus-visible{outline:none}.ui-drop-box>.ui-drop-search>input[type=text]:focus,.ui-drop-box>.ui-drop-search>input[type=text]:hover{border-color:var(--focus-border-color)}.ui-drop-box>.ui-drop-search>input[type=text]:disabled{border-color:var(--disabled-border-color);color:var(--disabled-color);background-color:var(--disabled-bg-color)}.ui-drop-box>.ui-drop-search>input[type=text]::-moz-placeholder{font-style:italic}.ui-drop-box>.ui-drop-search>input[type=text]::placeholder{font-style:italic}.ui-drop-box>.ui-drop-search>svg{position:absolute;left:14px;width:13px;height:100%;cursor:text}.ui-drop-box>.ui-drop-list{margin:0;padding:0;list-style:none;max-height:210px;overflow-y:auto;font-size:var(--font-size)}.ui-drop-box>.ui-drop-list::-webkit-scrollbar{width:8px;height:8px}.ui-drop-box>.ui-drop-list::-webkit-scrollbar-thumb{background-color:rgba(168,168,168,.9);border-radius:4px}.ui-drop-box>.ui-drop-list.filtered>li:first-child{background-color:var(--hover-bg-color)}.ui-drop-box>.ui-drop-list>li{line-height:30px;height:30px;padding:0 10px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ui-drop-box>.ui-drop-list>li:hover,.ui-drop-box>.ui-drop-list>li.selected{background-color:var(--hover-bg-color)}.ui-drop-box>.ui-drop-list>li>.ui-check-wrapper{height:30px;display:flex}

170
lib/ui/css/dropdown.scss
View File

@ -84,106 +84,106 @@ $listMaxHeight: 210px;
}
}
}
}
>.ui-drop-box {
position: absolute;
visibility: hidden;
opacity: 0;
transform: scaleY(0);
transform-origin: top;
background-color: var(--bg-color);
top: calc($headerHeight + 2px);
z-index: 2;
transition: transform 120ms ease, opacity 120ms ease, visibility 120ms ease;
width: calc(100% + 2px);
.ui-drop-box {
position: absolute;
visibility: hidden;
opacity: 0;
transform: scaleY(0);
transform-origin: top;
background-color: var(--bg-color);
top: calc($headerHeight + 2px);
z-index: 2;
transition: transform 120ms ease, opacity 120ms ease, visibility 120ms ease;
min-width: calc(100% + 2px);
box-sizing: border-box;
box-shadow: 0 3px 6px -4px rgba(0, 0, 0, .12), 0 6px 16px 0 rgba(0, 0, 0, .08), 0 9px 28px 8px rgba(0, 0, 0, .05);
left: -1px;
&.slide-up {
/*border-top-width: 1px;
border-bottom-width: 0;*/
transform-origin: bottom;
top: unset;
bottom: calc($headerHeight + 2px);
}
&.active {
visibility: visible;
opacity: 1;
transform: scaleY(1);
}
>.ui-drop-search {
box-sizing: border-box;
box-shadow: 0 3px 6px -4px rgba(0, 0, 0, .12), 0 6px 16px 0 rgba(0, 0, 0, .08), 0 9px 28px 8px rgba(0, 0, 0, .05);
left: -1px;
height: $searchBarHeight;
line-height: $searchBarHeight;
padding: 0 8px;
position: relative;
display: flex;
align-items: center;
&.slide-up {
/*border-top-width: 1px;
border-bottom-width: 0;*/
transform-origin: bottom;
top: unset;
bottom: calc($headerHeight + 2px);
}
&.active {
visibility: visible;
opacity: 1;
transform: scaleY(1);
}
>.ui-drop-search {
>input[type="text"] {
box-sizing: border-box;
height: $searchBarHeight;
line-height: $searchBarHeight;
padding: 0 8px;
position: relative;
display: flex;
align-items: center;
width: 100%;
height: $searchInputHeight;
padding: 0 6px 0 22px;
color: var(--color);
>input[type="text"] {
box-sizing: border-box;
width: 100%;
height: $searchInputHeight;
padding: 0 6px 0 22px;
color: var(--color);
@include outborder();
@include outborder();
// &:focus {
// box-shadow: 0 0 3px 1px rgba(0, 0, 0, .2);
// }
// &:focus {
// box-shadow: 0 0 3px 1px rgba(0, 0, 0, .2);
// }
&::placeholder {
font-style: italic;
}
}
>svg {
position: absolute;
left: 14px;
width: $searchIconSize;
height: 100%;
cursor: text;
&::placeholder {
font-style: italic;
}
}
>.ui-drop-list {
margin: 0;
padding: 0;
list-style: none;
max-height: $listMaxHeight;
overflow-y: auto;
font-size: var(--font-size);
@include scrollbar();
>svg {
position: absolute;
left: 14px;
width: $searchIconSize;
height: 100%;
cursor: text;
}
}
&.filtered>li:first-child {
>.ui-drop-list {
margin: 0;
padding: 0;
list-style: none;
max-height: $listMaxHeight;
overflow-y: auto;
font-size: var(--font-size);
@include scrollbar();
&.filtered>li:first-child {
background-color: var(--hover-bg-color);
}
>li {
// display: flex;
// align-items: center;
line-height: $dropItemHeight;
height: $dropItemHeight;
padding: 0 10px;
cursor: pointer;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
&:hover,
&.selected {
background-color: var(--hover-bg-color);
}
>li {
// display: flex;
// align-items: center;
line-height: $dropItemHeight;
>.ui-check-wrapper {
height: $dropItemHeight;
padding: 0 10px;
cursor: pointer;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
&:hover,
&.selected {
background-color: var(--hover-bg-color);
}
>.ui-check-wrapper {
height: $dropItemHeight;
display: flex;
}
display: flex;
}
}
}
}
}

2
lib/ui/css/grid.css
View File

File diff suppressed because one or more lines are too long

59
lib/ui/css/grid.scss
View File

@ -175,7 +175,7 @@
right: calc(0px - var(--split-width) /2);
width: var(--split-width);
cursor: ew-resize;
z-index: 1;
z-index: 2;
&::after {
content: '';
@ -333,20 +333,12 @@
>.ui-drop-header {
border: none;
height: 100%;
background-color: transparent;
>.ui-drop-text {
padding: var(--spacing-cell);
}
}
>.ui-drop-box {
top: calc(var(--row-height) + 2px);
&.slide-up {
top: unset;
bottom: calc(var(--row-height) + 2px);
}
}
}
.col-icon {
@ -378,28 +370,29 @@
}
}
}
.ui-grid-hover-holder {
box-sizing: border-box;
position: absolute;
line-height: var(--line-height);
padding: var(--spacing-cell);
background-color: var(--cell-hover-bg-color);
white-space: pre;
display: flex;
align-items: center;
visibility: hidden;
opacity: 0;
transition: visibility 0s linear .12s, opacity .12s ease;
&.active {
visibility: visible;
opacity: 1;
}
}
}
}
}
.ui-grid-hover-holder {
box-sizing: border-box;
position: absolute;
line-height: var(--line-height);
padding: var(--spacing-cell);
background-color: var(--cell-hover-bg-color);
white-space: pre;
display: flex;
align-items: center;
visibility: hidden;
opacity: 0;
transition: visibility 0s linear .12s, opacity .12s ease;
z-index: 3;
&.active {
visibility: visible;
opacity: 1;
}
}
}
>.ui-grid-loading {
position: absolute;
@ -411,7 +404,7 @@
display: flex;
justify-content: center;
align-items: center;
z-index: 1;
z-index: 3;
>div {
background-color: var(--loading-fore-color);
@ -426,6 +419,10 @@
}
}
>.ui-drop-box {
max-width: 300px;
}
>.filter-panel {
position: absolute;
width: 200px;