WordPress.org

Make WordPress Core

Changeset 28043


Ignore:
Timestamp:
04/08/2014 07:48:55 AM (5 years ago)
Author:
azaozz
Message:

DFW:

  • Move the word count and "Just Write" to a fixed bar at the bottom.
  • Fix responsive mode to 480px. Narrower screens will have a scroll bar.
  • Hide the Help button on screens < 480px, move the Save button to the right, make it bigger to match the others, and other responsive mode fixes.

Fixes #26907, see #27709

Location:
trunk/src
Files:
3 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/js/wp-fullscreen.js

    r27857 r28043  
    310310        if ( pixels && pixels.toString().indexOf('%') !== -1 ) {
    311311            s.$editorContainer.css( 'width', pixels );
     312            s.$statusbar.css( 'width', pixels );
    312313
    313314            if ( s.$dfwTitle ) {
     
    321322            width = $('#wp-fullscreen-body').data('theme-width') || 800;
    322323            s.$editorContainer.width( width );
     324            s.$statusbar.width( width );
    323325
    324326            if ( s.$dfwTitle ) {
     
    343345
    344346        s.$editorContainer.width( width );
     347        s.$statusbar.width( width );
    345348
    346349        if ( s.$dfwTitle ) {
     
    363366    ps.subscribe( 'showing', function() {
    364367        $body.addClass( 'wp-fullscreen-active' );
    365 
    366368        s.$dfwWrap.addClass( 'wp-fullscreen-wrap' );
    367         s.$editorContainer.append( $('#wp-fullscreen-status') );
    368369
    369370        if ( s.$dfwTitle ) {
     
    413414    ps.subscribe( 'hiding', function() { // This event occurs while the overlay blocks the DFW UI.
    414415        $body.removeClass( 'wp-fullscreen-active' );
    415         $( '#wp-fullscreen-body' ).append( $('#wp-fullscreen-status') );
    416416
    417417        if ( s.$dfwTitle ) {
     
    475475            s.toolbar = toolbar = $('#fullscreen-topbar');
    476476            s.$fullscreenFader = $('#fullscreen-fader');
     477            s.$statusbar = $('#wp-fullscreen-status');
    477478            s.hasTinymce = typeof tinymce !== 'undefined';
    478479
  • trunk/src/wp-includes/class-wp-editor.php

    r28032 r28043  
    12641264
    12651265        <div id="wp-fullscreen-save">
    1266             <input type="button" class="button-primary right" value="<?php echo $save; ?>" onclick="wp.editor.fullscreen.save();" />
     1266            <input type="button" class="button button-primary right" value="<?php echo $save; ?>" onclick="wp.editor.fullscreen.save();" />
    12671267            <span class="spinner"></span>
    12681268            <span class="wp-fullscreen-saved-message"><?php if ( $post->post_status == 'publish' ) _e('Updated.'); else _e('Saved.'); ?></span>
     
    12731273        </div>
    12741274    </div>
    1275     <div id="wp-fullscreen-status">
    1276         <div id="wp-fullscreen-count"><?php printf( __( 'Word count: %s' ), '<span class="word-count">0</span>' ); ?></div>
    1277         <div id="wp-fullscreen-tagline"><?php _e('Just write.'); ?></div>
     1275    <div id="wp-fullscreen-statusbar">
     1276        <div id="wp-fullscreen-status">
     1277            <div id="wp-fullscreen-count"><?php printf( __( 'Word count: %s' ), '<span class="word-count">0</span>' ); ?></div>
     1278            <div id="wp-fullscreen-tagline"><?php _e('Just write.'); ?></div>
     1279        </div>
    12781280    </div>
    12791281    </div>
  • trunk/src/wp-includes/css/editor.css

    r27983 r28043  
    15021502    -moz-box-sizing: border-box;
    15031503    box-sizing: border-box;
    1504     max-width: 100% !important;
     1504    max-width: 100%;
    15051505}
    15061506
     
    15121512}
    15131513
     1514#wp-fullscreen-statusbar {
     1515    position: fixed;
     1516    left: 0;
     1517    right: 0;
     1518    bottom: 0;
     1519    height: 30px;
     1520    z-index: 100020;
     1521    background: #fff;
     1522    transition-property: height;
     1523    transition-duration: 0.2s;
     1524}
     1525
    15141526#wp-fullscreen-status {
    1515     margin: auto;
    1516     -webkit-transition: opacity 0.4s;
    1517     transition: opacity 0.4s;
     1527    margin: 0 auto;
     1528    padding: 0;
     1529    border-top: 1px dashed #ccc;
    15181530}
    15191531
     
    15321544
    15331545.wp-fullscreen-active .wp-editor-container {
    1534     margin: auto;
     1546    margin: 0 auto 30px;
     1547    border-bottom: 0;
    15351548}
    15361549
     
    15451558
    15461559#wp-fullscreen-tagline {
    1547     color: #bbb;
     1560    color: #888;
    15481561    font-size: 18px;
    15491562    float: right;
    1550     padding-top: 5px;
     1563    padding: 4px 0 0;
    15511564}
    15521565
     
    15761589#wp-fullscreen-mode-bar,
    15771590#wp-fullscreen-button-bar,
    1578 #wp-fullscreen-close,
    1579 #wp-fullscreen-count {
     1591#wp-fullscreen-close {
    15801592    float: left;
     1593}
     1594
     1595#wp-fullscreen-count,
     1596#wp-fullscreen-tagline {
     1597    display: inline-block;
    15811598}
    15821599
     
    15871604#wp-fullscreen-save {
    15881605    float: right;
    1589     padding: 2px 2px 0 5px;
     1606    padding: 2px 0 0;
     1607    min-width: 95px;
    15901608}
    15911609
    15921610#wp-fullscreen-count,
    15931611#wp-fullscreen-close {
    1594     padding-top: 6px;
     1612    padding: 5px 0 0;
    15951613}
    15961614
     
    15981616    margin: auto;
    15991617    padding: 0;
     1618    min-width: 550px;
    16001619}
    16011620
     
    16461665}
    16471666
    1648 #wp-fullscreen-save img,
    16491667#wp-fullscreen-save span {
    1650     padding-right: 4px;
    1651     line-height: 26px;
    16521668    display: none;
     1669    margin: 5px 6px 0;
     1670    float: left;
    16531671}
    16541672
     
    16711689-------------------------------------------------------------- */
    16721690
    1673 .wp-fullscreen-active #wp-fullscreen-status,
    16741691.wp-fullscreen-active #fullscreen-topbar {
    16751692    -webkit-transition-duration: 0.8s;
     
    16791696}
    16801697
    1681 .wp-fullscreen-active.wp-dfw-show-ui #wp-fullscreen-status,
     1698.wp-fullscreen-active #wp-fullscreen-statusbar {
     1699    height: 0;
     1700}
     1701
    16821702.wp-fullscreen-active.wp-dfw-show-ui #fullscreen-topbar {
    16831703    -webkit-transition-duration: 0.4s;
     
    16851705    opacity: 1;
    16861706    filter: alpha(opacity=100);
     1707}
     1708
     1709.wp-fullscreen-active.wp-dfw-show-ui #wp-fullscreen-statusbar {
     1710    height: 30px;
    16871711}
    16881712
     
    17501774}
    17511775
    1752 .wp-dfw-touch #wp-fullscreen-status {
    1753     opacity: 1;
     1776.wp-dfw-touch #wp-fullscreen-statusbar {
     1777    height: 30px;
    17541778}
    17551779
     
    17601784    #wp-fullscreen-button-bar,
    17611785    #wp-fullscreen-save {
    1762         float: none;
    17631786        display: inline-block;
    17641787    }
     
    17701793    #wp-fullscreen-central-toolbar {
    17711794        width: auto !important;
     1795        min-width: 0;
    17721796    }
    17731797
     
    17881812    }
    17891813
     1814    #wp-fullscreen-save {
     1815        position: absolute;
     1816        right: 10px;
     1817    }
     1818}
     1819
     1820@media screen and ( max-width: 480px ) {
     1821    #wp_fs_help {
     1822        display: none;
     1823    }
     1824
    17901825    .wp-fullscreen-wrap .wp-editor-container,
    17911826    .wp-fullscreen-title {
    1792         max-width: 700px;
    1793     }
    1794 
    1795     .wp-fullscreen-saved-message {
    1796         display: none !important;
     1827        width: 480px !important;
     1828    }
     1829
     1830    body.wp-fullscreen-active {
     1831        width: 480px;
     1832        overflow: auto;
     1833    }
     1834
     1835    #fullscreen-topbar,
     1836    .wp-fullscreen-wrap {
     1837        width: 480px;
     1838    }
     1839   
     1840    #wp-fullscreen-status {
     1841        width: auto !important;
     1842        max-width: 100%;
     1843        padding: 0 10px;
    17971844    }
    17981845}
Note: See TracChangeset for help on using the changeset viewer.