guoshujing/dooring
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat:add left component hover

Browse Source
This commit is contained in:
zx.xiao
2021-08-18 20:10:27 +08:00
parent 8d23f9477c
commit 23b1d39276
2 changed files with 164 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
packages/dooringx-example/src/plugin/index.tsx
View File

@@ -1,8 +1,8 @@
/* /*
* @Author: yehuozhili * @Author: yehuozhili
* @Date: 2021-02-27 21:33:36 * @Date: 2021-02-27 21:33:36
* @LastEditors: yehuozhili * @LastEditors: Please set LastEditors
* @LastEditTime: 2021-08-12 14:43:05 * @LastEditTime: 2021-08-18 19:54:56
* @FilePath: \dooringx\packages\dooringx-example\src\plugin\index.tsx * @FilePath: \dooringx\packages\dooringx-example\src\plugin\index.tsx
*/ */
@@ -19,6 +19,7 @@ const LeftRegistMap: LeftRegistComponentMapItem[] = [
type: 'basic', type: 'basic',
component: 'button', component: 'button',
img: 'icon-anniu', img: 'icon-anniu',
imgCustom: <PlayCircleOutlined />,
displayName: '按钮', displayName: '按钮',
urlFn: () => import('./registComponents/button'), urlFn: () => import('./registComponents/button'),
}, },
@@ -58,7 +59,7 @@ export const defaultConfig: Partial<InitConfig> = {
{ {
type: 'style', type: 'style',
icon: ( icon: (
<div className="right-tab-item" style={{ width: 50, textAlign: 'center' }}> <div className='right-tab-item' style={{ width: 50, textAlign: 'center' }}>
外观 外观
</div> </div>
), ),
@@ -66,7 +67,7 @@ export const defaultConfig: Partial<InitConfig> = {
{ {
type: 'animate', type: 'animate',
icon: ( icon: (
<div className="right-tab-item" style={{ width: 50, textAlign: 'center' }}> <div className='right-tab-item' style={{ width: 50, textAlign: 'center' }}>
动画 动画
</div> </div>
), ),
@@ -74,7 +75,7 @@ export const defaultConfig: Partial<InitConfig> = {
{ {
type: 'fn', type: 'fn',
icon: ( icon: (
<div className="right-tab-item" style={{ width: 50, textAlign: 'center' }}> <div className='right-tab-item' style={{ width: 50, textAlign: 'center' }}>
函数 函数
</div> </div>
), ),
@@ -82,7 +83,7 @@ export const defaultConfig: Partial<InitConfig> = {
{ {
type: 'actions', type: 'actions',
icon: ( icon: (
<div className="right-tab-item" style={{ width: 50, textAlign: 'center' }}> <div className='right-tab-item' style={{ width: 50, textAlign: 'center' }}>
事件 事件
</div> </div>
), ),

301
packages/dooringx-lib/src/index.less
View File

@@ -1,197 +1,208 @@
.yhLeftrender { .yhLeftrender {
overflow: auto; overflow: auto;
.leftco { .leftco {
padding: 10px; padding: 10px;
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
flex-wrap: wrap; flex-wrap: wrap;
.coitem { .coitem {
margin: 5px; margin: 5px;
.redbox {
height: 68px;
width: 68px;
background: var(--redbox-color);
// line-height: 20px;
display: flex;
align-items: center;
justify-content: center;
#icon-checkbox, .redbox {
#icon-tabs, height: 68px;
#icon-jiantou path { width: 68px;
fill: currentColor; // background: var(--redbox-color);
} background-color: #F7F8FA;
} // line-height: 20px;
} display: flex;
} align-items: center;
justify-content: center;
#icon-checkbox,
#icon-tabs,
#icon-jiantou path {
fill: currentColor;
}
&:hover {
cursor: pointer;
}
}
}
}
} }
.yh_container { .yh_container {
// ::selection { // ::selection {
// color: inherit; // color: inherit;
// background-color: inherit; // background-color: inherit;
// } // }
user-select: none; user-select: none;
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none; -moz-user-select: none;
-ms-user-select: none; -ms-user-select: none;
:global(.am-list-item) { :global(.am-list-item) {
background-color: rgba(255, 255, 255, 0); background-color: rgba(255, 255, 255, 0);
} }
:global(.am-list-body) { :global(.am-list-body) {
background-color: rgba(255, 255, 255, 0); background-color: rgba(255, 255, 255, 0);
} }
:global(.ant-input) { :global(.ant-input) {
background-color: rgba(255, 255, 255, 0); background-color: rgba(255, 255, 255, 0);
} }
} }
.yh_container_preview { .yh_container_preview {
:global(.am-list-item) { :global(.am-list-item) {
background-color: rgba(255, 255, 255, 0); background-color: rgba(255, 255, 255, 0);
} }
:global(.am-list-body) { :global(.am-list-body) {
background-color: rgba(255, 255, 255, 0); background-color: rgba(255, 255, 255, 0);
} }
:global(.ant-input) { :global(.ant-input) {
background-color: rgba(255, 255, 255, 0); background-color: rgba(255, 255, 255, 0);
} }
} }
.yh_block_focus { .yh_block_focus {
&::before { &::before {
position: absolute; position: absolute;
top: -3px; top: -3px;
left: -3px; left: -3px;
right: -3px; right: -3px;
bottom: -3px; bottom: -3px;
content: ''; content: '';
border: 2px dashed #2196f3; border: 2px dashed #2196f3;
} }
} }
.yhTempDiv { .yhTempDiv {
background-color: #7165fa2b; background-color: #7165fa2b;
} }
.resizepoint { .resizepoint {
position: absolute; position: absolute;
height: 6px; height: 6px;
width: 6px; width: 6px;
background-color: #2196f3; background-color: #2196f3;
cursor: pointer; cursor: pointer;
border-radius: 50%; border-radius: 50%;
&.l { &.l {
left: -6px; left: -6px;
top: calc(50% - 3px); top: calc(50% - 3px);
&:hover { &:hover {
cursor: e-resize; cursor: e-resize;
} }
} }
&.r { &.r {
right: -6px; right: -6px;
top: calc(50% - 3px); top: calc(50% - 3px);
&:hover { &:hover {
cursor: e-resize; cursor: e-resize;
} }
} }
&.t { &.t {
top: -6px; top: -6px;
left: calc(50% - 3px); left: calc(50% - 3px);
&:hover { &:hover {
cursor: s-resize; cursor: s-resize;
} }
} }
&.b { &.b {
bottom: -6px; bottom: -6px;
left: calc(50% - 3px); left: calc(50% - 3px);
&:hover { &:hover {
cursor: s-resize; cursor: s-resize;
} }
} }
&.lt { &.lt {
top: -6px; top: -6px;
left: -6px; left: -6px;
&:hover { &:hover {
cursor: nw-resize; cursor: nw-resize;
} }
} }
&.lb { &.lb {
bottom: -6px; bottom: -6px;
left: -6px; left: -6px;
&:hover { &:hover {
cursor: ne-resize; cursor: ne-resize;
} }
} }
&.rb { &.rb {
bottom: -6px; bottom: -6px;
right: -6px; right: -6px;
&:hover { &:hover {
cursor: nw-resize; cursor: nw-resize;
} }
} }
&.rt { &.rt {
top: -6px; top: -6px;
right: -6px; right: -6px;
&:hover { &:hover {
cursor: ne-resize; cursor: ne-resize;
} }
} }
} }
.menuWidth.menus { .menuWidth.menus {
width: initial; width: initial;
} }
.menuStyle.menus { .menuStyle.menus {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
text-align: center; text-align: center;
height: auto; height: auto;
span:nth-child(1) {
margin-top: 10px; span:nth-child(1) {
} margin-top: 10px;
span:nth-child(2) { }
margin-left: 0;
} span:nth-child(2) {
margin-left: 0;
}
} }
.menu_footer { .menu_footer {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
position: relative; position: relative;
bottom: 0; bottom: 0;
} }
.rotate { .rotate {
position: absolute; position: absolute;
top: -35px; top: -35px;
left: calc(50% - 10px); left: calc(50% - 10px);
cursor: grab; cursor: grab;
font-size: 20px; font-size: 20px;
} }