Skip to content

Commit

Permalink
ls
Browse files Browse the repository at this point in the history
  • Loading branch information
@caiwuu
caiwuu committed Mar 18, 2024
1 parent 32e56f5 commit 67fb96d
Show file tree
Hide file tree
Showing 3 changed files with 72 additions and 73 deletions.
10 changes: 5 additions & 5 deletions packages/editor/toolBar/compinents/colorPicker/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import Palette from './palette'
import Hue from './hue'
import Hue from './picker'
import { createRef, Component } from '@typex/core'
const colors = [
["#FFFFFF", // 白色
Expand Down Expand Up @@ -35,9 +35,9 @@ export default class ColorPicker extends Component {
}
render () {
return (
<div style="background:#eee;padding:10px">
<div >
{colors.map(row => <div style="display:flex;width:228px;flex-wrap: wrap;justify-content:space-between;box-sizing:border-box;margin:4px 0">
<div class="color-picker-block">
<div class="colors-block">
{colors.map(row => <div style="display:flex;flex-wrap: wrap;justify-content:space-between;box-sizing:border-box;margin:4px 0">
{row.map(ele =>
<div style={`position: relative;${isSelected ? 'width: 16px; height: 16px' : 'width: 18px; height: 18px'}; margin: 1px;`}>
<div style={`background:${ele}; width: 100%; height: 100%; border-radius: 20%;`}></div>
Expand All @@ -47,7 +47,7 @@ export default class ColorPicker extends Component {
</div>)}
</div>
<div class="divider divider-height-1 divider-dashed divider-color-gray"></div>
<div style='font-size:0;'>
<div class="picker-block" style='font-size:0;'>
<Palette ref={this.paletteRef} hue={this.hueRef}></Palette>
<Hue ref={this.hueRef} color={this.props.color} paletteRef={this.paletteRef}></Hue>
</div>
Expand Down
14 changes: 7 additions & 7 deletions ...tor/toolBar/compinents/colorPicker/hue.js → .../toolBar/compinents/colorPicker/picker.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,20 +28,20 @@ export default class Hue extends Component {
return (
<div class='picker'>
<div class='left'>
<div ref={this.hueContainer} onMousedown={this.handleHueMouseDown} class='hue'>
<div style={`left:${this.state.x}px`} class='hue-picker'></div>
<div ref={this.hueContainer} onMousedown={this.handleHueMouseDown} class='hue-picker slider-bar'>
<div style={`left:${this.state.x}px`} class='cursor'></div>
</div>
<div
onMousedown={this.handleTransparencyMouseDown}
class='transparency'
class='transparency-picker slider-bar'
style='margin-top:4px'
>
<div
class='transparency-picker-bg'
class='transparency-gradient'
ref={this.transparencyContainer}
style={`background: linear-gradient(to right, rgba(${this.state.R},${this.state.G},${this.state.B},0) 0%, rgba(${this.state.R},${this.state.G},${this.state.B},1)`}
></div>
<div ref={this.transparencyContainer} style='position:absolute;top:0'>
<div style={`left:${this.state.x2}px;`} class='transparency-picker'></div>
>
<div style={`left:${this.state.x2}px;`} class='cursor'></div>
</div>
</div>
</div>
Expand Down
121 changes: 60 additions & 61 deletions packages/editor/toolBar/compinents/toolBar.styl
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,26 @@
// 工具栏样式
.editor-tool-bar
border solid 1px #eee
background rgb(40 40 40)
padding 6px

.icon
width 1.2em
height 1.2em
vertical-align -0.15em
fill currentColor
overflow hidden
border solid 1px #eee
.editor-tool-bar-item
padding 4px 10px
display inline-block
border-radius 4px
cursor pointer
user-select none
background rgb(40 40 40)
padding 6px
#editor-content
padding 16px
min-height 200px

.editor-tooltip
position relative
display inline-block

.editor-tooltip .tooltiptext
opacity 0
width 60px
Expand Down Expand Up @@ -57,72 +58,70 @@
top 100%
border-color black transparent transparent transparent

// 组件
// 颜色选择器
.color-picker-block
background:#eee
padding:10px
.picker
display flex
justify-content space-between
margin-top 4px
.left
.hue
font-size 0
height 10px
width 200px
background linear-gradient(to left, red, #ff0, lime, cyan, blue, #f0f, red)
.hue-picker
display inline-block
position relative
width 6px
height 12px
transform translate(-6px, -1px)
background-color rgb(248, 248, 248)
box-shadow rgba(0, 0, 0, 0.37) 0px 1px 4px 0px
.transparency
.left
.cursor
display inline-block
position relative
width 6px
height 12px
transform translate(-6px, -1px)
background-color rgb(248, 248, 248)
box-shadow rgba(0, 0, 0, 0.37) 0px 1px 4px 0px
.slider-bar
font-size 0
height 10px
width 200px
.hue-picker
background linear-gradient(to left, red, #ff0, lime, cyan, blue, #f0f, red)
.transparency-picker
position relative
background url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=') left center
.transparency-gradient
// position:absolute;top:0
height 100%
.right
position relative
font-size 0
height 10px
width 200px
background url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=') left center
.transparency-picker-bg
height 100%
.transparency-picker
display inline-block
position relative
width 6px
height 12px
transform translate(-6px, -1px)
background-color rgb(248, 248, 248)
box-shadow rgba(0, 0, 0, 0.37) 0px 1px 4px 0px
.right
position relative
cursor pointer
.color-block
width 24px
height 24px
position absolute
top 0
.color-block-bg
width 24px
height 24px
background url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=') left center
cursor pointer
.color-block
width 24px
height 24px
position absolute
top 0
.color-block-bg
width 24px
height 24px
background url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=') left center
.palette
width 228px
height 150px
overflow hidden
border #eeeeee solid 1px
.palette-picker
pointer-events none
display inline-block
position relative
width 12px
height 12px
border-radius 50%
box-shadow rgb(255 255 255) 0px 0px 0px 1px inset
transform translate(-6px, -6px)
/* 分割线的基础样式 */
.palette-picker
pointer-events none
display inline-block
position relative
width 12px
height 12px
border-radius 50%
box-shadow rgb(255 255 255) 0px 0px 0px 1px inset
transform translate(-6px, -6px)


// 分割线的基础样式
.divider {
margin: 10px 0; /* 分割线上下各留出10像素的间距 */
margin: 10px 0; // 分割线上下各留出10像素的间距
}

/* 定义不同高度的分割线 */
// 定义不同高度的分割线
.divider-height-1 {
border-top-width: 1px;
}
Expand All @@ -131,7 +130,7 @@
border-top-width: 2px;
}

/* 定义不同颜色的分割线 */
// 定义不同颜色的分割线
.divider-color-black {
border-top-color: #000;
}
Expand All @@ -143,7 +142,7 @@
border-top-color: #aaaaaa;
}

/* 定义实线和虚线分割线 */
// 定义实线和虚线分割线
.divider-solid {
border-top-style: solid;
}
Expand Down

0 comments on commit 67fb96d

Please sign in to comment.