r111518 MediaWiki - Code Review archive

Repository:MediaWiki
Revision:< r111517‎ | r111518 | r111519 >
Date:00:53, 15 February 2012
Author:werdna
Status:ok
Tags:
Comment:
Use jQuery UI buttons instead of homegrown solution, clean up some JS code, and move the Go button below the checkbox to make it less ugly
Modified paths:
  • /trunk/extensions/ArticleCreationWorkflow/ArticleCreationWorkflow.php (modified) (history)
  • /trunk/extensions/ArticleCreationWorkflow/includes/ArticleCreationTemplates.php (modified) (history)
  • /trunk/extensions/ArticleCreationWorkflow/modules/ext.articleCreation.core/ext.articleCreation.core.css (modified) (history)
  • /trunk/extensions/ArticleCreationWorkflow/modules/ext.articleCreation.user/ext.articleCreation.user.js (modified) (history)

Diff [purge]

Index: trunk/extensions/ArticleCreationWorkflow/includes/ArticleCreationTemplates.php
——@@ -129,8 +129,9 @@
130130
131131 return <<<HTML
132132 <div class="ac-button-wrap">
133 - <a class="ac-article-button ac-button ac-button-$color
 133+ <a class="ac-article-button ac-button
134134 ac-article-$button" data-ac-button="$button"
 135+ data-ac-label="$buttonTitle"
135136 data-ac-color="$color" href="$target">
136137 <div class="ac-arrow ac-arrow-forward">&nbsp;</div>
137138 <div class="ac-button-text">
Index: trunk/extensions/ArticleCreationWorkflow/modules/ext.articleCreation.user/ext.articleCreation.user.js
——@@ -29,31 +29,32 @@
3030 }
3131 });
3232
 33+ ac.panel.find('.ac-button').button( {} );
 34+ ac.panel.find('.ac-action-button').addClass('ui-button-green');
 35+
3336 //setup button hover states
3437 ac.panel
3538 .find( '.ac-article-button' )
 39+ .addClass('ui-button-blue')
 40+ //attach other events here, just making first tooltip for now
 41+ //testing hover effects
 42+ .hover (function (){
 43+ if ( $('.ac-button-selected') )
 44+ return;
 45+
 46+ $( this ).parent()
 47+ .find('.mw-ac-tooltip')
 48+ .show();
 49+ }, function(){
 50+ if ( $(this).hasClass('ac-button-selected') )
 51+ return;
 52+ $( this ).parent()
 53+ .find('.mw-ac-tooltip')
 54+ .hide();
 55+ })
3656 .each( function (i, e) {
37 - var button = $(this).data('ac-button'),
38 - $tooltip;
 57+ var button = $(this).data('ac-button');
3958
40 - $(this)
41 - //attach other events here, just making first tooltip for now
42 - //testing hover effects
43 - .hover (function (){
44 - if ( $('.ac-button-selected') )
45 - return;
46 -
47 - $( this ).parent()
48 - .find('.mw-ac-tooltip')
49 - .show();
50 - }, function(){
51 - if ( $(this).hasClass('ac-button-selected') )
52 - return;
53 - $( this ).parent()
54 - .find('.mw-ac-tooltip')
55 - .hide();
56 - });
57 -
5859 //set the pointy position
5960 var $button = $(this);
6061
——@@ -61,11 +62,8 @@
6263 function() {
6364 ac.setupTipHeights( $(this), $button );
6465 } );
65 - });
66 -
67 - // setup button click states
68 - ac.panel
69 - .find('.ac-article-button')
 66+ })
 67+ // Click states
7068 .click (function (e) {
7169 e.preventDefault();
7270 e.stopPropagation();
——@@ -97,8 +95,8 @@
9896
9997 $( this )
10098 //make it green
101 - .removeClass('ac-button-blue')
102 - .addClass('ac-button-green')
 99+ .removeClass('ui-button-blue')
 100+ .addClass('ui-button-green')
103101 .addClass('ac-button-selected')
104102 .parent()
105103 .find('.mw-ac-tooltip' )
——@@ -107,11 +105,8 @@
108106 .find('.mw-ac-interstitial')
109107 .show();
110108
111 - });
112 -
113 - //setup hover / fade effects
114 - ac.panel
115 - .find('.ac-article-button')
 109+ })
 110+ // Hover states
116111 .hover (function (){
117112 $( '.ac-article-button' )
118113 .not( this )
——@@ -210,11 +205,11 @@
211206 hideInterstitial : function($elements) {
212207 //remove green states and hide their tooltips
213208 $elements
214 - .removeClass('ac-button-green')
 209+ .removeClass('ui-button-green')
215210 .removeClass('ac-button-selected')
216211 .each ( function (i, e) {
217212 var color = $(this).data('ac-color');
218 - $(this) .addClass( 'ac-button-'+color )
 213+ $(this) .addClass( 'ui-button-'+color )
219214 .parent()
220215 .find('.mw-ac-tooltip,.mw-ac-interstitial')
221216 .hide();
Index: trunk/extensions/ArticleCreationWorkflow/modules/ext.articleCreation.core/ext.articleCreation.core.css
——@@ -18,15 +18,16 @@
1919 width: 250px !important;
2020 }
2121
 22+.ac-action-button {
 23+ width: 150px !important;
 24+}
 25+
2226 .ac-button {
23 - display: inline-block;
24 - border-radius: 5px;
25 - color: #FFFFFF !important;
2627 padding: 5px 10px;
2728 margin: 8px 0;
2829 cursor: pointer;
2930 text-decoration: none;
30 - width: 150px;
 31+ text-align: left;
3132 }
3233
3334 .ac-button:hover {
——@@ -37,79 +38,6 @@
3839 opacity: .5;
3940 }
4041
41 -.ac-create-article {
42 - background-color: #3365ba;
43 -}
44 -
45 -.ac-article-wizard {
46 - background-color: #3365ba;
47 -}
48 -
49 -.ac-button-blue {
50 - background-image: linear-gradient(bottom, #21437a 10%, #3366bb 90%);
51 - background-image: -o-linear-gradient(bottom, #21437a 10%, #3366bb 90%);
52 - background-image: -moz-linear-gradient(bottom, #21437a 10%, #3366bb 90%);
53 - background-image: -webkit-linear-gradient(bottom, #21437a 10%, #3366bb 90%);
54 - background-image: -ms-linear-gradient(bottom, #21437a 10%, #3366bb 90%);
55 -
56 - background-image: -webkit-gradient(
57 - linear,
58 - left bottom,
59 - left top,
60 - color-stop(0.1, #21437a),
61 - color-stop(0.9, #3366bb)
62 - );
63 -}
64 -
65 -.ac-button-blue.ac-button-hover {
66 - background-image: linear-gradient(bottom, #43649c 10%, #6699ee 90%);
67 - background-image: -o-linear-gradient(bottom, #43649c 10%, #6699ee 90%);
68 - background-image: -moz-linear-gradient(bottom, #43649c 10%, #6699ee 90%);
69 - background-image: -webkit-linear-gradient(bottom, #43649c 10%, #6699ee 90%);
70 - background-image: -ms-linear-gradient(bottom, #43649c 10%, #6699ee 90%);
71 -
72 - background-image: -webkit-gradient(
73 - linear,
74 - left bottom,
75 - left top,
76 - color-stop(0.1, #43649c),
77 - color-stop(0.9, #6699ee)
78 - );
79 -}
80 -
81 -.ac-button-red {
82 - background-image: linear-gradient(bottom, #850000 10%, #CC0000 90%);
83 - background-image: -o-linear-gradient(bottom, #850000 10%, #CC0000 90%);
84 - background-image: -moz-linear-gradient(bottom, #850000 10%, #CC0000 90%);
85 - background-image: -webkit-linear-gradient(bottom, #850000 10%, #CC0000 90%);
86 - background-image: -ms-linear-gradient(bottom, #850000 10%, #CC0000 90%);
87 -
88 - background-image: -webkit-gradient(
89 - linear,
90 - left bottom,
91 - left top,
92 - color-stop(0.1, #850000),
93 - color-stop(0.9, #CC0000)
94 - );
95 -}
96 -
97 -.ac-button-green {
98 - background-color: #3cb878;
99 - background-image: linear-gradient(bottom, #27784e 10%, #3cb878 90%);
100 - background-image: -o-linear-gradient(bottom, #27784e 10%, #3cb878 90%);
101 - background-image: -moz-linear-gradient(bottom, #27784e 10%, #3cb878 90%);
102 - background-image: -webkit-linear-gradient(bottom, #27784e 10%, #3cb878 90%);
103 - background-image: -ms-linear-gradient(bottom, #27784e 10%, #3cb878 90%);
104 -
105 - background-image: -webkit-gradient(
106 - linear,
107 - left bottom,
108 - left top,
109 - color-stop(0.1, #27784e),
110 - color-stop(0.9, #3cb878)
111 - );
112 -}
113 -
11442 .ac-button-wrap {
11543 position: relative;
11644 }
Index: trunk/extensions/ArticleCreationWorkflow/ArticleCreationWorkflow.php
——@@ -79,6 +79,7 @@
8080 'dependencies' => array(
8181 'ext.articleCreation.core',
8282 'jquery.localize',
 83+ 'jquery.ui.button',
8384 ),
8485 );
8586
——@@ -142,6 +143,13 @@
143144 <div class="mw-ac-tooltip-title"><html:msg key="ac-click-tip-title-create" /></div>
144145 <div class="mw-ac-tooltip-body">
145146 <div class="mw-ac-create-verbiage"><html:msg raw="1" key="ac-create-warning-create" /></div>
 147+ <input
 148+ type="checkbox"
 149+ id="mw-ac-dismiss-create"
 150+ class="ac-dismiss-interstitial" />
 151+ <label for="mw-ac-dismiss-create">
 152+ <html:msg key="ac-create-dismiss" />
 153+ </label>
146154 <div class="ac-button-wrap">
147155 <a class="ac-button-green ac-button ac-action-button" data-ac-action="create">
148156 <div class="ac-arrow ac-arrow-forward">&nbsp;</div>
——@@ -151,13 +159,6 @@
152160 </div>
153161 </a>
154162 </div>
155 - <input
156 - type="checkbox"
157 - id="mw-ac-dismiss-create"
158 - class="ac-dismiss-interstitial" />
159 - <label for="mw-ac-dismiss-create">
160 - <html:msg key="ac-create-dismiss" />
161 - </label>
162163 <div style="clear: both"></div>
163164 </div>
164165 HTML

Status & tagging log