Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Polish gallery inspector, inspector headings, slider #2020

Merged
merged 5 commits into from
Jul 31, 2017
Merged

Polish gallery inspector, inspector headings, slider #2020

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ba9a479
Change "Save" to "Save Draft", to ambiguate
jasmussen Jul 26, 2017
7e23092
Polish inspector headings, add heading to CSS class.
jasmussen Jul 26, 2017
6c030d6
Style range slider.
jasmussen Jul 26, 2017
fa9f195
Address feedback
jasmussen Jul 27, 2017
3d0906c
Fix test.
jasmussen Jul 31, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion blocks/inspector-controls/base-control/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
.blocks-base-control {
margin: 1em 0 1.5em 0;
margin: 0 0 1.5em 0;
}

.blocks-base-control__label {
Expand Down
95 changes: 93 additions & 2 deletions blocks/inspector-controls/range-control/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,103 @@
justify-content: center;
}

// creating mixin because we can't do multiline variables, and we can't comma-group the selectors for styling the range slider
@mixin range-thumb() {
height: 18px;
width: 18px;
border-radius: 50%;
cursor: pointer;
background: $dark-gray-500;
border: 4px solid transparent;
background-clip: padding-box;
box-sizing: border-box;
}

@mixin range-track() {
height: 3px;
cursor: pointer;
background: $light-gray-500;
border-radius: 1.5px;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd consider to do border-radius: 50%;

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I did that initially, but because the track isn't a square that means the whole track becomes an oval.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah, right!

}

.blocks-range-control__input {
width: 100%;
margin-left: $item-spacing;
padding: 0;
-webkit-appearance: none;
background: transparent;

/**
* Thumb
*/

// webkit
&::-webkit-slider-thumb {
-webkit-appearance: none;
@include range-thumb();
margin-top: -7px; // necessary for chrome
}

// moz
&::-moz-range-thumb {
@include range-thumb();
}

// ie
&::-ms-thumb {
@include range-thumb();
margin-top: 0; // necessary because edge inherits from chrome
height: 14px;
width: 14px;
border: 2px solid transparent;
}

&:focus {
outline: none;
}

// webkit
&:focus::-webkit-slider-thumb {
box-shadow: $button-focus-style;;
}

// moz
&:focus::-moz-range-thumb {
box-shadow: $button-focus-style;;
}

// ie
&:focus::-ms-thumb {
box-shadow: $button-focus-style;;
}

/**
* Track
*/

// webkit
&::-webkit-slider-runnable-track {
@include range-track();
margin-top: -4px;
}

// moz
&::-moz-range-track {
@include range-track();
}

// ie
&::-ms-track {
margin-top: -4px;
background: transparent;
border-color: transparent;
color: transparent;
@include range-track();
}
}

.blocks-range-control__hint {
display: inline-block;
margin-left: 10px;
margin-left: $item-spacing;
font-weight: 500;
}
}
2 changes: 1 addition & 1 deletion editor/header/saved-state/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ export function SavedState( { isNew, isPublished, isDirty, isSaving, isSaveable,

return (
<Button className={ classnames( className, 'button-link' ) } onClick={ onClick }>
{ __( 'Save' ) }
{ __( 'Save Draft' ) }
</Button>
);
}
Expand Down
4 changes: 2 additions & 2 deletions editor/header/saved-state/test/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ describe( 'SavedState', () => {
);

expect( wrapper.name() ).toBe( 'Button' );
expect( wrapper.childAt( 0 ).text() ).toBe( 'Save' );
expect( wrapper.childAt( 0 ).text() ).toBe( 'Save Draft' );
wrapper.simulate( 'click' );
expect( statusSpy ).toHaveBeenCalledWith( 'draft' );
expect( saveSpy ).toHaveBeenCalled();
Expand All @@ -87,7 +87,7 @@ describe( 'SavedState', () => {
);

expect( wrapper.name() ).toBe( 'Button' );
expect( wrapper.childAt( 0 ).text() ).toBe( 'Save' );
expect( wrapper.childAt( 0 ).text() ).toBe( 'Save Draft' );
wrapper.simulate( 'click' );
expect( statusSpy ).not.toHaveBeenCalled();
expect( saveSpy ).toHaveBeenCalled();
Expand Down
11 changes: 7 additions & 4 deletions editor/sidebar/block-inspector/class-name.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,10 +36,13 @@ class BlockInspectorClassName extends Component {
}

return (
<InspectorControls.TextControl
label={ __( 'Additional CSS Class' ) }
value={ selectedBlock.attributes.className }
onChange={ this.setClassName } />
<div>
<h3>{ __( 'Block Settings' ) }</h3>
<InspectorControls.TextControl
label={ __( 'Additional CSS Class' ) }
value={ selectedBlock.attributes.className }
onChange={ this.setClassName } />
</div>
);
}
}
Expand Down