Skip to content

Commit

Permalink
border option changes #180
Browse files Browse the repository at this point in the history
  • Loading branch information
@bruno12mota
bruno12mota committed Dec 4, 2015
1 parent 6eae018 commit a914be2
Show file tree
Hide file tree
Showing 5 changed files with 71 additions and 119 deletions.
83 changes: 34 additions & 49 deletions assets/less/components/data-types/border-picker.less
View file
Original file line number Diff line number Diff line change
@@ -1,17 1,12 @@
.border-picker {
@btnsSize: 25px;
@btnsSpacing: 3px;
@total: @btnsSize * 3 @btnsSpacing * 2;

display: table;
width: 100%;
table-layout: fixed;
margin-top: 10px;
@total: 42px;
@btnSize: 20px;
@nonActive: #979797;

// Parts
.toggles, .inputs {
display: table-cell;
vertical-align: middle;
.toggles {
display: inline-block;
vertical-align: top;
}

.toggles {
Expand All @@ -20,77 15,67 @@
width: @total;
}

.inputs {
padding-left: 25px;
padding-bottom: 13px;

>* {
margin-bottom: 6px;
}
.number-input, .color-picker {
display: inline-block;
vertical-align: right;
margin-left: 10px;
}

.sub-label {
font-size: 9px;
color: #616363;
text-transform: uppercase;
margin-bottom: 5px;
}
.border-style {
margin-top: 15px;
text-align: right;
}

// Toggle buttons
.toggle {
position: absolute;
width: @btnsSize;
height: @btnsSize;
border: 1px solid @pageBuilderChromeBorders;
text-align: center;
display: inline-block;
cursor: pointer;
width: @btnSize;
height: @btnSize;

i {
color: #cccccc;
font-size: 15px;
line-height: 23px;
}

@center: @total / 2 - @btnsSize / 2;
@center: 11px;

&.top {
left: @center;
top: 0;
border-top: 2px solid @nonActive;
}
&.left {
left: 0;
top: @center;
border-left: 2px solid @nonActive;
}
&.center {
left: @center;
top: @center;
left: @center 3px;
top: @center 3px;
width: 14px;
height: 14px;
border: 2px solid @nonActive;
}
&.right {
right: 0;
top: @center;
border-right: 2px solid @nonActive;
}
&.bottom {
left: @center;
top: 56px;
bottom: 0;
border-bottom: 2px solid @nonActive;
}

&:hover {
background-color: #3f4249;
i {
color: #ffffff;
}
border-color: #ffffff;
}
&.selected {
border-color: @adminPrimary;
background-color: #3f4249;
i {
color: #ffffff;
}
border-color: #ffffff;
}
&.active {
i {
color: @adminPrimary;
}
border-color: @adminPrimary;
}
&.selected.active {
border-color: #ffffff;
}
}
}
60 changes: 16 additions & 44 deletions assets/less/components/data-types/border-style.less
View file
Original file line number Diff line number Diff line change
@@ -1,6 1,8 @@
.border-style {
@btnsSize: 25px;
@btnsSpacing: 3px;
@btnsSize: 16px;
@btnsSpacing: 14px;
@nonActive: #979797;
@active: #ffffff;

> div {
position: relative;
Expand All @@ -13,57 15,27 @@
cursor: pointer;
text-align: center;

i {
font-size: 14px;
line-height: @btnsSize;
color: #cccccc;
}

&:after {
content: ' ';
position: absolute;
top: @btnsSize / 2 - 1px;
left: 3px;
right: 3px;
height: 0px;
border: 0;
}

&.solid, &.dashed, &.dotted {
&:after {
border-bottom: 1px solid #cccccc;
}
}
&.dashed {
&:after {
border-style: dashed;
}
border-style: dashed;
}
&.dotted {
&:after {
border-style: dotted;
}
border-style: dotted;
}
&.double {
border-width: 3px;
border-style: double;
}

&:last-child {
margin-right: 0;
}

&:hover {
background-color: #3f4249;
i {
color: #ffffff;
}
&:after {
border-color: #ffffff;
}
border-color: @active;
}

&.active {
background-color: #3f4249;
border-color: @adminPrimary;
i {
color: @adminPrimary;
}
&:after {
border-color: @adminPrimary;
}
border-color: @active;
}
}
}
2 changes: 0 additions & 2 deletions assets/less/components/data-types/color-palette-picker/index.less
View file
Original file line number Diff line number Diff line change
@@ -1,6 1,4 @@
.color-picker {
width: 100%;

@import './info.less';
@import './edit.less';
}
39 changes: 19 additions & 20 deletions lib/components/data-types/border-picker.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,33 39,33 @@ export default class BorderPicker extends Component {
}

parseValue (value) {
var result = {
const result = {
top: {
style: 'none',
style: 'solid',
width: 1,
color: {
value: '#000000',
opacity: 100
}
},
left: {
style: 'none',
style: 'solid',
width: 1,
color: {
value: '#000000',
opacity: 100
}
},
right: {
style: 'none',
style: 'solid',
width: 1,
color: {
value: '#000000',
opacity: 100
}
},
bottom: {
style: 'none',
style: 'solid',
width: 1,
color: {
value: '#000000',
Expand Down Expand Up @@ -119,35 119,34 @@ export default class BorderPicker extends Component {
value = values.top;

if (inactive) {
value.style = 'none';
value.style = 'solid';
}
}

return (
<div>
<div className='border-picker'>
<div className='toggles'>
{this.renderToggleButton('top', 'border_top', !values.equal)}
{this.renderToggleButton('left', 'border_left', !values.equal)}
{this.renderToggleButton('center', 'border_outer', values.equal)}
{this.renderToggleButton('right', 'border_right', !values.equal)}
{this.renderToggleButton('bottom', 'border_bottom', !values.equal)}
</div>
<div className='inputs'>
<BorderStyle value={value.style} onChange={this.onInputChange.bind(this, 'style')} />
<NumberInput value={value.width} onChange={this.onInputChange.bind(this, 'width')} inactive={inactive} />
{this.renderToggleButton('top', !values.equal)}
{this.renderToggleButton('left', !values.equal)}
{this.renderToggleButton('right', !values.equal)}
{this.renderToggleButton('bottom', !values.equal)}
{this.renderToggleButton('center', values.equal)}
</div>
<NumberInput className='micro' value={value.width} onChange={this.onInputChange.bind(this, 'width')} inactive={inactive} />
<ColorPicker value={value.color} onChange={this.onInputChange.bind(this, 'color')} side='right' />
<BorderStyle value={value.style} onChange={this.onInputChange.bind(this, 'style')} />
</div>
<ColorPicker className='small' value={value.color} onChange={this.onInputChange.bind(this, 'color')} />
</div>
);
}

renderToggleButton (pos, icon, active) {
renderToggleButton (pos, active) {
return (
<div className={cx('toggle', pos, this.state.selected === pos && 'selected', active && 'active')} onClick={this.changeSelected.bind(this, pos)}>
<i className='material-icons'>{icon}</i>
</div>
<div
className={cx('toggle', pos, this.state.selected === pos && 'selected', active && 'active')}
onClick={this.changeSelected.bind(this, pos)}
/>
);
}
}
6 changes: 2 additions & 4 deletions lib/components/data-types/border-style.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,19 16,17 @@ export default class BorderStyle extends Component {
render () {
return (
<div className='border-style'>
{this.renderOption('none')}
{this.renderOption('solid')}
{this.renderOption('dashed')}
{this.renderOption('dotted')}
{this.renderOption('double')}
</div>
);
}

renderOption (type) {
return (
<div className={cx(type, this.props.value === type && 'active')} onClick={this.onClick.bind(this, type)}>
{type === 'none' && <i className='material-icons'>close</i>}
</div>
<div className={cx(type, this.props.value === type && 'active')} onClick={this.onClick.bind(this, type)} />
);
}
}

0 comments on commit a914be2

Please sign in to comment.