From 315033ca2a0ff383943113d10283810f40e3ddb6 Mon Sep 17 00:00:00 2001 From: koopersmith Date: Wed, 7 Mar 2012 17:35:17 +0000 Subject: [PATCH] Theme Customizer: Begin integration into the install process. Combine previews, details, and install into a single workflow. see #19910. git-svn-id: http://svn.automattic.com/wordpress/trunk@20138 1a063a9b-81f0-0310-95a4-ce76da25c4cd --- wp-admin/css/wp-admin.dev.css | 70 +++++++++- wp-admin/images/stars.png | Bin 0 -> 2098 bytes .../class-wp-theme-install-list-table.php | 14 +- wp-admin/includes/theme-install.php | 123 +++++++++--------- wp-admin/js/theme.dev.js | 37 ++++++ 5 files changed, 176 insertions(+), 68 deletions(-) create mode 100644 wp-admin/images/stars.png diff --git a/wp-admin/css/wp-admin.dev.css b/wp-admin/css/wp-admin.dev.css index 7b4ee94411..a0c26600b8 100644 --- a/wp-admin/css/wp-admin.dev.css +++ b/wp-admin/css/wp-admin.dev.css @@ -5224,7 +5224,9 @@ body.full-overlay-active { right: 0; } -.wp-full-overlay.collapsed { +.wp-full-overlay.collapsed, +.wp-full-overlay.collapsed div.wp-full-overlay-header, +.wp-full-overlay.collapsed div.wp-full-overlay-footer { left: -302px; } @@ -5248,6 +5250,9 @@ body.full-overlay-active { top: 0; bottom: 0; } +.wp-full-overlay.collapsed .wp-full-overlay-main { + left: 0; +} .wp-full-overlay-sidebar div.wp-full-overlay-header, .wp-full-overlay-sidebar div.wp-full-overlay-footer { @@ -5322,7 +5327,10 @@ body.full-overlay-active { /* Animations */ .wp-full-overlay, -.wp-full-overlay .collapse-sidebar { +.wp-full-overlay .collapse-sidebar, +.wp-full-overlay-sidebar div.wp-full-overlay-header, +.wp-full-overlay-sidebar div.wp-full-overlay-footer, +.wp-full-overlay-main { -moz-transition-property: left, right, top, bottom; -webkit-transition-property: left, right, top, bottom; -o-transition-property: left, right, top, bottom; @@ -5347,12 +5355,68 @@ body.full-overlay-active { display: block; } -#customize-container iframe { +#customize-container iframe, +#theme-installer iframe { height: 100%; width: 100%; z-index: 20; } +#theme-installer { + display: none; +} + +.install-theme-info { + display: none; + padding: 45px 20px 15px; +} + +#theme-installer .install-theme-info { + display: block; +} + +.install-theme-info .theme-install { + float: right; + margin-top: 18px; +} + +.install-theme-info .theme-name { + font-size: 16px; + line-height: 24px; + margin-bottom: 0; +} + +.install-theme-info .theme-screenshot { + margin-top: 15px; + width: 258px; + border: 1px solid #ccc; +} + +.install-theme-info .theme-version { + margin: 15px 0; + float: right; +} + +.install-theme-info .theme-rating { + margin: 14px 0; + width: 100px; + height: 17px; + float: left; + background: url('../images/stars.png?ver=20120307') repeat-x bottom left; +} +.install-theme-info .theme-rating div { + background: url('../images/stars.png?ver=20120307') repeat-x top left; + height: 17px; + float: left; +} + +.install-theme-info .theme-description { + margin-top: 34px; + padding-top: 1em; + color: #777; + line-height: 20px; +} + /*------------------------------------------------------------------------------ 25.0 - Misc ------------------------------------------------------------------------------*/ diff --git a/wp-admin/images/stars.png b/wp-admin/images/stars.png new file mode 100644 index 0000000000000000000000000000000000000000..98e32a5937afac3673ee669d874f7c8a22f4cdb5 GIT binary patch literal 2098 zcmbVNc~nzZ8V`zKDcfie#KV{d1VKpN3t>r2!jc3*2*eN~ql}p4K>{Q%B!L91VzfA* zEEbD1MNkT*AfOl#9EMHGGSoVSDWEJO>L5^N3e>5xDfC6enLj+8bLO4%-o5v`zu&ii z=Vh`(_nDd4nxIf9v!Fl*2U)F?-X z7UDpBQA*-B5Cw(WD3)*|RgtU^vJjTy_<9UZBb6g;6pG@bk@JP|kP0J!VkI&vcDAt< zi;;+^*n=J{fF-9xVo6}C0t!zJV(gc~3tf6Ax=p`e2 zy%>+hyn(3Vsn|8AB3Wz<9acaX4;lzr4QmBx~RT5Z+(QD)j;3O3li+H*gf>h38y;CexzD*R8GQ5T_$AdTkFO}-! zdV^M~IM9FGcrRMXO_4)*4y1&W6hfpPG4|_ZBzM1VNDoB3A%`g>NKyC+3|N>Xg=DHA z1{I6k;6xG;Ie_F90D@jbz>5HQdV`?17Z|{x`!ksYI^f~OV6N+UAD7_e&LomRz!Mm9%r z!zx%QhUFM~xCaizu=qlWOfS(FXf0j_q>v;-q5uUf#k|QdS@Iqa{&(bST+#oNH9X=B zUf&-7)h_EIqzCoecg>F+-i;3=LuN*S3`ft>*?APo@MsXjkEnM^MfLaFHV#C_yGWV6yaZI5>!&v3f9PWGbXaQtlg(-zaZ5?2p`c_-$(E{> z3Im}7uDHExw75gIlYkn z!BE?HhJWViZ-UDdcHMp}UD~@JId#__vy5y`Eapaqw)@m?_^9WL`ubH17h}8PfU&Q1 z{F76?NBViLoBFfbb{p@9j_=zXm!U1qv?9JzTALN22F5X2uP;v?=q>Lq{``CcE8~y+-!$$ymJOk~Dd-2K#rIy&tH&N&hHmUQL+k&+)+{f~CHS1d^v$0?GqGz;?^;Uh zeD-@wnt7#nK5us!r9Hx6F55TcJIrq%d^$ZEzIc3E<8AuMHK$5|b+@25Fpm*p@Q<%= zqOZ8dIo{6O)$)1C2Ij-jsh!J3wp%){7%?U;i5l!0SYhYSy4fGS$~&7wOQdG6lug=H z858m^eqf$Rp>4jOFOWDhBdi9Y`M!luW`YG(f3Ner^+3@%kk0foDd*N_g`O|hI=5P! zd?Ds6*&G(uhMrwDz~n67sb30yxanLUx9ejo{IaU*cRia|Zl4?)&1|{Wv1p{bZ;+iU z^&JoVselty{4_eZL^=Yj<_I2tEjctbXiQXmW$du(v|DEvcA|SMgY9wLF=m$M^av6! z6q1g=ths7LQ*ijjb}5Tdl+=@bmlmMIw61FBzsVP;9N-Hpxu><40GUa};^1=CWD=n? z<;&^rdqd`q9fLWGlf#VE1jrX5rjM}C*gjDQ}Yh^fwh#g|>r-_a*%GCREWLfVNPK-2yw<1NR+Z}ki(7tJ1- zBa`Y{ucoE6-%p(_C~|CWFI~JynBVY2o@L;CWcF-%u9wT8^S8j(ryt%6>qzIV`u1ey zWt>V^<4r2evb*vlw3&77L-@<4!r5!lrfg%T^3+Xqbe~#W>&mQ|c#&TjI5%=||xMm(umS?r~&U{UpY+4XHF;@p- zoxW_|6n;6b8oF%|5#)ELci9L|LTwGpQ9?HbmlkOsyiJ;Zj~VrIDF(l zt@(*n*=_mD8*p5*K-`G7<~>On&2Ot|^-)&X+Z0eNg5zvAaRuRiSFqvk(N8i9DRafP zHhXo^7X<^FWC!OtIOL0*?xeKIvPU!ghyxWvf_bZi;~HI9R@7@FYsX5Ln(3VuXKsY- rF`T-< +
+ + +
+
+
+
+
+
+ string 'Magazine Basic' (length=14) + * public 'slug' => string 'magazine-basic' (length=14) + * public 'version' => string '1.1' (length=3) + * public 'author' => string 'tinkerpriest' (length=12) + * public 'preview_url' => string 'http://wp-themes.com/?magazine-basic' (length=36) + * public 'screenshot_url' => string 'http://wp-themes.com/wp-content/themes/magazine-basic/screenshot.png' (length=68) + * public 'rating' => float 80 + * public 'num_ratings' => int 1 + * public 'homepage' => string 'http://wordpress.org/extend/themes/magazine-basic' (length=49) + * public 'description' => string 'A basic magazine style layout with a fully customizable layout through a backend interface. Designed by c.bavota of Tinker Priest Media.' (length=214) + * public 'download_link' => string 'http://wordpress.org/extend/themes/download/magazine-basic.1.1.zip' (length=66) + */ +function display_theme( $theme ) { global $themes_allowedtags; - if ( empty($theme) ) + if ( empty( $theme ) ) return; - $name = wp_kses($theme->name, $themes_allowedtags); - $author = wp_kses($theme->author, $themes_allowedtags); - $desc = wp_kses($theme->description, $themes_allowedtags); - //if ( strlen($desc) > 30 ) - // $desc = substr($desc, 0, 15) . '...' . substr($desc, -15) . ''; + $name = wp_kses( $theme->name, $themes_allowedtags ); + $author = wp_kses( $theme->author, $themes_allowedtags ); - $preview_link = $theme->preview_url . '?TB_iframe=true&width=600&height=400'; - if ( !is_array($actions) ) { - $actions = array(); - $actions[] = '' . __('Install') . ''; - if ( !is_network_admin() ) - $actions[] = '' . __('Preview') . ''; - $actions = apply_filters('theme_install_action_links', $actions, $theme); - } + $num_ratings = sprintf( _n( '(based on %s rating)', '(based on %s ratings)', $theme->num_ratings ), number_format_i18n( $theme->num_ratings ) ); + + $preview_url = add_query_arg( 'theme_preview', '1' ); + $preview_title = sprintf( __('Preview “%s”'), $name ); + + $install_url = add_query_arg( array( + 'action' => 'install-theme', + 'theme' => $theme->slug, + ), self_admin_url( 'update.php' ) ); - $actions = implode ( ' | ', $actions ); ?> -'> - - -

by %2$s' ), $name, $author ); ?>

- - -| -
-

-

version, $themes_allowedtags) ?>

-last_updated) ) : ?> -

last_updated)) ) ?>

-requires) ) : ?> -

requires) ?>

-tested) ) : ?> -

tested ?>

-downloaded) ) : ?> -

downloaded), number_format_i18n($theme->downloaded)) ?>

- -
-
-
<?php esc_attr_e('5 stars') ?>
-
<?php esc_attr_e('4 stars') ?>
-
<?php esc_attr_e('3 stars') ?>
-
<?php esc_attr_e('2 stars') ?>
-
<?php esc_attr_e('1 star') ?>
-
-
- string 'Magazine Basic' (length=14) - public 'slug' => string 'magazine-basic' (length=14) - public 'version' => string '1.1' (length=3) - public 'author' => string 'tinkerpriest' (length=12) - public 'preview_url' => string 'http://wp-themes.com/?magazine-basic' (length=36) - public 'screenshot_url' => string 'http://wp-themes.com/wp-content/themes/magazine-basic/screenshot.png' (length=68) - public 'rating' => float 80 - public 'num_ratings' => int 1 - public 'homepage' => string 'http://wordpress.org/extend/themes/magazine-basic' (length=49) - public 'description' => string 'A basic magazine style layout with a fully customizable layout through a backend interface. Designed by c.bavota of Tinker Priest Media.' (length=214) - public 'download_link' => string 'http://wordpress.org/extend/themes/download/magazine-basic.1.1.zip' (length=66) - */ + + + + +

by %2$s' ), $name, $author ); + ?>

+ +
+ +

+ + +
+
+
+
+ + version, $themes_allowedtags ); ?> +
+
+ description, $themes_allowedtags ); ?> +
+ +
+ '); + preview.fadeIn( 200, function() { + body.addClass('theme-installer-active full-overlay-active'); + }); + event.preventDefault(); + }); +}); + var ThemeViewer; (function($){