| Index: branches/js2-work/phase3/js/mwEmbed/modules/UploadWizard/mw.UploadWizard.js |
| — | — | @@ -2,7 +2,7 @@ |
| 3 | 3 | "mwe-upwiz-tab-file": "1. Upload your files", |
| 4 | 4 | "mwe-upwiz-tab-details": "2. Add licenses and descriptions", |
| 5 | 5 | "mwe-upwiz-tab-thanks": "3. Use your files", |
| 6 | | - "mwe-upwiz-intro": "Introductory text (short)", |
| | 6 | + "mwe-upwiz-intro": "Welcome to Wikimedia Commons, a repository of images, sounds, and movies that anyone can freely download and use. Add to humanity's knowledge by uploading files that could be used for an educational purpose.", |
| 7 | 7 | //"mwe-upwiz-select-files": "Select files:", |
| 8 | 8 | "mwe-upwiz-add-file-n": "Add another file", |
| 9 | 9 | "mwe-upwiz-add-file-0": "Click here to add a file for upload", |
| — | — | @@ -514,7 +514,13 @@ |
| 515 | 515 | // with this flow |
| 516 | 516 | _this.filenameCtrl = $j('<input type="hidden" name="filename" value=""/>').get(0); |
| 517 | 517 | |
| | 518 | + // this file Ctrl container is placed over other interface elements, intercepts clicks and gives them to the file input control. |
| | 519 | + // however, we want to pass hover events to interface elements that we are over, hence the bindings. |
| | 520 | + // n.b. not using toggleClass because it often gets this event wrong -- relies on previous state to know what to do |
| 518 | 521 | _this.fileCtrlContainer = $j('<div class="mwe-upwiz-file-ctrl-container">') |
| | 522 | + .bind( 'mouseenter', function(e) { _this.addFileCtrlHover(e) } ) |
| | 523 | + .bind( 'mouseleave', function(e) { _this.removeFileCtrlHover(e) } ); |
| | 524 | + |
| 519 | 525 | // the css trickery (along with css) |
| 520 | 526 | // here creates a giant size file input control which is contained within a div and then |
| 521 | 527 | // clipped for overflow. The effect is that we have a div (ctrl-container) we can position anywhere |
| — | — | @@ -651,14 +657,41 @@ |
| 652 | 658 | 'margin-top' : '-' + ~~( $j( _this.fileInputCtrl).height() - $covered.outerHeight() - 10 ) + 'px' |
| 653 | 659 | } ); |
| 654 | 660 | |
| 655 | | - // pass hover events to the thing we cover, for interface niceties |
| 656 | | - $j( _this.fileCtrlContainer ).bind( 'mouseenter mouseleave', function() { |
| 657 | | - $j( selector ).toggleClass( 'hover' ); |
| 658 | | - } ); |
| | 661 | + // we may be passing the file ctrl's hover events to another covered interface element |
| | 662 | + // see toggleFileCtrlHover |
| | 663 | + if ( _this.fileCtrlCovered ) { |
| | 664 | + _this.fileCtrlCovered.removeClass( 'hover' ); |
| | 665 | + } |
| | 666 | + _this.fileCtrlCovered = $covered; |
| 659 | 667 | |
| 660 | 668 | }, |
| 661 | 669 | |
| 662 | 670 | /** |
| | 671 | + * add class to an interface element covered by the fileCtrlContainer |
| | 672 | + * we are not using jQuery.toggleClass because it seems to get this wrong too often -- dumbly activates when should deactivate & |
| | 673 | + * vice versa. |
| | 674 | + * @param jquery event |
| | 675 | + */ |
| | 676 | + addFileCtrlHover: function(e) { |
| | 677 | + if ( this.fileCtrlCovered ) { |
| | 678 | + this.fileCtrlCovered.addClass( 'hover' ); |
| | 679 | + } |
| | 680 | + }, |
| | 681 | + |
| | 682 | + /** |
| | 683 | + * remove class from an jquery-wrapped interface element covered by the fileCtrlContainer |
| | 684 | + * we are not using jQuery.toggleClass because it seems to get this wrong too often -- dumbly activates when should deactivate & |
| | 685 | + * vice versa. |
| | 686 | + * @param jquery event |
| | 687 | + */ |
| | 688 | + removeFileCtrlHover: function(e) { |
| | 689 | + if ( this.fileCtrlCovered ) { |
| | 690 | + this.fileCtrlCovered.removeClass( 'hover' ); |
| | 691 | + } |
| | 692 | + }, |
| | 693 | + |
| | 694 | + |
| | 695 | + /** |
| 663 | 696 | * this does two things: |
| 664 | 697 | * 1 ) since the file input has been hidden with some clever CSS ( to avoid x-browser styling issues ), |
| 665 | 698 | * update the visible filename |
| Index: branches/js2-work/phase3/js/mwEmbed/modules/UploadWizard/css/uploadWizard.css |
| — | — | @@ -90,7 +90,6 @@ |
| 91 | 91 | } |
| 92 | 92 | |
| 93 | 93 | #mwe-upwiz-add-file { |
| 94 | | - padding-top: 16px; |
| 95 | 94 | } |
| 96 | 95 | |
| 97 | 96 | /* NOT a pseudoclass */ |
| — | — | @@ -124,19 +123,34 @@ |
| 125 | 124 | } |
| 126 | 125 | |
| 127 | 126 | .mwe-upwiz-file.filled { |
| | 127 | + padding: 4px; |
| 128 | 128 | height: 24px; |
| 129 | 129 | } |
| 130 | 130 | |
| 131 | 131 | .mwe-upwiz-visible-file { |
| 132 | 132 | width: 300px; |
| 133 | 133 | height: 18px; |
| | 134 | + padding-left: 5px; |
| 134 | 135 | float: left; |
| 135 | 136 | white-space: nowrap; |
| 136 | 137 | overflow: hidden; |
| 137 | 138 | |
| | 139 | + background: white; |
| | 140 | + |
| | 141 | + border-style: solid; |
| | 142 | + border-top-width: 2px; |
| | 143 | + border-left-width: 2px; |
| | 144 | + border-right-width: 1px; |
| | 145 | + border-bottom-width: 1px; |
| | 146 | + border-color: white; |
| 138 | 147 | /* border: 1px solid blue; XXX just to make it visible for now */ |
| 139 | 148 | } |
| 140 | 149 | |
| | 150 | +.mwe-upwiz-visible-file.hover { |
| | 151 | + background: white; |
| | 152 | + border-color: #0645ad; |
| | 153 | +} |
| | 154 | + |
| 141 | 155 | /* XXX we probably have a standard for this */ |
| 142 | 156 | .helper { |
| 143 | 157 | color: #cccccc; /* or whatever we do for greyed out text */ |