Changeset 26291
- Timestamp:
- 11/20/2013 07:43:36 PM (11 years ago)
- Location:
- trunk/src/wp-admin
- Files:
-
- 4 edited
Legend:
- Unmodified
- Added
- Removed
-
trunk/src/wp-admin/css/theme.css
r26280 r26291 1 /** 2 * THX38 styles... 3 * 4 * Note: it expects mp6 plugin to be active as this is based on that design of the admin. 5 */ 6 #themes { 1 .theme-browser .themes { 7 2 clear: both; 8 3 padding: 0 0 100px; 9 4 } 10 #appearanceh2 {5 .themes-php .wrap h2 { 11 6 float: left; 12 7 margin-bottom: 15px; 13 8 } 14 #appearanceh2 .button {9 .themes-php .wrap h2 .button { 15 10 margin-left: 20px; 16 11 } 17 .theme -count {12 .themes-php .theme-count { 18 13 color: #fff; 19 14 border-radius: 30px; … … 28 23 } 29 24 /* Position admin messages */ 30 #appearancediv.updated {25 .themes-php div.updated { 31 26 margin: 0 0 20px 0; 32 27 clear: both; 33 28 } 34 #appearancediv.updated a {29 .themes-php div.updated a { 35 30 text-decoration: underline; 36 }37 /* Add new theme */38 .add-new-h2 {39 background: #e0e0e0;40 color: #555;41 margin-left: 20px;42 }43 .add-new-icon:hover {44 background: #2ea2cc;45 }46 /* Edit mode toggle */47 .themes-bulk-edit {48 color: #555;49 cursor: pointer;50 font-size: 14px;51 margin-left: 20px;52 padding: 4px 8px;53 border: 1px solid #ddd;54 display: none;55 }56 .themes-bulk-edit:before {57 content: '\f111';58 display: inline-block;59 font: normal 20px/1 'dashicons';60 margin: 0 6px 0 0;61 opacity: 0.8;62 position: relative;63 top: 4px;64 speak: none;65 -webkit-font-smoothing: antialiased;66 }67 .themes-bulk-edit:hover {68 border-color: #2ea2cc;69 color: #2ea2cc;70 }71 .edit-mode .themes-bulk-edit {72 background: #555;73 color: #fff;74 }75 .edit-mode .themes-bulk-edit .edit,76 .themes-bulk-edit .done {77 display: none;78 }79 .edit-mode .themes-bulk-edit .done,80 .themes-bulk-edit .edit {81 display: inline;82 31 } 83 32 … … 173 122 background: #d54e21; 174 123 } 175 body.edit-mode .theme .delete-theme {176 display: inline-block;177 }178 body.edit-mode .theme:hover .theme-screenshot img {179 opacity: 1;180 }181 body.edit-mode .theme:hover:after {182 opacity: 0;183 }184 body.edit-mode .theme:hover .theme-actions,185 body.edit-mode .theme.add-new {186 display: none;187 }188 189 124 190 125 /* … … 351 286 * Add new theme 352 287 */ 353 . add-new{288 .theme-browser .add-new-theme { 354 289 border: none; 355 290 box-shadow: none; 356 291 } 357 . add-newa {292 .theme-browser .add-new-theme a { 358 293 color: #999; 359 294 text-decoration: none; … … 361 296 position: relative; 362 297 } 363 .theme .add-new:after {298 .theme-browser .add-new-theme:after { 364 299 display: block; 365 300 content: ''; … … 377 312 box-sizing: border-box; 378 313 } 379 .theme .add-newspan:after {314 .theme-browser .add-new-theme span:after { 380 315 background: rgba(153, 153, 153, 0.1); 381 316 border-radius: 50%; … … 398 333 z-index:4; 399 334 } 400 .theme .add-new:hover .theme-screenshot {335 .theme-browser .add-new-theme:hover .theme-screenshot { 401 336 background: none; 402 337 } 403 .theme .add-new:hover span:after {338 .theme-browser .add-new-theme:hover span:after { 404 339 background: #fff; 405 340 color: rgb(16, 116, 162); … … 407 342 } 408 343 409 .theme .add-new:hover:after {344 .theme-browser .add-new-theme:hover:after { 410 345 border-color: transparent; 411 346 color: #fff; … … 413 348 } 414 349 415 . add-new.theme-name {350 .theme-browser .add-new-theme .theme-name { 416 351 background: none; 417 352 text-align: center; … … 421 356 top: -70px; 422 357 } 423 . add-new:hover .theme-name {358 .theme-browser .add-new-theme:hover .theme-name { 424 359 color: #fff; 425 360 z-index: 2; 426 361 } 427 362 428 429 363 /* 430 364 * The search form 431 365 */ 432 . search-form{366 .theme-browser .theme-search { 433 367 float: left; 434 368 position: relative; 435 369 top: 7px; 436 370 left: 10px; 437 }438 #theme-search {439 371 font-size: 16px; 440 372 font-weight: 300; … … 442 374 } 443 375 444 445 376 /* 446 377 * Theme Overlay 447 378 * Shown when clicking a theme 448 379 */ 449 #theme-overlay { 450 } 451 #theme-overlay .theme-backdrop { 380 .theme-overlay .theme-backdrop { 452 381 position: absolute; 453 382 left: -20px; … … 459 388 z-index: 10; 460 389 } 461 body.theme-overlay {390 body.theme-overlay-open { 462 391 overflow: hidden; 463 392 } 464 393 465 #theme-overlay .theme-utility {394 .theme-overlay .theme-utility { 466 395 position: absolute; 467 396 top: 0; … … 470 399 border-bottom: 1px solid #eee; 471 400 } 472 #theme-overlay .back {401 .theme-overlay .back { 473 402 cursor: pointer; 474 403 height: 48px; … … 478 407 border-left: 1px solid #eee; 479 408 } 480 #theme-overlay .back:hover {409 .theme-overlay .back:hover { 481 410 background: #333; 482 411 } 483 #theme-overlay .back:hover:before {412 .theme-overlay .back:hover:before { 484 413 color: #fff; 485 414 } 486 #theme-overlay .back:before {415 .theme-overlay .back:before { 487 416 font: normal 30px/48px 'dashicons' !important; 488 417 color: #bbb; … … 492 421 } 493 422 /* Left and right navigation */ 494 #theme-overlay .right,495 #theme-overlay .left {423 .theme-overlay .right, 424 .theme-overlay .left { 496 425 cursor: pointer; 497 426 -webkit-user-select: none; … … 505 434 border-right: 1px solid #eee; 506 435 } 507 #theme-overlay .right:hover,508 #theme-overlay .left:hover {436 .theme-overlay .right:hover, 437 .theme-overlay .left:hover { 509 438 background: #333; 510 439 } 511 #theme-overlay .right:hover:before,512 #theme-overlay .left:hover:before {440 .theme-overlay .right:hover:before, 441 .theme-overlay .left:hover:before { 513 442 color: #fff; 514 443 } 515 #theme-overlay .left:before {444 .theme-overlay .left:before { 516 445 content: '\f341'; 517 446 } 518 #theme-overlay .right:before {447 .theme-overlay .right:before { 519 448 content: '\f345'; 520 449 } 521 #theme-overlay .right:before,522 #theme-overlay .left:before {450 .theme-overlay .right:before, 451 .theme-overlay .left:before { 523 452 font: normal 16px/54px 'dashicons' !important; 524 453 display: inline; 525 454 font-weight: 300; 526 455 } 527 #theme-overlay .left:before {}528 529 #theme-overlay .theme-wrap {456 .theme-overlay .left:before {} 457 458 .theme-overlay .theme-wrap { 530 459 clear: both; 531 460 position: fixed; … … 540 469 z-index: 20; 541 470 } 542 #theme-overlay .theme-wrap:after {471 .theme-overlay .theme-wrap:after { 543 472 content: "."; 544 473 display: block; … … 548 477 } 549 478 550 #theme-overlay .theme-actions {479 .theme-overlay .theme-actions { 551 480 position: fixed; 552 481 text-align: center; … … 559 488 z-index: 30; 560 489 } 561 #theme-overlay.active .theme-actions {562 563 } 564 #theme-overlay .theme-actions a {490 .theme-overlay.active .theme-actions { 491 492 } 493 .theme-overlay .theme-actions a { 565 494 margin-right: 5px; 566 495 margin-bottom: 0; … … 570 499 padding: 0 20px 1px 20px; 571 500 } 572 #theme-overlay .theme-actions .delete-theme {501 .theme-overlay .theme-actions .delete-theme { 573 502 border-radius: 2px; 574 503 color: #a00; … … 580 509 text-decoration: none; 581 510 } 582 #theme-overlay .theme-actions .delete-theme:hover {511 .theme-overlay .theme-actions .delete-theme:hover { 583 512 background: #d54e21; 584 513 color: #fff; 585 514 } 586 515 587 #theme-overlay .theme-actions .active-theme,588 #theme-overlay.active .theme-actions .inactive-theme {516 .theme-overlay .theme-actions .active-theme, 517 .theme-overlay.active .theme-actions .inactive-theme { 589 518 display: none; 590 519 } 591 #theme-overlay .theme-actions .inactive-theme,592 #theme-overlay.active .theme-actions .active-theme {520 .theme-overlay .theme-actions .inactive-theme, 521 .theme-overlay.active .theme-actions .active-theme { 593 522 display: block; 594 523 } … … 596 525 * Theme Screenshots gallery 597 526 */ 598 #theme-overlay .theme-screenshots {527 .theme-overlay .theme-screenshots { 599 528 float: left; 600 529 margin: 0 30px 0 0; … … 603 532 } 604 533 /* First screenshot, shown big */ 605 #theme-overlay .screenshot {534 .theme-overlay .screenshot { 606 535 background: #000; 607 536 border: 1px solid #fff; … … 613 542 box-shadow: 0 0 0 1px rgba(0,0,0,0.2); 614 543 } 615 #theme-overlay .screenshot:after {544 .theme-overlay .screenshot:after { 616 545 content: ''; 617 546 display: block; 618 547 padding-top: 66.66666%; /* using a 3/2 aspect ratio */ 619 548 } 620 #theme-overlay .screenshot img {549 .theme-overlay .screenshot img { 621 550 cursor: pointer; 622 551 height: auto; … … 627 556 } 628 557 /* Other screenshots, shown small and square */ 629 #theme-overlay .screenshot.thumb {558 .theme-overlay .screenshot.thumb { 630 559 background: #ccc; 631 560 border: 1px solid #eee; … … 636 565 height: 80px; 637 566 } 638 #theme-overlay .screenshot.thumb:after {567 .theme-overlay .screenshot.thumb:after { 639 568 content: ''; 640 569 display: block; 641 570 padding-top: 100%; /* using a 1/1 aspect ratio */ 642 571 } 643 #theme-overlay .screenshot.thumb img {572 .theme-overlay .screenshot.thumb img { 644 573 cursor: pointer; 645 574 height: auto; … … 650 579 height: auto; 651 580 } 652 #theme-overlay .screenshot.selected {581 .theme-overlay .screenshot.selected { 653 582 background: transparent; 654 583 border: 2px solid #2ea2cc; 655 584 } 656 #theme-overlay .screenshot.selected img {585 .theme-overlay .screenshot.selected img { 657 586 opacity: 0.8; 658 587 } … … 660 589 * Theme heading information 661 590 */ 662 #theme-overlay .theme-info {591 .theme-overlay .theme-info { 663 592 width: 40%; 664 593 float: left; 665 594 } 666 #theme-overlay .current-label {595 .theme-overlay .current-label { 667 596 background: #333; 668 597 color: #fff; … … 675 604 user-select: none; 676 605 } 677 #theme-overlay .theme-name {606 .theme-overlay .theme-name { 678 607 color: #222; 679 608 font-size: 32px; … … 682 611 line-height: 1.3; 683 612 } 684 #theme-overlay .theme-version {613 .theme-overlay .theme-version { 685 614 color: #999; 686 615 font-size: 13px; … … 692 621 user-select: none; 693 622 } 694 #theme-overlay .theme-author {623 .theme-overlay .theme-author { 695 624 color: #686868; 696 625 font-size: 16px; … … 698 627 margin: 15px 0 25px; 699 628 } 700 #theme-overlay .theme-author a {629 .theme-overlay .theme-author a { 701 630 text-decoration: none; 702 631 } 703 #theme-overlay .theme-description {632 .theme-overlay .theme-description { 704 633 color: #555; 705 634 font-size: 15px; … … 708 637 margin: 30px 0 0 0; 709 638 } 710 #theme-overlay .theme-tags {639 .theme-overlay .theme-tags { 711 640 border-top: 3px solid #eee; 712 641 color: #888; … … 717 646 text-transform: capitalize; 718 647 } 719 #theme-overlay .theme-tags span {648 .theme-overlay .theme-tags span { 720 649 color: #444; 721 650 font-weight: bold; 722 651 margin-right: 5px; 723 652 } 724 #theme-overlay .theme-actions {653 .theme-overlay .theme-actions { 725 654 } 726 655 /* Theme Updates info */ 727 #theme-overlay .theme-update-message {656 .theme-overlay .theme-update-message { 728 657 background: #fefaf7; 729 658 border: 1px solid #eee; … … 732 661 padding: 5px 20px 10px; 733 662 } 734 #theme-overlay .theme-update {663 .theme-overlay .theme-update { 735 664 color: #222; 736 665 font-size: 18px; … … 739 668 margin: 0; 740 669 } 741 #theme-overlay .parent-theme {670 .theme-overlay .parent-theme { 742 671 background: #f7fcfe; 743 672 border: 1px solid #eee; … … 748 677 padding: 10px 10px 10px 20px; 749 678 } 750 #theme-overlay .parent-theme strong {679 .theme-overlay .parent-theme strong { 751 680 font-weight: 700; 752 681 } … … 829 758 font-size: 23vw; 830 759 } 831 #theme-overlay .theme-wrap,832 #theme-overlay .theme-actions {760 .theme-overlay .theme-wrap, 761 .theme-overlay .theme-actions { 833 762 right: 15%; 834 763 left: 22%; … … 852 781 /* Mini-sidebar in MP6 */ 853 782 @media ( max-width: 900px ) { 854 #theme-overlay .theme-wrap,855 #theme-overlay .theme-actions {783 .theme-overlay .theme-wrap, 784 .theme-overlay .theme-actions { 856 785 left: 76px; 857 786 } … … 862 791 margin-right: -3px 863 792 } 864 #theme-overlay .theme-wrap {793 .theme-overlay .theme-wrap { 865 794 top: 45px; 866 795 right: 0px; … … 869 798 padding: 70px 20px 100px; 870 799 } 871 #theme-overlay .theme-actions {800 .theme-overlay .theme-actions { 872 801 right: 0px; 873 802 bottom: 0px; … … 876 805 padding: 10px; 877 806 } 878 #theme-overlay .theme-screenshots {807 .theme-overlay .theme-screenshots { 879 808 width: 40%; 880 809 } 881 #theme-overlay .theme-info {810 .theme-overlay .theme-info { 882 811 width: 50%; 883 812 } 884 #theme-overlay .theme-actions .delete-theme {813 .theme-overlay .theme-actions .delete-theme { 885 814 bottom: 10px; 886 815 } 887 . search-form{816 .theme-browser .theme-search { 888 817 top: 3px; 889 818 } … … 904 833 font-size: 53vw; 905 834 } 906 #theme-overlay .theme-update,907 #theme-overlay .theme-description {835 .theme-overlay .theme-update, 836 .theme-overlay .theme-description { 908 837 margin-left: 0; 909 838 } 910 #theme-overlay.active .theme-actions .active-theme .button:nth-child(3n) {839 .theme-overlay.active .theme-actions .active-theme .button:nth-child(3n) { 911 840 display: none; 912 841 } … … 915 844 margin-right: 0; 916 845 } 917 #theme-overlay .theme-screenshots {846 .theme-overlay .theme-screenshots { 918 847 width: 100%; 919 848 float: none; 920 849 } 921 #theme-overlay .theme-info {850 .theme-overlay .theme-info { 922 851 width: 100%; 923 852 } 924 #theme-overlay .theme-author {853 .theme-overlay .theme-author { 925 854 margin: 5px 0 15px 0; 926 855 } 927 #theme-overlay .theme-version {856 .theme-overlay .theme-version { 928 857 margin-left: 0; 929 858 position: absolute; … … 931 860 left: 130px; 932 861 } 933 #theme-overlay .current-label {862 .theme-overlay .current-label { 934 863 margin-top: 10px; 935 864 font-size: 13px; … … 938 867 * Search form 939 868 */ 940 . search-form{869 .theme-browser .theme-search { 941 870 float: none; 942 871 clear: both; 943 872 left: 0; 944 }945 #theme-search {946 873 margin: 10px 0; 947 874 width: 100%; -
trunk/src/wp-admin/css/wp-admin.css
r26289 r26291 6541 6541 } 6542 6542 6543 #broken-themes { 6543 .broken-themes { 6544 clear: both; 6545 } 6546 6547 .broken-themes table { 6544 6548 text-align: left; 6545 6549 width: 50%; -
trunk/src/wp-admin/js/theme.js
r26288 r26291 5 5 6 6 // Set up our namespace... 7 var themes = wp.themes = wp.themes || {}; 7 var themes, l10n; 8 themes = wp.themes = wp.themes || {}; 8 9 9 10 // Store the theme data and settings for organized and quick access 10 // themes.data.settings, themes.data.themes, themes.data. i18n11 // themes.data.settings, themes.data.themes, themes.data.l10n 11 12 themes.data = _wpThemeSettings; 13 l10n = themes.data.l10n; 12 14 13 15 // Setup app structure … … 18 20 // Main view controller for themes.php 19 21 // Unifies and renders all available views 20 //21 // Hooks to #appearance and organizes the views to be rendered22 22 themes.view.Appearance = wp.Backbone.View.extend({ 23 23 24 // Set DOM container 25 // {#appearance} by default 26 el: themes.data.settings.container, 24 el: '#wpbody-content .wrap .theme-browser', 27 25 28 26 window: $( window ), 29 27 // Pagination instance 30 28 page: 0, 31 32 events: {33 'click .themes-bulk-edit': 'editMode',34 'click .theme .delete-theme': 'deleteTheme'35 },36 29 37 30 // Sets up a throttler for binding to 'scroll' … … 62 55 parent: this 63 56 }); 57 58 // Render search form. 59 this.search(); 60 64 61 // Render and append 65 62 this.view.render(); 66 63 this.$el.append( this.view.el ); 67 68 // Search form69 this.search();70 64 }, 71 65 … … 80 74 // Render and append after screen title 81 75 view.render(); 82 self.$el. find( '> h2' ).after( view.el );76 self.$el.append( view.el ); 83 77 }, 84 78 … … 96 90 this.trigger( 'theme:scroll' ); 97 91 } 98 },99 100 // Enters edit mode that allows easy access to deleting themes101 editMode: function() {102 $( 'body' ).toggleClass( 'edit-mode' );103 this.$el.find( '.themes-bulk-edit' ).toggleClass( 'mp6-text-highlight' );104 },105 106 deleteTheme: function() {107 return confirm( themes.data.settings.confirmDelete );108 92 } 109 93 }); … … 220 204 this.$el.addClass( 'active' ); 221 205 this.$el.find( '.theme-name' ).addClass( 'mp6-primary' ); 222 $( ' #theme-overlay' ).addClass( 'active' );206 $( '.theme-overlay' ).addClass( 'active' ); 223 207 } 224 208 }, … … 246 230 247 231 // Wrap theme data on a div.theme element 248 id: 'theme-overlay',232 className: 'theme-overlay', 249 233 250 234 events: { … … 260 244 render: function() { 261 245 var data = this.model.toJSON(); 262 263 246 this.$el.html( this.html( data ) ); 264 247 // Renders active theme styles … … 272 255 activeTheme: function() { 273 256 // Check the model has the active property 274 if ( this.model.get( 'active' ) ) { 275 this.$el.addClass( 'active' ); 276 } else { 277 $( '#theme-overlay' ).removeClass( 'active' ); 278 } 257 this.$el.toggleClass( 'active', this.model.get( 'active' ) ); 279 258 }, 280 259 … … 298 277 this.$el.fadeOut( 130, function() { 299 278 // Clicking outside the modal box closes the overlay 300 $( 'body' ).removeClass( 'theme-overlay closing-overlay' );279 $( 'body' ).removeClass( 'theme-overlay-open closing-overlay' ); 301 280 // Handle event cleanup 302 281 self.closeOverlay(); … … 381 360 }); 382 361 383 // Controls the rendering of div #themes,362 // Controls the rendering of div.themes, 384 363 // a wrapper that will hold all the theme elements 385 364 themes.view.Themes = wp.Backbone.View.extend({ 386 365 387 id: 'themes',366 className: 'themes', 388 367 389 368 // Number to keep track of scroll position … … 392 371 393 372 // The theme count element 394 count: $( ' #theme-count' ),373 count: $( '.theme-count' ), 395 374 396 375 initialize: function( options ) { … … 446 425 // Make sure the add-new stays at the end 447 426 if ( page >= 1 ) { 448 $( ' #add-new' ).remove();427 $( '.add-new-theme' ).remove(); 449 428 } 450 429 … … 457 436 // Render the views... 458 437 self.theme.render(); 459 // and append them to div #themes438 // and append them to div.themes 460 439 self.$el.append( self.theme.el ); 461 440 … … 467 446 // 'Add new theme' element shown at the end of the grid 468 447 if ( themes.data.settings.canInstall ) { 469 this.$el.append( '<div id="add-new" class="theme add-new"><a href="' + themes.data.settings.installURI + '"><div class="theme-screenshot"><span></span></div><h3 class="theme-name">' + themes.data.i18n.addNew + '</h3></a></div>' );448 this.$el.append( '<div class="theme add-new-theme"><a href="' + themes.data.settings.install_uri + '"><div class="theme-screenshot"><span></span></div><h3 class="theme-name">' + l10n.addNew + '</h3></a></div>' ); 470 449 } 471 450 … … 505 484 // Sets this.view to 'detail' 506 485 this.setView( 'detail' ); 507 $( 'body' ).addClass( 'theme-overlay ' );486 $( 'body' ).addClass( 'theme-overlay-open' ); 508 487 509 488 // Set up the theme details view 510 489 this.overlay = new themes.view.Details({ 511 model: self.model, 512 className: 'theme-' + self.model.id 490 model: self.model 513 491 }); 514 492 … … 517 495 518 496 this.overlay.screenshotGallery(); 519 520 // Resets counter whenever the overlay is opened521 this.index = 0;522 497 523 498 // Bind to theme:next and theme:previous 524 499 // triggered by the arrow keys 525 500 // 526 // The index keep track of where we are at527 // any given time501 // Keep track of the current model so we 502 // can infer an index position 528 503 this.listenTo( this.overlay, 'theme:next', function() { 529 // Bump the index number to keep track of how far530 // we should go for the next theme531 self.index++;532 504 // Renders the next theme on the overlay 533 self.next( [ self.model.cid , self.index] );505 self.next( [ self.model.cid ] ); 534 506 self.overlay.screenshotGallery(); 535 507 536 508 }) 537 509 .listenTo( this.overlay, 'theme:previous', function() { 538 // Decrease the index number to keep track of how far539 // we should go for the previous theme540 self.index--;541 510 // Renders the previous theme on the overlay 542 self.previous( [ self.model.cid , self.index] );511 self.previous( [ self.model.cid ] ); 543 512 self.overlay.screenshotGallery(); 544 513 }); 545 546 514 }, 547 515 548 516 // This method renders the next theme on the overlay modal 549 517 // based on the current position in the collection 550 // @params [model cid] and [index]518 // @params [model cid] 551 519 next: function( args ) { 552 520 var self = this, … … 555 523 // Get the current theme 556 524 model = self.collection.get( args[0] ); 557 // Get the next one558 nextModel = self.collection.at( self.collection.indexOf( model ) + args[1]);525 // Find the next model within the collection 526 nextModel = self.collection.at( self.collection.indexOf( model ) + 1 ); 559 527 560 528 // Sanity check which also serves as a boundary test … … 562 530 563 531 // We have a new theme... 564 // Clean the overlay 565 this.overlay.$el.html(''); 566 567 // Create the view 568 this.nextTheme = new themes.view.Details({ 569 model: nextModel, 570 className: 'theme-' + nextModel.id 571 }); 532 // Close the overlay 533 this.overlay.closeOverlay(); 572 534 573 535 // Trigger a route update for the current model 574 themes.router.navigate( 'theme/' + nextModel.id ); 575 576 // Render and fill this.overlay with the new html 577 this.nextTheme.render(); 578 return this.overlay.$el.html( this.nextTheme.el ); 579 } 580 581 // If we got this far it means we have no other themes 582 // so move back the counter to keep it sane 583 self.index--; 536 // that renders the new theme's overlay 537 themes.router.navigate( 'theme/' + nextModel.id, { trigger: true } ); 538 } 584 539 }, 585 540 586 541 // This method renders the previous theme on the overlay modal 587 542 // based on the current position in the collection 588 // @params [model cid] and [index]543 // @params [model cid] 589 544 previous: function( args ) { 590 545 var self = this, … … 593 548 // Get the current theme 594 549 model = self.collection.get( args[0] ); 595 previousModel = self.collection.at( self.collection.indexOf( model ) + args[1] ); 550 // Find the previous model within the collection 551 previousModel = self.collection.at( self.collection.indexOf( model ) - 1 ); 596 552 597 553 if ( previousModel !== undefined ) { 598 554 599 555 // We have a new theme... 600 // Clean the overlay 601 this.overlay.$el.html( '' ); 602 603 // Create the view 604 this.previousTheme = new themes.view.Details({ 605 model: previousModel, 606 className: 'theme-' + previousModel.id 607 }); 556 // Close the overlay 557 this.overlay.closeOverlay(); 608 558 609 559 // Trigger a route update for the current model 610 themes.router.navigate( 'theme/' + previousModel.id ); 611 612 // Render and fill this.overlay with the new html 613 this.previousTheme.render(); 614 return this.overlay.$el.html( this.previousTheme.el ); 615 } 616 617 // If we got this far it means we have no other themes 618 // so move back the counter to keep it sane 619 self.index++; 560 // that renders the new theme's overlay 561 themes.router.navigate( 'theme/' + previousModel.id, { trigger: true } ); 562 } 620 563 } 621 564 }); 622 565 623 // Search input view controller 624 // renders #search-form 566 // Search input view controller. 625 567 themes.view.Search = wp.Backbone.View.extend({ 626 568 627 className: 'search-form', 628 629 // 'keyup' triggers search 569 tagName: 'input', 570 className: 'theme-search', 571 572 attributes: { 573 placeholder: l10n.search 574 }, 575 630 576 events: { 631 'keyup #theme-search': 'search' 632 }, 633 634 // Grabs template file 635 html: themes.template( 'theme-search' ), 636 637 // Render the search form 638 render: function() { 639 var self = this; 640 self.$el.html( self.html ); 641 }, 642 643 // Runs a search on the theme collection 644 // bind on 'keyup' event 645 search: function() { 646 this.collection.doSearch( $( '#theme-search' ).val() ); 577 'input': 'search', 578 'keyup': 'search', 579 'change': 'search', 580 'search': 'search' 581 }, 582 583 // Runs a search on the theme collection. 584 search: function( event ) { 585 // Clear on escape. 586 if ( event.type === 'keyup' && event.which === 27 ) { 587 event.target.value = ''; 588 } 589 this.collection.doSearch( event.target.value ); 647 590 } 648 591 }); … … 659 602 // Set the search input value based on url 660 603 search: function( query ) { 661 $( ' #theme-search' ).val( query );604 $( '.theme-search' ).val( query ); 662 605 } 663 606 }); -
trunk/src/wp-admin/themes.php
r26288 r26291 97 97 'confirmDelete' => __( "Are you sure you want to delete this theme?\n\nClick 'Cancel' to go back, 'OK' to confirm the delete." ), 98 98 'root' => '/wp-admin/themes.php', 99 'container' => '#appearance',100 99 'extraRoutes' => '', 101 100 ), 102 'i18n' => array( 103 'addNew' => __( 'Add New Theme' ), 104 ), 101 'l10n' => array( 102 'addNew' => __( 'Add New Theme' ), 103 'search' => __( 'Search...' ), 104 ), 105 105 ) ); 106 106 … … 113 113 ?> 114 114 115 <div id="appearance"class="wrap">115 <div class="wrap"> 116 116 <h2><?php esc_html_e( 'Themes' ); ?> 117 <span id="theme-count"class="theme-count"></span>117 <span class="theme-count"></span> 118 118 <?php if ( ! is_multisite() && current_user_can( 'install_themes' ) ) : ?> 119 119 <a href="<?php echo admin_url( 'theme-install.php' ); ?>" class="add-new-h2"><?php echo esc_html( _x( 'Add New', 'Add new theme' ) ); ?></a> 120 120 <?php endif; ?> 121 121 </h2> 122 123 <div class="theme-browser"></div> 122 124 123 125 <?php … … 184 186 ?> 185 187 188 <div class="broken-themes"> 186 189 <h3><?php _e('Broken Themes'); ?></h3> 187 190 <p><?php _e('The following themes are installed but incomplete. Themes must have a stylesheet and a template.'); ?></p> 188 191 189 <table id="broken-themes">192 <table> 190 193 <tr> 191 194 <th><?php _ex('Name', 'theme name'); ?></th> … … 196 199 echo " 197 200 <tr> 198 <td>" . $broken_theme->get('Name') ."</td>201 <td>" . ( $broken_theme->get( 'Name' ) ? $broken_theme->get( 'Name' ) : $broken_theme->get_stylesheet() ) . "</td> 199 202 <td>" . $broken_theme->errors()->get_error_message() . "</td> 200 203 </tr>"; … … 202 205 ?> 203 206 </table> 207 </div> 208 204 209 <?php 205 210 } … … 236 241 </script> 237 242 238 <script id="tmpl-theme-search" type="text/template">239 <input type="text" name="theme-search" id="theme-search" placeholder="<?php esc_attr_e( 'Search...' ); ?>" />240 </script>241 242 243 <script id="tmpl-theme-single" type="text/template"> 243 244 <div class="theme-backdrop"></div> … … 249 250 </div> 250 251 251 <div class="theme-screenshots" id="theme-screenshots">252 <div class="theme-screenshots"> 252 253 <div class="screenshot first"><img src="{{ data.screenshot[0] }}" alt="" /></div> 253 254 <#
Note: See TracChangeset
for help on using the changeset viewer.