Skip to:
Content

BuddyPress.org

Ticket #6290: 6290.layout-flip.02.patch

File 6290.layout-flip.02.patch, 11.7 KB (added by imath, 4 years ago)
  • src/bp-core/css/avatar.css

    diff --git src/bp-core/css/avatar.css src/bp-core/css/avatar.css
    index 32dceaa..191944d 100644
     
    11div.bp-avatar-status {
    2         clear:both;
    3         margin:1em 0;
     2        clear: both;
     3        margin: 1em 0;
    44}
    55
    66div.bp-avatar-status p.updated {
    div.bp-avatar-status p.error { 
    2121}
    2222
    2323.progress {
     24        background: none;
     25        border: 1px solid #d1d1d1;
    2426        float: right;
    2527        height: 22px;
    26         margin: 6px 10px 0 0;
    27         width: 200px;
    2828        line-height: 2em;
     29        margin: 6px 10px 0 0;
     30        margin-bottom: 2px;
    2931        padding: 0;
    3032        overflow: hidden;
    31         margin-bottom: 2px;
    32         border: 1px solid #d1d1d1;
    33         background: none;
     33        width: 200px;
    3434}
    3535
    3636.bar {
    37         z-index: 9;
     37        background-color: #c3ff88;
    3838        width: 0;
    3939        height: 100%;
    40         background-color: #c3ff88;
     40        z-index: 9;
    4141}
    4242
    4343.bp-uploader-progress div.error {
    44         font-size: 90%;
    45         display: block;
    46         padding: 10px 15px;
    4744        background-color: #fdc;
    4845        border: 1px solid #a00;
    4946        color: #800;
     47        display: block;
     48        font-size: 90%;
     49        padding: 10px 15px;
    5050}
    5151
    5252#bp-uploader-warning, #bp-webcam-message p.warning {
    53         margin:1em 0;
    54         font-size: 90%;
    55         display: block;
    56         padding: 10px 15px;
    5753        background-color: #ffec8b;
    5854        border: 1px solid #fc0;
    5955        color: #440;
     56        display: block;
     57        font-size: 90%;
     58        margin: 1em 0;
     59        padding: 10px 15px;
    6060}
    6161
    6262div.bp-avatar-nav {
    63         clear:both;
    6463        background: transparent;
     64        clear: both;
    6565        margin: 10px 0 10px;
    6666        overflow: hidden;
    6767}
    div.bp-avatar-nav { 
    7272}
    7373
    7474.bp-avatar-nav .avatar-nav-items li.avatar-nav-item {
    75         float: left;
    76         margin: 0;
    77         list-style: none;
    78  }
     75        float: left;
     76        margin: 0;
     77        list-style: none;
     78}
    7979
    8080.avatar-nav-items li a {
    81         display: block;
    82         padding: 5px 10px;
    83         text-decoration: none;
     81        display: block;
     82        padding: 5px 10px;
     83        text-decoration: none;
    8484}
    8585
    8686.avatar-nav-items li.current a {
    8787        background-color: #eee;
    8888        color: #555;
    89         opacity: .8;
    9089        font-weight: bold;
     90        opacity: 0.8;
    9191}
    9292
    9393#drag-drop-area {
    div.bp-avatar-nav { 
    100100}
    101101
    102102.drag-drop-inside p {
    103         display:none;
     103        display: none;
    104104}
    105105
    106106.drag-drop-inside p.drag-drop-buttons {
    107         margin-top:80px;
     107        margin-top: 80px;
    108108        text-align: center;
    109109}
     110
    110111.drag-drop .drag-drop-inside p.drag-drop-buttons {
    111         margin:auto;
     112        margin: auto;
    112113        text-align: auto;
    113114}
    114115
     116.drag-drop #drag-drop-area {
     117        display: table;
     118        height: 100%;
     119        width: 100%;
     120}
     121
    115122.drag-drop .drag-drop-inside {
    116         margin: 70px auto 0;
    117         width: 250px;
     123        display: table-cell;
     124        padding: 40px 0;
     125        text-align: center;
     126        vertical-align: middle;
    118127}
    119128
    120 .drag-drop .drag-drop-inside p, .drag-drop-inside p.drag-drop-buttons {
     129.drag-drop .drag-drop-inside p,
     130.drag-drop-inside p.drag-drop-buttons {
    121131        display: block;
    122132}
    123133
    div.bp-avatar-nav { 
    128138        text-align: center;
    129139}
    130140
     141.drag-drop-inside p.drag-drop-info {margin-top: 0;}
     142
    131143#avatar-to-crop {
    132         float: left;
    133         margin: 0 20px 20px 0;
     144        margin: 0 auto 20px ;
    134145        text-align: left;
    135146}
     147
     148#bp-webcam-avatar #avatar-to-crop {
     149        float: left;
     150        margin: 0 0 20px;
     151}
     152
     153#avatar-to-crop .jcrop-holder {
     154        margin: 0 auto;
     155}
     156
     157.avatar-crop-management {
     158        clear: left;
     159        overflow: hidden;
     160        padding-top: 20px;
     161        text-align: center;
     162}
     163
     164#bp-webcam-avatar .avatar-crop-management {
     165        clear: none;
     166        float: none;
     167        overflow: visible;
     168        padding-top: 0;
     169        width: auto;
     170}
     171
    136172#avatar-crop-pane {
     173        margin: 0 auto;
    137174        overflow: hidden;
    138175}
    139176
    140 #avatar-crop-actions {
    141         margin: 20px 0;
     177#bp-webcam-avatar #avatar-to-crop {
     178        border: 1px solid #eee;
     179        max-width: 100%;
     180        width: 100%;
     181}
     182
     183@media screen and (min-width: 801px) {
     184        #bp-webcam-avatar #avatar-to-crop {
     185                max-width: 64%;
     186                width: 64%;
     187        }
     188}
     189
     190#avatar-crop-actions a {
     191        display: block;
     192}
     193
     194#bp-webcam-avatar #avatar-crop-actions {
     195        float: left;
     196        margin: 0 0 20px 0;
     197        width: 50%;
     198}
     199
     200#avatar-crop-actions a.button {
     201        margin-top: 10px;
     202}
     203
     204#bp-webcam-avatar #avatar-crop-actions a.button {
     205        display: block;
     206        margin: 0 0 5px;
     207        padding: 4px 0;
     208        width: 100%;
    142209}
    143210
    144211#avatar-to-crop img,
    div.bp-avatar-nav { 
    152219}
    153220
    154221#bp-webcam-avatar video {
    155         float:left;
    156         width:450px;
     222        float: left;
     223        margin-bottom: 0;
     224        max-width: 100%;
     225        width: 100%;
     226        -webkit-transform: scaleX(-1);
     227        transform: scaleX(-1);
    157228}
    158229
    159230#bp-webcam-avatar #avatar-crop-pane {
    160231        border: 2px dashed #bbb;
     232        clear: left;
     233        float: right;
     234        margin: 0  40px 10px 0;
     235        overflow: hidden;
     236}
     237
     238/**
     239*  Users can define avatar constants with new dimension values
     240*  If they do, we'll ensure the layouts preserved by enforcing a max width
     241*  that matches bp default settings.
     242*/
     243#bp-webcam-avatar .avatar-crop-management #avatar-crop-pane {
     244        max-width: 150px;
     245        max-height: 150px;
     246}
     247
     248#avatar-crop-pane canvas {
     249        height: auto;
     250        width: 100%;
     251        max-width: 100%;
     252}
     253
     254.group-avatar .bp-avatar .avatar-crop-management {
     255        margin-left: 0;
     256        padding-top: 0;
     257        width: auto;
     258}
     259
     260.bp-avatar .avatar-crop-management.adjust {
     261        float: left;
     262        clear: none;
     263        padding-top: 0;
     264}
     265
     266.bp-avatar #avatar-to-crop.adjust {
     267        float: left;
     268        margin-right: 20px;
     269}
     270
     271@media screen and (max-width: 480px) {
     272
     273        #bp-webcam-avatar .avatar-crop-management #avatar-crop-actions,
     274        #bp-webcam-avatar .avatar-crop-management #avatar-crop-pane {
     275                float: none;
     276        }
     277
     278        #bp-webcam-avatar .avatar-crop-management #avatar-crop-pane {
     279                margin: 0 auto 10px;
     280        }
     281
     282        #bp-webcam-avatar .avatar-crop-management #avatar-crop-actions  {
     283                width: auto;
     284        }
     285
     286}
     287
     288@media screen and (min-width: 801px) {
     289
     290        #bp-webcam-avatar .avatar-crop-management {
     291                clear: none;
     292                float: right;
     293        }
     294
     295        #bp-webcam-avatar .avatar-crop-management #avatar-crop-pane {
     296                float: none;
     297                margin: 0 auto 10px;
     298        }
     299
     300        #bp-webcam-avatar .avatar-crop-management #avatar-crop-actions {
     301                float: left;
     302                width: 100%;
     303        }
     304
    161305}
    162306
    163307/** Admin Profile **/
    164308body.users_page_bp-profile-edit.modal-open #TB_ajaxContent,
    165309body.profile_page_bp-profile-edit.modal-open #TB_ajaxContent {
    166         width:95%!important;
    167         height:95%!important;
     310        height: 95% !important;
     311        width: 95% !important;
    168312}
    169313
    170314body.users_page_bp-profile-edit.modal-open #TB_ajaxContent p.updated,
    body.profile_page_bp-profile-edit.modal-open #TB_ajaxContent p.warning { 
    174318        display: block;
    175319        padding: 10px 15px;
    176320}
     321
     322.wp-admin #TB_window .bp-avatar #avatar-to-crop {
     323        float: left;
     324        margin: 0;
     325}
     326.wp-admin #TB_window .bp-avatar #bp-webcam-avatar #avatar-to-crop {
     327        margin-bottom: 20px;
     328}
     329@media screen and (min-width: 783px) {
     330
     331        .wp-admin #TB_window .bp-avatar .avatar-crop-management {
     332                clear: none;
     333                float: left;
     334                margin-left: 20px;
     335                padding-top: 0;
     336                text-align: center;
     337
     338        }
     339
     340}
     341
     342.wp-admin #TB_window .bp-avatar #avatar-to-crop video {
     343                width: 100%;
     344        }
     345
     346.wp-admin #TB_window .bp-avatar .avatar-crop-management a.button {
     347        height: auto;
     348        line-height: inherit;
     349}
     350
     351@media screen and (min-width: 810px) {
     352        .wp-admin #TB_window .bp-avatar #bp-webcam-avatar #avatar-to-crop {
     353                max-width: none;
     354                width: 76%;
     355        }
     356
     357        .wp-admin #TB_window #bp-webcam-avatar .avatar-crop-management {
     358                max-width: none;
     359                width: auto;
     360        }
     361}
  • src/bp-core/js/avatar.js

    diff --git src/bp-core/js/avatar.js src/bp-core/js/avatar.js
    index 7d592f7..7a18c13 100644
    window.bp = window.bp || {}; 
    494494                initCropper: function() {
    495495                        var self = this,
    496496                                tocrop = this.$el.find( '#avatar-to-crop img' ),
     497                                availableWidth = this.$el.width(),
    497498                                selection = {}, crop_top, crop_bottom, crop_left, crop_right, nh, nw;
    498499
    499500                        if ( ! _.isUndefined( this.options.full_h ) && ! _.isUndefined( this.options.full_w ) ) {
    window.bp = window.bp || {}; 
    503504                        selection.w = this.model.get( 'width' );
    504505                        selection.h = this.model.get( 'height' );
    505506
     507                        /**
     508                         * Make sure the crop preview is at the right of the avatar
     509                         * if the available width allowes it.
     510                         */
     511                        if ( this.options.full_w + selection.w + 20 < availableWidth ) {
     512                                $( '#avatar-to-crop' ).addClass( 'adjust' );
     513                                this.$el.find( '.avatar-crop-management' ).addClass( 'adjust' );
     514                        }
     515
    506516                        if ( selection.h <= selection.w ) {
    507517                                crop_top    = Math.round( selection.h / 4 );
    508518                                nh = nw     = Math.round( selection.h / 2 );
  • src/bp-core/js/webcam.js

    diff --git src/bp-core/js/webcam.js src/bp-core/js/webcam.js
    index 3d5f1e7..2584465 100644
    window.bp = window.bp || {}; 
    2121                                capture_enable: false,
    2222                                capture:        null,
    2323                                canvas:         null,
    24                                 warning:        null
     24                                warning:        null,
     25                                flipped:        false
    2526                        };
    2627
    2728                        bp.Avatar.nav.on( 'bp-avatar-view:changed', _.bind( this.setView, this ) );
    window.bp = window.bp || {}; 
    4445                        // Create the WebCam view
    4546                        var cameraView = new bp.Views.WebCamAvatar( { model: new Backbone.Model( { user_media: false } ) } );
    4647
     48                        // Make sure the flipped param is reset
     49                        this.params.flipped = false;
     50
    4751                        // Add it to views
    4852                        bp.Avatar.views.add( { id: 'camera', view: cameraView } );
    4953
    window.bp = window.bp || {}; 
    242246                        sc = this.options.video.el.videoHeight;
    243247                        sx = ( this.options.video.el.videoWidth - sc ) / 2;
    244248
     249                        // Flip only once.
     250                        if ( ! bp.WebCam.params.flipped ) {
     251                                this.options.canvas.el.getContext( '2d' ).translate( this.model.get( 'w' ), 0 );
     252                                this.options.canvas.el.getContext( '2d' ).scale( -1, 1 );
     253                                bp.WebCam.params.flipped = true;
     254                        }
     255
    245256                        this.options.canvas.el.getContext( '2d' ).drawImage( this.options.video.el, sx, 0, sc, sc, 0, 0, this.model.get( 'w' ), this.model.get( 'h' ) );
    246257                        bp.WebCam.params.capture = this.options.canvas.el.toDataURL( 'image/png' );
    247258                        this.model.set( 'url', bp.WebCam.params.capture );
  • src/bp-templates/bp-legacy/buddypress/assets/_attachments/avatars/camera.php

    diff --git src/bp-templates/bp-legacy/buddypress/assets/_attachments/avatars/camera.php src/bp-templates/bp-legacy/buddypress/assets/_attachments/avatars/camera.php
    index 5ac2be1..4368796 100644
     
    1717                </div>
    1818        <# } else { #>
    1919                <div id="avatar-to-crop"></div>
    20                 <div id="avatar-crop-pane" class="avatar" style="width:{{data.w}}px; height:{{data.h}}px"></div>
    21                 <div id="avatar-crop-actions">
    22                         <a class="button avatar-webcam-capture" href="#"><?php esc_html_e( 'Capture', 'buddypress' );?></a>
    23                         <a class="button avatar-webcam-save" href="#"><?php esc_html_e( 'Save', 'buddypress' );?></a>
     20                <div class="avatar-crop-management">
     21                        <div id="avatar-crop-pane" class="avatar" style="width:{{data.w}}px; height:{{data.h}}px"></div>
     22                        <div id="avatar-crop-actions">
     23                                <a class="button avatar-webcam-capture" href="#"><?php esc_html_e( 'Capture', 'buddypress' );?></a>
     24                                <a class="button avatar-webcam-save" href="#"><?php esc_html_e( 'Save', 'buddypress' );?></a>
     25                        </div>
    2426                </div>
    2527        <# } #>
    2628</script>
  • src/bp-templates/bp-legacy/buddypress/assets/_attachments/avatars/crop.php

    diff --git src/bp-templates/bp-legacy/buddypress/assets/_attachments/avatars/crop.php src/bp-templates/bp-legacy/buddypress/assets/_attachments/avatars/crop.php
    index 086632c..274e97e 100644
     
    1414        <div id="avatar-to-crop">
    1515                <img src="{{data.url}}"/>
    1616        </div>
    17         <div id="avatar-crop-pane" class="avatar" style="width:{{data.full_w}}px; height:{{data.full_h}}px">
    18                 <img src="{{data.url}}" id="avatar-crop-preview"/>
    19         </div>
    20         <div id="avatar-crop-actions">
    21                 <a class="button avatar-crop-submit" href="#"><?php esc_html_e( 'Crop Image', 'buddypress' ); ?></a>
     17        <div class="avatar-crop-management">
     18                <div id="avatar-crop-pane" class="avatar" style="width:{{data.full_w}}px; height:{{data.full_h}}px">
     19                        <img src="{{data.url}}" id="avatar-crop-preview"/>
     20                </div>
     21                <div id="avatar-crop-actions">
     22                        <a class="button avatar-crop-submit" href="#"><?php esc_html_e( 'Crop Image', 'buddypress' ); ?></a>
     23                </div>
    2224        </div>
    2325</script>