Commit fe7b8339327c9a6eca07afc5381b4a9abc66a025
1 parent
5e6af8eb
Exists in
master
and in
1 other branch
On apps/edit page: Replaced IssueTracker radio buttons with nicer active/inactiv…
…e icons. Added desaturated 'inactive' icons.
Showing
10 changed files
with
75 additions
and
13 deletions
Show diff stats
app/views/apps/_fields.html.haml
... | ... | @@ -50,18 +50,26 @@ |
50 | 50 | = f.fields_for :issue_tracker do |w| |
51 | 51 | %div.issue_tracker.nested |
52 | 52 | %div.choose |
53 | - = w.radio_button :type, "IssueTracker", 'data-section' => 'none' | |
54 | - = label_tag :type_none, '(None)', :for => label_for_attr(w, 'type_issuetracker') | |
55 | - = w.radio_button :type, "LighthouseTracker", 'data-section' => 'lighthouse' | |
56 | - = label_tag :type_lighthouseapp, 'Lighthouse', :for => label_for_attr(w, 'type_lighthousetracker') | |
57 | - = w.radio_button :type, "RedmineTracker", 'data-section' => 'redmine' | |
58 | - = label_tag :type_redmine, 'Redmine', :for => label_for_attr(w, 'type_redminetracker') | |
59 | - = w.radio_button :type, "PivotalTracker", 'data-section' => 'pivotal' | |
60 | - = label_tag :type_pivotal, 'Pivotal Tracker', :for => label_for_attr(w, 'type_pivotaltracker') | |
61 | - = w.radio_button :type, "FogbugzTracker", 'data-section' => 'fogbugz' | |
62 | - = label_tag :type_fogbugz, 'FogBugz', :for => label_for_attr(w, 'type_fogbugztracker') | |
63 | - = w.radio_button :type, "MingleTracker", 'data-section' => 'mingle' | |
64 | - = label_tag :type_fogbugz, 'Mingle', :for => label_for_attr(w, 'type_mingletracker') | |
53 | + = label_tag :type_none, :for => label_for_attr(w, 'type_issuetracker'), :class => "label_radio none" do | |
54 | + = w.radio_button :type, "IssueTracker", 'data-section' => 'none' | |
55 | + (None) | |
56 | + = label_tag :type_lighthouseapp, :for => label_for_attr(w, 'type_lighthousetracker'), :class => "label_radio lighthouseapp" do | |
57 | + = w.radio_button :type, "LighthouseTracker", 'data-section' => 'lighthouse' | |
58 | + Lighthouse | |
59 | + = label_tag :type_redmine, :for => label_for_attr(w, 'type_redminetracker'), :class => "label_radio redmine" do | |
60 | + = w.radio_button :type, "RedmineTracker", 'data-section' => 'redmine' | |
61 | + Redmine | |
62 | + = label_tag :type_pivotal, :for => label_for_attr(w, 'type_pivotallabstracker'), :class => "label_radio pivotal" do | |
63 | + = w.radio_button :type, "PivotalLabsTracker", 'data-section' => 'pivotal' | |
64 | + Pivotal Tracker | |
65 | + %br | |
66 | + = label_tag :type_fogbugz, :for => label_for_attr(w, 'type_fogbugztracker'), :class => "label_radio fogbugz" do | |
67 | + = w.radio_button :type, "FogbugzTracker", 'data-section' => 'fogbugz' | |
68 | + FogBugz | |
69 | + = label_tag :type_fogbugz, :for => label_for_attr(w, 'type_mingletracker'), :class => "label_radio mingle" do | |
70 | + = w.radio_button :type, "MingleTracker", 'data-section' => 'mingle' | |
71 | + Mingle | |
72 | + | |
65 | 73 | %div.tracker_params.none{:class => (w.object && !(w.object.class < IssueTracker)) ? 'chosen' : nil} |
66 | 74 | %p When no issue tracker has been configured, you will be able to leave comments on errors. |
67 | 75 | %div.tracker_params.lighthouse{:class => w.object.is_a?(LighthouseTracker) ? 'chosen' : nil} | ... | ... |
4.58 KB
1.57 KB
1.96 KB
799 Bytes
818 Bytes
1.56 KB
1.52 KB
public/javascripts/form.js
... | ... | @@ -7,6 +7,12 @@ $(function(){ |
7 | 7 | |
8 | 8 | if($('div.issue_tracker.nested').length) |
9 | 9 | activateTypeSelector('issue_tracker', 'tracker_params'); |
10 | + | |
11 | + $('body').addClass('has-js'); | |
12 | + $('.label_radio').click(function(){ | |
13 | + activateLabelIcons(); | |
14 | + }); | |
15 | + activateLabelIcons(); | |
10 | 16 | }); |
11 | 17 | |
12 | 18 | function activateNestedForms() { |
... | ... | @@ -96,3 +102,15 @@ function activateCheckboxHooks() { |
96 | 102 | }); |
97 | 103 | } |
98 | 104 | |
105 | + | |
106 | +function activateLabelIcons() { | |
107 | + if ($('.label_radio input').length) { | |
108 | + $('.label_radio').each(function(){ | |
109 | + $(this).removeClass('r_on'); | |
110 | + }); | |
111 | + $('.label_radio input:checked').each(function(){ | |
112 | + $(this).parent('label').addClass('r_on'); | |
113 | + }); | |
114 | + }; | |
115 | +}; | |
116 | + | ... | ... |
public/stylesheets/application.css
... | ... | @@ -532,8 +532,44 @@ div.nested .chosen { |
532 | 532 | display: block !important; |
533 | 533 | } |
534 | 534 | div.nested .choose { |
535 | - margin-bottom: 0.5em; | |
535 | + margin-bottom: 1em; | |
536 | +} | |
537 | +div.issue_tracker.nested img { | |
538 | + vertical-align: middle; | |
539 | +} | |
540 | + | |
541 | +/* Icons for Issue Tracker Radio Buttons */ | |
542 | +div.issue_tracker.nested label.label_radio { | |
543 | + color: #777777; | |
544 | + padding-left: 33px; | |
545 | + background: url(/images/lighthouseapp_create.png) no-repeat; | |
546 | + line-height: 30px; | |
547 | + margin-bottom: 6px; | |
548 | + margin-right: 8px; | |
536 | 549 | } |
550 | +div.issue_tracker.nested .label_radio input { | |
551 | + position: absolute; left: -9999px; | |
552 | +} | |
553 | + | |
554 | +div.issue_tracker.nested label.r_on { | |
555 | + color: #262626; | |
556 | +} | |
557 | + | |
558 | + | |
559 | +/* Inactive icons */ | |
560 | +div.issue_tracker.nested label.none { background: url(/images/none_inactive.png) no-repeat; } | |
561 | +div.issue_tracker.nested label.redmine { background: url(/images/redmine_inactive.png) no-repeat; } | |
562 | +div.issue_tracker.nested label.lighthouseapp { background: url(/images/lighthouseapp_inactive.png) no-repeat; } | |
563 | +div.issue_tracker.nested label.mingle { background: url(/images/mingle_inactive.png) no-repeat; } | |
564 | +div.issue_tracker.nested label.fogbugz { background: url(/images/fogbugz_inactive.png) no-repeat; } | |
565 | +div.issue_tracker.nested label.pivotal { background: url(/images/pivotal_inactive.png) no-repeat; } | |
566 | +/* Active icons */ | |
567 | +div.issue_tracker.nested label.r_on.none { background: url(/images/none_create.png) no-repeat; } | |
568 | +div.issue_tracker.nested label.r_on.redmine { background: url(/images/redmine_create.png) no-repeat; } | |
569 | +div.issue_tracker.nested label.r_on.lighthouseapp { background: url(/images/lighthouseapp_create.png) no-repeat; } | |
570 | +div.issue_tracker.nested label.r_on.mingle { background: url(/images/mingle_create.png) no-repeat; } | |
571 | +div.issue_tracker.nested label.r_on.fogbugz { background: url(/images/fogbugz_create.png) no-repeat; } | |
572 | +div.issue_tracker.nested label.r_on.pivotal { background: url(/images/pivotal_create.png) no-repeat; } | |
537 | 573 | |
538 | 574 | |
539 | 575 | /* Apps Table */ | ... | ... |