corysanin/tubestation
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Bug 1059021: Added sign in/up link to the Loop panel footer. Patch by MattN and nperriault. r=MattN,r=Standard8

Browse Source
This commit is contained in:
Matthew Noorenberghe
2014-08-29 14:11:54 +01:00
parent 9bbb35797d
commit 7994528ea7
7 changed files with 97 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
browser/components/loop/content/js/panel.js
View File

@@ -77,24 +77,22 @@ loop.panel = (function(_, mozL10n) {
__("display_name_available_status");
return (
React.DOM.div({className: "footer"},
React.DOM.div({className: "do-not-disturb"},
React.DOM.div({className: "dnd-status", onClick: this.showDropdownMenu},
React.DOM.span(null, availabilityText),
React.DOM.i({className: availabilityStatus})
React.DOM.div({className: "do-not-disturb"},
React.DOM.p({className: "dnd-status", onClick: this.showDropdownMenu},
React.DOM.span(null, availabilityText),
React.DOM.i({className: availabilityStatus})
),
React.DOM.ul({className: availabilityDropdown,
onMouseLeave: this.hideDropdownMenu},
React.DOM.li({onClick: this.changeAvailability("available"),
className: "dnd-menu-item dnd-make-available"},
React.DOM.i({className: "status status-available"}),
React.DOM.span(null, __("display_name_available_status"))
),
React.DOM.ul({className: availabilityDropdown,
onMouseLeave: this.hideDropdownMenu},
React.DOM.li({onClick: this.changeAvailability("available"),
className: "dnd-menu-item dnd-make-available"},
React.DOM.i({className: "status status-available"}),
React.DOM.span(null, __("display_name_available_status"))
),
React.DOM.li({onClick: this.changeAvailability("do-not-disturb"),
className: "dnd-menu-item dnd-make-unavailable"},
React.DOM.i({className: "status status-dnd"}),
React.DOM.span(null, __("display_name_dnd_status"))
)
React.DOM.li({onClick: this.changeAvailability("do-not-disturb"),
className: "dnd-menu-item dnd-make-unavailable"},
React.DOM.i({className: "status status-dnd"}),
React.DOM.span(null, __("display_name_dnd_status"))
)
)
)
@@ -272,6 +270,10 @@ loop.panel = (function(_, mozL10n) {
callUrl: React.PropTypes.string
},
handleSignUpLinkClick: function() {
navigator.mozLoop.logInToFxA();
},
render: function() {
return (
React.DOM.div(null,
@@ -279,7 +281,12 @@ loop.panel = (function(_, mozL10n) {
notifier: this.props.notifier,
callUrl: this.props.callUrl}),
ToSView(null),
AvailabilityDropdown(null)
React.DOM.div({className: "footer"},
AvailabilityDropdown(null),
React.DOM.a({className: "signin-link", href: "#", onClick: this.handleSignUpLinkClick},
__("panel_footer_signin_or_signup_link")
)
)
)
);
}

49
browser/components/loop/content/js/panel.jsx
View File

@@ -77,26 +77,24 @@ loop.panel = (function(_, mozL10n) {
__("display_name_available_status");
return (
<div className="footer">
<div className="do-not-disturb">
<div className="dnd-status" onClick={this.showDropdownMenu}>
<span>{availabilityText}</span>
<i className={availabilityStatus}></i>
</div>
<ul className={availabilityDropdown}
onMouseLeave={this.hideDropdownMenu}>
<li onClick={this.changeAvailability("available")}
className="dnd-menu-item dnd-make-available">
<i className="status status-available"></i>
<span>{__("display_name_available_status")}</span>
</li>
<li onClick={this.changeAvailability("do-not-disturb")}
className="dnd-menu-item dnd-make-unavailable">
<i className="status status-dnd"></i>
<span>{__("display_name_dnd_status")}</span>
</li>
</ul>
</div>
<div className="do-not-disturb">
<p className="dnd-status" onClick={this.showDropdownMenu}>
<span>{availabilityText}</span>
<i className={availabilityStatus}></i>
</p>
<ul className={availabilityDropdown}
onMouseLeave={this.hideDropdownMenu}>
<li onClick={this.changeAvailability("available")}
className="dnd-menu-item dnd-make-available">
<i className="status status-available"></i>
<span>{__("display_name_available_status")}</span>
</li>
<li onClick={this.changeAvailability("do-not-disturb")}
className="dnd-menu-item dnd-make-unavailable">
<i className="status status-dnd"></i>
<span>{__("display_name_dnd_status")}</span>
</li>
</ul>
</div>
);
}
@@ -272,6 +270,10 @@ loop.panel = (function(_, mozL10n) {
callUrl: React.PropTypes.string
},
handleSignUpLinkClick: function() {
navigator.mozLoop.logInToFxA();
},
render: function() {
return (
<div>
@@ -279,7 +281,12 @@ loop.panel = (function(_, mozL10n) {
notifier={this.props.notifier}
callUrl={this.props.callUrl} />
<ToSView />
<AvailabilityDropdown />
<div className="footer">
<AvailabilityDropdown />
<a className="signin-link" href="#" onClick={this.handleSignUpLinkClick}>
{__("panel_footer_signin_or_signup_link")}
</a>
</div>
</div>
);
}

22
browser/components/loop/content/shared/css/panel.css
View File

@@ -138,6 +138,17 @@
border: 1px solid #888;
}
/* Sign in/up link */
.signin-link {
display: none; /* XXX This should be removed as soon bugs 1047144 & 979845 land */
line-height: 100%;
font-size: .9em;
text-decoration: none;
color: #888;
margin-top: 16px;
}
/* Terms of Service */
.terms-service {
@@ -157,14 +168,17 @@
/* Footer */
.footer {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-content: stretch;
align-items: flex-start;
font-size: 1em;
border-top: 1px solid #D1D1D1;
background: #EAEAEA;
color: #7F7F7F;
display: flex;
align-items: center;
margin-top: 14px;
flex-direction: row;
padding: 14px;
margin-top: 14px;
}