Changeset 6604

Timestamp:

06/26/2017 12:29:31 AM (8 years ago)

Author:

johnjamesjacoby

Message:

Admin: Use some JavaScript to spruce up the badge-animation.

@todo Update the "What's New" page contents.

Location:

trunk/src

Files:

• bbpress.php (modified) (1 diff)
• includes/admin/assets/css/admin.css (modified) (2 diffs)
• includes/admin/assets/js/badge.js (added)
• includes/admin/classes/class-bbp-admin.php (modified) (5 diffs)

trunk/src/bbpress.php

@@ -204 +204 @@
         /** Versions **********************************************************/
 
-        $this->version    = '2.6-rc-6602';
+        $this->version    = '2.6-rc-6604';
         $this->db_version = '262';
 

trunk/src/includes/admin/assets/css/admin.css

@@ -11 +11 @@
 
 .bbp-badge {
+    transform-origin: top left;
+    -webkit-animation: swoop 16s infinite linear;
+    animation: swoop 16s infinite linear;
+}
+
+.bbp-bee {
+    font: 400 80px/1 dashicons !important;
+    color: #000;
+    position: absolute;
+    height: 60px;
+    width: 60px;
+}
+
+.bbp-hive {
     font: 400 150px/1 dashicons !important;
-    color: #000;
-    display: inline-block;
-    transform-origin: center center;
-}
-
-.bbp-badge:before {
+    color: #ccc;
+    position: absolute;
+    height: 150px;
+    width: 150px;
+    top: 0;
+    right: 0;
+    display: block;
+}
+
+.bbp-bee:before {
     content: "\f451";
+}
+
+.bbp-hive:before {
+    content: "\f449";
 }
 
@@ -30 +52 @@
 
 @keyframes swoop {
-  0%   { transform: rotate( -9deg ); }
-  25%  { transform: rotate( 3deg  ); }
-  50%  { transform: rotate( -3deg ); }
-  75%  { transform: rotate( 9deg  ); }
-  100% { transform: rotate( -9deg ); }
+  0%   { transform: rotate( 95deg  ); }
+  100% { transform: rotate( 455deg ); }
 }
 
 .about-wrap .bbp-badge {
     position: absolute;
-    top: 0;
-    right: 0;
-    -webkit-animation: buzz 0.3s infinite ease-in, swoop 5s infinite ease-in-out;
-    animation: buzz 0.3s infinite ease-in, swoop 5s infinite ease-in-out;
+    right: 50px;
+    top: 50px;
+    height: 25px;
+    width: 25px;
 }
 
 body.rtl .about-wrap .bbp-badge {
     right: auto;
-    left: 0;
+    left: 50px;
 }
 

trunk/src/includes/admin/classes/class-bbp-admin.php

@@ -533 +533 @@
         $version = bbp_get_version();
 
-        // Register the JS
+        // Footer JS
+        wp_register_script( 'bbp-admin-badge-js',   $this->js_url . 'badge' . $suffix . '.js', array(), $version, true );
+
+        // Header JS
         wp_register_script( 'bbp-admin-common-js',  $this->js_url . 'common'    . $suffix . '.js', array( 'jquery', 'suggest'              ), $version );
         wp_register_script( 'bbp-admin-topics-js',  $this->js_url . 'topics'    . $suffix . '.js', array( 'jquery'                         ), $version );
@@ -541 +544 @@
         // Post type checker (only topics and replies)
         if ( 'post' === get_current_screen()->base ) {
-
             switch ( get_current_screen()->post_type ) {
                 case bbp_get_reply_post_type() :
@@ -560 +562 @@
                     break;
             }
+
+        // Enqueue the badge JS
+        } elseif ( in_array( get_current_screen()->id, array( 'dashboard_page_bbp-about', 'dashboard_page_bbp-credits' ), true ) ) {
+            wp_enqueue_script( 'bbp-admin-badge-js' );
         }
     }
@@ -728 +734 @@
 
     /**
+     * Output the shared screen header for about_screen() & credits_screen()
+     *
+     * Contains title, subtitle, and badge area
+     *
+     * @since 2.6.0 bbPress (r6604)
+     */
+    private function screen_header() {
+        list( $display_version ) = explode( '-', bbp_get_version() ); ?>
+
+        <h1><?php printf( esc_html__( 'Welcome to bbPress %s', 'bbpress' ), $display_version ); ?></h1>
+        <div class="about-text"><?php printf( esc_html__( 'bbPress is fun to use, contains no artificial colors or preservatives, and is absolutely wonderful in every environment. Your community is going to love using it.', 'bbpress' ), $display_version ); ?></div>
+
+        <span class="bbp-hive" id="bbp-hive"></span>
+        <div class="bbp-badge" id="bbp-badge">
+            <span class="bbp-bee" id="bbp-bee"></span>
+        </div>
+
+        <?php
+    }
+
+    /**
      * Output the about screen
      *
      * @since 2.2.0 bbPress (r4159)
+     *
+     * @todo Host this remotely.
      */
     public function about_screen() {
-
-        list( $display_version ) = explode( '-', bbp_get_version() ); ?>
+        ?>
 
         <div class="wrap about-wrap">
-            <h1><?php printf( esc_html__( 'Welcome to bbPress %s', 'bbpress' ), $display_version ); ?></h1>
-            <div class="about-text"><?php printf( esc_html__( 'Thank you for updating! bbPress %s is sweet and savory, contains no artificial flavors or preservatives, is environmentally friendly, and is a great compliment to your site.', 'bbpress' ), $display_version ); ?></div>
-            <div class="bbp-badge"></div>
+
+            <?php $this->screen_header(); ?>
 
             <h2 class="nav-tab-wrapper">
@@ -804 +831 @@
      * Output the credits screen
      *
-     * Hardcoding this in here is pretty janky. It's fine for now, but we'll
-     * want to leverage api.wordpress.org eventually.
-     *
      * @since 2.2.0 bbPress (r4159)
+     *
+     * @todo Host this remotely.
      */
     public function credits_screen() {
-
-        list( $display_version ) = explode( '-', bbp_get_version() ); ?>
+        ?>
 
         <div class="wrap about-wrap">
-            <h1><?php printf( esc_html__( 'Welcome to bbPress %s', 'bbpress' ), $display_version ); ?></h1>
-            <div class="about-text"><?php printf( esc_html__( 'Thank you for updating! bbPress %s is sweet and savory, contains no artificial flavors or preservatives, is environmentally friendly, and is a great compliment to your site.', 'bbpress' ), $display_version ); ?></div>
-            <div class="bbp-badge"></div>
+
+            <?php $this->screen_header(); ?>
 
             <h2 class="nav-tab-wrapper">