| Index: branches/js2-work/phase3/js/mwEmbed/modules/UploadWizard/mw.UploadWizard.js |
| — | — | @@ -5,7 +5,7 @@ |
| 6 | 6 | "mwe-upwiz-intro": "Introductory text (short)", |
| 7 | 7 | //"mwe-upwiz-select-files": "Select files:", |
| 8 | 8 | "mwe-upwiz-add-file-n": "Add another file", |
| 9 | | - "mwe-upwiz-add-file-0": "Add a file", |
| | 9 | + "mwe-upwiz-add-file-0": "Click here to add a file for upload", |
| 10 | 10 | "mwe-upwiz-browse": "Browse...", |
| 11 | 11 | "mwe-upwiz-transported": "OK", |
| 12 | 12 | "mwe-upwiz-click-here": "Click here to select a file", |
| — | — | @@ -547,7 +547,7 @@ |
| 548 | 548 | |
| 549 | 549 | // XXX evil hardcoded |
| 550 | 550 | // we don't really need filesdiv if we do it this way? |
| 551 | | - $j( _this.div ).insertBefore( '#mwe-upwiz-add-file' ); // append( _this.div ); |
| | 551 | + $j( _this.div ).insertBefore( '#mwe-upwiz-add-file-container' ); // append( _this.div ); |
| 552 | 552 | |
| 553 | 553 | // _this.progressBar = ( no progress bar for individual uploads yet ) |
| 554 | 554 | // add a details thing to details |
| — | — | @@ -686,6 +686,7 @@ |
| 687 | 687 | |
| 688 | 688 | if ( ! _this.isFilled ) { |
| 689 | 689 | _this.isFilled = true; |
| | 690 | + $j( _this.div ).addClass( 'filled' ); |
| 690 | 691 | $j( _this.visibleFilename ).show(); |
| 691 | 692 | $j( _this.removeCtrl ).show(); |
| 692 | 693 | $j(_this.div ).css( { |
| — | — | @@ -1722,9 +1723,11 @@ |
| 1723 | 1724 | + '<div id="mwe-upwiz-tabdiv-file">' |
| 1724 | 1725 | + '<div id="mwe-upwiz-intro">' + gM('mwe-upwiz-intro') + '</div>' |
| 1725 | 1726 | + '<div id="mwe-upwiz-files">' |
| 1726 | | - + '<a id="mwe-upwiz-add-file">' + gM("mwe-upwiz-add-file-0") + '</a>' |
| | 1727 | + + '<div class="shim" style="height: 120px"></div>' |
| | 1728 | + + '<div id="mwe-upwiz-add-file-container" class="mwe-upwiz-add-files-0"><a id="mwe-upwiz-add-file">' + gM("mwe-upwiz-add-file-0") + '</a></div>' |
| | 1729 | + + '<div class="clearShim"></div>' |
| 1727 | 1730 | + '</div>' |
| 1728 | | - + '<div><button id="mwe-upwiz-upload-ctrl" disabled="disabled">' + gM("mwe-upwiz-upload") + '</button></div>' |
| | 1731 | + + '<div class="proceed"><button id="mwe-upwiz-upload-ctrl" disabled="disabled">' + gM("mwe-upwiz-upload") + '</button></div>' |
| 1729 | 1732 | + '<div id="mwe-upwiz-progress"></div>' |
| 1730 | 1733 | + '<div style="clear: left;"></div>' |
| 1731 | 1734 | + '</div>' |
| — | — | @@ -1847,7 +1850,7 @@ |
| 1848 | 1851 | * add an Upload |
| 1849 | 1852 | * we create the upload interface, a handler to transport it to the server, |
| 1850 | 1853 | * and UI for the upload itself and the "details" at the second step of the wizard. |
| 1851 | | - * Finally stuff it into an array of uploads. |
| | 1854 | + * we don't yet add it to the list of uploads; that only happens when it gets a real file. |
| 1852 | 1855 | * @return boolean success |
| 1853 | 1856 | */ |
| 1854 | 1857 | newUpload: function() { |
| — | — | @@ -1863,9 +1866,9 @@ |
| 1864 | 1867 | $j( upload ).bind( 'filenameAccepted', function(e) { _this.updateFileCounts(); e.stopPropagation(); } ); |
| 1865 | 1868 | $j( upload ).bind( 'removeUpload', function(e) { _this.removeUpload( upload ); e.stopPropagation(); } ); |
| 1866 | 1869 | $j( upload ).bind( 'filled', function(e) { |
| | 1870 | + _this.newUpload(); |
| 1867 | 1871 | _this.uploads.push( upload ); |
| 1868 | 1872 | _this.updateFileCounts(); |
| 1869 | | - _this.newUpload(); |
| 1870 | 1873 | e.stopPropagation(); |
| 1871 | 1874 | } ); |
| 1872 | 1875 | // XXX bind to some error state |
| — | — | @@ -1879,8 +1882,6 @@ |
| 1880 | 1883 | * We can remove the HTML UI directly, as jquery will just get the parent. |
| 1881 | 1884 | * We need to grep through the array of uploads, since we don't know the current index. |
| 1882 | 1885 | * We need to update file counts for obvious reasons. |
| 1883 | | - * Finally, there is an uncounted upload, waiting to be used, which has a fileInput which covers the |
| 1884 | | - * "add an upload" button. This is absolutely positioned, so it needs to be moved if another upload was removed. |
| 1885 | 1886 | * |
| 1886 | 1887 | * @param upload |
| 1887 | 1888 | */ |
| — | — | @@ -1888,7 +1889,6 @@ |
| 1889 | 1890 | var _this = this; |
| 1890 | 1891 | mw.UploadWizardUtil.removeItem( _this.uploads, upload ); |
| 1891 | 1892 | _this.updateFileCounts(); |
| 1892 | | - _this.uploadToAdd.ui.moveFileInputToCover( '#mwe-upwiz-add-file' ); |
| 1893 | 1893 | }, |
| 1894 | 1894 | |
| 1895 | 1895 | /** |
| — | — | @@ -2019,26 +2019,33 @@ |
| 2020 | 2020 | |
| 2021 | 2021 | /** |
| 2022 | 2022 | * Occurs whenever we need to update the interface based on how many files there are |
| | 2023 | + * Thhere is an uncounted upload, waiting to be used, which has a fileInput which covers the |
| | 2024 | + * "add an upload" button. This is absolutely positioned, so it needs to be moved if another upload was removed. |
| | 2025 | + * The uncounted upload is also styled differently between the zero and n files cases |
| 2023 | 2026 | */ |
| 2024 | 2027 | updateFileCounts: function() { |
| 2025 | 2028 | var _this = this; |
| 2026 | 2029 | |
| 2027 | | - $j( '#mwe-upwiz-add-file' ).html( gM( 'mwe-upwiz-add-file-' + ( _this.uploads.length === 0 ? '0' : 'n' )) ); |
| 2028 | | - |
| 2029 | 2030 | if ( _this.uploads.length ) { |
| 2030 | 2031 | $j( '#mwe-upwiz-upload-ctrl' ).removeAttr( 'disabled' ); |
| | 2032 | + $j( '#mwe-upwiz-add-file' ).html( gM( 'mwe-upwiz-add-file-n' ) ); |
| | 2033 | + $j( '#mwe-upwiz-add-file-container' ).removeClass('mwe-upwiz-add-files-0'); |
| 2031 | 2034 | } else { |
| 2032 | 2035 | $j( '#mwe-upwiz-upload-ctrl' ).attr( 'disabled', 'disabled' ); |
| | 2036 | + $j( '#mwe-upwiz-add-file' ).html( gM( 'mwe-upwiz-add-file-0' ) ); |
| | 2037 | + $j( '#mwe-upwiz-add-file-container' ).addClass('mwe-upwiz-add-files-0'); |
| 2033 | 2038 | } |
| 2034 | 2039 | |
| 2035 | 2040 | if ( _this.uploads.length < _this.maxUploads ) { |
| 2036 | 2041 | $j( '#mwe-upwiz-add-file' ).removeAttr( 'disabled' ); |
| | 2042 | + $j( _this.uploadToAdd.ui.div ).show(); |
| | 2043 | + _this.uploadToAdd.ui.moveFileInputToCover( '#mwe-upwiz-add-file' ); |
| 2037 | 2044 | } else { |
| 2038 | 2045 | $j( '#mwe-upwiz-add-file' ).attr( 'disabled', true ); |
| | 2046 | + $j( _this.uploadToAdd.ui.div ).hide(); |
| 2039 | 2047 | } |
| 2040 | 2048 | |
| 2041 | 2049 | |
| 2042 | | - |
| 2043 | 2050 | }, |
| 2044 | 2051 | |
| 2045 | 2052 | /** |
| Index: branches/js2-work/phase3/js/mwEmbed/modules/UploadWizard/css/uploadWizard.css |
| — | — | @@ -1,6 +1,3 @@ |
| 2 | | -/* XXX all these absolute pixel floats are evil, will bite us when i18n-ized */ |
| 3 | | -/* XXX mwe-upwiz-add-file jumps to the right when all file inputs are removed */ |
| 4 | | - |
| 5 | 2 | form.mwe-upwiz-form { |
| 6 | 3 | display: inline; |
| 7 | 4 | } |
| — | — | @@ -85,12 +82,17 @@ |
| 86 | 83 | padding: 1em; |
| 87 | 84 | } |
| 88 | 85 | |
| 89 | | -#mwe-upwiz-add-file { |
| 90 | | - margin: 8px; |
| 91 | | - padding: 16px; |
| | 86 | + |
| | 87 | +.mwe-upwiz-add-files-0 { |
| | 88 | + margin-top: 40px; |
| | 89 | + text-align: center; |
| 92 | 90 | font-size: 16px; |
| 93 | 91 | } |
| 94 | 92 | |
| | 93 | +#mwe-upwiz-add-file { |
| | 94 | + padding-top: 16px; |
| | 95 | +} |
| | 96 | + |
| 95 | 97 | /* NOT a pseudoclass */ |
| 96 | 98 | #mwe-upwiz-add-file.hover { |
| 97 | 99 | text-decoration: underline; |
| — | — | @@ -121,9 +123,7 @@ |
| 122 | 124 | z-index: 2; |
| 123 | 125 | } |
| 124 | 126 | |
| 125 | | -} |
| 126 | | - |
| 127 | | -.mwe-upwiz-file { |
| | 127 | +.mwe-upwiz-file.filled { |
| 128 | 128 | height: 24px; |
| 129 | 129 | } |
| 130 | 130 | |
| — | — | @@ -131,8 +131,6 @@ |
| 132 | 132 | width: 300px; |
| 133 | 133 | height: 18px; |
| 134 | 134 | float: left; |
| 135 | | - /* top: 0px; */ |
| 136 | | - /* left: 0px; */ |
| 137 | 135 | white-space: nowrap; |
| 138 | 136 | overflow: hidden; |
| 139 | 137 | |
| — | — | @@ -147,13 +145,6 @@ |
| 148 | 146 | } |
| 149 | 147 | |
| 150 | 148 | |
| 151 | | -/* |
| 152 | | -#mwe-upwiz-select-files { |
| 153 | | - float: left; |
| 154 | | - width: 100px; |
| 155 | | -} |
| 156 | | -*/ |
| 157 | | - |
| 158 | 149 | #mwe-upwiz-files { |
| 159 | 150 | /* margin-left: 100px; */ |
| 160 | 151 | } |
| — | — | @@ -229,4 +220,23 @@ |
| 230 | 221 | background: yellow; |
| 231 | 222 | } |
| 232 | 223 | |
| | 224 | +#mwe-upwiz-tabdiv-file { |
| | 225 | + width: 550px; |
| | 226 | +} |
| 233 | 227 | |
| | 228 | + |
| | 229 | +.proceed { |
| | 230 | + text-align: right; |
| | 231 | +} |
| | 232 | + |
| | 233 | +.shim { |
| | 234 | + float:right; |
| | 235 | + width: 1px; |
| | 236 | +} |
| | 237 | + |
| | 238 | +.clearShim { |
| | 239 | + clear: both; |
| | 240 | + height: 1px; |
| | 241 | + overflow: hidden; |
| | 242 | +} |
| | 243 | + |