From 2b6c2f140d7d5dd3821a4847bdd4e70570aab871 Mon Sep 17 00:00:00 2001 From: alternatekev Date: Thu, 10 Dec 2015 12:47:08 -0700 Subject: [PATCH 1/6] changed disconnect links to Button borderless scary removed gridicon updated to look like updates made to sharing page, changing the disconnect button to compact and moving the foldable card icon to the right updated to look like updates made to sharing page, changing the disconnect button to compact and moving the foldable card icon to the right fixed ellipsis utf embed centered button a little better removed scary prop changed disconnect links to Button borderless scary removed gridicon updated to look like updates made to sharing page, changing the disconnect button to compact and moving the foldable card icon to the right updated to look like updates made to sharing page, changing the disconnect button to compact and moving the foldable card icon to the right centered button a little better --- .../me/connected-application-icon/style.scss | 4 ++-- .../me/connected-application-item/index.jsx | 22 ++++++++++--------- .../me/connected-application-item/style.scss | 19 +++------------- 3 files changed, 17 insertions(+), 28 deletions(-) diff --git a/client/me/connected-application-icon/style.scss b/client/me/connected-application-icon/style.scss index 5dc25a477497d..37b67c2d5c149 100644 --- a/client/me/connected-application-icon/style.scss +++ b/client/me/connected-application-icon/style.scss @@ -7,10 +7,10 @@ // !important necessary here since plugin-icon uses !important as well height: 40px !important; width: 40px !important; - margin-left: 32px; + margin-left: 0px; margin-right: 12px; @include breakpoint( '>480px' ) { - margin-left: 40px; + margin-left: 0px; } } diff --git a/client/me/connected-application-item/index.jsx b/client/me/connected-application-item/index.jsx index 0b224370c1cc4..03e08dc84957c 100644 --- a/client/me/connected-application-item/index.jsx +++ b/client/me/connected-application-item/index.jsx @@ -8,11 +8,12 @@ var React = require( 'react' ), /** * Internal dependencies */ -var eventRecorder = require( 'me/event-recorder' ), - CompactCard = require( 'components/card/compact' ), - ConnectedApplicationIcon = require( 'me/connected-application-icon' ), - safeProtocolUrl = require( 'lib/safe-protocol-url' ), - analytics = require( 'analytics' ); +import eventRecorder from 'me/event-recorder'; +import CompactCard from 'components/card/compact'; +import ConnectedApplicationIcon from 'me/connected-application-icon'; +import safeProtocolUrl from 'lib/safe-protocol-url'; +import analytics from 'analytics'; +import Button from 'components/button'; module.exports = React.createClass( { @@ -222,11 +223,12 @@ module.exports = React.createClass( { { connection.title } - - - { this.translate( 'Disconnect' ) } - - +
+ { this.props.isPlaceholder + ? + : } +
+ { this.renderDetail() } diff --git a/client/me/connected-application-item/style.scss b/client/me/connected-application-item/style.scss index b4b5563687f78..a097bf2592d7d 100644 --- a/client/me/connected-application-item/style.scss +++ b/client/me/connected-application-item/style.scss @@ -53,7 +53,7 @@ .connected-application-item__content-toggle { position: absolute; top: 24px; - left: 16px; + right: 16px; margin-top: 4px; font-size: 16px; color: $gray; @@ -79,21 +79,8 @@ .connected-application-item__disconnect{ position: absolute; - top: 16px; - right: 16px; - font-size: 14px; - line-height: 40px; - color: $alert-red; - margin-left: 20px; - background: $white; - - &:hover { - color: lighten( $alert-red, 10% ); - } - - &:after { - @include stats-fade-text( $white ); - } + top: 22px; + right: 56px; } .connected-application-item__content { From e440406efd50cbc39fd20731a4787cd78c7fa34b Mon Sep 17 00:00:00 2001 From: alternatekev Date: Mon, 25 Jan 2016 13:53:13 -0700 Subject: [PATCH 2/6] updated faked foldable-cards to real foldable-cards --- .../me/connected-application-item/index.jsx | 178 ++++++++---------- .../me/connected-application-item/style.scss | 155 ++------------- 2 files changed, 99 insertions(+), 234 deletions(-) diff --git a/client/me/connected-application-item/index.jsx b/client/me/connected-application-item/index.jsx index 03e08dc84957c..5b20603462862 100644 --- a/client/me/connected-application-item/index.jsx +++ b/client/me/connected-application-item/index.jsx @@ -14,6 +14,7 @@ import ConnectedApplicationIcon from 'me/connected-application-icon'; import safeProtocolUrl from 'lib/safe-protocol-url'; import analytics from 'analytics'; import Button from 'components/button'; +import FoldableCard from 'components/foldable-card'; module.exports = React.createClass( { @@ -61,19 +62,18 @@ module.exports = React.createClass( { }, renderAccessScopeBadge: function() { - var meta = '', - connection = this.props.connection; + var meta = ''; - if ( ! connection ) { + if ( ! this.props.connection ) { return; } - if ( 'auth' === connection.scope ) { + if ( 'auth' === this.props.connection.scope ) { meta = this.translate( 'Authentication' ); - } else if ( 'global' === connection.scope ) { + } else if ( 'global' === this.props.connection.scope ) { meta = this.translate( 'Global' ); - } else if ( connection.site ) { - meta = connection.site.site_name; + } else if ( this.props.connection.site ) { + meta = this.props.connection.site.site_name; } if ( meta.length ) { @@ -86,34 +86,32 @@ module.exports = React.createClass( { }, renderScopeMessage: function() { - var message, - connection = this.props.connection; - - if ( ! connection ) { + var message; + if ( ! this.props.connection ) { return; } - if ( 'global' === connection.scope ) { + if ( 'global' === this.props.connection.scope ) { message = this.translate( 'This connection is allowed to manage all of your blogs on WordPress.com, ' + 'including any Jetpack blogs that are connected to your WordPress.com account.' ); - } else if ( 'auth' === connection.scope ) { + } else if ( 'auth' === this.props.connection.scope ) { message = this.translate( 'This connection is not allowed to manage any of your blogs.' ); - } else if ( false !== connection.site ) { + } else if ( false !== this.props.connection.site ) { message = this.translate( 'This connection is only allowed to access {{siteLink}}%(siteName)s{{/siteLink}}', { components: { siteLink: }, args: { - siteName: connection.site.site_name + siteName: this.props.connection.site.site_name } } ); @@ -136,102 +134,86 @@ module.exports = React.createClass( { }, renderDetail: function() { - var connection = this.props.connection; if ( this.props.isPlaceholder ) { return; } return ( -
-

- { connection.description } -

-
    -
  • - - { this.translate( 'Application Website' ) } - - - - - { safeProtocolUrl( connection.URL ) } - +
    + + { this.translate( 'Application Website' ) } + + + + + { safeProtocolUrl( this.props.connection.URL ) } + + + + { this.translate( '{{detailTitle}}Authorized On{{/detailTitle}}{{detailDescription}}%(date)s{{/detailDescription}}', { + components: { + detailTitle: , + detailDescription: + }, + args: { + date: this.moment( this.props.connection.authorized ).format( 'MMM D, YYYY @ h:mm a' ) + } + } ) } + + + { this.translate( 'Access Permissions' ) } + + + { this.renderScopeMessage() } + + { this.props.connection.permissions.map( function( permission ) { + return ( + + { permission.description } -
    • - -
  • - { - this.translate( '{{detailTitle}}Authorized On{{/detailTitle}}{{detailDescription}}%(date)s{{/detailDescription}}', { - components: { - detailTitle: , - detailDescription: - }, - args: { - date: this.moment( connection.authorized ).format( 'MMM D, YYYY @ h:mm a' ) - } - } ) - } -
    • - - { this.renderScopeMessage() } - -
  • - - { this.translate( 'Access Permissions' ) } - - - { connection.permissions.map( function( permission ) { - return ( - - { permission.description } - - ); - }, this ) } -
    • -
+ ); + }, this ) }
); }, + header: function() { + return ( +
+ +

{ this.props.connection.title }

+
+ ); + }, + + summary: function() { + return(
{ this.props.isPlaceholder + ? ( ) + : ( ) }
); + }, + render: function() { - var connection = this.props.connection, - classes = classNames( { - 'connected-application-item': true, - 'is-open': this.state.showDetail, - 'is-placeholder': this.props.isPlaceholder - } ), - noticonClasses = classNames( { - 'connected-application-item__content-toggle': true, - noticon: true, - 'noticon-collapse': this.state.showDetail, - 'noticon-expand': ! this.state.showDetail - } ); + + let classes = classNames( { + 'connected-application-item': true, + 'is-placeholder': this.props.isPlaceholder + } ); return ( - -
- - - -
- { connection.title } -
- -
- { this.props.isPlaceholder - ? - : } -
- -
+ { this.renderDetail() } - + ); }, } ); diff --git a/client/me/connected-application-item/style.scss b/client/me/connected-application-item/style.scss index a097bf2592d7d..155e0aaee29d4 100644 --- a/client/me/connected-application-item/style.scss +++ b/client/me/connected-application-item/style.scss @@ -1,147 +1,30 @@ -.connected-application-item.card { - padding: 0; - - @include breakpoint( '>660px' ) { - padding: 0; - } - - &.is-compact { - margin-bottom: 1px; - } - - &.is-compact:last-child { - margin-bottom: 8px; - } - - &.is-open { - margin-bottom: 16px; - } - - &.is-placeholder { - .connected-application-item__title { - color: transparent; - width: 36%; - line-height: 24px; - margin-top: 8px; - background-color: lighten( $gray, 30% ); - animation: loading-fade 1.6s ease-in-out infinite; - - &:before { - content: ' '; - } - } - } -} - -.connected-application-item { - position: relative; - @include clear-fix; -} - .connected-application-item__header { - cursor: pointer; - display: block; - padding: 16px; - @include clear-fix; -} + display: flex; -.connected-application-item__header:hover .connected-application-item__content-toggle { - color: $blue-medium; -} - -.connected-application-item__content-toggle { - position: absolute; - top: 24px; - right: 16px; - margin-top: 4px; - font-size: 16px; - color: $gray; - - @include breakpoint( '>480px' ) { - margin-top: 0; - font-size: 24px; + h3 { + flex: 2; + display: block; + overflow: hidden; + margin-top: 8px; } -} - -.connected-application-item__title { - display: block; - color: $gray-dark; - font-size: 14px; - line-height: 40px; - white-space: pre; - overflow: hidden; - @include breakpoint( '>480px' ) { - font-size: 20px; + .connected-application-icon { + width: 48px; } } -.connected-application-item__disconnect{ - position: absolute; - top: 22px; - right: 56px; -} - -.connected-application-item__content { - position: relative; - display: none; - padding: 15px 20px 20px 20px; - background: $gray-light; - border-top: 2px solid lighten( $gray, 30% ); -} - -.connected-application-item.is-open .connected-application-item__content { - background: $gray-light; - border-top: 1px solid lighten( $gray, 30% ); - display: block; - padding: 16px; - - @include breakpoint( '>480px' ) { - border-top-width: 2px; - } - - @include breakpoint( '>660px' ) { - padding: 24px; - } -} - -.connected-application-item__meta { - position: absolute; - left: 110%; - top: 2px; - font-size: 12px; - background-color: $gray; - color: $white; - white-space: pre; - text-overflow: ellipsis; - overflow: hidden; - padding: 0 4px; - border-radius: 2px; - font-weight: normal; -} +.connected-application-item.is-placeholder { + h3 { + color: transparent; + width: 36%; + line-height: 24px; + margin-top: 8px; + background-color: lighten( $gray, 30% ); + animation: loading-fade 1.6s ease-in-out infinite; -.connected-application-item__ul { - list-style-type: none; - margin: 0; -} - -.connected-application-item__connection-detail { - margin-bottom: 1em; - - &:last-child { - margin-bottom: 0; + &:before { + content: ' '; + } } } - -.connected-application-item__connection-detail-title { - position: relative; -} - -.connected-application-item__connection-detail-description { - display: block; -} - -.connected-application-item__content-description { - margin: 0 0 1em 0; -} From 06856a08d77fd72d841771563a15ad508e9b9c68 Mon Sep 17 00:00:00 2001 From: alternatekev Date: Mon, 25 Jan 2016 16:09:35 -0700 Subject: [PATCH 3/6] style updates to expanded-summary style updates to expanded-summary to match original design fixed ellipsis utf embed removed scary prop changed disconnect links to Button borderless scary removed gridicon updated to look like updates made to sharing page, changing the disconnect button to compact and moving the foldable card icon to the right updated to look like updates made to sharing page, changing the disconnect button to compact and moving the foldable card icon to the right centered button a little better updated faked foldable-cards to real foldable-cards style updates to expanded-summary to match original design --- .../me/connected-application-item/index.jsx | 57 ++++++++++--------- .../me/connected-application-item/style.scss | 17 ++++++ 2 files changed, 46 insertions(+), 28 deletions(-) diff --git a/client/me/connected-application-item/index.jsx b/client/me/connected-application-item/index.jsx index 5b20603462862..0bf0336deaac1 100644 --- a/client/me/connected-application-item/index.jsx +++ b/client/me/connected-application-item/index.jsx @@ -9,7 +9,6 @@ var React = require( 'react' ), * Internal dependencies */ import eventRecorder from 'me/event-recorder'; -import CompactCard from 'components/card/compact'; import ConnectedApplicationIcon from 'me/connected-application-icon'; import safeProtocolUrl from 'lib/safe-protocol-url'; import analytics from 'analytics'; @@ -119,16 +118,16 @@ module.exports = React.createClass( { if ( message ) { return ( -
  • - +
    +

    { this.translate( 'Access Scope' ) } { this.renderAccessScopeBadge() } - +

    - +

    { message } - -

    • +

    + ); } }, @@ -140,11 +139,11 @@ module.exports = React.createClass( { return (
    - +

    { this.translate( 'Application Website' ) } - +

    - +

    { safeProtocolUrl( this.props.connection.URL ) } - +

    { this.translate( '{{detailTitle}}Authorized On{{/detailTitle}}{{detailDescription}}%(date)s{{/detailDescription}}', { components: { - detailTitle: , - detailDescription: + detailTitle:

    , + detailDescription:

    }, args: { date: this.moment( this.props.connection.authorized ).format( 'MMM D, YYYY @ h:mm a' ) } } ) } +

    + { this.renderScopeMessage() } +

    - +

    { this.translate( 'Access Permissions' ) } - - - { this.renderScopeMessage() } - - { this.props.connection.permissions.map( function( permission ) { - return ( - - { permission.description } - - ); - }, this ) } +

    +

    + { this.props.connection.permissions.map( function( permission ) { + return ( + + { permission.description } + + ); + }, this ) } +

    ); }, @@ -199,7 +200,6 @@ module.exports = React.createClass( { }, render: function() { - let classes = classNames( { 'connected-application-item': true, 'is-placeholder': this.props.isPlaceholder @@ -209,6 +209,7 @@ module.exports = React.createClass( { diff --git a/client/me/connected-application-item/style.scss b/client/me/connected-application-item/style.scss index 155e0aaee29d4..e29c380d25775 100644 --- a/client/me/connected-application-item/style.scss +++ b/client/me/connected-application-item/style.scss @@ -28,3 +28,20 @@ } } } + +.connected-application-item { + h2 { + font-weight: bold; + } +} + +.connected-application-item__meta { + font-size: 12px; + display: inline-block; + padding: 4px 8px; + margin-left: 8px; + border-radius: 4px; + background: $gray; + color: $white; + font-weight: normal; +} From 70ce35746eb14d4531f9b6c603decddf742491bd Mon Sep 17 00:00:00 2001 From: alternatekev Date: Tue, 26 Jan 2016 09:53:56 -0700 Subject: [PATCH 4/6] formatting cleanup formatting fixes fixes listing of access permissions --- client/me/connected-application-item/index.jsx | 15 ++++++--------- client/me/connected-application-item/style.scss | 9 +++++++++ 2 files changed, 15 insertions(+), 9 deletions(-) diff --git a/client/me/connected-application-item/index.jsx b/client/me/connected-application-item/index.jsx index 0bf0336deaac1..9f67b476557f6 100644 --- a/client/me/connected-application-item/index.jsx +++ b/client/me/connected-application-item/index.jsx @@ -142,7 +142,6 @@ module.exports = React.createClass( {

    { this.translate( 'Application Website' ) }

    -

    , - detailDescription:

    + detailDescription:

    }, args: { date: this.moment( this.props.connection.authorized ).format( 'MMM D, YYYY @ h:mm a' ) @@ -169,17 +168,15 @@ module.exports = React.createClass( {

    { this.translate( 'Access Permissions' ) }

    -

    +

      { this.props.connection.permissions.map( function( permission ) { return ( - +
    • { permission.description } - +
      • ); }, this ) } -

      +
    ); }, @@ -195,7 +192,7 @@ module.exports = React.createClass( { summary: function() { return(
    { this.props.isPlaceholder - ? ( ) + ? ( ) : ( ) }
    ); }, diff --git a/client/me/connected-application-item/style.scss b/client/me/connected-application-item/style.scss index e29c380d25775..82a3985942224 100644 --- a/client/me/connected-application-item/style.scss +++ b/client/me/connected-application-item/style.scss @@ -45,3 +45,12 @@ color: $white; font-weight: normal; } + +.connected-application-item__connection-detail-descriptions { + margin-left: 1.5em; + margin-top: 4px; + + li { + padding: 0; + } +} From 7014c204ae8506e83ce8d6f2816e1755862b2ebb Mon Sep 17 00:00:00 2001 From: alternatekev Date: Tue, 26 Jan 2016 16:23:11 -0700 Subject: [PATCH 5/6] formatting and const updates via @dmsnell --- .../me/connected-application-item/index.jsx | 60 +++++++++---------- 1 file changed, 28 insertions(+), 32 deletions(-) diff --git a/client/me/connected-application-item/index.jsx b/client/me/connected-application-item/index.jsx index 9f67b476557f6..529505361e1b8 100644 --- a/client/me/connected-application-item/index.jsx +++ b/client/me/connected-application-item/index.jsx @@ -41,38 +41,30 @@ module.exports = React.createClass( { }; }, - toggleDetail: function() { - if ( this.state.showDetail ) { - analytics.ga.recordEvent( 'Me', 'Collapsed Connected Application', this.props.connection.title ); - } else { - analytics.ga.recordEvent( 'Me', 'Expanded Connected Application', this.props.connection.title ); - } - - this.setState( { showDetail: ! this.state.showDetail } ); - }, - disconnect: function( event ) { if ( this.props.isPlaceholder ) { return; } + const { connection: { title, ID } } = this.props; event.stopPropagation(); - analytics.ga.recordEvent( 'Me', 'Clicked on Disconnect Connected Application Link', this.props.connection.title ); - this.props.revoke( this.props.connection.ID ); + analytics.ga.recordEvent( 'Me', 'Clicked on Disconnect Connected Application Link', title ); + this.props.revoke( ID ); }, renderAccessScopeBadge: function() { + const { connection: { scope, site } } = this.props; var meta = ''; if ( ! this.props.connection ) { return; } - if ( 'auth' === this.props.connection.scope ) { + if ( 'auth' === scope ) { meta = this.translate( 'Authentication' ); - } else if ( 'global' === this.props.connection.scope ) { + } else if ( 'global' === scope ) { meta = this.translate( 'Global' ); - } else if ( this.props.connection.site ) { - meta = this.props.connection.site.site_name; + } else if ( site ) { + meta = site.site_name; } if ( meta.length ) { @@ -85,21 +77,22 @@ module.exports = React.createClass( { }, renderScopeMessage: function() { + const { connection: { scope, site } } = this.props; var message; if ( ! this.props.connection ) { return; } - if ( 'global' === this.props.connection.scope ) { + if ( 'global' === scope ) { message = this.translate( 'This connection is allowed to manage all of your blogs on WordPress.com, ' + 'including any Jetpack blogs that are connected to your WordPress.com account.' ); - } else if ( 'auth' === this.props.connection.scope ) { + } else if ( 'auth' === scope ) { message = this.translate( 'This connection is not allowed to manage any of your blogs.' ); - } else if ( false !== this.props.connection.site ) { + } else if ( false !== site ) { message = this.translate( 'This connection is only allowed to access {{siteLink}}%(siteName)s{{/siteLink}}', { components: { @@ -110,7 +103,7 @@ module.exports = React.createClass( { /> }, args: { - siteName: this.props.connection.site.site_name + siteName: site.site_name } } ); @@ -133,22 +126,21 @@ module.exports = React.createClass( { }, renderDetail: function() { + const { connection: { URL, authorized, permissions } } = this.props; if ( this.props.isPlaceholder ) { return; } return (
    -

    - { this.translate( 'Application Website' ) } -

    +

    { this.translate( 'Application Website' ) }

    - { safeProtocolUrl( this.props.connection.URL ) } + { safeProtocolUrl( URL ) }

    @@ -158,18 +150,18 @@ module.exports = React.createClass( { detailDescription:

    }, args: { - date: this.moment( this.props.connection.authorized ).format( 'MMM D, YYYY @ h:mm a' ) + date: this.moment( authorized ).format( 'MMM D, YYYY @ h:mm a' ) } } ) } -

    +

    { this.renderScopeMessage() } -

    +

    { this.translate( 'Access Permissions' ) }

      - { this.props.connection.permissions.map( function( permission ) { + { permissions.map( function( permission ) { return (
    • { permission.description } @@ -191,9 +183,13 @@ module.exports = React.createClass( { }, summary: function() { - return(
      { this.props.isPlaceholder - ? ( ) - : ( ) }
      ); + return( +
      + { this.props.isPlaceholder + ? ( ) + : ( ) + } +
      ); }, render: function() { From 63f76ba3faa79029216c3ea42e02ca55ffa71497 Mon Sep 17 00:00:00 2001 From: alternatekev Date: Tue, 26 Jan 2016 17:47:31 -0700 Subject: [PATCH 6/6] updates made w/r/t @dmsnell review --- .../me/connected-application-item/index.jsx | 42 +++++++++---------- 1 file changed, 21 insertions(+), 21 deletions(-) diff --git a/client/me/connected-application-item/index.jsx b/client/me/connected-application-item/index.jsx index 529505361e1b8..3efe59f528997 100644 --- a/client/me/connected-application-item/index.jsx +++ b/client/me/connected-application-item/index.jsx @@ -15,7 +15,7 @@ import analytics from 'analytics'; import Button from 'components/button'; import FoldableCard from 'components/foldable-card'; -module.exports = React.createClass( { +export default React.createClass( { displayName: 'ConnectedApplicationItem', @@ -109,20 +109,22 @@ module.exports = React.createClass( { ); } - if ( message ) { - return ( -
      -

      - { this.translate( 'Access Scope' ) } - { this.renderAccessScopeBadge() } -

      - -

      - { message } -

      -
      - ); + if ( ! message ) { + return; } + + return ( +
      +

      + { this.translate( 'Access Scope' ) } + { this.renderAccessScopeBadge() } +

      + +

      + { message } +

      +
      + ); }, renderDetail: function() { @@ -161,13 +163,11 @@ module.exports = React.createClass( { { this.translate( 'Access Permissions' ) }
        - { permissions.map( function( permission ) { - return ( -
      • - { permission.description } -
        • - ); - }, this ) } + { permissions.map( ( { name, description } ) => ( +
      • + { description } +
        • + ) ) }
    );