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

Update notice styles to match Calypso #9080

Merged
merged 3 commits into from
Mar 22, 2018
Merged

Update notice styles to match Calypso #9080

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6ee0644
update notice styles
dereksmart Mar 19, 2018
4299907
update hard-coded notice html
dereksmart Mar 19, 2018
85db67b
remove underlines
dereksmart Mar 21, 2018
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
6 changes: 3 additions & 3 deletions _inc/client/components/admin-notices/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ class AdminNotices extends React.Component {
if ( $vpDeactivationNotice.length > 0 ) {
$vpDeactivationNotice.each( function() {
const $notice = jQuery( this ).addClass( 'dops-notice is-success is-dismissable' ).removeClass( 'wrap vp-notice notice notice-success' );
const icon = '<svg class="gridicon gridicons-notice dops-notice__icon" height="24" width="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g><path d="M9 19.414l-6.707-6.707 1.414-1.414L9 16.586 20.293 5.293l1.414 1.414"/></g></svg>';
const icon = '<span class="dops-notice__icon-wrapper"><svg class="gridicon gridicons-notice dops-notice__icon" height="24" width="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g><path d="M9 19.414l-6.707-6.707 1.414-1.414L9 16.586 20.293 5.293l1.414 1.414"/></g></svg></span>';
$notice.wrapInner( '<span class="dops-notice__content">' );
$notice.find( '.dops-notice__content' ).before( icon ).css( 'display', 'block' );
$notice.find( '.dops-notice__content' ).after( dismiss );
Expand All @@ -33,8 +33,8 @@ class AdminNotices extends React.Component {
const $warningOrSuccess = $success ? 'is-success' : 'is-warning';
const $notice = jQuery( this ).addClass( 'dops-notice vp-notice-jp ' + $warningOrSuccess ).removeClass( 'wrap vp-notice' );
const icon = $success
? '<svg class="gridicon gridicons-notice dops-notice__icon" height="24" width="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g><path d="M9 19.414l-6.707-6.707 1.414-1.414L9 16.586 20.293 5.293l1.414 1.414"/></g></svg>'
: '<svg class="gridicon gridicons-notice dops-notice__icon" height="24" width="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g><path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm1 15h-2v-2h2v2zm0-4h-2l-.5-6h3l-.5 6z"></path></g></svg>';
? '<span class="dops-notice__icon-wrapper"><svg class="gridicon gridicons-notice dops-notice__icon" height="24" width="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g><path d="M9 19.414l-6.707-6.707 1.414-1.414L9 16.586 20.293 5.293l1.414 1.414"/></g></svg></span>'
: '<span class="dops-notice__icon-wrapper"><svg class="gridicon gridicons-notice dops-notice__icon" height="24" width="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g><path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm1 15h-2v-2h2v2zm0-4h-2l-.5-6h3l-.5 6z"></path></g></svg></span>';
$notice.wrapInner( '<span class="dops-notice__content">' );
$notice.find( '.dops-notice__content' ).before( icon );
$notice.find( '.vp-message' ).removeClass( 'vp-message' ).addClass( 'dops-notice__text' );
Expand Down
36 changes: 15 additions & 21 deletions _inc/client/components/global-notices/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,8 @@
@import '../../scss/z-index';

.global-notices {
overflow: hidden;
text-align: right;
//pointer-events: none;
pointer-events: none;

z-index: z-index( 'root', '.global-notices' );
position: fixed;
Expand Down Expand Up @@ -39,43 +38,38 @@
margin-bottom: 0;
text-align: left;
pointer-events: auto;
border-radius: 0;
box-shadow: 0 2px 5px rgba( 0, 0, 0, 0.2 ),
0 0 56px rgba( 0, 0, 0, 0.15 );

.dops-notice__icon-wrapper {
border-radius: 0;
}

@include breakpoint( ">660px" ) {
display: flex;
border-radius: 20px;
overflow: hidden;
margin-bottom: 24px;
}
}

.global-notices .dops-notice__icon {

@include breakpoint( ">660px" ) {
padding: 8px 0 8px 16px;
}
}
border-radius: 3px;

.global-notices .dops-notice__content {
flex-basis: auto;
flex-grow: 1;

@include breakpoint( ">660px" ) {
padding: 9px 13px;
.dops-notice__icon-wrapper {
border-radius: 3px 0 0 3px;
}
}
}

.global-notices .dops-notice a.dops-notice__action {

@include breakpoint( ">660px" ) {
font-size: 14px;
padding: 9px 16px;
padding: 13px 16px;
}
}

.global-notices .dops-notice__dismiss {
flex-shrink: 0;

@include breakpoint( ">660px" ) {
padding: 8px 16px;
padding: 13px 16px 0;
}
}
}
35 changes: 20 additions & 15 deletions _inc/client/components/notice/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,32 +78,37 @@ export default class SimpleNotice extends React.Component {
};

render() {
const { status, className, isCompact, showDismiss } = this.props;
const {
children,
className,
icon,
isCompact,
onDismissClick,
showDismiss = ! isCompact, // by default, show on normal notices, don't show on compact ones
status,
text,
dismissText
} = this.props;
const classes = classnames( 'dops-notice', status, className, {
'is-compact': isCompact,
'is-dismissable': showDismiss
'is-dismissable': showDismiss,
} );

const { icon, text, children, onDismissClick, dismissText } = this.props;

return (
<div className={ classes }>
<Gridicon className="dops-notice__icon" icon={ icon || this.getIcon() } size={ 24 } />
<span className="dops-notice__icon-wrapper">
<Gridicon className="dops-notice__icon" icon={ icon || this.getIcon() } size={ 24 } />
</span>
<span className="dops-notice__content">
<span className="dops-notice__text">
{ text ? text : children }
</span>
<span className="dops-notice__text">{ text ? text : children }</span>
</span>
{ text ? children : null }
{ showDismiss && (
<span
role="button"
tabIndex="0"
onClick={ onDismissClick }
onKeyDown={ onKeyDownCallback( onDismissClick ) }
className="dops-notice__dismiss">
<span role="button" onKeyDown={ onKeyDownCallback( onDismissClick ) } tabIndex="0" className="dops-notice__dismiss" onClick={ onDismissClick }>
<Gridicon icon="cross" size={ 24 } />
<span className="screen-reader-text">{ dismissText }</span>
<span className="dops-notice__screen-reader-text screen-reader-text">
{ dismissText }
</span>
</span>
) }
</div>
Expand Down
Loading