incubator-bloodhound-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From "Apache Bloodhound" <bloodhound-...@incubator.apache.org>
Subject Re: [Apache Bloodhound] #77: Wrong version of bootstrap in dashboard plugins
Date Fri, 15 Jun 2012 04:16:01 GMT
#77: Wrong version of bootstrap in dashboard plugins
------------------------+-------------------------------------
  Reporter:  gjm        |      Owner:  olemis
      Type:  defect     |     Status:  accepted
  Priority:  critical   |  Milestone:  RC1 for initial release
 Component:  dashboard  |    Version:
Resolution:             |   Keywords:
------------------------+-------------------------------------

Comment (by olemis):

 Replying to [comment:11 gjm]:
 > Replying to [comment:9 olemis]:
 > > Patch is tiny indeed . I think we should consider forwarding it to
 Bootstrap to see whether they'll include it or not . Solution is quite
 generic as it only uses `jquery.closest` rather than `jquery.parent` to
 limit the scope of radio groups .
 >
 > I am not convinced that is correct though. What would be wrong with
 this:
 >
 > {{{
 > #!diff
 > Index: bhdashboard/layouts/templates/bs_btnbar.html
 > ===================================================================
 > --- bhdashboard/layouts/templates/bs_btnbar.html      (revision 1349952)
 > +++ bhdashboard/layouts/templates/bs_btnbar.html      (working copy)
 > @@ -6,8 +6,8 @@
 >
 >    <xi:include href="widget_macros.html" />
 >
 > -  <div class="btn-toolbar" data-toggle="buttons-radio">
 > -    <div class="btn-group offset1"
 > +  <div class="btn-toolbar">
 > +    <div class="btn-group offset1" data-toggle="buttons-radio"
 >          py:for="g in layout.toolbar" >
 >        <button data-target="#tb-item-${tb_item.id}" data-toggle="tab"
 >            disabled="${tb_item.widget is None and 'true' or None}"
 > Index: bhdashboard/htdocs/js/bootstrap-button.js
 > ===================================================================
 > --- bhdashboard/htdocs/js/bootstrap-button.js (revision 1349952)
 > +++ bhdashboard/htdocs/js/bootstrap-button.js (working copy)
 > @@ -51,7 +51,7 @@
 >    }
 >
 >    Button.prototype.toggle = function () {
 > -    var $parent = this.$element.closest('[data-toggle="buttons-
 radio"]')
 > +    var $parent = this.$element.parent('[data-toggle="buttons-radio"]')
 >
 >      $parent && $parent
 >        .find('.active')
 > }}}
 >

 Previous design included a button toolbar having three button groups . On
 click then the widget bound to target button should become visible , and
 there's only one such widget visible at a time . As a consequence , a
 single button should be active among all those '''in the toolbar''' . If
 doing what you mention above then e.g. after clicking all buttons then
 there will be one button active for each group in the toolbar , even
 though there'll be only one such widget visible . This is confusing .

 > I struggle to find a reason to justify looking beyond the parent for any
 case. It looks to me like the {{{data-toggle}}} attribute should be on the
 {{{DIV.btn-group}}}.

 Well ... like I mentioned before in previous designs HTML markup for
 button toolbar looks similar to fragment shown below (copied using
 ''Firebug'' and pasted in here ''';)'''

 {{{
 #!xml

   <div data-toggle="buttons-radio" class="btn-toolbar">
     <div class="btn-group offset1">
       <button class="btn disabled " disabled="disabled" data-toggle="tab"
 data-target="#tb-item-d14d398455a14691b090c3823cc56ea1">
         Products
       </button><button class="btn  active" data-toggle="tab" data-target
 ="#tb-item-90be3f73319a4c06a4284b454aaa5cd9">
         My Tickets
       </button><button class="btn  " data-toggle="tab" data-target="#tb-
 item-3213c4411eea4f35a4709db91b0ab3b4">
         All tickets
       </button>
     </div><div class="btn-group offset1">
       <button class="btn disabled " disabled="disabled" data-toggle="tab"
 data-target="#tb-item-c1a76fe8da1f4301b9a65a9ac1204de6">
         Projects
       </button><button class="btn  " data-toggle="tab" data-target="#tb-
 item-0ce23f12b3f24632b0c64727c4e53758">
         Components
       </button>
     </div>
   </div>

 }}}

 First of all , the goal was to enable ''Products'' and ''Projects''
 buttons if multiproduct plugin installed and active . So in few words
 there are two groups but radio behavior spans over the whole button
 toolbar . If using a verbatim copy of ''Bootstrap'' ( i.e. identical to
 what you suggested in patch above ) then e.g. after first click on
 ''Component'' button (hence displaying tag cloud) and second click later
 on ''All Tickets'' button then it'll end up showing two active buttons in
 the toolbar (i.e. ''All tickets'' and ''Components'' will be active)
 whereas tickets list is the only widget displayed . That's not accurate
 and is confusing . In general , as widget is implemented to satisfy a wide
 range of use cases , if a toolbar is generated from `[['Button 1',
 'Button2', 'Button10', 'Button9'], ['Button3', 'Button4'], ['Button5',
 'Button6', 'Button11'], ['Button7', 'Button8']]` then you might end up
 with 4 active buttons (i.e. one for each group ''';)''' and a single
 widget displayed .

 That's the reason for using `data-toggle="buttons-radio"` in `.btn-
 toolbar` panel . Summarizing , that's the scope for radio behavior .
 Nonetheless if this is done then the plugin will be broken considering the
 fact that toolbar is not the parent of any button ... that's why
 `jquery.closest` is needed .

-- 
Ticket URL: <https://issues.apache.org/bloodhound/ticket/77#comment:12>
Apache Bloodhound <https://issues.apache.org/bloodhound/>
The Apache Bloodhound (incubating) issue tracker

Mime
View raw message