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

Framework: <GlobalNotices> visual design update #1415

Closed
wants to merge 3 commits into from
Closed

Framework: <GlobalNotices> visual design update #1415

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
f24db71
Add <GloablNotices> component.
mtias Dec 9, 2015
36ded73
Style global notices as pill shaped notices.
mtias Dec 9, 2015
c6f42b1
Add style file.
mtias Dec 10, 2015
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
1 change: 1 addition & 0 deletions assets/stylesheets/_components.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@
@import 'components/foldable-card/style';
@import 'components/follow-button/style';
@import 'components/gauge/style';
@import 'components/global-notices/style';
@import 'components/gravatar/style';
@import 'components/gridicon/style';
@import 'components/header-cake/style';
Expand Down
14 changes: 4 additions & 10 deletions client/notices/notices-list.jsx → client/components/global-notices/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
* External Dependencies
*/
import React from 'react';
import classNames from 'classnames';
import debugModule from 'debug';

/**
Expand All @@ -12,7 +11,7 @@ import Notice from 'components/notice';
import NoticeAction from 'components/notice/notice-action';
import notices from 'notices';
import observe from 'lib/mixins/data-observe';
import DeleteSiteNotices from './delete-site-notices';
import DeleteSiteNotices from 'notices/delete-site-notices';

const debug = debugModule( 'calypso:notices' );

Expand Down Expand Up @@ -104,14 +103,9 @@ export default React.createClass( {
return null;
}
return (
<div>
<div id={ this.props.id } className={ classNames( 'notices-list', { 'is-pinned': this.state.pinned } ) }>
<DeleteSiteNotices />
{ noticesList }
</div>
{ this.state.pinned && ! this.props.forcePinned
? <div className="notices-list__whitespace" />
: null }
<div id={ this.props.id } className="global-notices">
<DeleteSiteNotices />
{ noticesList }
</div>
);
}
Expand Down
21 changes: 21 additions & 0 deletions client/components/global-notices/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
.global-notices {
overflow: hidden;

z-index: 180;
position: fixed;
top: 47px + 32px;
right: 48px;

@include breakpoint( "<960px" ) {
}

@include breakpoint( "<660px" ) {
top: 16px;
}
}

.global-notices .notice {
border-radius: 50px;
display: inline-flex;
z-index: 180;
}
2 changes: 1 addition & 1 deletion client/components/overlay/overlay.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ var React = require( 'react/addons' ),
* Internal dependencies
*/
var Toolbar = require( './toolbar' ),
NoticesList = require( 'notices/notices-list' ),
NoticesList = require( 'components/global-notices' ),
notices = require( 'notices' ),
page = require( 'page' ),
TitleData = require( 'components/data/screen-title' );
Expand Down
4 changes: 2 additions & 2 deletions client/layout/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ var React = require( 'react' ),
*/
var Masterbar = require( './masterbar' ),
observe = require( 'lib/mixins/data-observe' ),
NoticesList = require( 'notices/notices-list' ),
GlobalNotices = require( 'components/global-notices' ),
notices = require( 'notices' ),
translator = require( 'lib/translator-jumpstart' ),
TranslatorInvitation = require( './community-translator/invitation' ),
Expand Down Expand Up @@ -110,7 +110,7 @@ module.exports = React.createClass( {
</Welcome>
<InviteMessage sites={ this.props.sites }/>
<EmailVerificationNotice user={ this.props.user } />
<NoticesList id="notices" notices={ notices.list } forcePinned={ 'post' === this.state.section } />
<GlobalNotices id="notices" notices={ notices.list } forcePinned={ 'post' === this.state.section } />
Copy link
Contributor

Choose a reason for hiding this comment

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

We need both of these components alive for now
Moving from old notices to new will take A LOT of time, because it involves connecting every component that sends a notice and is impossible to do in one PR
So I propose for the time beeing not touching notices-list and introducing them side by side.

Copy link
Contributor

Choose a reason for hiding this comment

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

We can also try to rewrite this new GlobalNotice component to pull and merge data both from old notices data store and new redux store.
This will probably be the best approach

Copy link
Member Author

Choose a reason for hiding this comment

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

I'm not really touching notices-list, just renaming, cleaning up the is-pinned attribute (since the new design will always be pinned).

<TranslatorInvitation isVisible={ showInvitation } />
<div id="primary" className="wp-primary wp-section" />
<div id="secondary" className="wp-secondary" />
Expand Down
4 changes: 2 additions & 2 deletions client/layout/logged-out.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ var React = require( 'react' ),
* Internal dependencies
*/
var Masterbar = require( './masterbar' ),
NoticesList = require( 'notices/notices-list' ),
GlobalNotices = require( 'components/global-notices' ),
notices = require( 'notices' );

module.exports = React.createClass( {
Expand All @@ -31,7 +31,7 @@ module.exports = React.createClass( {
<div className={ classes }>
<Masterbar />
<div id="content" className="wp-content">
<NoticesList id="notices" notices={ notices.list } />
<GlobalNotices id="notices" notices={ notices.list } />
<div id="primary" className="wp-primary wp-section" />
<div id="secondary" className="wp-secondary" />
</div>
Expand Down
2 changes: 1 addition & 1 deletion client/my-sites/site-settings/form-base.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -153,7 +153,7 @@ module.exports = {
}
this.setState( { submittingForm: false } );
} else {
notices.success( this.translate( 'Settings saved successfully!' ) );
notices.success( this.translate( 'Settings saved!' ) );
this.markSaved();
//for dirtyFields, see lib/mixins/dirty-linked-state
this.setState( { submittingForm: false, dirtyFields: [] } );
Expand Down
30 changes: 0 additions & 30 deletions client/notices/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,33 +1,3 @@
.notices-list {
overflow: hidden;

&.is-pinned {
width: calc( 100% - 272px - 32px - 32px );
z-index: 180;
position: fixed;
top: 47px + 32px;

.notice {
z-index: 180;
}

@include breakpoint( "<960px" ) {
width: calc( 100% - 228px - 24px - 24px );
}

@include breakpoint( "<660px" ) {
top: 16px;
width: calc( 100% - 16px );
}
}
}

.notices-list__whitespace {
height: 71px;
width: 100%;
display: block;
}

.site-notice {
display: block;
line-height: 1.8;
Expand Down